@xyo-network/react-node-renderer 2.64.4 → 2.64.5

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 (209) hide show
  1. package/dist/browser/Cytoscape/CytoscapeElements.cjs +5 -5
  2. package/dist/browser/Cytoscape/CytoscapeElements.cjs.map +1 -1
  3. package/dist/browser/Cytoscape/CytoscapeElements.d.cts +3 -1
  4. package/dist/browser/Cytoscape/CytoscapeElements.d.cts.map +1 -1
  5. package/dist/browser/Cytoscape/CytoscapeElements.d.mts +3 -1
  6. package/dist/browser/Cytoscape/CytoscapeElements.d.mts.map +1 -1
  7. package/dist/browser/Cytoscape/CytoscapeElements.d.ts +3 -1
  8. package/dist/browser/Cytoscape/CytoscapeElements.d.ts.map +1 -1
  9. package/dist/browser/Cytoscape/CytoscapeElements.js +5 -5
  10. package/dist/browser/Cytoscape/CytoscapeElements.js.map +1 -1
  11. package/dist/browser/Cytoscape/CytoscapeStyles.cjs +2 -0
  12. package/dist/browser/Cytoscape/CytoscapeStyles.cjs.map +1 -1
  13. package/dist/browser/Cytoscape/CytoscapeStyles.d.cts +1 -0
  14. package/dist/browser/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
  15. package/dist/browser/Cytoscape/CytoscapeStyles.d.mts +1 -0
  16. package/dist/browser/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
  17. package/dist/browser/Cytoscape/CytoscapeStyles.d.ts +1 -0
  18. package/dist/browser/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
  19. package/dist/browser/Cytoscape/CytoscapeStyles.js +2 -0
  20. package/dist/browser/Cytoscape/CytoscapeStyles.js.map +1 -1
  21. package/dist/browser/Cytoscape/index.cjs +7 -5
  22. package/dist/browser/Cytoscape/index.cjs.map +1 -1
  23. package/dist/browser/Cytoscape/index.js +7 -5
  24. package/dist/browser/Cytoscape/index.js.map +1 -1
  25. package/dist/browser/components/ProvidedNodeRenderer.cjs +6 -6
  26. package/dist/browser/components/ProvidedNodeRenderer.cjs.map +1 -1
  27. package/dist/browser/components/ProvidedNodeRenderer.js +6 -6
  28. package/dist/browser/components/ProvidedNodeRenderer.js.map +1 -1
  29. package/dist/browser/components/RelationalGraph.cjs +1 -1
  30. package/dist/browser/components/RelationalGraph.cjs.map +1 -1
  31. package/dist/browser/components/RelationalGraph.js +1 -1
  32. package/dist/browser/components/RelationalGraph.js.map +1 -1
  33. package/dist/browser/components/index.cjs +68 -52
  34. package/dist/browser/components/index.cjs.map +1 -1
  35. package/dist/browser/components/index.js +47 -31
  36. package/dist/browser/components/index.js.map +1 -1
  37. package/dist/browser/components/module/graph/GraphFlexBox.cjs +68 -52
  38. package/dist/browser/components/module/graph/GraphFlexBox.cjs.map +1 -1
  39. package/dist/browser/components/module/graph/GraphFlexBox.js +47 -31
  40. package/dist/browser/components/module/graph/GraphFlexBox.js.map +1 -1
  41. package/dist/browser/components/module/graph/NodeHover.cjs +1 -1
  42. package/dist/browser/components/module/graph/NodeHover.cjs.map +1 -1
  43. package/dist/browser/components/module/graph/NodeHover.js +1 -1
  44. package/dist/browser/components/module/graph/NodeHover.js.map +1 -1
  45. package/dist/browser/components/module/graph/index.cjs +68 -52
  46. package/dist/browser/components/module/graph/index.cjs.map +1 -1
  47. package/dist/browser/components/module/graph/index.js +47 -31
  48. package/dist/browser/components/module/graph/index.js.map +1 -1
  49. package/dist/browser/components/module/index.cjs +68 -52
  50. package/dist/browser/components/module/index.cjs.map +1 -1
  51. package/dist/browser/components/module/index.js +47 -31
  52. package/dist/browser/components/module/index.js.map +1 -1
  53. package/dist/browser/hooks/cytoscape/index.cjs +41 -25
  54. package/dist/browser/hooks/cytoscape/index.cjs.map +1 -1
  55. package/dist/browser/hooks/cytoscape/index.js +37 -21
  56. package/dist/browser/hooks/cytoscape/index.js.map +1 -1
  57. package/dist/browser/hooks/cytoscape/useCytoscapeElements.cjs +5 -5
  58. package/dist/browser/hooks/cytoscape/useCytoscapeElements.cjs.map +1 -1
  59. package/dist/browser/hooks/cytoscape/useCytoscapeElements.js +5 -5
  60. package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
  61. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  62. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  63. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
  64. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
  65. package/dist/browser/hooks/cytoscape/useNewElements.cjs +5 -22
  66. package/dist/browser/hooks/cytoscape/useNewElements.cjs.map +1 -1
  67. package/dist/browser/hooks/cytoscape/useNewElements.d.cts.map +1 -1
  68. package/dist/browser/hooks/cytoscape/useNewElements.d.mts.map +1 -1
  69. package/dist/browser/hooks/cytoscape/useNewElements.d.ts.map +1 -1
  70. package/dist/browser/hooks/cytoscape/useNewElements.js +5 -22
  71. package/dist/browser/hooks/cytoscape/useNewElements.js.map +1 -1
  72. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -5
  73. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  74. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +5 -5
  75. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  76. package/dist/browser/hooks/cytoscape/useSelectedElement.cjs +30 -3
  77. package/dist/browser/hooks/cytoscape/useSelectedElement.cjs.map +1 -1
  78. package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts.map +1 -1
  79. package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts.map +1 -1
  80. package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts.map +1 -1
  81. package/dist/browser/hooks/cytoscape/useSelectedElement.js +30 -3
  82. package/dist/browser/hooks/cytoscape/useSelectedElement.js.map +1 -1
  83. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs +57 -0
  84. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs.map +1 -0
  85. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts +4 -0
  86. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts.map +1 -0
  87. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts +4 -0
  88. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts.map +1 -0
  89. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts +4 -0
  90. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts.map +1 -0
  91. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js +36 -0
  92. package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js.map +1 -0
  93. package/dist/browser/hooks/index.cjs +41 -25
  94. package/dist/browser/hooks/index.cjs.map +1 -1
  95. package/dist/browser/hooks/index.js +37 -21
  96. package/dist/browser/hooks/index.js.map +1 -1
  97. package/dist/browser/index.cjs +69 -52
  98. package/dist/browser/index.cjs.map +1 -1
  99. package/dist/browser/index.js +48 -31
  100. package/dist/browser/index.js.map +1 -1
  101. package/dist/docs.json +446 -321
  102. package/dist/node/Cytoscape/CytoscapeElements.cjs +5 -5
  103. package/dist/node/Cytoscape/CytoscapeElements.cjs.map +1 -1
  104. package/dist/node/Cytoscape/CytoscapeElements.d.cts +3 -1
  105. package/dist/node/Cytoscape/CytoscapeElements.d.cts.map +1 -1
  106. package/dist/node/Cytoscape/CytoscapeElements.d.mts +3 -1
  107. package/dist/node/Cytoscape/CytoscapeElements.d.mts.map +1 -1
  108. package/dist/node/Cytoscape/CytoscapeElements.d.ts +3 -1
  109. package/dist/node/Cytoscape/CytoscapeElements.d.ts.map +1 -1
  110. package/dist/node/Cytoscape/CytoscapeElements.js +5 -5
  111. package/dist/node/Cytoscape/CytoscapeElements.js.map +1 -1
  112. package/dist/node/Cytoscape/CytoscapeStyles.cjs +3 -0
  113. package/dist/node/Cytoscape/CytoscapeStyles.cjs.map +1 -1
  114. package/dist/node/Cytoscape/CytoscapeStyles.d.cts +1 -0
  115. package/dist/node/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
  116. package/dist/node/Cytoscape/CytoscapeStyles.d.mts +1 -0
  117. package/dist/node/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
  118. package/dist/node/Cytoscape/CytoscapeStyles.d.ts +1 -0
  119. package/dist/node/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
  120. package/dist/node/Cytoscape/CytoscapeStyles.js +2 -0
  121. package/dist/node/Cytoscape/CytoscapeStyles.js.map +1 -1
  122. package/dist/node/Cytoscape/index.cjs +8 -5
  123. package/dist/node/Cytoscape/index.cjs.map +1 -1
  124. package/dist/node/Cytoscape/index.js +7 -5
  125. package/dist/node/Cytoscape/index.js.map +1 -1
  126. package/dist/node/components/ProvidedNodeRenderer.cjs +6 -6
  127. package/dist/node/components/ProvidedNodeRenderer.cjs.map +1 -1
  128. package/dist/node/components/ProvidedNodeRenderer.js +6 -6
  129. package/dist/node/components/ProvidedNodeRenderer.js.map +1 -1
  130. package/dist/node/components/RelationalGraph.cjs +1 -1
  131. package/dist/node/components/RelationalGraph.cjs.map +1 -1
  132. package/dist/node/components/RelationalGraph.js +1 -1
  133. package/dist/node/components/RelationalGraph.js.map +1 -1
  134. package/dist/node/components/index.cjs +68 -52
  135. package/dist/node/components/index.cjs.map +1 -1
  136. package/dist/node/components/index.js +47 -31
  137. package/dist/node/components/index.js.map +1 -1
  138. package/dist/node/components/module/graph/GraphFlexBox.cjs +68 -52
  139. package/dist/node/components/module/graph/GraphFlexBox.cjs.map +1 -1
  140. package/dist/node/components/module/graph/GraphFlexBox.js +47 -31
  141. package/dist/node/components/module/graph/GraphFlexBox.js.map +1 -1
  142. package/dist/node/components/module/graph/NodeHover.cjs +1 -1
  143. package/dist/node/components/module/graph/NodeHover.cjs.map +1 -1
  144. package/dist/node/components/module/graph/NodeHover.js +1 -1
  145. package/dist/node/components/module/graph/NodeHover.js.map +1 -1
  146. package/dist/node/components/module/graph/index.cjs +68 -52
  147. package/dist/node/components/module/graph/index.cjs.map +1 -1
  148. package/dist/node/components/module/graph/index.js +47 -31
  149. package/dist/node/components/module/graph/index.js.map +1 -1
  150. package/dist/node/components/module/index.cjs +68 -52
  151. package/dist/node/components/module/index.cjs.map +1 -1
  152. package/dist/node/components/module/index.js +47 -31
  153. package/dist/node/components/module/index.js.map +1 -1
  154. package/dist/node/hooks/cytoscape/index.cjs +41 -25
  155. package/dist/node/hooks/cytoscape/index.cjs.map +1 -1
  156. package/dist/node/hooks/cytoscape/index.js +37 -21
  157. package/dist/node/hooks/cytoscape/index.js.map +1 -1
  158. package/dist/node/hooks/cytoscape/useCytoscapeElements.cjs +5 -5
  159. package/dist/node/hooks/cytoscape/useCytoscapeElements.cjs.map +1 -1
  160. package/dist/node/hooks/cytoscape/useCytoscapeElements.js +5 -5
  161. package/dist/node/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
  162. package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  163. package/dist/node/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  164. package/dist/node/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
  165. package/dist/node/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
  166. package/dist/node/hooks/cytoscape/useNewElements.cjs +5 -22
  167. package/dist/node/hooks/cytoscape/useNewElements.cjs.map +1 -1
  168. package/dist/node/hooks/cytoscape/useNewElements.d.cts.map +1 -1
  169. package/dist/node/hooks/cytoscape/useNewElements.d.mts.map +1 -1
  170. package/dist/node/hooks/cytoscape/useNewElements.d.ts.map +1 -1
  171. package/dist/node/hooks/cytoscape/useNewElements.js +5 -22
  172. package/dist/node/hooks/cytoscape/useNewElements.js.map +1 -1
  173. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -5
  174. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  175. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js +5 -5
  176. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  177. package/dist/node/hooks/cytoscape/useSelectedElement.cjs +30 -3
  178. package/dist/node/hooks/cytoscape/useSelectedElement.cjs.map +1 -1
  179. package/dist/node/hooks/cytoscape/useSelectedElement.d.cts.map +1 -1
  180. package/dist/node/hooks/cytoscape/useSelectedElement.d.mts.map +1 -1
  181. package/dist/node/hooks/cytoscape/useSelectedElement.d.ts.map +1 -1
  182. package/dist/node/hooks/cytoscape/useSelectedElement.js +30 -3
  183. package/dist/node/hooks/cytoscape/useSelectedElement.js.map +1 -1
  184. package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs +61 -0
  185. package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs.map +1 -0
  186. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts +4 -0
  187. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts.map +1 -0
  188. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts +4 -0
  189. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts.map +1 -0
  190. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts +4 -0
  191. package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts.map +1 -0
  192. package/dist/node/hooks/cytoscape/useToggleSelectedElement.js +36 -0
  193. package/dist/node/hooks/cytoscape/useToggleSelectedElement.js.map +1 -0
  194. package/dist/node/hooks/index.cjs +41 -25
  195. package/dist/node/hooks/index.cjs.map +1 -1
  196. package/dist/node/hooks/index.js +37 -21
  197. package/dist/node/hooks/index.js.map +1 -1
  198. package/dist/node/index.cjs +70 -52
  199. package/dist/node/index.cjs.map +1 -1
  200. package/dist/node/index.js +48 -31
  201. package/dist/node/index.js.map +1 -1
  202. package/package.json +27 -27
  203. package/src/Cytoscape/CytoscapeElements.ts +4 -4
  204. package/src/Cytoscape/CytoscapeStyles.ts +2 -0
  205. package/src/components/RelationalGraph.tsx +1 -1
  206. package/src/components/module/graph/NodeHover.tsx +1 -1
  207. package/src/hooks/cytoscape/useNewElements.tsx +0 -10
  208. package/src/hooks/cytoscape/useSelectedElement.tsx +8 -3
  209. package/src/hooks/cytoscape/useToggleSelectedElement.tsx +30 -0
@@ -137,7 +137,7 @@ var CytoscapeElements = class _CytoscapeElements {
137
137
  try {
138
138
  const childElements = await _CytoscapeElements.recurseNodes(module);
139
139
  childElements == null ? void 0 : childElements.forEach((module2) => {
140
- const newNode = _CytoscapeElements.buildNode(module2, newRootNode.data.id);
140
+ const newNode = _CytoscapeElements.buildNode(module2, { rootNodeId: newRootNode.data.id });
141
141
  newElements.push(newNode);
142
142
  const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
143
143
  newElements.push(newEdge);
@@ -148,7 +148,7 @@ var CytoscapeElements = class _CytoscapeElements {
148
148
  return [];
149
149
  }
150
150
  }
151
- static buildNode(module, rootNodeId) {
151
+ static buildNode(module, properties) {
152
152
  const { address, config } = module;
153
153
  const normalizedName = config.name ?? address.substring(0, 8);
154
154
  return {
@@ -156,13 +156,13 @@ var CytoscapeElements = class _CytoscapeElements {
156
156
  address,
157
157
  id: address,
158
158
  name: normalizedName,
159
- rootNodeId,
160
- type: parseModuleType(module)
159
+ type: parseModuleType(module),
160
+ ...properties
161
161
  }
162
162
  };
163
163
  }
164
164
  static buildRootNode = (module) => {
165
- return _CytoscapeElements.buildNode(module);
165
+ return _CytoscapeElements.buildNode(module, { root: true });
166
166
  };
167
167
  static normalizeName(name) {
168
168
  if (!name)
@@ -250,6 +250,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
250
250
  width: 3
251
251
  }
252
252
  });
253
+ var NodeBgStyles = (bgColor) => ["background-color", bgColor];
253
254
 
254
255
  // src/hooks/cytoscape/useCytoscapeElements.ts
255
256
  var useCytoscapeElements = (module) => {
@@ -369,19 +370,10 @@ var useHoveredNode = (renderedElements) => {
369
370
 
370
371
  // src/hooks/cytoscape/useNewElements.tsx
371
372
  import { useModuleFromNode } from "@xyo-network/react-node";
372
- import { useEffect as useEffect4 } from "react";
373
373
  var useNewElements = (selectedElement) => {
374
- const { cy } = useCytoscapeInstance(true);
375
374
  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
376
375
  const [module] = useModuleFromNode(selectedAddress);
377
376
  const newElements = useCytoscapeElements(module);
378
- useEffect4(() => {
379
- if (selectedAddress) {
380
- const element = cy == null ? void 0 : cy.$(`node[id="${selectedAddress}"]`);
381
- if (element == null ? void 0 : element.length)
382
- cy == null ? void 0 : cy.center(element);
383
- }
384
- }, [cy, selectedAddress]);
385
377
  return newElements;
386
378
  };
387
379
 
@@ -399,11 +391,11 @@ var useRelationalGraphOptions = (module) => {
399
391
  };
400
392
 
401
393
  // src/hooks/cytoscape/useRenderNewElements.tsx
402
- import { useEffect as useEffect5, useState as useState5 } from "react";
394
+ import { useEffect as useEffect4, useState as useState5 } from "react";
403
395
  var useRenderNewElements = (newElements = [], hideLabels) => {
404
396
  const { cy } = useCytoscapeInstance(true);
405
397
  const [renderedElements, setRenderedElements] = useState5();
406
- useEffect5(() => {
398
+ useEffect4(() => {
407
399
  if (newElements.length > 1) {
408
400
  const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
409
401
  setRenderedElements(renderedElements2);
@@ -414,32 +406,56 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
414
406
  };
415
407
 
416
408
  // src/hooks/cytoscape/useSelectedElement.tsx
417
- import { useEffect as useEffect6, useState as useState6 } from "react";
409
+ import { useEffect as useEffect5, useState as useState6 } from "react";
410
+
411
+ // src/hooks/cytoscape/useToggleSelectedElement.tsx
412
+ import { useTheme as useTheme3 } from "@mui/material";
413
+ var useToggleSelectedElement = (setSelectedElement) => {
414
+ const { cy } = useCytoscapeInstance(true);
415
+ const theme = useTheme3();
416
+ const updateStyles = (element, styles) => {
417
+ cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
418
+ };
419
+ const toggleSelectedElement = (element) => {
420
+ setSelectedElement((previousSelectedElement) => {
421
+ if (previousSelectedElement) {
422
+ updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
423
+ }
424
+ return element;
425
+ });
426
+ updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
427
+ };
428
+ return toggleSelectedElement;
429
+ };
430
+
431
+ // src/hooks/cytoscape/useSelectedElement.tsx
418
432
  var useSelectedElement = () => {
419
433
  const { cy } = useCytoscapeInstance(true);
420
434
  const [selectedElement, setSelectedElement] = useState6();
421
- useEffect6(() => {
435
+ const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
436
+ useEffect5(() => {
422
437
  const listener = (event) => {
423
438
  const element = event.target[0];
424
- if (element.isNode())
425
- setSelectedElement(element);
439
+ if (element.isNode()) {
440
+ toggleSelectedElement(element);
441
+ }
426
442
  };
427
443
  cy == null ? void 0 : cy.on("select", listener);
428
444
  return () => {
429
445
  cy == null ? void 0 : cy.off("select", listener);
430
446
  };
431
- }, [cy, setSelectedElement]);
447
+ }, [cy, toggleSelectedElement]);
432
448
  return selectedElement;
433
449
  };
434
450
 
435
451
  // src/components/cytoscape-extensions/WithExtensions.tsx
436
452
  import { use } from "cytoscape";
437
453
  import cola from "cytoscape-cola";
438
- import { useEffect as useEffect7, useState as useState7 } from "react";
454
+ import { useEffect as useEffect6, useState as useState7 } from "react";
439
455
  import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
440
456
  var WithExtensions = ({ children }) => {
441
457
  const [initialized, setInitialized] = useState7(false);
442
- useEffect7(() => {
458
+ useEffect6(() => {
443
459
  use(cola);
444
460
  setInitialized(true);
445
461
  }, []);
@@ -451,7 +467,7 @@ import { Button, ButtonGroup, styled } from "@mui/material";
451
467
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
452
468
  import { useShareForwardedRef } from "@xyo-network/react-shared";
453
469
  import cytoscape from "cytoscape";
454
- import { forwardRef, useEffect as useEffect8, useState as useState8 } from "react";
470
+ import { forwardRef, useEffect as useEffect7, useState as useState8 } from "react";
455
471
  import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
456
472
  var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...props }, ref) => {
457
473
  const [cy, setCy] = useState8();
@@ -461,7 +477,7 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...pr
461
477
  cy == null ? void 0 : cy.reset();
462
478
  cy == null ? void 0 : cy.fit(void 0, 20);
463
479
  };
464
- useEffect8(() => {
480
+ useEffect7(() => {
465
481
  if (sharedRef) {
466
482
  const newCy = cytoscape({
467
483
  container: sharedRef.current,
@@ -470,13 +486,13 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...pr
470
486
  setCy(newCy);
471
487
  }
472
488
  }, [options, sharedRef]);
473
- useEffect8(() => {
489
+ useEffect7(() => {
474
490
  setCyContext == null ? void 0 : setCyContext(cy);
475
491
  }, [cy, setCyContext]);
476
492
  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
477
493
  /* @__PURE__ */ jsx5(ActionsContainer, { children: /* @__PURE__ */ jsx5(Fragment2, { children: actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
478
494
  actions,
479
- /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
495
+ /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
480
496
  ] }) : /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
481
497
  /* @__PURE__ */ jsx5(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
482
498
  children
@@ -494,7 +510,7 @@ var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme })
494
510
 
495
511
  // src/components/module/graph/NodeHover.tsx
496
512
  import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
497
- import { useEffect as useEffect9, useLayoutEffect, useRef, useState as useState9 } from "react";
513
+ import { useEffect as useEffect8, useLayoutEffect, useRef, useState as useState9 } from "react";
498
514
 
499
515
  // src/components/module/graph/Popper.tsx
500
516
  import { alpha, Chip, Popper, Typography } from "@mui/material";
@@ -518,10 +534,10 @@ var ModuleGraphNodeHover = ({ node }) => {
518
534
  const [boundingBox, setBoundingBox] = useState9(node == null ? void 0 : node.renderedBoundingBox());
519
535
  const ref = useRef(null);
520
536
  const [currentEl, setCurrentEl] = useState9(null);
521
- useEffect9(() => {
537
+ useEffect8(() => {
522
538
  setCurrentEl(null);
523
539
  }, [node]);
524
- useEffect9(() => {
540
+ useEffect8(() => {
525
541
  if (node) {
526
542
  setBoundingBox(node.renderedBoundingBox());
527
543
  }
@@ -555,7 +571,7 @@ var ModuleGraphNodeHover = ({ node }) => {
555
571
  }
556
572
  }
557
573
  ),
558
- node ? /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsx7(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
574
+ node ? /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsx7(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
559
575
  ] });
560
576
  };
561
577
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/module/CardParser.tsx","../../../../src/components/module/graph/GraphFlexBox.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/Provider.tsx","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../../src/Cytoscape/CytoscapeElements.ts","../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../src/Cytoscape/lib/iconMap.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../src/hooks/cytoscape/useIcons.tsx","../../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../../src/hooks/cytoscape/useNewElements.tsx","../../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/components/cytoscape-extensions/WithExtensions.tsx","../../../../src/components/RelationalGraph.tsx","../../../../src/components/module/graph/NodeHover.tsx","../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n switch (true) {\n case isArchivistInstance(module):\n return <ArchivistCard module={asArchivistInstance(module)} />\n case isDivinerInstance(module):\n return <DivinerCard module={asDivinerInstance(module)} />\n default:\n return <ModuleCard module={module} />\n }\n}\n","import { Button } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { ModuleInstance } from '@xyo-network/module'\n\nimport { CytoscapeInstanceProvider } from '../../../contexts'\nimport { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'\nimport { WithExtensions } from '../../cytoscape-extensions'\nimport { NodeRelationalGraphFlexBox } from '../../RelationalGraph'\nimport { ModuleGraphNodeHover } from './NodeHover'\n\nexport interface ModuleGraphFlexBoxProps extends FlexBoxProps {\n rootModule?: ModuleInstance | null\n}\n\nexport const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {\n const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)\n const selectedElement = useSelectedElement()\n const newElements = useNewElements(selectedElement)\n const renderedElements = useRenderNewElements(newElements, hideLabels)\n const hoveredNode = useHoveredNode(renderedElements)\n\n return (\n <WithExtensions>\n <NodeRelationalGraphFlexBox\n actions={\n <Button size={'small'} onClick={handleToggleLabels} variant=\"contained\">\n Toggle Labels\n </Button>\n }\n options={options}\n {...props}\n >\n <ModuleGraphNodeHover node={hoveredNode} />\n </NodeRelationalGraphFlexBox>\n </WithExtensions>\n )\n}\n\nexport const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {\n return (\n <CytoscapeInstanceProvider>\n <ModuleGraphFlexBox {...props} />\n </CytoscapeInstanceProvider>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n useEffect(() => {\n setCy(defaultInstance)\n }, [defaultInstance])\n\n return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n rootNodeId,\n type: parseModuleType(module),\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module)\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { cy } = useCytoscapeInstance(true)\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n useEffect(() => {\n if (selectedAddress) {\n const element = cy?.$(`node[id=\"${selectedAddress}\"]`)\n if (element?.length) cy?.center(element)\n }\n }, [cy, selectedAddress])\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element = event.target[0]\n if (element.isNode()) setSelectedElement(element)\n }\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, setSelectedElement])\n\n return selectedElement\n}\n","import { use } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport { PropsWithChildren, useEffect, useState } from 'react'\n\nexport const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {\n const [initialized, setInitialized] = useState(false)\n useEffect(() => {\n use(cola)\n setInitialized(true)\n }, [])\n\n return <>{initialized ? children : undefined}</>\n}\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n setCy(newCy)\n }\n }, [options, sharedRef])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol {...props}>\n <ActionsContainer>\n <>\n {actions ? (\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n </ButtonGroup>\n ) : (\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n )}\n </>\n </ActionsContainer>\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n {children}\n </FlexCol>\n )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n position: 'absolute',\n right: '10px',\n top: '10px',\n zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n","import { PopperProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n const { address, name } = node?.data() ?? {}\n const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n const ref = useRef<HTMLDivElement>(null)\n const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)\n\n // Ensure first render clears the previous element when node changes to avoid flicker\n useEffect(() => {\n setCurrentEl(null)\n }, [node])\n\n useEffect(() => {\n if (node) {\n setBoundingBox(node.renderedBoundingBox())\n }\n\n const listener = () => {\n setBoundingBox(node?.renderedBoundingBox())\n }\n\n node?.on('position', listener)\n\n return () => {\n node?.off('position', undefined, listener)\n }\n }, [node])\n\n // Once boundingBox state is set and applied to the layout, update the ref\n useLayoutEffect(() => {\n setCurrentEl(ref.current)\n }, [boundingBox])\n\n return (\n <>\n <FlexCol\n ref={ref}\n sx={{\n // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n // backgroundColor: '#fff',\n // opacity: 0.25,\n cursor: 'pointer',\n height: boundingBox?.h,\n left: boundingBox?.x1,\n pointerEvents: 'none',\n position: 'absolute',\n top: boundingBox?.y1,\n width: boundingBox?.w,\n }}\n />\n {node ? (\n <>\n <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n </>\n ) : null}\n </>\n )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n address?: string\n element?: PopperProps['anchorEl']\n name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n return (\n <>\n {element ? (\n <Popper anchorEl={element} {...props}>\n <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n <FlexRow gap={2}>\n <Identicon value={address} size={24} />\n <Typography>{name}</Typography>\n </FlexRow>\n <Chip label={address} color={'primary'} />\n </FlexCol>\n </Popper>\n ) : null}\n </>\n )\n}\n"],"mappings":"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","names":["Button","jsx","isNodeInstance","useEffect","useState","isNodeInstance","isArchivistInstance","isDivinerInstance","module","isNodeInstance","useState","useEffect","isNodeInstance","useMemo","useTheme","useMemo","jsx","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useEffect","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useState","useEffect","useEffect","useState","jsx","useEffect","useState","Fragment","jsx","useState","useEffect","FlexCol","useEffect","useState","FlexCol","FlexRow","Fragment","jsx","jsxs","Fragment","jsx","jsxs","useState","useEffect","FlexCol","jsx","Button"]}
1
+ {"version":3,"sources":["../../../../src/components/module/CardParser.tsx","../../../../src/components/module/graph/GraphFlexBox.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/Provider.tsx","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../../src/Cytoscape/CytoscapeElements.ts","../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../src/Cytoscape/lib/iconMap.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../src/hooks/cytoscape/useIcons.tsx","../../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../../src/hooks/cytoscape/useNewElements.tsx","../../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx","../../../../src/components/cytoscape-extensions/WithExtensions.tsx","../../../../src/components/RelationalGraph.tsx","../../../../src/components/module/graph/NodeHover.tsx","../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n switch (true) {\n case isArchivistInstance(module):\n return <ArchivistCard module={asArchivistInstance(module)} />\n case isDivinerInstance(module):\n return <DivinerCard module={asDivinerInstance(module)} />\n default:\n return <ModuleCard module={module} />\n }\n}\n","import { Button } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { ModuleInstance } from '@xyo-network/module'\n\nimport { CytoscapeInstanceProvider } from '../../../contexts'\nimport { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'\nimport { WithExtensions } from '../../cytoscape-extensions'\nimport { NodeRelationalGraphFlexBox } from '../../RelationalGraph'\nimport { ModuleGraphNodeHover } from './NodeHover'\n\nexport interface ModuleGraphFlexBoxProps extends FlexBoxProps {\n rootModule?: ModuleInstance | null\n}\n\nexport const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {\n const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)\n const selectedElement = useSelectedElement()\n const newElements = useNewElements(selectedElement)\n const renderedElements = useRenderNewElements(newElements, hideLabels)\n const hoveredNode = useHoveredNode(renderedElements)\n\n return (\n <WithExtensions>\n <NodeRelationalGraphFlexBox\n actions={\n <Button size={'small'} onClick={handleToggleLabels} variant=\"contained\">\n Toggle Labels\n </Button>\n }\n options={options}\n {...props}\n >\n <ModuleGraphNodeHover node={hoveredNode} />\n </NodeRelationalGraphFlexBox>\n </WithExtensions>\n )\n}\n\nexport const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {\n return (\n <CytoscapeInstanceProvider>\n <ModuleGraphFlexBox {...props} />\n </CytoscapeInstanceProvider>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n useEffect(() => {\n setCy(defaultInstance)\n }, [defaultInstance])\n\n return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n type: parseModuleType(module),\n ...properties,\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, { root: true })\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element: NodeSingular = event.target[0]\n if (element.isNode()) {\n toggleSelectedElement(element)\n }\n }\n\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, toggleSelectedElement])\n\n return selectedElement\n}\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n const { cy } = useCytoscapeInstance(true)\n const theme = useTheme()\n\n const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n cy\n ?.style()\n .selector(`node[id=\"${element.data().id}\"]`)\n .style(...styles)\n }\n\n const toggleSelectedElement = (element: NodeSingular) => {\n setSelectedElement((previousSelectedElement) => {\n if (previousSelectedElement) {\n updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n }\n return element\n })\n updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n }\n\n return toggleSelectedElement\n}\n","import { use } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport { PropsWithChildren, useEffect, useState } from 'react'\n\nexport const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {\n const [initialized, setInitialized] = useState(false)\n useEffect(() => {\n use(cola)\n setInitialized(true)\n }, [])\n\n return <>{initialized ? children : undefined}</>\n}\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n setCy(newCy)\n }\n }, [options, sharedRef])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol {...props}>\n <ActionsContainer>\n <>\n {actions ? (\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n ) : (\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n )}\n </>\n </ActionsContainer>\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n {children}\n </FlexCol>\n )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n position: 'absolute',\n right: '10px',\n top: '10px',\n zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n","import { PopperProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n const { address, name } = node?.data() ?? {}\n const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n const ref = useRef<HTMLDivElement>(null)\n const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)\n\n // Ensure first render clears the previous element when node changes to avoid flicker\n useEffect(() => {\n setCurrentEl(null)\n }, [node])\n\n useEffect(() => {\n if (node) {\n setBoundingBox(node.renderedBoundingBox())\n }\n\n const listener = () => {\n setBoundingBox(node?.renderedBoundingBox())\n }\n\n node?.on('position', listener)\n\n return () => {\n node?.off('position', undefined, listener)\n }\n }, [node])\n\n // Once boundingBox state is set and applied to the layout, update the ref\n useLayoutEffect(() => {\n setCurrentEl(ref.current)\n }, [boundingBox])\n\n return (\n <>\n <FlexCol\n ref={ref}\n sx={{\n // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n // backgroundColor: '#fff',\n // opacity: 0.25,\n cursor: 'pointer',\n height: boundingBox?.h,\n left: boundingBox?.x1,\n pointerEvents: 'none',\n position: 'absolute',\n top: boundingBox?.y1,\n width: boundingBox?.w,\n }}\n />\n {node ? (\n <>\n <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open sx={{ zIndex: 2 }} />\n </>\n ) : null}\n </>\n )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n address?: string\n element?: PopperProps['anchorEl']\n name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n return (\n <>\n {element ? (\n <Popper anchorEl={element} {...props}>\n <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n <FlexRow gap={2}>\n <Identicon value={address} size={24} />\n <Typography>{name}</Typography>\n </FlexRow>\n <Chip label={address} color={'primary'} />\n </FlexCol>\n </Popper>\n ) : null}\n </>\n )\n}\n"],"mappings":"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","names":["Button","jsx","isNodeInstance","useEffect","useState","isNodeInstance","isArchivistInstance","isDivinerInstance","module","isNodeInstance","useState","useEffect","isNodeInstance","useMemo","useTheme","useMemo","jsx","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useTheme","useTheme","useState","useEffect","useEffect","useState","jsx","useEffect","useState","Fragment","jsx","useState","useEffect","FlexCol","useEffect","useState","FlexCol","FlexRow","Fragment","jsx","jsxs","Fragment","jsx","jsxs","useState","useEffect","FlexCol","jsx","Button"]}
@@ -130,7 +130,7 @@ var CytoscapeElements = class _CytoscapeElements {
130
130
  try {
131
131
  const childElements = await _CytoscapeElements.recurseNodes(module2);
132
132
  childElements == null ? void 0 : childElements.forEach((module3) => {
133
- const newNode = _CytoscapeElements.buildNode(module3, newRootNode.data.id);
133
+ const newNode = _CytoscapeElements.buildNode(module3, { rootNodeId: newRootNode.data.id });
134
134
  newElements.push(newNode);
135
135
  const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
136
136
  newElements.push(newEdge);
@@ -141,7 +141,7 @@ var CytoscapeElements = class _CytoscapeElements {
141
141
  return [];
142
142
  }
143
143
  }
144
- static buildNode(module2, rootNodeId) {
144
+ static buildNode(module2, properties) {
145
145
  const { address, config } = module2;
146
146
  const normalizedName = config.name ?? address.substring(0, 8);
147
147
  return {
@@ -149,13 +149,13 @@ var CytoscapeElements = class _CytoscapeElements {
149
149
  address,
150
150
  id: address,
151
151
  name: normalizedName,
152
- rootNodeId,
153
- type: parseModuleType(module2)
152
+ type: parseModuleType(module2),
153
+ ...properties
154
154
  }
155
155
  };
156
156
  }
157
157
  static buildRootNode = (module2) => {
158
- return _CytoscapeElements.buildNode(module2);
158
+ return _CytoscapeElements.buildNode(module2, { root: true });
159
159
  };
160
160
  static normalizeName(name) {
161
161
  if (!name)
@@ -235,6 +235,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
235
235
  width: 3
236
236
  }
237
237
  });
238
+ var NodeBgStyles = (bgColor) => ["background-color", bgColor];
238
239
 
239
240
  // src/hooks/cytoscape/useCytoscapeElements.ts
240
241
  var useCytoscapeElements = (module2) => {
@@ -364,26 +365,17 @@ var useHoveredNode = (renderedElements) => {
364
365
 
365
366
  // src/hooks/cytoscape/useNewElements.tsx
366
367
  var import_react_node = require("@xyo-network/react-node");
367
- var import_react6 = require("react");
368
368
  var useNewElements = (selectedElement) => {
369
- const { cy } = useCytoscapeInstance(true);
370
369
  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
371
370
  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
372
371
  const newElements = useCytoscapeElements(module2);
373
- (0, import_react6.useEffect)(() => {
374
- if (selectedAddress) {
375
- const element = cy == null ? void 0 : cy.$(`node[id="${selectedAddress}"]`);
376
- if (element == null ? void 0 : element.length)
377
- cy == null ? void 0 : cy.center(element);
378
- }
379
- }, [cy, selectedAddress]);
380
372
  return newElements;
381
373
  };
382
374
 
383
375
  // src/hooks/cytoscape/useRelationalGraphOptions.tsx
384
- var import_react7 = require("react");
376
+ var import_react6 = require("react");
385
377
  var useRelationalGraphOptions = (module2) => {
386
- const [hideLabels, setHideLabels] = (0, import_react7.useState)(true);
378
+ const [hideLabels, setHideLabels] = (0, import_react6.useState)(true);
387
379
  const handleToggleLabels = () => {
388
380
  setHideLabels((oldValue) => !oldValue);
389
381
  };
@@ -394,11 +386,11 @@ var useRelationalGraphOptions = (module2) => {
394
386
  };
395
387
 
396
388
  // src/hooks/cytoscape/useRenderNewElements.tsx
397
- var import_react8 = require("react");
389
+ var import_react7 = require("react");
398
390
  var useRenderNewElements = (newElements = [], hideLabels) => {
399
391
  const { cy } = useCytoscapeInstance(true);
400
- const [renderedElements, setRenderedElements] = (0, import_react8.useState)();
401
- (0, import_react8.useEffect)(() => {
392
+ const [renderedElements, setRenderedElements] = (0, import_react7.useState)();
393
+ (0, import_react7.useEffect)(() => {
402
394
  if (newElements.length > 1) {
403
395
  const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
404
396
  setRenderedElements(renderedElements2);
@@ -409,21 +401,45 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
409
401
  };
410
402
 
411
403
  // src/hooks/cytoscape/useSelectedElement.tsx
412
- var import_react9 = require("react");
404
+ var import_react8 = require("react");
405
+
406
+ // src/hooks/cytoscape/useToggleSelectedElement.tsx
407
+ var import_material3 = require("@mui/material");
408
+ var useToggleSelectedElement = (setSelectedElement) => {
409
+ const { cy } = useCytoscapeInstance(true);
410
+ const theme = (0, import_material3.useTheme)();
411
+ const updateStyles = (element, styles) => {
412
+ cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
413
+ };
414
+ const toggleSelectedElement = (element) => {
415
+ setSelectedElement((previousSelectedElement) => {
416
+ if (previousSelectedElement) {
417
+ updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
418
+ }
419
+ return element;
420
+ });
421
+ updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
422
+ };
423
+ return toggleSelectedElement;
424
+ };
425
+
426
+ // src/hooks/cytoscape/useSelectedElement.tsx
413
427
  var useSelectedElement = () => {
414
428
  const { cy } = useCytoscapeInstance(true);
415
- const [selectedElement, setSelectedElement] = (0, import_react9.useState)();
416
- (0, import_react9.useEffect)(() => {
429
+ const [selectedElement, setSelectedElement] = (0, import_react8.useState)();
430
+ const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
431
+ (0, import_react8.useEffect)(() => {
417
432
  const listener = (event) => {
418
433
  const element = event.target[0];
419
- if (element.isNode())
420
- setSelectedElement(element);
434
+ if (element.isNode()) {
435
+ toggleSelectedElement(element);
436
+ }
421
437
  };
422
438
  cy == null ? void 0 : cy.on("select", listener);
423
439
  return () => {
424
440
  cy == null ? void 0 : cy.off("select", listener);
425
441
  };
426
- }, [cy, setSelectedElement]);
442
+ }, [cy, toggleSelectedElement]);
427
443
  return selectedElement;
428
444
  };
429
445
  // Annotate the CommonJS export names for ESM import in node: