Update deployed CysVis app

Author: andrewsu

d5sc9ge/cysvis/css/style.css

@@ -255,6 +255,10 @@ input {
   margin-top: 18px;
 }
 
+.table-panel {
+  margin-top: 18px;
+}
+
 .detail-content {
   min-height: 120px;
 }
@@ -333,6 +337,52 @@ input {
   border: 1px solid var(--panel-border);
 }
 
+.table-shell {
+  overflow-x: auto;
+}
+
+.table-caption {
+  margin-bottom: 12px;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.table-empty {
+  margin: 0;
+  color: var(--muted);
+}
+
+.cysteine-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 760px;
+}
+
+.cysteine-table th,
+.cysteine-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--panel-border);
+  text-align: left;
+  vertical-align: top;
+  font-size: 0.92rem;
+}
+
+.cysteine-table th {
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.84rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.cysteine-row {
+  cursor: pointer;
+}
+
+.cysteine-row:hover {
+  background: #f3f7f9;
+}
+
 @media (max-width: 980px) {
   .app-shell {
     padding: 16px;

d5sc9ge/cysvis/index.html

@@ -82,6 +82,11 @@ <h2>Legend</h2>
         <h2>Residue Detail</h2>
         <div id="detail-content" class="detail-content"></div>
       </section>
+
+      <section class="table-panel panel">
+        <h2>Cysteine Table</h2>
+        <div id="cysteine-table" class="table-shell"></div>
+      </section>
     </div>
 
     <script src="./js/data.js"></script>

d5sc9ge/cysvis/js/app.js

@@ -29,6 +29,7 @@
     onLayerToggle: handleLayerToggle,
     onExportPng: handleExportPng,
     onAnnotationLayerChange: handleAnnotationLayerChange,
+    onCysteineTableSelect: handleResidueSelected,
   });
 
   const viewer = new CysVisViewer({
@@ -49,6 +50,7 @@
     ui.renderDomainControls(state.protein, state.renderState.visibleDomains);
     ui.renderAnnotationLayerControl(state.renderState.annotationLayer);
     ui.renderLegend(state.renderState.encodingScheme, state.renderState.annotationLayer);
+    ui.renderCysteineTable(state.protein, state.variantsData, state.hotspotData, state.renderState.annotationLayer);
     ui.showDefaultDetail(state.protein, state.variantsData, state.hotspotData);
   }
 

d5sc9ge/cysvis/js/ui.js

@@ -1,10 +1,11 @@
 class CysVisUI {
-  constructor({ onProteinSubmit, onDomainToggle, onLayerToggle, onExportPng, onAnnotationLayerChange }) {
+  constructor({ onProteinSubmit, onDomainToggle, onLayerToggle, onExportPng, onAnnotationLayerChange, onCysteineTableSelect }) {
     this.onProteinSubmit = onProteinSubmit;
     this.onDomainToggle = onDomainToggle;
     this.onLayerToggle = onLayerToggle;
     this.onExportPng = onExportPng;
     this.onAnnotationLayerChange = onAnnotationLayerChange;
+    this.onCysteineTableSelect = onCysteineTableSelect;
     this.domainControlsElement = document.getElementById("domain-controls");
     this.summaryElement = document.getElementById("protein-summary");
     this.proteinNoteElement = document.getElementById("protein-note");
@@ -18,6 +19,7 @@ class CysVisUI {
     this.cysteineToggle = document.getElementById("toggle-cysteines");
     this.variantToggle = document.getElementById("toggle-variants");
     this.surfaceToggle = document.getElementById("toggle-surface");
+    this.cysteineTableElement = document.getElementById("cysteine-table");
   }
 
   init() {
@@ -122,6 +124,82 @@ class CysVisUI {
     });
   }
 
+  renderCysteineTable(protein, variantsData, hotspotData, annotationLayer) {
+    if (!protein.cysteines.length) {
+      this.cysteineTableElement.innerHTML = "<p class=\"table-empty\">No cysteine residues are available for this protein yet.</p>";
+      return;
+    }
+
+    const rows = protein.cysteines
+      .map((cysteine) => {
+        const exactGroup = variantsData.groupsByResidue[cysteine.resi];
+        const hotspot = hotspotData.byResidue[cysteine.resi];
+        const annotationSummary = cysteine.annotations.length
+          ? cysteine.annotations.map((annotation) => CYSVIS_ANNOTATION_LAYERS[annotation]?.label || annotation).join(", ")
+          : "None";
+        const hasGenericAutoNote =
+          typeof cysteine.notes === "string" &&
+          cysteine.notes.startsWith("Auto-detected cysteine from the UniProt canonical sequence.");
+        const hotspotPValue = hotspotData.loading
+          ? "..."
+          : hotspotData.error
+            ? "n/a"
+            : hotspotData.summary.pathogenicResidueCount === 0
+              ? "n/a"
+              : hotspot?.empiricalPValue != null
+                ? hotspot.empiricalPValue.toFixed(3)
+                : "n/a";
+        const hotspotPercentile =
+          hotspot?.percentile != null ? `${hotspot.percentile.toFixed(1)}` : hotspotData.loading ? "..." : "n/a";
+        const directClinVar = exactGroup ? `${exactGroup.count} (${exactGroup.significanceLabel})` : "0";
+        const note = hasGenericAutoNote ? "" : cysteine.notes ? cysteine.notes.replace(/^KEAP1-specific note:\s*/i, "") : "";
+
+        return `
+          <tr class="cysteine-row" data-resi="${cysteine.resi}">
+            <td>C${cysteine.resi}</td>
+            <td>${cysteine.domain}</td>
+            <td>${annotationSummary}</td>
+            <td>${directClinVar}</td>
+            <td>${hotspotPValue}</td>
+            <td>${hotspotPercentile}</td>
+            <td title="${escapeHtml(note)}">${note ? escapeHtml(truncateText(note, 120)) : "-"}</td>
+          </tr>
+        `;
+      })
+      .join("");
+
+    this.cysteineTableElement.innerHTML = `
+      <div class="table-caption">
+        Showing ${protein.cysteines.length} cysteine residues for ${protein.displayName}.
+        Active annotation layer: ${CYSVIS_ANNOTATION_LAYERS[annotationLayer].label}.
+      </div>
+      <table class="cysteine-table">
+        <thead>
+          <tr>
+            <th>Residue</th>
+            <th>Domain</th>
+            <th>Annotations</th>
+            <th>ClinVar at residue</th>
+            <th>Hotspot p</th>
+            <th>Hotspot pct</th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    `;
+
+    this.cysteineTableElement.querySelectorAll(".cysteine-row").forEach((row) => {
+      row.addEventListener("click", () => {
+        const residue = Number.parseInt(row.dataset.resi, 10);
+        const cysteine = protein.cysteines.find((entry) => entry.resi === residue);
+        if (cysteine) {
+          this.onCysteineTableSelect(cysteine);
+        }
+      });
+    });
+  }
+
   showDefaultDetail(protein, variantsData, hotspotData) {
     const variantLine = variantsData.loading
       ? "ClinVar variants are loading."
@@ -319,3 +397,16 @@ class CysVisUI {
     `;
   }
 }
+
+function truncateText(text, maxLength) {
+  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}...` : text;
+}
+
+function escapeHtml(text) {
+  return text
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}

d5sc9ge/cysvis/js/viewer.js

@@ -11,6 +11,7 @@ class CysVisViewer {
     this.currentProtein = null;
     this.currentVariantGroups = [];
     this.markerShapes = [];
+    this.selectionShapes = [];
     this.renderState = null;
     this.pdbText = null;
     this.resizeHandler = () => {
@@ -102,6 +103,13 @@ class CysVisViewer {
       selectedCysteineResi: nextSelection.selectedCysteineResi,
       selectedVariantResidue: nextSelection.selectedVariantResidue,
     };
+
+    if (!this.viewer || !this.pdbText) {
+      return;
+    }
+
+    this.syncSelectionOverlay();
+    this.viewer.render();
   }
 
   exportPngDataUri() {
@@ -126,6 +134,7 @@ class CysVisViewer {
     // surface handle becomes invalid and must not be removed afterward.
     this.surfaceHandle = null;
     this.markerShapes = [];
+    this.selectionShapes = [];
     this.viewer.clear();
     this.model = this.viewer.addModel(this.pdbText, "pdb");
     this.applyScene();
@@ -223,6 +232,7 @@ class CysVisViewer {
     }
 
     this.syncSurface();
+    this.syncSelectionOverlay();
   }
 
   renderVariantMarker(group, scheme, geometryKey) {
@@ -276,6 +286,34 @@ class CysVisViewer {
     });
   }
 
+  syncSelectionOverlay() {
+    this.selectionShapes.forEach((shape) => {
+      this.viewer.removeShape(shape);
+    });
+    this.selectionShapes = [];
+
+    const selectedCysteineResi = this.renderState?.selectedCysteineResi;
+    if (selectedCysteineResi == null) {
+      return;
+    }
+
+    const atom =
+      this.model?.selectedAtoms({ chain: "A", resi: selectedCysteineResi, atom: "SG" })?.[0] ||
+      this.model?.selectedAtoms({ chain: "A", resi: selectedCysteineResi, atom: "CA" })?.[0];
+    if (!atom) {
+      return;
+    }
+
+    this.selectionShapes.push(
+      this.viewer.addSphere({
+        center: { x: atom.x, y: atom.y, z: atom.z },
+        radius: 1.28,
+        color: "#ffffff",
+        opacity: 0.78,
+      })
+    );
+  }
+
   syncSurface() {
     if (this.surfaceHandle) {
       this.viewer.removeSurface(this.surfaceHandle);