Skip to content

Commit fde211d

Browse files
pranjalpruthipranjalpruthi
committed
added docs beta 🔥 using fuma docs
1 parent 1a46b9f commit fde211d

21 files changed

+357
-50
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ yarn-debug.log*
66
yarn-error.log*
77
lerna-debug.log*
88
.pnpm-debug.log*
9-
9+
.source
1010
# Diagnostic reports (https://nodejs.org/api/report.html)
1111
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
1212

‎app/api/search/route.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { source } from '@/lib/source';
2+
import { createFromSource } from 'fumadocs-core/search/server';
3+
4+
export const { GET } = createFromSource(source);

‎app/chitra/chromosome-synteny.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
import { Badge } from "@/components/ui/badge";
2323
import { Switch } from "@/components/ui/switch";
2424
import { Label } from "@/components/ui/label";
25-
import React from "react";
25+
import React, { ReactElement } from "react";
2626
import {
2727
CHROMOSOME_CONFIG,
2828
SYNTENY_COLORS,
@@ -59,7 +59,7 @@ interface Dimensions {
5959
interface TooltipInfo {
6060
x: number;
6161
y: number;
62-
content: string | GeneTooltipData | JSX.Element;
62+
content: string | GeneTooltipData | ReactElement;
6363
isOpen: boolean;
6464
type?: 'gene' | 'synteny' | 'chromosome';
6565
data?: GeneTooltipData | ChromosomeData;

‎app/chitra/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -431,8 +431,8 @@ export default function ChromoViz() {
431431
const [alignmentFilter, setAlignmentFilter] = useState<'all' | 'forward' | 'reverse'>('all');
432432
const [isFullscreen, setIsFullscreen] = useState(false);
433433
const [isDetailedViewFullscreen, setIsDetailedViewFullscreen] = useState(false);
434-
const svgRef = useRef<SVGSVGElement>(null);
435-
const containerRef = useRef<HTMLDivElement>(null);
434+
const svgRef = useRef<SVGSVGElement>(null) as React.RefObject<SVGSVGElement>;
435+
const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
436436
const zoomBehaviorRef = useRef<any>(null);
437437
const [showAnnotations, setShowAnnotations] = useState(false);
438438
const [showWelcomeCard, setShowWelcomeCard] = useState(true);

‎app/docs/[[...slug]]/page.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { source } from '@/lib/source';
2+
import {
3+
DocsPage,
4+
DocsBody,
5+
DocsTitle,
6+
DocsDescription,
7+
} from 'fumadocs-ui/page';
8+
import { notFound } from 'next/navigation';
9+
import defaultMdxComponents from 'fumadocs-ui/mdx';
10+
//import { metadataImage } from '@/lib/metadata';
11+
12+
export default async function Page(props: {
13+
params: Promise<{ slug?: string[] }>;
14+
}) {
15+
const params = await props.params;
16+
const page = source.getPage(params.slug);
17+
if (!page) notFound();
18+
19+
const MDX = page.data.body;
20+
21+
return (
22+
<DocsPage
23+
toc={page.data.toc}
24+
full={page.data.full}
25+
tableOfContent={{
26+
style: 'clerk',
27+
enabled: true
28+
}}
29+
tableOfContentPopover={{
30+
style: 'clerk',
31+
enabled: true
32+
}}
33+
editOnGithub={{
34+
owner: 'pranjalpruthi',
35+
repo: 'CHITRA',
36+
sha: 'main',
37+
path: `content/docs/${page.data._file?.path || ''}`
38+
}}
39+
>
40+
<DocsTitle>{page.data.title}</DocsTitle>
41+
<DocsDescription>{page.data.description}</DocsDescription>
42+
<DocsBody>
43+
<MDX components={{ ...defaultMdxComponents }} />
44+
</DocsBody>
45+
</DocsPage>
46+
);
47+
}
48+
49+
export async function generateStaticParams() {
50+
return source.generateParams();
51+
}
52+
53+
export async function generateMetadata(props: {
54+
params: Promise<{ slug?: string[] }>;
55+
}) {
56+
const params = await props.params;
57+
const page = source.getPage(params.slug);
58+
if (!page) notFound();
59+
60+
//return metadataImage.withImage(page.slugs, {
61+
//title: page.data.title,
62+
//description: page.data.description,
63+
//});
64+
}

‎app/docs/layout.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { source } from '@/lib/source';
2+
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
3+
import type { ReactNode } from 'react';
4+
import { baseOptions } from '@/app/layout.config';
5+
6+
export default function Layout({ children }: { children: ReactNode }) {
7+
return (
8+
<DocsLayout tree={source.pageTree} {...baseOptions}>
9+
{children}
10+
</DocsLayout>
11+
);
12+
}

‎app/layout.config.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
2+
import { DnaIcon, Sparkles } from 'lucide-react';
3+
import { ShinyRotatingBorderButton } from '@/components/ui/shiny-rotating-border-button';
4+
5+
export const baseOptions: BaseLayoutProps = {
6+
nav: {
7+
title: (
8+
<ShinyRotatingBorderButton className="!p-2">
9+
<div className="flex items-center gap-2">
10+
<DnaIcon className="h-6 w-6" />
11+
<span>CHITRA</span>
12+
</div>
13+
</ShinyRotatingBorderButton>
14+
),
15+
url: '/',
16+
},
17+
githubUrl: 'https://github.com/pranjalpruthi/CHITRA',
18+
links: [
19+
{
20+
type: 'button',
21+
text: 'Feedback',
22+
url: 'https://github.com/pranjalpruthi/CHITRA/issues/new',
23+
},
24+
],
25+
};

‎app/layout.tsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Analytics } from "@vercel/analytics/react"
66
import { GeistSans } from 'geist/font/sans'
77
import type { Metadata } from 'next'
88
import './globals.css'
9+
import { RootProvider } from 'fumadocs-ui/provider';
910

1011
export const metadata: Metadata = {
1112
metadataBase: new URL("https://starter.rasmic.xyz"),
@@ -50,21 +51,21 @@ export default function RootLayout({
5051
as="image"
5152
/>
5253
</head>
53-
<body className={GeistSans.className}>
54-
{/* <Provider> */}
55-
<ThemeProvider
56-
attribute="class"
57-
defaultTheme="system"
58-
enableSystem
59-
disableTransitionOnChange
60-
storageKey="chitra-theme"
61-
forcedTheme={undefined}
62-
themes={['light', 'dark', 'system']}
63-
>
54+
<body className={`${GeistSans.className} flex min-h-screen flex-col`}>
55+
<ThemeProvider
56+
attribute="class"
57+
defaultTheme="system"
58+
enableSystem
59+
disableTransitionOnChange
60+
storageKey="chitra-theme"
61+
forcedTheme={undefined}
62+
themes={['light', 'dark', 'system']}
63+
>
64+
<RootProvider>
6465
{children}
6566
<Toaster />
66-
</ThemeProvider>
67-
{/* </Provider> */}
67+
</RootProvider>
68+
</ThemeProvider>
6869
<Analytics />
6970
</body>
7071
</html>

‎bun.lockb

-43.2 KB
Binary file not shown.

‎components/chromoviz/tooltip.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
55
import { cn } from "@/lib/utils";
66
import { ArrowRight, ArrowLeft } from "lucide-react";
77
import { ChromosomeData, SyntenyData, GeneAnnotation } from "@/app/types";
8-
import React from "react";
8+
import React, { ReactElement } from "react";
99

1010
const glassEffect = cn(
1111
"bg-gradient-to-br from-white/90 to-white/80 dark:from-gray-950/90 dark:to-gray-950/80",
@@ -15,7 +15,7 @@ const glassEffect = cn(
1515
"hover:shadow-xl transition-shadow duration-300"
1616
);
1717

18-
export function getChromosomeTooltip(chr: ChromosomeData): JSX.Element {
18+
export function getChromosomeTooltip(chr: ChromosomeData): ReactElement {
1919
const mbSize = (chr.chr_size_bp / 1_000_000).toFixed(2);
2020
const centromereInfo = chr.centromere_start && chr.centromere_end
2121
? {
@@ -162,7 +162,7 @@ export function getChromosomeTooltip(chr: ChromosomeData): JSX.Element {
162162
);
163163
}
164164

165-
export function getSyntenyTooltip(link: SyntenyData): JSX.Element {
165+
export function getSyntenyTooltip(link: SyntenyData): ReactElement {
166166
const refMb = {
167167
start: (link.ref_start / 1_000_000).toFixed(2),
168168
end: (link.ref_end / 1_000_000).toFixed(2)

‎content/docs/example-datasets.mdx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Example Datasets
3+
description: Explore CHITRA's example datasets and their usage
4+
icon: DatabaseIcon
5+
---
6+
7+
# Example Datasets
8+
9+
CHITRA includes pre-loaded example datasets to help users explore its functionality. Three types of example datasets are available:
10+
11+
1. **Basic Synteny**
12+
- Visualize synteny blocks among **three species**
13+
- Input files required:
14+
- synteny_data.csv
15+
- species_data.csv
16+
- reference_chromosome_sizes.csv
17+
18+
2. **Multiple Synteny**
19+
- Compare synteny blocks among **multiple species**
20+
- Input files required same as **Basic Synteny**
21+
22+
3. **Annotated Genome**
23+
- Analyze **annotated genomes** using real datasets
24+
- Input files required:
25+
- All files from Multiple Synteny
26+
- ref_gene_annotations.csv
27+
- breakpoints.csv
28+
29+
## Exploring Example Data
30+
31+
- Select any of the three options (**Basic Synteny**, **Multiple Synteny**, or **Annotated Genome**) to access comparative visualizations directly.
32+
- Alternatively, click the **"Examples"** button first to explore the input files for each dataset type and then click on load (on the left corner of the page) to visualise.
33+
- By clicking on any CSV file, you can:
34+
- View all column names
35+
- Use the **"Preview Data"** option to inspect file contents
36+
- Download the file using the **"Download File"** button

‎content/docs/features.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Interactive Features
3+
description: Explore CHITRA's interactive features and tools
4+
icon: SlidersHorizontalIcon
5+
---
6+
7+
# Useful Interactive Features
8+
9+
The tool is equipped with several interactive features to enhance user experience and make data visualization seamless:
10+
11+
1. **Zoom Option:**
12+
- Use the mouse scroll button to zoom in and out of the synteny plot
13+
- Alternatively, click the **zoom icon** located at the upper-right corner of the image for precise control
14+
15+
2. **Adjust Image with Arrows:**
16+
- Utilize the arrows at the **left corner** of the page to reposition the image and adjust its alignment as needed
17+
18+
3. **Scrolling Bar:**
19+
- A **scrolling bar** is available below the synteny plot to view the complete image from end to end
20+
21+
4. **Background Color Mode:**
22+
- Switch between **black** and **white** background modes for optimal visualization
23+
- The option is accessible via the **navigation bar** or the upper-right corner of the page
24+
25+
5. **Chord Map Settings:**
26+
- For a customized view of the chord map, a **settings option** is provided just above the map
27+
28+
6. **Navigation Bar:**
29+
The **movable navigation bar** includes:
30+
- **Go Back Button:** Return to the previous step
31+
- **Upload Option:** Upload data files directly
32+
- **Example Data:** Load example datasets
33+
- **Filter Button:** Filter required synteny blocks
34+
- **Hide Button:** Toggle synteny block details
35+
- **View Button:** Access uploaded data
36+
- **Background Color Option:** Switch between black and white modes
37+
- **Orientation Option:** Adjust navigation bar position
38+
39+
# Annotations and Chromosomal Breakpoint Visualization
40+
41+
To visualize chromosomal breakpoints in the reference genome, users can explore the example dataset labeled **"Annotated Genome"**. This dataset includes additional information, such as annotations and chromosomal breakpoints, alongside synteny block data.
42+
43+
Key visualization features:
44+
- **Chromosomal breakpoints** in the reference genome are shown as **red arrows** in the synteny plot
45+
- Breakpoints are highlighted in the **chord map** as **red lines** on the reference genome chord
46+
- These features enable precise identification of structural changes and their genomic locations

‎content/docs/getting-started.mdx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Getting Started
3+
description: Learn how to get started with CHITRA
4+
icon: BookOpenIcon
5+
---
6+
7+
# Getting Started with CHITRA
8+
9+
## How to Use CHITRA?
10+
11+
Below are the step-by-step instructions, accompanied by pictorial representations, to ensure a seamless experience with CHITRA.
12+
13+
### Step 1: Getting Started
14+
15+
- On the landing page, click the "Get Started" button to begin.
16+
17+
### Step 2: Uploading Files or Viewing Example Data
18+
19+
On the next page, you can either:
20+
1. Upload Files
21+
2. View Example Datasets
22+
23+
#### File Upload Instructions
24+
25+
**Mandatory Input Files:**
26+
1. Synteny Data
27+
2. Species Data
28+
3. Reference Chromosome Sizes
29+
30+
**Optional Input Files:**
31+
1. Gene Annotations
32+
2. Breakpoint Data
33+
34+
To upload files:
35+
- Click the **"Upload Data"** button. A popup window will appear where you can browse and upload the required input files.
36+
> **Note**: All input files should be in CSV format

‎content/docs/index.mdx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: Introduction
3+
description: A comprehensive guide to using CHITRA for analyzing chromosomal rearrangements
4+
icon: HomeIcon
5+
---
6+
7+
# CHITRA
8+
9+
The Chromosome Interactive Tool for Rearrangement Analysis (CHITRA) is an advanced bioinformatics tool designed to study chromosomal rearrangements by providing detailed and interactive visualizations of synteny blocks and chromosome breakpoints. This tool is a powerful resource for investigating evolutionary dynamics across multiple species.
10+
11+
## Features
12+
13+
1. **Synteny Block Visualization:** Conserved regions of chromosomes between different species can be visualised and easy to analyse in forward and inverse direction
14+
15+
2. **Chromosome Breakpoint Analysis:** Breakpoints are mapped and visualized to help researchers identify evolutionary events and their impact on genome organization
16+
17+
3. **Evolutionary Insights:** By analyzing the rearrangement patterns, it supports hypotheses about evolutionary pressures and genetic innovations
18+
19+
4. **User-Friendly Visualization:** Users can dynamically adjust views, compare species, and zoom into specific chromosomal regions of interest
20+
21+
## What are Synteny Blocks?
22+
23+
A synteny block refers to a conserved segment of a genome where genes or sequences are found in the same relative order and orientation across different species or strains. These blocks provide insights into the evolutionary relationships between organisms, helping researchers understand genomic rearrangements, speciation, and structural changes.

0 commit comments

Comments
 (0)