oncodsl / Read docs /PROMPT_ui_fixes_default_axes_tooltip.md
govindbalki's picture
Upload folder using huggingface_hub
0fff343 verified
|
Raw
History Blame Contribute Delete
4.64 kB

Prompt β€” four small UI fixes (default cohort, remove peel-off panel, fix two clipped bits)

All frontend-only, verified line refs in web/app/Lab.tsx. No engine/API/airgap change. tsc after.

1. Make Head & Neck the default cohort

  • const [dataset, setDatasetState] = useState<DatasetId>("coadread") (~line 541) β†’ default to "hnsc".
  • Make sure the initial selected objective matches the default dataset's first objective (HPV detection) β€” i.e. on first load the page shows Head & Neck + HPV detection, not a colorectal objective. (Mirror the logic at ~line 592 that picks DATASET_REGISTRY[next].objectives[0].key on dataset change; apply the same to the initial objective state.)
  • Colorectal stays selectable; only the default changes.

2. Remove the "Discovered axes" / "Find next axis" panel from the UI

Peel-off only makes sense for the unsupervised objective (which isn't a UI objective anymore); on a supervised HPV run it re-finds the same signal and shows nonsensical "Aligns with MSI / TMB" text. Remove it from the page:

  • Drop the <DiscoveredAxes …/> render (line 867). Keep the DiscoveredAxes component definition (884) and the backend untouched β€” just don't render it. (Equivalently, gate its render to target === "none", which never occurs in the UI.)

3. Fix the clipped "Cancer / problem" card subtitle

The dataset cards show "(TCGA COADREAD" / "(TCGA HNSC" with the closing paren cut off. In CancerSelector (~line 1043), the subtitle line is being clipped (truncate / overflow / fixed width). Let it display in full β€” allow it to wrap or size to content so the complete "(TCGA COADREAD)" / "(TCGA HNSC)" shows, including the closing paren. (Confirm the source strings in DATASET_REGISTRY ~379/389 are complete β€” longLabel has the paren β€” so this is a CSS clipping fix, not a missing character.)

4. Fix the "Survives" "?" tooltip cutting off

The Survives column "?" copy is multi-paragraph and overflows/clips as a hover tooltip (see screenshot β€” text is cut on the right). A hover tooltip is the wrong vehicle for that much text. Fix it one of these ways (prefer the first):

  • Convert this "?" to a click-to-open modal using the existing rich ParamHelp modal infrastructure (the same pattern the objective/parameter rich explainers use), with the plain-language site/purity/βœ“/βœ—/β€” copy. Modals don't clip.
  • If keeping it a hover tooltip: render it in a portal at the document root with a sensible max-width and viewport clamping (flip/shift so it never overflows the right edge), and ensure no ancestor overflow: hidden crops it.
  • While here, make the shared "?" tooltip component clamp to the viewport generally, so no other long tooltip clips either.

5. Swap the "What is HPV? (the biology)" diagram to the new card-wall figures

Two repo-root SVGs have been updated/added (literal colours, same convention as the old hpv_reference.svg): hpv_reference.svg (rewritten β€” the "HPV INFECTION β€” the virus dismantles both brakes" card wall, viewBox 0 0 920 660) and normal_cell_reference.svg (new β€” "NORMAL CELL β€” how division is controlled", viewBox 0 0 920 900). Update web/app/HPVBiologyPanel.tsx so the panel shows the normal-cell diagram first, then the HPV diagram (normal baseline β†’ the viral attack):

  • The panel inlines its SVG as hand-translated JSX (HPVDiagram() ~line 54). Replace HPVDiagram's body with the new hpv_reference.svg contents, and add a sibling component (e.g. NormalCellDiagram) inlining normal_cell_reference.svg, rendered ABOVE the HPV one inside the panel.
  • Translate SVG attributes to JSX exactly as the existing component does: font-familyβ†’fontFamily, font-sizeβ†’fontSize, font-weightβ†’fontWeight, stroke-widthβ†’strokeWidth, text-anchorβ†’textAnchor, stroke-dasharrayβ†’strokeDasharray, marker-endβ†’markerEnd, etc. Each <svg> keeps viewBox + style={{ width: "100%", height: "auto", display: "block" }} so it scales without overflow (same wrapper as today).
  • Keep the panel's collapsible "What is HPV? (the biology)" framing unchanged β€” only the figure changes.

Checkpoint

  • Page loads on Head & Neck + HPV detection by default; Colorectal still selectable.
  • The "What is HPV?" panel shows the new normal-cell + HPV card-wall diagrams (scaled, no overflow).
  • No "Discovered axes" / "Find next axis" panel in the UI.
  • The Cancer/problem card subtitles show in full (closing paren visible).
  • The Survives "?" opens without clipping (modal, or clamped tooltip).
  • tsc clean; no engine/API/airgap change.