@virentia/inspector 0.1.2 → 0.1.3

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.
Files changed (9) hide show
  1. package/README.md +16 -0
  2. package/dist/app/assets/index-BKxtt4kH.js +55 -0
  3. package/dist/app/assets/{index-BLmv4jmH.css → index-DYWhkuSc.css} +1 -1
  4. package/dist/app/index.html +2 -2
  5. package/dist/index.cjs +29 -4
  6. package/dist/index.mjs +29 -4
  7. package/dist/styles.css +19 -1
  8. package/package.json +5 -5
  9. package/dist/app/assets/index-DDQrGtgW.js +0 -55
package/dist/app/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Virentia Inspector</title>
7
- <script type="module" crossorigin src="/assets/index-DDQrGtgW.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-BLmv4jmH.css">
7
+ <script type="module" crossorigin src="/assets/index-BKxtt4kH.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-DYWhkuSc.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/index.cjs CHANGED
@@ -109,9 +109,15 @@ function NodeLabel(props) {
109
109
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
110
110
  className: "virentia-inspector__node-name",
111
111
  children: props.node.name
112
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
113
- className: "virentia-inspector__node-type",
114
- children: props.node.type
112
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
113
+ className: "virentia-inspector__node-meta",
114
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
115
+ className: "virentia-inspector__node-type",
116
+ children: props.node.type
117
+ }), props.node.key ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
118
+ className: "virentia-inspector__node-key",
119
+ children: "key"
120
+ }) : null]
115
121
  })]
116
122
  });
117
123
  }
@@ -216,6 +222,7 @@ function InspectorSurface(props) {
216
222
  const [timeline, setTimeline] = (0, react.useState)([]);
217
223
  const [selectedNodeId, setSelectedNodeId] = (0, react.useState)(null);
218
224
  const [breakpointIds, setBreakpointIds] = (0, react.useState)([]);
225
+ const [showAllUnits, setShowAllUnits] = (0, react.useState)(false);
219
226
  const [showIsolatedUnits, setShowIsolatedUnits] = (0, react.useState)(false);
220
227
  const [triggerNodeId, setTriggerNodeId] = (0, react.useState)(null);
221
228
  const [triggerStage, setTriggerStage] = (0, react.useState)(null);
@@ -253,7 +260,8 @@ function InspectorSurface(props) {
253
260
  clientRef.current = null;
254
261
  };
255
262
  }, [props.channel]);
256
- const visibleSnapshot = (0, react.useMemo)(() => showIsolatedUnits ? snapshot : hideIsolatedNodes(snapshot), [showIsolatedUnits, snapshot]);
263
+ const keyFilteredSnapshot = (0, react.useMemo)(() => showAllUnits ? snapshot : hideNonKeyNodes(snapshot), [showAllUnits, snapshot]);
264
+ const visibleSnapshot = (0, react.useMemo)(() => showIsolatedUnits ? keyFilteredSnapshot : hideIsolatedNodes(keyFilteredSnapshot), [keyFilteredSnapshot, showIsolatedUnits]);
257
265
  const selectedFlow = (0, react.useMemo)(() => createReactiveSelection(visibleSnapshot, breakpointSelectionActive ? triggerNodeId : selectedNodeId), [
258
266
  breakpointSelectionActive,
259
267
  selectedNodeId,
@@ -425,6 +433,13 @@ function InspectorSurface(props) {
425
433
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Group, {
426
434
  gap: "xs",
427
435
  children: [
436
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Switch, {
437
+ checked: showAllUnits,
438
+ color: "green",
439
+ label: "Show all units",
440
+ onChange: (event) => setShowAllUnits(event.currentTarget.checked),
441
+ size: "xs"
442
+ }),
428
443
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Switch, {
429
444
  checked: showIsolatedUnits,
430
445
  color: "green",
@@ -778,6 +793,7 @@ function useFlowGraph(snapshot, selectedFlow, options) {
778
793
  }
779
794
  function hideIsolatedNodes(snapshot) {
780
795
  const connectedNodeIds = /* @__PURE__ */ new Set();
796
+ for (const node of snapshot.nodes) if (node.key) connectedNodeIds.add(node.id);
781
797
  for (const edge of snapshot.edges) if (edge.kind === "reactive") {
782
798
  connectedNodeIds.add(edge.source);
783
799
  connectedNodeIds.add(edge.target);
@@ -790,6 +806,15 @@ function hideIsolatedNodes(snapshot) {
790
806
  nodes: snapshot.nodes.filter((node) => connectedNodeIds.has(node.id))
791
807
  };
792
808
  }
809
+ function hideNonKeyNodes(snapshot) {
810
+ const visibleNodeIds = new Set(snapshot.nodes.filter((node) => node.key).map((node) => node.id));
811
+ return {
812
+ ...snapshot,
813
+ breakpoints: snapshot.breakpoints.filter((id) => visibleNodeIds.has(id)),
814
+ edges: snapshot.edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)),
815
+ nodes: snapshot.nodes.filter((node) => visibleNodeIds.has(node.id))
816
+ };
817
+ }
793
818
  //#endregion
794
819
  //#region lib/client/index.ts
795
820
  function mountVirentiaInspector(container, props = {}) {
package/dist/index.mjs CHANGED
@@ -108,9 +108,15 @@ function NodeLabel(props) {
108
108
  children: [/* @__PURE__ */ jsx("span", {
109
109
  className: "virentia-inspector__node-name",
110
110
  children: props.node.name
111
- }), /* @__PURE__ */ jsx("span", {
112
- className: "virentia-inspector__node-type",
113
- children: props.node.type
111
+ }), /* @__PURE__ */ jsxs("span", {
112
+ className: "virentia-inspector__node-meta",
113
+ children: [/* @__PURE__ */ jsx("span", {
114
+ className: "virentia-inspector__node-type",
115
+ children: props.node.type
116
+ }), props.node.key ? /* @__PURE__ */ jsx("span", {
117
+ className: "virentia-inspector__node-key",
118
+ children: "key"
119
+ }) : null]
114
120
  })]
115
121
  });
116
122
  }
@@ -215,6 +221,7 @@ function InspectorSurface(props) {
215
221
  const [timeline, setTimeline] = useState([]);
216
222
  const [selectedNodeId, setSelectedNodeId] = useState(null);
217
223
  const [breakpointIds, setBreakpointIds] = useState([]);
224
+ const [showAllUnits, setShowAllUnits] = useState(false);
218
225
  const [showIsolatedUnits, setShowIsolatedUnits] = useState(false);
219
226
  const [triggerNodeId, setTriggerNodeId] = useState(null);
220
227
  const [triggerStage, setTriggerStage] = useState(null);
@@ -252,7 +259,8 @@ function InspectorSurface(props) {
252
259
  clientRef.current = null;
253
260
  };
254
261
  }, [props.channel]);
255
- const visibleSnapshot = useMemo(() => showIsolatedUnits ? snapshot : hideIsolatedNodes(snapshot), [showIsolatedUnits, snapshot]);
262
+ const keyFilteredSnapshot = useMemo(() => showAllUnits ? snapshot : hideNonKeyNodes(snapshot), [showAllUnits, snapshot]);
263
+ const visibleSnapshot = useMemo(() => showIsolatedUnits ? keyFilteredSnapshot : hideIsolatedNodes(keyFilteredSnapshot), [keyFilteredSnapshot, showIsolatedUnits]);
256
264
  const selectedFlow = useMemo(() => createReactiveSelection(visibleSnapshot, breakpointSelectionActive ? triggerNodeId : selectedNodeId), [
257
265
  breakpointSelectionActive,
258
266
  selectedNodeId,
@@ -424,6 +432,13 @@ function InspectorSurface(props) {
424
432
  /* @__PURE__ */ jsxs(Group, {
425
433
  gap: "xs",
426
434
  children: [
435
+ /* @__PURE__ */ jsx(Switch, {
436
+ checked: showAllUnits,
437
+ color: "green",
438
+ label: "Show all units",
439
+ onChange: (event) => setShowAllUnits(event.currentTarget.checked),
440
+ size: "xs"
441
+ }),
427
442
  /* @__PURE__ */ jsx(Switch, {
428
443
  checked: showIsolatedUnits,
429
444
  color: "green",
@@ -777,6 +792,7 @@ function useFlowGraph(snapshot, selectedFlow, options) {
777
792
  }
778
793
  function hideIsolatedNodes(snapshot) {
779
794
  const connectedNodeIds = /* @__PURE__ */ new Set();
795
+ for (const node of snapshot.nodes) if (node.key) connectedNodeIds.add(node.id);
780
796
  for (const edge of snapshot.edges) if (edge.kind === "reactive") {
781
797
  connectedNodeIds.add(edge.source);
782
798
  connectedNodeIds.add(edge.target);
@@ -789,6 +805,15 @@ function hideIsolatedNodes(snapshot) {
789
805
  nodes: snapshot.nodes.filter((node) => connectedNodeIds.has(node.id))
790
806
  };
791
807
  }
808
+ function hideNonKeyNodes(snapshot) {
809
+ const visibleNodeIds = new Set(snapshot.nodes.filter((node) => node.key).map((node) => node.id));
810
+ return {
811
+ ...snapshot,
812
+ breakpoints: snapshot.breakpoints.filter((id) => visibleNodeIds.has(id)),
813
+ edges: snapshot.edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)),
814
+ nodes: snapshot.nodes.filter((node) => visibleNodeIds.has(node.id))
815
+ };
816
+ }
792
817
  //#endregion
793
818
  //#region lib/client/index.ts
794
819
  function mountVirentiaInspector(container, props = {}) {
package/dist/styles.css CHANGED
@@ -159,7 +159,7 @@ body {
159
159
  .virentia-inspector__node-label {
160
160
  display: flex;
161
161
  flex-direction: column;
162
- gap: 2px;
162
+ gap: 4px;
163
163
  }
164
164
 
165
165
  .virentia-inspector__node-name {
@@ -173,6 +173,24 @@ body {
173
173
  font-size: 11px;
174
174
  }
175
175
 
176
+ .virentia-inspector__node-meta {
177
+ display: flex;
178
+ align-items: center;
179
+ gap: 5px;
180
+ min-width: 0;
181
+ }
182
+
183
+ .virentia-inspector__node-key {
184
+ border: 1px solid rgba(64, 192, 87, 0.34);
185
+ border-radius: 4px;
186
+ color: var(--mantine-color-green-3);
187
+ flex: 0 0 auto;
188
+ font-size: 10px;
189
+ font-weight: 700;
190
+ line-height: 1;
191
+ padding: 2px 4px;
192
+ }
193
+
176
194
  .virentia-inspector__timeline-row {
177
195
  border-bottom: 1px solid var(--mantine-color-dark-6);
178
196
  padding: 7px 0;
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@virentia/inspector",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Virentia devtools inspector UI",
5
5
  "keywords": [],
6
6
  "homepage": "https://movpushmov.dev/virentia/inspector/",
7
7
  "bugs": {
8
- "url": "https://github.com/movpushmov/virentia/issues"
8
+ "url": "https://github.com/virentia-labs/virentia/issues"
9
9
  },
10
10
  "license": "MIT",
11
11
  "author": "movpushmov",
12
12
  "repository": {
13
13
  "type": "git",
14
- "url": "git+https://github.com/movpushmov/virentia.git",
14
+ "url": "git+https://github.com/virentia-labs/virentia.git",
15
15
  "directory": "packages/inspector"
16
16
  },
17
17
  "bin": {
@@ -40,8 +40,8 @@
40
40
  "@mantine/core": "^9.1.1",
41
41
  "@mantine/hooks": "^9.1.1",
42
42
  "@xyflow/react": "^12.10.2",
43
- "@virentia/core": "0.2.0",
44
- "@virentia/react": "0.2.0"
43
+ "@virentia/core": "0.2.1",
44
+ "@virentia/react": "0.2.1"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@types/node": "^25.6.1",