Spaces:

pretzinger
/

ic-trait-network

Running

App Files Files

pretzinger commited on Jan 16

Commit

e786d18

verified ·

1 Parent(s): 3a7aca2

Update index.html

Browse files

Files changed (1) hide show

index.html +204 -20

index.html CHANGED Viewed

@@ -35,6 +35,7 @@ Pressure: pursuit, withdrawal, control, appeasement, escalation
 Failure behavior:
 - If fetch fails or payload invalid, fall back to demo data and show “Data: Demo” in HUD.
 -->
 <!doctype html>
 <html lang="en">
   <head>
@@ -66,11 +67,11 @@ Failure behavior:
         border: 1px solid rgba(17, 24, 39, 0.08);
         border-radius: 12px;
         padding: 12px 12px;
-        max-width: 520px;
       }
       #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; gap: 8px; align-items: center; }
       button {
         font-size: 12px;
         padding: 8px 10px;
@@ -88,7 +89,33 @@ Failure behavior:
         border: 1px solid rgba(17, 24, 39, 0.12);
         background: rgba(255, 255, 255, 0.7);
         color: rgba(17, 24, 39, 0.78);
       }
     </style>
   </head>
   <body>
@@ -96,16 +123,52 @@ Failure behavior:
       <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>
         <div id="controls">
           <button id="toggle">Toggle Pressure</button>
           <span class="pill" id="mode">Mode: Baseline</span>
           <span class="pill" id="hover">Hover: none</span>
         </div>
       </div>
       <div id="graph"></div>
     </div>
     <script>
       // ====== Fixed trait nodes (exactly 15) ======
       const GROUPS = {
         move: { label: "How You Move", color: getCSS("--accent2") },
@@ -113,7 +176,6 @@ Failure behavior:
         pressure: { label: "Pressure Response", color: getCSS("--accent") }
       };
-      // 5 + 5 + 5 = 15 nodes total (no extra nodes)
       const move = [
         { id: "pace", label: "Pace", group: "move" },
         { id: "directness", label: "Directness", group: "move" },
@@ -140,6 +202,12 @@ Failure behavior:
       const nodes = [...move, ...protect, ...pressure];
       // Seed cluster positions (3 clusters in 3D space)
       seedCluster(move,   { x: -80, y:  10, z:  40 });
       seedCluster(protect,{ x:  70, y: -10, z: -30 });
@@ -147,9 +215,9 @@ Failure behavior:
       // Links: dense within cluster + a few bridges between clusters (no new nodes)
       const links = [
-        ...ringLinks(move),
-        ...ringLinks(protect),
-        ...ringLinks(pressure),
         // Bridges: minimal, purposeful
         { source: "directness", target: "priority_2" },
@@ -163,6 +231,11 @@ Failure behavior:
       const el = document.getElementById("graph");
       const hoverEl = document.getElementById("hover");
       const modeEl = document.getElementById("mode");
       let isPressure = false;
       let hoveredNodeId = null;
@@ -217,6 +290,122 @@ Failure behavior:
         Graph.height(window.innerHeight);
       });
       // ====== Helpers ======
       function seedCluster(arr, center) {
         arr.forEach((n, i) => {
@@ -227,32 +416,27 @@ Failure behavior:
         });
       }
-      function ringLinks(arr) {
         const out = [];
-        for (let i = 0; i < arr.length; i++) {
-          out.push({ source: arr[i].id, target: arr[(i + 1) % arr.length].id });
-          // add one chord for "neural" density
-          out.push({ source: arr[i].id, target: arr[(i + 2) % arr.length].id });
         }
         return out;
       }
       function nodeVal(n) {
-        // Baseline: uniform
-        // Pressure: pressure cluster becomes larger, plus one "dominant" node based on hover
-        const base = 1.8;
-        if (!isPressure) return base;
-        const groupBoost = (n.group === "pressure") ? 1.4 : (n.group === "protect" ? 1.1 : 1.0);
         const hoverBoost = (hoveredNodeId && n.id === hoveredNodeId) ? 2.2 : 1.0;
-        return base * groupBoost * hoverBoost;
       }
       function nodeColor(n) {
         const base = GROUPS[n.group].color;
         if (!hoveredNodeId) return base;
-        // Dim non-hover nodes slightly for clarity
         if (n.id === hoveredNodeId) return base;
         return "rgba(17,24,39,0.35)";
       }

 Failure behavior:
 - If fetch fails or payload invalid, fall back to demo data and show “Data: Demo” in HUD.
 -->
 <!doctype html>
 <html lang="en">
   <head>
         border: 1px solid rgba(17, 24, 39, 0.08);
         border-radius: 12px;
         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; }
       button {
         font-size: 12px;
         padding: 8px 10px;
         border: 1px solid rgba(17, 24, 39, 0.12);
         background: rgba(255, 255, 255, 0.7);
         color: rgba(17, 24, 39, 0.78);
+        white-space: nowrap;
+      }
+      #legend {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+      .legendBlock {
+        border: 1px solid rgba(17, 24, 39, 0.08);
+        border-radius: 10px;
+        padding: 8px 10px;
+        background: rgba(255, 255, 255, 0.55);
+      }
+      .legendTitle {
+        font-size: 11px;
+        font-weight: 650;
+        margin: 0 0 6px;
+        color: rgba(17, 24, 39, 0.88);
+      }
+      .legendList {
+        margin: 0;
+        padding-left: 14px;
+        font-size: 11px;
+        line-height: 1.35;
+        color: rgba(17, 24, 39, 0.78);
       }
+      .legendList li { margin: 2px 0; }
     </style>
   </head>
   <body>
       <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>
         <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>
         </div>
+        <div id="legend">
+          <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>
+          </div>
+        </div>
       </div>
       <div id="graph"></div>
     </div>
     <script>
+      // ====== 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
+      const API_BASE_DEFAULT = "https://intimacy-compass.com";
+      const REQUIRED = {
+        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"
+        ],
+        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"]
+      };
       // ====== Fixed trait nodes (exactly 15) ======
       const GROUPS = {
         move: { label: "How You Move", color: getCSS("--accent2") },
         pressure: { label: "Pressure Response", color: getCSS("--accent") }
       };
       const move = [
         { id: "pace", label: "Pace", group: "move" },
         { id: "directness", label: "Directness", group: "move" },
       const nodes = [...move, ...protect, ...pressure];
+      // Demo/default weights so renderer works without API.
+      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 });
       // Links: dense within cluster + a few bridges between clusters (no new nodes)
       const links = [
+        ...ringLinksByIds(REQUIRED.moveIds),
+        ...ringLinksByIds(REQUIRED.protectIds),
+        ...ringLinksByIds(REQUIRED.pressureIds),
         // Bridges: minimal, purposeful
         { source: "directness", target: "priority_2" },
       const el = document.getElementById("graph");
       const hoverEl = document.getElementById("hover");
       const modeEl = document.getElementById("mode");
+      const dataEl = document.getElementById("data");
+      const legendMoveEl = document.getElementById("legend-move");
+      const legendProtectEl = document.getElementById("legend-protect");
+      const legendPressureEl = document.getElementById("legend-pressure");
       let isPressure = false;
       let hoveredNodeId = null;
         Graph.height(window.innerHeight);
       });
+      // ====== Live data wiring (Step #4) ======
+      (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;
+        const apiBase = params.api_base || API_BASE_DEFAULT;
+        const url = `${apiBase}/api/assessments/${encodeURIComponent(params.assessment_id)}/visualization?viz_token=${encodeURIComponent(params.viz_token)}`;
+        try {
+          const controller = new AbortController();
+          const timeout = setTimeout(() => controller.abort(), 8000);
+          const res = await fetch(url, {
+            method: "GET",
+            headers: { "Accept": "application/json" },
+            signal: controller.signal
+          });
+          clearTimeout(timeout);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const payload = await res.json();
+          if (!validatePayload(payload)) throw new Error("Invalid payload");
+          applyPayload(payload);
+          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));
+          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));
+        for (const reqId of REQUIRED.nodeIds) {
+          if (!ids.has(reqId)) return false;
+        }
+        return true;
+      }
+      function applyPayload(p) {
+        const map = new Map();
+        p.nodes.forEach(n => map.set(n.id, 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();
+          }
+          // Weights: always take from payload; HF must not invent weights.
+          n.weight_baseline = typeof src.weight_baseline === "number" ? src.weight_baseline : n.weight_baseline;
+          n.weight_pressure = typeof src.weight_pressure === "number" ? src.weight_pressure : n.weight_pressure;
+        });
+      }
+      function setDataStatus(kind) {
+        dataEl.textContent = "Data: " + (kind === "Live" ? "Live" : "Demo");
+      }
+      function renderLegends() {
+        // How You Move (fixed)
+        setLegendList(legendMoveEl, REQUIRED.moveIds.map(id => findNodeLabel(id)));
+        // What You Protect (dynamic)
+        setLegendList(legendProtectEl, REQUIRED.protectIds.map(id => findNodeLabel(id)));
+        // Pressure Response (fixed)
+        setLegendList(legendPressureEl, REQUIRED.pressureIds.map(id => findNodeLabel(id)));
+      }
+      function setLegendList(el, labels) {
+        el.innerHTML = "";
+        labels.forEach(txt => {
+          const li = document.createElement("li");
+          li.textContent = txt;
+          el.appendChild(li);
+        });
+      }
+      function findNodeLabel(id) {
+        const n = nodes.find(x => x.id === id);
+        return n ? n.label : id;
+      }
       // ====== Helpers ======
       function seedCluster(arr, center) {
         arr.forEach((n, i) => {
         });
       }
+      function ringLinksByIds(ids) {
         const out = [];
+        for (let i = 0; i < ids.length; i++) {
+          out.push({ source: ids[i], target: ids[(i + 1) % ids.length] });
+          out.push({ source: ids[i], target: ids[(i + 2) % ids.length] });
         }
         return out;
       }
       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;
+        if (!isPressure) return base;
+        return press * hoverBoost;
       }
       function nodeColor(n) {
         const base = GROUPS[n.group].color;
         if (!hoveredNodeId) return base;
         if (n.id === hoveredNodeId) return base;
         return "rgba(17,24,39,0.35)";
       }