Flowchart update
This commit is contained in:
mukesh13
@ -57,10 +57,10 @@ const Header = () => {
|
|||||||
>
|
>
|
||||||
Research
|
Research
|
||||||
</Link>
|
</Link>
|
||||||
{/* <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
|
<ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
|
||||||
<li className="relative group/dna">
|
<li className="relative group/dna">
|
||||||
<Link
|
<Link
|
||||||
href="/dna-sequencing"
|
href="#"
|
||||||
className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600 border-b border-gray-50"
|
className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600 border-b border-gray-50"
|
||||||
>
|
>
|
||||||
<span className="font-medium">DNA Sequencing</span>
|
<span className="font-medium">DNA Sequencing</span>
|
||||||
@ -285,7 +285,7 @@ const Header = () => {
|
|||||||
</li>
|
</li>
|
||||||
<li className="relative group/rna">
|
<li className="relative group/rna">
|
||||||
<Link
|
<Link
|
||||||
href="/rna-sequencing"
|
href="#"
|
||||||
className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||||
>
|
>
|
||||||
<span className="font-medium">RNA Sequencing</span>
|
<span className="font-medium">RNA Sequencing</span>
|
||||||
@ -368,7 +368,7 @@ const Header = () => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> */}
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
|
|||||||
92
app/components/shared/BioinformaticsLayout.jsx
Normal file
92
app/components/shared/BioinformaticsLayout.jsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||||
|
|
||||||
|
const BioinformaticsLayout = ({
|
||||||
|
title = "Bioinformatics Pipeline",
|
||||||
|
pipelineSteps = [],
|
||||||
|
sectionBackground = "bg-gray-50",
|
||||||
|
cardBackground = "bg-white",
|
||||||
|
titleColor = "text-gray-600",
|
||||||
|
stepBackground = "bg-[#e8f5f3]",
|
||||||
|
stepTextColor = "text-teal-600",
|
||||||
|
arrowColor = "text-gray-600"
|
||||||
|
}) => {
|
||||||
|
// For two-column layout, split steps appropriately
|
||||||
|
const leftColumnSteps = pipelineSteps.slice(0, 4);
|
||||||
|
const rightColumnSteps = pipelineSteps.slice(4).reverse();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-8 ${sectionBackground}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`${titleColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className={`${cardBackground} rounded-xl shadow-lg p-4 sm:p-6 lg:p-8`}>
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{pipelineSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${stepBackground} rounded-lg p-3 w-full text-center`}>
|
||||||
|
<h3 className={`text-xs font-medium ${stepTextColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < pipelineSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftColumnSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftColumnSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightColumnSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightColumnSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BioinformaticsLayout;
|
||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnrichmentPipeline;
|
||||||
@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
|||||||
import EnrichmentIntroduction from './components/EnrichmentIntroduction';
|
import EnrichmentIntroduction from './components/EnrichmentIntroduction';
|
||||||
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
|
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
|
||||||
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
|
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
|
||||||
|
import EnrichmentPipeline from './components/EnrichmentPipeline';
|
||||||
|
|
||||||
export default function EnrichmentSequencingPage() {
|
export default function EnrichmentSequencingPage() {
|
||||||
const breadcrumbs = [
|
const breadcrumbs = [
|
||||||
@ -22,6 +23,7 @@ export default function EnrichmentSequencingPage() {
|
|||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
<EnrichmentIntroduction />
|
<EnrichmentIntroduction />
|
||||||
<EnrichmentAdvantages />
|
<EnrichmentAdvantages />
|
||||||
|
<EnrichmentPipeline/>
|
||||||
<EnrichmentSpecifications />
|
<EnrichmentSpecifications />
|
||||||
</div>
|
</div>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-7xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block lg:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Three Columns */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<div className="grid grid-cols-3 gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{middleSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < middleSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<div className={`${cardColor} rounded-lg p-12 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<div key={index} className={`text-sm font-medium ${textColor}`}>
|
||||||
|
{step}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrows */}
|
||||||
|
{/* Arrow from Aligned to Reference Genome to Peak Calling */}
|
||||||
|
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
{/* Arrow from DMR Annotation to right box */}
|
||||||
|
<div className="absolute top-28 left-2/3 transform -translate-x-1/2">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
{/* Arrow from Peak Calling to right box */}
|
||||||
|
<div className="absolute bottom-4 left-2/3 transform -translate-x-1/2">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EpigenomicsPipeline;
|
||||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
|||||||
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
|
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
|
||||||
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
|
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
|
||||||
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
|
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
|
||||||
|
import EpigenomicsPipeline from './components/EpigenomicsPipeline';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
export default function EpigenomicsSequencingPage() {
|
export default function EpigenomicsSequencingPage() {
|
||||||
@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
|
|||||||
|
|
||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
<EpigenomicsIntroduction />
|
<EpigenomicsIntroduction />
|
||||||
|
<EpigenomicsPipeline/>
|
||||||
<EpigenomicsAdvantages />
|
<EpigenomicsAdvantages />
|
||||||
<EpigenomicsSpecifications />
|
<EpigenomicsSpecifications />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GenomeMappingPipeline;
|
||||||
@ -2,6 +2,7 @@
|
|||||||
import TitleBar from '../../components/shared/TitleBar';
|
import TitleBar from '../../components/shared/TitleBar';
|
||||||
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
|
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
|
||||||
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
|
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
|
||||||
|
import GenomeMappingPipeline from './components/GenomeMappingPipeline';
|
||||||
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
|
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
@ -47,6 +48,7 @@ export default function GenomeMappingPage() {
|
|||||||
|
|
||||||
{/* Advantages Section */}
|
{/* Advantages Section */}
|
||||||
<GenomeMappingAdvantages />
|
<GenomeMappingAdvantages />
|
||||||
|
<GenomeMappingPipeline/>
|
||||||
|
|
||||||
{/* Specifications Section */}
|
{/* Specifications Section */}
|
||||||
<GenomeMappingSpecifications />
|
<GenomeMappingSpecifications />
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
// app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx
|
|
||||||
|
|
||||||
const HybridBioinformatics = () => {
|
|
||||||
return (
|
|
||||||
<section className="py-8 lg:py-12 bg-gray-50">
|
|
||||||
<div className="container mx-auto max-w-none px-4 lg:px-6">
|
|
||||||
<h2 className="text-gray-600 text-left pb-6 text-2xl lg:text-3xl font-normal mb-8">
|
|
||||||
Bioinformatics Pipeline
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{/* Pipeline Image */}
|
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<img
|
|
||||||
src="/images/bioinformatics-pipeline.jpg"
|
|
||||||
alt="Bioinformatics Pipeline Workflow"
|
|
||||||
className="max-w-full h-auto rounded-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HybridBioinformatics;
|
|
||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-7xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{/* Left side steps */}
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={`left-${index}`}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<ArrowRight className={`w-5 h-5 ${arrowColor} my-2`} />
|
||||||
|
|
||||||
|
{/* Right side steps in reverse order */}
|
||||||
|
{[...rightSteps].reverse().map((step, index) => (
|
||||||
|
<React.Fragment key={`right-${index}`}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Long Read Data Box for mobile */}
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName} mt-4`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 text-center">↑ connects to Scaffolds & Contigs</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Two Columns with Long Read positioned correctly */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-8 lg:gap-12">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={`left-${index}`}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={`right-${index}`}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow from Assembly of reads to Genome Assembly */}
|
||||||
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Long Read Data Box positioned to the right of Genome Assembly (same level) */}
|
||||||
|
<div className="absolute bottom-4 right-0 transform translate-x-72">
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Direct vertical line and arrow to Scaffolds */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 -top-44">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
<div className="w-0.5 h-36 bg-gray-400"></div>
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HybridSequencingPipeline;
|
||||||
@ -2,7 +2,7 @@
|
|||||||
import TitleBar from '../../components/shared/TitleBar';
|
import TitleBar from '../../components/shared/TitleBar';
|
||||||
import HybridIntroduction from './components/HybridIntroduction';
|
import HybridIntroduction from './components/HybridIntroduction';
|
||||||
import HybridAdvantages from './components/HybridAdvantages';
|
import HybridAdvantages from './components/HybridAdvantages';
|
||||||
import HybridBioinformatics from './components/HybridBioinformatics';
|
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||||
import HybridApplications from './components/HybridApplications';
|
import HybridApplications from './components/HybridApplications';
|
||||||
import HybridSpecifications from './components/HybridSpecifications';
|
import HybridSpecifications from './components/HybridSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
@ -51,7 +51,7 @@ export default function HybridGenomeSequencingPage() {
|
|||||||
<HybridAdvantages />
|
<HybridAdvantages />
|
||||||
|
|
||||||
{/* Bioinformatics Pipeline Section */}
|
{/* Bioinformatics Pipeline Section */}
|
||||||
<HybridBioinformatics />
|
{/* <HybridSequencingPipeline /> */}
|
||||||
|
|
||||||
{/* Applications Section */}
|
{/* Applications Section */}
|
||||||
<HybridApplications />
|
<HybridApplications />
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-600 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-6xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block lg:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Three Columns */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<div className="grid grid-cols-3 gap-6 lg:gap-10">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftColumn.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftColumn.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{middleColumn.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < middleColumn.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightColumn.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightColumn.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrows */}
|
||||||
|
{/* Arrow from left to middle column */}
|
||||||
|
<div className="absolute bottom-8 left-1/3 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow from middle to right column */}
|
||||||
|
<div className="absolute top-4 right-1/3 transform translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MetagenomicsPipeline;
|
||||||
@ -4,6 +4,7 @@ import MetagenomicsIntroduction from './components/MetagenomicsIntroduction';
|
|||||||
import MetagenomicsAdvantages from './components/MetagenomicsAdvantages';
|
import MetagenomicsAdvantages from './components/MetagenomicsAdvantages';
|
||||||
import MetagenomicsApplications from './components/MetagenomicsApplications';
|
import MetagenomicsApplications from './components/MetagenomicsApplications';
|
||||||
import MetagenomicsSpecifications from './components/MetagenomicsSpecifications';
|
import MetagenomicsSpecifications from './components/MetagenomicsSpecifications';
|
||||||
|
import MetagenomicsPipeline from './components/MetagenomicsPipeline';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
@ -48,6 +49,7 @@ export default function MetagenomicsSequencingPage() {
|
|||||||
|
|
||||||
{/* Advantages Section */}
|
{/* Advantages Section */}
|
||||||
<MetagenomicsAdvantages />
|
<MetagenomicsAdvantages />
|
||||||
|
<MetagenomicsPipeline/>
|
||||||
|
|
||||||
{/* Applications Section */}
|
{/* Applications Section */}
|
||||||
<MetagenomicsApplications />
|
<MetagenomicsApplications />
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SingleCellPipeline;
|
||||||
@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
|||||||
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
||||||
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||||
import SingleCellApplications from './components/SingleCellApplications';
|
import SingleCellApplications from './components/SingleCellApplications';
|
||||||
|
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
@ -48,6 +49,7 @@ export default function SingleCellDNASequencingPage() {
|
|||||||
|
|
||||||
{/* Advantages Section */}
|
{/* Advantages Section */}
|
||||||
<SingleCellAdvantages />
|
<SingleCellAdvantages />
|
||||||
|
<SingleCellPipeline/>
|
||||||
|
|
||||||
{/* Applications Section */}
|
{/* Applications Section */}
|
||||||
<SingleCellApplications />
|
<SingleCellApplications />
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WGSDeNovoPipeline;
|
||||||
@ -3,6 +3,7 @@ import DenovoIntroduction from './components/DenovoIntroduction';
|
|||||||
import DenovoAdvantages from './components/DenovoAdvantages';
|
import DenovoAdvantages from './components/DenovoAdvantages';
|
||||||
import DenovoApplications from './components/DenovoApplications';
|
import DenovoApplications from './components/DenovoApplications';
|
||||||
import DenovoSpecifications from './components/DenovoSpecifications';
|
import DenovoSpecifications from './components/DenovoSpecifications';
|
||||||
|
import WGSDeNovoPipeline from './components/WGSDeNovoPipeline';
|
||||||
import PageLayout from '../../../components/Layout/PageLayout';
|
import PageLayout from '../../../components/Layout/PageLayout';
|
||||||
|
|
||||||
export default function WholeGenomeDenovoPage() {
|
export default function WholeGenomeDenovoPage() {
|
||||||
@ -24,6 +25,7 @@ export default function WholeGenomeDenovoPage() {
|
|||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
<DenovoIntroduction />
|
<DenovoIntroduction />
|
||||||
<DenovoAdvantages />
|
<DenovoAdvantages />
|
||||||
|
<WGSDeNovoPipeline/>
|
||||||
<DenovoApplications />
|
<DenovoApplications />
|
||||||
<DenovoSpecifications />
|
<DenovoSpecifications />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||||
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WGSResequencingPipeline;
|
||||||
@ -3,6 +3,7 @@ import ResequencingIntroduction from './components/ResequencingIntroduction';
|
|||||||
import ResequencingAdvantages from './components/ResequencingAdvantages';
|
import ResequencingAdvantages from './components/ResequencingAdvantages';
|
||||||
import ResequencingApplications from './components/ResequencingApplications';
|
import ResequencingApplications from './components/ResequencingApplications';
|
||||||
import ResequencingSpecifications from './components/ResequencingSpecifications';
|
import ResequencingSpecifications from './components/ResequencingSpecifications';
|
||||||
|
import WGSResequencingPipeline from './components/WGSResequencingPipeline';
|
||||||
import PageLayout from '../../../components/Layout/PageLayout';
|
import PageLayout from '../../../components/Layout/PageLayout';
|
||||||
|
|
||||||
export default function WholeGenomeResequencingPage() {
|
export default function WholeGenomeResequencingPage() {
|
||||||
@ -24,6 +25,7 @@ export default function WholeGenomeResequencingPage() {
|
|||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
<ResequencingIntroduction />
|
<ResequencingIntroduction />
|
||||||
<ResequencingAdvantages />
|
<ResequencingAdvantages />
|
||||||
|
<WGSResequencingPipeline/>
|
||||||
<ResequencingApplications />
|
<ResequencingApplications />
|
||||||
<ResequencingSpecifications />
|
<ResequencingSpecifications />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tablet and Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom arrows from "Alignment to Reference Genome" */}
|
||||||
|
<div className="absolute bottom-12 sm:bottom-16 lg:bottom-{2rem} left-1/2 transform -translate-x-1/2">
|
||||||
|
<div className="relative w-0 h-0">
|
||||||
|
|
||||||
|
{/* Arrow 1: Straight horizontal to "Back Splicing Junction Reads" (Unmapped Reads) */}
|
||||||
|
<div className="absolute top-0 left-0">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Horizontal line */}
|
||||||
|
<div className="w-16 sm:w-20 lg:w-28 h-0.5 bg-gray-600"></div>
|
||||||
|
{/* Arrowhead */}
|
||||||
|
<div className="absolute right-0 -top-1 w-2 h-2 border-r-2 border-t-2 border-gray-600 rotate-45"></div>
|
||||||
|
{/* Label */}
|
||||||
|
<div className="absolute top-2 left-4 sm:left-6 lg:left-10 text-xs text-gray-700 font-medium whitespace-nowrap">
|
||||||
|
Unmapped Reads
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow 2: Diagonal upward to "Circular RNA Prediction" (Mapped Reads) */}
|
||||||
|
<div className="absolute top-0 left-0">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Diagonal line going up and right */}
|
||||||
|
<div className="absolute origin-left w-20 sm:w-24 lg:w-32 h-0.5 bg-gray-600 transform -rotate-45"></div>
|
||||||
|
{/* Arrowhead positioned at the end of diagonal line */}
|
||||||
|
<div className="absolute w-2 h-2 border-r-2 border-t-2 border-gray-600 transform rotate-0"
|
||||||
|
style={{
|
||||||
|
left: 'calc(20 * 0.25rem * 0.707 - 4px)', // cos(45deg) ≈ 0.707
|
||||||
|
top: 'calc(-20 * 0.25rem * 0.707 - 4px)' // -sin(45deg) ≈ -0.707
|
||||||
|
}}></div>
|
||||||
|
{/* Label */}
|
||||||
|
<div className="absolute -top-8 left-6 sm:left-8 lg:left-12 text-xs text-gray-700 font-medium whitespace-nowrap">
|
||||||
|
Mapped Reads
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CircularRNAPipeline;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import TitleBar from '../../components/shared/TitleBar';
|
import TitleBar from '../../components/shared/TitleBar';
|
||||||
import PageLayout from '../../components/Layout/PageLayout'
|
import PageLayout from '../../components/Layout/PageLayout'
|
||||||
import CircularIntroduction from './components/CircularIntroduction';
|
import CircularIntroduction from './components/CircularIntroduction';
|
||||||
|
// import CircularRNAPipeline from './components/CircularRNAPipeline';
|
||||||
import CircularAdvantages from './components/CircularAdvantages';
|
import CircularAdvantages from './components/CircularAdvantages';
|
||||||
import CircularApplications from './components/CircularApplications';
|
import CircularApplications from './components/CircularApplications';
|
||||||
import CircularSpecifications from './components/CircularSpecifications';
|
import CircularSpecifications from './components/CircularSpecifications';
|
||||||
@ -20,6 +21,7 @@ export default function CircularRNASequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<CircularIntroduction />
|
<CircularIntroduction />
|
||||||
<CircularAdvantages />
|
<CircularAdvantages />
|
||||||
|
{/* <CircularRNAPipeline/> */}
|
||||||
<CircularApplications />
|
<CircularApplications />
|
||||||
<CircularSpecifications />
|
<CircularSpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-6xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block lg:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{[...leftSteps, ...rightSteps.slice().reverse(), ...middleSteps].map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length + rightSteps.length + middleSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Complex Flow */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<div className="grid grid-cols-3 gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle Column */}
|
||||||
|
<div className="flex flex-col items-center justify-center space-y-3">
|
||||||
|
{middleSteps.map((step, index) => (
|
||||||
|
<div key={index} className={`${cardColor} rounded-lg p-4 w-full max-w-60 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow from left to right (after alignment) */}
|
||||||
|
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bidirectional arrows between middle and right columns */}
|
||||||
|
<div className="absolute top-1/2 right-1/3 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center space-y-2">
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional arrows for the circular flow in right column */}
|
||||||
|
<div className="absolute top-1/4 right-6 flex items-center justify-center">
|
||||||
|
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-2/3 right-6 flex items-center justify-center">
|
||||||
|
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DegradomeSequencingPipeline;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import TitleBar from '../../components/shared/TitleBar';
|
import TitleBar from '../../components/shared/TitleBar';
|
||||||
import DegradomeIntroduction from './components/DegradomeIntroduction';
|
import DegradomeIntroduction from './components/DegradomeIntroduction';
|
||||||
import DegradomeAdvantages from './components/DegradomeAdvantages';
|
import DegradomeAdvantages from './components/DegradomeAdvantages';
|
||||||
|
import DegradomeSequencingPipeline from './components/DegradomeSequencingPipeline';
|
||||||
import DegradomeApplications from './components/DegradomeApplications';
|
import DegradomeApplications from './components/DegradomeApplications';
|
||||||
import DegradomeSpecifications from './components/DegradomeSpecifications';
|
import DegradomeSpecifications from './components/DegradomeSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
@ -20,6 +21,7 @@ export default function DegradomeSequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<DegradomeIntroduction />
|
<DegradomeIntroduction />
|
||||||
<DegradomeAdvantages />
|
<DegradomeAdvantages />
|
||||||
|
<DegradomeSequencingPipeline/>
|
||||||
<DegradomeApplications />
|
<DegradomeApplications />
|
||||||
<DegradomeSpecifications />
|
<DegradomeSpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
134
app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx
Normal file
134
app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx
Normal file
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Diagonal Arrow from High Quality Sequencing Data to Alignment to Reference Genome */}
|
||||||
|
<div className="absolute top-80 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<svg
|
||||||
|
width="180"
|
||||||
|
height="60"
|
||||||
|
viewBox="0 0 180 60"
|
||||||
|
className={arrowColor}
|
||||||
|
style={{transform: 'rotate(20deg)'}}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<marker
|
||||||
|
id="arrowhead"
|
||||||
|
markerWidth="10"
|
||||||
|
markerHeight="7"
|
||||||
|
refX="9"
|
||||||
|
refY="3.5"
|
||||||
|
orient="auto"
|
||||||
|
>
|
||||||
|
<polygon
|
||||||
|
points="0 0, 10 3.5, 0 7"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<line
|
||||||
|
x1="10"
|
||||||
|
y1="10"
|
||||||
|
x2="170"
|
||||||
|
y2="50"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
markerEnd="url(#arrowhead)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IsoformPipeline;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import TitleBar from '../../components/shared/TitleBar';
|
import TitleBar from '../../components/shared/TitleBar';
|
||||||
import IsoIntroduction from './components/IsoIntroduction';
|
import IsoIntroduction from './components/IsoIntroduction';
|
||||||
import IsoAdvantages from './components/IsoAdvantages';
|
import IsoAdvantages from './components/IsoAdvantages';
|
||||||
|
import IsoformPipeline from './components/IsoformPipeline';
|
||||||
import IsoApplications from './components/IsoApplications';
|
import IsoApplications from './components/IsoApplications';
|
||||||
import IsoSpecifications from './components/IsoSpecifications';
|
import IsoSpecifications from './components/IsoSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
@ -20,6 +21,7 @@ export default function IsoSequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<IsoIntroduction />
|
<IsoIntroduction />
|
||||||
<IsoAdvantages />
|
<IsoAdvantages />
|
||||||
|
<IsoformPipeline/>
|
||||||
<IsoApplications />
|
<IsoApplications />
|
||||||
<IsoSpecifications />
|
<IsoSpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-6xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block lg:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{topSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < topSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Bottom sections for mobile */}
|
||||||
|
<div className="grid grid-cols-1 gap-4 w-full mt-6">
|
||||||
|
{bottomLeftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomLeftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{bottomCenterSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomCenterSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{bottomRightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomRightSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
{/* Top vertical sequence */}
|
||||||
|
<div className="flex flex-col items-center space-y-4 mb-8">
|
||||||
|
{topSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-96 text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < topSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Branching arrows from "Retain mRNA reads and remove rRNA Reads" */}
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Left branch arrow */}
|
||||||
|
<div className="absolute -left-32 top-0">
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right branch arrow */}
|
||||||
|
<div className="absolute left-32 top-0">
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom three columns */}
|
||||||
|
<div className="grid grid-cols-3 gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
{bottomLeftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomLeftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Center Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
{bottomCenterSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomCenterSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
{bottomRightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < bottomRightSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal arrows connecting bottom sections */}
|
||||||
|
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2">
|
||||||
|
<ArrowRight className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-4 right-1/3 transform translate-x-1/2">
|
||||||
|
<ArrowRight className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MetatranscriptomicsPipeline;
|
||||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
|||||||
import MetatranscriptomicsIntroduction from './components/MetatranscriptomicsIntroduction';
|
import MetatranscriptomicsIntroduction from './components/MetatranscriptomicsIntroduction';
|
||||||
import MetatranscriptomicsAdvantages from './components/MetatranscriptomicsAdvantages';
|
import MetatranscriptomicsAdvantages from './components/MetatranscriptomicsAdvantages';
|
||||||
import MetatranscriptomicsApplications from './components/MetatranscriptomicsApplications';
|
import MetatranscriptomicsApplications from './components/MetatranscriptomicsApplications';
|
||||||
|
import MetatranscriptomicsPipeline from './components/MetatranscriptomicsPipeline';
|
||||||
import MetatranscriptomicsSpecifications from './components/MetatranscriptomicsSpecifications';
|
import MetatranscriptomicsSpecifications from './components/MetatranscriptomicsSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
@ -20,6 +21,7 @@ export default function MetatranscriptomicsSequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<MetatranscriptomicsIntroduction />
|
<MetatranscriptomicsIntroduction />
|
||||||
<MetatranscriptomicsAdvantages />
|
<MetatranscriptomicsAdvantages />
|
||||||
|
<MetatranscriptomicsPipeline/>
|
||||||
<MetatranscriptomicsApplications />
|
<MetatranscriptomicsApplications />
|
||||||
<MetatranscriptomicsSpecifications />
|
<MetatranscriptomicsSpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
105
app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx
Normal file
105
app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx
Normal file
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
|
||||||
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MRNAPipeline;
|
||||||
@ -5,6 +5,7 @@ import MRNAAdvantages from './components/MRNAAdvantages';
|
|||||||
import MRNAApplications from './components/MRNAApplications';
|
import MRNAApplications from './components/MRNAApplications';
|
||||||
import MRNASpecifications from './components/MRNASpecifications';
|
import MRNASpecifications from './components/MRNASpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
import MRNAPipeline from './components/MRNAPipeline';
|
||||||
|
|
||||||
export default function MRNASequencingPage() {
|
export default function MRNASequencingPage() {
|
||||||
const breadcrumbs = [
|
const breadcrumbs = [
|
||||||
@ -21,6 +22,7 @@ export default function MRNASequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<MRNAIntroduction />
|
<MRNAIntroduction />
|
||||||
<MRNAAdvantages />
|
<MRNAAdvantages />
|
||||||
|
<MRNAPipeline/>
|
||||||
<MRNAApplications />
|
<MRNAApplications />
|
||||||
<MRNASpecifications />
|
<MRNASpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Pipeline Flowchart */}
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-full max-w-5xl">
|
||||||
|
<div className="relative">
|
||||||
|
{/* Mobile Layout - Single Column */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < mobileSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
|
||||||
|
<div className="absolute bottom-28 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SingleCellPipeline;
|
||||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
|||||||
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
||||||
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||||
import SingleCellApplications from './components/SingleCellApplications';
|
import SingleCellApplications from './components/SingleCellApplications';
|
||||||
|
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||||
import PageLayout from '../../components/Layout/PageLayout';
|
import PageLayout from '../../components/Layout/PageLayout';
|
||||||
|
|
||||||
@ -20,6 +21,7 @@ export default function SingleCellRNASequencingPage() {
|
|||||||
/>
|
/>
|
||||||
<SingleCellIntroduction />
|
<SingleCellIntroduction />
|
||||||
<SingleCellAdvantages />
|
<SingleCellAdvantages />
|
||||||
|
<SingleCellPipeline/>
|
||||||
<SingleCellApplications />
|
<SingleCellApplications />
|
||||||
<SingleCellSpecifications />
|
<SingleCellSpecifications />
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
|||||||
@ -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 (
|
return (
|
||||||
<section className="py-8 lg:py-12 bg-gray-50">
|
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||||
<div className="container mx-auto max-w-none px-4 lg:px-6">
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||||
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 mb-6 lg:mb-6">
|
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||||
Bioinformatics Pipeline
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* Pipeline Image */}
|
{/* Pipeline Flowchart */}
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<img
|
<div className="w-full max-w-5xl">
|
||||||
src="/images/srna-bioinformatics-pipeline.jpg"
|
<div className="relative">
|
||||||
alt="Small RNA Sequencing Bioinformatics Pipeline Workflow"
|
{/* Mobile Layout - Single Column */}
|
||||||
className="max-w-full h-auto rounded-lg"
|
<div className="block sm:hidden">
|
||||||
/>
|
<div className="flex flex-col items-center space-y-3">
|
||||||
</div>
|
{mobileSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
{/* Pipeline Description */}
|
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||||
<div className="mt-6 text-center">
|
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||||
<p className="text-gray-600 text-sm lg:text-base">
|
</div>
|
||||||
Small RNA sequencing bioinformatics pipeline for miRNA and small RNA analysis and expression profiling
|
{index < mobileSteps.length - 1 && (
|
||||||
</p>
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Layout - Two Columns */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||||
|
{/* Left Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{leftSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < leftSteps.length - 1 && (
|
||||||
|
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column */}
|
||||||
|
<div className="flex flex-col items-center space-y-3">
|
||||||
|
{rightSteps.map((step, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||||
|
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||||
|
</div>
|
||||||
|
{index < rightSteps.length - 1 && (
|
||||||
|
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
|
||||||
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||||
|
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -8,6 +8,7 @@
|
|||||||
"name": "nextjs",
|
"name": "nextjs",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.525.0",
|
||||||
"next": "^15.2.0",
|
"next": "^15.2.0",
|
||||||
"nodemailer": "^7.0.3",
|
"nodemailer": "^7.0.3",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
@ -4238,6 +4239,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/math-intrinsics": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
|
|||||||
@ -9,6 +9,7 @@
|
|||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.525.0",
|
||||||
"next": "^15.2.0",
|
"next": "^15.2.0",
|
||||||
"nodemailer": "^7.0.3",
|
"nodemailer": "^7.0.3",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
|
|||||||
@ -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"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user