mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flowchart changes updated

Browse Source
This commit is contained in:
mukesh13
2025-09-04 02:33:03 +05:30
parent 3f803ac0c9
commit 78a56a061b
65 changed files with 2234 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx
View File

@ -9,6 +9,7 @@ const WGSIntroduction = () => {
"In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
];
const advantageItems = [
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
"Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
@ -17,15 +18,78 @@ const WGSIntroduction = () => {
];
return (
<IntroductionLayout
introTitle="Introduction and Workflow"
advantageTitle="Advantage"
introItems={contentItems}
advantageItems={advantageItems}
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
imageAlt="Sample Process Steps"
useParagraphs={true}
/>
<div className="w-full bg-white">
{/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
{/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8">
{/* Introduction Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{contentItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
{/* Advantage Section */}
<section>
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
</div>
{/* Right Column - Custom Content with Image and SVG */}
<div className="relative p-4">
<div className="flex flex-col h-full space-y-4">
{/* Top Section - Flowchart with larger fixed width */}
<div className="w-full flex items-center justify-center py-6">
<div className="w-full max-w-md flex items-center justify-center">
<img
src="/images/flowchart/WGS_flow.svg"
alt="WGS Process Flow"
className="w-full h-auto object-contain"
/>
</div>
</div>
{/* Bottom Section - Image with same width */}
<div className="flex items-center justify-center">
<div className="w-full max-w-md flex items-center justify-center">
<img
src="/images/dna/whole_genome_seq-normal_denovo.png"
alt="WGS Overview"
className="w-full h-auto object-contain"
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
};