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

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 +28 -29
  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
@@ -120,7 +120,7 @@ var CytoscapeElements = class _CytoscapeElements {
120
120
  try {
121
121
  const childElements = await _CytoscapeElements.recurseNodes(module);
122
122
  childElements == null ? void 0 : childElements.forEach((module2) => {
123
- const newNode = _CytoscapeElements.buildNode(module2, newRootNode.data.id);
123
+ const newNode = _CytoscapeElements.buildNode(module2, { rootNodeId: newRootNode.data.id });
124
124
  newElements.push(newNode);
125
125
  const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
126
126
  newElements.push(newEdge);
@@ -131,7 +131,7 @@ var CytoscapeElements = class _CytoscapeElements {
131
131
  return [];
132
132
  }
133
133
  }
134
- static buildNode(module, rootNodeId) {
134
+ static buildNode(module, properties) {
135
135
  const { address, config } = module;
136
136
  const normalizedName = config.name ?? address.substring(0, 8);
137
137
  return {
@@ -139,13 +139,13 @@ var CytoscapeElements = class _CytoscapeElements {
139
139
  address,
140
140
  id: address,
141
141
  name: normalizedName,
142
- rootNodeId,
143
- type: parseModuleType(module)
142
+ type: parseModuleType(module),
143
+ ...properties
144
144
  }
145
145
  };
146
146
  }
147
147
  static buildRootNode = (module) => {
148
- return _CytoscapeElements.buildNode(module);
148
+ return _CytoscapeElements.buildNode(module, { root: true });
149
149
  };
150
150
  static normalizeName(name) {
151
151
  if (!name)
@@ -233,6 +233,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
233
233
  width: 3
234
234
  }
235
235
  });
236
+ var NodeBgStyles = (bgColor) => ["background-color", bgColor];
236
237
 
237
238
  // src/hooks/cytoscape/useCytoscapeElements.ts
238
239
  var useCytoscapeElements = (module) => {
@@ -352,19 +353,10 @@ var useHoveredNode = (renderedElements) => {
352
353
 
353
354
  // src/hooks/cytoscape/useNewElements.tsx
354
355
  import { useModuleFromNode } from "@xyo-network/react-node";
355
- import { useEffect as useEffect4 } from "react";
356
356
  var useNewElements = (selectedElement) => {
357
- const { cy } = useCytoscapeInstance(true);
358
357
  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
359
358
  const [module] = useModuleFromNode(selectedAddress);
360
359
  const newElements = useCytoscapeElements(module);
361
- useEffect4(() => {
362
- if (selectedAddress) {
363
- const element = cy == null ? void 0 : cy.$(`node[id="${selectedAddress}"]`);
364
- if (element == null ? void 0 : element.length)
365
- cy == null ? void 0 : cy.center(element);
366
- }
367
- }, [cy, selectedAddress]);
368
360
  return newElements;
369
361
  };
370
362
 
@@ -382,11 +374,11 @@ var useRelationalGraphOptions = (module) => {
382
374
  };
383
375
 
384
376
  // src/hooks/cytoscape/useRenderNewElements.tsx
385
- import { useEffect as useEffect5, useState as useState5 } from "react";
377
+ import { useEffect as useEffect4, useState as useState5 } from "react";
386
378
  var useRenderNewElements = (newElements = [], hideLabels) => {
387
379
  const { cy } = useCytoscapeInstance(true);
388
380
  const [renderedElements, setRenderedElements] = useState5();
389
- useEffect5(() => {
381
+ useEffect4(() => {
390
382
  if (newElements.length > 1) {
391
383
  const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
392
384
  setRenderedElements(renderedElements2);
@@ -397,32 +389,56 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
397
389
  };
398
390
 
399
391
  // src/hooks/cytoscape/useSelectedElement.tsx
400
- import { useEffect as useEffect6, useState as useState6 } from "react";
392
+ import { useEffect as useEffect5, useState as useState6 } from "react";
393
+
394
+ // src/hooks/cytoscape/useToggleSelectedElement.tsx
395
+ import { useTheme as useTheme3 } from "@mui/material";
396
+ var useToggleSelectedElement = (setSelectedElement) => {
397
+ const { cy } = useCytoscapeInstance(true);
398
+ const theme = useTheme3();
399
+ const updateStyles = (element, styles) => {
400
+ cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
401
+ };
402
+ const toggleSelectedElement = (element) => {
403
+ setSelectedElement((previousSelectedElement) => {
404
+ if (previousSelectedElement) {
405
+ updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
406
+ }
407
+ return element;
408
+ });
409
+ updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
410
+ };
411
+ return toggleSelectedElement;
412
+ };
413
+
414
+ // src/hooks/cytoscape/useSelectedElement.tsx
401
415
  var useSelectedElement = () => {
402
416
  const { cy } = useCytoscapeInstance(true);
403
417
  const [selectedElement, setSelectedElement] = useState6();
404
- useEffect6(() => {
418
+ const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
419
+ useEffect5(() => {
405
420
  const listener = (event) => {
406
421
  const element = event.target[0];
407
- if (element.isNode())
408
- setSelectedElement(element);
422
+ if (element.isNode()) {
423
+ toggleSelectedElement(element);
424
+ }
409
425
  };
410
426
  cy == null ? void 0 : cy.on("select", listener);
411
427
  return () => {
412
428
  cy == null ? void 0 : cy.off("select", listener);
413
429
  };
414
- }, [cy, setSelectedElement]);
430
+ }, [cy, toggleSelectedElement]);
415
431
  return selectedElement;
416
432
  };
417
433
 
418
434
  // src/components/cytoscape-extensions/WithExtensions.tsx
419
435
  import { use } from "cytoscape";
420
436
  import cola from "cytoscape-cola";
421
- import { useEffect as useEffect7, useState as useState7 } from "react";
437
+ import { useEffect as useEffect6, useState as useState7 } from "react";
422
438
  import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
423
439
  var WithExtensions = ({ children }) => {
424
440
  const [initialized, setInitialized] = useState7(false);
425
- useEffect7(() => {
441
+ useEffect6(() => {
426
442
  use(cola);
427
443
  setInitialized(true);
428
444
  }, []);
@@ -434,7 +450,7 @@ import { Button, ButtonGroup, styled } from "@mui/material";
434
450
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
435
451
  import { useShareForwardedRef } from "@xyo-network/react-shared";
436
452
  import cytoscape from "cytoscape";
437
- import { forwardRef, useEffect as useEffect8, useState as useState8 } from "react";
453
+ import { forwardRef, useEffect as useEffect7, useState as useState8 } from "react";
438
454
  import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
439
455
  var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...props }, ref) => {
440
456
  const [cy, setCy] = useState8();
@@ -444,7 +460,7 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...pr
444
460
  cy == null ? void 0 : cy.reset();
445
461
  cy == null ? void 0 : cy.fit(void 0, 20);
446
462
  };
447
- useEffect8(() => {
463
+ useEffect7(() => {
448
464
  if (sharedRef) {
449
465
  const newCy = cytoscape({
450
466
  container: sharedRef.current,
@@ -453,13 +469,13 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...pr
453
469
  setCy(newCy);
454
470
  }
455
471
  }, [options, sharedRef]);
456
- useEffect8(() => {
472
+ useEffect7(() => {
457
473
  setCyContext == null ? void 0 : setCyContext(cy);
458
474
  }, [cy, setCyContext]);
459
475
  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
460
476
  /* @__PURE__ */ jsx4(ActionsContainer, { children: /* @__PURE__ */ jsx4(Fragment2, { children: actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
461
477
  actions,
462
- /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
478
+ /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
463
479
  ] }) : /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
464
480
  /* @__PURE__ */ jsx4(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
465
481
  children
@@ -477,7 +493,7 @@ var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme })
477
493
 
478
494
  // src/components/module/graph/NodeHover.tsx
479
495
  import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
480
- import { useEffect as useEffect9, useLayoutEffect, useRef, useState as useState9 } from "react";
496
+ import { useEffect as useEffect8, useLayoutEffect, useRef, useState as useState9 } from "react";
481
497
 
482
498
  // src/components/module/graph/Popper.tsx
483
499
  import { alpha, Chip, Popper, Typography } from "@mui/material";
@@ -501,10 +517,10 @@ var ModuleGraphNodeHover = ({ node }) => {
501
517
  const [boundingBox, setBoundingBox] = useState9(node == null ? void 0 : node.renderedBoundingBox());
502
518
  const ref = useRef(null);
503
519
  const [currentEl, setCurrentEl] = useState9(null);
504
- useEffect9(() => {
520
+ useEffect8(() => {
505
521
  setCurrentEl(null);
506
522
  }, [node]);
507
- useEffect9(() => {
523
+ useEffect8(() => {
508
524
  if (node) {
509
525
  setBoundingBox(node.renderedBoundingBox());
510
526
  }
@@ -538,7 +554,7 @@ var ModuleGraphNodeHover = ({ node }) => {
538
554
  }
539
555
  }
540
556
  ),
541
- node ? /* @__PURE__ */ jsx6(Fragment4, { children: /* @__PURE__ */ jsx6(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
557
+ node ? /* @__PURE__ */ jsx6(Fragment4, { children: /* @__PURE__ */ jsx6(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
542
558
  ] });
543
559
  };
544
560
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../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 { 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","isNodeInstance","useEffect","useState","isNodeInstance","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/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 { 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","isNodeInstance","useEffect","useState","isNodeInstance","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"]}
@@ -85,7 +85,7 @@ var ModuleGraphNodeHover = ({ node }) => {
85
85
  }
86
86
  }
87
87
  ),
88
- node ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
88
+ node ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
89
89
  ] });
90
90
  };
91
91
  // Annotate the CommonJS export names for ESM import in node:
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,wBAAwB;AAExB,mBAA6D;;;ACH7D,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAUtB;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,2EACG,oBACC,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,IAAAC,sBAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,6BAAM,qBAAqB;AAC1E,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAyC,IAAI;AAG/E,8BAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,oCAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,6EACE,uDAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,GAC9F,IACE;AAAA,KACN;AAEJ;","names":["import_react_flexbox","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,wBAAwB;AAExB,mBAA6D;;;ACH7D,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAUtB;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,2EACG,oBACC,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,IAAAC,sBAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,6BAAM,qBAAqB;AAC1E,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAyC,IAAI;AAG/E,8BAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,oCAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,6EACE,uDAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,GACjH,IACE;AAAA,KACN;AAEJ;","names":["import_react_flexbox","import_jsx_runtime"]}
@@ -61,7 +61,7 @@ var ModuleGraphNodeHover = ({ node }) => {
61
61
  }
62
62
  }
63
63
  ),
64
- node ? /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
64
+ node ? /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
65
65
  ] });
66
66
  };
67
67
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["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":";AACA,SAAS,WAAAA,gBAAe;AAExB,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;;;ACH7D,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAUtB,mBAKU,KADF,YAJR;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,gCACG,oBACC,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,SAiBI,YAAAC,WAhBF,OAAAC,MADF,QAAAC,aAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,6BAAM,qBAAqB;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyC,IAAI;AAG/E,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,kBAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,gBAAAA,MAAAF,WAAA,EACE;AAAA,oBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,gBAAAF,KAAAD,WAAA,EACE,0BAAAC,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,GAC9F,IACE;AAAA,KACN;AAEJ;","names":["FlexCol","Fragment","jsx","jsxs","FlexCol"]}
1
+ {"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["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":";AACA,SAAS,WAAAA,gBAAe;AAExB,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;;;ACH7D,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAUtB,mBAKU,KADF,YAJR;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,gCACG,oBACC,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,SAiBI,YAAAC,WAhBF,OAAAC,MADF,QAAAC,aAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,6BAAM,qBAAqB;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyC,IAAI;AAG/E,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,kBAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,gBAAAA,MAAAF,WAAA,EACE;AAAA,oBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,gBAAAF,KAAAD,WAAA,EACE,0BAAAC,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,GACjH,IACE;AAAA,KACN;AAEJ;","names":["FlexCol","Fragment","jsx","jsxs","FlexCol"]}