Update index.html

index.html

@@ -1,3 +1,4 @@
+```html
 <!--
 IC MAP (Hugging Face Renderer) — CANON v1
 
@@ -7,13 +8,15 @@ Purpose:
 
 Hard invariants:
 - Exactly 15 nodes. IDs are fixed. No extras. No missing.
-- NEVER display or mention DISC (letters, acronym, or score breakdown). DISC is input-only and must be translated server-side into IC node weights.
+- NEVER display or mention the source assessment type, raw scores, or score breakdown. Source inputs must be translated server-side into IC node weights.
 - Topology is fixed client-side: ringLinks per cluster + fixed bridge links.
 
 Handshake (query params):
 - assessment_id (required)
 - viz_token (required) short-lived signed token
 - api_base (optional; defaults to REQUIRED_INPUT_PROD_API_BASE)
+- embed=1 (optional; compact/collapsible legend)
+- labels=hover|all (optional; default hover)
 
 Fetch:
 GET `${api_base}/api/assessments/${assessment_id}/visualization?viz_token=${viz_token}`
@@ -29,7 +32,7 @@ Expected response:
 
 Node IDs (fixed):
 Move: pace, directness, influence, stability_pref, precision_pref
-Protect: priority_1..priority_5 (labels dynamic from top values)
+Protect: priority_1..priority_5 (labels dynamic from top values; empty string means hide)
 Pressure: pursuit, withdrawal, control, appeasement, escalation
 
 Failure behavior:
@@ -42,8 +45,12 @@ Failure behavior:
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>IC Trait Network</title>
+
     <!-- 3d-force-graph via CDN (official quick-start) -->
     <script src="https://cdn.jsdelivr.net/npm/3d-force-graph"></script>
+    <!-- three-spritetext for always-on labels -->
+    <script src="https://cdn.jsdelivr.net/npm/three-spritetext"></script>
+
     <style>
       :root {
         --bg: #f6f4ef; /* off-white */
@@ -51,10 +58,27 @@ Failure behavior:
         --muted: rgba(17, 24, 39, 0.25);
         --accent: #0f766e; /* muted teal */
         --accent2: #1f3a5f; /* desaturated blue */
+
+        /* IC Map cluster colors (distinct, readable) */
+        --cluster-move: #2563eb; /* blue */
+        --cluster-protect: #059669; /* green */
+        --cluster-pressure: #dc2626; /* red */
+      }
+
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        background: var(--bg);
+      }
+      #wrap {
+        position: fixed;
+        inset: 0;
+      }
+      #graph {
+        position: absolute;
+        inset: 0;
       }
-      html, body { height: 100%; margin: 0; background: var(--bg); }
-      #wrap { position: fixed; inset: 0; }
-      #graph { position: absolute; inset: 0; }
       #hud {
         position: absolute;
         top: 16px;
@@ -69,9 +93,25 @@ Failure behavior:
         padding: 12px 12px;
         max-width: 560px;
       }
-      #hud h1 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.02em; font-weight: 650; }
-      #hud p { margin: 0 0 10px; font-size: 12px; line-height: 1.35; color: rgba(17, 24, 39, 0.78); }
-      #controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
+      #hud h1 {
+        margin: 0 0 6px;
+        font-size: 14px;
+        letter-spacing: 0.02em;
+        font-weight: 650;
+      }
+      #hud p {
+        margin: 0 0 10px;
+        font-size: 12px;
+        line-height: 1.35;
+        color: rgba(17, 24, 39, 0.78);
+      }
+      #controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+        margin-bottom: 10px;
+      }
       button {
         font-size: 12px;
         padding: 8px 10px;
@@ -81,7 +121,9 @@ Failure behavior:
         color: var(--ink);
         cursor: pointer;
       }
-      button:hover { border-color: rgba(17, 24, 39, 0.28); }
+      button:hover {
+        border-color: rgba(17, 24, 39, 0.28);
+      }
       .pill {
         font-size: 11px;
         padding: 6px 8px;
@@ -91,11 +133,27 @@ Failure behavior:
         color: rgba(17, 24, 39, 0.78);
         white-space: nowrap;
       }
+
       #legend {
         display: grid;
         grid-template-columns: 1fr;
         gap: 8px;
       }
+      #legend.compact {
+        max-width: 360px;
+      }
+      #legend.collapsed .legendBlock {
+        display: none;
+      }
+      #legendToggle {
+        display: none;
+        margin-bottom: 8px;
+        width: 100%;
+      }
+      #legend.compact #legendToggle {
+        display: block;
+      }
+
       .legendBlock {
         border: 1px solid rgba(17, 24, 39, 0.08);
         border-radius: 10px;
@@ -115,31 +173,41 @@ Failure behavior:
         line-height: 1.35;
         color: rgba(17, 24, 39, 0.78);
       }
-      .legendList li { margin: 2px 0; }
+      .legendList li {
+        margin: 2px 0;
+      }
     </style>
   </head>
+
   <body>
     <div id="wrap">
       <div id="hud">
         <h1>IC Map</h1>
-        <p>Three interacting forces with exactly 15 nodes: How You Move · What You Protect · Pressure Response. Toggle “Pressure” to see the network shift.</p>
+        <p>
+          Three interacting forces with exactly 15 nodes: How You Move · What You Protect · Pressure Response. Toggle “Pressure” to see the network shift.
+        </p>
 
         <div id="controls">
           <button id="toggle">Toggle Pressure</button>
           <span class="pill" id="mode">Mode: Baseline</span>
           <span class="pill" id="data">Data: Demo</span>
           <span class="pill" id="hover">Hover: none</span>
+          <button id="labelsToggle">Labels: Hover</button>
         </div>
 
         <div id="legend">
+          <button id="legendToggle">Show Legend</button>
+
           <div class="legendBlock">
             <div class="legendTitle">How You Move</div>
             <ul class="legendList" id="legend-move"></ul>
           </div>
+
           <div class="legendBlock">
             <div class="legendTitle">What You Protect</div>
             <ul class="legendList" id="legend-protect"></ul>
           </div>
+
           <div class="legendBlock">
             <div class="legendTitle">Pressure Response</div>
             <ul class="legendList" id="legend-pressure"></ul>
@@ -151,6 +219,14 @@ Failure behavior:
     </div>
 
     <script>
+      // ====== Query params (single source of truth) ======
+      const urlParams = new URLSearchParams(window.location.search);
+      const assessmentId = urlParams.get("assessment_id");
+      const vizToken = urlParams.get("viz_token");
+      const apiBase = urlParams.get("api_base") || "https://intimacy-compass.com";
+      const embedMode = urlParams.get("embed") === "1";
+      let labelsMode = urlParams.get("labels") || "hover"; // hover|all
+
       // ====== Config ======
       // Default API base when api_base is not provided.
       // REQUIRED_INPUT_PROD_API_BASE should be your production base, e.g. https://intimacy-compass.com
@@ -160,20 +236,36 @@ Failure behavior:
         version: "ic_map_v1",
         topology_id: "ic_map_topology_v1",
         nodeIds: [
-          "pace","directness","influence","stability_pref","precision_pref",
-          "priority_1","priority_2","priority_3","priority_4","priority_5",
-          "pursuit","withdrawal","control","appeasement","escalation"
+          "pace",
+          "directness",
+          "influence",
+          "stability_pref",
+          "precision_pref",
+          "priority_1",
+          "priority_2",
+          "priority_3",
+          "priority_4",
+          "priority_5",
+          "pursuit",
+          "withdrawal",
+          "control",
+          "appeasement",
+          "escalation",
         ],
-        moveIds: ["pace","directness","influence","stability_pref","precision_pref"],
-        protectIds: ["priority_1","priority_2","priority_3","priority_4","priority_5"],
-        pressureIds: ["pursuit","withdrawal","control","appeasement","escalation"]
+        moveIds: ["pace", "directness", "influence", "stability_pref", "precision_pref"],
+        protectIds: ["priority_1", "priority_2", "priority_3", "priority_4", "priority_5"],
+        pressureIds: ["pursuit", "withdrawal", "control", "appeasement", "escalation"],
       };
 
+      function getCSS(varName) {
+        return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+      }
+
       // ====== Fixed trait nodes (exactly 15) ======
       const GROUPS = {
-        move: { label: "How You Move", color: getCSS("--accent2") },
-        protect: { label: "What You Protect", color: getCSS("--ink") },
-        pressure: { label: "Pressure Response", color: getCSS("--accent") }
+        move: { label: "How You Move", color: getCSS("--cluster-move") },
+        protect: { label: "What You Protect", color: getCSS("--cluster-protect") },
+        pressure: { label: "Pressure Response", color: getCSS("--cluster-pressure") },
       };
 
       const move = [
@@ -203,15 +295,15 @@ Failure behavior:
       const nodes = [...move, ...protect, ...pressure];
 
       // Demo/default weights so renderer works without API.
-      nodes.forEach(n => {
+      nodes.forEach((n) => {
         n.weight_baseline = 1.8;
         n.weight_pressure = 2.0;
       });
 
       // Seed cluster positions (3 clusters in 3D space)
-      seedCluster(move,   { x: -80, y:  10, z:  40 });
-      seedCluster(protect,{ x:  70, y: -10, z: -30 });
-      seedCluster(pressure,{x:  10, y:  60, z:  70 });
+      seedCluster(move, { x: -80, y: 10, z: 40 });
+      seedCluster(protect, { x: 70, y: -10, z: -30 });
+      seedCluster(pressure, { x: 10, y: 60, z: 70 });
 
       // Links: dense within cluster + a few bridges between clusters (no new nodes)
       const links = [
@@ -240,36 +332,101 @@ Failure behavior:
       let isPressure = false;
       let hoveredNodeId = null;
 
+      function getNodeTooltip(node) {
+        if (labelsMode === "hover") {
+          return node && node.label && node.label.trim() !== "" ? node.label : "";
+        }
+        return ""; // no tooltip in "all" mode to avoid duplication
+      }
+
+      function createNodeSprite(node) {
+        if (labelsMode !== "all") return null;
+        if (!node || !node.label || node.label.trim() === "") return null;
+
+        const SpriteTextCtor = window.SpriteText; // from three-spritetext CDN
+        if (!SpriteTextCtor) return null;
+
+        const sprite = new SpriteTextCtor(node.label);
+        sprite.color = GROUPS[node.group].color;
+        sprite.textHeight = 6;
+        sprite.backgroundColor = "rgba(246, 244, 239, 0.85)";
+        sprite.padding = 2;
+        sprite.borderRadius = 3;
+        return sprite;
+      }
+
       const Graph = ForceGraph3D()(el)
         .backgroundColor(getCSS("--bg"))
         .showNavInfo(false)
         .width(window.innerWidth)
         .height(window.innerHeight)
         .graphData({ nodes, links })
-        .nodeLabel(n => n.label)
-        .nodeVal(n => nodeVal(n))
+        .nodeLabel((n) => getNodeTooltip(n))
+        .nodeThreeObject((n) => createNodeSprite(n))
+        .nodeVal((n) => nodeVal(n))
         .nodeOpacity(0.92)
-        .nodeColor(n => nodeColor(n))
+        .nodeColor((n) => nodeColor(n))
         .linkColor(() => getCSS("--muted"))
         .linkOpacity(0.35)
         .linkCurvature(0.18)
         .linkDirectionalParticles(() => (isPressure ? 4 : 2))
         .linkDirectionalParticleWidth(() => (isPressure ? 1.2 : 0.8))
         .linkDirectionalParticleSpeed(() => (isPressure ? 0.014 : 0.005))
-        .onNodeHover(n => {
+        .onNodeHover((n) => {
           hoveredNodeId = n ? n.id : null;
-          hoverEl.textContent = "Hover: " + (n ? n.label : "none");
+          hoverEl.textContent = "Hover: " + (n ? (n.label || "none") : "none");
         });
 
+      function updateNodeLabels() {
+        Graph.nodeLabel((n) => getNodeTooltip(n)).nodeThreeObject((n) => createNodeSprite(n));
+
+        if (typeof Graph.refresh === "function") {
+          Graph.refresh();
+        } else {
+          Graph.graphData(Graph.graphData());
+        }
+      }
+
+      // ====== Embed/controls setup ======
+      (function initEmbedAndControls() {
+        const legendEl = document.getElementById("legend");
+        const legendToggleBtn = document.getElementById("legendToggle");
+        const labelsToggleBtn = document.getElementById("labelsToggle");
+
+        if (legendEl && embedMode) {
+          legendEl.classList.add("compact", "collapsed");
+
+          if (legendToggleBtn) {
+            legendToggleBtn.textContent = "Show Legend";
+            legendToggleBtn.addEventListener("click", function () {
+              const isCollapsedNow = legendEl.classList.contains("collapsed");
+              if (isCollapsedNow) {
+                legendEl.classList.remove("collapsed");
+                this.textContent = "Hide Legend";
+              } else {
+                legendEl.classList.add("collapsed");
+                this.textContent = "Show Legend";
+              }
+            });
+          }
+        }
+
+        if (labelsToggleBtn) {
+          labelsToggleBtn.textContent = "Labels: " + (labelsMode === "hover" ? "Hover" : "All");
+          labelsToggleBtn.addEventListener("click", function () {
+            labelsMode = labelsMode === "hover" ? "all" : "hover";
+            this.textContent = "Labels: " + (labelsMode === "hover" ? "Hover" : "All");
+            updateNodeLabels();
+          });
+        }
+      })();
+
       // Gentle camera orbit (no heavy assets)
       let t = 0;
       const camDist = 240;
       (function animate() {
         t += isPressure ? 0.0032 : 0.0016;
-        Graph.cameraPosition(
-          { x: camDist * Math.cos(t), y: 90 + 10 * Math.sin(t * 0.7), z: camDist * Math.sin(t) },
-          { x: 0, y: 10, z: 0 }
-        );
+        Graph.cameraPosition({ x: camDist * Math.cos(t), y: 90 + 10 * Math.sin(t * 0.7), z: camDist * Math.sin(t) }, { x: 0, y: 10, z: 0 });
         requestAnimationFrame(animate);
       })();
 
@@ -277,11 +434,12 @@ Failure behavior:
       document.getElementById("toggle").addEventListener("click", () => {
         isPressure = !isPressure;
         modeEl.textContent = "Mode: " + (isPressure ? "Pressure" : "Baseline");
-        Graph
-          .nodeVal(n => nodeVal(n))
-          .nodeColor(n => nodeColor(n))
+        Graph.nodeVal((n) => nodeVal(n))
+          .nodeColor((n) => nodeColor(n))
           .linkDirectionalParticles(() => (isPressure ? 4 : 2))
           .linkDirectionalParticleSpeed(() => (isPressure ? 0.014 : 0.005));
+
+        updateNodeLabels();
       });
 
       // Resize handling
@@ -290,17 +448,16 @@ Failure behavior:
         Graph.height(window.innerHeight);
       });
 
-      // ====== Live data wiring (Step #4) ======
+      // ====== Live data wiring ======
       (async function initLiveData() {
         // Always render demo immediately, then try to upgrade to live.
         renderLegends();
         setDataStatus("Demo");
 
-        const params = getQueryParams();
-        if (!params.assessment_id || !params.viz_token) return;
+        if (!assessmentId || !vizToken) return;
 
-        const apiBase = params.api_base || API_BASE_DEFAULT;
-        const url = `${apiBase}/api/assessments/${encodeURIComponent(params.assessment_id)}/visualization?viz_token=${encodeURIComponent(params.viz_token)}`;
+        const resolvedApiBase = apiBase || API_BASE_DEFAULT;
+        const url = `${resolvedApiBase}/api/assessments/${encodeURIComponent(assessmentId)}/visualization?viz_token=${encodeURIComponent(vizToken)}`;
 
         try {
           const controller = new AbortController();
@@ -308,8 +465,8 @@ Failure behavior:
 
           const res = await fetch(url, {
             method: "GET",
-            headers: { "Accept": "application/json" },
-            signal: controller.signal
+            headers: { Accept: "application/json" },
+            signal: controller.signal,
           });
 
           clearTimeout(timeout);
@@ -323,35 +480,23 @@ Failure behavior:
           setDataStatus("Live");
 
           // Re-bind the graph to ensure it re-renders with patched node fields.
-          Graph.graphData({ nodes, links })
-            .nodeLabel(n => n.label)
-            .nodeVal(n => nodeVal(n))
-            .nodeColor(n => nodeColor(n));
+          Graph.graphData({ nodes, links }).nodeVal((n) => nodeVal(n)).nodeColor((n) => nodeColor(n));
 
+          updateNodeLabels();
           renderLegends();
         } catch (e) {
           // Fail open to demo
           setDataStatus("Demo");
-          // no throw
         }
       })();
 
-      function getQueryParams() {
-        const sp = new URLSearchParams(window.location.search);
-        return {
-          assessment_id: sp.get("assessment_id"),
-          viz_token: sp.get("viz_token"),
-          api_base: sp.get("api_base")
-        };
-      }
-
       function validatePayload(p) {
         if (!p || typeof p !== "object") return false;
         if (p.version !== REQUIRED.version) return false;
         if (p.topology_id !== REQUIRED.topology_id) return false;
         if (!Array.isArray(p.nodes) || p.nodes.length !== 15) return false;
 
-        const ids = new Set(p.nodes.map(n => n && n.id));
+        const ids = new Set(p.nodes.map((n) => n && n.id));
         for (const reqId of REQUIRED.nodeIds) {
           if (!ids.has(reqId)) return false;
         }
@@ -360,15 +505,15 @@ Failure behavior:
 
       function applyPayload(p) {
         const map = new Map();
-        p.nodes.forEach(n => map.set(n.id, n));
+        p.nodes.forEach((n) => map.set(n.id, n));
 
-        nodes.forEach(n => {
+        nodes.forEach((n) => {
           const src = map.get(n.id);
           if (!src) return;
 
-          // Labels: protect nodes dynamic, move+pressure fixed.
-          if (n.group === "protect" && typeof src.label === "string" && src.label.trim()) {
-            n.label = src.label.trim();
+          // Labels: protect nodes dynamic; empty string means hide (no placeholders)
+          if (n.group === "protect" && typeof src.label === "string") {
+            n.label = src.label.trim(); // may be ""
           }
 
           // Weights: always take from payload; HF must not invent weights.
@@ -383,18 +528,19 @@ Failure behavior:
 
       function renderLegends() {
         // How You Move (fixed)
-        setLegendList(legendMoveEl, REQUIRED.moveIds.map(id => findNodeLabel(id)));
+        setLegendList(legendMoveEl, REQUIRED.moveIds.map((id) => findNodeLabel(id)));
 
-        // What You Protect (dynamic)
-        setLegendList(legendProtectEl, REQUIRED.protectIds.map(id => findNodeLabel(id)));
+        // What You Protect (dynamic; empty labels skipped)
+        setLegendList(legendProtectEl, REQUIRED.protectIds.map((id) => findNodeLabel(id)));
 
         // Pressure Response (fixed)
-        setLegendList(legendPressureEl, REQUIRED.pressureIds.map(id => findNodeLabel(id)));
+        setLegendList(legendPressureEl, REQUIRED.pressureIds.map((id) => findNodeLabel(id)));
       }
 
       function setLegendList(el, labels) {
         el.innerHTML = "";
-        labels.forEach(txt => {
+        labels.forEach((txt) => {
+          if (!txt || txt.trim() === "") return; // skip empty/whitespace
           const li = document.createElement("li");
           li.textContent = txt;
           el.appendChild(li);
@@ -402,7 +548,7 @@ Failure behavior:
       }
 
       function findNodeLabel(id) {
-        const n = nodes.find(x => x.id === id);
+        const n = nodes.find((x) => x.id === id);
         return n ? n.label : id;
       }
 
@@ -410,9 +556,9 @@ Failure behavior:
       function seedCluster(arr, center) {
         arr.forEach((n, i) => {
           const jitter = 18;
-          n.x = center.x + (Math.sin(i * 2.1) * jitter);
-          n.y = center.y + (Math.cos(i * 1.7) * jitter);
-          n.z = center.z + (Math.sin(i * 1.3) * jitter);
+          n.x = center.x + Math.sin(i * 2.1) * jitter;
+          n.y = center.y + Math.cos(i * 1.7) * jitter;
+          n.z = center.z + Math.sin(i * 1.3) * jitter;
         });
       }
 
@@ -426,9 +572,9 @@ Failure behavior:
       }
 
       function nodeVal(n) {
-        const hoverBoost = (hoveredNodeId && n.id === hoveredNodeId) ? 2.2 : 1.0;
-        const base = (typeof n.weight_baseline === "number") ? n.weight_baseline : 1.8;
-        const press = (typeof n.weight_pressure === "number") ? n.weight_pressure : 2.0;
+        const hoverBoost = hoveredNodeId && n.id === hoveredNodeId ? 2.2 : 1.0;
+        const base = typeof n.weight_baseline === "number" ? n.weight_baseline : 1.8;
+        const press = typeof n.weight_pressure === "number" ? n.weight_pressure : 2.0;
 
         if (!isPressure) return base;
         return press * hoverBoost;
@@ -440,10 +586,7 @@ Failure behavior:
         if (n.id === hoveredNodeId) return base;
         return "rgba(17,24,39,0.35)";
       }
-
-      function getCSS(varName) {
-        return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-      }
     </script>
   </body>
-</html>
+</html>
+```