From d2b2bc52d87d6f1114d246248959a4a0a57671e4 Mon Sep 17 00:00:00 2001 From: mukesh13 Date: Mon, 11 Aug 2025 16:08:29 +0530 Subject: [PATCH] Flowchart Updated --- app/api/forms/route.js | 101 +++++---- app/components/About/NGSSection.jsx | 2 +- app/components/Career/CareerPage.jsx | 2 +- app/components/Career/CareerSection.jsx | 2 +- app/components/ContactPage/ContactPage.js | 2 +- app/components/Layout/Footer.jsx | 4 +- .../ShippingTemperatureTable.jsx | 4 +- .../SampleForm/SampleFormContainer.jsx | 202 +++++++----------- .../components/EnrichmentPipeline.jsx | 105 +++------ .../components/EpigenomicsPipeline.jsx | 135 +++--------- .../components/GenomeMappingPipeline.jsx | 105 +++------ .../components/MetagenomicsPipeline.jsx | 131 +++--------- .../components/SingleCellPipeline.jsx | 105 +++------ .../denovo/components/WGSDeNovoPipeline.tsx | 105 +++------ .../components/WGSResequencingPipeline.jsx | 105 +++------ .../components/CircularRNAPipeline.jsx | 139 +++--------- .../DegradomeSequencingPipeline.jsx | 132 +++--------- .../components/IsoformPipeline.jsx | 136 +++--------- .../components/LncRNABioinformatics.jsx | 67 ++++-- .../MetatranscriptomicsPipeline.jsx | 197 +++-------------- .../components/SRNABioinformatics.jsx | 107 +++------- .../components/WTSPipeline.jsx | 56 +++++ .../whole-transcriptome-sequencing/page.js | 2 + package-lock.json | 10 + package.json | 1 + public/images/flowchart/circularrna.svg | 36 ++++ public/images/flowchart/degradomerna.svg | 38 ++++ public/images/flowchart/denovo.svg | 25 +++ public/images/flowchart/epigenomics.svg | 38 ++++ public/images/flowchart/genoemapping.svg | 32 +++ public/images/flowchart/isoseqrna.svg | 32 +++ public/images/flowchart/metagenomics.svg | 40 ++++ .../flowchart/metatranscriptomicsrna.svg | 51 +++++ public/images/flowchart/mrna.svg | 40 ++++ public/images/flowchart/resequencing.svg | 32 +++ public/images/flowchart/singlecell.svg | 32 +++ public/images/flowchart/singlecellrna.svg | 40 ++++ public/images/flowchart/smallrna.svg | 40 ++++ public/images/flowchart/totalrna.svg | 40 ++++ .../service/BioinformaticsAnalysis.svg | 14 ++ 40 files changed, 1130 insertions(+), 1357 deletions(-) create mode 100644 app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx create mode 100644 public/images/flowchart/circularrna.svg create mode 100644 public/images/flowchart/degradomerna.svg create mode 100644 public/images/flowchart/denovo.svg create mode 100644 public/images/flowchart/epigenomics.svg create mode 100644 public/images/flowchart/genoemapping.svg create mode 100644 public/images/flowchart/isoseqrna.svg create mode 100644 public/images/flowchart/metagenomics.svg create mode 100644 public/images/flowchart/metatranscriptomicsrna.svg create mode 100644 public/images/flowchart/mrna.svg create mode 100644 public/images/flowchart/resequencing.svg create mode 100644 public/images/flowchart/singlecell.svg create mode 100644 public/images/flowchart/singlecellrna.svg create mode 100644 public/images/flowchart/smallrna.svg create mode 100644 public/images/flowchart/totalrna.svg create mode 100644 public/images/homepage-1/service/BioinformaticsAnalysis.svg diff --git a/app/api/forms/route.js b/app/api/forms/route.js index b800ec9..62b7685 100644 --- a/app/api/forms/route.js +++ b/app/api/forms/route.js @@ -30,21 +30,14 @@ const configs = { sample: { subject: 'SIF Form received for Project', fields: [ - // Customer Information 'Principal_Investigator', 'Email', 'Company_Institution', 'Contact_Number', 'Address', 'City', 'State', 'Pin', 'Secondary_Contact', 'Secondary_Email', 'Secondary_Company_Institution', 'Secondary_Contact_Number', - - // Sample Information 'Project_Title', 'Number_of_Samples', 'Sample_Type', 'Sample_Type_Other', 'Sample_Source', 'Sample_Source_Other', 'Pathogenicity', 'Sample_Remarks', - - // Service Information 'Service_Requested', 'Service_Requested_Other', 'Type_of_Library', 'Type_of_Library_Other', 'Required_Library_Size', 'Required_Library_Size_Other', 'Index_Information', 'Kit_Information', 'Sequencing_Platform', 'Sequencing_Platform_Other', 'Sequencing_Read_Length', 'Sequencing_Read_Length_Other', 'Total_Data_Requirement', 'Service_Remarks', - - // Bioinformatics Information 'Analysis_Requested', 'Analysis_Details', 'Reference_Genome_Available', 'Genome_Size', 'Special_Consideration' ], required: [ @@ -58,6 +51,24 @@ const configs = { } }; +// Serial number tracker +let serialTracker = {}; +function generateSerialNumber() { + const today = new Date(); + const dateKey = today.toISOString().slice(0, 10); // "YYYY-MM-DD" + if (!serialTracker[dateKey]) { + serialTracker[dateKey] = 1; + } else { + serialTracker[dateKey] += 1; + } + const serialNum = String(serialTracker[dateKey]).padStart(2, '0'); + return { + serialNum, + formatted: `Operify Tech. ${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, '0')}.${String(today.getDate()).padStart(2, '0')}.${serialNum}`, + dateString: dateKey + }; +} + // Utility functions function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -77,7 +88,6 @@ export async function GET() { export async function POST(request) { try { - // Parse form data const formData = await request.formData(); const data = {}; const files = {}; @@ -92,7 +102,6 @@ export async function POST(request) { const form_type = data.form_type; - // Validate form type if (!form_type || !configs[form_type]) { return NextResponse.json({ error: 'Invalid form type: ' + (form_type || 'missing') @@ -102,7 +111,6 @@ export async function POST(request) { const config = configs[form_type]; const errors = []; - // Validate required fields for (const required_field of config.required) { if (!data[required_field] || String(data[required_field]).trim() === '') { errors.push(`The "${fieldName(required_field)}" field is required.`); @@ -111,37 +119,28 @@ export async function POST(request) { } } - // Validate file upload for career form if (form_type === 'career') { const fileField = config.file_field; const uploadedFile = files[fileField]; - if (!uploadedFile || uploadedFile.size === 0) { errors.push('Please upload your resume.'); } else { const allowedExtensions = ['pdf', 'doc', 'docx']; - const fileName = uploadedFile.name.toLowerCase(); - const fileExtension = fileName.split('.').pop(); - + const fileExtension = uploadedFile.name.toLowerCase().split('.').pop(); if (!allowedExtensions.includes(fileExtension)) { errors.push('Invalid file type. Please upload a PDF, DOC, or DOCX file.'); } - - if (uploadedFile.size > 10 * 1024 * 1024) { // 10MB limit + if (uploadedFile.size > 10 * 1024 * 1024) { errors.push('File is too large. Maximum size is 10MB.'); } } } if (errors.length > 0) { - return NextResponse.json({ - error: errors.join(' ') - }, { status: 400 }); + return NextResponse.json({ error: errors.join(' ') }, { status: 400 }); } - // Construct email body let emailBody = `

${config.subject}

`; - for (const [key, value] of Object.entries(data)) { if (config.fields.includes(key) && key !== 'form_type' && key !== 'sample_details') { emailBody += ` @@ -151,7 +150,6 @@ export async function POST(request) { } } - // Add file info if uploaded if (form_type === 'career' && files.resume) { emailBody += ` @@ -159,20 +157,17 @@ export async function POST(request) { `; } - // Add sample details for sample form if (form_type === 'sample' && data.sample_details) { try { const sampleDetails = JSON.parse(data.sample_details); - if (sampleDetails && sampleDetails.length > 0) { + if (sampleDetails.length > 0) { emailBody += ``; - sampleDetails.forEach((sample, index) => { emailBody += ``; - Object.entries(sample).forEach(([key, value]) => { if (value && String(value).trim() !== '') { emailBody += ` @@ -183,25 +178,16 @@ export async function POST(request) { }); }); } - } catch (error) { - console.error('Error parsing sample details:', error); + } catch { emailBody += ``; } } - emailBody += '
Resume
SAMPLE DETAILS
Sample ${index + 1}
Error: Could not parse sample details
'; - // Determine reply-to email based on form type - let replyToEmail; - if (form_type === 'sample') { - replyToEmail = data.Email; - } else { - replyToEmail = data.email; - } + let replyToEmail = form_type === 'sample' ? data.Email : data.email; - // Create transporter const transporter = nodemailer.createTransport({ host: 'smtp.gmail.com', port: 587, @@ -212,17 +198,24 @@ export async function POST(request) { }, }); - // Prepare email options + // SERIAL NUMBER LOGIC + let serialInfo; + if (form_type === 'sample') { + serialInfo = generateSerialNumber(); + } + + // Internal mail const mailOptions = { from: `${emailConfig.from_email_name} <${emailConfig.from_email}>`, to: `${emailConfig.to_email_name} <${emailConfig.to_email}>`, replyTo: replyToEmail || emailConfig.from_email, - subject: config.subject, + subject: form_type === 'sample' + ? `${data.Company_Institution} | ${data.Principal_Investigator} | ${serialInfo.dateString} | ${serialInfo.formatted}` + : config.subject, html: emailBody, - text: emailBody.replace(/<[^>]*>/g, ''), // Strip HTML for text version + text: emailBody.replace(/<[^>]*>/g, '') }; - // Add attachment for career form if (form_type === 'career' && files.resume) { const fileBuffer = await files.resume.arrayBuffer(); mailOptions.attachments = [{ @@ -231,18 +224,24 @@ export async function POST(request) { }]; } - // Send email await transporter.sendMail(mailOptions); - return NextResponse.json({ - success: true, - message: config.successMessage - }); + // PI email for sample form + if (form_type === 'sample') { + const piMailOptions = { + from: `${emailConfig.from_email_name} <${emailConfig.from_email}>`, + to: `${data.Principal_Investigator} <${data.Email}>`, + subject: `SIF Form received for Project with - ${serialInfo.formatted}`, + html: emailBody, + text: emailBody.replace(/<[^>]*>/g, '') + }; + await transporter.sendMail(piMailOptions); + } + + return NextResponse.json({ success: true, message: config.successMessage }); } catch (error) { console.error('Email sending error:', error); - return NextResponse.json({ - error: 'Error sending email. Please try again later.' - }, { status: 500 }); + return NextResponse.json({ error: 'Error sending email. Please try again later.' }, { status: 500 }); } -} \ No newline at end of file +} diff --git a/app/components/About/NGSSection.jsx b/app/components/About/NGSSection.jsx index 6649572..6e2884a 100644 --- a/app/components/About/NGSSection.jsx +++ b/app/components/About/NGSSection.jsx @@ -45,7 +45,7 @@ const NGSSection = () => { description: "Rapid sequencing of large genetic material be completed within a comparatively short duration, thereby yielding quick results." }, { - icon: "/images/homepage-1/service/Advantages-NGS-Icons-24.svg", + icon: "/images/homepage-1/service/BioinformaticsAnalysis.svg", title: "Bioinformatics Analysis", description: "NGS produces vast amounts of data, supporting complex research through advanced bioinformatic analysis." } diff --git a/app/components/Career/CareerPage.jsx b/app/components/Career/CareerPage.jsx index f2a7a93..bc92813 100644 --- a/app/components/Career/CareerPage.jsx +++ b/app/components/Career/CareerPage.jsx @@ -6,7 +6,7 @@ const CareerPage = () => { return (
-
+ {/*
*/}
); diff --git a/app/components/Career/CareerSection.jsx b/app/components/Career/CareerSection.jsx index 387f793..dffc4f7 100644 --- a/app/components/Career/CareerSection.jsx +++ b/app/components/Career/CareerSection.jsx @@ -4,7 +4,7 @@ import CareerInfo from './CareerInfo'; const CareerSection = () => { return ( -
+
diff --git a/app/components/ContactPage/ContactPage.js b/app/components/ContactPage/ContactPage.js index 3e39039..a294b14 100644 --- a/app/components/ContactPage/ContactPage.js +++ b/app/components/ContactPage/ContactPage.js @@ -7,7 +7,7 @@ const ContactPage = () => { return (
-
+ {/*
*/}
diff --git a/app/components/Layout/Footer.jsx b/app/components/Layout/Footer.jsx index c378d36..72b7dbf 100644 --- a/app/components/Layout/Footer.jsx +++ b/app/components/Layout/Footer.jsx @@ -39,7 +39,7 @@ const Footer = () => { {/* Social Links */} -
+
{

- Copyright © 2024 Operify All Rights Reserved. + Copyright © 2025 Operify All Rights Reserved.

  • Privacy Policy
  • diff --git a/app/components/PackagingShipping/ShippingTemperatureTable.jsx b/app/components/PackagingShipping/ShippingTemperatureTable.jsx index 67fd6b1..1b8b6b2 100644 --- a/app/components/PackagingShipping/ShippingTemperatureTable.jsx +++ b/app/components/PackagingShipping/ShippingTemperatureTable.jsx @@ -142,8 +142,8 @@ const ShippingTemperatureTable = () => { - - + + diff --git a/app/components/SampleForm/SampleFormContainer.jsx b/app/components/SampleForm/SampleFormContainer.jsx index bfbff2f..73234c4 100644 --- a/app/components/SampleForm/SampleFormContainer.jsx +++ b/app/components/SampleForm/SampleFormContainer.jsx @@ -8,70 +8,29 @@ import SampleDetailsSection from './SampleDetailsSection'; const SampleFormContainer = () => { const [formData, setFormData] = useState({ - // Customer Information - Principal_Investigator: '', - Email: '', - Company_Institution: '', - Contact_Number: '', - Address: '', - City: '', - State: '', - Pin: '', - Secondary_Contact: '', - Secondary_Email: '', - Secondary_Company_Institution: '', - Secondary_Contact_Number: '', - - // Sample Information - Project_Title: '', - Number_of_Samples: '', - Sample_Type: '', - Sample_Type_Other: '', - Sample_Source: '', - Sample_Source_Other: '', - Pathogenicity: '', - Sample_Remarks: '', - - // Service Information - Service_Requested: '', - Service_Requested_Other: '', - Type_of_Library: '', - Type_of_Library_Other: '', - Required_Library_Size: '', - Required_Library_Size_Other: '', - Index_Information: '', - Kit_Information: '', - Sequencing_Platform: '', - Sequencing_Platform_Other: '', - Sequencing_Read_Length: '', - Sequencing_Read_Length_Other: '', - Total_Data_Requirement: '', - Service_Remarks: '', - - // Bioinformatics Information - Analysis_Requested: '', - Analysis_Details: '', - Reference_Genome_Available: '', - Genome_Size: '', - Special_Consideration: '', + Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '', + Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '', + Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '', + Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '', + Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '', + Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '', + Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '', + Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '', + Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '', + Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '', + Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: '' }); - const [sampleDetails, setSampleDetails] = useState([ - { - Serial_Number: '', - Sample_Name: '', - Storage_Temp: '', - Preservative_Reagent: '', - Temp_Information: '', - Comments: '' - } - ]); + const [sampleDetails, setSampleDetails] = useState([{ + Serial_Number: '', Sample_Name: '', Storage_Temp: '', + Preservative_Reagent: '', Temp_Information: '', Comments: '' + }]); const [isSubmitting, setIsSubmitting] = useState(false); const [message, setMessage] = useState(''); + const [showSuccessModal, setShowSuccessModal] = useState(false); useEffect(() => { - // Check for Excel data in sessionStorage const excelData = sessionStorage.getItem('excelData'); const uploadedFileName = sessionStorage.getItem('uploadedFileName'); @@ -79,11 +38,8 @@ const SampleFormContainer = () => { try { const jsonData = JSON.parse(excelData); autoFillForm(jsonData); - - // Clear stored data sessionStorage.removeItem('excelData'); sessionStorage.removeItem('uploadedFileName'); - setMessage(`Form auto-filled from uploaded file: ${uploadedFileName}`); } catch (error) { console.error('Error parsing Excel data:', error); @@ -93,14 +49,10 @@ const SampleFormContainer = () => { const autoFillForm = (jsonData) => { if (jsonData.length === 0) return; - const data = jsonData[0]; const newFormData = { ...formData }; - - // Helper function to safely get value const getValue = (key) => data[key] ? data[key].toString().trim() : ''; - // Customer Information newFormData.Principal_Investigator = getValue('Principal Investigator'); newFormData.Email = getValue('Email'); newFormData.Company_Institution = getValue('Company/Institution'); @@ -114,7 +66,6 @@ const SampleFormContainer = () => { newFormData.Secondary_Company_Institution = getValue('Secondary Company/Institution'); newFormData.Secondary_Contact_Number = getValue('Secondary Contact Number'); - // Sample Information newFormData.Project_Title = getValue('Project Title'); newFormData.Number_of_Samples = getValue('Number of Samples'); newFormData.Sample_Type = getValue('Sample Type'); @@ -124,7 +75,6 @@ const SampleFormContainer = () => { newFormData.Pathogenicity = getValue('Pathogenicity'); newFormData.Sample_Remarks = getValue('Sample Remarks'); - // Service Information newFormData.Service_Requested = getValue('Service Requested'); newFormData.Service_Requested_Other = getValue('Service Requested Other'); newFormData.Type_of_Library = getValue('Type of Library'); @@ -140,7 +90,6 @@ const SampleFormContainer = () => { newFormData.Total_Data_Requirement = getValue('Total Data Requirement'); newFormData.Service_Remarks = getValue('Service Remarks'); - // Bioinformatics Information newFormData.Analysis_Requested = getValue('Analysis Requested'); newFormData.Analysis_Details = getValue('Analysis Details'); newFormData.Reference_Genome_Available = getValue('Reference Genome Available'); @@ -149,21 +98,20 @@ const SampleFormContainer = () => { setFormData(newFormData); - // Handle Sample Details - const sampleDetailsData = jsonData.filter(row => - row['Serial Number'] || row['Sample Name'] || - row['Storage Temp'] || row['Preservative Reagent'] || + const sampleDetailsData = jsonData.filter(row => + row['Serial Number'] || row['Sample Name'] || + row['Storage Temp'] || row['Preservative Reagent'] || row['Temp Information'] || row['Comments'] ); if (sampleDetailsData.length > 0) { const newSampleDetails = sampleDetailsData.map(sample => ({ - Serial_Number: getValue('Serial Number'), - Sample_Name: getValue('Sample Name'), - Storage_Temp: getValue('Storage Temp'), - Preservative_Reagent: getValue('Preservative Reagent'), - Temp_Information: getValue('Temp Information'), - Comments: getValue('Comments') + Serial_Number: sample['Serial Number'] || '', + Sample_Name: sample['Sample Name'] || '', + Storage_Temp: sample['Storage Temp'] || '', + Preservative_Reagent: sample['Preservative Reagent'] || '', + Temp_Information: sample['Temp Information'] || '', + Comments: sample['Comments'] || '' })); setSampleDetails(newSampleDetails); } @@ -179,37 +127,28 @@ const SampleFormContainer = () => { const handleSubmit = async (e) => { e.preventDefault(); setIsSubmitting(true); - setMessage(''); // Clear previous messages - + setMessage(''); try { const formDataToSend = new FormData(); - - // Add form data Object.keys(formData).forEach(key => { if (formData[key]) { formDataToSend.append(key, formData[key]); } }); - - // Add sample details as JSON string formDataToSend.append('sample_details', JSON.stringify(sampleDetails)); formDataToSend.append('form_type', 'sample'); - console.log('Submitting form data:', formData); - console.log('Sample details:', sampleDetails); - const response = await fetch('/api/forms', { method: 'POST', body: formDataToSend, }); const result = await response.json(); - console.log('API Response:', result); - + if (response.ok) { setMessage(result.message); - - // Reset form after successful submission + setShowSuccessModal(true); // show modal instead of green alert + setFormData({ Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '', Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '', @@ -223,7 +162,6 @@ const SampleFormContainer = () => { Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '', Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: '' }); - setSampleDetails([{ Serial_Number: '', Sample_Name: '', Storage_Temp: '', Preservative_Reagent: '', Temp_Information: '', Comments: '' @@ -231,7 +169,6 @@ const SampleFormContainer = () => { } else { setMessage('Error: ' + (result.error || 'Form submission failed')); } - } catch (error) { console.error('Error submitting form:', error); setMessage('Error: Network error. Please check your connection and try again.'); @@ -244,41 +181,22 @@ const SampleFormContainer = () => {
    - {/* Show message if exists */} - {message && ( + + {/* Only show red alert for errors */} + {message && message.includes('Error') && (
    -
    +
    {message}
    )} - - - - - - - - - + + + + + - {/* Submit Button */}
    + + {/* Success Modal */} + {/* Success Modal */} + {showSuccessModal && ( +
    +
    + {/* Animated Check Circle */} +
    +
    + {/* Outer ring animation */} +
    +
    + {/* Checkmark */} + + + +
    +
    +
    + +

    Submitted Successfully!

    +

    {message}

    + +
    +
    + )}
    ); }; -export default SampleFormContainer; \ No newline at end of file +export default SampleFormContainer; diff --git a/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx index fbe0b34..60f4c1a 100644 --- a/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx +++ b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx @@ -1,96 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/resequencing.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx index 6aad3f3..10abe02 100644 --- a/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx +++ b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx @@ -1,126 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/epigenomics.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...middleSteps, ...rightSteps]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < middleSteps.length - 1 && ( - - )} -
    - ))} -
    - - {/* Right Column */} -
    -
    -
    - {rightSteps.map((step, index) => ( -
    - {step} -
    - ))} -
    -
    +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrows */} - {/* Arrow from Aligned to Reference Genome to Peak Calling */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    - {/* Arrow from DMR Annotation to right box */} -
    - -
    - {/* Arrow from Peak Calling to right box */} -
    - -
    -
    + )}
    diff --git a/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx b/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx index 0f421cf..79f6a13 100644 --- a/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx +++ b/app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx @@ -1,96 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/genoemapping.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx b/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx index ee62d18..a48f1e1 100644 --- a/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx +++ b/app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx @@ -1,124 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/metagenomics.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine all steps for mobile layout - const mobileSteps = [ - ...leftColumn, - ...middleColumn.slice().reverse(), - ...rightColumn - ]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightColumn.length - 1 && ( - - )} -
    - ))} + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrows */} - {/* Arrow from left to middle column */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    - - {/* Arrow from middle to right column */} -
    - -
    -
    + )}
    diff --git a/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx b/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx index dff6e14..e084fdc 100644 --- a/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx +++ b/app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx @@ -1,96 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/singlecell.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx b/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx index 2a3bdc2..fcd210e 100644 --- a/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx +++ b/app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx @@ -1,96 +1,49 @@ 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)" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/denovo.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx b/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx index 5f1b1d2..df8639b 100644 --- a/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx +++ b/app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx @@ -1,96 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/resequencing.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow positioned between Primary and Secondary Assembly */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx b/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx index 101af87..6a4ed21 100644 --- a/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx +++ b/app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx @@ -1,130 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/circularrna.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Custom arrows from "Alignment to Reference Genome" */} -
    -
    - - {/* Arrow 1: Straight horizontal to "Back Splicing Junction Reads" (Unmapped Reads) */} -
    -
    - {/* Horizontal line */} -
    - {/* Arrowhead */} -
    - {/* Label */} -
    - Unmapped Reads -
    -
    -
    - - {/* Arrow 2: Diagonal upward to "Circular RNA Prediction" (Mapped Reads) */} -
    -
    - {/* Diagonal line going up and right */} -
    - {/* Arrowhead positioned at the end of diagonal line */} -
    - {/* Label */} -
    - Mapped Reads -
    -
    -
    - -
    + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx b/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx index a0e425b..dc44e27 100644 --- a/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx +++ b/app/rna-sequencing/degradome-sequencing/components/DegradomeSequencingPipeline.jsx @@ -1,123 +1,49 @@ import React from 'react'; -import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; const DegradomeSequencingPipeline = ({ - title = "Degradome Sequencing", + title = "Bioinformatics Pipeline", + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/degradomerna.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-blue-200", - textColor = "text-gray-800", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - const leftSteps = [ - "Raw Sequencing Data (fastq files)", - "Quality Control and Preprocessing of Data", - "High Quality Sequencing Data (fastq file)", - "Alignment to Reference Genome" - ]; - - const rightSteps = [ - "Related miRNA Identification", - "mRNAs Degradome Sites", - "Identify Target mRNAs", - "Retain mRNA data Remove rRNA, tRNA and other RNA" - ]; - - const middleSteps = [ - "Functional Analysis" - ]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow from left to right (after alignment) */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    - - {/* Bidirectional arrows between middle and right columns */} -
    - - -
    - - {/* Additional arrows for the circular flow in right column */} -
    - -
    - -
    - -
    -
    + )}
    diff --git a/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx b/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx index 73fc4f7..33fb3ac 100644 --- a/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx +++ b/app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx @@ -1,127 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/isoseqrna.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Diagonal Arrow from High Quality Sequencing Data to Alignment to Reference Genome */} -
    - - - - - - - - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx b/app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx index 8bd0724..793c72e 100644 --- a/app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx +++ b/app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx @@ -1,28 +1,51 @@ -// app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx +import React from 'react'; -const LncRNABioinformatics = () => { +const LncRNABioinformatics = ({ + title = "Bioinformatics Pipeline", + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/totalrna.svg", + backgroundColor = "bg-gray-50", + textColor = "text-gray-700", + className = "", + titleClassName = "", + svgClassName = "", + containerClassName = "" +}) => { return ( -
    -
    -

    - Bioinformatics Pipeline +
    +
    +

    + {title}

    - - {/* Pipeline Image */} -
    + + {/* SVG Flowchart Container */} +
    - lncRNA Sequencing Bioinformatics Pipeline Workflow -
    - - {/* Pipeline Description */} -
    -

    - lncRNA sequencing bioinformatics pipeline for long non-coding RNA analysis and expression profiling -

    +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent} +
    +
    + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    +
    + )} +
    +
    @@ -30,4 +53,4 @@ const LncRNABioinformatics = () => { ); }; -export default LncRNABioinformatics \ No newline at end of file +export default LncRNABioinformatics; \ No newline at end of file diff --git a/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx b/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx index e567c1d..95df081 100644 --- a/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx +++ b/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx @@ -1,188 +1,49 @@ import React from 'react'; -import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react'; const MetatranscriptomicsPipeline = ({ - title = "Metatranscriptomics", + title = "Bioinformatics Pipeline", + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/metatranscriptomicsrna.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-blue-200", - textColor = "text-blue-800", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - const topSteps = [ - "Raw Sequencing Data (fastq files)", - "Quality Control", - "High Quality Sequencing Data (fastq file)", - "Retain mRNA reads and remove rRNA Reads" - ]; - - const bottomLeftSteps = [ - "Reference Genome Alignment", - "Gene Expression Analysis", - "Differential Analysis" - ]; - - const bottomCenterSteps = [ - "Transcript Assembly", - "Structural Identification", - "SNPs, SSRs Analysis eQTLs Analysis" - ]; - - const bottomRightSteps = [ - "Functional Annotation", - "Statistical Analysis" - ]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < bottomRightSteps.length - 1 && ( - - )} -
    - ))} + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    -
    - - {/* Desktop Layout */} -
    - {/* Top vertical sequence */} -
    - {topSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < topSteps.length - 1 && ( - - )} -
    - ))} + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < bottomRightSteps.length - 1 && ( - - )} -
    - ))} -
    -
    - - {/* Horizontal arrows connecting bottom sections */} -
    - -
    -
    - -
    -
    + )}
    diff --git a/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx b/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx index c33c977..a95a762 100644 --- a/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx +++ b/app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx @@ -1,98 +1,49 @@ 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" - ], + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/smallrna.svg", backgroundColor = "bg-gray-50", - cardColor = "bg-gray-300", - textColor = "text-teal-600", - arrowColor = "text-gray-600", + textColor = "text-gray-700", className = "", - cardClassName = "", - titleClassName = "" + titleClassName = "", + svgClassName = "", + containerClassName = "" }) => { - // Combine steps for mobile layout - const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()]; - return (
    -
    -

    +
    +

    {title}

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

    {step}

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

    {step}

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

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -
    - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx b/app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx new file mode 100644 index 0000000..ec28de5 --- /dev/null +++ b/app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx @@ -0,0 +1,56 @@ +import React from 'react'; + +const WTSPipeline = ({ + title = "Bioinformatics Pipeline", + svgContent = null, // Pass your SVG content here as JSX + svgUrl = "/images/flowchart/totalrna.svg", + backgroundColor = "bg-gray-50", + textColor = "text-gray-700", + className = "", + titleClassName = "", + svgClassName = "", + containerClassName = "" +}) => { + return ( +
    +
    +

    + {title} +

    + + {/* SVG Flowchart Container */} +
    +
    +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent} +
    +
    + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    +
    + )} +
    +
    +
    +
    +
    +
    + ); +}; + +export default WTSPipeline; \ No newline at end of file diff --git a/app/rna-sequencing/whole-transcriptome-sequencing/page.js b/app/rna-sequencing/whole-transcriptome-sequencing/page.js index da57477..1305d4c 100644 --- a/app/rna-sequencing/whole-transcriptome-sequencing/page.js +++ b/app/rna-sequencing/whole-transcriptome-sequencing/page.js @@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar'; import WTSIntroduction from './components/WTSIntroduction'; import WTSAdvantages from './components/WTSAdvantages'; +import WTSPipeline from './components/WTSPipeline'; import WTSApplications from './components/WTSApplications'; import WTSSpecifications from './components/WTSSpecifications'; import PageLayout from '../../components/Layout/PageLayout'; @@ -21,6 +22,7 @@ export default function WholeTranscriptomeSequencingPage() { /> + diff --git a/package-lock.json b/package-lock.json index 88dad63..9805eae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "nextjs", "version": "0.1.0", "dependencies": { + "@heroicons/react": "^2.2.0", "lucide-react": "^0.525.0", "next": "^15.2.0", "nodemailer": "^7.0.3", @@ -214,6 +215,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/package.json b/package.json index 00aa678..f596899 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@heroicons/react": "^2.2.0", "lucide-react": "^0.525.0", "next": "^15.2.0", "nodemailer": "^7.0.3", diff --git a/public/images/flowchart/circularrna.svg b/public/images/flowchart/circularrna.svg new file mode 100644 index 0000000..e1010b3 --- /dev/null +++ b/public/images/flowchart/circularrna.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/degradomerna.svg b/public/images/flowchart/degradomerna.svg new file mode 100644 index 0000000..bb8f164 --- /dev/null +++ b/public/images/flowchart/degradomerna.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/denovo.svg b/public/images/flowchart/denovo.svg new file mode 100644 index 0000000..1b1218a --- /dev/null +++ b/public/images/flowchart/denovo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/epigenomics.svg b/public/images/flowchart/epigenomics.svg new file mode 100644 index 0000000..ae5b006 --- /dev/null +++ b/public/images/flowchart/epigenomics.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/genoemapping.svg b/public/images/flowchart/genoemapping.svg new file mode 100644 index 0000000..b0bba98 --- /dev/null +++ b/public/images/flowchart/genoemapping.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/isoseqrna.svg b/public/images/flowchart/isoseqrna.svg new file mode 100644 index 0000000..669534f --- /dev/null +++ b/public/images/flowchart/isoseqrna.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/metagenomics.svg b/public/images/flowchart/metagenomics.svg new file mode 100644 index 0000000..621df6e --- /dev/null +++ b/public/images/flowchart/metagenomics.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/metatranscriptomicsrna.svg b/public/images/flowchart/metatranscriptomicsrna.svg new file mode 100644 index 0000000..3c4bbc4 --- /dev/null +++ b/public/images/flowchart/metatranscriptomicsrna.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/mrna.svg b/public/images/flowchart/mrna.svg new file mode 100644 index 0000000..2bcd5be --- /dev/null +++ b/public/images/flowchart/mrna.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/resequencing.svg b/public/images/flowchart/resequencing.svg new file mode 100644 index 0000000..9384557 --- /dev/null +++ b/public/images/flowchart/resequencing.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/singlecell.svg b/public/images/flowchart/singlecell.svg new file mode 100644 index 0000000..0e8c7c9 --- /dev/null +++ b/public/images/flowchart/singlecell.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/singlecellrna.svg b/public/images/flowchart/singlecellrna.svg new file mode 100644 index 0000000..a8ac301 --- /dev/null +++ b/public/images/flowchart/singlecellrna.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/smallrna.svg b/public/images/flowchart/smallrna.svg new file mode 100644 index 0000000..3b437dc --- /dev/null +++ b/public/images/flowchart/smallrna.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/flowchart/totalrna.svg b/public/images/flowchart/totalrna.svg new file mode 100644 index 0000000..dd13db0 --- /dev/null +++ b/public/images/flowchart/totalrna.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/homepage-1/service/BioinformaticsAnalysis.svg b/public/images/homepage-1/service/BioinformaticsAnalysis.svg new file mode 100644 index 0000000..038f0d4 --- /dev/null +++ b/public/images/homepage-1/service/BioinformaticsAnalysis.svg @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file