@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.
- package/dist/browser/Cytoscape/CytoscapeElements.js +40 -9
- package/dist/browser/Cytoscape/CytoscapeElements.js.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeIcons.js +2 -1
- package/dist/browser/Cytoscape/CytoscapeIcons.js.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.js +4 -3
- package/dist/browser/Cytoscape/CytoscapeStyles.js.map +1 -1
- package/dist/browser/Cytoscape/index.js +220 -4
- package/dist/browser/Cytoscape/index.js.map +1 -1
- package/dist/browser/Cytoscape/lib/encodeSvg.js +3 -2
- package/dist/browser/Cytoscape/lib/encodeSvg.js.map +1 -1
- package/dist/browser/Cytoscape/lib/iconMap.js +2 -1
- package/dist/browser/Cytoscape/lib/iconMap.js.map +1 -1
- package/dist/browser/Cytoscape/lib/index.js +80 -5
- package/dist/browser/Cytoscape/lib/index.js.map +1 -1
- package/dist/browser/Cytoscape/lib/layout/ColaLayout.js +2 -1
- package/dist/browser/Cytoscape/lib/layout/ColaLayout.js.map +1 -1
- package/dist/browser/Cytoscape/lib/layout/ConcentricLayout.js +2 -1
- package/dist/browser/Cytoscape/lib/layout/ConcentricLayout.js.map +1 -1
- package/dist/browser/Cytoscape/lib/layout/index.js +22 -2
- package/dist/browser/Cytoscape/lib/layout/index.js.map +1 -1
- package/dist/browser/Cytoscape/lib/parseModuleType.js +2 -1
- package/dist/browser/Cytoscape/lib/parseModuleType.js.map +1 -1
- package/dist/browser/components/ModuleCardParser.js +3 -2
- package/dist/browser/components/ModuleCardParser.js.map +1 -1
- package/dist/browser/components/ModuleGraphFlexBox.js +459 -11
- package/dist/browser/components/ModuleGraphFlexBox.js.map +1 -1
- package/dist/browser/components/ProvidedNodeRenderer.js +352 -5
- package/dist/browser/components/ProvidedNodeRenderer.js.map +1 -1
- package/dist/browser/components/RelationalGraph.js +15 -5
- package/dist/browser/components/RelationalGraph.js.map +1 -1
- package/dist/browser/components/WithCola.js +3 -2
- package/dist/browser/components/WithCola.js.map +1 -1
- package/dist/browser/components/cytoscape-extensions/WithExtensions.js +3 -2
- package/dist/browser/components/cytoscape-extensions/WithExtensions.js.map +1 -1
- package/dist/browser/components/cytoscape-extensions/index.js +18 -1
- package/dist/browser/components/cytoscape-extensions/index.js.map +1 -1
- package/dist/browser/components/index.js +381 -4
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/components/lib/index.js +0 -1
- package/dist/browser/components/lib/index.js.map +1 -1
- package/dist/browser/components/story/TestData.js +4 -3
- package/dist/browser/components/story/TestData.js.map +1 -1
- package/dist/browser/components/story/index.js +48 -1
- package/dist/browser/components/story/index.js.map +1 -1
- package/dist/browser/contexts/CytoscapeInstance/Context.js +2 -1
- package/dist/browser/contexts/CytoscapeInstance/Context.js.map +1 -1
- package/dist/browser/contexts/CytoscapeInstance/Provider.js +9 -3
- package/dist/browser/contexts/CytoscapeInstance/Provider.js.map +1 -1
- package/dist/browser/contexts/CytoscapeInstance/index.js +23 -4
- package/dist/browser/contexts/CytoscapeInstance/index.js.map +1 -1
- package/dist/browser/contexts/CytoscapeInstance/use.js +8 -2
- package/dist/browser/contexts/CytoscapeInstance/use.js.map +1 -1
- package/dist/browser/contexts/index.js +23 -1
- package/dist/browser/contexts/index.js.map +1 -1
- package/dist/browser/hooks/cytoscape/index.js +395 -6
- package/dist/browser/hooks/cytoscape/index.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useAddNewElements.js +51 -4
- package/dist/browser/hooks/cytoscape/useAddNewElements.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.js +113 -4
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js +136 -4
- package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js +105 -4
- package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useIcons.js +51 -3
- package/dist/browser/hooks/cytoscape/useIcons.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.js +160 -5
- package/dist/browser/hooks/cytoscape/useNewElements.js.map +1 -1
- package/dist/browser/hooks/cytoscape/usePopperListener.js +2 -1
- package/dist/browser/hooks/cytoscape/usePopperListener.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +306 -7
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
- package/dist/browser/hooks/index.js +395 -1
- package/dist/browser/hooks/index.js.map +1 -1
- package/dist/browser/index.js +484 -3
- package/dist/browser/index.js.map +1 -1
- package/dist/docs.json +88 -88
- package/package.json +25 -25
package/dist/browser/index.js
CHANGED
|
@@ -1,4 +1,485 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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":";AAAA,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAC9B,SAAS,aAAa,kBAAkB;AAS3B;AAHN,IAAM,mBAAoD,CAAC,EAAE,OAAO,MAAM;AAC/E,UAAQ,MAAM;AAAA,IACZ,KAAK,QAAQ,OAAO,OAAO,SAAS,WAAW;AAC7C,aAAO,oBAAC,iBAAc,QAAQ,oBAAoB,MAAM,GAAG;AAAA,IAC7D,KAAK,QAAQ,OAAO,OAAO,SAAS,SAAS;AAC3C,aAAO,oBAAC,eAAY,QAAQ,kBAAkB,MAAM,GAAG;AAAA,IACzD;AACE,aAAO,oBAAC,cAAW,QAAgB;AAAA,EACvC;AACF;;;ACjBA,SAAS,uBAAuB;;;ACDhC,SAAS,iBAAiB;;;ACD1B,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACH9H,SAAS,kBAAAA,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,mBAA+C;AAAA,EAC1D,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,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAIzB,IAAM,kBAAkB,CAAC,WAA+C;AAC7E,MAAI,OAA0B;AAC9B,MAAI,QAAQ;AACV,QAAI,oBAAoB,MAAM,GAAG;AAC/B,aAAO;AAAA,IACT,WAAW,iBAAiB,MAAM,GAAG;AACnC,aAAO;AAAA,IACT,WAAW,kBAAkB,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;;;ACxCA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAErB,IAAM,oBAAoB,MAAM;AACrC,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAoB,YAAsB,OAAc;AACvD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO;AAE5E,YAAM,SAAS,KAAK,OAAO;AAAA,QACzB,SAAS,MAAM;AACb,cAAI,YAAY,KAAK,KAAK,EAAE;AAC5B,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,aAAa;AACvB,cAAI,MAAM,aAAa,WAAW,WAAW;AAE7C,mBAAS,KAAK,YAAY,GAAG;AAE7B,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,SAAS,YAAY;AACzB,cAAM,OAAO,OAAO;AAAA,MACtB;AAEA,WAAK,GAAG,YAAY,MAAM;AAC1B,WAAK,GAAG,aAAa,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAC/E,WAAK,GAAG,YAAY,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAE9E,UAAI,GAAG,mBAAmB,MAAM;AAAA,IAClC;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AACT;;;AXhCO,IAAM,oBAAoB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AAChG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,iBAAiB,kBAAkB;AAEzC,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAM,mBAAmB,IAAI,IAAI,WAAW;AAC5C,wBAAkB,MAAM,EAAE,QAAQ,CAAC,SAAS,eAAe,MAAM,YAAY,EAAE,CAAC;AAChF,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,aAAa,cAAc,CAAC;AAClD;;;AYlBA,SAAS,sBAAsB;AAE/B,SAAS,kBAAAC,uBAAsB;AAE/B,SAAS,aAAAC,YAAW,gBAAgB;AAI7B,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,EAAAC,WAAU,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;;;AC3CA,SAAS,WAAAC,gBAAe;;;ACDxB,SAAS,YAAAC,iBAAgB;AAEzB,SAAS,WAAAC,gBAAe;;;ACFxB,SAAS,YAAAC,iBAAgB;AACzB,SAAS,eAAe;AASL,gBAAAC,YAAA;AALZ,IAAM,WAAW,MAAM;AAC5B,QAAM,QAAQC,UAAS;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,gBAAAD,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,QAAQE,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;;;AGxBA,SAAS,yBAAyB;AAElC,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAK7B,IAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,UAA6B;AAC3E,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,EAAE,aAAa,mBAAmB;AAC3C;;;ACrBA,SAAS,YAAAC,iBAAgB;AAOlB,IAAM,4BAA4B,CAAC,WAA4B;AACpE,QAAM,CAAC,YAAY,aAAa,IAAIC,UAAS,KAAK;AAElD,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,UAAU;AAE/D,SAAO,EAAE,oBAAoB,YAAY,QAAQ;AACnD;;;ACpBA,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,SAAS,GAAG,MAAM,GAAG,QAAQ;AACtI,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,KAC/F;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;;;AnB3C1B,gBAAAG,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":["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"]}
|