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

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 (168) hide show
  1. package/dist/browser/components/ProvidedNodeRenderer.cjs +7 -5
  2. package/dist/browser/components/ProvidedNodeRenderer.cjs.map +1 -1
  3. package/dist/browser/components/ProvidedNodeRenderer.js +8 -6
  4. package/dist/browser/components/ProvidedNodeRenderer.js.map +1 -1
  5. package/dist/browser/components/RelationalGraph.cjs +2 -2
  6. package/dist/browser/components/RelationalGraph.cjs.map +1 -1
  7. package/dist/browser/components/RelationalGraph.d.cts.map +1 -1
  8. package/dist/browser/components/RelationalGraph.d.mts.map +1 -1
  9. package/dist/browser/components/RelationalGraph.d.ts.map +1 -1
  10. package/dist/browser/components/RelationalGraph.js +3 -3
  11. package/dist/browser/components/RelationalGraph.js.map +1 -1
  12. package/dist/browser/components/index.cjs +104 -82
  13. package/dist/browser/components/index.cjs.map +1 -1
  14. package/dist/browser/components/index.js +93 -71
  15. package/dist/browser/components/index.js.map +1 -1
  16. package/dist/browser/components/module/graph/GraphFlexBox.cjs +103 -81
  17. package/dist/browser/components/module/graph/GraphFlexBox.cjs.map +1 -1
  18. package/dist/browser/components/module/graph/GraphFlexBox.d.cts +1 -0
  19. package/dist/browser/components/module/graph/GraphFlexBox.d.cts.map +1 -1
  20. package/dist/browser/components/module/graph/GraphFlexBox.d.mts +1 -0
  21. package/dist/browser/components/module/graph/GraphFlexBox.d.mts.map +1 -1
  22. package/dist/browser/components/module/graph/GraphFlexBox.d.ts +1 -0
  23. package/dist/browser/components/module/graph/GraphFlexBox.d.ts.map +1 -1
  24. package/dist/browser/components/module/graph/GraphFlexBox.js +92 -70
  25. package/dist/browser/components/module/graph/GraphFlexBox.js.map +1 -1
  26. package/dist/browser/components/module/graph/NodeHover.cjs +17 -10
  27. package/dist/browser/components/module/graph/NodeHover.cjs.map +1 -1
  28. package/dist/browser/components/module/graph/NodeHover.d.cts.map +1 -1
  29. package/dist/browser/components/module/graph/NodeHover.d.mts.map +1 -1
  30. package/dist/browser/components/module/graph/NodeHover.d.ts.map +1 -1
  31. package/dist/browser/components/module/graph/NodeHover.js +20 -13
  32. package/dist/browser/components/module/graph/NodeHover.js.map +1 -1
  33. package/dist/browser/components/module/graph/Popper.cjs +2 -2
  34. package/dist/browser/components/module/graph/Popper.cjs.map +1 -1
  35. package/dist/browser/components/module/graph/Popper.d.cts +1 -1
  36. package/dist/browser/components/module/graph/Popper.d.cts.map +1 -1
  37. package/dist/browser/components/module/graph/Popper.d.mts +1 -1
  38. package/dist/browser/components/module/graph/Popper.d.mts.map +1 -1
  39. package/dist/browser/components/module/graph/Popper.d.ts +1 -1
  40. package/dist/browser/components/module/graph/Popper.d.ts.map +1 -1
  41. package/dist/browser/components/module/graph/Popper.js +3 -3
  42. package/dist/browser/components/module/graph/Popper.js.map +1 -1
  43. package/dist/browser/components/module/graph/index.cjs +103 -81
  44. package/dist/browser/components/module/graph/index.cjs.map +1 -1
  45. package/dist/browser/components/module/graph/index.js +92 -70
  46. package/dist/browser/components/module/graph/index.js.map +1 -1
  47. package/dist/browser/components/module/index.cjs +103 -81
  48. package/dist/browser/components/module/index.cjs.map +1 -1
  49. package/dist/browser/components/module/index.js +92 -70
  50. package/dist/browser/components/module/index.js.map +1 -1
  51. package/dist/browser/hooks/cytoscape/index.cjs +5 -3
  52. package/dist/browser/hooks/cytoscape/index.cjs.map +1 -1
  53. package/dist/browser/hooks/cytoscape/index.js +5 -3
  54. package/dist/browser/hooks/cytoscape/index.js.map +1 -1
  55. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs +5 -3
  56. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  57. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.d.cts.map +1 -1
  58. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.d.mts.map +1 -1
  59. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.d.ts.map +1 -1
  60. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js +5 -3
  61. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  62. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -3
  63. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  64. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +5 -3
  65. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  66. package/dist/browser/hooks/index.cjs +5 -3
  67. package/dist/browser/hooks/index.cjs.map +1 -1
  68. package/dist/browser/hooks/index.js +5 -3
  69. package/dist/browser/hooks/index.js.map +1 -1
  70. package/dist/browser/index.cjs +107 -82
  71. package/dist/browser/index.cjs.map +1 -1
  72. package/dist/browser/index.d.cts +1 -0
  73. package/dist/browser/index.d.cts.map +1 -1
  74. package/dist/browser/index.d.mts +1 -0
  75. package/dist/browser/index.d.mts.map +1 -1
  76. package/dist/browser/index.d.ts +1 -0
  77. package/dist/browser/index.d.ts.map +1 -1
  78. package/dist/browser/index.js +96 -71
  79. package/dist/browser/index.js.map +1 -1
  80. package/dist/docs.json +1747 -1151
  81. package/dist/node/components/ProvidedNodeRenderer.cjs +7 -5
  82. package/dist/node/components/ProvidedNodeRenderer.cjs.map +1 -1
  83. package/dist/node/components/ProvidedNodeRenderer.js +8 -6
  84. package/dist/node/components/ProvidedNodeRenderer.js.map +1 -1
  85. package/dist/node/components/RelationalGraph.cjs +2 -2
  86. package/dist/node/components/RelationalGraph.cjs.map +1 -1
  87. package/dist/node/components/RelationalGraph.d.cts.map +1 -1
  88. package/dist/node/components/RelationalGraph.d.mts.map +1 -1
  89. package/dist/node/components/RelationalGraph.d.ts.map +1 -1
  90. package/dist/node/components/RelationalGraph.js +3 -3
  91. package/dist/node/components/RelationalGraph.js.map +1 -1
  92. package/dist/node/components/index.cjs +105 -82
  93. package/dist/node/components/index.cjs.map +1 -1
  94. package/dist/node/components/index.js +93 -71
  95. package/dist/node/components/index.js.map +1 -1
  96. package/dist/node/components/module/graph/GraphFlexBox.cjs +105 -82
  97. package/dist/node/components/module/graph/GraphFlexBox.cjs.map +1 -1
  98. package/dist/node/components/module/graph/GraphFlexBox.d.cts +1 -0
  99. package/dist/node/components/module/graph/GraphFlexBox.d.cts.map +1 -1
  100. package/dist/node/components/module/graph/GraphFlexBox.d.mts +1 -0
  101. package/dist/node/components/module/graph/GraphFlexBox.d.mts.map +1 -1
  102. package/dist/node/components/module/graph/GraphFlexBox.d.ts +1 -0
  103. package/dist/node/components/module/graph/GraphFlexBox.d.ts.map +1 -1
  104. package/dist/node/components/module/graph/GraphFlexBox.js +92 -70
  105. package/dist/node/components/module/graph/GraphFlexBox.js.map +1 -1
  106. package/dist/node/components/module/graph/NodeHover.cjs +17 -10
  107. package/dist/node/components/module/graph/NodeHover.cjs.map +1 -1
  108. package/dist/node/components/module/graph/NodeHover.d.cts.map +1 -1
  109. package/dist/node/components/module/graph/NodeHover.d.mts.map +1 -1
  110. package/dist/node/components/module/graph/NodeHover.d.ts.map +1 -1
  111. package/dist/node/components/module/graph/NodeHover.js +20 -13
  112. package/dist/node/components/module/graph/NodeHover.js.map +1 -1
  113. package/dist/node/components/module/graph/Popper.cjs +2 -2
  114. package/dist/node/components/module/graph/Popper.cjs.map +1 -1
  115. package/dist/node/components/module/graph/Popper.d.cts +1 -1
  116. package/dist/node/components/module/graph/Popper.d.cts.map +1 -1
  117. package/dist/node/components/module/graph/Popper.d.mts +1 -1
  118. package/dist/node/components/module/graph/Popper.d.mts.map +1 -1
  119. package/dist/node/components/module/graph/Popper.d.ts +1 -1
  120. package/dist/node/components/module/graph/Popper.d.ts.map +1 -1
  121. package/dist/node/components/module/graph/Popper.js +3 -3
  122. package/dist/node/components/module/graph/Popper.js.map +1 -1
  123. package/dist/node/components/module/graph/index.cjs +105 -82
  124. package/dist/node/components/module/graph/index.cjs.map +1 -1
  125. package/dist/node/components/module/graph/index.js +92 -70
  126. package/dist/node/components/module/graph/index.js.map +1 -1
  127. package/dist/node/components/module/index.cjs +105 -82
  128. package/dist/node/components/module/index.cjs.map +1 -1
  129. package/dist/node/components/module/index.js +92 -70
  130. package/dist/node/components/module/index.js.map +1 -1
  131. package/dist/node/hooks/cytoscape/index.cjs +5 -3
  132. package/dist/node/hooks/cytoscape/index.cjs.map +1 -1
  133. package/dist/node/hooks/cytoscape/index.js +5 -3
  134. package/dist/node/hooks/cytoscape/index.js.map +1 -1
  135. package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs +5 -3
  136. package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
  137. package/dist/node/hooks/cytoscape/useCytoscapeOptions.d.cts.map +1 -1
  138. package/dist/node/hooks/cytoscape/useCytoscapeOptions.d.mts.map +1 -1
  139. package/dist/node/hooks/cytoscape/useCytoscapeOptions.d.ts.map +1 -1
  140. package/dist/node/hooks/cytoscape/useCytoscapeOptions.js +5 -3
  141. package/dist/node/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  142. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -3
  143. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
  144. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js +5 -3
  145. package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  146. package/dist/node/hooks/index.cjs +5 -3
  147. package/dist/node/hooks/index.cjs.map +1 -1
  148. package/dist/node/hooks/index.js +5 -3
  149. package/dist/node/hooks/index.js.map +1 -1
  150. package/dist/node/index.cjs +111 -82
  151. package/dist/node/index.cjs.map +1 -1
  152. package/dist/node/index.d.cts +1 -0
  153. package/dist/node/index.d.cts.map +1 -1
  154. package/dist/node/index.d.mts +1 -0
  155. package/dist/node/index.d.mts.map +1 -1
  156. package/dist/node/index.d.ts +1 -0
  157. package/dist/node/index.d.ts.map +1 -1
  158. package/dist/node/index.js +96 -71
  159. package/dist/node/index.js.map +1 -1
  160. package/package.json +8 -8
  161. package/src/components/RelationalGraph.stories.tsx +4 -1
  162. package/src/components/RelationalGraph.tsx +14 -6
  163. package/src/components/module/graph/GraphFlexBox.stories.tsx +7 -10
  164. package/src/components/module/graph/GraphFlexBox.tsx +9 -0
  165. package/src/components/module/graph/NodeHover.tsx +31 -19
  166. package/src/components/module/graph/Popper.tsx +14 -10
  167. package/src/hooks/cytoscape/useCytoscapeOptions.ts +6 -3
  168. package/src/index.ts +1 -0
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
@@ -1,4 +1,5 @@
1
1
  export * from './components';
2
+ export * from './contexts';
2
3
  export * from './Cytoscape';
3
4
  export * from './hooks';
4
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
@@ -18,10 +18,29 @@ var ModuleCardParser = ({ module }) => {
18
18
  // src/components/module/graph/GraphFlexBox.tsx
19
19
  import { Button as Button2 } from "@mui/material";
20
20
 
21
+ // src/contexts/CytoscapeInstance/Context.ts
22
+ import { createContextEx } from "@xyo-network/react-shared";
23
+ var CytoscapeInstanceContext = createContextEx();
24
+
25
+ // src/contexts/CytoscapeInstance/Provider.tsx
26
+ import { useEffect, useState } from "react";
27
+ import { jsx as jsx2 } from "react/jsx-runtime";
28
+ var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
29
+ const [cy, setCy] = useState(defaultInstance);
30
+ useEffect(() => {
31
+ setCy(defaultInstance);
32
+ }, [defaultInstance]);
33
+ return /* @__PURE__ */ jsx2(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
34
+ };
35
+
36
+ // src/contexts/CytoscapeInstance/use.ts
37
+ import { useContextEx } from "@xyo-network/react-shared";
38
+ var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
39
+
21
40
  // src/hooks/cytoscape/useCytoscapeElements.ts
22
41
  import { useAsyncEffect } from "@xylabs/react-async-effect";
23
42
  import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
24
- import { useEffect, useState } from "react";
43
+ import { useEffect as useEffect2, useState as useState2 } from "react";
25
44
 
26
45
  // src/Cytoscape/CytoscapeElements.ts
27
46
  import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
@@ -234,7 +253,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
234
253
 
235
254
  // src/hooks/cytoscape/useCytoscapeElements.ts
236
255
  var useCytoscapeElements = (module) => {
237
- const [elements, setElements] = useState([]);
256
+ const [elements, setElements] = useState2([]);
238
257
  useAsyncEffect(
239
258
  // eslint-disable-next-line react-hooks/exhaustive-deps
240
259
  async () => {
@@ -245,7 +264,7 @@ var useCytoscapeElements = (module) => {
245
264
  },
246
265
  [module]
247
266
  );
248
- useEffect(() => {
267
+ useEffect2(() => {
249
268
  let attachedListener = void 0;
250
269
  let detachedListener = void 0;
251
270
  if (module && isNodeInstance3(module)) {
@@ -276,13 +295,13 @@ import { useMemo as useMemo2 } from "react";
276
295
  // src/hooks/cytoscape/useIcons.tsx
277
296
  import { useTheme } from "@mui/material";
278
297
  import { useMemo } from "react";
279
- import { jsx as jsx2 } from "react/jsx-runtime";
298
+ import { jsx as jsx3 } from "react/jsx-runtime";
280
299
  var useIcons = () => {
281
300
  const theme = useTheme();
282
301
  const icons = useMemo(() => {
283
302
  const iconMap = generateIconMap();
284
303
  return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
285
- const icon = /* @__PURE__ */ jsx2(IconComponent, { fontSize: "small" });
304
+ const icon = /* @__PURE__ */ jsx3(IconComponent, { fontSize: "small" });
286
305
  acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
287
306
  return acc;
288
307
  }, iconMap);
@@ -308,12 +327,14 @@ var useCytoscapeStyle = (hideLabels = false) => {
308
327
  // src/hooks/cytoscape/useCytoscapeOptions.ts
309
328
  var useCytoscapeOptions = (elements, style, layout) => {
310
329
  const defaultStyle = useCytoscapeStyle();
330
+ const resolvedLayout = layout ?? ConcentricLayout;
331
+ const resolvedStyle = style ?? defaultStyle;
311
332
  const options = useMemo3(() => {
312
- if (elements && layout && style) {
333
+ if (elements && resolvedLayout && resolvedStyle) {
313
334
  return {
314
335
  elements,
315
- layout: layout ?? ConcentricLayout,
316
- style: style ?? defaultStyle
336
+ layout: resolvedLayout,
337
+ style: resolvedStyle
317
338
  };
318
339
  }
319
340
  }, [elements, layout, style]);
@@ -321,20 +342,10 @@ var useCytoscapeOptions = (elements, style, layout) => {
321
342
  };
322
343
 
323
344
  // src/hooks/cytoscape/useHoveredNode.tsx
324
- import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
325
-
326
- // src/contexts/CytoscapeInstance/Context.ts
327
- import { createContextEx } from "@xyo-network/react-shared";
328
- var CytoscapeInstanceContext = createContextEx();
329
-
330
- // src/contexts/CytoscapeInstance/use.ts
331
- import { useContextEx } from "@xyo-network/react-shared";
332
- var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
333
-
334
- // src/hooks/cytoscape/useHoveredNode.tsx
345
+ import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
335
346
  var useHoveredNode = (renderedElements) => {
336
347
  const { cy } = useCytoscapeInstance(true);
337
- const [hoveredNode, setHoveredNode] = useState2();
348
+ const [hoveredNode, setHoveredNode] = useState3();
338
349
  const nodeListener = useCallback((node) => {
339
350
  node.on("mouseover tap", () => {
340
351
  setHoveredNode(node);
@@ -343,12 +354,12 @@ var useHoveredNode = (renderedElements) => {
343
354
  setHoveredNode(void 0);
344
355
  });
345
356
  }, []);
346
- useEffect2(() => {
357
+ useEffect3(() => {
347
358
  if (renderedElements) {
348
359
  renderedElements.nodes().forEach(nodeListener);
349
360
  }
350
361
  }, [nodeListener, renderedElements]);
351
- useEffect2(() => {
362
+ useEffect3(() => {
352
363
  cy?.ready(() => {
353
364
  cy.nodes().forEach(nodeListener);
354
365
  });
@@ -358,13 +369,13 @@ var useHoveredNode = (renderedElements) => {
358
369
 
359
370
  // src/hooks/cytoscape/useNewElements.tsx
360
371
  import { useModuleFromNode } from "@xyo-network/react-node";
361
- import { useEffect as useEffect3 } from "react";
372
+ import { useEffect as useEffect4 } from "react";
362
373
  var useNewElements = (selectedElement) => {
363
374
  const { cy } = useCytoscapeInstance(true);
364
375
  const { address: selectedAddress } = selectedElement?.data() ?? {};
365
376
  const [module] = useModuleFromNode(selectedAddress);
366
377
  const newElements = useCytoscapeElements(module);
367
- useEffect3(() => {
378
+ useEffect4(() => {
368
379
  if (selectedAddress) {
369
380
  const element = cy?.$(`node[id="${selectedAddress}"]`);
370
381
  if (element?.length)
@@ -375,9 +386,9 @@ var useNewElements = (selectedElement) => {
375
386
  };
376
387
 
377
388
  // src/hooks/cytoscape/useRelationalGraphOptions.tsx
378
- import { useState as useState3 } from "react";
389
+ import { useState as useState4 } from "react";
379
390
  var useRelationalGraphOptions = (module) => {
380
- const [hideLabels, setHideLabels] = useState3(true);
391
+ const [hideLabels, setHideLabels] = useState4(true);
381
392
  const handleToggleLabels = () => {
382
393
  setHideLabels((oldValue) => !oldValue);
383
394
  };
@@ -388,11 +399,11 @@ var useRelationalGraphOptions = (module) => {
388
399
  };
389
400
 
390
401
  // src/hooks/cytoscape/useRenderNewElements.tsx
391
- import { useEffect as useEffect4, useState as useState4 } from "react";
402
+ import { useEffect as useEffect5, useState as useState5 } from "react";
392
403
  var useRenderNewElements = (newElements = [], hideLabels) => {
393
404
  const { cy } = useCytoscapeInstance(true);
394
- const [renderedElements, setRenderedElements] = useState4();
395
- useEffect4(() => {
405
+ const [renderedElements, setRenderedElements] = useState5();
406
+ useEffect5(() => {
396
407
  if (newElements.length > 1) {
397
408
  const renderedElements2 = cy?.add(newElements);
398
409
  setRenderedElements(renderedElements2);
@@ -403,11 +414,11 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
403
414
  };
404
415
 
405
416
  // src/hooks/cytoscape/useSelectedElement.tsx
406
- import { useEffect as useEffect5, useState as useState5 } from "react";
417
+ import { useEffect as useEffect6, useState as useState6 } from "react";
407
418
  var useSelectedElement = () => {
408
419
  const { cy } = useCytoscapeInstance(true);
409
- const [selectedElement, setSelectedElement] = useState5();
410
- useEffect5(() => {
420
+ const [selectedElement, setSelectedElement] = useState6();
421
+ useEffect6(() => {
411
422
  const listener = (event) => {
412
423
  const element = event.target[0];
413
424
  if (element.isNode())
@@ -424,15 +435,15 @@ var useSelectedElement = () => {
424
435
  // src/components/cytoscape-extensions/WithExtensions.tsx
425
436
  import { use } from "cytoscape";
426
437
  import cola from "cytoscape-cola";
427
- import { useEffect as useEffect6, useState as useState6 } from "react";
428
- import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
438
+ import { useEffect as useEffect7, useState as useState7 } from "react";
439
+ import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
429
440
  var WithExtensions = ({ children }) => {
430
- const [initialized, setInitialized] = useState6(false);
431
- useEffect6(() => {
441
+ const [initialized, setInitialized] = useState7(false);
442
+ useEffect7(() => {
432
443
  use(cola);
433
444
  setInitialized(true);
434
445
  }, []);
435
- return /* @__PURE__ */ jsx3(Fragment, { children: initialized ? children : void 0 });
446
+ return /* @__PURE__ */ jsx4(Fragment, { children: initialized ? children : void 0 });
436
447
  };
437
448
 
438
449
  // src/components/RelationalGraph.tsx
@@ -440,17 +451,17 @@ import { Button, ButtonGroup, styled } from "@mui/material";
440
451
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
441
452
  import { useShareForwardedRef } from "@xyo-network/react-shared";
442
453
  import cytoscape from "cytoscape";
443
- import { forwardRef, useEffect as useEffect7, useState as useState7 } from "react";
444
- import { jsx as jsx4, jsxs } from "react/jsx-runtime";
454
+ import { forwardRef, useEffect as useEffect8, useState as useState8 } from "react";
455
+ import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
445
456
  var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...props }, ref) => {
446
- const [cy, setCy] = useState7();
457
+ const [cy, setCy] = useState8();
447
458
  const { setCy: setCyContext } = useCytoscapeInstance();
448
459
  const sharedRef = useShareForwardedRef(ref);
449
460
  const handleReset = () => {
450
461
  cy?.reset();
451
462
  cy?.fit(void 0, 20);
452
463
  };
453
- useEffect7(() => {
464
+ useEffect8(() => {
454
465
  if (sharedRef) {
455
466
  const newCy = cytoscape({
456
467
  container: sharedRef.current,
@@ -459,15 +470,15 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...pr
459
470
  setCy(newCy);
460
471
  }
461
472
  }, [options, sharedRef]);
462
- useEffect7(() => {
473
+ useEffect8(() => {
463
474
  setCyContext?.(cy);
464
475
  }, [cy, setCyContext]);
465
476
  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
466
- /* @__PURE__ */ jsx4(ActionsContainer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
477
+ /* @__PURE__ */ jsx5(ActionsContainer, { children: /* @__PURE__ */ jsx5(Fragment2, { children: actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
467
478
  actions,
468
- /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
469
- ] }) }),
470
- /* @__PURE__ */ jsx4(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
479
+ /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
480
+ ] }) : /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
481
+ /* @__PURE__ */ jsx5(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
471
482
  children
472
483
  ] });
473
484
  });
@@ -483,34 +494,37 @@ var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme })
483
494
  var NodeRelationalGraph = NodeRelationalGraphFlexBox;
484
495
 
485
496
  // src/components/module/graph/NodeHover.tsx
486
- import { useLayoutEffect, useRef, useState as useState8 } from "react";
497
+ import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
498
+ import { useEffect as useEffect9, useLayoutEffect, useRef, useState as useState9 } from "react";
487
499
 
488
500
  // src/components/module/graph/Popper.tsx
489
501
  import { alpha, Chip, Popper, Typography } from "@mui/material";
490
502
  import { FlexCol as FlexCol2, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
491
503
  import { Identicon } from "@xylabs/react-identicon";
492
- import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
504
+ import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
493
505
  var ModuleHoverPopper = ({ address, element, name, ...props }) => {
494
- return /* @__PURE__ */ jsx5(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs2(FlexCol2, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
506
+ return /* @__PURE__ */ jsx6(Fragment3, { children: element ? /* @__PURE__ */ jsx6(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs2(FlexCol2, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
495
507
  /* @__PURE__ */ jsxs2(FlexRow2, { gap: 2, children: [
496
- /* @__PURE__ */ jsx5(Identicon, { value: address, size: 24 }),
497
- /* @__PURE__ */ jsx5(Typography, { children: name })
508
+ /* @__PURE__ */ jsx6(Identicon, { value: address, size: 24 }),
509
+ /* @__PURE__ */ jsx6(Typography, { children: name })
498
510
  ] }),
499
- /* @__PURE__ */ jsx5(Chip, { label: address, color: "primary" })
500
- ] }) });
511
+ /* @__PURE__ */ jsx6(Chip, { label: address, color: "primary" })
512
+ ] }) }) : null });
501
513
  };
502
514
 
503
515
  // src/components/module/graph/NodeHover.tsx
504
- import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
516
+ import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
505
517
  var ModuleGraphNodeHover = ({ node }) => {
506
518
  const { address, name } = node?.data() ?? {};
507
- const [boundingBox, setBoundingBox] = useState8(node?.renderedBoundingBox());
519
+ const [boundingBox, setBoundingBox] = useState9(node?.renderedBoundingBox());
508
520
  const ref = useRef(null);
509
- const [currentEl, setCurrentEl] = useState8(null);
510
- useLayoutEffect(() => {
511
- if (node && ref.current) {
521
+ const [currentEl, setCurrentEl] = useState9(null);
522
+ useEffect9(() => {
523
+ setCurrentEl(null);
524
+ }, [node]);
525
+ useEffect9(() => {
526
+ if (node) {
512
527
  setBoundingBox(node.renderedBoundingBox());
513
- setCurrentEl(ref.current);
514
528
  }
515
529
  const listener = () => {
516
530
  setBoundingBox(node?.renderedBoundingBox());
@@ -520,12 +534,16 @@ var ModuleGraphNodeHover = ({ node }) => {
520
534
  node?.off("position", void 0, listener);
521
535
  };
522
536
  }, [node]);
523
- return /* @__PURE__ */ jsx6(Fragment2, { children: node ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
524
- /* @__PURE__ */ jsx6(
525
- "div",
537
+ useLayoutEffect(() => {
538
+ setCurrentEl(ref.current);
539
+ }, [boundingBox]);
540
+ return /* @__PURE__ */ jsxs3(Fragment4, { children: [
541
+ /* @__PURE__ */ jsx7(
542
+ FlexCol3,
526
543
  {
527
544
  ref,
528
- style: {
545
+ sx: {
546
+ // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
529
547
  // backgroundColor: '#fff',
530
548
  // opacity: 0.25,
531
549
  cursor: "pointer",
@@ -538,46 +556,52 @@ var ModuleGraphNodeHover = ({ node }) => {
538
556
  }
539
557
  }
540
558
  ),
541
- /* @__PURE__ */ jsx6(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
542
- ] }) : null });
559
+ node ? /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsx7(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
560
+ ] });
543
561
  };
544
562
 
545
563
  // src/components/module/graph/GraphFlexBox.tsx
546
- import { jsx as jsx7 } from "react/jsx-runtime";
564
+ import { jsx as jsx8 } from "react/jsx-runtime";
547
565
  var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
548
566
  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
549
567
  const selectedElement = useSelectedElement();
550
568
  const newElements = useNewElements(selectedElement);
551
569
  const renderedElements = useRenderNewElements(newElements, hideLabels);
552
570
  const hoveredNode = useHoveredNode(renderedElements);
553
- return /* @__PURE__ */ jsx7(WithExtensions, { children: /* @__PURE__ */ jsx7(
571
+ return /* @__PURE__ */ jsx8(WithExtensions, { children: /* @__PURE__ */ jsx8(
554
572
  NodeRelationalGraphFlexBox,
555
573
  {
556
- actions: /* @__PURE__ */ jsx7(Button2, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
574
+ actions: /* @__PURE__ */ jsx8(Button2, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
557
575
  options,
558
576
  ...props,
559
- children: /* @__PURE__ */ jsx7(ModuleGraphNodeHover, { node: hoveredNode })
577
+ children: /* @__PURE__ */ jsx8(ModuleGraphNodeHover, { node: hoveredNode })
560
578
  }
561
579
  ) });
562
580
  };
581
+ var ModuleGraphFlexBoxWithProvider = (props) => {
582
+ return /* @__PURE__ */ jsx8(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx8(ModuleGraphFlexBox, { ...props }) });
583
+ };
563
584
 
564
585
  // src/components/ProvidedNodeRenderer.tsx
565
586
  import { useProvidedNode } from "@xyo-network/react-node";
566
- import { jsx as jsx8 } from "react/jsx-runtime";
587
+ import { jsx as jsx9 } from "react/jsx-runtime";
567
588
  var ProvidedNodeRenderer = ({ node, ...props }) => {
568
589
  const [providedNode] = useProvidedNode();
569
590
  const elements = useCytoscapeElements(node ?? providedNode);
570
591
  const options = useCytoscapeOptions(elements);
571
- return /* @__PURE__ */ jsx8(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
592
+ return /* @__PURE__ */ jsx9(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
572
593
  };
573
594
  export {
574
595
  ColaLayout,
575
596
  ConcentricLayout,
576
597
  CyIconSet,
577
598
  CytoscapeElements,
599
+ CytoscapeInstanceContext,
600
+ CytoscapeInstanceProvider,
578
601
  EdgeStyled,
579
602
  ModuleCardParser,
580
603
  ModuleGraphFlexBox,
604
+ ModuleGraphFlexBoxWithProvider,
581
605
  NodeIdStyles,
582
606
  NodeRelationalGraph,
583
607
  NodeRelationalGraphFlexBox,
@@ -587,6 +611,7 @@ export {
587
611
  generateIconMap,
588
612
  parseModuleType,
589
613
  useCytoscapeElements,
614
+ useCytoscapeInstance,
590
615
  useCytoscapeOptions,
591
616
  useHoveredNode,
592
617
  useNewElements,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/module/CardParser.tsx","../../src/components/module/graph/GraphFlexBox.tsx","../../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/contexts/CytoscapeInstance/Context.ts","../../src/contexts/CytoscapeInstance/use.ts","../../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","../../src/components/ProvidedNodeRenderer.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 { 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","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 options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && layout && style) {\n return {\n elements,\n layout: layout ?? ConcentricLayout,\n style: style ?? defaultStyle,\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 { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\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 { 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 <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n </ButtonGroup>\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 { NodeSingular } from 'cytoscape'\nimport { 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<HTMLDivElement | null>(null)\n\n useLayoutEffect(() => {\n if (node && ref.current) {\n setBoundingBox(node.renderedBoundingBox())\n setCurrentEl(ref.current)\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 return (\n <>\n {node ? (\n <>\n <div\n ref={ref}\n style={{\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 ></div>\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?: HTMLElement | null\n name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n return (\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 )\n}\n","import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraphProps } from './lib'\nimport { NodeRelationalGraphFlexBox } from './RelationalGraph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n const [providedNode] = useProvidedNode()\n const elements = useCytoscapeElements(node ?? providedNode)\n const options = useCytoscapeOptions(elements)\n\n return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n"],"mappings":";AAAA,SAAS,qBAAqB,2BAA2B;AACzD,SAAS,mBAAmB,yBAAyB;AAErD,SAAS,qBAAqB;AAC9B,SAAS,aAAa,kBAAkB;AAS3B;AAHN,IAAM,mBAAoD,CAAC,EAAE,OAAO,MAAM;AAC/E,UAAQ,MAAM;AAAA,IACZ,KAAK,oBAAoB,MAAM;AAC7B,aAAO,oBAAC,iBAAc,QAAQ,oBAAoB,MAAM,GAAG;AAAA,IAC7D,KAAK,kBAAkB,MAAM;AAC3B,aAAO,oBAAC,eAAY,QAAQ,kBAAkB,MAAM,GAAG;AAAA,IACzD;AACE,aAAO,oBAAC,cAAW,QAAgB;AAAA,EACvC;AACF;;;ACnBA,SAAS,UAAAA,eAAc;;;ACAvB,SAAS,sBAAsB;AAE/B,SAAS,kBAAAC,uBAAsB;AAE/B,SAAS,WAAW,gBAAgB;;;ACHpC,SAAS,kBAAAC,uBAAsB;;;ACC/B,SAAS,4BAA4B;AAErC,IAAM,UAAU;AAET,IAAM,YAAY,CAAC,cAA4B,UAAmB;AACvE,QAAM,YAAY,qBAAqB,YAAY;AAEnD,QAAM,MAAM,IAAI,UAAU,EAAE,gBAAgB,WAAW,WAAW;AAClE,QAAM,aAAa,IAAI,qBAAqB,KAAK,EAAE,CAAC;AACpD,MAAI,YAAY;AACd,eAAW,aAAa,SAAS,4BAA4B;AAC7D,eAAW,aAAa,UAAU,KAAK;AACvC,eAAW,MAAM,OAAO,SAAS;AAAA,EACnC;AAEA,SAAO,GAAG,OAAO,GAAG,OAAO,mBAAmB,WAAW,SAAS,CAAC;AACrE;;;AChBO,IAAM,kBAA2D,OAAO;AAAA,EAC7E,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AACX;;;ACVO,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;ACFO,IAAM,mBAAkC;AAAA,EAC7C,YAAY,SAAU,MAAM;AAC1B,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EACA,YAAY,WAAY;AACtB,WAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,EAChB,MAAM;AACR;;;ACXA,SAAS,uBAAAC,4BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,qBAAAC,0BAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAIzB,IAAM,kBAAkB,CAAC,WAA+C;AAC7E,MAAI,OAA0B;AAC9B,MAAI,QAAQ;AACV,QAAID,qBAAoB,MAAM,GAAG;AAC/B,aAAO;AAAA,IACT,WAAW,iBAAiB,MAAM,GAAG;AACnC,aAAO;AAAA,IACT,WAAWC,mBAAkB,MAAM,GAAG;AACpC,aAAO;AAAA,IACT,WAAW,eAAe,MAAM,GAAG;AACjC,aAAO;AAAA,IACT,WAAW,mBAAmB,MAAM,GAAG;AACrC,aAAO;AAAA,IACT,WAAW,gBAAgB,MAAM,GAAG;AAClC,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;;;ALxBO,IAAM,oBAAN,MAAM,mBAAkB;AAAA,EAC7B,OAAO,gBAAgB;AAAA,EAEvB,OAAO,UAAU,UAA6B,SAA4B;AACxE,WAAO;AAAA,MACL,MAAM;AAAA,QACJ,IAAI,GAAG,SAAS,KAAK,EAAE,IAAI,QAAQ,KAAK,EAAE;AAAA,QAC1C,QAAQ,SAAS,KAAK;AAAA,QACtB,QAAQ,QAAQ,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,aAAa,cAAc,QAAsD;AAC/E,UAAM,cAAc,mBAAkB,cAAc,MAAM;AAC1D,UAAM,cAAmC,CAAC,WAAW;AAErD,QAAI;AACF,YAAM,gBAAgB,MAAM,mBAAkB,aAAa,MAAM;AACjE,qBAAe,QAAQ,CAACC,YAAW;AACjC,cAAM,UAAU,mBAAkB,UAAUA,SAAQ,YAAY,KAAK,EAAE;AACvE,oBAAY,KAAK,OAAO;AAExB,cAAM,UAAU,mBAAkB,UAAU,aAAa,OAAO;AAChE,oBAAY,KAAK,OAAO;AAAA,MAC1B,CAAC;AAED,aAAO;AAAA,IACT,SAAS,GAAG;AACV,cAAQ,MAAM,2BAA2B,CAAC;AAC1C,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAAA,EAEA,OAAO,UAAU,QAAwB,YAAwC;AAC/E,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,UAAM,iBAAiB,OAAO,QAAQ,QAAQ,UAAU,GAAG,CAAC;AAC5D,WAAO;AAAA,MACL,MAAM;AAAA,QACJ;AAAA,QACA,IAAI;AAAA,QACJ,MAAM;AAAA,QACN;AAAA,QACA,MAAM,gBAAgB,MAAM;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,gBAAgB,CAAC,WAA8C;AACpE,WAAO,mBAAkB,UAAU,MAAM;AAAA,EAC3C;AAAA,EAEA,OAAO,cAAc,MAAe;AAClC,QAAI,CAAC;AAAM;AACX,QAAI,KAAK,SAAS,KAAK;AAAe,aAAO,GAAG,KAAK,UAAU,GAAG,EAAE,CAAC;AACrE,WAAO;AAAA,EACT;AAAA,EAEA,aAAa,aAAa,QAAwB,gBAAgB,GAA8B;AAC9F,QAAI,aAAa;AACjB,UAAM,eAAiC,CAAC;AAExC,UAAM,WAAW,OAAO,eAA+B;AACrD,UAAI,aAAa,eAAe;AAC9B,cAAM,UAAU,MAAM,WAAW,QAAQ,QAAW,EAAE,WAAW,QAAQ,UAAU,EAAE,CAAC;AACtF,cAAM,QAAQ;AAAA,UACZ,QAAQ,IAAI,OAAO,UAAU;AAC3B,gBAAI,UAAU,cAAcC,gBAAe,KAAK,GAAG;AACjD;AACA,oBAAM,SAAS,KAAK;AAAA,YAEtB,WAAW,UAAU,QAAQ;AAC3B,2BAAa,KAAK,KAAK;AAAA,YACzB;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AAErB,WAAO;AAAA,EACT;AACF;;;AMzFA;AAAA,EACE,sBAAsB;AAAA,EACtB,OAAO;AAAA,EACP,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,OAChB;AAOA,IAAM,YAAwF;AAAA,EACnG,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AACX;;;ACnBO,IAAM,eAAe,CAAC,OAAgB,kBAAuC;AAAA,EAClF,UAAU;AAAA,EACV,OAAO;AAAA,IACL;AAAA,IACA,eAAe;AAAA,IACf,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB,eAAe;AAAA,EACjB;AACF;AAEO,IAAM,aAAa,CAAC,OAA0C,SAAkB,aAAa,WAAuB;AAAA,EACzH,UAAU;AAAA,EACV,OAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,oBAAoB,CAAC,SAAS,MAAM,KAAK,KAAK,MAAM,CAAsB;AAAA,IAC1E,oBAAoB;AAAA,IACpB,OAAO,aAAa,SAAY;AAAA,IAChC,OAAO;AAAA,EACT;AACF;AAEO,IAAM,aAAa,CAAC,WAAoB,sBAA+B;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB,OAAO;AAAA,EACT;AACF;;;ARhCO,IAAM,uBAAuB,CAAC,WAAmC;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,CAAC,CAAC;AAEhE;AAAA;AAAA,IAEE,YAAY;AACV,UAAI,QAAQ;AACV,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,mBAAyD;AAC7D,QAAI,mBAAyD;AAE7D,QAAI,UAAUC,gBAAe,MAAM,GAAG;AACpC,yBAAmB,OAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AACD,yBAAmB,OAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,yBAAmB;AACnB,yBAAmB;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;;;AS3CA,SAAS,WAAAC,gBAAe;;;ACDxB,SAAS,YAAAC,iBAAgB;AAEzB,SAAS,WAAAC,gBAAe;;;ACFxB,SAAS,gBAAgB;AACzB,SAAS,eAAe;AASL,gBAAAC,YAAA;AALZ,IAAM,WAAW,MAAM;AAC5B,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,UAAU,gBAAgB;AAChC,WAAO,OAAO,QAAQ,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,aAAa,MAAM;AACtE,YAAM,OAAO,gBAAAA,KAAC,iBAAc,UAAS,SAAQ;AAC7C,UAAI,IAAyB,IAAI,UAAU,MAAM,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAC1G,aAAO;AAAA,IACT,GAAG,OAAO;AAAA,EACZ,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;;;ADVO,IAAM,oBAAoB,CAAC,aAAa,UAAU;AACvD,QAAM,QAAQC,UAAS;AACvB,QAAM,QAAQ,SAAS;AAEvB,QAAM,QAAmCC;AAAA,IACvC,MAAM;AAAA,MACJ,aAAa,MAAM,QAAQ,KAAK,SAAS,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAAA,MAClG,WAAW,OAAO,MAAM,QAAQ,QAAQ,MAAM,UAAU;AAAA,MACxD,WAAW,MAAM,QAAQ,SAAS,MAAM,QAAQ,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,OAAO,YAAY,KAAK;AAAA,EAC3B;AAEA,SAAO;AACT;;;ADfO,IAAM,sBAAsB,CACjC,UACA,OACA,WACG;AACH,QAAM,eAAe,kBAAkB;AAEvC,QAAM,UAAUC,SAAsC,MAAM;AAC1D,QAAI,YAAY,UAAU,OAAO;AAC/B,aAAO;AAAA,QACL;AAAA,QACA,QAAQ,UAAU;AAAA,QAClB,OAAO,SAAS;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,KAAK,CAAC;AAE5B,SAAO;AACT;;;AGvBA,SAAS,aAAa,aAAAC,YAAW,YAAAC,iBAAgB;;;ACDjD,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,iBAAiB,CAAC,qBAAsC;AACnE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,aAAa,cAAc,IAAIC,UAAuB;AAE7D,QAAM,eAAe,YAAY,CAAC,SAAuB;AACvD,SAAK,GAAG,iBAAiB,MAAM;AAC7B,qBAAe,IAAI;AAAA,IACrB,CAAC;AACD,SAAK,GAAG,YAAY,MAAM;AACxB,qBAAe,MAAS;AAAA,IAC1B,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,EAAAC,WAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,uBAAiB,MAAM,EAAE,QAAQ,YAAY;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,WAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,SAAG,MAAM,EAAE,QAAQ,YAAY;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,YAAY,CAAC;AAErB,SAAO;AACT;;;AG/BA,SAAS,yBAAyB;AAElC,SAAS,aAAAC,kBAAiB;AAKnB,IAAM,iBAAiB,CAAC,oBAAmC;AAChE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,EAAE,SAAS,gBAAgB,IAAI,iBAAiB,KAAK,KAAK,CAAC;AACjE,QAAM,CAAC,MAAM,IAAI,kBAAkB,eAAe;AAClD,QAAM,cAAc,qBAAqB,MAAM;AAE/C,EAAAC,WAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,YAAM,UAAU,IAAI,EAAE,YAAY,eAAe,IAAI;AACrD,UAAI,SAAS;AAAQ,YAAI,OAAO,OAAO;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,IAAI,eAAe,CAAC;AAExB,SAAO;AACT;;;ACpBA,SAAS,YAAAC,iBAAgB;AAOlB,IAAM,4BAA4B,CAAC,WAA4B;AACpE,QAAM,CAAC,YAAY,aAAa,IAAIC,UAAS,IAAI;AAEjD,QAAM,qBAAqB,MAAM;AAC/B,kBAAc,CAAC,aAAa,CAAC,QAAQ;AAAA,EACvC;AAEA,QAAM,WAAW,qBAAqB,MAAM;AAC5C,QAAM,QAAQ,kBAAkB,UAAU;AAC1C,QAAM,UAAU,oBAAoB,UAAU,OAAO,gBAAgB;AAErE,SAAO,EAAE,oBAAoB,YAAY,QAAQ;AACnD;;;ACnBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAK7B,IAAM,uBAAuB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AACnG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,UAAgC;AAEhF,EAAAC,WAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAMC,oBAAmB,IAAI,IAAI,WAAW;AAC5C,0BAAoBA,iBAAgB;AACpC,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,WAAW,CAAC;AAEhC,SAAO;AACT;;;AClBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAI7B,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,UAAuB;AAErE,EAAAC,WAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAU,MAAM,OAAO,CAAC;AAC9B,UAAI,QAAQ,OAAO;AAAG,2BAAmB,OAAO;AAAA,IAClD;AACA,QAAI,GAAG,UAAU,QAAQ;AAEzB,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,IAAI,kBAAkB,CAAC;AAE3B,SAAO;AACT;;;ACtBA,SAAS,WAAW;AACpB,OAAO,UAAU;AACjB,SAA4B,aAAAC,YAAW,YAAAC,iBAAgB;AAS9C,0BAAAC,YAAA;AAPF,IAAM,iBAA8C,CAAC,EAAE,SAAS,MAAM;AAC3E,QAAM,CAAC,aAAa,cAAc,IAAID,UAAS,KAAK;AACpD,EAAAD,WAAU,MAAM;AACd,QAAI,IAAI;AACR,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SAAO,gBAAAE,KAAA,YAAG,wBAAc,WAAW,QAAU;AAC/C;;;ACZA,SAAS,QAAQ,aAAa,cAAc;AAC5C,SAAS,SAAS,eAAe;AACjC,SAAS,4BAA4B;AACrC,OAAO,eAAyB;AAChC,SAAS,YAAY,aAAAC,YAAW,YAAAC,iBAAgB;AAgCxC,SAEE,OAAAC,MAFF;AA3BD,IAAM,6BAA6B,WAAqD,CAAC,EAAE,SAAS,UAAU,SAAS,GAAG,MAAM,GAAG,QAAQ;AAChJ,QAAM,CAAC,IAAI,KAAK,IAAIC,UAAe;AACnC,QAAM,EAAE,OAAO,aAAa,IAAI,qBAAqB;AACrD,QAAM,YAAY,qBAAqB,GAAG;AAE1C,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM;AACV,QAAI,IAAI,QAAW,EAAE;AAAA,EACvB;AAEA,EAAAC,WAAU,MAAM;AACd,QAAI,WAAW;AACb,YAAM,QAAQ,UAAU;AAAA,QACtB,WAAW,UAAU;AAAA,QACrB,GAAG;AAAA,MACL,CAAC;AACD,YAAM,KAAK;AAAA,IACb;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,EAAAA,WAAU,MAAM;AACd,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,IAAI,YAAY,CAAC;AAErB,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,oBAAAF,KAAC,oBACC,+BAAC,eACE;AAAA;AAAA,MACD,gBAAAA,KAAC,UAAO,MAAM,SAAS,SAAS,aAAa,SAAS,aAAa,mBAEnE;AAAA,OACF,GACF;AAAA,IAEA,gBAAAA,KAAC,WAAQ,YAAW,WAAU,QAAO,QAAO,UAAS,YAAW,KAAK,WAAW,OAAM,QAAO;AAAA,IAC5F;AAAA,KACH;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAEzC,IAAM,mBAAmB,OAAO,SAAS,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrF,UAAU;AAAA,EACV,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,EAAE;AAGK,IAAM,sBAAsB;;;AC7DnC,SAAS,iBAAiB,QAAQ,YAAAG,iBAAgB;;;ACDlD,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,WAAAC,UAAS,WAAAC,gBAAe;AACjC,SAAS,iBAAiB;AAYlB,SACE,OAAAC,MADF,QAAAC,aAAA;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,gBAAAD,KAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,0BAAAC,MAACH,UAAA,EAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,oBAAAG,MAACF,UAAA,EAAQ,KAAK,GACZ;AAAA,sBAAAC,KAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,gBAAAA,KAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,gBAAAA,KAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;;;ADaQ,qBAAAE,WACE,OAAAC,MADF,QAAAC,aAAA;AA1BD,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,KAAK,KAAK,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAIC,UAAS,MAAM,oBAAoB,CAAC;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAIA,UAAgC,IAAI;AAEtE,kBAAgB,MAAM;AACpB,QAAI,QAAQ,IAAI,SAAS;AACvB,qBAAe,KAAK,oBAAoB,CAAC;AACzC,mBAAa,IAAI,OAAO;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,MAAM,oBAAoB,CAAC;AAAA,IAC5C;AAEA,UAAM,GAAG,YAAY,QAAQ;AAE7B,WAAO,MAAM;AACX,YAAM,IAAI,YAAY,QAAW,QAAQ;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,gBAAAF,KAAAD,WAAA,EACG,iBACC,gBAAAE,MAAAF,WAAA,EACE;AAAA,oBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA;AAAA;AAAA,UAGL,QAAQ;AAAA,UACR,QAAQ,aAAa;AAAA,UACrB,MAAM,aAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,aAAa;AAAA,UAClB,OAAO,aAAa;AAAA,QACtB;AAAA;AAAA,IACD;AAAA,IACD,gBAAAA,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC;AAAA,KAC9F,IACE,MACN;AAEJ;;;AtB/BU,gBAAAG,YAAA;AAXH,IAAM,qBAAwD,CAAC,EAAE,YAAY,GAAG,MAAM,MAAM;AACjG,QAAM,EAAE,oBAAoB,YAAY,QAAQ,IAAI,0BAA0B,cAAc,MAAS;AACrG,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,cAAc,eAAe,eAAe;AAClD,QAAM,mBAAmB,qBAAqB,aAAa,UAAU;AACrE,QAAM,cAAc,eAAe,gBAAgB;AAEnD,SACE,gBAAAA,KAAC,kBACC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,SACE,gBAAAA,KAACC,SAAA,EAAO,MAAM,SAAS,SAAS,oBAAoB,SAAQ,aAAY,2BAExE;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEJ,0BAAAD,KAAC,wBAAqB,MAAM,aAAa;AAAA;AAAA,EAC3C,GACF;AAEJ;;;AwBjCA,SAAS,uBAAuB;AAgBvB,gBAAAE,YAAA;AALF,IAAM,uBAA4D,CAAC,EAAE,MAAM,GAAG,MAAM,MAAM;AAC/F,QAAM,CAAC,YAAY,IAAI,gBAAgB;AACvC,QAAM,WAAW,qBAAqB,QAAQ,YAAY;AAC1D,QAAM,UAAU,oBAAoB,QAAQ;AAE5C,SAAO,gBAAAA,KAAC,8BAA2B,YAAW,WAAU,UAAU,GAAG,QAAO,QAAO,SAAmB,GAAG,OAAO;AAClH;","names":["Button","isNodeInstance","isNodeInstance","isArchivistInstance","isDivinerInstance","module","isNodeInstance","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","jsx","useState","useEffect","useState","FlexCol","FlexRow","jsx","jsxs","Fragment","jsx","jsxs","useState","jsx","Button","jsx"]}
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","../../src/components/ProvidedNodeRenderer.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","import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraphProps } from './lib'\nimport { NodeRelationalGraphFlexBox } from './RelationalGraph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n const [providedNode] = useProvidedNode()\n const elements = useCytoscapeElements(node ?? providedNode)\n const options = useCytoscapeOptions(elements)\n\n return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\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","jsx"]}