code-kg 0.1.1 → 0.1.2

package/dist/server/ui.js

@@ -572,14 +572,22 @@ function renderUiHtml() {
           extremeEdges: ${graph_performance_1.GRAPH_PERFORMANCE_THRESHOLDS.extremeEdges}
         };
         const SEARCH_DEBOUNCE_MS = 150;
+        const RENDER_BUDGETS = {
+          normal: { nodes: Number.POSITIVE_INFINITY, edges: Number.POSITIVE_INFINITY },
+          degraded: { nodes: 18000, edges: 40000 },
+          extreme: { nodes: 9000, edges: 16000 }
+        };
+        const STATIC_LAYOUT_SPACING = 8.4;
 
         const state = {
           view: 'fileDeps',
           graph: null,
-          graphData: { nodes: [], links: [] },
+          graphData: { nodes: [], links: [], nodeById: new Map() },
           graphMeta: null,
           perfMode: 'normal',
           lastAppliedPerfMode: '',
+          defaultChargeForce: null,
+          staticLayoutApplied: false,
           selectedNodeId: '',
           searchTerm: '',
           searchTimer: null,
@@ -693,6 +701,116 @@ function renderUiHtml() {
           return 1;
         }
 
+        function stableHash(value) {
+          const text = String(value || '');
+          let hash = 2166136261;
+          for (let index = 0; index < text.length; index += 1) {
+            hash ^= text.charCodeAt(index);
+            hash = Math.imul(hash, 16777619);
+          }
+          return hash >>> 0;
+        }
+
+        function shouldRenderByBudget(id, limit, total) {
+          if (!Number.isFinite(limit) || limit >= total) {
+            return true;
+          }
+          if (limit <= 0 || total <= 0) {
+            return false;
+          }
+          const sampleRatio = limit / total;
+          const threshold = Math.max(1, Math.floor(sampleRatio * 1000000));
+          return (stableHash(id) % 1000000) < threshold;
+        }
+
+        function applyStaticLayout() {
+          if (state.staticLayoutApplied || !state.graphData || !Array.isArray(state.graphData.nodes)) {
+            return;
+          }
+          const nodes = state.graphData.nodes;
+          for (let index = 0; index < nodes.length; index += 1) {
+            const node = nodes[index];
+            const radius = Math.sqrt(index + 1) * STATIC_LAYOUT_SPACING;
+            const angle = index * 2.399963229728653;
+            const x = Math.cos(angle) * radius;
+            const y = Math.sin(angle) * radius;
+            const z = ((index % 27) - 13) * (STATIC_LAYOUT_SPACING * 0.28);
+            node.x = x;
+            node.y = y;
+            node.z = z;
+            node.fx = x;
+            node.fy = y;
+            node.fz = z;
+          }
+          state.staticLayoutApplied = true;
+        }
+
+        function clearStaticLayout() {
+          if (!state.staticLayoutApplied || !state.graphData || !Array.isArray(state.graphData.nodes)) {
+            return;
+          }
+          for (const node of state.graphData.nodes) {
+            delete node.fx;
+            delete node.fy;
+            delete node.fz;
+          }
+          state.staticLayoutApplied = false;
+        }
+
+        function applyRenderBudget() {
+          if (!state.graphData || !Array.isArray(state.graphData.nodes) || !Array.isArray(state.graphData.links)) {
+            return;
+          }
+
+          const mode = state.perfMode;
+          const budget = RENDER_BUDGETS[mode] || RENDER_BUDGETS.normal;
+          const totalNodes = state.graphData.nodes.length;
+          const totalEdges = state.graphData.links.length;
+          const nodeById = state.graphData.nodeById instanceof Map ? state.graphData.nodeById : new Map();
+
+          for (const node of state.graphData.nodes) {
+            const pinned = Boolean(node.__selected || node.__matched);
+            const sampled = shouldRenderByBudget(node.id, budget.nodes, totalNodes);
+            node.__renderVisible = pinned || sampled;
+          }
+
+          for (const link of state.graphData.links) {
+            const sourceId = String(link.__sourceId || '');
+            const targetId = String(link.__targetId || '');
+            const sourceNode = nodeById.get(sourceId);
+            const targetNode = nodeById.get(targetId);
+            const forceVisible = Boolean(
+              link.__highlight ||
+              sourceId === state.selectedNodeId ||
+              targetId === state.selectedNodeId
+            );
+
+            if (forceVisible) {
+              if (sourceNode) {
+                sourceNode.__renderVisible = true;
+              }
+              if (targetNode) {
+                targetNode.__renderVisible = true;
+              }
+            }
+          }
+
+          for (const link of state.graphData.links) {
+            const sourceId = String(link.__sourceId || '');
+            const targetId = String(link.__targetId || '');
+            const sourceNode = nodeById.get(sourceId);
+            const targetNode = nodeById.get(targetId);
+            const forceVisible = Boolean(
+              link.__highlight ||
+              sourceId === state.selectedNodeId ||
+              targetId === state.selectedNodeId
+            );
+            const sampled = shouldRenderByBudget(link.id || (sourceId + ':' + targetId), budget.edges, totalEdges);
+            const endpointsVisible = Boolean(sourceNode && targetNode && sourceNode.__renderVisible && targetNode.__renderVisible);
+            link.__renderVisible = forceVisible || (sampled && endpointsVisible);
+          }
+        }
+
         function setStatus(text, tone) {
           els.status.textContent = text;
           if (tone === 'error') {
@@ -737,18 +855,47 @@ function renderUiHtml() {
 
           const mode = state.perfMode;
           const graph = state.graph;
+          if (mode === 'extreme') {
+            applyStaticLayout();
+          } else {
+            clearStaticLayout();
+          }
+
+          if (typeof graph.numDimensions === 'function') {
+            graph.numDimensions(mode === 'normal' ? 3 : 2);
+          }
           if (typeof graph.cooldownTicks === 'function') {
-            graph.cooldownTicks(mode === 'normal' ? 240 : mode === 'degraded' ? 110 : 70);
+            graph.cooldownTicks(mode === 'normal' ? 240 : mode === 'degraded' ? 40 : 2);
           }
           if (typeof graph.cooldownTime === 'function') {
-            graph.cooldownTime(mode === 'normal' ? 15000 : mode === 'degraded' ? 5500 : 2600);
+            graph.cooldownTime(mode === 'normal' ? 15000 : mode === 'degraded' ? 1800 : 100);
+          }
+          if (typeof graph.warmupTicks === 'function') {
+            graph.warmupTicks(mode === 'normal' ? 90 : mode === 'degraded' ? 20 : 0);
           }
           if (typeof graph.d3VelocityDecay === 'function') {
-            graph.d3VelocityDecay(mode === 'normal' ? 0.25 : mode === 'degraded' ? 0.34 : 0.44);
+            graph.d3VelocityDecay(mode === 'normal' ? 0.25 : mode === 'degraded' ? 0.52 : 0.9);
+          }
+          if (typeof graph.nodeResolution === 'function') {
+            graph.nodeResolution(mode === 'normal' ? 8 : mode === 'degraded' ? 5 : 3);
           }
+          if (typeof graph.linkResolution === 'function') {
+            graph.linkResolution(mode === 'normal' ? 6 : mode === 'degraded' ? 2 : 1);
+          }
+
+          graph.linkOpacity(mode === 'normal' ? 0.66 : mode === 'degraded' ? 0.38 : 0.26);
+          graph.nodeRelSize(mode === 'normal' ? 3.2 : mode === 'degraded' ? 2.45 : 2.1);
 
-          graph.linkOpacity(mode === 'normal' ? 0.66 : mode === 'degraded' ? 0.48 : 0.36);
-          graph.nodeRelSize(mode === 'normal' ? 3.2 : mode === 'degraded' ? 2.7 : 2.3);
+          if (typeof graph.d3Force === 'function') {
+            const currentCharge = graph.d3Force('charge');
+            if (mode === 'normal') {
+              if (state.defaultChargeForce && currentCharge == null) {
+                graph.d3Force('charge', state.defaultChargeForce);
+              }
+            } else if (currentCharge != null) {
+              graph.d3Force('charge', null);
+            }
+          }
 
           try {
             const renderer = typeof graph.renderer === 'function' ? graph.renderer() : null;
@@ -814,7 +961,8 @@ function renderUiHtml() {
               __targetId: target,
               type: edge.type,
               __color: colorForEdge(edge.type),
-              __highlight: false
+              __highlight: false,
+              __renderVisible: true
             };
           }
 
@@ -836,11 +984,17 @@ function renderUiHtml() {
               __color: colorForNode(type),
               __searchText: (String(name) + ' ' + String(path) + ' ' + String(type)).toLowerCase(),
               __matched: false,
-              __selected: false
+              __selected: false,
+              __renderVisible: true
             };
           }
 
-          return { nodes, links };
+          const nodeById = new Map();
+          for (const node of nodes) {
+            nodeById.set(node.id, node);
+          }
+
+          return { nodes, links, nodeById };
         }
 
         function ensureGraph() {
@@ -858,6 +1012,7 @@ function renderUiHtml() {
             .backgroundColor('#05060f')
             .showNavInfo(false)
             .nodeOpacity(0.95)
+            .nodeVisibility((node) => node.__renderVisible !== false)
             .nodeLabel((node) => {
               if (state.perfMode === 'extreme' && !node.__selected) {
                 return '';
@@ -892,8 +1047,9 @@ function renderUiHtml() {
             .linkWidth((link) => {
               const base = state.perfMode === 'normal' ? 0.75 : state.perfMode === 'degraded' ? 0.46 : 0.34;
               const highlight = state.perfMode === 'normal' ? 2.2 : state.perfMode === 'degraded' ? 1.35 : 1.05;
-              return link.__highlight ? highlight : base;
-            })
+                return link.__highlight ? highlight : base;
+              })
+            .linkVisibility((link) => link.__renderVisible !== false)
             .linkDirectionalParticles((link) => {
               if (state.perfMode !== 'normal') {
                 return 0;
@@ -916,6 +1072,9 @@ function renderUiHtml() {
             });
 
           state.graph = graph;
+          if (typeof graph.d3Force === 'function') {
+            state.defaultChargeForce = graph.d3Force('charge');
+          }
           applyGraphQualitySettings();
           state.lastAppliedPerfMode = state.perfMode;
 
@@ -968,9 +1127,24 @@ function renderUiHtml() {
             state.lastAppliedPerfMode = state.perfMode;
             clearSearchTimer();
           }
+          applyRenderBudget();
 
+          let visibleNodes = 0;
+          for (const node of state.graphData.nodes) {
+            if (node.__renderVisible !== false) {
+              visibleNodes += 1;
+            }
+          }
+          let visibleEdges = 0;
+          for (const link of state.graphData.links) {
+            if (link.__renderVisible !== false) {
+              visibleEdges += 1;
+            }
+          }
           els.graphCounts.textContent =
-            'nodes: ' + nodeCount + ' | edges: ' + edgeCount + ' | mode: ' + String(state.perfMode).toUpperCase();
+            'nodes: ' + visibleNodes + '/' + nodeCount +
+            ' | edges: ' + visibleEdges + '/' + edgeCount +
+            ' | mode: ' + String(state.perfMode).toUpperCase();
 
           if (nodeCount === 0) {
             els.graphEmpty.style.display = 'grid';
@@ -1040,6 +1214,7 @@ function renderUiHtml() {
           const view = state.view === 'all' ? 'all' : state.view;
           const data = await readEnvelope('/api/graph?view=' + encodeURIComponent(view));
           state.graphData = toGraphData(data);
+          state.staticLayoutApplied = false;
           state.graphMeta = normalizeGraphMeta(
             data && data.meta ? data.meta : null,
             state.graphData.nodes.length,
@@ -1239,6 +1414,7 @@ function renderUiHtml() {
                 '&direction=both'
             );
             state.graphData = toGraphData(data);
+            state.staticLayoutApplied = false;
             state.graphMeta = normalizeGraphMeta(
               data && data.meta ? data.meta : null,
               state.graphData.nodes.length,

package/dist/server/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/server/ui.ts"],"names":[],"mappings":";;AAEA,oCAi2CC;AAn2CD,2DAAmE;AAEnE,SAAgB,YAAY;IAC1B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmjBkB,gDAA4B,CAAC,aAAa;2BAC1C,gDAA4B,CAAC,aAAa;0BAC3C,gDAA4B,CAAC,YAAY;0BACzC,gDAA4B,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyyB3D,CAAC;AACT,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/server/ui.ts"],"names":[],"mappings":";;AAEA,oCAihDC;AAnhDD,2DAAmE;AAEnE,SAAgB,YAAY;IAC1B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmjBkB,gDAA4B,CAAC,aAAa;2BAC1C,gDAA4B,CAAC,aAAa;0BAC3C,gDAA4B,CAAC,YAAY;0BACzC,gDAA4B,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAy9B3D,CAAC;AACT,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-kg",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Local code knowledge graph CLI with interactive visualization and deterministic analysis APIs",
   "license": "MIT",
   "keywords": [