UI styling update
This commit is contained in:
mukesh13
@ -3,20 +3,24 @@
|
||||
const ApplicationsLayout = ({
|
||||
title = "Applications",
|
||||
applicationItems = [],
|
||||
backgroundColor = "bg-gray-50",
|
||||
backgroundColor = "bg-teal-50",
|
||||
titleColor = "text-gray-700"
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-5 lg:py-8 ${backgroundColor}`}>
|
||||
<section className={`py-5 lg:py-5 ${backgroundColor}`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed lg:px-10">
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed lg:px-6">
|
||||
{applicationItems.map((item, index) => (
|
||||
<li key={index} className="text-base">
|
||||
{item}
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-base">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -18,7 +18,7 @@ const BioinformaticsLayout = ({
|
||||
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`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@ import Link from 'next/link';
|
||||
|
||||
const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[10rem] min-h-[120px] sm:min-h-[140px]"
|
||||
<section
|
||||
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[10rem] min-h-[120px] sm:min-h-[140px]"
|
||||
style={{ backgroundImage: `url('${backgroundImage}')` }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
@ -19,8 +19,8 @@ const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bred
|
||||
{crumb.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className="text-white hover:text-yellow-400 underline whitespace-nowrap"
|
||||
>
|
||||
{crumb.label}
|
||||
@ -38,13 +38,13 @@ const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bred
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-2">
|
||||
<h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
<h3 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-2xl font-bold text-white mb-2 px-4 leading-tight">
|
||||
<h3 className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-xl font-medium text-white/90 mb-4 px-4 leading-relaxed">
|
||||
{desc}
|
||||
</h3>
|
||||
<div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
|
||||
@ -1,46 +1,75 @@
|
||||
// components/shared/IntroductionLayout.jsx
|
||||
const IntroductionLayout = ({
|
||||
title = "Introduction and Workflow",
|
||||
contentItems = [],
|
||||
import React from 'react';
|
||||
|
||||
const CombinedWorkflowLayout = ({
|
||||
introTitle = "Introduction and Workflow",
|
||||
advantageTitle = "Advantage",
|
||||
introItems = [],
|
||||
advantageItems = [],
|
||||
imageUrl,
|
||||
imageAlt = "",
|
||||
badgeText,
|
||||
badgeSubtext,
|
||||
backgroundColor = "#f8f9fa",
|
||||
badgeColor = "bg-teal-600"
|
||||
imageAlt = "Workflow diagram"
|
||||
}) => {
|
||||
return (
|
||||
<section className="py-0 md:py-12 lg:py-10 w-full">
|
||||
<div className="w-full max-w-full px-0">
|
||||
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
<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">
|
||||
|
||||
{/* Two column layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] w-full gap-4">
|
||||
{/* Left side content */}
|
||||
<div className="px-6 lg:px-9 py-6 lg:py-8 flex items-start">
|
||||
<ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base text-justify">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
{/* Left Column - Content */}
|
||||
<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">
|
||||
{introTitle}
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{introItems.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>
|
||||
</div>
|
||||
|
||||
{/* Right side image - increased image size */}
|
||||
<div className="flex items-center justify-center p-2 lg:p-4 w-full">
|
||||
{imageUrl && (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
className="object-contain"
|
||||
style={{ height: '350px', width: '500px' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
{advantageTitle}
|
||||
</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 - Workflow Image */}
|
||||
<div className="relative flex items-center justify-center p-4">
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 text-center">
|
||||
<p>Workflow image will appear here</p>
|
||||
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default IntroductionLayout;
|
||||
|
||||
export default CombinedWorkflowLayout;
|
||||
@ -3,17 +3,16 @@ import Link from 'next/link';
|
||||
|
||||
const SpecificationsLayout = ({
|
||||
title = "Service Specifications",
|
||||
titleColor = "text-gray-800",
|
||||
specificationItems = [],
|
||||
backgroundColor = "#e8f5f3",
|
||||
iconBackgroundColor = "bg-teal-600"
|
||||
}) => {
|
||||
return (
|
||||
<section className="py-8 lg:py-12">
|
||||
<section className="py-8 lg:py-6">
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-left mb-8">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const AmpliconIntroduction = () => {
|
||||
"This multiplexing enables the simultaneous targeting of hundreds of genes from various libraries in a single run.",
|
||||
"This method is particularly useful for studying genetic variation, microbial communities, and evolutionary relationships. By selectively amplifying regions of interest, such as 16S rRNA for bacteria or ITS regions for fungi."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Unlike targeted or exome sequencing, amplicon sequencing narrows down to even smaller, highly specific regions, resulting in a more efficient and focused approach for certain applications, such as microbial diversity studies or detecting rare variants.",
|
||||
"Capable of detecting low-abundance species or genetic variants, providing specific resolution of target regions.",
|
||||
"Focuses on specific genomic regions, allowing for detailed and precise analysis.",
|
||||
"Provides quick insights into genetic composition and diversity, facilitating timely research and diagnostics."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/amplicon_seq.png"
|
||||
imageAlt="Amplicon Workflow"
|
||||
badgeText="AMPLICON SEQUENCING"
|
||||
|
||||
@ -23,7 +23,6 @@ export default function AmpliconSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<AmpliconIntroduction />
|
||||
<AmpliconAdvantages />
|
||||
<AmpliconApplications />
|
||||
<AmpliconSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,12 @@ const EnrichmentIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
|
||||
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
|
||||
"Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
|
||||
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
|
||||
];
|
||||
|
||||
const customBadgeContent = (
|
||||
<div className="text-center">
|
||||
@ -31,8 +37,10 @@ const EnrichmentIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/enrichment-overview.png"
|
||||
imageAlt="Enrichment Overview"
|
||||
backgroundColor="#f8f9fa"
|
||||
|
||||
@ -5,16 +5,15 @@ const EnrichmentPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const EnrichmentPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,6 @@ export default function EnrichmentSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EnrichmentIntroduction />
|
||||
<EnrichmentAdvantages />
|
||||
<EnrichmentPipeline/>
|
||||
<EnrichmentSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const TargetedIntroduction = () => {
|
||||
"Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
|
||||
"Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Focuses on specific genes or genomic regions, providing high-resolution analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"Delivers deep coverage of targeted regions, increasing the likelihood of detecting low-frequency variants and rare mutations.",
|
||||
"The streamlined workflow and reduced data set enable quicker data processing and analysis, allowing for more rapid diagnostic and research outcomes.",
|
||||
"Widely used in clinical settings, targeted sequencing enables the identification of actionable genetic variants that can guide personalized treatment strategies."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
|
||||
imageAlt="Targeted Sequencing Overview"
|
||||
badgeText="TARGETED SEQUENCING"
|
||||
|
||||
@ -23,7 +23,6 @@ export default function TargetedSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<TargetedIntroduction />
|
||||
<TargetedAdvantages />
|
||||
<TargetedApplications />
|
||||
<TargetedSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ExomeIntroduction = () => {
|
||||
"Pinpoints potential disease-causing mutations, providing valuable insights for population genetics, genetic disease research, and cancer studies.",
|
||||
"Extensively utilized in diagnostic setting to detect clinically relevant genomic alterations associated with phenotype of the patient."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Cost-effective as compared to Whole Genome Sequencing (WGS), making it accessible to a broader range of researchers and clinicians.",
|
||||
"WES offers extensive sequencing of exonic regions, improving the detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with a sensitivity comparable to WGS, ensuring high accuracy in identifying genetic variants.",
|
||||
"WES generates a smaller data set compared to WGS, facilitating faster and easier data analysis, which can expedite research and diagnostic processes.",
|
||||
"WES is widely used in both medical and agricultural fields, supporting advancements in disease diagnosis, personalized medicine, and crop improvement. Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
|
||||
imageAlt="DNA Structure"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -26,7 +26,6 @@ export default function WholeExomeSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ExomeIntroduction />
|
||||
<ExomeAdvantages />
|
||||
<ExomeApplications />
|
||||
<ExomeSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ATACIntroduction = () => {
|
||||
"The sequenced fragments are analysed using advanced bioinformatics tools to characterize the regulatory landscape, including chromatin accessibility, nucleosome mapping, and transcription factor binding.",
|
||||
"Assist in numerous applications like biomarker discovery, identification of novel enhancer, analysis of cell-type specific regulation, evolutionary studies and comparative epigenomic studies."
|
||||
];
|
||||
const advantageItems = [
|
||||
"ATAC-seq has become the method of choice for studying chromatin accessibility due to its efficiency and robust performance.",
|
||||
"Requires only 50,000 cells per sample, offering high sensitivity and making it ideal for studies with limited cell populations. This technique is versatile, applicable to both bulk tissue and single-cell analysis.",
|
||||
"Features simplified experimental steps, offering good reproducibility and a high success rate in generating reliable data.",
|
||||
"Simultaneously reveals the genomic locations of open chromatin, DNA-binding proteins, and transcription factor binding site interactions, providing a holistic view of chromatin accessibility."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/atac_sequencin.png"
|
||||
imageAlt="ATAC Workflow"
|
||||
badgeText="ATAC WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ATACSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ATACIntroduction />
|
||||
<ATACAdvantages />
|
||||
<ATACBioinformatics />
|
||||
<ATACApplications />
|
||||
<ATACSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ChIPIntroduction = () => {
|
||||
"Following this, NGS libraries are created by adding adapters and amplifying the DNA, which is subsequently sequenced on an Illumina platform.",
|
||||
"It provides valuable insights into gene regulation, revealing dysregulated pathways in cancers, developmental processes, and other biological phenomena."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers detailed genome-wide mapping of protein-DNA interactions, identifying binding sites of transcription factors, regulators, and other DNA-associated proteins.",
|
||||
"Utilizes specific antibodies to precisely capture and sequence protein-DNA complexes, providing accurate reflections of in vivo binding events.",
|
||||
"Reveals critical insights into gene regulation and chromatin dynamics, aiding in the understanding of gene expression, regulatory mechanisms, and epigenetic modifications.",
|
||||
"Facilitates studies on gene regulation in various contexts, including developmental processes, cancer research, and other biological phenomena, enhancing our understanding of complex biological systems and diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/ChIP-sequencing.png"
|
||||
imageAlt="ChIP Workflow"
|
||||
badgeText="ChIP WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ChIPSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ChIPIntroduction />
|
||||
<ChIPAdvantages />
|
||||
<ChIPBioinformatics />
|
||||
<ChIPApplications />
|
||||
<ChIPSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,13 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
"Reveals epigenetic alterations associated with diseases, development, and environmental responses, providing insights into cellular memory and inheritance patterns.",
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
@ -18,8 +25,10 @@ const EpigenomicsIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
|
||||
@ -5,16 +5,15 @@ const EpigenomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/epigenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const EpigenomicsPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,6 @@ export default function EpigenomicsSequencingPage() {
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsAdvantages />
|
||||
<EpigenomicsSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// WGBSApplications.jsx
|
||||
import ApplicationsLayout from '../../../../components/shared/AdvantagesLayout';
|
||||
import ApplicationsLayout from '../../../../components/shared/ApplicationsLayout';
|
||||
|
||||
const WGBSApplications = () => {
|
||||
const applicationItems = [
|
||||
|
||||
@ -9,11 +9,20 @@ const WGBSIntroduction = () => {
|
||||
"In bioinformatics analysis, sequencing data is aligned to a reference genome using advanced bioinformatics tools to determine the methylation status at CpG, CHG, and CHH sites.",
|
||||
"Valuable in epigenetic research for its ability to provide high-resolution insights into the regulatory mechanisms of the genome, offering a deeper understanding of cellular functions and molecular pathways."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides high-resolution mapping of DNA methylation patterns across the genome, including CpG, CHG, and CHH sites, offering detailed insights into epigenetic modifications.",
|
||||
"Enables precise quantification of methylation levels, distinguishing between methylated and unmethylated cytosines based on read counts.",
|
||||
"This technique can detect effective CpG sites reaching over 75% of all CpG sites in the entire genome.",
|
||||
"Provides valuable insights into cell fate determination, genetic reprogramming, gene regulation, developmental epigenetics, disease mechanisms, and the identification of new epigenetic markers and therapeutic targets."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_bisulphate_sequencing.png"
|
||||
imageAlt="WGBS Workflow"
|
||||
badgeText="WGBS WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function WGBSPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGBSIntroduction />
|
||||
<WGBSAdvantages />
|
||||
<WGBSBioinformatics />
|
||||
<WGBSApplications />
|
||||
<WGBSSpecifications />
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,12 @@ const GenomeMappingIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
|
||||
"Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
|
||||
"Offers comprehensive mapping capabilities that reveal the three-dimensional structure of chromosomes and identify regulatory interactions between distant genomic regions.",
|
||||
"Supports multiple research applications including cancer research, developmental biology, and evolutionary studies by providing detailed genomic structural information."
|
||||
];
|
||||
|
||||
const serviceTypes = [
|
||||
"HiC Mapping",
|
||||
@ -16,8 +22,10 @@ const GenomeMappingIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/genome-mapping-overview.png"
|
||||
imageAlt="Genome Mapping Overview"
|
||||
badgeText="GENOME MAPPING"
|
||||
|
||||
@ -5,16 +5,15 @@ const GenomeMappingPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/genoemapping.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const GenomeMappingPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,11 +10,19 @@ const HiCMappingIntroduction = () => {
|
||||
"The sequenced reads are processed using advanced bioinformatics tools, starting with alignment to a reference genome, followed by the identification of chromatin loops and the construction of 3D models of genome organization.",
|
||||
"Plays pivotal role in multiple applications, including identifying promoter-enhancer interactions for gene regulation studies, detecting structural rearrangements, scaffolding contigs to define chromosomes de novo, and revealing structural errors while accurately reintegrating mis-joined contigs during genome assembly processes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Quantifies interactions between closely located genomic loci in 3-D space, despite being separated by many nucleotides in the linear genome.",
|
||||
"Provides a detailed view of the 3D architecture of the genome, helping researchers understand how chromatin folding impacts gene regulation, genome organization, and cellular function.",
|
||||
"Captures interactions between distant regions of DNA, enabling the mapping of chromatin loops, topologically associated domains (TADs), and other structural features at high resolution.",
|
||||
"By revealing interactions between regulatory elements, such as enhancers and promoters, Hi-C mapping sheds light on how gene expression is controlled at the epigenetic and transcriptional levels."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/hic-sequencing.png"
|
||||
imageAlt="Hi-C Mapping Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -51,8 +51,6 @@ export default function HiCMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<HiCMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<HiCMappingAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<HiCMappingApplications />
|
||||
|
||||
@ -10,11 +10,19 @@ const OpticalMappingIntroduction = () => {
|
||||
"This allows for the comparison of genomic maps, identification of rearrangements, and integration with other sequencing data for comprehensive genome analysis.",
|
||||
"With the application in clinical and discovery research, the technique is improving genomics assembly, understanding of genetic disease and cancer by detecting CNVs, chromosomal aberrations and structural variants. Enables high-resolution analysis of large eukaryotic genomes and their structural features."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers detailed genome-wide mapping of protein-DNA interactions, identifying binding sites of transcription factors, regulators, and other DNA-associated proteins.",
|
||||
"Utilizes specific antibodies to precisely capture and sequence protein-DNA complexes, providing accurate reflections of in vivo binding events.",
|
||||
"Reveals critical insights into gene regulation and chromatin dynamics, aiding in the understanding of gene expression, regulatory mechanisms, and epigenetic modifications.",
|
||||
"Facilitates studies on gene regulation in various contexts, including developmental processes, cancer research, and other biological phenomena, enhancing our understanding of complex biological systems and diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/optical_mapping.png"
|
||||
imageAlt="Optical Mapping Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -51,9 +51,6 @@ export default function OpticalMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<OpticalMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<OpticalMappingAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<OpticalMappingApplications />
|
||||
|
||||
|
||||
@ -46,8 +46,6 @@ export default function GenomeMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<GenomeMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<GenomeMappingAdvantages />
|
||||
<GenomeMappingPipeline/>
|
||||
|
||||
{/* Specifications Section */}
|
||||
|
||||
@ -8,11 +8,19 @@ const HybridIntroduction = () => {
|
||||
"Following sequencing, advanced bioinformatics tools are used to align and integrate the long and short reads, enhancing variant detection and improving the resolution of complex genomic regions.",
|
||||
"Hybrid sequencing is applicable to a wide range of research areas, from complex genome assemblies to resolving repetitive regions and improving the quality of reference genomes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Combines long-read and short-read sequencing for more complete and accurate genome assemblies, effectively resolving complex regions and reducing gaps.",
|
||||
"Balances the cost efficiency of short-read sequencing with the detailed resolution of long-read sequencing, making it a budget-friendly choice for comprehensive genome analysis.",
|
||||
"Enhances detection of structural variants, such as large insertions and deletions, improving the understanding of genetic diversity and disease mechanisms.",
|
||||
"Provides better coverage of challenging genomic features, like high GC content and repetitive sequences, by leveraging the strengths of both sequencing technologies."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/hybrid_genome_seq.png"
|
||||
imageAlt="Sample Process Steps"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -47,9 +47,6 @@ export default function HybridGenomeSequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<HybridIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<HybridAdvantages />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
|
||||
|
||||
@ -10,8 +10,10 @@ const LongReadIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_long_read_seq.png"
|
||||
imageAlt="Long Read Sequencing"
|
||||
badgeText="LONG READ SEQUENCING"
|
||||
|
||||
@ -8,11 +8,19 @@ const MetagenomicsIntroduction = () => {
|
||||
"Bioinformatics analysis encompasses sequence alignment, taxonomy identification, and phylogenetic analysis. Additional analyses may involve functional annotation, comparative genomics, and statistical evaluations.",
|
||||
"Can be used to study diverse environmental samples like water, soil, and fecal matter, providing valuable insights into microbial diversity and host-microbiome interactions."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers a comprehensive view of microbial diversity in complex samples, capturing both known and novel species. NGS enables the parallel sequencing of thousands of organisms in a single run, providing high sequence coverage and detecting low-abundance microbes that may be missed or are cost-prohibitive with other techniques.",
|
||||
"Analyzes genomes directly from environmental samples without prior isolation or cultivation, overcoming the limitations of traditional culture-based methods. This approach is effective for studying microbial communities in their natural habitats.",
|
||||
"Reveals the metabolic capabilities and functional diversity of microbial communities, enhancing our understanding of ecosystem processes and microbial roles within various environments.",
|
||||
"Facilitates detailed genetic and ecological analysis, supporting studies on microbial interactions, evolution, and adaptation, with broad applications in environmental monitoring, biotechnology, agriculture, and human health."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/metagenomics-sequencing.png"
|
||||
imageAlt="Metagenomics Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const MetagenomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/metagenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const MetagenomicsPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,8 +47,7 @@ export default function MetagenomicsSequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<MetagenomicsIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MetagenomicsAdvantages />
|
||||
|
||||
<MetagenomicsPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
|
||||
@ -9,11 +9,20 @@ const MicrosatellitesIntroduction = () => {
|
||||
"Electropherogram data is converted into allele calls, allowing allele size analysis, frequency distribution, and individual or population-level genotype matching.",
|
||||
"Microsatellite-based genotyping is widely applied in fields like conservation genetics, forensic science, and agriculture."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Highly variable in repeat number among individuals, making them effective for distinguishing genetic differences within and between populations.",
|
||||
"Unlike multi-locus markers like minisatellites, microsatellites are locus-specific, providing precise, targeted genetic information for detailed genotyping and genetic mapping.",
|
||||
"Highly reproducible across labs, making it a reliable method for studies requiring consistent and repeatable results, such as population genetics and forensic analysis.",
|
||||
"Show co-dominant inheritance, allowing the detection of both alleles at a locus for accurate identification of heterozygous and homozygous genotypes."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/microsatellites-sequencing.png"
|
||||
imageAlt="Microsatellites Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -46,9 +46,6 @@ export default function MicrosatellitesSSRSTRPage() {
|
||||
{/* Introduction Section */}
|
||||
<MicrosatellitesIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MicrosatellitesAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<MicrosatellitesApplications />
|
||||
|
||||
|
||||
@ -9,11 +9,20 @@ const SingleCellIntroduction = () => {
|
||||
"During sequencing, the barcode identifiers enable precise tracking of data to its specific cell or nucleus of origin, thereby providing comprehensive genetic insights for individual cells.",
|
||||
"This technique enables researchers to unravel unique genetic characteristics and variations present within individual cells, providing unprecedented insights into cellular diversity and function."
|
||||
];
|
||||
const advantageItems = [
|
||||
"DNA exhibits greater stability compared to RNA, ensuring ample time for sample processing without degradation.",
|
||||
"Capable of detecting rare mutation-bearing cell clones with sensitivity levels as low as 0.1%, enabling direct analysis of rare cell types or primary cells even with limited samples.",
|
||||
"Reveals the diversity of genetic profiles within cell populations, aiding in the study of complex biological processes and enabling precise profiling of subpopulations like cancer cell evolution or DNA copy number variations in neurons.",
|
||||
"Allows for the tracking of genetic changes over time within individual cells, crucial for understanding disease progression and evolution."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/single_cell_dna_sequencing.png"
|
||||
imageAlt="Single Cell DNA Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const SingleCellPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/singlecell.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const SingleCellPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,8 +47,6 @@ export default function SingleCellDNASequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<SingleCellIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
|
||||
@ -5,6 +5,13 @@ const SNPIntroduction = () => {
|
||||
const contentItems = [
|
||||
"SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
|
||||
"Provides an efficient, cost-effective solution for analyzing thousands of SNPs across large populations, ideal for high-throughput studies.",
|
||||
"SNP markers are stable and abundant across genomes, providing high data quality, reproducibility, and scalability, which are essential for reliable genetic studies, comparative analyses across multiple populations or species, and make SNP-based genotyping a powerful tool for both research and applied genomics.",
|
||||
"Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"DNA Sequencing",
|
||||
@ -14,8 +21,10 @@ const SNPIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
|
||||
imageAlt="SNP Genotyping Overview"
|
||||
badgeText="ISO CERTIFIED"
|
||||
|
||||
@ -25,7 +25,6 @@ export default function SNPGenotypingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<SNPIntroduction />
|
||||
<SNPAdvantages />
|
||||
<SNPApplications />
|
||||
<SNPSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ 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.",
|
||||
"Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
|
||||
"Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
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}
|
||||
|
||||
@ -3,17 +3,25 @@
|
||||
import IntroductionLayout from '../../../../components/shared/IntroductionLayout';
|
||||
|
||||
const DenovoIntroduction = () => {
|
||||
const contentItems = [
|
||||
const introItems = [
|
||||
"Whole Genome Denovo Sequencing involves sequencing an organism's entire genome from scratch, without a reference genome. This approach is essential for species with unsequenced or incomplete genomes.",
|
||||
"The workflow includes isolating DNA, fragmenting it, and sequencing to produce millions of short reads.",
|
||||
"These reads are then assembled into longer sequences, called contigs, using bioinformatics tools in the genome assembly process.",
|
||||
"It can be used for sequencing diverse species, such as agriculturally important livestock, plants, bacteria, or disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Eliminates the need for pre-existing reference genomes, which allows for the discovery of novel genetic elements and variations that may not be present in other genomes, providing a truly unbiased view of the genome.",
|
||||
"Identifies new genes and genetic variations that may be missed by relying on reference genomes alone.",
|
||||
"Offers high-resolution insights into the genome, including complex regions such as repetitive sequences and heterochromatic regions, which are often challenging to assemble with other sequencing approaches.",
|
||||
"Enhances our understanding of genetic diversity, facilitates comparative genomics, and contributes significantly to advancements in genomic research across various fields."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={introItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
imageAlt="De Novo Assembly Workflow"
|
||||
badgeText="DE NOVO ASSEMBLY"
|
||||
|
||||
@ -5,16 +5,15 @@ const WGSDeNovoPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/denovo.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const WGSDeNovoPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@ export default function WholeGenomeDenovoPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<DenovoIntroduction />
|
||||
<DenovoAdvantages />
|
||||
<WGSDeNovoPipeline/>
|
||||
<DenovoApplications />
|
||||
<DenovoSpecifications />
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import WGSIntroduction from './components/WGSIntroduction';
|
||||
import WGSAdvantages from './components/WGSAdvantages';
|
||||
import WGSSpecifications from './components/WGSSpecifications';
|
||||
import PageLayout from '@/app/components/Layout/PageLayout';
|
||||
|
||||
@ -22,7 +21,6 @@ export default function WholeGenomeSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGSIntroduction />
|
||||
<WGSAdvantages />
|
||||
<WGSSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -9,11 +9,19 @@ const ResequencingIntroduction = () => {
|
||||
"These reads undergo alignment to a reference genome, followed by the analysis of genetic variations using advanced bioinformatics tools.",
|
||||
"It enables detailed analysis of genetic variations across diverse species like humans, plants, and bacteria."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a detailed examination of an organism's entire genome, revealing all genetic variations compared to a reference genome.",
|
||||
"Enables accurate identification of single nucleotide polymorphisms (SNPs), insertions, deletions, and structural variants, crucial for understanding genetic diversity and disease mechanisms.",
|
||||
"Facilitates the discovery of genetic markers associated with diseases, guiding personalized treatment approaches.",
|
||||
"Supports diverse studies including evolutionary biology, agricultural genetics, and microbial genomics, enhancing insights into genetic adaptations and relationships across species."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/resequencing-workflow.png"
|
||||
imageAlt="Resequencing Workflow"
|
||||
badgeText="RESEQUENCING"
|
||||
|
||||
@ -5,16 +5,15 @@ const WGSResequencingPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const WGSResequencingPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@ export default function WholeGenomeResequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ResequencingIntroduction />
|
||||
<ResequencingAdvantages />
|
||||
<WGSResequencingPipeline/>
|
||||
<ResequencingApplications />
|
||||
<ResequencingSpecifications />
|
||||
|
||||
@ -8,11 +8,19 @@ const CircularIntroduction = () => {
|
||||
"The workflow starts with isolating total RNA from the sample, which includes both linear and circular RNAs. Linear RNAs are then removed through ribosomal RNA (rRNA) depletion or exonuclease treatment to enrich the circular RNA fraction. Next, the RNA is circularized, and sequencing adapters are added during library preparation. The final step involves sequencing the prepared libraries.",
|
||||
"Bioinformatics analysis for circRNA sequencing involves preprocessing data and mapping reads to a reference genome to identify back-splicing junctions. Computational tools are then used to quantify circRNA expression, discover novel circRNAs, and perform downstream analysis."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Circular RNAs are inherently more stable due to their covalently closed structure, making them less susceptible to degradation and providing reliable expression data.",
|
||||
"Enables the identification of novel isoforms and splice variants that may not be detected with traditional RNA sequencing methods.",
|
||||
"Offers a detailed view of circular RNA expression and their interactions within the cell, aiding in a deeper understanding of gene regulation and cellular processes.",
|
||||
"Closed-loop structure of circRNAs minimizes potential sequencing artifacts, leading to more accurate and consistent data."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/circular_rna_sequencing.png"
|
||||
imageAlt="Circular RNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const CircularRNAPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/circularrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const CircularRNAPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,11 +8,19 @@ const DegradomeIntroduction = () => {
|
||||
"Bioinformatics analysis for Degradome Sequencing include data preprocessing, aligning reads to reference genomes, identifying miRNA/ta-siRNA cleavage sites, and quantifying cleaved targets, revealing RNA decay dynamics and regulatory mechanisms.",
|
||||
"The method facilitates the discovery of novel miRNAs and ta-siRNAs, studies on miRNA-mediated gene regulation, and comparative RNA decay analysis across species, contributing to a comprehensive understanding of RNA life cycles."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Degradome sequencing provides a focused analysis of RNA degradation, specifically targeting cleavage sites mediated by miRNAs and ta-siRNAs, making it ideal for studying gene regulation and RNA stability.",
|
||||
"By targeting degradation products, degradome sequencing minimizes the impact of intact RNAs, enhancing sensitivity for detecting miRNA targets and cleavage events.",
|
||||
"Degradome sequencing focuses on RNA cleavage sites, eliminating the need for additional steps like ribosomal RNA removal, making it a more cost-effective alternative to broader transcriptome studies.",
|
||||
"Degradome sequencing enables the identification of novel regulatory elements, such as circRNAs and biomarkers, expanding its utility in understanding RNA regulatory networks."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/degradome_sequencing.png"
|
||||
imageAlt="Degradome Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const DegradomeSequencingPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/degradomerna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const DegradomeSequencingPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,6 @@ export default function DegradomeSequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<DegradomeIntroduction />
|
||||
<DegradomeAdvantages />
|
||||
<DegradomeSequencingPipeline/>
|
||||
<DegradomeApplications />
|
||||
<DegradomeSpecifications />
|
||||
|
||||
@ -9,11 +9,19 @@ const IsoIntroduction = () => {
|
||||
"The bioinformatics analysis of Iso-Seq data involves assembling full-length transcripts, annotating them, and comparing them to reference genomes or existing databases. This detailed analysis reveals the complexity of gene expression, including novel isoforms and splice variants, and aids in understanding their functional roles in various biological processes.",
|
||||
"Iso-Seq using PacBio is particularly valuable for exploring gene expression at a granular level, discovering novel transcripts, and enhancing annotations of complex genomes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Unlike traditional methods, which may miss complex isoforms or splice variants, Iso-Seq captures full-length RNA sequences, enabling the identification of all transcript isoforms, including those with complex splicing and alternative start or end sites.",
|
||||
"Provides high-fidelity data with long read lengths, reducing errors and missing information common in shorter-read sequencing methods.",
|
||||
"Reduces challenges with transcript assembly and alignment by providing full-length reads that eliminate ambiguities and enhance transcriptome reconstruction accuracy. Improves genome annotations by precisely identifying gene structures, exons, introns, and regulatory elements, leading to more accurate functional insights.",
|
||||
"Uncovers novel isoforms, splice variants, and post-transcriptional modifications, providing a comprehensive view of gene expression. This detailed approach is essential for functional genomics, transcriptomics, and alternative splicing studies, offering valuable insights into gene regulation and function."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/ISO_sequencing_using_pacBio.png"
|
||||
imageAlt="ISO Sequencing using PacBio Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const IsoformPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/isoseqrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const IsoformPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,6 @@ export default function IsoSequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<IsoIntroduction />
|
||||
<IsoAdvantages />
|
||||
<IsoformPipeline/>
|
||||
<IsoApplications />
|
||||
<IsoSpecifications />
|
||||
|
||||
@ -5,16 +5,15 @@ const LncRNABioinformatics = ({
|
||||
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 (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const LncRNABioinformatics = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,11 +8,19 @@ const LncRNAIntroduction = () => {
|
||||
"The bioinformatics pipeline for lncRNA sequencing involves the alignment of sequencing data to reference genomes, identification of lncRNAs, quantification of their expression level, and other downstream analyses.",
|
||||
"lncRNA sequencing uncovers their roles in gene regulation and highlights their various functions, including chromatin remodeling, transcriptional control, nucleosome repositioning, and post-transcriptional processing."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Identifies both well-known and novel lncRNAs, providing fresh insights into their roles and potential as biomarkers.",
|
||||
"Reveals lncRNAs' involvement in a broad range of molecular functions, such as chromatin remodeling, which is essential for regulating gene expression. This process includes modifying chromatin structure to control gene accessibility and influencing various cellular mechanisms, demonstrating lncRNAs' crucial roles in gene regulation and cellular function across mammals and plants.",
|
||||
"Provides a thorough understanding of lncRNAs' roles in gene regulation, encompassing both transcriptional and post-transcriptional levels. It highlights how lncRNAs affect transcription factors, alter nucleosome positioning, and contribute to RNA splicing and stability, thus impacting overall gene expression and cellular processes.",
|
||||
"Enables high-resolution analysis, allowing for precise detection and detailed characterization of lncRNA expression and their regulatory networks, offering a deep dive into their functional roles within cells."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/lncRNA_sequencing.png"
|
||||
imageAlt="lncRNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -21,7 +21,6 @@ export default function LncRNASequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<LncRNAIntroduction />
|
||||
<LncRNAAdvantages />
|
||||
<LncRNABioinformatics />
|
||||
<LncRNAApplications />
|
||||
<LncRNASpecifications />
|
||||
|
||||
@ -8,11 +8,19 @@ const MetatranscriptomicsIntroduction = () => {
|
||||
"The bioinformatics workflow includes preprocessing the raw sequencing reads, performing quality control, and normalizing the data. The reads are mapped to reference genomes or databases to quantify gene expression levels. Functional annotation and pathway analysis are then carried out to understand the roles of various transcripts and their impact on microbial community functions.",
|
||||
"Metatranscriptomics is applicable to a wide range of environmental samples, such as soil, oceans, and the human gut, facilitating studies on microbial diversity, disease mechanisms, nutrient cycling, and environmental adaptation."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides insights into the functional dynamics of microorganisms by revealing active gene expression and their roles within complex communities. This approach uncovers how microorganisms contribute to ecosystem processes and their interactions.",
|
||||
"Analyzes microbial communities directly from environmental samples, removing the need for isolating or cultivating individual microbes. This method captures a more comprehensive view of microbial diversity.",
|
||||
"Uses next-generation sequencing (NGS) to identify novel genes and track transcriptional changes, offering high-resolution data on gene expression. This allows for precise identification of active genes, pathways, and regulatory networks within microbial communities.",
|
||||
"Offers an advantage over metagenomics by including both microbial species information and gene expression data. This dual focus provides a deeper understanding of microbial community changes from a transcriptional perspective and aids in the discovery of potential new genes."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/Metatranscriptomics.png"
|
||||
imageAlt="Metatranscriptomics Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const MetatranscriptomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/metatranscriptomicsrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const MetatranscriptomicsPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,6 @@ export default function MetatranscriptomicsSequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<MetatranscriptomicsIntroduction />
|
||||
<MetatranscriptomicsAdvantages />
|
||||
<MetatranscriptomicsPipeline/>
|
||||
<MetatranscriptomicsApplications />
|
||||
<MetatranscriptomicsSpecifications />
|
||||
|
||||
@ -2,17 +2,25 @@
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const MRNAIntroduction = () => {
|
||||
const contentItems = [
|
||||
const introItems = [
|
||||
"Messenger RNA-Seq (mRNA-Seq) is a focused RNA-Seq method that targets polyadenylated (poly-A) transcripts, which comprise only about 1-2% of the transcriptome, mainly representing coding genes. By enriching these poly-A-tailed RNAs, mRNA-Seq offers a precise snapshot of gene expression, capturing the complete range of mRNA transcripts within a sample and enabling detailed analysis of gene activity across various conditions.",
|
||||
"mRNA-seq workflow typically includes RNA extraction, enrichment or depletion of mRNA, library preparation, and high-throughput sequencing. This workflow ensures precise and efficient capture of mRNA transcripts for thorough downstream analysis.",
|
||||
"Bioinformatics analysis for mRNA-seq involves several key steps: data preprocessing, alignment to a reference genome, quantifying gene expression levels, and advanced downstream analyses such as differential expression, pathway enrichment, and gene ontology analysis.",
|
||||
"Widely applicable across diverse research fields, including human, animal, and plant studies, providing profound insights into genetic landscapes and contributing to our understanding of gene function and regulation."
|
||||
];
|
||||
const advantageItems = [
|
||||
"mRNA-Seq provides a targeted analysis of gene expression specific to protein-coding regions, making it ideal for studies focused on gene regulation, protein synthesis, and disease-related expression changes.",
|
||||
"mRNA-Seq focuses on mRNA enrichment, which minimizes the impact of non-coding RNAs and enhances sensitivity for detecting gene expression changes.",
|
||||
"Focusing solely on coding regions, mRNA-Seq does not require rRNA-specific probes (Costly) for ribosomal RNA removal and requires comparatively lesser data, making it a more cost-effective alternative to Whole Transcriptome Sequencing.",
|
||||
"With a more targeted dataset, the bioinformatics analysis of mRNA-Seq is often simpler and faster, focusing on coding genes without the complexity introduced by non-coding RNAs."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={introItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/mRNA_sequencing.png"
|
||||
imageAlt="mRNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const MRNAPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/mrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const MRNAPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,6 @@ export default function MRNASequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<MRNAIntroduction />
|
||||
<MRNAAdvantages />
|
||||
<MRNAPipeline/>
|
||||
<MRNAApplications />
|
||||
<MRNASpecifications />
|
||||
|
||||
@ -8,11 +8,19 @@ const SingleCellIntroduction = () => {
|
||||
"The bioinformatics pipeline includes data preprocessing, which involves quality control and normalization of the sequencing reads. The reads are then aligned to a reference genome or transcriptome to identify gene expression levels in each cell. Subsequent analysis involves clustering of cells based on expression profiles, differential gene expression analysis, and the identification of cell types and states.",
|
||||
"Single-cell high-resolution transcriptome profiling offers valuable insights into gene regulatory networks and unveils diverse gene expression patterns within individual cells across cell cultures, tissues, and organs."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Unlike traditional bulk RNA sequencing, which averages gene expression across many cells and can hide unique cellular differences, single-cell RNA sequencing examines each cell individually. This reveals variations in gene expression and provides detailed insights into cellular functions, development, and disease mechanisms that are often lost in population-level data.",
|
||||
"Enables the discovery and characterization of rare or previously unrecognized cell populations, essential for understanding complex biological systems and disease mechanisms.",
|
||||
"Delivers high-resolution data on gene expression patterns, allowing for precise mapping of gene regulatory networks and cellular states, and uncovering intricate details of cellular interactions.",
|
||||
"Supports the identification of biomarkers and therapeutic targets by offering a detailed snapshot of gene activity specific to individual cell types or states, facilitating more targeted and effective research and treatments."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/Single_cell_RNA_sequencing.png"
|
||||
imageAlt="Single Cell RNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const SingleCellPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/singlecellrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const SingleCellPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,16 +5,15 @@ const SRNABioinformatics = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/smallrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const SRNABioinformatics = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,17 +2,25 @@
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const SRNAIntroduction = () => {
|
||||
const contentItems = [
|
||||
const introItems = [
|
||||
"Small RNA sequencing (sRNA-seq) is designed to identify and analyze small non-coding RNAs (ncRNAs) that are under 200 nucleotides in length. These small RNAs, including microRNAs (miRNAs), small interfering RNAs (siRNAs), small nucleolar RNAs (snoRNAs), PIWI-interacting RNAs (piRNAs), and trans-acting siRNAs (tasiRNAs), play crucial roles in gene silencing and post-transcriptional regulation.",
|
||||
"The sRNA-seq workflow involves isolating miRNAs from samples, followed by preparing libraries with specific adapters and sequencing them using high-throughput platforms.",
|
||||
"The bioinformatics pipeline for sRNA-seq encompasses data preprocessing, alignment with reference genomes, and identification of small RNA species. This analysis includes differential expression studies, characterization of novel small RNAs, and pathway analysis to gain functional insights into sRNA-target interactions.",
|
||||
"Facilitates the discovery of novel small RNAs and offers detailed insights into their expression and functions. It links post-transcriptional regulation to phenotypic outcomes, aiding in the understanding of disease mechanisms and the identification of new biomarkers."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a comprehensive view of the small RNA landscape by capturing a broad range of small RNA species, including miRNAs, siRNAs, snoRNAs, piRNAs, and tasiRNAs.",
|
||||
"Facilitates comparative studies by allowing the comparison of small RNA expression profiles across different conditions or species, supporting investigations into developmental, environmental, and disease-related changes.",
|
||||
"Identifies previously unmapped small RNAs and isoforms, as well as novel biomarkers, expanding the scope of genetic research and potential clinical applications.",
|
||||
"Enhances understanding of how post-transcriptional regulation affects phenotypes and offers detailed functional insights into small RNA-target interactions and their roles in various cellular pathways, improving the understanding of gene regulation and function."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={introItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/small_RNA_sequencing.png"
|
||||
imageAlt="Small RNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -21,7 +21,6 @@ export default function SmallRNASequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<SRNAIntroduction />
|
||||
<SRNAAdvantages />
|
||||
<SRNABioinformatics />
|
||||
<SRNAApplications />
|
||||
<SRNASpecifications />
|
||||
|
||||
@ -2,17 +2,27 @@
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const WTSIntroduction = () => {
|
||||
const contentItems = [
|
||||
const introItems = [
|
||||
"Whole Transcriptome Sequencing (WTS) comprehensively captures and quantifies all RNA transcripts, both coding (mRNA) and long non-coding (rRNA, tRNA), providing an in-depth view of gene expression.",
|
||||
"This method combines a ribosomal RNA depletion strategy with Illumina NGS technology for efficient and precise results. The approach (1) reduces ribosomal contamination and increases the proportion of uniquely mapped reads, and (2) is particularly beneficial for species, such as bacteria, whose mRNA may lack a poly-A tail.",
|
||||
"The bioinformatics pipeline includes data preprocessing, genome mapping, transcript identification, and downstream analyses like differential expression analysis, lncRNA target gene analysis, GO enrichment analysis, and KEGG enrichment analysis.",
|
||||
"This technique is applicable to a wide range of species, including humans, mouse, rat, other animals, plants, and prokaryotes. It is compatible with various samples like; high and low-quality RNA samples, cell-free RNA, formalin-fixed paraffin-embedded (FFPE) tissues and RNA."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Enables the identification of novel transcripts, alternative splicing events, post-transcriptional modifications, and gene fusions without prior knowledge, making it ideal for exploratory research.",
|
||||
"Analyzing the entire transcriptome helps gain a deeper understanding of gene regulation, cellular responses, and pathways, leading to a more comprehensive view of biological processes.",
|
||||
"Enables allele-specific gene expression analysis, offering valuable insights into gene regulation and genetic variability.",
|
||||
"Facilitates higher detection rates of gene fusions, indels, SNPs, and other genetic variations, offering greater reliability in research outcomes.",
|
||||
"Widely used in fields such as cancer research and developmental biology, WTS uncovers complex molecular mechanisms and aids in the discovery of potential biomarkers.",
|
||||
"Provides valuable insights into bacterial gene expression, helping to unravel the mysteries of gene regulation, host-pathogen interactions, antibiotic resistance, and the underlying causes of various diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={introItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/total_rna_sequencing.png"
|
||||
imageAlt="Whole Transcriptome Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const WTSPipeline = ({
|
||||
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 (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const WTSPipeline = ({
|
||||
<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">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,6 @@ export default function WholeTranscriptomeSequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<WTSIntroduction />
|
||||
<WTSAdvantages />
|
||||
<WTSPipeline/>
|
||||
<WTSApplications />
|
||||
<WTSSpecifications />
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 207 KiB |
Reference in New Issue
Block a user