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

UI styling update

Browse Source
This commit is contained in:
mukesh13
2025-08-21 12:40:06 +05:30
parent 543e21d2e2
commit 24ec58a76b
78 changed files with 524 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellIntroduction.jsx
View File

@ -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}

15
app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx
View File

@ -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>