@psnext/lscg 0.1.2 → 0.1.4

package/dist/src/view/templates/interactive.html

@@ -28,6 +28,28 @@
             <input id="search" type="search" placeholder="Type to filter by label" autocomplete="off" value="{{SEARCH_TERM}}" />
           </label>
         </div>
+        <div class="section">
+          <label>
+            <span class="status">Node display</span>
+            <select id="display-select">
+              <option value="simple">Simple</option>
+              <option value="shape">Shape</option>
+              <option value="icon">Icon</option>
+            </select>
+          </label>
+        </div>
+        <div class="section">
+          <label>
+            <span class="status">Layout</span>
+            <select id="layout-select">
+              <option value="force">Force-directed</option>
+              <option value="radial">Radial</option>
+              <option value="grid">Grid</option>
+              <option value="kind">By kind</option>
+              <option value="treemap">Treemap</option>
+            </select>
+          </label>
+        </div>
         <div class="section">
           <label>
             <span class="status">View box zoom</span>
@@ -57,11 +79,15 @@
       import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm';
 
       const data = {{DATA}};
+      let display = data.display ?? 'shape';
+      let layoutMode = 'force';
       const app = document.getElementById('app');
       const svg = d3.select('#graph');
       const graphPanel = document.querySelector('.graph-panel');
       const tooltip = document.getElementById('tooltip');
       const searchInput = document.getElementById('search');
+      const displaySelect = document.getElementById('display-select');
+      const layoutSelect = document.getElementById('layout-select');
       const zoomInput = document.getElementById('zoom');
       const zoomValue = document.getElementById('zoom-value');
       const zoomAllButton = document.getElementById('zoom-all');
@@ -114,6 +140,30 @@
 
       function appendNodeShape(group, node) {
         const fill = node.color ?? '#94a3b8';
+        if (display === 'simple') {
+          group.append('circle')
+            .attr('class', 'node-shape node-shape--simple')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', Math.min(node.width, node.height) / 2)
+            .attr('fill', fill);
+          return;
+        }
+        if (display === 'icon') {
+          const icon = data.icons?.[node.kind];
+          if (!icon) throw new Error('Missing icon asset for ' + node.kind);
+          group.append('svg')
+            .attr('class', 'node-shape node-shape--icon')
+            .attr('x', -node.width / 2)
+            .attr('y', -node.height / 2)
+            .attr('width', node.width)
+            .attr('height', node.height)
+            .attr('viewBox', icon.viewBox)
+            .attr('color', fill)
+            .attr('aria-hidden', 'true')
+            .html(icon.markup);
+          return;
+        }
         switch (node.shape) {
           case 'rounded-rect':
             group.append('rect')
@@ -155,6 +205,17 @@
                 : (-node.width / 2 + node.height / 4) + ',' + (-node.height / 2) + ' ' + (node.width / 2 - node.height / 4) + ',' + (-node.height / 2) + ' ' + (node.width / 2) + ',0 ' + (node.width / 2 - node.height / 4) + ',' + (node.height / 2) + ' ' + (-node.width / 2 + node.height / 4) + ',' + (node.height / 2) + ' ' + (-node.width / 2) + ',0')
               .attr('fill', fill);
             break;
+          case 'package':
+            group.append('svg')
+              .attr('class', 'node-shape node-shape--package')
+              .attr('x', -node.width / 2)
+              .attr('y', -node.height / 2)
+              .attr('width', node.width)
+              .attr('height', node.height)
+              .attr('viewBox', '0 0 512 512')
+              .attr('aria-hidden', 'true')
+              .html('<polygon fill="#7E4F1F" points="511.516,107.105 511.788,107.036 264.065,31.004 0.479,106.898 0,106.759 0,411.849 238.676,480.721 238.676,480.159 238.888,480.996 512,412.125 512,107.036"/><polygon fill="#EDA637" points="264.065,31.004 0,107.036 238.676,175.907 511.788,107.036"/><polygon fill="#C27526" points="238.888,480.996 512,412.125 512,107.036 238.888,175.907"/><path fill="#FFEC99" d="M193.016 51.462 78.638 84.393l230.233 73.866v50.416c0 3.323 1.541 6.458 4.172 8.487 2.631 2.029 6.053 2.725 9.268 1.881l99.058-25.986c4.713-1.237 7.999-5.495 7.999-10.369v-54.816L193.016 51.462Z"/><path fill="#FFDC35" d="M486.158 374.572c0 6.29-4.278 11.775-10.378 13.307l-52.647 13.55c-2.779.698-5.736.663-8.41-.367-5.363-2.066-8.677-7.119-8.677-12.576V332.26c0-6.29 4.278-11.775 10.378-13.307l52.647-13.55c2.779-.698 5.736-.663 8.41.367 5.363 2.066 8.677 7.119 8.677 12.576v56.226Z"/><path fill="#FFDC35" d="M429.367 182.689c0 4.872-3.287 9.132-7.999 10.368l-99.058 25.986c-3.214.843-6.637.148-9.268-1.881-2.631-2.029-4.172-5.164-4.172-8.487v-50.416l120.497-30.386v54.816Z"/><path fill="#DF7400" d="m186.692 292.407-40.804-11.978c-5.273-1.548-8.895-6.385-8.895-11.881v-39.76c0-8.263 7.941-14.208 15.87-11.881l40.804 11.978c5.273 1.548 8.895 6.385 8.895 11.881v39.76c0 8.263-7.941 14.208-15.87 11.881Z"/>');
+            break;
           case 'user':
             const userIcon = group.append('svg')
               .attr('class', 'node-shape node-shape--user')
@@ -193,31 +254,68 @@
         .force('x', d3.forceX(width / 2).strength(0.05))
         .force('y', d3.forceY(height / 2).strength(0.05));
 
-      const links = linkLayer.selectAll('line')
-        .data(linksData)
-        .join('line')
-        .attr('class', (d) => 'edge edge--' + d.kind)
-        .attr('marker-end', 'url(#arrow)');
-
-      const nodes = nodeLayer.selectAll('g')
-        .data(nodesData)
-        .join('g')
-        .attr('class', (d) => 'node node--' + d.kind)
-        .call(drag(simulation));
+      let links = linkLayer.selectAll('line');
+      let nodes = nodeLayer.selectAll('g');
 
-      nodeLayer.raise();
-
-      nodes.each(function(d) {
-        const group = d3.select(this);
-        appendNodeShape(group, d);
+      function renderNode(group, node) {
+        appendNodeShape(group, node);
+        group.append('title').text(node.label);
         group.append('text')
           .attr('class', 'node-label')
           .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', d.kind === 'file' ? 'middle' : 'hanging')
-          .attr('y', d.kind === 'file' ? 0 : (d.height / 2) + 14)
-          .text(d.label);
-        group.append('title').text(d.label);
-      });
+          .attr('dominant-baseline', display === 'shape' && node.kind === 'file' ? 'middle' : 'hanging')
+          .attr('y', display === 'shape' && node.kind === 'file' ? 0 : (node.height / 2) + 14)
+          .text(node.label);
+      }
+
+      function renderGraph(visibleNodeIds, visibleEdgeIds) {
+        links = linkLayer.selectAll('line')
+          .data(linksData.filter((edge) => visibleEdgeIds.has(edge.id)), (edge) => edge.id)
+          .join(
+            (enter) => enter.append('line'),
+            (update) => update,
+            (exit) => exit.remove()
+          )
+          .attr('class', (d) => 'edge edge--' + d.kind)
+          .attr('marker-end', 'url(#arrow)');
+
+        nodes = nodeLayer.selectAll('g')
+          .data(nodesData.filter((node) => visibleNodeIds.has(node.id)), (node) => node.id)
+          .join(
+            (enter) => {
+              const selection = enter.append('g')
+                .attr('class', (d) => 'node node--' + d.kind)
+              if (layoutMode === 'force') 
+                selection.call(drag(simulation));
+              
+              selection.each(function(node) {
+                renderNode(d3.select(this), node);
+              });
+              return selection;
+            },
+            (update) => update,
+            (exit) => exit.remove()
+          );
+
+        nodeLayer.raise();
+        bindNodeInteractions();
+      }
+
+      function updateDisplay() {
+        nodes.each(function(d) {
+          const group = d3.select(this);
+          group.selectAll('.node-shape').remove();
+          appendNodeShape(group, d);
+          group.select('.node-label')
+            .attr('dominant-baseline', display === 'shape' && d.kind === 'file' ? 'middle' : 'hanging')
+            .attr('y', display === 'shape' && d.kind === 'file' ? 0 : (d.height / 2) + 14)
+            .raise();
+        });
+      }
+
+      if (displaySelect instanceof HTMLSelectElement) {
+        displaySelect.value = display;
+      }
 
       const zoom = d3.zoom().scaleExtent([0.2, 4]).on('zoom', (event) => {
         zoomLayer.attr('transform', event.transform);
@@ -299,6 +397,74 @@
         return typeof endpoint === 'string' ? endpoint : endpoint?.id;
       }
 
+      function applyLayout(visibleNodeIds) {
+        if (layoutMode === 'force') {
+          for (const node of nodesData) {
+            node.fx = null;
+            node.fy = null;
+          }
+          simulation.alpha(0.8).restart();
+          return;
+        }
+
+        simulation.stop();
+        const visibleNodes = nodesData.filter((node) => visibleNodeIds.has(node.id));
+        const { width: canvasWidth, height: canvasHeight } = canvasSize();
+        const centerX = canvasWidth / 2;
+        const centerY = canvasHeight / 2;
+        const padding = 80;
+        const radius = Math.max(40, Math.min(canvasWidth, canvasHeight) / 2 - padding);
+        const columns = Math.max(1, Math.ceil(Math.sqrt(visibleNodes.length)));
+        const rows = Math.max(1, Math.ceil(visibleNodes.length / columns));
+
+        const orderedNodes = layoutMode === 'kind'
+          ? [...visibleNodes].sort((left, right) => left.kind.localeCompare(right.kind) || left.label.localeCompare(right.label))
+          : visibleNodes;
+        const treemapRoot = layoutMode === 'treemap'
+          ? d3.treemap().size([canvasWidth - padding * 2, canvasHeight - padding * 2]).paddingInner(12)(
+              d3.hierarchy({ children: visibleNodes }).sum((node) => node.degree ? Math.max(1, node.degree + 1) : 1)
+            )
+          : null;
+
+        orderedNodes.forEach((node, index) => {
+          let x = centerX;
+          let y = centerY;
+          if (layoutMode === 'treemap') {
+            const tile = treemapRoot?.leaves().find((leaf) => leaf.data === node);
+            x = padding + ((tile?.x0 ?? 0) + (tile?.x1 ?? 0)) / 2;
+            y = padding + ((tile?.y0 ?? 0) + (tile?.y1 ?? 0)) / 2;
+          } else if (layoutMode === 'radial') {
+            const angle = (index * Math.PI * 2) / Math.max(visibleNodes.length, 1) - Math.PI / 2;
+            x = centerX + Math.cos(angle) * radius;
+            y = centerY + Math.sin(angle) * radius;
+          } else {
+            const kindIndex = layoutMode === 'kind'
+              ? orderedNodes.slice(0, index).filter((candidate) => candidate.kind === node.kind).length
+              : index;
+            const kindCount = layoutMode === 'kind'
+              ? orderedNodes.filter((candidate) => candidate.kind === node.kind).length
+              : visibleNodes.length;
+            const kindColumn = layoutMode === 'kind'
+              ? [...new Set(orderedNodes.map((candidate) => candidate.kind))].indexOf(node.kind)
+              : 0;
+            const kindColumns = layoutMode === 'kind'
+              ? Math.max(1, new Set(orderedNodes.map((candidate) => candidate.kind)).size)
+              : columns;
+            const localColumns = layoutMode === 'kind' ? Math.max(1, Math.ceil(Math.sqrt(kindCount))) : columns;
+            const localRows = layoutMode === 'kind' ? Math.max(1, Math.ceil(kindCount / localColumns)) : rows;
+            const column = layoutMode === 'kind' ? kindIndex % localColumns : index % columns;
+            const row = layoutMode === 'kind' ? Math.floor(kindIndex / localColumns) : Math.floor(index / columns);
+            x = layoutMode === 'kind'
+              ? ((kindColumn + 0.5) * canvasWidth) / kindColumns
+              : ((column + 1) * canvasWidth) / (columns + 1);
+            y = ((row + 1) * canvasHeight) / (localRows + 1);
+          }
+          node.x = node.fx = x;
+          node.y = node.fy = y;
+        });
+        ticked();
+      }
+
       function updateStatus() {
         if (anchorId && focusVisibleOnly) {
           subtitle.textContent = 'Focus on ' + (nodeById.get(anchorId)?.label ?? anchorId);
@@ -354,22 +520,23 @@
         const visibleEdgeIds = visibleSets.visibleEdgeIds;
         const activeAnchorVisible = Boolean(anchorId && visibleNodeIds.has(anchorId));
 
+        renderGraph(visibleNodeIds, visibleEdgeIds);
+        applyLayout(visibleNodeIds);
+
         nodes
-          .classed('is-hidden', (node) => !visibleNodeIds.has(node.id))
-          .classed('is-dimmed', (node) => !focusVisibleOnly && anchorId ? !visibleNodeIds.has(node.id) : false)
+          .classed('is-dimmed', () => false)
           .classed('is-selected', (node) => anchorId === node.id)
           .classed('is-highlighted', (node) => activeAnchorVisible && visibleNodeIds.has(node.id));
 
         links
-          .classed('is-hidden', (edge) => !visibleEdgeIds.has(edge.id))
-          .classed('is-dimmed', (edge) => !focusVisibleOnly && anchorId ? !visibleEdgeIds.has(edge.id) : false)
-          .classed('is-highlighted', (edge) => visibleEdgeIds.has(edge.id));
+          .classed('is-dimmed', () => false)
+          .classed('is-highlighted', () => true);
 
         updateStatus();
         updateInfo();
         updateZoomState();
         updateLegendState();
-        reframe();
+        reframe(visibleNodeIds);
       }
 
       function setAnchor(nodeId) {
@@ -392,7 +559,7 @@
         }
         const nextSize = canvasSize();
         svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
-        reframe();
+        reframe(getVisibleSets().visibleNodeIds);
       }
 
       function zoomAll() {
@@ -412,11 +579,11 @@
         applyState();
       }
 
-      function reframe() {
+      function reframe(visibleNodeIds = allNodeIds) {
         const selectedNode = anchorId ? nodesData.find((candidate) => candidate.id === anchorId) ?? null : null;
         const { width: canvasWidth, height: canvasHeight } = canvasSize();
 
-        if (focusMode === 'selected' && selectedNode) {
+        if (!focusVisibleOnly && focusMode === 'selected' && selectedNode) {
           const transform = d3.zoomIdentity
             .translate(canvasWidth / 2, canvasHeight / 2)
             .scale(focusScale / zoomFactor)
@@ -425,12 +592,13 @@
           return;
         }
 
-        if (nodesData.length === 0) {
+        const visibleNodes = nodesData.filter((node) => visibleNodeIds.has(node.id));
+        if (visibleNodes.length === 0) {
           svg.call(zoom.transform, d3.zoomIdentity);
           return;
         }
 
-        const bounds = nodesData.reduce((acc, current) => ({
+        const bounds = visibleNodes.reduce((acc, current) => ({
           minX: Math.min(acc.minX, current.x),
           maxX: Math.max(acc.maxX, current.x),
           minY: Math.min(acc.minY, current.y),
@@ -491,25 +659,27 @@
         nodes.attr('transform', (d) => 'translate(' + d.x + ',' + d.y + ')');
       }
 
-      nodes
-        .on('click', (event, node) => {
-          event.stopPropagation();
-          setAnchor(node.id);
-        })
-        .on('mouseenter', function(event, node) {
-          if (!tooltip) return;
-          tooltip.style.display = 'block';
-          tooltip.textContent = node.label + ' · ' + node.kind;
-        })
-        .on('mousemove', function(event) {
-          if (!tooltip) return;
-          tooltip.style.left = event.clientX + 14 + 'px';
-          tooltip.style.top = event.clientY + 14 + 'px';
-        })
-        .on('mouseleave', function() {
-          if (!tooltip) return;
-          tooltip.style.display = 'none';
-        });
+      function bindNodeInteractions() {
+        nodes
+          .on('click', (event, node) => {
+            event.stopPropagation();
+            setAnchor(node.id);
+          })
+          .on('mouseenter', function(event, node) {
+            if (!tooltip) return;
+            tooltip.style.display = 'block';
+            tooltip.textContent = node.label + ' · ' + node.kind;
+          })
+          .on('mousemove', function(event) {
+            if (!tooltip) return;
+            tooltip.style.left = event.clientX + 14 + 'px';
+            tooltip.style.top = event.clientY + 14 + 'px';
+          })
+          .on('mouseleave', function() {
+            if (!tooltip) return;
+            tooltip.style.display = 'none';
+          });
+      }
 
       svg.on('click', (event) => {
         if (event.target === svg.node()) {
@@ -519,6 +689,20 @@
         }
       });
 
+      displaySelect?.addEventListener('change', (event) => {
+        const value = event.target instanceof HTMLSelectElement ? event.target.value : 'shape';
+        if (value !== 'simple' && value !== 'shape' && value !== 'icon') return;
+        display = value;
+        updateDisplay();
+      });
+
+      layoutSelect?.addEventListener('change', (event) => {
+        const value = event.target instanceof HTMLSelectElement ? event.target.value : 'force';
+        if (value !== 'force' && value !== 'radial' && value !== 'grid' && value !== 'kind' && value !== 'treemap') return;
+        layoutMode = value;
+        applyState();
+      });
+
       searchInput.value = filterText;
       searchInput.addEventListener('input', (event) => {
         filterText = event.target.value;
@@ -560,7 +744,7 @@
         if (!graphPanel) return;
         const nextSize = canvasSize();
         svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
-        reframe();
+        reframe(getVisibleSets().visibleNodeIds);
       });
 
       simulation.on('tick', ticked);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/lscg",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Local source context graphs for repositories, exposed as a CLI and MCP server.",
   "type": "module",
   "bin": {