[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import VariantAnalysis from "@/components/variant-modal" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --font-sans: var(--font-nunito-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* Improve font rendering */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } /* Adjust font sizes for Crimson Text which is a serif font */ h1, h2, h3, h4, h5, h6 { @apply tracking-normal; } /* Adjust monospace font for better contrast with Crimson Text */ .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } } [V0_FILE]javascript:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Crimson_Text } from "next/font/google" // Initialize the Crimson Text font const crimsonText = Crimson_Text({ subsets: ["latin"], display: "swap", weight: ["400", "600", "700"], // Crimson Text available weights }) export const metadata: Metadata = { title: "Predicted Effect", description: "Variant analysis and classification tool", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/score-summary-redesign.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, Info } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" interface ScoreSummaryProps { evidencePoints: number | string selectedPredictor: string customPredictorName?: string predictorScore?: string transcriptRelevance?: string totalInformativePoints: number splicingScore?: number | string | null scoringStep: number } export function ScoreSummary({ evidencePoints, selectedPredictor, customPredictorName = "", predictorScore = "", transcriptRelevance = "", totalInformativePoints, splicingScore = null, scoringStep, }: ScoreSummaryProps) { const [detailsExpanded, setDetailsExpanded] = useState(false) // Calculate the final score const calculateFinalScore = () => { if (evidencePoints === "Not Met" && totalInformativePoints === 0) { return "Not Met" } if (evidencePoints === "Not Met") { return totalInformativePoints } const initialPoints = transcriptRelevance && evidencePoints !== "Not Met" ? (Number(evidencePoints) * Number.parseInt(transcriptRelevance)) / 100 : Number(evidencePoints) let finalScore = initialPoints + totalInformativePoints // Add splicing score if available and not "NA" if (splicingScore !== null && splicingScore !== "NA" && scoringStep >= 5) { finalScore += Number(splicingScore) } return finalScore } const finalScore = calculateFinalScore() const isPositive = typeof finalScore === "number" && finalScore > 0 const isNegative = typeof finalScore === "number" && finalScore < 0 const isNeutral = typeof finalScore === "number" && finalScore === 0 const isNotMet = finalScore === "Not Met" // Get color class based on score const getScoreColorClass = () => { if (isPositive) return "text-red-600 bg-red-50 border-red-200" if (isNegative) return "text-green-600 bg-green-50 border-green-200" if (isNeutral) return "text-gray-600 bg-gray-50 border-gray-200" return "text-gray-600 bg-gray-50 border-gray-200" // Not Met or other cases } // Format the score for display const formatScore = (score: number | string) => { if (score === "Not Met") return "Not Met" if (typeof score === "number") { return (score > 0 ? "+" : "") + score.toFixed(1) } return score } // Get the score breakdown items const getScoreBreakdownItems = () => { const items = [] // Initial impact if (evidencePoints !== "Not Met") { items.push({ label: "Initial Impact", value: Number(evidencePoints), details: `${selectedPredictor}${selectedPredictor === "Other" ? ` (${customPredictorName})` : ""} score: ${predictorScore}`, }) } // Modified impact (if transcript relevance is set) if (transcriptRelevance && evidencePoints !== "Not Met" && scoringStep >= 3) { const modifiedValue = (Number(evidencePoints) * Number.parseInt(transcriptRelevance)) / 100 items.push({ label: "Modified Impact", value: modifiedValue, details: `${transcriptRelevance}% transcript relevance`, }) } // Informative variants if (totalInformativePoints !== 0 && scoringStep >= 4) { items.push({ label: "Informative Variants", value: totalInformativePoints, details: "", }) } // Splicing assessment if (splicingScore !== null && splicingScore !== "NA" && scoringStep >= 5) { items.push({ label: "Splicing Assessment", value: Number(splicingScore), details: "", }) } return items } const scoreBreakdownItems = getScoreBreakdownItems() return (

{/* Main Score Card */}

{/* Score Header */}

Predicted Effect Score

{formatScore(finalScore)}

{/* Score Breakdown */}

Score Breakdown

{scoreBreakdownItems.length > 0 ? ( scoreBreakdownItems.map((item, index) => (

{item.label}: 0 ? "text-red-600" : item.value < 0 ? "text-green-600" : "text-gray-600"}`} > {item.value > 0 ? "+" : ""} {item.value.toFixed(1)}

{item.details && {item.details}}

)) ) : (

No score components available yet

)} {/* Visual Score Representation */}

Benign Pathogenic

{typeof finalScore === "number" && (

)}

-5.0 0.0 +5.0

) } [V0_FILE]typescriptreact:file="components/variant-modal-with-redesign.tsx" isFixed="true" isQuickEdit="true" isMerged="true" // This is a partial implementation showing how to integrate the redesigned score summary // Import the ScoreSummary component at the top of your file import { ScoreSummary } from "./score-summary-redesign" // Then in your component, replace the current score summary section with: { scoringStep >= 3 && ( ) } [V0_FILE]typescriptreact:file="components/variant-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ExternalLink, AlertTriangle, ChevronDown, Check, Edit, Info, AlertCircle } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { ScoreSummary } from "./score-summary" // In Silico Predictors Data const inSilicoPredictors = [ { tool: "REVEL", score: "0.368", prediction: "Benign", scoreRange: "0-1 (higher = more path)", transcript: "NM_000546.6", maneSelect: true, }, { tool: "VEST4", score: "0.083", prediction: "Benign", scoreRange: "0-1 (higher = more path)", transcript: "ENST00000445888.6", maneSelect: true, }, { tool: "BayesDel", score: "-0.333827", prediction: "Benign", scoreRange: "1.29334-0.75731 (higher = more path)", transcript: "Not known", maneSelect: false, }, { tool: "AlphaMissense", score: "0.89", prediction: "Tolerated", scoreRange: "0-1 (≥0.05: tolerated)", transcript: "NM_000546.6", maneSelect: true, }, { tool: "ESM1b", score: "0.012", prediction: "Benign", scoreRange: "0-1 (≥0.15: benign)", transcript: "ENST00000445888.6", maneSelect: true, }, { tool: "MutationTaster", score: "1.2", prediction: "Below threshold", scoreRange: "1-99 (≥20: damaging)", transcript: "Not known", maneSelect: false, }, { tool: "PROVEAN", score: "-2.41", prediction: "Not conserved", scoreRange: "-12.3-6.17 (≥2: conserved)", transcript: "NM_000546.6", maneSelect: true, }, ] // ClinVar Variants in Codon Data const clinvarVariants = [ { variant: "c.215C>T", proteinChange: "p.Pro72Ser", classification: "Uncertain Significance", reviewStatus: "1 star", source: "ClinVar", }, { variant: "c.215C>A", proteinChange: "p.Pro72Thr", classification: "Uncertain Significance", reviewStatus: "1 star", source: "ClinVar", }, { variant: "c.214C>T", proteinChange: "p.Pro72Leu", classification: "Likely Pathogenic", reviewStatus: "2 stars", source: "ClinVar", }, { variant: "c.214C>G", proteinChange: "p.Pro72Ala", classification: "Uncertain Significance", reviewStatus: "Approved", source: "TP53 VCEP", }, ] // RefSeq Transcripts Data const refSeqTranscripts = [ { nucleotideChange: "NM_000546.6:c.215C>G (TP53)", exon: "4/11", proteinChange: "NP_000537.3:p.Pro72Arg", molecularConsequence: "missense_variant", maneSelect: true, }, { nucleotideChange: "NM_001126112.3:c.215C>G (TP53)", exon: "4/11", proteinChange: "NP_001119.3:p.Pro72Arg", molecularConsequence: "missense_variant", maneSelect: false, }, ] // Ensembl Transcripts Data const ensemblTranscripts = [ { nucleotideChange: "ENST00000269305.8:c.215C>G (TP53)", exon: "4/11", proteinChange: "ENSP00000269305.4:p.Pro72Arg", molecularConsequence: "missense_variant", maneSelect: false, }, { nucleotideChange: "ENST00000445888.6:c.215C>G (TP53)", exon: "4/11", proteinChange: "ENSP00000391127.2:p.Pro72Arg", molecularConsequence: "missense_variant", maneSelect: true, }, ] // Initial Evidence Points data const initialEvidencePoints = { AlphaMissense: [ { range: [0.99, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.972, 0.989], points: 3.0 }, { range: [0.906, 0.971], points: 2.0 }, { range: [0.792, 0.905], points: 1.0 }, { range: [0.17, 0.791], points: 0.0 }, { range: [0.1, 0.169], points: -1.0 }, { range: [0.071, 0.099], points: -2.0 }, { range: [0.0, 0.07], points: -3.0 }, ], BayesDel: [ { range: [0.5, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.41, 0.499], points: 3.0 }, { range: [0.27, 0.409], points: 2.0 }, { range: [0.13, 0.269], points: 1.0 }, { range: [-0.179, 0.129], points: 0.0 }, { range: [-0.359, -0.18], points: -1.0 }, { range: [-0.519, -0.36], points: -2.0 }, { range: [Number.NEGATIVE_INFINITY, -0.52], points: -3.0 }, ], ESM1b: [ { range: [Number.NEGATIVE_INFINITY, -24.0], points: 4.0 }, { range: [-23.9, -14.0], points: 3.0 }, { range: [-13.9, -12.2], points: 2.0 }, { range: [-12.1, -10.7], points: 1.0 }, { range: [-10.6, -6.4], points: 0.0 }, { range: [-6.3, -3.2], points: -1.0 }, { range: [-3.1, 8.9], points: -2.0 }, { range: [8.8, Number.POSITIVE_INFINITY], points: -3.0 }, ], MutPred2: [ { range: [0.932, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.895, 0.931], points: 3.0 }, { range: [0.829, 0.894], points: 2.0 }, { range: [0.737, 0.828], points: 1.0 }, { range: [0.392, 0.736], points: 0.0 }, { range: [0.198, 0.391], points: -1.0 }, { range: [0.032, 0.197], points: -2.0 }, { range: [0.011, 0.031], points: -3.0 }, { range: [0.0, 0.01], points: -4.0 }, ], REVEL: [ { range: [0.932, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.879, 0.931], points: 3.0 }, { range: [0.773, 0.878], points: 2.0 }, { range: [0.644, 0.772], points: 1.0 }, { range: [0.291, 0.643], points: 0.0 }, { range: [0.184, 0.29], points: -1.0 }, { range: [0.053, 0.183], points: -2.0 }, { range: [0.017, 0.052], points: -3.0 }, { range: [0.0, 0.016], points: -4.0 }, ], VARITY_R: [ { range: [0.966, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.915, 0.965], points: 3.0 }, { range: [0.842, 0.914], points: 2.0 }, { range: [0.675, 0.841], points: 1.0 }, { range: [0.252, 0.674], points: 0.0 }, { range: [0.117, 0.251], points: -1.0 }, { range: [0.063, 0.116], points: -2.0 }, { range: [0.037, 0.062], points: -3.0 }, { range: [0.0, 0.036], points: -4.0 }, ], VEST4: [ { range: [0.965, Number.POSITIVE_INFINITY], points: 4.0 }, { range: [0.909, 0.964], points: 3.0 }, { range: [0.861, 0.908], points: 2.0 }, { range: [0.764, 0.86], points: 1.0 }, { range: [0.45, 0.763], points: 0.0 }, { range: [0.303, 0.449], points: -1.0 }, { range: [0.078, 0.302], points: -2.0 }, { range: [0.0, 0.077], points: -3.0 }, ], } // Step names for the scoring process const stepNames = ["Variant Type", "Initial Impact", "Modify Impact", "Informative", "Splicing Assessment", "Summary"] // Classification options const classificationOptions = ["Pathogenic", "Likely Pathogenic", "VUS", "Likely Benign", "Benign"] // Informative details options based on classification const informativeDetailsOptions = { pathogenic: [ "Distinct nucleotide change, same amino acid change", "Distinct amino acid change, Grantham Difference of Informative Variant ≤ Variant being considered", "Other", ], benign: [ "Distinct nucleotide change, same amino acid change", "Distinct amino acid change, Grantham Difference of Informative Variant ≥ Variant being considered", "Other", ], } // Scoring rubric for informative variants const informativeVariantScoring = { "Distinct nucleotide change, same amino acid change": { pathogenic: { first: 4.0, additional: 2.0 }, benign: { first: -4.0, additional: -2.0 }, }, "Distinct amino acid change, Grantham Difference of Informative Variant ≤ Variant being considered": { pathogenic: { first: 2.0, additional: 1.0 }, // Removed benign entry as requested }, "Distinct amino acid change, Grantham Difference of Informative Variant ≥ Variant being considered": { benign: { first: -2.0, additional: -1.0 }, }, } export default function VariantAnalysis() { const [isOpen, setIsOpen] = useState(false) const [classificationStarted, setClassificationStarted] = useState(false) const [activeTab, setActiveTab] = useState("predicted-effect") const [scoringStep, setScoringStep] = useState(1) const [showScoringModal, setShowScoringModal] = useState(true) // Always show scoring modal const [selectedPredictor, setSelectedPredictor] = useState("") const [predictorScore, setPredictorScore] = useState("") const [evidencePoints, setEvidencePoints] = useState(0) const [showScoreInput, setShowScoreInput] = useState(false) const [transcriptRelevance, setTranscriptRelevance] = useState("") const [scoringRubricExpanded, setScoringRubricExpanded] = useState(false) // Add a new state for the explanation text at the top of the component with other state variables const [predictedEffectExplanation, setPredictedEffectExplanation] = useState("") const [customPredictorName, setCustomPredictorName] = useState("") const [manualImpactPoints, setManualImpactPoints] = useState(0) const [showInformativeVariantTable, setShowInformativeVariantTable] = useState(false) // Informative variants state const [informativeVariants, setInformativeVariants] = useState([]) const [newVariant, setNewVariant] = useState({ variantId: "", variantTitle: "display HGVS", classification: "", informativeDetails: "", }) const [totalInformativePoints, setTotalInformativePoints] = useState(0) // Add these new state variables after the other state declarations (around line 210) const [splicingAssessment, setSplicingAssessment] = useState("") const [splicingScore, setSplicingScore] = useState(null) const [splicingPredictorTool, setSplicingPredictorTool] = useState("") const [splicingPredictionScore, setSplicingPredictionScore] = useState("") const [splicingAssessmentComment, setSplicingAssessmentComment] = useState("") const handleStartClassification = () => { setClassificationStarted(true) setActiveTab("predicted-effect") } const handleNextStep = () => { if (scoringStep < 6) { // Skip step 3 (Modify Impact) if evidence points are 0 or negative or "Not Met" if (scoringStep === 2 && (evidencePoints <= 0 || evidencePoints === "Not Met")) { setScoringStep(4) } else { setScoringStep(scoringStep + 1) } } } const handlePreviousStep = () => { if (scoringStep > 1) { // Skip step 3 (Modify Impact) when going backwards if evidence points are 0 or negative or "Not Met" if (scoringStep === 4 && (evidencePoints <= 0 || evidencePoints === "Not Met")) { setScoringStep(2) } else { setScoringStep(scoringStep - 1) } } } const getExistingPredictorScore = (predictor) => { if (!predictor) return null // Only return scores for predictors that are actually in the inSilicoPredictors array const predictorData = inSilicoPredictors.find((p) => p.tool === predictor) return predictorData ? predictorData.score : null } const handlePredictorChange = (predictor) => { setSelectedPredictor(predictor) if (predictor === "None") { setPredictorScore("") setShowScoreInput(false) setEvidencePoints("Not Met") return } if (predictor === "Other") { setCustomPredictorName("") setShowScoreInput(false) setPredictorScore("") // Don't calculate evidence points here, they'll be set manually return } const existingScore = getExistingPredictorScore(predictor) if (existingScore) { setPredictorScore(existingScore) setShowScoreInput(false) calculateEvidencePoints(predictor, existingScore) } else { setPredictorScore("") setShowScoreInput(true) setEvidencePoints(0) } } const handleScoreChange = (e) => { const score = e.target.value setPredictorScore(score) calculateEvidencePoints(selectedPredictor, score) } const calculateEvidencePoints = (predictor, score) => { if (!predictor || !score || isNaN(Number.parseFloat(score))) { setEvidencePoints(0) return } const numericScore = Number.parseFloat(score) const pointsTable = initialEvidencePoints[predictor] if (!pointsTable) { setEvidencePoints(0) return } for (const entry of pointsTable) { const [min, max] = entry.range if (numericScore >= min && numericScore <= max) { setEvidencePoints(entry.points) return } } setEvidencePoints(0) } const formatRangeDisplay = (range, predictor) => { const [min, max] = range if (min === Number.NEGATIVE_INFINITY) { return `≤ ${max}` } else if (max === Number.POSITIVE_INFINITY) { return `≥ ${min}` } else { return `${min} to ${max}` } } // Handle informative variant input changes const handleVariantInputChange = (field, value) => { setNewVariant({ ...newVariant, [field]: value, // Reset informative details if classification changes ...(field === "classification" && { informativeDetails: "" }), }) } // Add a new informative variant const handleAddVariant = () => { if (!newVariant.variantId || !newVariant.classification) return // Only require informative details for Pathogenic, Likely Pathogenic, Benign, or Likely Benign const isPLPorBLB = ["Pathogenic", "Likely Pathogenic", "Benign", "Likely Benign"].includes( newVariant.classification, ) if (isPLPorBLB && !newVariant.informativeDetails) return const updatedVariants = [...informativeVariants, newVariant] setInformativeVariants(updatedVariants) // Calculate total points calculateTotalInformativePoints(updatedVariants) // Reset new variant form setNewVariant({ variantId: "", variantTitle: "display HGVS", classification: "", informativeDetails: "", }) } // Remove an informative variant const handleRemoveVariant = (index) => { const updatedVariants = informativeVariants.filter((_, i) => i !== index) setInformativeVariants(updatedVariants) // Recalculate total points calculateTotalInformativePoints(updatedVariants) } // Calculate points for a single variant const calculateVariantPoints = (variant, variants) => { if (!variant.informativeDetails) return 0 // Skip VUS variants // Return "N/A" for variants with "Other" as informative details if (variant.informativeDetails === "Other") return "N/A" // Check if this is a pathogenic or benign variant const isStrictlyPathogenic = variant.classification === "Pathogenic" const isStrictlyBenign = variant.classification === "Benign" const isPathogenic = ["Pathogenic", "Likely Pathogenic"].includes(variant.classification) const isBenign = ["Benign", "Likely Benign"].includes(variant.classification) // Get the scoring category based on the variant details let scoringCategory = null if (isPathogenic) { scoringCategory = informativeVariantScoring[variant.informativeDetails]?.pathogenic } else if (isBenign) { scoringCategory = informativeVariantScoring[variant.informativeDetails]?.benign } if (!scoringCategory) return 0 // Check if this is the first strictly pathogenic/benign variant with these details const isFirstPathogenic = isStrictlyPathogenic && !variants.some( (v) => v !== variant && v.classification === "Pathogenic" && v.informativeDetails === variant.informativeDetails, ) const isFirstBenign = isStrictlyBenign && !variants.some( (v) => v !== variant && v.classification === "Benign" && v.informativeDetails === variant.informativeDetails, ) // Determine points based on whether it's the first variant and its classification if ((isStrictlyPathogenic && isFirstPathogenic) || (isStrictlyBenign && isFirstBenign)) { return scoringCategory.first } else { return scoringCategory.additional } } // Calculate total points from informative variants const calculateTotalInformativePoints = (variants) => { let totalPoints = 0 variants.forEach((variant) => { const points = calculateVariantPoints(variant, variants) // Only add numeric points to the total if (points !== "N/A" && !isNaN(points)) { totalPoints += points } }) setTotalInformativePoints(totalPoints) } // Get informative details options based on classification const getInformativeDetailsOptions = (classification) => { if (["Pathogenic", "Likely Pathogenic"].includes(classification)) { return informativeDetailsOptions.pathogenic } else if (["Benign", "Likely Benign"].includes(classification)) { return informativeDetailsOptions.benign } return [] } // Add this function after the other handler functions (around line 400) const handleSplicingAssessmentChange = (value) => { setSplicingAssessment(value) // Set the appropriate score based on selection if (value === "no_impact") { setSplicingScore(-1.0) } else if (value === "inconclusive") { setSplicingScore(0.0) } else if (value === "not_assessed") { setSplicingScore("NA") } else if (value === "impact_predicted") { // This will be expanded in the future setSplicingScore(null) } else { setSplicingScore(null) } } // Define the navigation items const navItems = [ { id: "external-databases", label: "External Databases" }, { id: "population", label: "Population", details: [ { label: "POP_FRQ =", value: "+3" }, { label: "POP_HMZ =", value: "+1.5" }, ], }, { id: "clinical", label: "Clinical" }, { id: "predicted-effect", label: "Predicted Effect" }, { id: "functional", label: "Functional" }, { id: "gene", label: "Gene" }, { id: "summary", label: "Summary" }, { id: "audit-trail", label: "Audit Trail" }, ] // Render the appropriate content based on the active tab const renderTabContent = () => { switch (activeTab) { case "external-databases": return ( External Databases Information from external genomic databases

No content available

) case "population": return ( Population Population frequency and observational data

No content available

) case "clinical": return ( Clinical Information Clinical data related to this variant

No content available

) case "functional": return ( Functional Information Functional impact data for this variant

No content available

) case "gene": return ( Gene and Disease Information Information about the gene and related diseases

No content available

) case "summary": return ( Summary Summary of variant classification

No content available

) case "audit-trail": return ( Audit Trail History of changes to this variant classification

No content available

) case "predicted-effect": default: return (

{/* In Silico Predictors */} In silico predictors Computational predictions of variant effect

This section for demonstration only, specific display to be further specified

{inSilicoPredictors.map((predictor, index) => ( ))}

Tool	Score	Prediction	Score Range	Transcript
{predictor.tool}	{predictor.score}	{predictor.prediction}	{predictor.scoreRange}	{predictor.transcript} {predictor.maneSelect && predictor.transcript !== "Not known" && ( MANE Select )}

{/* Splice Site Predictors */} Splice Site Predictors Tools for analyzing potential splice site effects

{/* ClinVar Variants in Codon */} Identified Variants in Codon Other variants at the same codon position identified in ClinVar or ClinGen's VCI {clinvarVariants.map((variant, index) => ( ))}

Coding Change	Protein Change	Classification	Review Status	Source	Link
{variant.variant}	{variant.proteinChange}	{variant.classification === "Uncertain Significance" ? ( ) : ( )} {variant.classification}	{variant.reviewStatus}	{variant.source}

{/* Transcript Information */} Transcript Information RefSeq and Ensembl transcript details for this variant {/* RefSeq Transcripts */}

RefSeq Transcripts

{refSeqTranscripts.map((transcript, index) => ( ))}

Nucleotide Change	Exon	Protein Change	Molecular Consequence
{transcript.nucleotideChange} {transcript.maneSelect && ( MANE Select )}	{transcript.exon}	{transcript.proteinChange}	{transcript.molecularConsequence}

{/* Ensembl Transcripts */}

Ensembl Transcripts

{ensemblTranscripts.map((transcript, index) => ( ))}

Nucleotide Change	Exon	Protein Change	Molecular Consequence
{transcript.nucleotideChange} {transcript.maneSelect && ( MANE Select )}	{transcript.exon}	{transcript.proteinChange}	{transcript.molecularConsequence}

) } } return (

This is an interactive mockup for specification purposes ONLY

{/* Left Column - Variant Information and Classification Details */}

{/* Variant Information Section */}

Variant Information

NM_000546.6(TP53):c.215C>G

Protein:

p.Pro72Arg

ClinVar ID:

12351

Allele Registry:

CA000072

Coordinates:

GRCh38 chr17:7676154 C>G

UCSC:

GRCh38

{/* Divider */}

{/* Evidence Section */}

Curation Information

{/* Navigation Links */}

{navItems.map((item) => (

{/* Show details if they exist and this is the population tab */} {item.details && item.id === "population" && (

{item.details.map((detail, idx) => (

{detail.label} {detail.value}

))}

)}

))}

{/* Right Column - Content Area */}

{/* Predicted Effect Scoring Modal - Only visible in predicted-effect tab */} {activeTab === "predicted-effect" && (

Predicted Effect Scoring

{/* Simplified step indicator */}

{stepNames.map((name, index) => ( {name} ))}

{/* Score Summary - Moved outside of step content */} {scoringStep >= 3 && ( )} {/* Step Content */}

{scoringStep === 1 && ( <>

Select Variant Type *

Missense (pre-filled from molC on transcript)

A missense variant results in a different amino acid at the affected position.

)} {scoringStep === 2 && ( <>

Initial Impact *

Select an in silico predictor and enter or confirm the score to calculate initial evidence points.

In Silico Predictor *

{selectedPredictor === "Other" && (

Custom Predictor Name * setCustomPredictorName(e.target.value)} placeholder="Enter predictor name" />

)} {selectedPredictor && selectedPredictor !== "None" && (

In Silico Predictor Score * {showScoreInput ? ( ) : (

{predictorScore}{" "} (pre-filled from available data)

)}

)} {selectedPredictor && (

Initial Impact Points

0 ? "text-red-600" : evidencePoints < 0 ? "text-green-600" : "text-gray-600" }`} > {evidencePoints === "Not Met" ? "Not Met" : evidencePoints > 0 ? `+${evidencePoints}` : evidencePoints}

)}

{selectedPredictor === "Other" && (

Manual Initial Impact Points *

)} {/* Reference table - only shown after a predictor is selected */} {selectedPredictor && selectedPredictor !== "None" && (

Show evidence points reference table

Initial Evidence Points Reference

{[-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0].map((point) => { const entry = initialEvidencePoints[selectedPredictor]?.find( (e) => e.points === point, ) const displayRange = entry ? formatRangeDisplay(entry.range, selectedPredictor) : "" const isActive = point === evidencePoints return ( ) })}

{selectedPredictor}	-4.0	-3.0	-2.0	-1.0	0.0	+1.0	+2.0	+3.0	+4.0
Score Range	{displayRange}

)} )} {scoringStep === 3 && ( <>

Modify Impact

Exon/Transcript Relevance * {/* Display the selected option description inline */} {transcriptRelevance && (

{transcriptRelevance === "100" && "Apply 100% of initial impact score"} {transcriptRelevance === "50" && "Apply 50% of initial impact score"} {transcriptRelevance === "0" && "Apply 0% of initial impact score"}

)}

Initial Points: 0 ? "text-red-600" : evidencePoints < 0 ? "text-green-600" : "text-gray-600"}`} > {evidencePoints > 0 ? `+${evidencePoints}` : evidencePoints}

Modified Points: 0 ? "text-red-600" : evidencePoints < 0 ? "text-green-600" : "text-gray-600" : "text-gray-600" }`} > {transcriptRelevance && evidencePoints ? (evidencePoints > 0 ? "+" : "") + ((evidencePoints * Number.parseInt(transcriptRelevance)) / 100).toFixed(1) : "0"}

)} {scoringStep === 4 && ( <>

Informative Variants

View Grantham Score Chart

Add variants informative for the monogenic disease and predicted effect of the variant being considered.

Variant ID * handleVariantInputChange("variantId", e.target.value)} placeholder="Enter ClinVar or ClinGen Allele Registry ID" />

Classification *

Informative Details

{informativeVariants.length > 0 && ( <>

Curated Informative Variants

{informativeVariants.map((variant, index) => ( ))}

HGVS	Variant ID	Classification	Informative Details	Points	Actions
placeholder HGVS	{variant.variantId}	{variant.classification}	{variant.informativeDetails \|\| "N/A"}	{typeof calculateVariantPoints(variant, informativeVariants) === "number" ? calculateVariantPoints(variant, informativeVariants).toFixed(1) : calculateVariantPoints(variant, informativeVariants)}

)} {/* Display total informative points */} {informativeVariants.length > 0 && (

Total Informative Points: 0 ? "text-red-600" : totalInformativePoints < 0 ? "text-green-600" : "text-gray-600" }`} > {totalInformativePoints > 0 ? `+${totalInformativePoints.toFixed(1)}` : totalInformativePoints.toFixed(1)}

)}

{showInformativeVariantTable ? "Hide informative variant scoring table" : "Show informative variant scoring table"}

Scoring Rubric

Informative Variant Details	Scoring Rubric
Informative Variant is Pathogenic or Likely Pathogenic AND Distinct nucleotide change, same amino acid change	4.0 points First Pathogenic variant 2.0 points All other Pathogenic/Likely Pathogenic variants
Informative Variant is Pathogenic or Likely Pathogenic AND Distinct amino acid change, Grantham Difference of Informative Variant ≤ Variant being considered	2.0 points First Pathogenic variant 1.0 points All other Pathogenic/Likely Pathogenic variants
Informative Variant is Benign or Likely Benign AND Distinct amino acid change, Grantham Difference of Informative Variant ≥ Variant being considered	-2.0 points First Benign variant -1.0 points All other Benign/Likely Benign variants
Informative Variant is Benign or Likely Benign AND Distinct nucleotide change, same amino acid change	-4.0 points First Benign variant -2.0 points All other Benign/Likely Benign variants

)} {scoringStep === 5 && ( <>

Splicing Assessment

Assess the potential impact on splicing based on available evidence.

Splicing Assessment *

{splicingAssessment === "impact_predicted" && ( <>

Predictor Tool *

Prediction Score * setSplicingPredictionScore(e.target.value)} placeholder="Enter prediction score" />

Comment

setSplicingAssessmentComment(e.target.value)}
                              placeholder="Enter any relevant comments"
                            />
                          </div>
                        </>
                      )}

{/* Display splicing score based on assessment */}
                      {splicingScore !== null && splicingScore !== "NA" && (
                        <div className="mt-4 p-3 bg-gray-50 rounded-md">
                          <div className="flex items-center justify-between">
                            <span className="font-medium">Splicing Score:</span>
                            <span className="font-bold text-lg">{splicingScore.toFixed(1)}</span>
                          </div>
                        </div>
                      )}
                      {splicingScore === "NA" && (
                        <div className="mt-4 p-3 bg-gray-50 rounded-md">
                          <div className="flex items-center justify-between">
                            <span className="font-medium">Splicing Score:</span>
                            <span className="font-bold text-lg">Not Assessed</span>
                          </div>
                        </div>
                      )}
                    </>
                  )}

{scoringStep === 6 && (
                    <>
                      <h3 className="text-lg font-medium mb-2">Summary</h3>
                      <p className="text-sm text-gray-600 mb-4">Review and finalize the scoring.</p>

{/* Display all collected information */}
                      <div className="space-y-3">
                        <div>
                          <span className="font-medium">Variant Type:</span> Missense
                        </div>
                        <div>
                          <span className="font-medium">In Silico Predictor:</span>{" "}
                          {selectedPredictor === "Other" ? customPredictorName : selectedPredictor || "None"}
                        </div>
                        <div>
                          <span className="font-medium">In Silico Predictor Score:</span> {predictorScore || "N/A"}
                        </div>
                        <div>
                          <span className="font-medium">Initial Impact Points:</span>{" "}
                          {evidencePoints === "Not Met" ? "Not Met" : evidencePoints}
                        </div>
                        {transcriptRelevance && (
                          <div>
                            <span className="font-medium">Transcript Relevance:</span> {transcriptRelevance}%
                          </div>
                        )}
                        {informativeVariants.length > 0 && (
                          <div>
                            <span className="font-medium">Informative Variants Points:</span>{" "}
                            {totalInformativePoints.toFixed(1)}
                          </div>
                        )}
                        {splicingAssessment && (
                          <div>
                            <span className="font-medium">Splicing Assessment:</span> {splicingAssessment}
                          </div>
                        )}
                        {splicingScore !== null && splicingScore !== "NA" && (
                          <div>
                            <span className="font-medium">Splicing Score:</span> {splicingScore.toFixed(1)}
                          </div>
                        )}
                        {splicingScore === "NA" && (
                          <div>
                            <span className="font-medium">Splicing Score:</span> Not Assessed
                          </div>
                        )}
                      </div>
                    </>
                  )}
                </div>

{/* Navigation Buttons */}
                <div className="flex justify-between">
                  <Button variant="secondary" onClick={handlePreviousStep} disabled={scoringStep === 1}>
                    Previous
                  </Button>
                  <Button onClick={handleNextStep} disabled={scoringStep === 6}>
                    Next
                  </Button>
                </div>
              </div>
            </div>
          )}

{/* Main Content Area */}
          {renderTabContent()}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/score-summary.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronDown } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface ScoreSummaryProps {
  evidencePoints: number | string
  selectedPredictor: string
  customPredictorName?: string
  predictorScore?: string
  transcriptRelevance?: string
  totalInformativePoints: number
  splicingScore?: number | string | null
  scoringStep: number
  variantType?: string
}

export function ScoreSummary({
  evidencePoints,
  selectedPredictor,
  customPredictorName = "",
  predictorScore = "",
  transcriptRelevance = "",
  totalInformativePoints,
  splicingScore = null,
  scoringStep,
  variantType = "Missense",
}: ScoreSummaryProps) {
  const [detailsExpanded, setDetailsExpanded] = useState(false)

// Calculate the modified impact score (PRD_MSS)
  const calculateModifiedImpactScore = () => {
    if (evidencePoints === "Not Met") return "Not Met"

if (transcriptRelevance && evidencePoints !== "Not Met") {
      return (Number(evidencePoints) * Number.parseInt(transcriptRelevance)) / 100
    }

return Number(evidencePoints)
  }

// Get the informative variants score (PRD_INF)
  const getInformativeScore = () => {
    return totalInformativePoints
  }

// Get the splicing assessment score (PRD_SPL)
  const getSplicingScore = () => {
    if (splicingScore === null || splicingScore === "NA") return null
    return Number(splicingScore)
  }

// Calculate the final score
  const calculateFinalScore = () => {
    if (evidencePoints === "Not Met" && totalInformativePoints === 0) {
      return "Not Met"
    }

if (evidencePoints === "Not Met") {
      return totalInformativePoints
    }

const modifiedImpactScore = calculateModifiedImpactScore()
    let finalScore = typeof modifiedImpactScore === "number" ? modifiedImpactScore : 0
    finalScore += totalInformativePoints

// Add splicing score if available and not "NA"
    const splicingScoreValue = getSplicingScore()
    if (splicingScoreValue !== null && scoringStep >= 5) {
      finalScore += splicingScoreValue
    }

return finalScore
  }

const modifiedImpactScore = calculateModifiedImpactScore()
  const informativeScore = getInformativeScore()
  const splicingScoreValue = getSplicingScore()
  const finalScore = calculateFinalScore()

// Determine score colors
  const getScoreColorClass = (score: number | string | null) => {
    if (score === null || score === "Not Met") return "text-gray-600"
    if (typeof score === "number") {
      if (score > 0) return "text-red-600"
      if (score < 0) return "text-green-600"
    }
    return "text-gray-600"
  }

// Format score for display
  const formatScore = (score: number | string | null) => {
    if (score === null) return "N/A"
    if (score === "Not Met") return "Not Met"
    if (typeof score === "number") {
      return (score > 0 ? "+" : "") + score.toFixed(1)
    }
    return score
  }

const finalScoreColorClass = getScoreColorClass(finalScore)
  const modifiedScoreColorClass = getScoreColorClass(modifiedImpactScore)
  const informativeScoreColorClass = getScoreColorClass(informativeScore)
  const splicingScoreColorClass = getScoreColorClass(splicingScoreValue)

return (
    <div className="mb-2">
      {/* Compact Score Card */}
      <div className="border rounded-lg overflow-hidden shadow-sm">
        <Collapsible open={detailsExpanded} onOpenChange={setDetailsExpanded}>
          {/* Compact Header with all scores in one row */}
          <div className="p-2 bg-gray-50 border-b flex items-center">
            <div className="flex-1 flex items-center">
              <span className="font-medium text-sm mr-2">Predicted Effect:</span>
              <span className={`font-bold text-lg ${finalScoreColorClass}`}>{formatScore(finalScore)}</span>
            </div>

{/* Score components in a compact horizontal layout */}
            <div className="flex items-center space-x-3">
              {/* PRD_MSS */}
              <div className="flex items-center">
                <span className="text-xs text-gray-500 bg-gray-100 px-1 rounded mr-1">PRD_MSS</span>
                <span className={`font-medium ${modifiedScoreColorClass}`}>{formatScore(modifiedImpactScore)}</span>
              </div>

{/* PRD_INF */}
              <div className="flex items-center">
                <span className="text-xs text-gray-500 bg-gray-100 px-1 rounded mr-1">PRD_INF</span>
                <span className={`font-medium ${informativeScoreColorClass}`}>{formatScore(informativeScore)}</span>
              </div>

{/* PRD_SPL */}
              <div className="flex items-center">
                <span className="text-xs text-gray-500 bg-gray-100 px-1 rounded mr-1">PRD_SPL</span>
                <span className={`font-medium ${splicingScoreColorClass}`}>
                  {splicingScoreValue !== null ? formatScore(splicingScoreValue) : "N/A"}
                </span>
              </div>

{/* Details toggle - now properly nested within Collapsible */}
              <CollapsibleTrigger className="ml-1 flex items-center text-xs text-blue-600 hover:text-blue-800">
                <span className="sr-only">Toggle details</span>
                <ChevronDown
                  className={`h-4 w-4 transition-transform ${detailsExpanded ? "transform rotate-180" : ""}`}
                />
              </CollapsibleTrigger>
            </div>
          </div>

{/* Expandable Details */}
          <CollapsibleContent>
            <div className="p-3 space-y-3 text-sm border-t bg-white">
              {/* Detailed breakdown */}
              <div className="grid grid-cols-3 gap-3">
                {/* PRD_MSS Details */}
                <div className="border rounded p-2">
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center">
                      <span className="font-medium">Modified Impact</span>
                      <span className="ml-1 text-xs text-gray-500 bg-gray-100 px-1 rounded">PRD_MSS</span>
                    </div>
                    <span className={`font-bold ${modifiedScoreColorClass}`}>{formatScore(modifiedImpactScore)}</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    {selectedPredictor &&
                      `${selectedPredictor}${selectedPredictor === "Other" ? ` (${customPredictorName})` : ""}`}
                    {transcriptRelevance && ` • ${transcriptRelevance}% relevance`}
                  </div>
                </div>

{/* PRD_INF Details */}
                <div className="border rounded p-2">
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center">
                      <span className="font-medium">Informative Variants</span>
                      <span className="ml-1 text-xs text-gray-500 bg-gray-100 px-1 rounded">PRD_INF</span>
                    </div>
                    <span className={`font-bold ${informativeScoreColorClass}`}>{formatScore(informativeScore)}</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    {informativeScore !== 0 ? `Based on curated variants` : "No informative variants added"}
                  </div>
                </div>

{/* PRD_SPL Details */}
                <div className="border rounded p-2">
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex items-center">
                      <span className="font-medium">Splicing Assessment</span>
                      <span className="ml-1 text-xs text-gray-500 bg-gray-100 px-1 rounded">PRD_SPL</span>
                    </div>
                    <span className={`font-bold ${splicingScoreColorClass}`}>
                      {splicingScoreValue !== null ? formatScore(splicingScoreValue) : "Not Assessed"}
                    </span>
                  </div>
                  <div className="text-xs text-gray-500">
                    {splicingScoreValue !== null
                      ? "Based on splicing prediction tools"
                      : "Splicing impact not yet assessed"}
                  </div>
                </div>
              </div>

{/* Additional Details */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <div className="space-y-1">
                    <div className="flex justify-between items-center">
                      <span>Variant Type:</span>
                      <span className="font-medium">{variantType}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>Initial Impact Points:</span>
                      <span className={`font-medium ${getScoreColorClass(evidencePoints)}`}>
                        {formatScore(evidencePoints)}
                      </span>
                    </div>
                    {transcriptRelevance && (
                      <div className="flex justify-between items-center">
                        <span>Transcript Relevance:</span>
                        <span className="font-medium">{transcriptRelevance}%</span>
                      </div>
                    )}
                  </div>
                </div>

{/* Visual Score Representation */}
                <div>
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-xs text-gray-500">Benign</span>
                    <span className="text-xs text-gray-500">Pathogenic</span>
                  </div>
                  <div className="h-2 bg-gray-200 rounded-full overflow-hidden relative">
                    <div className="absolute inset-0 flex">
                      <div className="w-1/2 border-r border-dashed border-gray-400"></div>
                    </div>
                    {typeof finalScore === "number" && (
                      <div
                        className={`h-full ${finalScore > 0 ? "bg-red-500" : finalScore < 0 ? "bg-green-500" : "bg-gray-400"}`}
                        style={{
                          width: `${Math.min(Math.abs(Number(finalScore)) * 10, 100)}%`,
                          marginLeft: finalScore < 0 ? "0" : "50%",
                          marginRight: finalScore < 0 ? "50%" : "0",
                        }}
                      ></div>
                    )}
                  </div>
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>-5.0</span>
                    <span>0.0</span>
                    <span>+5.0</span>
                  </div>
                </div>
              </div>
            </div>
          </CollapsibleContent>
        </Collapsible>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.9",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/scoring-modal-redesign.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown, ChevronLeft, ChevronRight, Edit, Info, X } from "lucide-react"
import { ScoreSummary } from "./score-summary"

// This is a mockup component to demonstrate the redesigned scoring modal
export function RedesignedScoringModal() {
  const [scoringStep, setScoringStep] = useState(1)
  const [selectedPredictor, setSelectedPredictor] = useState("REVEL")
  const [predictorScore, setPredictorScore] = useState("0.368")
  const [evidencePoints, setEvidencePoints] = useState(0)
  const [showScoreInput, setShowScoreInput] = useState(false)
  const [showReferenceTable, setShowReferenceTable] = useState(false)
  const [transcriptRelevance, setTranscriptRelevance] = useState("")
  const [customPredictorName, setCustomPredictorName] = useState("")

const stepNames = ["Variant Type", "Initial Impact", "Modify Impact", "Splicing Assessment"]

const handleNextStep = () => {
    if (scoringStep < 4) {
      setScoringStep(scoringStep + 1)
    }
  }

const handlePreviousStep = () => {
    if (scoringStep > 1) {
      setScoringStep(scoringStep - 1)
    }
  }

return (
    <Card className="border border-blue-100 rounded-lg overflow-hidden">
      {/* Header */}
      <div className="p-3 border-b border-blue-100 flex items-center justify-between bg-blue-50">
        <div className="flex items-center">
          <svg
            className="h-5 w-5 mr-2 text-blue-600"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
            <polyline points="10 9 9 9 8 9" />
          </svg>
          <div>
            <h3 className="text-lg font-medium">Predicted Effect Scoring</h3>
            <p className="text-sm text-gray-600">
              Collect and document evidence for predicted effect of variants in human disease.
            </p>
          </div>
        </div>
        <button className="text-gray-500 hover:text-gray-700">
          <X className="h-5 w-5" />
        </button>
      </div>

{/* Content */}
      <div className="p-4">
        {/* Step indicator - Simplified */}
        <div className="mb-4">
          <div className="flex justify-between text-xs text-gray-600 mb-1 px-1">
            {stepNames.map((name, index) => (
              <span key={index} className={`${scoringStep === index + 1 ? "font-medium text-blue-600" : ""}`}>
                {name}
              </span>
            ))}
          </div>
          <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
            <div
              className="h-full bg-blue-600 transition-all duration-300 ease-in-out"
              style={{ width: `${(scoringStep / 4) * 100}%` }}
            />
          </div>
        </div>

{/* Score Summary - Visible from step 3 onwards */}
        {scoringStep >= 3 && (
          <ScoreSummary
            evidencePoints={evidencePoints}
            selectedPredictor={selectedPredictor}
            customPredictorName={customPredictorName || ""}
            predictorScore={predictorScore}
            transcriptRelevance={transcriptRelevance}
            totalInformativePoints={0}
            splicingScore={null}
            scoringStep={scoringStep}
            variantType="Missense" // Add the variant type
          />
        )}

{/* Step Content */}
        <div className="border rounded-md p-4 mb-4">
          {scoringStep === 1 && (
            <>
              <h3 className="text-lg font-medium mb-4">
                Select Variant Type <span className="text-red-500">*</span>
              </h3>
              <div>
                <label className="block font-medium mb-2">
                  Variant Type <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <div className="flex items-center justify-between border rounded-md p-2.5 bg-white">
                    <span>Missense</span>
                    <svg
                      className="h-5 w-5 text-green-500"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </div>
                </div>
                <p className="mt-2 text-sm text-gray-600">
                  A missense variant results in a different amino acid at the affected position.
                </p>
              </div>
            </>
          )}

{scoringStep === 2 && (
            <>
              <h3 className="text-lg font-medium mb-3">
                Initial Impact <span className="text-red-500">*</span>
              </h3>
              <p className="text-sm text-gray-600 mb-4">
                Select an in silico predictor and enter or confirm the score to calculate initial evidence points.
              </p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label className="block font-medium mb-2">
                    In Silico Predictor <span className="text-red-500">*</span>
                  </label>
                  <select
                    className="w-full border rounded-md p-2"
                    value={selectedPredictor}
                    onChange={(e) => setSelectedPredictor(e.target.value)}
                  >
                    <option value="REVEL">REVEL</option>
                    <option value="BayesDel">BayesDel</option>
                    <option value="AlphaMissense">AlphaMissense</option>
                    <option value="ESM1b">ESM1b</option>
                    <option value="MutPred2">MutPred2</option>
                    <option value="VARITY_R">VARITY_R</option>
                    <option value="VEST4">VEST4</option>
                  </select>
                </div>

<div>
                  <label className="block font-medium mb-2">
                    Score <span className="text-red-500">*</span>
                  </label>
                  {showScoreInput ? (
                    <input
                      type="text"
                      className="w-full border rounded-md p-2"
                      value={predictorScore}
                      onChange={(e) => setPredictorScore(e.target.value)}
                      placeholder={`Enter ${selectedPredictor} score`}
                    />
                  ) : (
                    <div className="flex items-center space-x-2">
                      <div className="border rounded-md p-2 bg-gray-50 flex-1">
                        {predictorScore} <span className="text-gray-500">(pre-filled from available data)</span>
                      </div>
                      <button className="text-blue-600 hover:text-blue-800" onClick={() => setShowScoreInput(true)}>
                        <Edit className="h-4 w-4" />
                      </button>
                    </div>
                  )}
                </div>
              </div>

<div className="flex items-center justify-between p-3 bg-gray-50 rounded-md mb-3">
                <span className="font-medium">Evidence Points:</span>
                <span
                  className={`font-bold text-lg ${evidencePoints > 0 ? "text-red-600" : evidencePoints < 0 ? "text-green-600" : "text-gray-600"}`}
                >
                  {evidencePoints > 0 ? `+${evidencePoints}` : evidencePoints}
                </span>
              </div>

{/* Reference table - collapsed by default */}
              <Collapsible open={showReferenceTable} onOpenChange={setShowReferenceTable}>
                <CollapsibleTrigger className="flex items-center text-sm text-blue-600 hover:text-blue-800">
                  <Info className="h-4 w-4 mr-1" />
                  <span>{showReferenceTable ? "Hide" : "Show"} evidence points reference table</span>
                  <ChevronDown
                    className={`h-4 w-4 ml-1 transition-transform ${showReferenceTable ? "rotate-180" : ""}`}
                  />
                </CollapsibleTrigger>
                <CollapsibleContent className="mt-3">
                  <div className="border rounded-md overflow-hidden">
                    <div className="bg-yellow-50 p-2 border-b text-sm font-medium">
                      Initial Evidence Points Reference
                    </div>
                    <div className="overflow-x-auto">
                      <table className="w-full border-collapse text-sm">
                        <thead>
                          <tr className="bg-yellow-50">
                            <th className="p-2 border text-left">{selectedPredictor}</th>
                            <th className="p-2 border text-center">-4.0</th>
                            <th className="p-2 border text-center">-3.0</th>
                            <th className="p-2 border text-center">-2.0</th>
                            <th className="p-2 border text-center">-1.0</th>
                            <th className="p-2 border text-center">0.0</th>
                            <th className="p-2 border text-center">+1.0</th>
                            <th className="p-2 border text-center">+2.0</th>
                            <th className="p-2 border text-center">+3.0</th>
                            <th className="p-2 border text-center">+4.0</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td className="p-2 border font-medium">Score Range</td>
                            {[-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0].map((point) => (
                              <td
                                key={point}
                                className={`p-2 border text-center ${point === evidencePoints ? "bg-blue-100" : ""}`}
                              >
                                {point === -4.0
                                  ? "≤ 0.016"
                                  : point === 4.0
                                    ? "≥ 0.932"
                                    : point === 0.0
                                      ? "0.291-0.643"
                                      : "Range"}
                              </td>
                            ))}
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </CollapsibleContent>
              </Collapsible>
            </>
          )}

{scoringStep === 3 && (
            <>
              <h3 className="text-lg font-medium mb-3">Modify Impact</h3>
              <p className="text-sm text-gray-600 mb-4">Modify the impact assessment based on additional factors.</p>

<div className="mb-4">
                <label className="block font-medium mb-2">
                  Exon/Transcript Relevance <span className="text-red-500">*</span>
                </label>
                <select
                  className="w-full border rounded-md p-2"
                  value={transcriptRelevance}
                  onChange={(e) => setTranscriptRelevance(e.target.value)}
                >
                  <option value="">Select relevance...</option>
                  <option value="100">Residue present in all transcripts</option>
                  <option value="50">
                    Residue is present in most disease-specific or highly expressed transcripts
                  </option>
                  <option value="0">Residue is not expressed in clinically relevant transcripts</option>
                </select>

{/* Display the selected option description */}
                {transcriptRelevance && (
                  <div className="mt-2 text-sm text-gray-500 italic">
                    {transcriptRelevance === "100" && "Apply 100% of initial impact score"}
                    {transcriptRelevance === "50" && "Apply 50% of initial impact score"}
                    {transcriptRelevance === "0" && "Apply 0% of initial impact score"}
                  </div>
                )}
              </div>

<div className="p-3 bg-gray-50 border rounded-md">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <p className="font-medium">Initial Evidence Points:</p>
                    <p className="text-xs text-gray-600">Based on in silico prediction</p>
                  </div>
                  <span
                    className={`font-bold text-lg ${evidencePoints > 0 ? "text-red-600" : evidencePoints < 0 ? "text-green-600" : "text-gray-600"}`}
                  >
                    {evidencePoints > 0 ? `+${evidencePoints}` : evidencePoints}
                  </span>
                </div>

<div className="pt-3 border-t flex items-center justify-between">
                  <div>
                    <p className="font-medium">Modified Evidence Points:</p>
                    <p className="text-xs text-gray-600">After transcript relevance adjustment</p>
                  </div>
                  <span
                    className={`font-bold text-lg ${
                      transcriptRelevance && evidencePoints
                        ? evidencePoints > 0
                          ? "text-red-600"
                          : evidencePoints < 0
                            ? "text-green-600"
                            : "text-gray-600"
                        : "text-gray-600"
                    }`}
                  >
                    {transcriptRelevance && evidencePoints
                      ? (evidencePoints > 0 ? "+" : "") +
                        ((evidencePoints * Number.parseInt(transcriptRelevance)) / 100).toFixed(1)
                      : "0"}
                  </span>
                </div>
              </div>
            </>
          )}

{scoringStep === 4 && (
            <>
              <h3 className="text-lg font-medium mb-3">Splicing Assessment</h3>
              <p className="text-sm text-gray-600 mb-4">Assess potential impact on splicing.</p>
              <div className="p-4 bg-gray-50 border border-dashed border-gray-300 rounded-md text-center">
                <p className="text-gray-500 italic">Content for this step will be provided later.</p>
              </div>
            </>
          )}
        </div>

{/* Navigation */}
        <div className="flex justify-between">
          <Button
            variant="outline"
            onClick={handlePreviousStep}
            disabled={scoringStep === 1}
            className="flex items-center bg-transparent"
          >
            <ChevronLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <div className="text-sm text-gray-500 flex items-center">Step {scoringStep} of 4</div>
          <Button className="bg-blue-600 hover:bg-blue-700 text-white flex items-center" onClick={handleNextStep}>
            Next
            <ChevronRight className="h-4 w-4 ml-2" />
          </Button>
        </div>
      </div>
    </Card>
  )
}</article></body></html>