next-arch-map 0.1.16 → 0.1.18

package/dist/cli.js

@@ -266,12 +266,10 @@ function logAnalyzeSummary(graph, outputFile, projectRoot) {
     const pageCount = graph.nodes.filter((node) => node.type === "page").length;
     const endpointCount = graph.nodes.filter((node) => node.type === "endpoint").length;
     const dbCount = graph.nodes.filter((node) => node.type === "db").length;
-    const uiCount = graph.nodes.filter((node) => node.type === "ui").length;
     console.log([
         `pages=${pageCount}`,
         `endpoints=${endpointCount}`,
         `db=${dbCount}`,
-        `ui=${uiCount}`,
         `edges=${graph.edges.length}`,
         `file=${path.relative(projectRoot, outputFile)}`,
     ].join(" "));

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export type AnalyzeProjectOptions = {
     httpClientIdentifiers?: string[];
     httpClientMethods?: string[];
     dbClientIdentifiers?: string[];
-    uiImportPathGlobs?: string[];
 };
 export declare function analyzeProject(options: AnalyzeProjectOptions): Promise<Graph>;
 export { diffGraphs } from "./diff.js";
@@ -15,6 +14,5 @@ export type { DiffStatus, EdgeDiff, GraphDiff, NodeDiff } from "./diff.js";
 export type { Edge, EdgeKind, Graph, Node, NodeType } from "./model.js";
 export { analyzePagesToEndpoints } from "./analyzers/pagesToEndpoints.js";
 export { analyzeEndpointsToDb } from "./analyzers/endpointsToDb.js";
-export { analyzePagesToUi } from "./analyzers/pagesToUi.js";
 export { mergeGraphs, mergePartial } from "./merge.js";
 export { getDbModelsForPage, getEndpointsForPage, getPagesForDbModel } from "./query.js";

package/dist/index.js

@@ -1,6 +1,5 @@
 import { analyzeEndpointsToDb } from "./analyzers/endpointsToDb.js";
 import { analyzePagesToEndpoints } from "./analyzers/pagesToEndpoints.js";
-import { analyzePagesToUi } from "./analyzers/pagesToUi.js";
 import { mergePartial } from "./merge.js";
 export async function analyzeProject(options) {
     const pagesToEndpoints = await analyzePagesToEndpoints({
@@ -15,16 +14,10 @@ export async function analyzeProject(options) {
         apiDirs: options.apiDirs,
         dbClientIdentifiers: options.dbClientIdentifiers,
     });
-    const pagesToUi = await analyzePagesToUi({
-        projectRoot: options.projectRoot,
-        appDirs: options.appDirs,
-        uiImportPathGlobs: options.uiImportPathGlobs,
-    });
-    return mergePartial(mergePartial(pagesToEndpoints, endpointsToDb), pagesToUi);
+    return mergePartial(pagesToEndpoints, endpointsToDb);
 }
 export { diffGraphs } from "./diff.js";
 export { analyzePagesToEndpoints } from "./analyzers/pagesToEndpoints.js";
 export { analyzeEndpointsToDb } from "./analyzers/endpointsToDb.js";
-export { analyzePagesToUi } from "./analyzers/pagesToUi.js";
 export { mergeGraphs, mergePartial } from "./merge.js";
 export { getDbModelsForPage, getEndpointsForPage, getPagesForDbModel } from "./query.js";

package/dist/model.d.ts

@@ -1,11 +1,11 @@
-export type NodeType = "page" | "endpoint" | "db" | "ui" | "handler" | "action";
+export type NodeType = "page" | "endpoint" | "db" | "handler" | "action";
 export type Node = {
     id: string;
     type: NodeType;
     label: string;
     meta?: Record<string, any>;
 };
-export type EdgeKind = "page-endpoint" | "endpoint-db" | "page-ui" | "endpoint-handler" | "page-action" | "action-endpoint";
+export type EdgeKind = "page-endpoint" | "endpoint-db" | "endpoint-handler" | "page-action" | "action-endpoint";
 export type Edge = {
     from: string;
     to: string;

package/dist/serve.js

@@ -29,7 +29,6 @@ export async function serve(options) {
             const handlerCount = currentGraph.nodes.filter((node) => node.type === "handler").length;
             const actionCount = currentGraph.nodes.filter((node) => node.type === "action").length;
             const dbCount = currentGraph.nodes.filter((node) => node.type === "db").length;
-            const uiCount = currentGraph.nodes.filter((node) => node.type === "ui").length;
             console.log([
                 "mode=serve",
                 `pages=${pageCount}`,
@@ -37,7 +36,6 @@ export async function serve(options) {
                 `endpoints=${endpointCount}`,
                 `handlers=${handlerCount}`,
                 `db=${dbCount}`,
-                `ui=${uiCount}`,
                 `nodes=${currentGraph.nodes.length}`,
                 `edges=${currentGraph.edges.length}`,
             ].join(" "));

package/dist/utils.d.ts

@@ -71,12 +71,3 @@ export declare function buildDbNode(modelName: string, filePath: string): {
         model: string;
     };
 };
-export declare function buildUiNode(componentName: string, filePath: string): {
-    id: string;
-    type: "ui";
-    label: string;
-    meta: {
-        filePath: string;
-        component: string;
-    };
-};

package/dist/utils.js

@@ -292,14 +292,3 @@ export function buildDbNode(modelName, filePath) {
         },
     };
 }
-export function buildUiNode(componentName, filePath) {
-    return {
-        id: `ui:${componentName}`,
-        type: "ui",
-        label: componentName,
-        meta: {
-            filePath,
-            component: componentName,
-        },
-    };
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-arch-map",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Static analyzer that builds a multi-layer architecture graph for Next.js-style apps.",
   "type": "module",
   "bin": {
@@ -23,7 +23,7 @@
     "examples"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && chmod +x dist/cli.js",
     "check": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
     "lint": "eslint src/ tests/",

package/viewer/src/App.tsx

@@ -11,12 +11,10 @@ const ALL_NODE_TYPES: NodeType[] = [
   "handler",
   "action",
   "db",
-  "ui",
 ];
 const ALL_EDGE_KINDS: EdgeKind[] = [
   "page-endpoint",
   "endpoint-db",
-  "page-ui",
   "endpoint-handler",
   "page-action",
   "action-endpoint",
@@ -38,7 +36,6 @@ const DATA_FLOW_EDGE_KINDS: EdgeKind[] = [
 const FULL_FLOW_EDGE_KINDS: EdgeKind[] = [
   "page-endpoint",
   "endpoint-db",
-  "page-ui",
   "endpoint-handler",
   "page-action",
   "action-endpoint",
@@ -62,7 +59,6 @@ const FULL_FLOW_NODE_TYPES: NodeType[] = [
   "endpoint",
   "handler",
   "db",
-  "ui",
 ];
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -388,6 +384,15 @@ export function App() {
               </Switch.Root>
             </div>
             {useServer && (
+              <button
+                type="button"
+                onClick={() => setShowAdvanced((prev) => !prev)}
+                className="text-[11px] text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
+              >
+                {showAdvanced ? "Hide" : "Advanced"}
+              </button>
+            )}
+            {useServer && showAdvanced && (
               <input
                 type="text"
                 value={serverUrl}
@@ -584,7 +589,6 @@ function buildFocusedSubgraph(graph: Graph, route: string): Graph {
     "page-endpoint",
     "endpoint-handler",
     "endpoint-db",
-    "page-ui",
   ]);
   const reachableNodeIds = new Set<string>([pageId]);
   const worklist = [pageId];

package/viewer/src/Filters.tsx

@@ -16,7 +16,6 @@ const NODE_TYPE_COLORS: Record<NodeType, string> = {
   handler: "bg-teal-500",
   action: "bg-amber-400",
   db: "bg-red-600",
-  ui: "bg-orange-500",
 };
 
 export function Filters(props: FiltersProps) {

package/viewer/src/GraphView.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   Background,
   Controls,
@@ -27,7 +27,6 @@ const NODE_COLOR: Record<NodeType, string> = {
   page: "#3b82f6",
   endpoint: "#059669",
   db: "#dc2626",
-  ui: "#f97316",
   handler: "#14b8a6",
   action: "#fbbf24",
 };
@@ -36,7 +35,6 @@ const NODE_BORDER: Record<NodeType, string> = {
   page: "#2563eb",
   endpoint: "#047857",
   db: "#b91c1c",
-  ui: "#ea580c",
   handler: "#0d9488",
   action: "#f59e0b",
 };
@@ -44,7 +42,6 @@ const NODE_BORDER: Record<NodeType, string> = {
 const EDGE_COLOR: Record<EdgeKind, string> = {
   "page-endpoint": "#06b6d4",
   "endpoint-db": "#f97316",
-  "page-ui": "#8b5cf6",
   "endpoint-handler": "#22c55e",
   "page-action": "#eab308",
   "action-endpoint": "#a855f7",
@@ -68,6 +65,88 @@ function buildEdgeKey(from: string, to: string, kind: EdgeKind): string {
   return `${from}::${to}::${kind}`;
 }
 
+/**
+ * Reorder nodes within each column so that connected nodes are placed
+ * close together vertically, minimizing long diagonal edge crossings.
+ * Uses an iterative barycenter heuristic.
+ */
+function optimizeNodeOrder(
+  nodesByType: Map<NodeType, Graph["nodes"]>,
+  activeTypeOrder: NodeType[],
+  edges: Graph["edges"],
+  visibleNodeIds: Set<string>,
+  visibleEdgeKinds: Set<EdgeKind>,
+): Map<NodeType, Graph["nodes"]> {
+  // Build adjacency map: nodeId -> list of connected nodeIds
+  const adjacency = new Map<string, string[]>();
+  for (const nodeId of visibleNodeIds) {
+    adjacency.set(nodeId, []);
+  }
+  for (const edge of edges) {
+    if (
+      !visibleEdgeKinds.has(edge.kind) ||
+      !visibleNodeIds.has(edge.from) ||
+      !visibleNodeIds.has(edge.to)
+    )
+      continue;
+    adjacency.get(edge.from)?.push(edge.to);
+    adjacency.get(edge.to)?.push(edge.from);
+  }
+
+  // Track each node's row index within its column
+  const nodeRowIndex = new Map<string, number>();
+  for (const type of activeTypeOrder) {
+    const nodes = nodesByType.get(type) ?? [];
+    nodes.forEach((node, i) => nodeRowIndex.set(node.id, i));
+  }
+
+  // Iterative barycenter: forward pass then reverse pass, repeated
+  const ITERATIONS = 3;
+  for (let iter = 0; iter < ITERATIONS; iter++) {
+    // Forward pass (left to right)
+    for (let col = 1; col < activeTypeOrder.length; col++) {
+      reorderColumn(activeTypeOrder[col], nodesByType, adjacency, nodeRowIndex);
+    }
+    // Reverse pass (right to left)
+    for (let col = activeTypeOrder.length - 2; col >= 0; col--) {
+      reorderColumn(activeTypeOrder[col], nodesByType, adjacency, nodeRowIndex);
+    }
+  }
+
+  return nodesByType;
+}
+
+function reorderColumn(
+  type: NodeType,
+  nodesByType: Map<NodeType, Graph["nodes"]>,
+  adjacency: Map<string, string[]>,
+  nodeRowIndex: Map<string, number>,
+): void {
+  const nodes = nodesByType.get(type);
+  if (!nodes || nodes.length <= 1) return;
+
+  // Compute barycenter for each node (average row of connected nodes)
+  const barycenters = new Map<string, number>();
+  for (const node of nodes) {
+    const neighbors = adjacency.get(node.id) ?? [];
+    const neighborRows = neighbors
+      .map((nid) => nodeRowIndex.get(nid))
+      .filter((r): r is number => r !== undefined);
+    if (neighborRows.length > 0) {
+      const avg = neighborRows.reduce((s, r) => s + r, 0) / neighborRows.length;
+      barycenters.set(node.id, avg);
+    } else {
+      // No connections: keep current position as a tiebreaker
+      barycenters.set(node.id, nodeRowIndex.get(node.id) ?? 0);
+    }
+  }
+
+  nodes.sort((a, b) => (barycenters.get(a.id) ?? 0) - (barycenters.get(b.id) ?? 0));
+
+  // Update row indices after reorder
+  nodes.forEach((node, i) => nodeRowIndex.set(node.id, i));
+}
+
 export function GraphView(props: GraphViewProps) {
   const {
     graph,
@@ -78,10 +157,34 @@ export function GraphView(props: GraphViewProps) {
     nodeStatusById,
     edgeStatusByKey,
   } = props;
+
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+
   const handleNodeClick: NodeMouseHandler = (_event, node) => onSelectNode(node.id);
+  const handleNodeMouseEnter: NodeMouseHandler = useCallback((_event, node) => {
+    setHoveredNodeId(node.id);
+  }, []);
+  const handleNodeMouseLeave: NodeMouseHandler = useCallback(() => {
+    setHoveredNodeId(null);
+  }, []);
+
+  // Build set of edge-connected node IDs for the active (hovered or selected) node
+  const activeNodeId = hoveredNodeId ?? selectedNodeId;
+  const connectedEdgeIds = useMemo(() => {
+    if (!activeNodeId) return null;
+    const ids = new Set<string>();
+    ids.add(activeNodeId);
+    for (const edge of graph.edges) {
+      if (edge.from === activeNodeId || edge.to === activeNodeId) {
+        ids.add(edge.from);
+        ids.add(edge.to);
+      }
+    }
+    return ids;
+  }, [activeNodeId, graph.edges]);
 
   const { flowNodes, flowEdges } = useMemo(() => {
-    const typeOrder: NodeType[] = ["page", "action", "endpoint", "handler", "db", "ui"];
+    const typeOrder: NodeType[] = ["page", "action", "endpoint", "handler", "db"];
     const visibleNodes = graph.nodes.filter((node) => visibleNodeTypes.has(node.type));
     const visibleNodeIds = new Set(visibleNodes.map((node) => node.id));
     const nodesByType = new Map<NodeType, typeof visibleNodes>(
@@ -92,12 +195,16 @@ export function GraphView(props: GraphViewProps) {
       nodesByType.get(node.type)?.push(node);
     }
 
+    // Initial alphabetical sort as seed for the barycenter algorithm
     for (const nodes of nodesByType.values()) {
       nodes.sort((left, right) => left.label.localeCompare(right.label));
     }
 
     const activeTypeOrder = typeOrder.filter((type) => (nodesByType.get(type)?.length ?? 0) > 0);
 
+    // Optimize node ordering to minimize edge crossings
+    optimizeNodeOrder(nodesByType, activeTypeOrder, graph.edges, visibleNodeIds, visibleEdgeKinds);
+
     const flowNodes: FlowNode[] = [];
     const columnWidth = 300;
     const rowHeight = 80;
@@ -156,6 +263,12 @@ export function GraphView(props: GraphViewProps) {
         const status = edgeStatusByKey?.get(buildEdgeKey(edge.from, edge.to, edge.kind)) ?? "unchanged";
         const strokeColor = status === "unchanged" ? EDGE_COLOR[edge.kind] : DIFF_EDGE_COLOR[status];
 
+        // Determine if this edge is highlighted (connected to active node)
+        const isHighlighted =
+          activeNodeId !== null &&
+          (edge.from === activeNodeId || edge.to === activeNodeId);
+        const isDimmed = activeNodeId !== null && !isHighlighted;
+
         return {
           id: `${edge.from}=>${edge.to}::${edge.kind}::${index}`,
           source: edge.from,
@@ -163,10 +276,12 @@ export function GraphView(props: GraphViewProps) {
           animated: false,
           style: {
             stroke: strokeColor,
-            strokeWidth: 1.5,
+            strokeWidth: isHighlighted ? 2.5 : 1.5,
             strokeDasharray: status === "removed" ? "6 4" : undefined,
-            opacity: status === "removed" ? 0.6 : 0.85,
+            opacity: isDimmed ? 0.08 : status === "removed" ? 0.6 : 0.85,
+            transition: "opacity 0.15s ease, stroke-width 0.15s ease",
           },
+          zIndex: isHighlighted ? 10 : 0,
           markerEnd: {
             type: MarkerType.ArrowClosed,
             color: strokeColor,
@@ -176,6 +291,7 @@ export function GraphView(props: GraphViewProps) {
 
     return { flowNodes, flowEdges };
   }, [
+    activeNodeId,
     edgeStatusByKey,
     graph,
     nodeStatusById,
@@ -192,6 +308,8 @@ export function GraphView(props: GraphViewProps) {
         fitView
         fitViewOptions={{ padding: 0.18 }}
         onNodeClick={handleNodeClick}
+        onNodeMouseEnter={handleNodeMouseEnter}
+        onNodeMouseLeave={handleNodeMouseLeave}
         onPaneClick={() => onSelectNode(null)}
         nodesDraggable={false}
         nodesConnectable={false}

package/viewer/src/types.ts

@@ -2,7 +2,6 @@ export type NodeType =
   | "page"
   | "endpoint"
   | "db"
-  | "ui"
   | "handler"
   | "action";
 
@@ -16,7 +15,6 @@ export type Node = {
 export type EdgeKind =
   | "page-endpoint"
   | "endpoint-db"
-  | "page-ui"
   | "endpoint-handler"
   | "page-action"
   | "action-endpoint";

package/dist/analyzers/pagesToUi.d.ts

@@ -1,11 +0,0 @@
-import type { Edge, Node } from "../model.js";
-type AnalyzePagesToUiOptions = {
-    projectRoot: string;
-    appDirs?: string[];
-    uiImportPathGlobs?: string[];
-};
-export declare function analyzePagesToUi(options: AnalyzePagesToUiOptions): Promise<{
-    nodes: Node[];
-    edges: Edge[];
-}>;
-export {};

package/dist/analyzers/pagesToUi.js

@@ -1,124 +0,0 @@
-import path from "node:path";
-import ts from "typescript";
-import { buildEdgeKey, buildPageNode, buildUiNode, ensureNode, getExistingDirectories, getPageRouteFromFile, getSourceFile, isPageFile, resolveLocalModulePath, resolveProjectRoot, walkDirectory, } from "../utils.js";
-const DEFAULT_APP_DIRS = ["app", "src/app"];
-const DEFAULT_UI_IMPORT_PATH_GLOBS = [
-    "src/components/**",
-    "src/features/**/components/**",
-    "src/app/**/components/**",
-    "app/**/components/**",
-];
-export async function analyzePagesToUi(options) {
-    const projectRoot = resolveProjectRoot(options.projectRoot);
-    const appDirs = getExistingDirectories(projectRoot, options.appDirs ?? DEFAULT_APP_DIRS);
-    if (appDirs.length === 0) {
-        throw new Error("Could not find an app/ or src/app/ directory.");
-    }
-    const uiPathMatchers = (options.uiImportPathGlobs ?? DEFAULT_UI_IMPORT_PATH_GLOBS).map(globToRegExp);
-    const nodes = [];
-    const edges = [];
-    const nodeIds = new Set();
-    const edgeKeys = new Set();
-    for (const appDir of appDirs) {
-        for (const filePath of walkDirectory(appDir)) {
-            if (!isPageFile(filePath)) {
-                continue;
-            }
-            try {
-                const route = getPageRouteFromFile(appDir, filePath);
-                const pageNode = ensureNode(nodes, nodeIds, buildPageNode(route, filePath));
-                const components = collectUiComponentUsages(filePath, projectRoot, uiPathMatchers);
-                for (const component of components) {
-                    const uiNode = ensureNode(nodes, nodeIds, buildUiNode(component.componentName, component.filePath));
-                    const edgeKey = buildEdgeKey(pageNode.id, uiNode.id, "page-ui");
-                    if (edgeKeys.has(edgeKey)) {
-                        continue;
-                    }
-                    edgeKeys.add(edgeKey);
-                    edges.push({
-                        from: pageNode.id,
-                        to: uiNode.id,
-                        kind: "page-ui",
-                    });
-                }
-            }
-            catch (error) {
-                const relative = path.relative(projectRoot, filePath);
-                console.warn(`Warning: skipping ${relative}: ${error instanceof Error ? error.message : error}`);
-            }
-        }
-    }
-    return {
-        nodes: nodes.sort((left, right) => left.id.localeCompare(right.id)),
-        edges: edges.sort((left, right) => left.kind.localeCompare(right.kind) ||
-            left.from.localeCompare(right.from) ||
-            left.to.localeCompare(right.to)),
-    };
-}
-function collectUiComponentUsages(pageFilePath, projectRoot, uiPathMatchers) {
-    const sourceFile = getSourceFile(pageFilePath);
-    if (!sourceFile) {
-        return [];
-    }
-    const componentFilePaths = new Map();
-    for (const statement of sourceFile.statements) {
-        if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) {
-            continue;
-        }
-        const importSource = statement.moduleSpecifier.text;
-        const resolvedImportPath = resolveLocalModulePath(pageFilePath, importSource, projectRoot);
-        if (!isUiLikeImport(importSource, resolvedImportPath, projectRoot, uiPathMatchers)) {
-            continue;
-        }
-        const importClause = statement.importClause;
-        if (!importClause || importClause.isTypeOnly) {
-            continue;
-        }
-        const componentFilePath = resolvedImportPath ?? pageFilePath;
-        if (importClause.name && isUiComponentName(importClause.name.text)) {
-            componentFilePaths.set(importClause.name.text, componentFilePath);
-        }
-        if (importClause.namedBindings && ts.isNamedImports(importClause.namedBindings)) {
-            for (const element of importClause.namedBindings.elements) {
-                if (!element.isTypeOnly && isUiComponentName(element.name.text)) {
-                    componentFilePaths.set(element.name.text, componentFilePath);
-                }
-            }
-        }
-    }
-    return [...componentFilePaths.entries()]
-        .sort(([left], [right]) => left.localeCompare(right))
-        .map(([componentName, filePath]) => ({ componentName, filePath }));
-}
-function isUiLikeImport(importSource, resolvedImportPath, projectRoot, uiPathMatchers) {
-    if (/^\.\.?\/components(\/|$)/.test(importSource) || importSource.startsWith("@/components/")) {
-        return true;
-    }
-    if (!resolvedImportPath) {
-        return false;
-    }
-    const relativePath = path.relative(projectRoot, resolvedImportPath).replace(/\\/g, "/");
-    return uiPathMatchers.some((matcher) => matcher.test(relativePath));
-}
-function isUiComponentName(identifierName) {
-    return /^[A-Z]/.test(identifierName);
-}
-function globToRegExp(glob) {
-    let pattern = "^";
-    for (let index = 0; index < glob.length; index += 1) {
-        const character = glob[index];
-        const nextCharacter = glob[index + 1];
-        if (character === "*" && nextCharacter === "*") {
-            pattern += ".*";
-            index += 1;
-            continue;
-        }
-        if (character === "*") {
-            pattern += "[^/]*";
-            continue;
-        }
-        pattern += /[.+^${}()|[\]\\]/.test(character) ? `\\${character}` : character;
-    }
-    pattern += "$";
-    return new RegExp(pattern);
-}