UI styling update
This commit is contained in:
mukesh13
@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user