next-arch-map 0.1.0

package/viewer/src/Filters.tsx

@@ -0,0 +1,49 @@
+import type { EdgeKind, NodeType } from "./types";
+
+type FiltersProps = {
+  allNodeTypes: NodeType[];
+  allEdgeKinds: EdgeKind[];
+  visibleNodeTypes: Set<NodeType>;
+  visibleEdgeKinds: Set<EdgeKind>;
+  onToggleNodeType: (type: NodeType) => void;
+  onToggleEdgeKind: (kind: EdgeKind) => void;
+};
+
+export function Filters(props: FiltersProps) {
+  const {
+    allNodeTypes,
+    allEdgeKinds,
+    visibleNodeTypes,
+    visibleEdgeKinds,
+    onToggleNodeType,
+    onToggleEdgeKind,
+  } = props;
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 14, marginBottom: 8 }}>Node types</h2>
+      {allNodeTypes.map((type) => (
+        <label key={type} style={{ display: "block", fontSize: 13, marginBottom: 4 }}>
+          <input
+            type="checkbox"
+            checked={visibleNodeTypes.has(type)}
+            onChange={() => onToggleNodeType(type)}
+          />{" "}
+          {type}
+        </label>
+      ))}
+
+      <h2 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>Edge kinds</h2>
+      {allEdgeKinds.map((kind) => (
+        <label key={kind} style={{ display: "block", fontSize: 13, marginBottom: 4 }}>
+          <input
+            type="checkbox"
+            checked={visibleEdgeKinds.has(kind)}
+            onChange={() => onToggleEdgeKind(kind)}
+          />{" "}
+          {kind}
+        </label>
+      ))}
+    </div>
+  );
+}

package/viewer/src/GraphView.tsx

@@ -0,0 +1,200 @@
+import { useMemo } from "react";
+import {
+  Background,
+  Controls,
+  MarkerType,
+  MiniMap,
+  Position,
+  ReactFlow,
+  type Edge as FlowEdge,
+  type Node as FlowNode,
+  type NodeMouseHandler,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import type { DiffStatus, EdgeKind, Graph, NodeType } from "./types";
+
+type GraphViewProps = {
+  graph: Graph;
+  visibleNodeTypes: Set<NodeType>;
+  visibleEdgeKinds: Set<EdgeKind>;
+  selectedNodeId: string | null;
+  onSelectNode: (nodeId: string | null) => void;
+  nodeStatusById?: Map<string, DiffStatus>;
+  edgeStatusByKey?: Map<string, DiffStatus>;
+};
+
+const NODE_COLOR: Record<NodeType, string> = {
+  page: "#1d4ed8",
+  endpoint: "#047857",
+  db: "#b91c1c",
+  ui: "#b45309",
+  handler: "#0d9488",
+  action: "#facc15",
+};
+
+const EDGE_COLOR: Record<EdgeKind, string> = {
+  "page-endpoint": "#0891b2",
+  "endpoint-db": "#ea580c",
+  "page-ui": "#7c3aed",
+  "endpoint-handler": "#22c55e",
+  "page-action": "#facc15",
+  "action-endpoint": "#a855f7",
+};
+
+const DIFF_BORDER_COLOR: Record<DiffStatus, string> = {
+  added: "#22c55e",
+  removed: "#ef4444",
+  unchanged: "rgba(15, 23, 42, 0.18)",
+};
+
+const DIFF_EDGE_COLOR: Record<DiffStatus, string> = {
+  added: "#22c55e",
+  removed: "#ef4444",
+  unchanged: "#000000",
+};
+
+function buildEdgeKey(from: string, to: string, kind: EdgeKind): string {
+  return `${from}::${to}::${kind}`;
+}
+
+export function GraphView(props: GraphViewProps) {
+  const {
+    graph,
+    visibleNodeTypes,
+    visibleEdgeKinds,
+    selectedNodeId,
+    onSelectNode,
+    nodeStatusById,
+    edgeStatusByKey,
+  } = props;
+  const handleNodeClick: NodeMouseHandler = (_event, node) => onSelectNode(node.id);
+
+  const { flowNodes, flowEdges } = useMemo(() => {
+    const typeOrder: NodeType[] = ["page", "action", "endpoint", "handler", "db", "ui"];
+    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>(
+      typeOrder.map((type) => [type, []]),
+    );
+
+    for (const node of visibleNodes) {
+      nodesByType.get(node.type)?.push(node);
+    }
+
+    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);
+
+    const flowNodes: FlowNode[] = [];
+    const columnWidth = 280;
+    const rowHeight = 94;
+
+    activeTypeOrder.forEach((type, columnIndex) => {
+      const nodes = nodesByType.get(type) ?? [];
+      nodes.forEach((node, rowIndex) => {
+        const isSelected = node.id === selectedNodeId;
+        const status = nodeStatusById?.get(node.id) ?? "unchanged";
+        const borderColor = DIFF_BORDER_COLOR[status];
+        const borderStyle = status === "removed" ? "dashed" : "solid";
+
+        flowNodes.push({
+          id: node.id,
+          data: { label: node.label },
+          position: {
+            x: 80 + columnIndex * columnWidth,
+            y: 80 + rowIndex * rowHeight,
+          },
+          sourcePosition: Position.Right,
+          targetPosition: Position.Left,
+          selectable: true,
+          style: {
+            width: 190,
+            borderRadius: 10,
+            border: `${isSelected ? 3 : 2}px ${borderStyle} ${isSelected ? "#111827" : borderColor}`,
+            padding: 10,
+            background: NODE_COLOR[node.type],
+            color: node.type === "action" ? "#111827" : "#fff",
+            fontSize: 12,
+            fontWeight: 600,
+            opacity: status === "removed" ? 0.78 : 1,
+            boxShadow: isSelected
+              ? "0 0 0 4px rgba(15, 23, 42, 0.12)"
+              : status === "added"
+                ? "0 0 0 3px rgba(34, 197, 94, 0.16)"
+                : status === "removed"
+                  ? "0 0 0 3px rgba(239, 68, 68, 0.12)"
+              : "0 10px 30px rgba(15, 23, 42, 0.08)",
+          },
+        });
+      });
+    });
+
+    const flowEdges: FlowEdge[] = graph.edges
+      .filter(
+        (edge) =>
+          visibleEdgeKinds.has(edge.kind) &&
+          visibleNodeIds.has(edge.from) &&
+          visibleNodeIds.has(edge.to),
+      )
+      .map((edge, index) => {
+        const status = edgeStatusByKey?.get(buildEdgeKey(edge.from, edge.to, edge.kind)) ?? "unchanged";
+        const strokeColor = status === "unchanged" ? EDGE_COLOR[edge.kind] : DIFF_EDGE_COLOR[status];
+
+        return {
+          id: `${edge.from}=>${edge.to}::${edge.kind}::${index}`,
+          source: edge.from,
+          target: edge.to,
+          animated: false,
+          style: {
+            stroke: strokeColor,
+            strokeWidth: 1.75,
+            strokeDasharray: status === "removed" ? "6 4" : undefined,
+            opacity: status === "removed" ? 0.76 : 1,
+          },
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: strokeColor,
+          },
+        };
+      });
+
+    return { flowNodes, flowEdges };
+  }, [
+    edgeStatusByKey,
+    graph,
+    nodeStatusById,
+    selectedNodeId,
+    visibleEdgeKinds,
+    visibleNodeTypes,
+  ]);
+
+  return (
+    <div style={{ width: "100%", height: "100%" }}>
+      <ReactFlow
+        nodes={flowNodes}
+        edges={flowEdges}
+        fitView
+        fitViewOptions={{ padding: 0.18 }}
+        onNodeClick={handleNodeClick}
+        onPaneClick={() => onSelectNode(null)}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background gap={18} size={1} color="#e5e7eb" />
+        <MiniMap
+          pannable
+          zoomable
+          nodeColor={(node) => {
+            const type = graph.nodes.find((graphNode) => graphNode.id === node.id)?.type;
+            return type ? NODE_COLOR[type] : "#94a3b8";
+          }}
+        />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}

package/viewer/src/NodeDetails.tsx

@@ -0,0 +1,55 @@
+import type { Node } from "./types";
+
+type NodeDetailsProps = {
+  node: Node | null;
+};
+
+export function NodeDetails({ node }: NodeDetailsProps) {
+  if (!node) {
+    return (
+      <div style={{ marginTop: 16, fontSize: 12, color: "#6b7280" }}>
+        No node selected.
+      </div>
+    );
+  }
+
+  const filePath = node.meta?.filePath;
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <h2 style={{ fontSize: 14, marginBottom: 8 }}>Selected node</h2>
+      <div style={{ fontSize: 12, lineHeight: 1.5 }}>
+        <div>
+          <strong>id:</strong> {node.id}
+        </div>
+        <div>
+          <strong>type:</strong> {node.type}
+        </div>
+        <div>
+          <strong>label:</strong> {node.label}
+        </div>
+        {filePath !== undefined && filePath !== null && (
+          <div>
+            <strong>file:</strong> {String(filePath)}
+          </div>
+        )}
+        {node.meta && (
+          <pre
+            style={{
+              marginTop: 8,
+              padding: 8,
+              background: "#f7f7f7",
+              borderRadius: 4,
+              maxHeight: 160,
+              overflow: "auto",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+            }}
+          >
+            {JSON.stringify(node.meta, null, 2)}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/viewer/src/index.css

@@ -0,0 +1,32 @@
+:root {
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  color: #0f172a;
+  background: #f8fafc;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  min-width: 320px;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+pre {
+  margin: 0;
+}

package/viewer/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/viewer/src/types.ts

@@ -0,0 +1,51 @@
+export type NodeType =
+  | "page"
+  | "endpoint"
+  | "db"
+  | "ui"
+  | "handler"
+  | "action";
+
+export type Node = {
+  id: string;
+  type: NodeType;
+  label: string;
+  meta?: Record<string, unknown>;
+};
+
+export type EdgeKind =
+  | "page-endpoint"
+  | "endpoint-db"
+  | "page-ui"
+  | "endpoint-handler"
+  | "page-action"
+  | "action-endpoint";
+
+export type Edge = {
+  from: string;
+  to: string;
+  kind: EdgeKind;
+  meta?: Record<string, unknown>;
+};
+
+export type Graph = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export type DiffStatus = "added" | "removed" | "unchanged";
+
+export type NodeDiff = {
+  node: Node;
+  status: DiffStatus;
+};
+
+export type EdgeDiff = {
+  edge: Edge;
+  status: DiffStatus;
+};
+
+export type GraphDiff = {
+  nodes: NodeDiff[];
+  edges: EdgeDiff[];
+};

package/viewer/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/viewer/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/viewer/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/viewer/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});