@principal-ai/principal-view-react 0.16.33 → 0.16.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/subsystem/ComponentDetail.d.ts +12 -0
- package/dist/subsystem/ComponentDetail.d.ts.map +1 -0
- package/dist/subsystem/ComponentDetail.js +95 -0
- package/dist/subsystem/ComponentDetail.js.map +1 -0
- package/dist/subsystem/EdgeLegendModal.d.ts +18 -0
- package/dist/subsystem/EdgeLegendModal.d.ts.map +1 -0
- package/dist/subsystem/EdgeLegendModal.js +98 -0
- package/dist/subsystem/EdgeLegendModal.js.map +1 -0
- package/dist/subsystem/FileDrawer.d.ts +16 -0
- package/dist/subsystem/FileDrawer.d.ts.map +1 -0
- package/dist/subsystem/FileDrawer.js +72 -0
- package/dist/subsystem/FileDrawer.js.map +1 -0
- package/dist/subsystem/SubsystemComponentGraph.d.ts.map +1 -1
- package/dist/subsystem/SubsystemComponentGraph.js +34 -182
- package/dist/subsystem/SubsystemComponentGraph.js.map +1 -1
- package/dist/subsystem/SubsystemFileTree.d.ts +10 -15
- package/dist/subsystem/SubsystemFileTree.d.ts.map +1 -1
- package/dist/subsystem/SubsystemFileTree.js +96 -93
- package/dist/subsystem/SubsystemFileTree.js.map +1 -1
- package/dist/subsystem/nodes.d.ts +4 -2
- package/dist/subsystem/nodes.d.ts.map +1 -1
- package/dist/subsystem/nodes.js +13 -26
- package/dist/subsystem/nodes.js.map +1 -1
- package/package.json +2 -1
- package/src/index.ts +1 -1
- package/src/stories/SubsystemComponentGraph.stories.tsx +8 -0
- package/src/subsystem/ComponentDetail.tsx +187 -0
- package/src/subsystem/EdgeLegendModal.tsx +146 -0
- package/src/subsystem/FileDrawer.tsx +105 -0
- package/src/subsystem/SubsystemComponentGraph.tsx +49 -316
- package/src/subsystem/SubsystemFileTree.tsx +102 -141
- package/src/subsystem/nodes.tsx +17 -35
|
@@ -1,103 +1,94 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
|
-
* SubsystemFileTree —
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* SubsystemFileTree — sidebar file tree for a subsystem's components, built
|
|
4
|
+
* on @pierre/trees following the panel repo's SessionFileTreePanel pattern:
|
|
5
|
+
* init-once options + latest-value refs, and a suppress flag around
|
|
6
|
+
* programmatic selection so `onSelectionChange` echoes don't re-open files.
|
|
6
7
|
*/
|
|
7
|
-
import { useMemo,
|
|
8
|
-
import {
|
|
8
|
+
import { useEffect, useMemo, useRef } from 'react';
|
|
9
|
+
import { FileTree, useFileTree } from '@pierre/trees/react';
|
|
9
10
|
import { useTheme } from '@principal-ade/industry-theme';
|
|
10
|
-
/** Build a nested tree from repo-root-relative file paths (deduped). */
|
|
11
|
-
export function buildFileTree(files) {
|
|
12
|
-
const root = { name: '', path: '', isFile: false, children: new Map() };
|
|
13
|
-
for (const file of [...new Set(files)].sort()) {
|
|
14
|
-
const segments = file.split('/').filter(Boolean);
|
|
15
|
-
let node = root;
|
|
16
|
-
segments.forEach((segment, index) => {
|
|
17
|
-
const isFile = index === segments.length - 1;
|
|
18
|
-
const path = node.path ? `${node.path}/${segment}` : segment;
|
|
19
|
-
let child = node.children.get(segment);
|
|
20
|
-
if (!child || child.isFile !== isFile) {
|
|
21
|
-
child = { name: segment, path, isFile, children: new Map() };
|
|
22
|
-
node.children.set(segment, child);
|
|
23
|
-
}
|
|
24
|
-
node = child;
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
return root;
|
|
28
|
-
}
|
|
29
|
-
function sortEntries(node) {
|
|
30
|
-
return Array.from(node.children.values()).sort((a, b) => {
|
|
31
|
-
if (a.isFile !== b.isFile)
|
|
32
|
-
return a.isFile ? 1 : -1;
|
|
33
|
-
return a.name.localeCompare(b.name);
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
11
|
/** Fills its parent height by design — pin it with a sized flex container. */
|
|
37
|
-
export function SubsystemFileTree({ files, selectedFile, onSelectFile }) {
|
|
12
|
+
export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFile }) {
|
|
38
13
|
const { theme } = useTheme();
|
|
39
14
|
const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
fontFamily: theme.fonts.monospace,
|
|
71
|
-
fontSize: theme.fontSizes[0],
|
|
72
|
-
lineHeight: '20px',
|
|
73
|
-
textAlign: 'left',
|
|
74
|
-
cursor: 'pointer',
|
|
75
|
-
whiteSpace: 'nowrap',
|
|
76
|
-
overflow: 'hidden',
|
|
77
|
-
textOverflow: 'ellipsis',
|
|
78
|
-
}, children: [_jsx("span", { style: { width: 12, flexShrink: 0 } }), _jsx(FileText, { size: 11, style: { flexShrink: 0, opacity: 0.8 } }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: child.name })] }, child.path));
|
|
79
|
-
}
|
|
80
|
-
const isCollapsed = collapsed.has(child.path);
|
|
81
|
-
return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => toggleFolder(child.path), onMouseEnter: () => setHovered(child.path), onMouseLeave: () => setHovered((prev) => (prev === child.path ? null : prev)), title: child.path, style: {
|
|
82
|
-
display: 'flex',
|
|
83
|
-
alignItems: 'center',
|
|
84
|
-
gap: 5,
|
|
85
|
-
width: '100%',
|
|
86
|
-
padding: '1px 6px',
|
|
87
|
-
border: 'none',
|
|
88
|
-
borderRadius: 4,
|
|
89
|
-
background: hovered === child.path ? theme.colors.border : 'transparent',
|
|
90
|
-
color: muted,
|
|
91
|
-
fontFamily: theme.fonts.monospace,
|
|
92
|
-
fontSize: theme.fontSizes[0],
|
|
93
|
-
lineHeight: '20px',
|
|
94
|
-
textAlign: 'left',
|
|
95
|
-
cursor: 'pointer',
|
|
96
|
-
whiteSpace: 'nowrap',
|
|
97
|
-
overflow: 'hidden',
|
|
98
|
-
}, children: [_jsx("span", { style: { width: 12, flexShrink: 0, display: 'inline-flex', justifyContent: 'center' }, children: isCollapsed ? _jsx(ChevronRight, { size: 10 }) : _jsx(ChevronDown, { size: 10 }) }), isCollapsed ? _jsx(Folder, { size: 11, style: { flexShrink: 0 } }) : _jsx(FolderOpen, { size: 11, style: { flexShrink: 0 } }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: child.name })] }), !isCollapsed && (_jsx("div", { style: { paddingLeft: 12 }, children: renderEntries(child, depth + 1) }))] }, child.path));
|
|
15
|
+
const paths = useMemo(() => Array.from(new Set(files)).sort(), [files]);
|
|
16
|
+
// Latest-value refs so the stable `onSelectionChange` closure never goes
|
|
17
|
+
// stale — `useFileTree` reads its options once on init.
|
|
18
|
+
const pathSet = useMemo(() => new Set(paths), [paths]);
|
|
19
|
+
const pathSetRef = useRef(pathSet);
|
|
20
|
+
pathSetRef.current = pathSet;
|
|
21
|
+
const onSelectFileRef = useRef(onSelectFile);
|
|
22
|
+
onSelectFileRef.current = onSelectFile;
|
|
23
|
+
const selectedFileRef = useRef(selectedFile ?? null);
|
|
24
|
+
selectedFileRef.current = selectedFile ?? null;
|
|
25
|
+
// Suppresses onSelectFile while selection is driven programmatically from
|
|
26
|
+
// the drawer state (`selectedFile`) — no synthetic open/close events.
|
|
27
|
+
const suppressSelectRef = useRef(false);
|
|
28
|
+
const initialPaths = useRef(paths);
|
|
29
|
+
const { model } = useFileTree({
|
|
30
|
+
paths: initialPaths.current,
|
|
31
|
+
initialExpansion: 'open',
|
|
32
|
+
onSelectionChange: (selected) => {
|
|
33
|
+
if (suppressSelectRef.current)
|
|
34
|
+
return;
|
|
35
|
+
const raw = selected[selected.length - 1] ?? selected[0];
|
|
36
|
+
if (!raw)
|
|
37
|
+
return;
|
|
38
|
+
// Directory rows carry a trailing slash; only emit for real files.
|
|
39
|
+
const path = raw.endsWith('/') ? raw.slice(0, -1) : raw;
|
|
40
|
+
if (!pathSetRef.current.has(path))
|
|
41
|
+
return;
|
|
42
|
+
// Includes re-clicks on the open row — upstream toggles it closed.
|
|
43
|
+
onSelectFileRef.current?.(path);
|
|
44
|
+
},
|
|
99
45
|
});
|
|
100
|
-
|
|
46
|
+
// Reconcile the tree's native selection with the desired highlight: the
|
|
47
|
+
// hovered node's file while hovering, else the drawer-open file. Deselects
|
|
48
|
+
// the previous target and scrolls the new one into view.
|
|
49
|
+
const lastSyncedRef = useRef(null);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
const target = hoveredFile ?? selectedFile ?? null;
|
|
52
|
+
if (lastSyncedRef.current === target)
|
|
53
|
+
return;
|
|
54
|
+
const prev = lastSyncedRef.current;
|
|
55
|
+
lastSyncedRef.current = target;
|
|
56
|
+
suppressSelectRef.current = true;
|
|
57
|
+
try {
|
|
58
|
+
if (prev)
|
|
59
|
+
model.getItem(prev)?.deselect();
|
|
60
|
+
if (target) {
|
|
61
|
+
model.getItem(target)?.select();
|
|
62
|
+
model.scrollToPath(target);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
finally {
|
|
66
|
+
suppressSelectRef.current = false;
|
|
67
|
+
}
|
|
68
|
+
}, [model, selectedFile, hoveredFile]);
|
|
69
|
+
// Re-scope the tree in place when the subsystem's file set changes.
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
model.resetPaths(paths);
|
|
72
|
+
}, [model, paths]);
|
|
73
|
+
// Pierre emits no selection change when the clicked row is already
|
|
74
|
+
// selected — detect re-clicks on the open file's row via focus and let
|
|
75
|
+
// upstream toggle the drawer closed.
|
|
76
|
+
const handleContainerClick = () => {
|
|
77
|
+
const focused = model.getFocusedPath();
|
|
78
|
+
if (!focused)
|
|
79
|
+
return;
|
|
80
|
+
const path = focused.endsWith('/') ? focused.slice(0, -1) : focused;
|
|
81
|
+
if (path !== selectedFileRef.current)
|
|
82
|
+
return;
|
|
83
|
+
suppressSelectRef.current = true;
|
|
84
|
+
try {
|
|
85
|
+
onSelectFileRef.current?.(path);
|
|
86
|
+
}
|
|
87
|
+
finally {
|
|
88
|
+
suppressSelectRef.current = false;
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
return (_jsxs("div", { onClickCapture: handleContainerClick, style: {
|
|
101
92
|
height: '50%',
|
|
102
93
|
minHeight: 120,
|
|
103
94
|
flexShrink: 0,
|
|
@@ -116,6 +107,18 @@ export function SubsystemFileTree({ files, selectedFile, onSelectFile }) {
|
|
|
116
107
|
textTransform: 'uppercase',
|
|
117
108
|
color: muted,
|
|
118
109
|
fontWeight: 600,
|
|
119
|
-
}, children: "Files" }), _jsx("span", { style: { fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, color: muted }, children:
|
|
110
|
+
}, children: "Files" }), _jsx("span", { style: { fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, color: muted }, children: paths.length })] }), _jsx(FileTree, { model: model, style: {
|
|
111
|
+
flex: 1,
|
|
112
|
+
minHeight: 0,
|
|
113
|
+
'--trees-padding-inline-override': '8px',
|
|
114
|
+
'--trees-bg-override': 'transparent',
|
|
115
|
+
'--trees-fg-override': theme.colors.text,
|
|
116
|
+
'--trees-fg-muted-override': muted,
|
|
117
|
+
'--trees-accent-override': theme.colors.primary,
|
|
118
|
+
'--trees-font-family-override': theme.fonts.monospace,
|
|
119
|
+
'--trees-font-size-override': `${theme.fontSizes[0]}px`,
|
|
120
|
+
'--trees-theme-list-hover-bg': theme.colors.border,
|
|
121
|
+
'--trees-theme-list-active-selection-bg': theme.colors.border,
|
|
122
|
+
} })] }));
|
|
120
123
|
}
|
|
121
124
|
//# sourceMappingURL=SubsystemFileTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubsystemFileTree.js","sourceRoot":"","sources":["../../src/subsystem/SubsystemFileTree.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"SubsystemFileTree.js","sourceRoot":"","sources":["../../src/subsystem/SubsystemFileTree.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* Subsystem component/group node + edge renderers.
|
|
3
3
|
*
|
|
4
4
|
* Lightweight, purpose-built for the subsystem component graph: a component
|
|
5
|
-
* renders its name (kind-tagged, colored by package) plus its symbol/purpose
|
|
6
|
-
*
|
|
5
|
+
* renders its name (kind-tagged, colored by package) plus its symbol/purpose.
|
|
6
|
+
* Groups render as package containers. Clicking
|
|
7
7
|
* a component calls `onSelect` (to open the entry point / file).
|
|
8
8
|
*/
|
|
9
9
|
import { type NodeProps, type EdgeProps } from '@xyflow/react';
|
|
@@ -14,6 +14,8 @@ export interface SubsystemGraphCallbacks {
|
|
|
14
14
|
onSelect?: (componentId: string) => void;
|
|
15
15
|
/** Click an edge (or its label) — select the relationship. */
|
|
16
16
|
onEdgeSelect?: (edgeId: string) => void;
|
|
17
|
+
/** Hover a component (null on leave) — associates it with the file tree. */
|
|
18
|
+
onHover?: (componentId: string | null) => void;
|
|
17
19
|
/** Upper bound for node width; nodes grow with content up to this, then wrap. */
|
|
18
20
|
maxNodeWidth?: number;
|
|
19
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../../src/subsystem/nodes.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM7C,CAAC;AAgBF,MAAM,WAAW,uBAAuB;IACtC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,EAAE,uBAA4B,CAAC;AAE/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,CAAC,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../../src/subsystem/nodes.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM7C,CAAC;AAgBF,MAAM,WAAW,uBAAuB;IACtC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,EAAE,uBAA4B,CAAC;AAE/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,CAAC,kBAAkB,CAAC,2CAoJ1E;AAED;;;cAGc;AACd,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,GACV,EAAE,SAAS,CAAC,kBAAkB,CAAC,2CAkC/B"}
|
package/dist/subsystem/nodes.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* Subsystem component/group node + edge renderers.
|
|
4
4
|
*
|
|
5
5
|
* Lightweight, purpose-built for the subsystem component graph: a component
|
|
6
|
-
* renders its name (kind-tagged, colored by package) plus its symbol/purpose
|
|
7
|
-
*
|
|
6
|
+
* renders its name (kind-tagged, colored by package) plus its symbol/purpose.
|
|
7
|
+
* Groups render as package containers. Clicking
|
|
8
8
|
* a component calls `onSelect` (to open the entry point / file).
|
|
9
9
|
*/
|
|
10
10
|
import { useState } from 'react';
|
|
@@ -46,7 +46,13 @@ export function SubsystemComponentNode(props) {
|
|
|
46
46
|
// Set while a file is open in the drawer: true → spotlight, false → dim,
|
|
47
47
|
// absent (no file open) → neutral.
|
|
48
48
|
const fileMatch = data.fileMatch;
|
|
49
|
-
return (_jsxs("div", { onMouseEnter: () =>
|
|
49
|
+
return (_jsxs("div", { onMouseEnter: () => {
|
|
50
|
+
setHover(true);
|
|
51
|
+
SUBSYSTEM_CALLBACKS.onHover?.(c.id);
|
|
52
|
+
}, onMouseLeave: () => {
|
|
53
|
+
setHover(false);
|
|
54
|
+
SUBSYSTEM_CALLBACKS.onHover?.(null);
|
|
55
|
+
}, onClick: (e) => {
|
|
50
56
|
e.stopPropagation();
|
|
51
57
|
SUBSYSTEM_CALLBACKS.onSelect?.(c.id);
|
|
52
58
|
}, style: {
|
|
@@ -82,14 +88,13 @@ export function SubsystemComponentNode(props) {
|
|
|
82
88
|
whiteSpace: 'nowrap',
|
|
83
89
|
fontSize: theme.fontSizes[0] * 0.8,
|
|
84
90
|
fontFamily: theme.fonts.monospace,
|
|
85
|
-
textTransform: 'uppercase',
|
|
86
91
|
letterSpacing: 0.5,
|
|
87
92
|
color,
|
|
88
93
|
background: theme.colors.background,
|
|
89
94
|
border: `1px solid ${theme.colors.border}`,
|
|
90
95
|
borderRadius: 4,
|
|
91
96
|
padding: '1px 6px',
|
|
92
|
-
}, children: [KIND_LABEL[c.kind] ?? c.kind, c.capture && c.capture !== 'edited' ? ` · ${c.capture}` : ''] })), hover && c.purpose && (_jsx("div", { style: {
|
|
97
|
+
}, children: [_jsx("span", { style: { textTransform: 'uppercase' }, children: KIND_LABEL[c.kind] ?? c.kind }), c.file ? ` · ${c.file.split('/').pop()}` : '', c.capture && c.capture !== 'edited' ? ` · ${c.capture}` : ''] })), hover && c.purpose && (_jsx("div", { style: {
|
|
93
98
|
position: 'absolute',
|
|
94
99
|
top: '100%',
|
|
95
100
|
left: 0,
|
|
@@ -116,8 +121,7 @@ export function SubsystemComponentNode(props) {
|
|
|
116
121
|
whiteSpace: 'normal',
|
|
117
122
|
overflowWrap: 'anywhere',
|
|
118
123
|
maxWidth: '100%',
|
|
119
|
-
|
|
120
|
-
fontFamily: c.kind === 'type' ? 'Georgia, "Times New Roman", serif' : theme.fonts.body,
|
|
124
|
+
fontFamily: theme.fonts.body,
|
|
121
125
|
}, children: breakWords(displayName) }), c.symbol && c.symbol !== displayName && (_jsx("div", { style: {
|
|
122
126
|
fontSize: theme.fontSizes[0] * 0.82,
|
|
123
127
|
fontFamily: theme.fonts.monospace,
|
|
@@ -128,24 +132,7 @@ export function SubsystemComponentNode(props) {
|
|
|
128
132
|
overflow: 'hidden',
|
|
129
133
|
textOverflow: 'ellipsis',
|
|
130
134
|
maxWidth: '100%',
|
|
131
|
-
}, title: c.symbol, children: c.symbol })),
|
|
132
|
-
e.stopPropagation();
|
|
133
|
-
SUBSYSTEM_CALLBACKS.onSelect?.(c.id);
|
|
134
|
-
}, style: {
|
|
135
|
-
alignSelf: 'center',
|
|
136
|
-
marginTop: 3,
|
|
137
|
-
fontSize: theme.fontSizes[0] * 0.78,
|
|
138
|
-
fontFamily: theme.fonts.monospace,
|
|
139
|
-
color: theme.colors.primary,
|
|
140
|
-
border: `1px solid ${theme.colors.border}`,
|
|
141
|
-
borderRadius: 4,
|
|
142
|
-
padding: '1px 5px',
|
|
143
|
-
cursor: 'pointer',
|
|
144
|
-
maxWidth: '100%',
|
|
145
|
-
overflow: 'hidden',
|
|
146
|
-
textOverflow: 'ellipsis',
|
|
147
|
-
whiteSpace: 'nowrap',
|
|
148
|
-
}, children: c.file.split('/').pop() })), _jsx(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }), _jsx(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } })] }));
|
|
135
|
+
}, title: c.symbol, children: c.symbol })), _jsx(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }), _jsx(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } })] }));
|
|
149
136
|
}
|
|
150
137
|
/** Subsystem edge — SVG path only. The mechanism label is rendered as an
|
|
151
138
|
* absolutely-positioned HTML overlay OUTSIDE the ReactFlow tree (by the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../src/subsystem/nodes.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,MAAM,EACN,QAAQ,GAGT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACL,UAAU,EACV,eAAe,EACf,oBAAoB,GAGrB,MAAM,SAAS,CAAC;AAEjB,MAAM,CAAC,MAAM,UAAU,GAA2B;IAChD,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;6EAE6E;AAC7E,SAAS,UAAU,CAAC,CAAS;IAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC;IACtB,OAAO,CAAC;QACN,qEAAqE;SACpE,OAAO,CAAC,oBAAoB,EAAE,KAAK,IAAI,IAAI,CAAC;QAC7C,+DAA+D;SAC9D,OAAO,CAAC,sBAAsB,EAAE,KAAK,IAAI,IAAI,CAAC;QAC/C,wCAAwC;SACvC,OAAO,CAAC,0BAA0B,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC;AACxD,CAAC;
|
|
1
|
+
{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../src/subsystem/nodes.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ai/principal-view-react",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.35",
|
|
4
4
|
"description": "React components for graph-based principal view framework",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@xyflow/react": "^12.11.3",
|
|
18
18
|
"elkjs": "^0.12.0",
|
|
19
|
+
"@pierre/trees": "1.0.0-beta.6",
|
|
19
20
|
"hast-util-sanitize": "^5.0.2",
|
|
20
21
|
"highlight.js": "^11.11.1",
|
|
21
22
|
"js-yaml": "4.1.1",
|
package/src/index.ts
CHANGED
|
@@ -246,7 +246,7 @@ export type {
|
|
|
246
246
|
// Subsystem component graph
|
|
247
247
|
export { SubsystemComponentGraph } from './subsystem/SubsystemComponentGraph';
|
|
248
248
|
export type { SubsystemComponentGraphProps } from './subsystem/SubsystemComponentGraph';
|
|
249
|
-
export { SubsystemFileTree
|
|
249
|
+
export { SubsystemFileTree } from './subsystem/SubsystemFileTree';
|
|
250
250
|
export type { SubsystemFileTreeProps } from './subsystem/SubsystemFileTree';
|
|
251
251
|
export { GraphLayoutCover } from './subsystem/GraphLayoutCover';
|
|
252
252
|
export type { GraphLayoutCoverProps } from './subsystem/GraphLayoutCover';
|
|
@@ -77,6 +77,7 @@ function TwoNodeDemo({ showEdgeLabels = true }: { showEdgeLabels?: boolean }) {
|
|
|
77
77
|
onSelect={(id) => setSelected(id)}
|
|
78
78
|
onEdgeSelect={(e) => setSelectedEdge(e)}
|
|
79
79
|
showEdgeLabels={showEdgeLabels}
|
|
80
|
+
|
|
80
81
|
/>
|
|
81
82
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
82
83
|
{selectedEdge
|
|
@@ -200,6 +201,7 @@ function V2ReaderDemo() {
|
|
|
200
201
|
edges={v2ReaderEdges}
|
|
201
202
|
onSelect={(id) => setSelected(id)}
|
|
202
203
|
onEdgeSelect={(e) => setSelectedEdge(e)}
|
|
204
|
+
|
|
203
205
|
/>
|
|
204
206
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
205
207
|
{selectedEdge
|
|
@@ -323,6 +325,7 @@ export const NarrowMaxWidth: Story = {
|
|
|
323
325
|
components={investigateOnlyComponents}
|
|
324
326
|
edges={investigateOnlyEdges}
|
|
325
327
|
maxNodeWidth={140}
|
|
328
|
+
|
|
326
329
|
/>
|
|
327
330
|
</div>
|
|
328
331
|
),
|
|
@@ -391,6 +394,7 @@ export const NamingConventions: Story = {
|
|
|
391
394
|
components={namingConventionComponents}
|
|
392
395
|
edges={[]}
|
|
393
396
|
maxNodeWidth={180}
|
|
397
|
+
|
|
394
398
|
/>
|
|
395
399
|
</div>
|
|
396
400
|
),
|
|
@@ -505,6 +509,7 @@ function DetailKindsDemo() {
|
|
|
505
509
|
components={detailKindComponents}
|
|
506
510
|
edges={[]}
|
|
507
511
|
onSelect={(id) => setSelected(id)}
|
|
512
|
+
|
|
508
513
|
/>
|
|
509
514
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
510
515
|
{selected ? `selected: ${selected}` : 'click a component to see its GraphifyComponentDetail'}
|
|
@@ -580,6 +585,7 @@ function MinimalVsResolvedDemo({ resolved }: { resolved: boolean }) {
|
|
|
580
585
|
components={resolved ? resolvedComponents : minimalComponents}
|
|
581
586
|
edges={sharedEdges}
|
|
582
587
|
onSelect={(id) => setSelected(id)}
|
|
588
|
+
|
|
583
589
|
/>
|
|
584
590
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
585
591
|
{resolved
|
|
@@ -656,6 +662,7 @@ function InvestigationDemo() {
|
|
|
656
662
|
components={investigationComponents}
|
|
657
663
|
edges={investigationEdges}
|
|
658
664
|
onSelect={(id) => setSelected(id)}
|
|
665
|
+
|
|
659
666
|
/>
|
|
660
667
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
661
668
|
read-only investigation snapshot (grok 019fd2a9) — components analyzed, not edited
|
|
@@ -747,6 +754,7 @@ function MermaidDemo() {
|
|
|
747
754
|
components={mermaidComponents}
|
|
748
755
|
edges={mermaidEdges}
|
|
749
756
|
onSelect={(id) => setSelected(id)}
|
|
757
|
+
|
|
750
758
|
/>
|
|
751
759
|
<div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
|
|
752
760
|
mermaid diagram rendering pipeline — lazy → render → zoom → modal
|