@principal-ai/principal-view-react 0.16.33 → 0.16.35

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -32,40 +32,21 @@ import {
   applyNodeChanges,
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { X } from 'lucide-react';
+import { Map as MapIcon } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import {
   buildSubsystemGraph,
-  KIND_COLOR,
   MECHANISM_COLOR,
-  deriveNameFromSymbol,
   type SubsystemComponentEdge,
   type SubsystemComponent,
   type SubsystemEdgeMechanism,
 } from './model';
-import type { GraphifyComponentDetail } from '../graphify';
 import { SubsystemComponentNode, SubsystemEdge, SUBSYSTEM_CALLBACKS } from './nodes';
 import { SubsystemFileTree } from './SubsystemFileTree';
 import { GraphLayoutCover } from './GraphLayoutCover';
-
-const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
-  ['imports', 'import statement (code-level dependency)', true],
-  ['imports_from', 'imported by (reverse dependency)', true],
-  ['re_exports', 're-exports symbols from', true],
-  ['defines', 'defines / declares symbol', true],
-  ['calls', 'function/method call (call graph edge)', true],
-  ['extends', 'class inheritance', true],
-  ['inherits', 'class inheritance', true],
-  ['implements', 'implements interface / protocol', true],
-  ['mixes_in', 'applies mixin', true],
-  ['uses', 'general dependency (import, call, or reference)', false],
-  ['method', 'structural: has method / member', true],
-  ['references', 'type / symbol reference (not a call)', true],
-  ['contains', 'structural: contains / encapsulates', true],
-  ['feeds', 'data flow: output feeds into input', false],
-  ['produces', 'data flow: produces / outputs', false],
-  ['registers-into', 'registration pattern', false],
-];
+import { ComponentDetail } from './ComponentDetail';
+import { FileDrawer } from './FileDrawer';
+import { EdgeLegendModal, MECHANISM_DESCRIPTIONS } from './EdgeLegendModal';
 
 export interface SubsystemComponentGraphProps {
   components: SubsystemComponent[];
@@ -132,6 +113,10 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   const [selected, setSelected] = useState<SubsystemComponent | null>(null);
   // File currently shown in the bottom drawer (repo-root-relative path).
   const [openFile, setOpenFile] = useState<string | null>(null);
+  // Edge-legend modal visibility (opened from the canvas's top-left button).
+  const [legendOpen, setLegendOpen] = useState(false);
+  // Component the pointer is over (null on leave) → transient tree highlight.
+  const [hoveredComponentId, setHoveredComponentId] = useState<string | null>(null);
   // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
   // closure over the effect deps) can toggle without a stale value.
   const selectedRef = useRef<SubsystemComponent | null>(null);
@@ -226,10 +211,12 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     };
     SUBSYSTEM_CALLBACKS.onEdgeSelect = selectEdge;
     SUBSYSTEM_CALLBACKS.maxNodeWidth = maxNodeWidth;
+    SUBSYSTEM_CALLBACKS.onHover = setHoveredComponentId;
     return () => {
       SUBSYSTEM_CALLBACKS.onSelect = undefined;
       SUBSYSTEM_CALLBACKS.onEdgeSelect = undefined;
       SUBSYSTEM_CALLBACKS.maxNodeWidth = undefined;
+      SUBSYSTEM_CALLBACKS.onHover = undefined;
     };
   }, [components, onSelect, maxNodeWidth, selectEdge]);
 
@@ -393,14 +380,18 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     return new Set(edgeLabels.map((l) => l.mechanism));
   }, [edgeLabels]);
 
-  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-
   // Unique source files across components → sidebar file tree.
   const files = useMemo(
     () => Array.from(new Set(components.map((c) => c.file).filter(Boolean))).sort(),
     [components],
   );
 
+  // The hovered node's file (null when not hovering / file-less component).
+  const hoveredFile = useMemo(() => {
+    if (!hoveredComponentId) return null;
+    return components.find((c) => c.id === hoveredComponentId)?.file ?? null;
+  }, [components, hoveredComponentId]);
+
   // Drawer content renderer: prefer the path-keyed viewer; fall back to the
   // legacy component-keyed one via a file → first-component lookup.
   const fileViewer = useMemo(() => {
@@ -419,8 +410,8 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
 
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      {/* Sidebar: scrollable title/description/legend on top, file tree pinned to the bottom half */}
-      {(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription || files.length > 0) && (
+      {/* Sidebar: scrollable title/description on top, file tree pinned to the bottom half */}
+      {(title || description || sidebarExtra || sidebarAfterDescription || files.length > 0) && (
         <div
           style={{
             width: 340,
@@ -473,34 +464,12 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
             </div>
           )}
           {sidebarAfterDescription}
-          {usedMechanisms.size > 0 && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-              <span style={{ fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, textTransform: 'uppercase', color: muted, fontWeight: 600 }}>
-                Edge Legend
-              </span>
-              {MECHANISM_DESCRIPTIONS.filter(([m]) => usedMechanisms.has(m)).map(([mechanism, desc, verifiable]) => (
-                <div key={mechanism} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: theme.fontSizes[0] }}>
-                  <span
-                    style={{
-                      width: 8,
-                      height: 8,
-                      borderRadius: verifiable ? '50%' : '30% 70% 70% 30% / 30% 30% 70% 70%',
-                      background: MECHANISM_COLOR[mechanism],
-                      border: verifiable ? 'none' : `1px dashed ${MECHANISM_COLOR[mechanism]}`,
-                      flexShrink: 0,
-                    }}
-                  />
-                  <span style={{ fontFamily: theme.fonts.monospace, color: MECHANISM_COLOR[mechanism], fontWeight: 500 }}>{mechanism}</span>
-                  <span style={{ color: muted }}>{desc}</span>
-                </div>
-              ))}
-            </div>
-          )}
           </div>
           {files.length > 0 && (
             <SubsystemFileTree
               files={files}
               selectedFile={selected?.file ?? openFile}
+              hoveredFile={hoveredFile}
               onSelectFile={onTreeSelectFile}
             />
           )}
@@ -594,287 +563,51 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
         <Controls showZoom showFitView showInteractive />
       </ReactFlow>
-      {selected && <ComponentDetail component={selected} />}
-      <FileDrawer file={openFile} onClose={() => setOpenFile(null)}>
-        {fileViewer && openFile ? fileViewer(openFile) : null}
-      </FileDrawer>
-      {/* Startup cover — hides measurement, layout swap, and camera settle. */}
-      <GraphLayoutCover revealed={layoutReady} />
-      {canvasOverlay}
-      </div>
-    </div>
-  );
-}
-
-/** Detail panel for the selected component — the verifiable identity + sources
- *  moved off the canvas so nodes stay minimal. File content lives in the
- *  bottom FileDrawer, not here. */
-function ComponentDetail({ component }: { component: SubsystemComponent }) {
-  const { theme } = useTheme();
-  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-  const color = KIND_COLOR[component.kind] ?? '#888';
-  const displayName = deriveNameFromSymbol(component.symbol, component.kind, component.name, component.file);
-  const rows: Array<[string, string]> = [];
-  if (component.symbol) rows.push(['Symbol', component.symbol]);
-  if (component.file) rows.push(['File', component.file]);
-  if (component.purpose) rows.push(['Purpose', component.purpose]);
-  rows.push(['PURL', component.purl]);
-
-  return (
-    <div
-      style={{
-        borderTop: `1px solid ${theme.colors.border}`,
-        background: theme.colors.background,
-        padding: '10px 12px',
-        fontFamily: theme.fonts.body,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          fontSize: theme.fontSizes[1],
-          fontWeight: 600,
-          marginBottom: 6,
-        }}
-      >
-        <span style={{ color }}>{displayName}</span>
-        <span
-          style={{
-            fontSize: theme.fontSizes[0] * 0.8,
-            fontFamily: theme.fonts.monospace,
-            textTransform: 'uppercase',
-            color,
-          }}
-        >
-          {component.kind}
-        </span>
-      </div>
-      {rows.map(([k, v]) => (
-        <div
-          key={k}
-          style={{ display: 'flex', gap: 8, fontSize: theme.fontSizes[0], lineHeight: 1.5 }}
-        >
-          <span
-            style={{
-              width: 64,
-              flexShrink: 0,
-              color: muted,
-              fontFamily: theme.fonts.monospace,
-              textTransform: 'uppercase',
-              fontSize: theme.fontSizes[0] * 0.8,
-            }}
-          >
-            {k}
-          </span>
-          <span style={{ color: theme.colors.text, fontFamily: theme.fonts.monospace }}>
-            {v}
-          </span>
-        </div>
-      ))}
-      {component.detail && <GraphifyDetailSections detail={component.detail} />}
-    </div>
-  );
-}
-
-/** Bottom panel that slides up from the bottom of the graph area to show a
- *  file's contents — opened by node clicks and sidebar file-tree clicks
- *  alike. Sits in normal flow (canvas shrinks while open, nothing covered)
- *  and animates via height; stays mounted so open/close animates. */
-function FileDrawer({
-  file,
-  onClose,
-  children,
-}: {
-  file: string | null;
-  onClose: () => void;
-  children?: ReactNode;
-}) {
-  const { theme } = useTheme();
-  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-  const open = file !== null;
-
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [open, onClose]);
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        // Above the absolute edge-label overlay (zIndex 5), which spans the
-        // whole graph-area container including this panel's slice.
-        zIndex: 6,
-        flexShrink: 0,
-        height: open ? '45%' : 0,
-        minHeight: 0,
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        background: theme.colors.background,
-        borderTop: open ? `1px solid ${theme.colors.border}` : 'none',
-        transition: 'height 200ms ease',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '6px 10px',
-          borderBottom: `1px solid ${theme.colors.border}`,
-          flexShrink: 0,
-        }}
-      >
-        <span
-          title={file ?? undefined}
-          style={{
-            flex: 1,
-            minWidth: 0,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            fontFamily: theme.fonts.monospace,
-            fontSize: theme.fontSizes[0],
-            color: muted,
-          }}
-        >
-          {file}
-        </span>
+      {/* Legend button — top-left overlay on the canvas; opens the modal. */}
+      {usedMechanisms.size > 0 && (
         <button
           type="button"
-          onClick={onClose}
-          aria-label="Close file"
+          onClick={() => setLegendOpen(true)}
           style={{
+            position: 'absolute',
+            top: 10,
+            left: 10,
+            zIndex: 7,
             display: 'inline-flex',
             alignItems: 'center',
-            justifyContent: 'center',
-            width: 22,
-            height: 22,
-            padding: 0,
-            border: 'none',
-            borderRadius: 4,
-            background: 'transparent',
+            gap: 6,
+            padding: '4px 10px',
+            fontSize: theme.fontSizes[0],
+            fontFamily: theme.fonts.body,
             color: theme.colors.text,
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 6,
             cursor: 'pointer',
+            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
           }}
         >
-          <X size={14} />
+          <MapIcon size={13} />
+          Legend
         </button>
+      )}
+      <EdgeLegendModal
+        open={legendOpen}
+        mechanisms={usedMechanisms}
+        onClose={() => setLegendOpen(false)}
+      />
+      {selected && <ComponentDetail component={selected} />}
+      <FileDrawer file={openFile} onClose={() => setOpenFile(null)}>
+        {fileViewer && openFile ? fileViewer(openFile) : null}
+      </FileDrawer>
+      {/* Startup cover — hides measurement, layout swap, and camera settle. */}
+      <GraphLayoutCover revealed={layoutReady} />
+      {canvasOverlay}
       </div>
-      <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{children}</div>
     </div>
   );
 }
 
-/** Renders the graphify drill-down payload for a component. */
-function GraphifyDetailSections({ detail }: { detail: GraphifyComponentDetail }) {
-  const { theme } = useTheme();
-  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-
-  const label = (k: string) => (
-    <span
-      style={{
-        width: 64,
-        flexShrink: 0,
-        color: muted,
-        fontFamily: theme.fonts.monospace,
-        textTransform: 'uppercase',
-        fontSize: theme.fontSizes[0] * 0.8,
-      }}
-    >
-      {k}
-    </span>
-  );
-  const chip = (name: string, meta?: string, key?: string | number) => (
-    <span
-      key={key}
-      style={{
-        fontFamily: theme.fonts.monospace,
-        fontSize: theme.fontSizes[0],
-        color: theme.colors.text,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: 4,
-        padding: '1px 6px',
-        marginRight: 6,
-        marginBottom: 4,
-        display: 'inline-block',
-      }}
-    >
-      {name}
-      {meta ? <span style={{ color: muted }}> {meta}</span> : ''}
-    </span>
-  );
-  const row = (k: string, children: ReactNode) => (
-    <div
-      style={{ display: 'flex', gap: 8, fontSize: theme.fontSizes[0], lineHeight: 1.5, marginBottom: 4 }}
-    >
-      {label(k)}
-      <div style={{ minWidth: 0 }}>{children}</div>
-    </div>
-  );
-
-  switch (detail.kind) {
-    case 'class':
-      return (
-        <>
-          {detail.methods.length > 0 &&
-            row('methods', detail.methods.map((m, i) => chip(m.name, m.returnType, i)))}
-          {detail.properties.length > 0 &&
-            row('props', detail.properties.map((p, i) => chip(p.name, p.type, i)))}
-          {detail.extends.length > 0 && row('extends', detail.extends.map((e, i) => chip(e, undefined, i)))}
-          {detail.implements.length > 0 && row('impl', detail.implements.map((e, i) => chip(e, undefined, i)))}
-          {detail.instantiations.length > 0 &&
-            row('insts', detail.instantiations.map((i, idx) => chip(i.name, undefined, idx)))}
-          {detail.references.length > 0 &&
-            row('refs', detail.references.map((r, idx) => chip(r.name, undefined, idx)))}
-        </>
-      );
-    case 'function':
-      return (
-        <>
-          {detail.parameters.length > 0 &&
-            row('params', detail.parameters.map((p, i) => chip(p.type, undefined, i)))}
-          {detail.returnType && row('return', <span>{detail.returnType}</span>)}
-          {detail.callers.length > 0 &&
-            row('callers', detail.callers.map((c, i) => chip(c.name, undefined, i)))}
-          {detail.callees.length > 0 &&
-            row('callees', detail.callees.map((c, i) => chip(c.name, undefined, i)))}
-        </>
-      );
-    case 'type':
-      return (
-        <>
-          {detail.properties.length > 0 &&
-            row('props', detail.properties.map((p, i) => chip(p.name, p.type, i)))}
-          {detail.usedBy.length > 0 &&
-            row('used by', detail.usedBy.map((u, i) => chip(u.name, undefined, i)))}
-          {detail.implementors.length > 0 &&
-            row('impl', detail.implementors.map((e, i) => chip(e, undefined, i)))}
-        </>
-      );
-    case 'module':
-      return (
-        <>
-          {detail.exports.length > 0 &&
-            row('exports', detail.exports.map((e, i) => chip(e, undefined, i)))}
-          {detail.imports.length > 0 &&
-            row('imports', detail.imports.map((i, idx) => chip(i.name, undefined, idx)))}
-          {detail.symbols.length > 0 &&
-            row('symbols', detail.symbols.map((s, i) => chip(s, undefined, i)))}
-        </>
-      );
-    case 'external':
-      return row('source', <span>{detail.label}</span>);
-  }
-}
-
 export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
   const wrapRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState<{ w: number; h: number } | null>(null);