fix(interactions): add evidence-type filter, JSON export, and learn tooltips to STRING-DB viewer

bioai-platform/frontend/src/components/interactions/StringDBViewer.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState, useRef } from "react";
 import { useAuditTrail } from "@/hooks/useAuditTrail";
+import { LearnPopover } from "@/components/LearnPopover";
 
 type Interaction = {
   partner_gene: string;
@@ -11,6 +12,10 @@ type Interaction = {
   ascore: number;
 };
 
+type EvidenceFilter = "all" | "experimental" | "database" | "coexpression" | "textmining";
+
+const EVIDENCE_THRESHOLD = 0.3;
+
 export function StringDBViewer({ geneName, initialData }: { geneName: string; initialData?: { interactions: Interaction[] } | null }) {
   const audit = useAuditTrail();
   const [data, setData] = useState<{ interactions: Interaction[] } | null>(initialData ?? null);
@@ -18,6 +23,7 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
   const [error, setError] = useState<string | null>(null);
   const [imgError, setImgError] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [filter, setFilter] = useState<EvidenceFilter>("all");
   const auditedRef = useRef(false);
 
   const species = 9606;
@@ -34,14 +40,20 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
   }, [geneName, initialData, audit]);
 
   const scoreChannels = [
-    { key: "escore" as const, label: "Experimental", color: "#2DD4BF" },
-    { key: "dscore" as const, label: "Database", color: "#7C3AED" },
-    { key: "ascore" as const, label: "Co-expression", color: "#E0A94E" },
-    { key: "tscore" as const, label: "Text mining", color: "#FBBF24" },
+    { key: "escore" as const, label: "Experimental", color: "#2DD4BF", filter: "experimental" as const, explain: "Support from physical interaction experiments (yeast two-hybrid, affinity capture, co-crystallisation)." },
+    { key: "dscore" as const, label: "Database", color: "#7C3AED", filter: "database" as const, explain: "Support from curated interaction databases that collect evidence from published literature." },
+    { key: "ascore" as const, label: "Co-expression", color: "#E0A94E", filter: "coexpression" as const, explain: "Support from correlated mRNA expression across many experiments — proteins that move together often work together." },
+    { key: "tscore" as const, label: "Text mining", color: "#FBBF24", filter: "textmining" as const, explain: "Support from automated scanning of the scientific literature for co-occurrence of the two genes." },
   ];
 
   const stringDbUrl = `https://string-db.org/api/image/network?identifiers=${geneName}&species=${species}`;
-  const allGenes = data?.interactions?.map(i => i.partner_gene).join("%0d") ?? "";
+
+  const visibleInteractions = (data?.interactions ?? []).filter(i => {
+    if (filter === "all") return true;
+    const channel = scoreChannels.find(c => c.filter === filter);
+    if (!channel) return true;
+    return i[channel.key] >= EVIDENCE_THRESHOLD;
+  });
 
   const exportPng = () => {
     const img = new window.Image();
@@ -62,7 +74,7 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
     img.src = stringDbUrl;
   };
 
-  const exportSvgTable = () => {
+  const exportTsv = () => {
     if (!data?.interactions) return;
     const rows = data.interactions.map(i =>
       `${i.partner_gene}\t${i.combined_score.toFixed(3)}\t${i.escore.toFixed(3)}\t${i.dscore.toFixed(3)}\t${i.ascore.toFixed(3)}\t${i.tscore.toFixed(3)}`
@@ -74,6 +86,19 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
     a.click();
   };
 
+  const exportJson = () => {
+    if (!data?.interactions) return;
+    const a = document.createElement("a");
+    a.download = `${geneName}_stringdb_interactions.json`;
+    a.href = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify({
+      gene: geneName,
+      species,
+      source: "STRING-DB",
+      interactions: data.interactions,
+    }, null, 2));
+    a.click();
+  };
+
   const copyGeneList = () => {
     if (!data?.interactions) return;
     const genes = data.interactions.map(i => i.partner_gene).join("\n");
@@ -98,10 +123,14 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
             className="text-xs px-2.5 py-1 rounded bg-surface-1 border border-glass-border text-text-secondary hover:text-accent-cyan transition-colors">
             Export PNG
           </button>
-          <button onClick={exportSvgTable}
+          <button onClick={exportTsv}
             className="text-xs px-2.5 py-1 rounded bg-surface-1 border border-glass-border text-text-secondary hover:text-accent-cyan transition-colors">
             Export TSV
           </button>
+          <button onClick={exportJson}
+            className="text-xs px-2.5 py-1 rounded bg-surface-1 border border-glass-border text-text-secondary hover:text-accent-cyan transition-colors">
+            Export JSON
+          </button>
           <button onClick={copyGeneList}
             className="text-xs px-2.5 py-1 rounded bg-surface-1 border border-glass-border text-text-secondary hover:text-accent-cyan transition-colors">
             {copied ? "Copied!" : "Copy genes"}
@@ -128,19 +157,46 @@ export function StringDBViewer({ geneName, initialData }: { geneName: string; in
         )}
       </div>
 
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs text-text-muted">Evidence filter:</span>
+        {[{ key: "all" as const, label: "All" }, ...scoreChannels.map(c => ({ key: c.filter, label: c.label }))].map(opt => (
+          <button
+            key={opt.key}
+            onClick={() => setFilter(opt.key)}
+            className={`text-xs px-2.5 py-1 rounded border transition-colors ${
+              filter === opt.key
+                ? "bg-accent-cyan/10 border-accent-cyan/40 text-accent-cyan"
+                : "bg-surface-1 border-glass-border text-text-secondary hover:text-text-primary"
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+        <span className="text-xs text-text-muted ml-auto">Showing {visibleInteractions.length} of {interactions.length} partners</span>
+      </div>
+
       <div className="overflow-x-auto rounded-xl border border-glass-border">
         <table className="w-full text-xs">
           <thead className="bg-surface-1">
             <tr>
               <th className="px-3 py-2 text-left text-text-muted">Partner</th>
-              <th className="px-3 py-2 text-left text-text-muted">Combined</th>
+              <th className="px-3 py-2 text-left text-text-muted">
+                <LearnPopover term="Combined score" topic="interactions"
+                  explanation="STRING's confidence (0-1) that the interaction is real, integrating all evidence channels below.">
+                  Combined
+                </LearnPopover>
+              </th>
               {scoreChannels.map(c => (
-                <th key={c.key} className="px-3 py-2 text-left" style={{ color: c.color + "99" }}>{c.label}</th>
+                <th key={c.key} className="px-3 py-2 text-left" style={{ color: c.color + "99" }}>
+                  <LearnPopover term={`${c.label} evidence`} topic="interactions" explanation={c.explain}>
+                    {c.label}
+                  </LearnPopover>
+                </th>
               ))}
             </tr>
           </thead>
           <tbody>
-            {interactions.map((inter, i) => (
+            {visibleInteractions.map((inter, i) => (
               <tr key={i} className="border-t border-glass-border hover:bg-surface-1">
                 <td className="px-3 py-2 text-accent-cyan font-mono font-bold">{inter.partner_gene}</td>
                 <td className="px-3 py-2 text-text-secondary">{inter.combined_score.toFixed(3)}</td>