@xyo-network/react-node-renderer 2.64.0 → 2.64.1

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 (78) hide show
  1. package/dist/browser/Cytoscape/CytoscapeElements.js +40 -9
  2. package/dist/browser/Cytoscape/CytoscapeElements.js.map +1 -1
  3. package/dist/browser/Cytoscape/CytoscapeIcons.js +2 -1
  4. package/dist/browser/Cytoscape/CytoscapeIcons.js.map +1 -1
  5. package/dist/browser/Cytoscape/CytoscapeStyles.js +4 -3
  6. package/dist/browser/Cytoscape/CytoscapeStyles.js.map +1 -1
  7. package/dist/browser/Cytoscape/index.js +220 -4
  8. package/dist/browser/Cytoscape/index.js.map +1 -1
  9. package/dist/browser/Cytoscape/lib/encodeSvg.js +3 -2
  10. package/dist/browser/Cytoscape/lib/encodeSvg.js.map +1 -1
  11. package/dist/browser/Cytoscape/lib/iconMap.js +2 -1
  12. package/dist/browser/Cytoscape/lib/iconMap.js.map +1 -1
  13. package/dist/browser/Cytoscape/lib/index.js +80 -5
  14. package/dist/browser/Cytoscape/lib/index.js.map +1 -1
  15. package/dist/browser/Cytoscape/lib/layout/ColaLayout.js +2 -1
  16. package/dist/browser/Cytoscape/lib/layout/ColaLayout.js.map +1 -1
  17. package/dist/browser/Cytoscape/lib/layout/ConcentricLayout.js +2 -1
  18. package/dist/browser/Cytoscape/lib/layout/ConcentricLayout.js.map +1 -1
  19. package/dist/browser/Cytoscape/lib/layout/index.js +22 -2
  20. package/dist/browser/Cytoscape/lib/layout/index.js.map +1 -1
  21. package/dist/browser/Cytoscape/lib/parseModuleType.js +2 -1
  22. package/dist/browser/Cytoscape/lib/parseModuleType.js.map +1 -1
  23. package/dist/browser/components/ModuleCardParser.js +3 -2
  24. package/dist/browser/components/ModuleCardParser.js.map +1 -1
  25. package/dist/browser/components/ModuleGraphFlexBox.js +459 -11
  26. package/dist/browser/components/ModuleGraphFlexBox.js.map +1 -1
  27. package/dist/browser/components/ProvidedNodeRenderer.js +352 -5
  28. package/dist/browser/components/ProvidedNodeRenderer.js.map +1 -1
  29. package/dist/browser/components/RelationalGraph.js +15 -5
  30. package/dist/browser/components/RelationalGraph.js.map +1 -1
  31. package/dist/browser/components/WithCola.js +3 -2
  32. package/dist/browser/components/WithCola.js.map +1 -1
  33. package/dist/browser/components/cytoscape-extensions/WithExtensions.js +3 -2
  34. package/dist/browser/components/cytoscape-extensions/WithExtensions.js.map +1 -1
  35. package/dist/browser/components/cytoscape-extensions/index.js +18 -1
  36. package/dist/browser/components/cytoscape-extensions/index.js.map +1 -1
  37. package/dist/browser/components/index.js +381 -4
  38. package/dist/browser/components/index.js.map +1 -1
  39. package/dist/browser/components/lib/index.js +0 -1
  40. package/dist/browser/components/lib/index.js.map +1 -1
  41. package/dist/browser/components/story/TestData.js +4 -3
  42. package/dist/browser/components/story/TestData.js.map +1 -1
  43. package/dist/browser/components/story/index.js +48 -1
  44. package/dist/browser/components/story/index.js.map +1 -1
  45. package/dist/browser/contexts/CytoscapeInstance/Context.js +2 -1
  46. package/dist/browser/contexts/CytoscapeInstance/Context.js.map +1 -1
  47. package/dist/browser/contexts/CytoscapeInstance/Provider.js +9 -3
  48. package/dist/browser/contexts/CytoscapeInstance/Provider.js.map +1 -1
  49. package/dist/browser/contexts/CytoscapeInstance/index.js +23 -4
  50. package/dist/browser/contexts/CytoscapeInstance/index.js.map +1 -1
  51. package/dist/browser/contexts/CytoscapeInstance/use.js +8 -2
  52. package/dist/browser/contexts/CytoscapeInstance/use.js.map +1 -1
  53. package/dist/browser/contexts/index.js +23 -1
  54. package/dist/browser/contexts/index.js.map +1 -1
  55. package/dist/browser/hooks/cytoscape/index.js +395 -6
  56. package/dist/browser/hooks/cytoscape/index.js.map +1 -1
  57. package/dist/browser/hooks/cytoscape/useAddNewElements.js +51 -4
  58. package/dist/browser/hooks/cytoscape/useAddNewElements.js.map +1 -1
  59. package/dist/browser/hooks/cytoscape/useCytoscapeElements.js +113 -4
  60. package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
  61. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js +136 -4
  62. package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
  63. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js +105 -4
  64. package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
  65. package/dist/browser/hooks/cytoscape/useIcons.js +51 -3
  66. package/dist/browser/hooks/cytoscape/useIcons.js.map +1 -1
  67. package/dist/browser/hooks/cytoscape/useNewElements.js +160 -5
  68. package/dist/browser/hooks/cytoscape/useNewElements.js.map +1 -1
  69. package/dist/browser/hooks/cytoscape/usePopperListener.js +2 -1
  70. package/dist/browser/hooks/cytoscape/usePopperListener.js.map +1 -1
  71. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +306 -7
  72. package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
  73. package/dist/browser/hooks/index.js +395 -1
  74. package/dist/browser/hooks/index.js.map +1 -1
  75. package/dist/browser/index.js +484 -3
  76. package/dist/browser/index.js.map +1 -1
  77. package/dist/docs.json +88 -88
  78. package/package.json +25 -25
@@ -1,4 +1,485 @@
1
- export * from "./components";
2
- export * from "./Cytoscape";
3
- export * from "./hooks";
1
+ // src/components/ModuleCardParser.tsx
2
+ import { asArchivistInstance } from "@xyo-network/archivist-model";
3
+ import { asDivinerInstance } from "@xyo-network/diviner-model";
4
+ import { ArchivistCard } from "@xyo-network/react-archivist";
5
+ import { DivinerCard, ModuleCard } from "@xyo-network/react-module";
6
+ import { jsx } from "react/jsx-runtime";
7
+ var ModuleCardParser = ({ module }) => {
8
+ switch (true) {
9
+ case module?.config.schema.includes("archivist"):
10
+ return /* @__PURE__ */ jsx(ArchivistCard, { module: asArchivistInstance(module) });
11
+ case module?.config.schema.includes("diviner"):
12
+ return /* @__PURE__ */ jsx(DivinerCard, { module: asDivinerInstance(module) });
13
+ default:
14
+ return /* @__PURE__ */ jsx(ModuleCard, { module });
15
+ }
16
+ };
17
+
18
+ // src/components/ProvidedNodeRenderer.tsx
19
+ import { useProvidedNode } from "@xyo-network/react-node";
20
+
21
+ // src/hooks/cytoscape/useAddNewElements.tsx
22
+ import { useEffect } from "react";
23
+
24
+ // src/contexts/CytoscapeInstance/Context.ts
25
+ import { createContextEx } from "@xyo-network/react-shared";
26
+ var CytoscapeInstanceContext = createContextEx();
27
+
28
+ // src/contexts/CytoscapeInstance/use.ts
29
+ import { useContextEx } from "@xyo-network/react-shared";
30
+ var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
31
+
32
+ // src/Cytoscape/CytoscapeElements.ts
33
+ import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
34
+
35
+ // src/Cytoscape/lib/encodeSvg.ts
36
+ import { renderToStaticMarkup } from "react-dom/server";
37
+ var dataUri = "data:image/svg+xml,";
38
+ var encodeSvg = (reactElement, color) => {
39
+ const svgString = renderToStaticMarkup(reactElement);
40
+ const doc = new DOMParser().parseFromString(svgString, "text/html");
41
+ const svgElement = doc.getElementsByTagName("svg")[0];
42
+ if (svgElement) {
43
+ svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
44
+ svgElement.setAttribute("height", "100");
45
+ svgElement.style.fill = color ?? "black";
46
+ }
47
+ return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
48
+ };
49
+
50
+ // src/Cytoscape/lib/iconMap.ts
51
+ var generateIconMap = () => ({
52
+ archivist: "",
53
+ bridge: "",
54
+ diviner: "",
55
+ module: "",
56
+ node: "",
57
+ sentinel: "",
58
+ witness: ""
59
+ });
60
+
61
+ // src/Cytoscape/lib/layout/ColaLayout.ts
62
+ var ColaLayout = {
63
+ centerGraph: false,
64
+ convergenceThreshold: 0.01,
65
+ name: "cola"
66
+ };
67
+
68
+ // src/Cytoscape/lib/layout/ConcentricLayout.ts
69
+ var ConcentricLayout = {
70
+ concentric: function(node) {
71
+ return node.degree();
72
+ },
73
+ levelWidth: function() {
74
+ return 2;
75
+ },
76
+ minNodeSpacing: 75,
77
+ name: "concentric"
78
+ };
79
+
80
+ // src/Cytoscape/lib/parseModuleType.ts
81
+ import { isArchivistInstance } from "@xyo-network/archivist-model";
82
+ import { isBridgeInstance } from "@xyo-network/bridge-model";
83
+ import { isDivinerInstance } from "@xyo-network/diviner-model";
84
+ import { isNodeInstance } from "@xyo-network/node-model";
85
+ import { isSentinelInstance } from "@xyo-network/sentinel";
86
+ import { isWitnessModule } from "@xyo-network/witness";
87
+ var parseModuleType = (module) => {
88
+ let type = "module";
89
+ if (module) {
90
+ if (isArchivistInstance(module)) {
91
+ type = "archivist";
92
+ } else if (isBridgeInstance(module)) {
93
+ type = "bridge";
94
+ } else if (isDivinerInstance(module)) {
95
+ type = "diviner";
96
+ } else if (isNodeInstance(module)) {
97
+ type = "node";
98
+ } else if (isSentinelInstance(module)) {
99
+ type = "sentinel";
100
+ } else if (isWitnessModule(module)) {
101
+ type = "witness";
102
+ } else {
103
+ type = "module";
104
+ }
105
+ }
106
+ return type;
107
+ };
108
+
109
+ // src/Cytoscape/CytoscapeElements.ts
110
+ var CytoscapeElements = class _CytoscapeElements {
111
+ static MaxNameLength = 20;
112
+ static buildEdge(rootNode, newNode) {
113
+ return {
114
+ data: {
115
+ id: `${rootNode.data.id}/${newNode.data.id}`,
116
+ source: rootNode.data.id,
117
+ target: newNode.data.id
118
+ }
119
+ };
120
+ }
121
+ static async buildElements(module) {
122
+ const newRootNode = _CytoscapeElements.buildRootNode(module);
123
+ const newElements = [newRootNode];
124
+ try {
125
+ const childElements = await _CytoscapeElements.recurseNodes(module);
126
+ childElements?.forEach((module2) => {
127
+ const newNode = _CytoscapeElements.buildNode(module2, newRootNode.data.id);
128
+ newElements.push(newNode);
129
+ const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
130
+ newElements.push(newEdge);
131
+ });
132
+ return newElements;
133
+ } catch (e) {
134
+ console.error("error resolving modules", e);
135
+ return [];
136
+ }
137
+ }
138
+ static buildNode(module, rootNodeId) {
139
+ const { address, config } = module;
140
+ const normalizedName = config.name ?? address.substring(0, 8);
141
+ return {
142
+ data: {
143
+ address,
144
+ id: address,
145
+ name: normalizedName,
146
+ rootNodeId,
147
+ type: parseModuleType(module)
148
+ }
149
+ };
150
+ }
151
+ static buildRootNode = (module) => {
152
+ return _CytoscapeElements.buildNode(module);
153
+ };
154
+ static normalizeName(name) {
155
+ if (!name)
156
+ return;
157
+ if (name.length > this.MaxNameLength)
158
+ return `${name.substring(0, 20)}...`;
159
+ return name;
160
+ }
161
+ static async recurseNodes(module, maxTraversals = 1) {
162
+ let localDepth = 0;
163
+ const childModules = [];
164
+ const traverse = async (nestedNode) => {
165
+ if (localDepth < maxTraversals) {
166
+ const modules = await nestedNode.resolve(void 0, { direction: "down", maxDepth: 2 });
167
+ await Promise.all(
168
+ modules.map(async (child) => {
169
+ if (child !== nestedNode && isNodeInstance2(child)) {
170
+ localDepth++;
171
+ await traverse(child);
172
+ } else if (child !== module) {
173
+ childModules.push(child);
174
+ }
175
+ })
176
+ );
177
+ }
178
+ };
179
+ await traverse(module);
180
+ return childModules;
181
+ }
182
+ };
183
+
184
+ // src/Cytoscape/CytoscapeIcons.tsx
185
+ import {
186
+ BubbleChartRounded as BubbleChartRoundedIcon,
187
+ Hub as HubIcon,
188
+ InsertLinkRounded as InsertLinkRoundedIcon,
189
+ Inventory2Rounded as Inventory2RoundedIcon,
190
+ QuestionMarkRounded as QuestionMarkRoundedIcon,
191
+ TimerRounded as TimerRoundedIcon,
192
+ VisibilityRounded as VisibilityRoundedIcon
193
+ } from "@mui/icons-material";
194
+ var CyIconSet = {
195
+ archivist: Inventory2RoundedIcon,
196
+ bridge: InsertLinkRoundedIcon,
197
+ diviner: BubbleChartRoundedIcon,
198
+ module: QuestionMarkRoundedIcon,
199
+ node: HubIcon,
200
+ sentinel: TimerRoundedIcon,
201
+ witness: VisibilityRoundedIcon
202
+ };
203
+
204
+ // src/Cytoscape/CytoscapeStyles.ts
205
+ var NodeIdStyles = (color, outlineColor) => ({
206
+ selector: "node[name]",
207
+ style: {
208
+ color,
209
+ "font-family": "Lexend Deca, Helvetica, sans-serif",
210
+ "font-size": 12,
211
+ "overlay-padding": "6px",
212
+ "text-halign": "center",
213
+ "text-outline-color": outlineColor,
214
+ "text-outline-width": "1px",
215
+ "text-valign": "top"
216
+ }
217
+ });
218
+ var NodeStyled = (icons, bgColor, hideLabels = false) => ({
219
+ selector: "node",
220
+ style: {
221
+ "background-color": bgColor,
222
+ "background-height": "75%",
223
+ "background-image": (elem) => icons[elem.data("type")],
224
+ "background-width": "24",
225
+ label: hideLabels ? void 0 : "data(name)",
226
+ shape: "round-rectangle"
227
+ }
228
+ });
229
+ var EdgeStyled = (lineColor, targetArrowColor) => ({
230
+ selector: "edge",
231
+ style: {
232
+ "curve-style": "bezier",
233
+ "line-color": lineColor,
234
+ "line-opacity": 0.1,
235
+ "target-arrow-color": targetArrowColor,
236
+ "target-arrow-shape": "triangle",
237
+ width: 3
238
+ }
239
+ });
240
+
241
+ // src/hooks/cytoscape/usePopperListener.tsx
242
+ import { useTheme } from "@mui/material";
243
+ import { useCallback } from "react";
244
+ var usePopperListener = () => {
245
+ const theme = useTheme();
246
+ const popperListener = useCallback(
247
+ (node, hideLabels, cy) => {
248
+ const div = document.createElement("div");
249
+ const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
250
+ const popper = node.popper({
251
+ content: () => {
252
+ div.innerHTML = node.data().name;
253
+ div.style.opacity = "0";
254
+ div.style.transition = "opacity .25s";
255
+ div.style.textShadow = `0 0 3px ${shadowColor}`;
256
+ document.body.appendChild(div);
257
+ return div;
258
+ }
259
+ });
260
+ const update = async () => {
261
+ await popper.update();
262
+ };
263
+ node.on("position", update);
264
+ node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
265
+ node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
266
+ cy?.on("pan zoom resize", update);
267
+ },
268
+ [theme]
269
+ );
270
+ return popperListener;
271
+ };
272
+
273
+ // src/hooks/cytoscape/useAddNewElements.tsx
274
+ var useAddNewElements = (newElements = [], hideLabels) => {
275
+ const { cy } = useCytoscapeInstance(true);
276
+ const popperListener = usePopperListener();
277
+ useEffect(() => {
278
+ if (newElements.length > 1) {
279
+ const renderedElements = cy?.add(newElements);
280
+ renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy));
281
+ cy?.layout(ColaLayout).run();
282
+ }
283
+ }, [cy, hideLabels, newElements, popperListener]);
284
+ };
285
+
286
+ // src/hooks/cytoscape/useCytoscapeElements.ts
287
+ import { useAsyncEffect } from "@xylabs/react-async-effect";
288
+ import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
289
+ import { useEffect as useEffect2, useState } from "react";
290
+ var useCytoscapeElements = (module) => {
291
+ const [elements, setElements] = useState([]);
292
+ useAsyncEffect(
293
+ // eslint-disable-next-line react-hooks/exhaustive-deps
294
+ async () => {
295
+ if (module) {
296
+ const newElements = await CytoscapeElements.buildElements(module) ?? [];
297
+ setElements(newElements);
298
+ }
299
+ },
300
+ [module]
301
+ );
302
+ useEffect2(() => {
303
+ let attachedListener = void 0;
304
+ let detachedListener = void 0;
305
+ if (module && isNodeInstance3(module)) {
306
+ attachedListener = module.on("moduleAttached", async () => {
307
+ const newElements = await CytoscapeElements.buildElements(module) ?? [];
308
+ setElements(newElements);
309
+ });
310
+ detachedListener = module.on("moduleDetached", async () => {
311
+ const newElements = await CytoscapeElements.buildElements(module) ?? [];
312
+ setElements(newElements);
313
+ });
314
+ }
315
+ return () => {
316
+ attachedListener?.();
317
+ detachedListener?.();
318
+ };
319
+ }, [module]);
320
+ return elements;
321
+ };
322
+
323
+ // src/hooks/cytoscape/useCytoscapeOptions.ts
324
+ import { useMemo as useMemo3 } from "react";
325
+
326
+ // src/hooks/cytoscape/useCytoscapeStyle.tsx
327
+ import { useTheme as useTheme3 } from "@mui/material";
328
+ import { useMemo as useMemo2 } from "react";
329
+
330
+ // src/hooks/cytoscape/useIcons.tsx
331
+ import { useTheme as useTheme2 } from "@mui/material";
332
+ import { useMemo } from "react";
333
+ import { jsx as jsx2 } from "react/jsx-runtime";
334
+ var useIcons = () => {
335
+ const theme = useTheme2();
336
+ const icons = useMemo(() => {
337
+ const iconMap = generateIconMap();
338
+ return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
339
+ const icon = /* @__PURE__ */ jsx2(IconComponent, { fontSize: "small" });
340
+ acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
341
+ return acc;
342
+ }, iconMap);
343
+ }, [theme.palette]);
344
+ return icons;
345
+ };
346
+
347
+ // src/hooks/cytoscape/useCytoscapeStyle.tsx
348
+ var useCytoscapeStyle = (hideLabels = false) => {
349
+ const theme = useTheme3();
350
+ const icons = useIcons();
351
+ const style = useMemo2(
352
+ () => [
353
+ NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
354
+ NodeStyled(icons, theme.palette.primary.main, hideLabels),
355
+ EdgeStyled(theme.palette.divider, theme.palette.divider)
356
+ ],
357
+ [icons, hideLabels, theme]
358
+ );
359
+ return style;
360
+ };
361
+
362
+ // src/hooks/cytoscape/useCytoscapeOptions.ts
363
+ var useCytoscapeOptions = (elements, style, layout) => {
364
+ const defaultStyle = useCytoscapeStyle();
365
+ const options = useMemo3(() => {
366
+ if (elements && layout && style) {
367
+ return {
368
+ elements,
369
+ layout: layout ?? ConcentricLayout,
370
+ style: style ?? defaultStyle
371
+ };
372
+ }
373
+ }, [elements, layout, style]);
374
+ return options;
375
+ };
376
+
377
+ // src/hooks/cytoscape/useNewElements.tsx
378
+ import { useModuleFromNode } from "@xyo-network/react-node";
379
+ import { useEffect as useEffect3, useState as useState2 } from "react";
380
+ var useNewElements = () => {
381
+ const { cy } = useCytoscapeInstance(true);
382
+ const [selectedElement, setSelectedElement] = useState2();
383
+ const { address: selectedAddress } = selectedElement?.data() ?? {};
384
+ const [module] = useModuleFromNode(selectedAddress);
385
+ const newElements = useCytoscapeElements(module);
386
+ useEffect3(() => {
387
+ if (selectedAddress) {
388
+ const element = cy?.$(`node[id="${selectedAddress}"]`);
389
+ if (element?.length)
390
+ cy?.center(element);
391
+ }
392
+ }, [cy, selectedAddress]);
393
+ return { newElements, setSelectedElement };
394
+ };
395
+
396
+ // src/hooks/cytoscape/useRelationalGraphOptions.tsx
397
+ import { useState as useState3 } from "react";
398
+ var useRelationalGraphOptions = (module) => {
399
+ const [hideLabels, setHideLabels] = useState3(false);
400
+ const handleToggleLabels = () => {
401
+ setHideLabels((oldValue) => !oldValue);
402
+ };
403
+ const elements = useCytoscapeElements(module);
404
+ const style = useCytoscapeStyle(hideLabels);
405
+ const options = useCytoscapeOptions(elements, style, ColaLayout);
406
+ return { handleToggleLabels, hideLabels, options };
407
+ };
408
+
409
+ // src/components/RelationalGraph.tsx
410
+ import { Button, ButtonGroup, styled } from "@mui/material";
411
+ import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
412
+ import { useShareForwardedRef } from "@xyo-network/react-shared";
413
+ import cytoscape from "cytoscape";
414
+ import { forwardRef, useEffect as useEffect4, useState as useState4 } from "react";
415
+ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
416
+ var NodeRelationalGraphFlexBox = forwardRef(({ actions, options, ...props }, ref) => {
417
+ const [cy, setCy] = useState4();
418
+ const { setCy: setCyContext } = useCytoscapeInstance();
419
+ const sharedRef = useShareForwardedRef(ref);
420
+ const handleReset = () => {
421
+ cy?.reset();
422
+ cy?.fit(void 0, 20);
423
+ };
424
+ useEffect4(() => {
425
+ if (sharedRef) {
426
+ const newCy = cytoscape({
427
+ container: sharedRef.current,
428
+ ...options
429
+ });
430
+ setCy(newCy);
431
+ }
432
+ }, [options, sharedRef]);
433
+ useEffect4(() => {
434
+ setCyContext?.(cy);
435
+ }, [cy, setCyContext]);
436
+ return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
437
+ /* @__PURE__ */ jsx3(ActionsContainer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
438
+ actions,
439
+ /* @__PURE__ */ jsx3(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
440
+ ] }) }),
441
+ /* @__PURE__ */ jsx3(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })
442
+ ] });
443
+ });
444
+ NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
445
+ var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
446
+ flexWrap: "wrap",
447
+ gap: theme.spacing(1),
448
+ position: "absolute",
449
+ right: "10px",
450
+ top: "10px",
451
+ zIndex: 2
452
+ }));
453
+ var NodeRelationalGraph = NodeRelationalGraphFlexBox;
454
+
455
+ // src/components/ProvidedNodeRenderer.tsx
456
+ import { jsx as jsx4 } from "react/jsx-runtime";
457
+ var ProvidedNodeRenderer = ({ node, ...props }) => {
458
+ const [providedNode] = useProvidedNode();
459
+ const elements = useCytoscapeElements(node ?? providedNode);
460
+ const options = useCytoscapeOptions(elements);
461
+ return /* @__PURE__ */ jsx4(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
462
+ };
463
+ export {
464
+ ColaLayout,
465
+ ConcentricLayout,
466
+ CyIconSet,
467
+ CytoscapeElements,
468
+ EdgeStyled,
469
+ ModuleCardParser,
470
+ NodeIdStyles,
471
+ NodeRelationalGraph,
472
+ NodeRelationalGraphFlexBox,
473
+ NodeStyled,
474
+ ProvidedNodeRenderer,
475
+ encodeSvg,
476
+ generateIconMap,
477
+ parseModuleType,
478
+ useAddNewElements,
479
+ useCytoscapeElements,
480
+ useCytoscapeOptions,
481
+ useNewElements,
482
+ usePopperListener,
483
+ useRelationalGraphOptions
484
+ };
4
485
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components'\nexport * from './Cytoscape'\nexport * from './hooks'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/components/ModuleCardParser.tsx","../../src/components/ProvidedNodeRenderer.tsx","../../src/hooks/cytoscape/useAddNewElements.tsx","../../src/contexts/CytoscapeInstance/Context.ts","../../src/contexts/CytoscapeInstance/use.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/usePopperListener.tsx","../../src/hooks/cytoscape/useCytoscapeElements.ts","../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../src/hooks/cytoscape/useIcons.tsx","../../src/hooks/cytoscape/useNewElements.tsx","../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../src/components/RelationalGraph.tsx"],"sourcesContent":["import { asArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance } 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 module?.config.schema.includes('archivist'):\n return <ArchivistCard module={asArchivistInstance(module)} />\n case module?.config.schema.includes('diviner'):\n return <DivinerCard module={asDivinerInstance(module)} />\n default:\n return <ModuleCard module={module} />\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","import { ElementDefinition } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\nimport { usePopperListener } from './usePopperListener'\n\nexport const useAddNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const popperListener = usePopperListener()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy))\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements, popperListener])\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 { 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 { CytoscapeOptions } from 'cytoscape'\n\nexport const ConcentricLayout: CytoscapeOptions['layout'] = {\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 { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n const theme = useTheme()\n\n const popperListener = useCallback(\n (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n const div = document.createElement('div')\n const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n const popper = node.popper({\n content: () => {\n div.innerHTML = node.data().name\n div.style.opacity = '0'\n div.style.transition = 'opacity .25s'\n div.style.textShadow = `0 0 3px ${shadowColor}`\n\n document.body.appendChild(div)\n\n return div\n },\n })\n\n const update = async () => {\n await popper.update()\n }\n\n node.on('position', update)\n node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n cy?.on('pan zoom resize', update)\n },\n [theme],\n )\n\n return popperListener\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 { 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 { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeDataDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeDataDefinition>()\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, setSelectedElement }\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ColaLayout } 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(false)\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, ColaLayout)\n\n return { handleToggleLabels, hideLabels, options }\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, 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 </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"],"mappings":"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","names":["isNodeInstance","module","isNodeInstance","isNodeInstance","useEffect","useEffect","isNodeInstance","useMemo","useTheme","useMemo","useTheme","jsx","useTheme","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useState","useState","useEffect","useState","jsx","useState","useEffect","jsx"]}