Flowchart update
This commit is contained in:
mukesh13
@ -57,10 +57,10 @@ const Header = () => {
|
||||
>
|
||||
Research
|
||||
</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">
|
||||
<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"
|
||||
>
|
||||
<span className="font-medium">DNA Sequencing</span>
|
||||
@ -285,7 +285,7 @@ const Header = () => {
|
||||
</li>
|
||||
<li className="relative group/rna">
|
||||
<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"
|
||||
>
|
||||
<span className="font-medium">RNA Sequencing</span>
|
||||
@ -368,7 +368,7 @@ const Header = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> */}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<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 EnrichmentAdvantages from './components/EnrichmentAdvantages';
|
||||
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
|
||||
import EnrichmentPipeline from './components/EnrichmentPipeline';
|
||||
|
||||
export default function EnrichmentSequencingPage() {
|
||||
const breadcrumbs = [
|
||||
@ -22,6 +23,7 @@ export default function EnrichmentSequencingPage() {
|
||||
<div className="page-content">
|
||||
<EnrichmentIntroduction />
|
||||
<EnrichmentAdvantages />
|
||||
<EnrichmentPipeline/>
|
||||
<EnrichmentSpecifications />
|
||||
</div>
|
||||
</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 EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
|
||||
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
|
||||
import EpigenomicsPipeline from './components/EpigenomicsPipeline';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export default function EpigenomicsSequencingPage() {
|
||||
@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsAdvantages />
|
||||
<EpigenomicsSpecifications />
|
||||
</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 GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
|
||||
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
|
||||
import GenomeMappingPipeline from './components/GenomeMappingPipeline';
|
||||
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -47,6 +48,7 @@ export default function GenomeMappingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<GenomeMappingAdvantages />
|
||||
<GenomeMappingPipeline/>
|
||||
|
||||
{/* Specifications Section */}
|
||||
<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 HybridIntroduction from './components/HybridIntroduction';
|
||||
import HybridAdvantages from './components/HybridAdvantages';
|
||||
import HybridBioinformatics from './components/HybridBioinformatics';
|
||||
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridApplications from './components/HybridApplications';
|
||||
import HybridSpecifications from './components/HybridSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -51,7 +51,7 @@ export default function HybridGenomeSequencingPage() {
|
||||
<HybridAdvantages />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
<HybridBioinformatics />
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
|
||||
{/* Applications Section */}
|
||||
<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 MetagenomicsApplications from './components/MetagenomicsApplications';
|
||||
import MetagenomicsSpecifications from './components/MetagenomicsSpecifications';
|
||||
import MetagenomicsPipeline from './components/MetagenomicsPipeline';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export const metadata = {
|
||||
@ -48,6 +49,7 @@ export default function MetagenomicsSequencingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MetagenomicsAdvantages />
|
||||
<MetagenomicsPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
<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 SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||
import SingleCellApplications from './components/SingleCellApplications';
|
||||
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -48,6 +49,7 @@ export default function SingleCellDNASequencingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
<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 DenovoApplications from './components/DenovoApplications';
|
||||
import DenovoSpecifications from './components/DenovoSpecifications';
|
||||
import WGSDeNovoPipeline from './components/WGSDeNovoPipeline';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function WholeGenomeDenovoPage() {
|
||||
@ -24,6 +25,7 @@ export default function WholeGenomeDenovoPage() {
|
||||
<div className="page-content">
|
||||
<DenovoIntroduction />
|
||||
<DenovoAdvantages />
|
||||
<WGSDeNovoPipeline/>
|
||||
<DenovoApplications />
|
||||
<DenovoSpecifications />
|
||||
</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 ResequencingApplications from './components/ResequencingApplications';
|
||||
import ResequencingSpecifications from './components/ResequencingSpecifications';
|
||||
import WGSResequencingPipeline from './components/WGSResequencingPipeline';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function WholeGenomeResequencingPage() {
|
||||
@ -24,6 +25,7 @@ export default function WholeGenomeResequencingPage() {
|
||||
<div className="page-content">
|
||||
<ResequencingIntroduction />
|
||||
<ResequencingAdvantages />
|
||||
<WGSResequencingPipeline/>
|
||||
<ResequencingApplications />
|
||||
<ResequencingSpecifications />
|
||||
</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 PageLayout from '../../components/Layout/PageLayout'
|
||||
import CircularIntroduction from './components/CircularIntroduction';
|
||||
// import CircularRNAPipeline from './components/CircularRNAPipeline';
|
||||
import CircularAdvantages from './components/CircularAdvantages';
|
||||
import CircularApplications from './components/CircularApplications';
|
||||
import CircularSpecifications from './components/CircularSpecifications';
|
||||
@ -20,6 +21,7 @@ export default function CircularRNASequencingPage() {
|
||||
/>
|
||||
<CircularIntroduction />
|
||||
<CircularAdvantages />
|
||||
{/* <CircularRNAPipeline/> */}
|
||||
<CircularApplications />
|
||||
<CircularSpecifications />
|
||||
</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 DegradomeIntroduction from './components/DegradomeIntroduction';
|
||||
import DegradomeAdvantages from './components/DegradomeAdvantages';
|
||||
import DegradomeSequencingPipeline from './components/DegradomeSequencingPipeline';
|
||||
import DegradomeApplications from './components/DegradomeApplications';
|
||||
import DegradomeSpecifications from './components/DegradomeSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -20,6 +21,7 @@ export default function DegradomeSequencingPage() {
|
||||
/>
|
||||
<DegradomeIntroduction />
|
||||
<DegradomeAdvantages />
|
||||
<DegradomeSequencingPipeline/>
|
||||
<DegradomeApplications />
|
||||
<DegradomeSpecifications />
|
||||
</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 IsoIntroduction from './components/IsoIntroduction';
|
||||
import IsoAdvantages from './components/IsoAdvantages';
|
||||
import IsoformPipeline from './components/IsoformPipeline';
|
||||
import IsoApplications from './components/IsoApplications';
|
||||
import IsoSpecifications from './components/IsoSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -20,6 +21,7 @@ export default function IsoSequencingPage() {
|
||||
/>
|
||||
<IsoIntroduction />
|
||||
<IsoAdvantages />
|
||||
<IsoformPipeline/>
|
||||
<IsoApplications />
|
||||
<IsoSpecifications />
|
||||
</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 MetatranscriptomicsAdvantages from './components/MetatranscriptomicsAdvantages';
|
||||
import MetatranscriptomicsApplications from './components/MetatranscriptomicsApplications';
|
||||
import MetatranscriptomicsPipeline from './components/MetatranscriptomicsPipeline';
|
||||
import MetatranscriptomicsSpecifications from './components/MetatranscriptomicsSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -20,6 +21,7 @@ export default function MetatranscriptomicsSequencingPage() {
|
||||
/>
|
||||
<MetatranscriptomicsIntroduction />
|
||||
<MetatranscriptomicsAdvantages />
|
||||
<MetatranscriptomicsPipeline/>
|
||||
<MetatranscriptomicsApplications />
|
||||
<MetatranscriptomicsSpecifications />
|
||||
</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 MRNASpecifications from './components/MRNASpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
import MRNAPipeline from './components/MRNAPipeline';
|
||||
|
||||
export default function MRNASequencingPage() {
|
||||
const breadcrumbs = [
|
||||
@ -21,6 +22,7 @@ export default function MRNASequencingPage() {
|
||||
/>
|
||||
<MRNAIntroduction />
|
||||
<MRNAAdvantages />
|
||||
<MRNAPipeline/>
|
||||
<MRNAApplications />
|
||||
<MRNASpecifications />
|
||||
</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 SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||
import SingleCellApplications from './components/SingleCellApplications';
|
||||
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -20,6 +21,7 @@ export default function SingleCellRNASequencingPage() {
|
||||
/>
|
||||
<SingleCellIntroduction />
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
<SingleCellApplications />
|
||||
<SingleCellSpecifications />
|
||||
</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 (
|
||||
<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-2xl lg:text-3xl text-gray-700 text-left pb-2 mb-6 lg:mb-6">
|
||||
Bioinformatics Pipeline
|
||||
<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 Image */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
|
||||
{/* Pipeline Flowchart */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src="/images/srna-bioinformatics-pipeline.jpg"
|
||||
alt="Small RNA Sequencing Bioinformatics Pipeline Workflow"
|
||||
className="max-w-full h-auto rounded-lg"
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* Pipeline Description */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-600 text-sm lg:text-base">
|
||||
Small RNA sequencing bioinformatics pipeline for miRNA and small RNA analysis and expression profiling
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "nextjs",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "^15.2.0",
|
||||
"nodemailer": "^7.0.3",
|
||||
"react": "^19.0.0",
|
||||
@ -4238,6 +4239,15 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.525.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
|
||||
"integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "^15.2.0",
|
||||
"nodemailer": "^7.0.3",
|
||||
"react": "^19.0.0",
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user