diff --git a/app/components/Layout/Header.jsx b/app/components/Layout/Header.jsx index 3b4fb21..855f09e 100644 --- a/app/components/Layout/Header.jsx +++ b/app/components/Layout/Header.jsx @@ -57,10 +57,10 @@ const Header = () => { > Research - {/* */} +
  • { + // For two-column layout, split steps appropriately + const leftColumnSteps = pipelineSteps.slice(0, 4); + const rightColumnSteps = pipelineSteps.slice(4).reverse(); + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {pipelineSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < pipelineSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftColumnSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftColumnSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightColumnSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightColumnSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default BioinformaticsLayout; diff --git a/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx new file mode 100644 index 0000000..fbe0b34 --- /dev/null +++ b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const EnrichmentPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "Annotation", + "Variants Calling - SNVs, Indels, CNVs", + "Mark Duplicates and Post-Processing" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default EnrichmentPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/enrichment-sequencing/page.js b/app/dna-sequencing/enrichment-sequencing/page.js index f952537..c009a2a 100644 --- a/app/dna-sequencing/enrichment-sequencing/page.js +++ b/app/dna-sequencing/enrichment-sequencing/page.js @@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar'; import EnrichmentIntroduction from './components/EnrichmentIntroduction'; import EnrichmentAdvantages from './components/EnrichmentAdvantages'; import EnrichmentSpecifications from './components/EnrichmentSpecifications'; +import EnrichmentPipeline from './components/EnrichmentPipeline'; export default function EnrichmentSequencingPage() { const breadcrumbs = [ @@ -22,6 +23,7 @@ export default function EnrichmentSequencingPage() {
    +
    diff --git a/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx new file mode 100644 index 0000000..6aad3f3 --- /dev/null +++ b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const EpigenomicsPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Aligned to Reference Genome" + ], + middleSteps = [ + "Downstream Advanced Analysis", + "DMR Annotation", + "DMR Identification", + "Peak Calling" + ], + rightSteps = [ + "Distribution in genes & repeats", + "Methylated Distribution", + "Motif Identification", + "Relationship with gene expression", + "Go clustering", + "Pathway analysis" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...middleSteps, ...rightSteps]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Three Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Middle Column */} +
    + {middleSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < middleSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    +
    +
    + {rightSteps.map((step, index) => ( +
    + {step} +
    + ))} +
    +
    +
    +
    + + {/* Horizontal Arrows */} + {/* Arrow from Aligned to Reference Genome to Peak Calling */} +
    + +
    + {/* Arrow from DMR Annotation to right box */} +
    + +
    + {/* Arrow from Peak Calling to right box */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default EpigenomicsPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/epigenomics-sequencing/page.js b/app/dna-sequencing/epigenomics-sequencing/page.js index a29a58a..a635dde 100644 --- a/app/dna-sequencing/epigenomics-sequencing/page.js +++ b/app/dna-sequencing/epigenomics-sequencing/page.js @@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import EpigenomicsIntroduction from './components/EpigenomicsIntroduction'; import EpigenomicsAdvantages from './components/EpigenomicsAdvantages'; import EpigenomicsSpecifications from './components/EpigenomicsSpecifications'; +import EpigenomicsPipeline from './components/EpigenomicsPipeline'; import PageLayout from '../../components/Layout/PageLayout'; export default function EpigenomicsSequencingPage() { @@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
    +
    diff --git a/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx b/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx new file mode 100644 index 0000000..0f421cf --- /dev/null +++ b/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const GenomeMappingPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ], + rightSteps = [ + "Evolutionary Analysis", + "Annotation", + "Variants Calling - structural variants and genomic rearrangements", + "Post-Processing" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default GenomeMappingPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/genome-mapping/page.js b/app/dna-sequencing/genome-mapping/page.js index bfaa8c2..aec3daf 100644 --- a/app/dna-sequencing/genome-mapping/page.js +++ b/app/dna-sequencing/genome-mapping/page.js @@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import GenomeMappingIntroduction from './components/GenomeMappingIntroduction'; import GenomeMappingAdvantages from './components/GenomeMappingAdvantages'; +import GenomeMappingPipeline from './components/GenomeMappingPipeline'; import GenomeMappingSpecifications from './components/GenomeMappingSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -47,6 +48,7 @@ export default function GenomeMappingPage() { {/* Advantages Section */} + {/* Specifications Section */} diff --git a/app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx b/app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx deleted file mode 100644 index 31246c9..0000000 --- a/app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx +++ /dev/null @@ -1,26 +0,0 @@ -// app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx - -const HybridBioinformatics = () => { - return ( -
    -
    -

    - Bioinformatics Pipeline -

    - - {/* Pipeline Image */} -
    -
    - Bioinformatics Pipeline Workflow -
    -
    -
    -
    - ); -}; - -export default HybridBioinformatics; \ No newline at end of file diff --git a/app/dna-sequencing/hybrid-genome-sequencing/components/HybridSequencingPipeline.jsx b/app/dna-sequencing/hybrid-genome-sequencing/components/HybridSequencingPipeline.jsx new file mode 100644 index 0000000..9c7c218 --- /dev/null +++ b/app/dna-sequencing/hybrid-genome-sequencing/components/HybridSequencingPipeline.jsx @@ -0,0 +1,139 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const HybridSequencingPipeline = ({ + title = "Hybrid Sequencing", + leftSteps = [ + "Raw Sequencing Data from Short Read (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Assembly of reads" + ], + rightSteps = [ + "Annotation & Downstream Advanced Analysis", + "Scaffolds of the genome", + "Contigs from short reads and mapped to long reads", + "Genome Assembly (Contigs from short reads)" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-blue-200", + textColor = "text-blue-800", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {/* Left side steps */} + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} + + + + {/* Right side steps in reverse order */} + {[...rightSteps].reverse().map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} + + {/* Long Read Data Box for mobile */} +
    +

    Raw Sequencing Data from Long Read (fastq file)

    +
    +
    ↑ connects to Scaffolds & Contigs
    +
    +
    + + {/* Desktop Layout - Two Columns with Long Read positioned correctly */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow from Assembly of reads to Genome Assembly */} +
    + +
    + + {/* Long Read Data Box positioned to the right of Genome Assembly (same level) */} +
    +
    +

    Raw Sequencing Data from Long Read (fastq file)

    +
    + + {/* Direct vertical line and arrow to Scaffolds */} +
    +
    + +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default HybridSequencingPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/hybrid-genome-sequencing/page.js b/app/dna-sequencing/hybrid-genome-sequencing/page.js index ed08eed..f8b7adc 100644 --- a/app/dna-sequencing/hybrid-genome-sequencing/page.js +++ b/app/dna-sequencing/hybrid-genome-sequencing/page.js @@ -2,7 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import HybridIntroduction from './components/HybridIntroduction'; import HybridAdvantages from './components/HybridAdvantages'; -import HybridBioinformatics from './components/HybridBioinformatics'; +// import HybridSequencingPipeline from './components/HybridSequencingPipeline' import HybridApplications from './components/HybridApplications'; import HybridSpecifications from './components/HybridSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -51,7 +51,7 @@ export default function HybridGenomeSequencingPage() { {/* Bioinformatics Pipeline Section */} - + {/* */} {/* Applications Section */} diff --git a/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx b/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx new file mode 100644 index 0000000..ee62d18 --- /dev/null +++ b/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const MetagenomicsPipeline = ({ + title = "Bioinformatics Pipeline", + leftColumn = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Host Genome" + ], + middleColumn = [ + "Assembly Validation", + "Secondary Assembly (Scaffolds)", + "Primary Assembly (Contigs) using Unaligned Data", + "Remove Aligned reads to Host Genome and Retain only Unaligned Reads" + ], + rightColumn = [ + "Gene Prediction and Gene Annotation", + "Downstream Advanced Analysis" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine all steps for mobile layout + const mobileSteps = [ + ...leftColumn, + ...middleColumn.slice().reverse(), + ...rightColumn + ]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Three Columns */} +
    +
    + {/* Left Column */} +
    + {leftColumn.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftColumn.length - 1 && ( + + )} +     + ))} +
    + + {/* Middle Column */} +
    + {middleColumn.map((step, index) => ( + +
    +

    {step}

    +
    + {index < middleColumn.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightColumn.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightColumn.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrows */} + {/* Arrow from left to middle column */} +
    + +
    + + {/* Arrow from middle to right column */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default MetagenomicsPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/metagenomics-sequencing/page.js b/app/dna-sequencing/metagenomics-sequencing/page.js index d9ee5ac..5e7eb55 100644 --- a/app/dna-sequencing/metagenomics-sequencing/page.js +++ b/app/dna-sequencing/metagenomics-sequencing/page.js @@ -4,6 +4,7 @@ import MetagenomicsIntroduction from './components/MetagenomicsIntroduction'; import MetagenomicsAdvantages from './components/MetagenomicsAdvantages'; import MetagenomicsApplications from './components/MetagenomicsApplications'; import MetagenomicsSpecifications from './components/MetagenomicsSpecifications'; +import MetagenomicsPipeline from './components/MetagenomicsPipeline'; import PageLayout from '../../components/Layout/PageLayout'; export const metadata = { @@ -48,6 +49,7 @@ export default function MetagenomicsSequencingPage() { {/* Advantages Section */} + {/* Applications Section */} diff --git a/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx b/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx new file mode 100644 index 0000000..dff6e14 --- /dev/null +++ b/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const SingleCellPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ], + rightSteps = [ + "Evolutionary Analysis", + "Annotation", + "Variants Calling - SNVs, Indels, CNVs", + "Mark Duplicates and Post-Processing" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default SingleCellPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/single-cell-dna-sequencing/page.js b/app/dna-sequencing/single-cell-dna-sequencing/page.js index d4253b8..5ebba79 100644 --- a/app/dna-sequencing/single-cell-dna-sequencing/page.js +++ b/app/dna-sequencing/single-cell-dna-sequencing/page.js @@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar'; import SingleCellIntroduction from './components/SingleCellIntroduction'; import SingleCellAdvantages from './components/SingleCellAdvantages'; import SingleCellApplications from './components/SingleCellApplications'; +import SingleCellPipeline from './components/SingleCellPipeline'; import SingleCellSpecifications from './components/SingleCellSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -48,6 +49,7 @@ export default function SingleCellDNASequencingPage() { {/* Advantages Section */} + {/* Applications Section */} diff --git a/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx b/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx new file mode 100644 index 0000000..2a3bdc2 --- /dev/null +++ b/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const WGSDeNovoPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Primary Assembly (Contigs)" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "Gene Prediction and Gene Annotation", + "Assembly Validation", + "Secondary Assembly (Scaffolds)" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default WGSDeNovoPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/whole-genome-sequencing/denovo/page.js b/app/dna-sequencing/whole-genome-sequencing/denovo/page.js index 5c8a6c5..5b84f64 100644 --- a/app/dna-sequencing/whole-genome-sequencing/denovo/page.js +++ b/app/dna-sequencing/whole-genome-sequencing/denovo/page.js @@ -3,6 +3,7 @@ import DenovoIntroduction from './components/DenovoIntroduction'; import DenovoAdvantages from './components/DenovoAdvantages'; import DenovoApplications from './components/DenovoApplications'; import DenovoSpecifications from './components/DenovoSpecifications'; +import WGSDeNovoPipeline from './components/WGSDeNovoPipeline'; import PageLayout from '../../../components/Layout/PageLayout'; export default function WholeGenomeDenovoPage() { @@ -24,6 +25,7 @@ export default function WholeGenomeDenovoPage() {
    +
    diff --git a/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx b/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx new file mode 100644 index 0000000..5f1b1d2 --- /dev/null +++ b/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const WGSResequencingPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "Annotation", + "Variants Calling - SNVs, Indels, CNVs", + "Mark Duplicates and Post-Processing" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default WGSResequencingPipeline; \ No newline at end of file diff --git a/app/dna-sequencing/whole-genome-sequencing/resequencing/page.js b/app/dna-sequencing/whole-genome-sequencing/resequencing/page.js index 94fac1f..e815c1a 100644 --- a/app/dna-sequencing/whole-genome-sequencing/resequencing/page.js +++ b/app/dna-sequencing/whole-genome-sequencing/resequencing/page.js @@ -3,6 +3,7 @@ import ResequencingIntroduction from './components/ResequencingIntroduction'; import ResequencingAdvantages from './components/ResequencingAdvantages'; import ResequencingApplications from './components/ResequencingApplications'; import ResequencingSpecifications from './components/ResequencingSpecifications'; +import WGSResequencingPipeline from './components/WGSResequencingPipeline'; import PageLayout from '../../../components/Layout/PageLayout'; export default function WholeGenomeResequencingPage() { @@ -24,6 +25,7 @@ export default function WholeGenomeResequencingPage() {
    +
    diff --git a/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx b/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx new file mode 100644 index 0000000..c93ee8b --- /dev/null +++ b/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx @@ -0,0 +1,137 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const CircularRNAPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "Circular RNA Identification", + "Circular RNA Prediction", + "Back Splicing Junction Reads" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Tablet and Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Custom arrows from "Alignment to Reference Genome" */} +
    +
    + + {/* Arrow 1: Straight horizontal to "Back Splicing Junction Reads" (Unmapped Reads) */} +
    +
    + {/* Horizontal line */} +
    + {/* Arrowhead */} +
    + {/* Label */} +
    + Unmapped Reads +
    +
    +
    + + {/* Arrow 2: Diagonal upward to "Circular RNA Prediction" (Mapped Reads) */} +
    +
    + {/* Diagonal line going up and right */} +
    + {/* Arrowhead positioned at the end of diagonal line */} +
    + {/* Label */} +
    + Mapped Reads +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default CircularRNAPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/circular-rna-sequencing/page.js b/app/rna-sequencing/circular-rna-sequencing/page.js index faf8c8a..4b5b3c6 100644 --- a/app/rna-sequencing/circular-rna-sequencing/page.js +++ b/app/rna-sequencing/circular-rna-sequencing/page.js @@ -1,6 +1,7 @@ import TitleBar from '../../components/shared/TitleBar'; import PageLayout from '../../components/Layout/PageLayout' import CircularIntroduction from './components/CircularIntroduction'; +// import CircularRNAPipeline from './components/CircularRNAPipeline'; import CircularAdvantages from './components/CircularAdvantages'; import CircularApplications from './components/CircularApplications'; import CircularSpecifications from './components/CircularSpecifications'; @@ -20,6 +21,7 @@ export default function CircularRNASequencingPage() { /> + {/* */} diff --git a/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx b/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx new file mode 100644 index 0000000..a0e425b --- /dev/null +++ b/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const DegradomeSequencingPipeline = ({ + title = "Degradome Sequencing", + backgroundColor = "bg-gray-50", + cardColor = "bg-blue-200", + textColor = "text-gray-800", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + const leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome" + ]; + + const rightSteps = [ + "Related miRNA Identification", + "mRNAs Degradome Sites", + "Identify Target mRNAs", + "Retain mRNA data Remove rRNA, tRNA and other RNA" + ]; + + const middleSteps = [ + "Functional Analysis" + ]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {[...leftSteps, ...rightSteps.slice().reverse(), ...middleSteps].map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length + rightSteps.length + middleSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Complex Flow */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Middle Column */} +
    + {middleSteps.map((step, index) => ( +
    +

    {step}

    +
    + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow from left to right (after alignment) */} +
    + +
    + + {/* Bidirectional arrows between middle and right columns */} +
    + + +
    + + {/* Additional arrows for the circular flow in right column */} +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default DegradomeSequencingPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/degradome-sequencing/page.js b/app/rna-sequencing/degradome-sequencing/page.js index a2b64d4..e0a448d 100644 --- a/app/rna-sequencing/degradome-sequencing/page.js +++ b/app/rna-sequencing/degradome-sequencing/page.js @@ -1,6 +1,7 @@ import TitleBar from '../../components/shared/TitleBar'; import DegradomeIntroduction from './components/DegradomeIntroduction'; import DegradomeAdvantages from './components/DegradomeAdvantages'; +import DegradomeSequencingPipeline from './components/DegradomeSequencingPipeline'; import DegradomeApplications from './components/DegradomeApplications'; import DegradomeSpecifications from './components/DegradomeSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -20,6 +21,7 @@ export default function DegradomeSequencingPage() { /> + diff --git a/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx b/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx new file mode 100644 index 0000000..73fc4f7 --- /dev/null +++ b/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx @@ -0,0 +1,134 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const IsoformPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Build Similarity Graph and Polishing" + ], + rightSteps = [ + "Downstream Analysis (Fusion Analysis, Splicing Analysis)", + "Transcript Annotation and Classification", + "Sequencing Merge and Redundancy Removal", + "Alignment to Reference Genome" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Diagonal Arrow from High Quality Sequencing Data to Alignment to Reference Genome */} +
    + + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default IsoformPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/iso-sequencing/page.js b/app/rna-sequencing/iso-sequencing/page.js index 4cb4ea4..ddb4539 100644 --- a/app/rna-sequencing/iso-sequencing/page.js +++ b/app/rna-sequencing/iso-sequencing/page.js @@ -1,6 +1,7 @@ import TitleBar from '../../components/shared/TitleBar'; import IsoIntroduction from './components/IsoIntroduction'; import IsoAdvantages from './components/IsoAdvantages'; +import IsoformPipeline from './components/IsoformPipeline'; import IsoApplications from './components/IsoApplications'; import IsoSpecifications from './components/IsoSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -20,6 +21,7 @@ export default function IsoSequencingPage() { /> + diff --git a/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx b/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx new file mode 100644 index 0000000..e567c1d --- /dev/null +++ b/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx @@ -0,0 +1,195 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const MetatranscriptomicsPipeline = ({ + title = "Metatranscriptomics", + backgroundColor = "bg-gray-50", + cardColor = "bg-blue-200", + textColor = "text-blue-800", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + const topSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control", + "High Quality Sequencing Data (fastq file)", + "Retain mRNA reads and remove rRNA Reads" + ]; + + const bottomLeftSteps = [ + "Reference Genome Alignment", + "Gene Expression Analysis", + "Differential Analysis" + ]; + + const bottomCenterSteps = [ + "Transcript Assembly", + "Structural Identification", + "SNPs, SSRs Analysis eQTLs Analysis" + ]; + + const bottomRightSteps = [ + "Functional Annotation", + "Statistical Analysis" + ]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {topSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < topSteps.length - 1 && ( + + )} +     + ))} + + {/* Bottom sections for mobile */} +
    + {bottomLeftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomLeftSteps.length - 1 && ( + + )} +     + ))} + + {bottomCenterSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomCenterSteps.length - 1 && ( + + )} +     + ))} + + {bottomRightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomRightSteps.length - 1 && ( + + )} +     + ))} +
    +
    +
    + + {/* Desktop Layout */} +
    + {/* Top vertical sequence */} +
    + {topSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < topSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Branching arrows from "Retain mRNA reads and remove rRNA Reads" */} +
    +
    + {/* Left branch arrow */} +
    + +
    + + {/* Right branch arrow */} +
    + +
    +
    +
    + + {/* Bottom three columns */} +
    + {/* Left Column */} +
    + {bottomLeftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomLeftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Center Column */} +
    + {bottomCenterSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomCenterSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {bottomRightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < bottomRightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal arrows connecting bottom sections */} +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default MetatranscriptomicsPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/metatranscriptomics-sequencing/page.js b/app/rna-sequencing/metatranscriptomics-sequencing/page.js index 065723c..bea1d59 100644 --- a/app/rna-sequencing/metatranscriptomics-sequencing/page.js +++ b/app/rna-sequencing/metatranscriptomics-sequencing/page.js @@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import MetatranscriptomicsIntroduction from './components/MetatranscriptomicsIntroduction'; import MetatranscriptomicsAdvantages from './components/MetatranscriptomicsAdvantages'; import MetatranscriptomicsApplications from './components/MetatranscriptomicsApplications'; +import MetatranscriptomicsPipeline from './components/MetatranscriptomicsPipeline'; import MetatranscriptomicsSpecifications from './components/MetatranscriptomicsSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -20,6 +21,7 @@ export default function MetatranscriptomicsSequencingPage() { /> + diff --git a/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx b/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx new file mode 100644 index 0000000..6b5f8e5 --- /dev/null +++ b/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const MRNAPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome", + "Transcript Assembly" + ], + rightSteps = [ + "Downstream Analysis", + "Differential Expression Profiling", + "Annotation", + "Transcript Expression Profiling", + "Transcript Assembly Validation" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default MRNAPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/mrna-sequencing/page.js b/app/rna-sequencing/mrna-sequencing/page.js index e86b1dc..a10edad 100644 --- a/app/rna-sequencing/mrna-sequencing/page.js +++ b/app/rna-sequencing/mrna-sequencing/page.js @@ -5,6 +5,7 @@ import MRNAAdvantages from './components/MRNAAdvantages'; import MRNAApplications from './components/MRNAApplications'; import MRNASpecifications from './components/MRNASpecifications'; import PageLayout from '../../components/Layout/PageLayout'; +import MRNAPipeline from './components/MRNAPipeline'; export default function MRNASequencingPage() { const breadcrumbs = [ @@ -21,6 +22,7 @@ export default function MRNASequencingPage() { /> + diff --git a/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx b/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx new file mode 100644 index 0000000..12495b4 --- /dev/null +++ b/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const SingleCellPipeline = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Alignment to Reference Genome", + "Transcript and Gene Expression Profiling" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "GO/KEGG Enrichment", + "Differential Expression Profiling", + "Cell Clustering Cell definition (SingleR)", + "Cell filter and Data Normalisation" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; + + return ( +
    +
    +

    + {title} +

    + + {/* Pipeline Flowchart */} +
    +
    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default SingleCellPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/single-cell-rna-sequencing/page.js b/app/rna-sequencing/single-cell-rna-sequencing/page.js index cbbb009..b369a14 100644 --- a/app/rna-sequencing/single-cell-rna-sequencing/page.js +++ b/app/rna-sequencing/single-cell-rna-sequencing/page.js @@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import SingleCellIntroduction from './components/SingleCellIntroduction'; import SingleCellAdvantages from './components/SingleCellAdvantages'; import SingleCellApplications from './components/SingleCellApplications'; +import SingleCellPipeline from './components/SingleCellPipeline'; import SingleCellSpecifications from './components/SingleCellSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -20,6 +21,7 @@ export default function SingleCellRNASequencingPage() { /> + diff --git a/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx b/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx index 7d7d9f0..c33c977 100644 --- a/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx +++ b/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx @@ -1,28 +1,100 @@ -// app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx +import React from 'react'; +import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; + +const SRNABioinformatics = ({ + title = "Bioinformatics Pipeline", + leftSteps = [ + "Raw Sequencing Data (fastq files)", + "Quality Control and Preprocessing of Data", + "High Quality Sequencing Data (fastq file)", + "Blast Against mRNA, Rfam and RepBase", + "Retained data with no annotation and remove data annotated with mRNA, Rfam and RepBase" + ], + rightSteps = [ + "Downstream Advanced Analysis", + "Identification of known and Novel microRNA", + "Hairpin Prediction", + "Aligned to Genome", + "Aligned to Genome" + ], + backgroundColor = "bg-gray-50", + cardColor = "bg-gray-300", + textColor = "text-teal-600", + arrowColor = "text-gray-600", + className = "", + cardClassName = "", + titleClassName = "" +}) => { + // Combine steps for mobile layout + const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; -const SRNABioinformatics = () => { return ( -
    -
    -

    - Bioinformatics Pipeline +
    +
    +

    + {title}

    - - {/* Pipeline Image */} -
    + + {/* Pipeline Flowchart */} +
    - Small RNA Sequencing Bioinformatics Pipeline Workflow -
    - - {/* Pipeline Description */} -
    -

    - Small RNA sequencing bioinformatics pipeline for miRNA and small RNA analysis and expression profiling -

    +
    +
    + {/* Mobile Layout - Single Column */} +
    +
    + {mobileSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < mobileSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Desktop Layout - Two Columns */} +
    +
    + {/* Left Column */} +
    + {leftSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < leftSteps.length - 1 && ( + + )} +     + ))} +
    + + {/* Right Column */} +
    + {rightSteps.map((step, index) => ( + +
    +

    {step}

    +
    + {index < rightSteps.length - 1 && ( + + )} +     + ))} +
    +
    + + {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} +
    + +
    +
    +
    +
    diff --git a/package-lock.json b/package-lock.json index 613e8df..88dad63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "nextjs", "version": "0.1.0", "dependencies": { + "lucide-react": "^0.525.0", "next": "^15.2.0", "nodemailer": "^7.0.3", "react": "^19.0.0", @@ -4238,6 +4239,15 @@ "dev": true, "license": "ISC" }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/package.json b/package.json index 45d849b..00aa678 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "lucide-react": "^0.525.0", "next": "^15.2.0", "nodemailer": "^7.0.3", "react": "^19.0.0", diff --git a/tsconfig.json b/tsconfig.json index d8b9323..b2bddea 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx"], "exclude": ["node_modules"] }