139 lines
6.5 KiB
JavaScript
139 lines
6.5 KiB
JavaScript
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; |