@psnext/lscg 0.1.3 → 0.1.4

package/dist/src/scanner/packagePlugin.js

@@ -2,8 +2,31 @@ import { builtinModules } from 'node:module';
 import { extractGraph, hashParts } from '../graph/extract.js';
 import { parseSource } from '../parser/treeSitter.js';
 import { BUILTIN_GRAPH_PLUGIN } from './plugins.js';
+// This plugin adds package-level relationships on top of the built-in source
+// graph. Built-in extraction already creates file/import/symbol nodes; this
+// plugin creates package nodes and connects them to the existing import nodes.
+//
+// The important identity rule for edges is:
+// - package nodes use this plugin's fact-key namespace (`package:<name>`), and
+// - built-in nodes are referenced by their final graph ID with
+//   `targetPlugin: BUILTIN_GRAPH_PLUGIN`.
+//
+// Keep that distinction in mind when repointing an edge to another existing
+// node. Do not use the package node's eventual database ID as its fact key.
 const DEPENDENCY_SECTIONS = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
 const BUILTINS = new Set(builtinModules.flatMap((name) => [name, name.replace(/^node:/, ''), `node:${name.replace(/^node:/, '')}`]));
+/**
+ * Converts an import specifier into its package root.
+ *
+ * Examples:
+ *   react                  -> react
+ *   lodash/map             -> lodash
+ *   @scope/library/tool    -> @scope/library
+ *   ./local-file           -> undefined
+ *   node:fs                -> undefined
+ *
+ * Returning the root is what lets several imports share one package node.
+ */
 function packageRoot(specifier) {
     if (!specifier || specifier.startsWith('.') || specifier.startsWith('/') || specifier.startsWith('#') || /^[a-z][a-z\d+.-]*:/i.test(specifier))
         return undefined;
@@ -55,6 +78,9 @@ export const PackagePlugin = {
                 declarations.set(name, list);
             }
         }
+        // Re-run the same extraction used by the built-in scanner. The resulting
+        // import IDs are stable graph node IDs, so they can be used directly as
+        // targets when targetPlugin is BUILTIN_GRAPH_PLUGIN.
         const imports = [];
         const repositoryId = hashParts(['repository', context.repoPath]);
         for (const file of context.files) {
@@ -77,6 +103,9 @@ export const PackagePlugin = {
                     imports.push({ path: file.path, id: node.id, module });
             }
         }
+        // A package is represented once even when it is imported by many files or
+        // through many subpaths. `implied` records imports that are not declared in
+        // any dependency section of package.json.
         const usedPackages = new Map();
         for (const entry of imports) {
             const root = packageRoot(entry.module);
@@ -87,6 +116,8 @@ export const PackagePlugin = {
         }
         const packageNames = new Set(usedPackages.keys());
         const nodes = [...packageNames].sort().map((name) => {
+            // This fact key is local to PackagePlugin. The scanner host later
+            // materializes it as hashParts(['plugin-node', 'package-plugin', factKey]).
             const packageDeclarations = declarations.get(name) ?? [];
             const implied = !declarations.has(name);
             const versions = new Set(packageDeclarations.map((declaration) => declaration.version));
@@ -109,6 +140,18 @@ export const PackagePlugin = {
             const name = packageRoot(entry.module);
             if (!name || !packageNames.has(name))
                 return [];
+            // The source is a node emitted by this plugin, so sourceFactKey uses
+            // PackagePlugin's namespace and can be resolved as `package:<name>`.
+            //
+            // The target is an existing node emitted by the built-in graph scanner.
+            // `entry.id` is that node's final graph ID, not a plugin fact key. The
+            // explicit built-in namespace tells the scanner host to use the ID
+            // directly instead of looking for a PackagePlugin node with that key.
+            //
+            // To repoint this edge to another existing built-in node, replace
+            // `targetFactKey` with that node's ID and keep
+            // `targetPlugin: BUILTIN_GRAPH_PLUGIN`. For a node from another plugin,
+            // use that plugin's name in targetPlugin and its factKey in targetFactKey.
             return [{
                     factKey: `provides:${name}:${entry.path}:${entry.id}`,
                     sourceFactKey: `package:${name}`,

package/dist/src/view/templates/icons/call.svg

@@ -1,11 +1,13 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="call_icon">
-        <circle cx="24" cy="24" r="21" fill="#ff6d2e" stroke="inherit" stroke-width="4"></circle>
-        <path d="M37 22.0001L34 25.0001L23 14.0001L26 11.0001C27.5 9.50002 33 7.00005 37 11.0001C41 15.0001 38.5 20.5 37 22.0001Z" fill="#b71111" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
-        <path d="M42 6L37 11" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
-        <path d="M11 25.9999L14 22.9999L25 33.9999L22 36.9999C20.5 38.5 15 41 11 36.9999C7 32.9999 9.5 27.5 11 25.9999Z" fill="#b71111" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
-        <path d="M23 32L27 28" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
-        <path d="M6 42L11 37" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
-        <path d="M16 25L20 21" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+<svg viewBox="0 0 48 48" fill="none" stroke="#3a3a3a" xmlns="http://www.w3.org/2000/svg">
+    <g id="call_icon" >
+        <circle cx="24" cy="24" r="21" fill="#fb7185" stroke="inherit" stroke-width="2"></circle>
+        <path d="M37 22.0001L34 25.0001L23 14.0001L26 11.0001C27.5 9.50002 33 7.00005 37 11.0001C41 15.0001 38.5 20.5 37 22.0001Z" 
+            fill="#fb7185" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M42 6L37 11" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M11 25.9999L14 22.9999L25 33.9999L22 36.9999C20.5 38.5 15 41 11 36.9999C7 32.9999 9.5 27.5 11 25.9999Z" 
+            fill="#fb7185" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M23 32L27 28" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M6 42L11 37" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M16 25L20 21" stroke="inherit" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
     </g>
 </svg>

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

@@ -193,20 +193,23 @@ html, body {
   font-weight: 200;
   paint-order: stroke;
   stroke: #020617;
-  stroke-width: 3px;
+  stroke-width: 2px;
   stroke-linejoin: round;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
 }
-.node.is-highlighted .node-shape,
 .node.is-selected .node-shape {
-  stroke: white;
-  stroke-width: 2.5;
-}
-.node.is-hidden,
-.edge.is-hidden {
-  display: none;
+  stroke: rgb(255, 255, 255);
+  stroke-width: 1;
+  filter: 
+    drop-shadow(0px 0px 12px #00a2ff)
+    drop-shadow(0px 0px 24px #00a2ff)
+    drop-shadow(0px 0px 36px #00a2ff);
+}
+.node.is-highlighted .node.is-selected .node-shape {
+  stroke: rgb(193, 193, 193);
+  stroke-width: 2;
 }
 .node.is-dimmed {
   opacity: 0.18;

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

@@ -38,6 +38,18 @@
             </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>
@@ -68,12 +80,14 @@
 
       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');
@@ -240,31 +254,52 @@
         .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', display === 'shape' && d.kind === 'file' ? 'middle' : 'hanging')
-          .attr('y', display === 'shape' && 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) {
@@ -273,7 +308,8 @@
           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);
+            .attr('y', display === 'shape' && d.kind === 'file' ? 0 : (d.height / 2) + 14)
+            .raise();
         });
       }
 
@@ -361,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);
@@ -416,16 +520,17 @@
         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();
@@ -554,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()) {
@@ -589,6 +696,13 @@
         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;

package/package.json

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