@xyo-network/react-node-renderer 2.71.11 → 2.72.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/components/cytoscape-extensions/WithExtensions.d.cts.map +1 -1
- package/dist/browser/components/cytoscape-extensions/WithExtensions.d.mts.map +1 -1
- package/dist/browser/components/cytoscape-extensions/WithExtensions.d.ts.map +1 -1
- package/dist/browser/components/lib/RelationalGraphProps.d.cts +2 -2
- package/dist/browser/components/lib/RelationalGraphProps.d.cts.map +1 -1
- package/dist/browser/components/lib/RelationalGraphProps.d.mts +2 -2
- package/dist/browser/components/lib/RelationalGraphProps.d.mts.map +1 -1
- package/dist/browser/components/lib/RelationalGraphProps.d.ts +2 -2
- package/dist/browser/components/lib/RelationalGraphProps.d.ts.map +1 -1
- package/dist/browser/components/module/graph/GraphFlexBox.d.cts +2 -2
- package/dist/browser/components/module/graph/GraphFlexBox.d.cts.map +1 -1
- package/dist/browser/components/module/graph/GraphFlexBox.d.mts +2 -2
- package/dist/browser/components/module/graph/GraphFlexBox.d.mts.map +1 -1
- package/dist/browser/components/module/graph/GraphFlexBox.d.ts +2 -2
- package/dist/browser/components/module/graph/GraphFlexBox.d.ts.map +1 -1
- package/dist/browser/components/relational/graph/Graph.d.cts.map +1 -1
- package/dist/browser/components/relational/graph/Graph.d.mts.map +1 -1
- package/dist/browser/components/relational/graph/Graph.d.ts.map +1 -1
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.cts +2 -2
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.cts.map +1 -1
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.mts +2 -2
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.mts.map +1 -1
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.ts +2 -2
- package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.ts.map +1 -1
- package/dist/browser/index.cjs +48 -24
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +48 -24
- package/dist/browser/index.js.map +1 -1
- package/dist/node/components/cytoscape-extensions/WithExtensions.d.cts.map +1 -1
- package/dist/node/components/cytoscape-extensions/WithExtensions.d.mts.map +1 -1
- package/dist/node/components/cytoscape-extensions/WithExtensions.d.ts.map +1 -1
- package/dist/node/components/lib/RelationalGraphProps.d.cts +2 -2
- package/dist/node/components/lib/RelationalGraphProps.d.cts.map +1 -1
- package/dist/node/components/lib/RelationalGraphProps.d.mts +2 -2
- package/dist/node/components/lib/RelationalGraphProps.d.mts.map +1 -1
- package/dist/node/components/lib/RelationalGraphProps.d.ts +2 -2
- package/dist/node/components/lib/RelationalGraphProps.d.ts.map +1 -1
- package/dist/node/components/module/graph/GraphFlexBox.d.cts +2 -2
- package/dist/node/components/module/graph/GraphFlexBox.d.cts.map +1 -1
- package/dist/node/components/module/graph/GraphFlexBox.d.mts +2 -2
- package/dist/node/components/module/graph/GraphFlexBox.d.mts.map +1 -1
- package/dist/node/components/module/graph/GraphFlexBox.d.ts +2 -2
- package/dist/node/components/module/graph/GraphFlexBox.d.ts.map +1 -1
- package/dist/node/components/relational/graph/Graph.d.cts.map +1 -1
- package/dist/node/components/relational/graph/Graph.d.mts.map +1 -1
- package/dist/node/components/relational/graph/Graph.d.ts.map +1 -1
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.cts +2 -2
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.cts.map +1 -1
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.mts +2 -2
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.mts.map +1 -1
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.ts +2 -2
- package/dist/node/components/relational/graph/ProvidedNodeRenderer.d.ts.map +1 -1
- package/dist/node/index.cjs +48 -24
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +48 -24
- package/dist/node/index.js.map +1 -1
- package/package.json +29 -24
- package/src/components/cytoscape-extensions/WithExtensions.tsx +6 -0
- package/src/components/lib/RelationalGraphProps.ts +2 -2
- package/src/components/module/graph/GraphFlexBox.tsx +2 -2
- package/src/components/relational/graph/Graph.tsx +43 -23
- package/src/components/relational/graph/{GraphDirected.stories.tsx → GraphCola.stories.tsx} +6 -6
- package/src/components/relational/graph/GraphCoseBilkent.stories.tsx +173 -0
- package/src/components/relational/graph/{GraphSpread.stories.tsx → GraphDagre.stories.tsx} +6 -6
- package/src/components/relational/graph/{GraphDirectedSpread.stories.tsx → GraphEuler.stories.tsx} +7 -7
- package/src/components/relational/graph/GraphFCose.stories.tsx +173 -0
- package/src/components/relational/graph/ProvidedNodeRenderer.tsx +2 -2
- package/src/types/global.d.ts +1 -6
package/dist/node/index.cjs
CHANGED
|
@@ -551,6 +551,9 @@ var useRelationalGraphOptions = (module2) => {
|
|
|
551
551
|
// src/components/cytoscape-extensions/WithExtensions.tsx
|
|
552
552
|
var import_cytoscape = require("cytoscape");
|
|
553
553
|
var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
|
|
554
|
+
var import_cytoscape_cose_bilkent = __toESM(require("cytoscape-cose-bilkent"), 1);
|
|
555
|
+
var import_cytoscape_dagre = __toESM(require("cytoscape-dagre"), 1);
|
|
556
|
+
var import_cytoscape_euler = __toESM(require("cytoscape-euler"), 1);
|
|
554
557
|
var import_cytoscape_fcose = __toESM(require("cytoscape-fcose"), 1);
|
|
555
558
|
var import_react12 = require("react");
|
|
556
559
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
@@ -559,6 +562,9 @@ var WithExtensions = ({ children }) => {
|
|
|
559
562
|
(0, import_react12.useEffect)(() => {
|
|
560
563
|
(0, import_cytoscape.use)(import_cytoscape_cola.default);
|
|
561
564
|
(0, import_cytoscape.use)(import_cytoscape_fcose.default);
|
|
565
|
+
(0, import_cytoscape.use)(import_cytoscape_dagre.default);
|
|
566
|
+
(0, import_cytoscape.use)(import_cytoscape_cose_bilkent.default);
|
|
567
|
+
(0, import_cytoscape.use)(import_cytoscape_euler.default);
|
|
562
568
|
setInitialized(true);
|
|
563
569
|
}, []);
|
|
564
570
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: initialized ? children : void 0 });
|
|
@@ -569,48 +575,66 @@ var import_material3 = require("@mui/material");
|
|
|
569
575
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
570
576
|
var import_react_shared3 = require("@xyo-network/react-shared");
|
|
571
577
|
var import_cytoscape2 = __toESM(require("cytoscape"), 1);
|
|
572
|
-
var
|
|
578
|
+
var import_cytoscape_cola2 = __toESM(require("cytoscape-cola"), 1);
|
|
579
|
+
var import_cytoscape_cose_bilkent2 = __toESM(require("cytoscape-cose-bilkent"), 1);
|
|
580
|
+
var import_cytoscape_dagre2 = __toESM(require("cytoscape-dagre"), 1);
|
|
581
|
+
var import_cytoscape_euler2 = __toESM(require("cytoscape-euler"), 1);
|
|
573
582
|
var import_cytoscape_fcose2 = __toESM(require("cytoscape-fcose"), 1);
|
|
574
583
|
var import_react13 = require("react");
|
|
575
584
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
585
|
+
var applyLayout = (cy, name = "cola", options) => {
|
|
586
|
+
cy == null ? void 0 : cy.layout({ name, ...options }).run();
|
|
587
|
+
};
|
|
588
|
+
var loadLayout = (layout = "cola") => {
|
|
589
|
+
switch (layout) {
|
|
590
|
+
case "dagre": {
|
|
591
|
+
import_cytoscape2.default.use(import_cytoscape_dagre2.default);
|
|
592
|
+
break;
|
|
593
|
+
}
|
|
594
|
+
case "euler": {
|
|
595
|
+
import_cytoscape2.default.use(import_cytoscape_euler2.default);
|
|
596
|
+
break;
|
|
597
|
+
}
|
|
598
|
+
case "cose-bilkent": {
|
|
599
|
+
import_cytoscape2.default.use(import_cytoscape_cose_bilkent2.default);
|
|
600
|
+
break;
|
|
601
|
+
}
|
|
602
|
+
case "fcose": {
|
|
603
|
+
import_cytoscape2.default.use(import_cytoscape_fcose2.default);
|
|
604
|
+
break;
|
|
605
|
+
}
|
|
606
|
+
case "cola": {
|
|
607
|
+
import_cytoscape2.default.use(import_cytoscape_cola2.default);
|
|
608
|
+
break;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
};
|
|
576
612
|
var NodeRelationalGraphFlexBox = (0, import_react13.forwardRef)(
|
|
577
|
-
({ actions, children,
|
|
613
|
+
({ actions, children, layout, layoutOptions, showDetails, detail, options, ...props }, ref) => {
|
|
578
614
|
const theme = (0, import_material3.useTheme)();
|
|
579
615
|
const [cy, setCy] = (0, import_react13.useState)();
|
|
580
616
|
const { setCy: setCyContext } = useCytoscapeInstance();
|
|
581
617
|
const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
|
|
582
618
|
const handleReset = () => {
|
|
583
619
|
cy == null ? void 0 : cy.reset();
|
|
584
|
-
|
|
585
|
-
cy == null ? void 0 : cy.layout({ name: "dagre", ...typeof directed === "object" ? directed : {} }).run();
|
|
586
|
-
}
|
|
587
|
-
if (spread) {
|
|
588
|
-
cy == null ? void 0 : cy.layout({ name: "fcose", ...typeof spread === "object" ? spread : {} }).run();
|
|
589
|
-
}
|
|
590
|
-
cy == null ? void 0 : cy.fit(void 0, 20);
|
|
620
|
+
applyLayout(cy, layout ?? "euler", layoutOptions);
|
|
591
621
|
};
|
|
592
622
|
(0, import_react13.useEffect)(() => {
|
|
623
|
+
let newCy;
|
|
593
624
|
if (sharedRef) {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
}
|
|
597
|
-
if (spread) {
|
|
598
|
-
import_cytoscape2.default.use(import_cytoscape_fcose2.default);
|
|
599
|
-
}
|
|
600
|
-
const newCy = (0, import_cytoscape2.default)({
|
|
625
|
+
loadLayout(layout);
|
|
626
|
+
newCy = (0, import_cytoscape2.default)({
|
|
601
627
|
container: sharedRef.current,
|
|
602
628
|
...options
|
|
603
629
|
});
|
|
604
|
-
|
|
605
|
-
newCy.layout({ name: "dagre", ...typeof directed === "object" ? directed : {} }).run();
|
|
606
|
-
}
|
|
607
|
-
if (spread) {
|
|
608
|
-
newCy.layout({ name: "fcose", ...typeof spread === "object" ? spread : {} }).run();
|
|
609
|
-
}
|
|
610
|
-
newCy.fit(void 0, 20);
|
|
630
|
+
applyLayout(newCy, layout ?? "euler", layoutOptions);
|
|
611
631
|
setCy(newCy);
|
|
612
632
|
}
|
|
613
|
-
|
|
633
|
+
return () => {
|
|
634
|
+
newCy == null ? void 0 : newCy.destroy();
|
|
635
|
+
setCy(void 0);
|
|
636
|
+
};
|
|
637
|
+
}, [options, sharedRef, layoutOptions, layout]);
|
|
614
638
|
(0, import_react13.useEffect)(() => {
|
|
615
639
|
setCyContext == null ? void 0 : setCyContext(cy);
|
|
616
640
|
}, [cy, setCyContext]);
|
package/dist/node/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/module/CardParser.tsx","../../src/components/module/graph/GraphFlexBox.tsx","../../src/contexts/CytoscapeInstance/Context.ts","../../src/contexts/CytoscapeInstance/Provider.tsx","../../src/contexts/CytoscapeInstance/use.ts","../../src/hooks/cytoscape/elements/useCytoscapeElements.ts","../../src/Cytoscape/CytoscapeElements.ts","../../src/Cytoscape/lib/encodeSvg.ts","../../src/Cytoscape/lib/iconMap.ts","../../src/Cytoscape/lib/layout/ColaLayout.ts","../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../src/Cytoscape/lib/parseModuleType.ts","../../src/Cytoscape/CytoscapeIcons.tsx","../../src/Cytoscape/CytoscapeStyles.ts","../../src/hooks/cytoscape/elements/useHoveredNode.tsx","../../src/hooks/cytoscape/elements/useNewElements.tsx","../../src/hooks/cytoscape/elements/useRenderNewElements.tsx","../../src/hooks/cytoscape/elements/useSelectedElement.tsx","../../src/hooks/cytoscape/elements/useElements.tsx","../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../src/hooks/cytoscape/useIcons.tsx","../../src/hooks/cytoscape/useModuleDetails.tsx","../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../src/components/cytoscape-extensions/WithExtensions.tsx","../../src/components/relational/graph/Graph.tsx","../../src/components/relational/graph/ProvidedNodeRenderer.tsx","../../src/components/module/graph/DetailsFlexbox.tsx","../../src/components/module/graph/node/Hover.tsx","../../src/components/module/graph/node/hooks/useNodeElement.tsx","../../src/components/module/graph/Popper.tsx"],"sourcesContent":["export * from './components'\nexport * from './contexts'\nexport * from './Cytoscape'\nexport * from './hooks'\n","import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n switch (true) {\n case isArchivistInstance(module): {\n return <ArchivistCard module={asArchivistInstance(module)} />\n }\n case isDivinerInstance(module): {\n return <DivinerCard module={asDivinerInstance(module)} />\n }\n default: {\n return <ModuleCard module={module} />\n }\n }\n}\n","import { Button } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { useRef } from 'react'\n\nimport { CytoscapeInstanceProvider } from '../../../contexts'\nimport { useElements, useModuleDetails, useRelationalGraphOptions } from '../../../hooks'\nimport { WithExtensions } from '../../cytoscape-extensions'\nimport { NodeRelationalGraphFlexBox } from '../../relational'\nimport { DetailsFlexbox } from './DetailsFlexbox'\nimport { ModuleGraphNodeHover } from './node'\nimport { StyledModuleHoverPopper } from './Popper'\n\nexport interface ModuleGraphFlexBoxProps extends FlexBoxProps {\n directed?: boolean | object\n disableModuleDetails?: boolean\n rootModule?: ModuleInstance | null\n spread?: boolean | object\n}\n\nexport const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, disableModuleDetails, ...props }) => {\n const cytoscapeRef = useRef<HTMLDivElement>(null)\n const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)\n const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels)\n\n const { module, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))\n\n return (\n <WithExtensions>\n <NodeRelationalGraphFlexBox\n actions={\n module ? null : (\n <Button size={'small'} onClick={handleToggleLabels} variant=\"contained\">\n Toggle Labels\n </Button>\n )\n }\n showDetails={!!module}\n detail={<DetailsFlexbox onClose={() => onModuleDetails(null)} />}\n options={options}\n ref={cytoscapeRef}\n width=\"100%\"\n {...props}\n >\n <ModuleGraphNodeHover node={hoveredNode}>\n {(element) => (\n <StyledModuleHoverPopper\n anchorEl={element}\n container={cytoscapeRef.current}\n node={hoveredNode}\n onClose={() => setHoveredNode(undefined)}\n onModuleExplore={toggleSelectedElement}\n onModuleDetails={disableModuleDetails ? undefined : onModuleDetails}\n placement={'top'}\n open\n />\n )}\n </ModuleGraphNodeHover>\n </NodeRelationalGraphFlexBox>\n </WithExtensions>\n )\n}\n\nexport const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {\n return (\n <CytoscapeInstanceProvider>\n <ModuleGraphFlexBox {...props} />\n </CytoscapeInstanceProvider>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n useEffect(() => {\n setCy(defaultInstance)\n }, [defaultInstance])\n\n return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction } from '@xyo-network/module-events'\nimport { ModuleInstance } from '@xyo-network/module-model'\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\n let detachedListener: EventUnsubscribeFunction | 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 { exists } from '@xylabs/exists'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\ninterface ModuleInfo {\n children: ModuleInfo[]\n depth: number\n module: ModuleInstance\n}\n\nexport const CytoscapeElements = {\n MaxNameLength: 20,\n\n buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition, properties?: { [key: string]: unknown }) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n ...properties,\n },\n }\n },\n\n async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const info = await CytoscapeElements.recurseNodes(module)\n const newElements: ElementDefinition[] = await this.buildElementsFromInfo(info, undefined, ['activeNode'])\n\n return newElements\n },\n\n async buildElementsFromInfo(info: ModuleInfo, root?: ElementDefinition, classes: string[] = []): Promise<ElementDefinition[]> {\n const newNode = CytoscapeElements.buildNode(info.module, { childCount: info.children.length, depth: info.depth }, classes)\n const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, { depth: info.depth, siblingCount: info.children.length }) : undefined\n const newElements: ElementDefinition[] = [newNode]\n if (newEdge) {\n newElements.push(newEdge)\n }\n\n for (const childInfo of info.children) {\n newElements.push(...(await this.buildElementsFromInfo(childInfo, newNode)))\n }\n\n return newElements\n },\n\n buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {\n const { address, id } = module\n return {\n classes,\n data: {\n address,\n id: address,\n name: id,\n type: parseModuleType(module),\n ...properties,\n },\n }\n },\n\n buildRootNode: (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, {}, ['activeNode'])\n },\n\n normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`\n return name\n },\n\n async recurseNodes(root: ModuleInstance, maxDepth = 10, depth = 1): Promise<ModuleInfo> {\n const info: ModuleInfo = { children: [], depth, module: root }\n\n if (maxDepth > 0) {\n const children = await root.resolve('*', { direction: 'down', maxDepth: 1 })\n info.children = (\n await Promise.all(\n children.map(async (child) => {\n if (child.address !== root.address) {\n return await this.recurseNodes(child, maxDepth - 1, depth + 1)\n // don't re add the root module that was passed in\n }\n }),\n )\n ).filter(exists)\n }\n\n return info\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.querySelectorAll('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel-model'\nimport { isWitnessModule } from '@xyo-network/witness-model'\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'\n// eslint-disable-next-line import/no-internal-modules\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 NodeWithName = (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 Node = (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 NodeAsRoot = (bgColor?: string) => ({\n selector: '.activeNode',\n style: {\n 'background-color': bgColor,\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 { NodeCollection, NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular | undefined, Dispatch<SetStateAction<NodeSingular | undefined>>] => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n // eslint-disable-next-line unicorn/no-array-for-each\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n // eslint-disable-next-line unicorn/no-array-for-each\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return [hoveredNode, setHoveredNode]\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const selectedAddress = useMemo(() => {\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n return selectedAddress\n }, [selectedElement])\n\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n return newElements\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { ColaLayout } from '../../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { NodeSingular } from 'cytoscape'\nimport { useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useSelectedElement = () => {\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n const { cy } = useCytoscapeInstance(true)\n\n const updateStyles = (element: NodeSingular) => {\n const nodes = cy?.nodes()\n nodes?.toggleClass('activeNode', false)\n element.toggleClass('activeNode', true)\n }\n\n const toggleSelectedElement = (address?: string) => {\n const selectedNode = cy?.nodes(`[id=\"${address}\"]`)?.[0]\n if (selectedNode) {\n setSelectedElement(selectedNode)\n updateStyles(selectedNode)\n }\n }\n\n return { selectedElement, toggleSelectedElement }\n}\n","import { useHoveredNode } from './useHoveredNode'\nimport { useNewElements } from './useNewElements'\nimport { useRenderNewElements } from './useRenderNewElements'\nimport { useSelectedElement } from './useSelectedElement'\n\nexport const useElements = (hideLabels: boolean) => {\n const { selectedElement, toggleSelectedElement } = useSelectedElement()\n const newElements = useNewElements(selectedElement)\n const renderedElements = useRenderNewElements(newElements, hideLabels)\n const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)\n\n return { hoveredNode, setHoveredNode, toggleSelectedElement }\n}\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, Node, NodeAsRoot, NodeWithName } 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 Node(icons, theme.palette.primary.main, hideLabels),\n NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeAsRoot(theme.palette.secondary.main),\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 // eslint-disable-next-line unicorn/no-array-reduce\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 { usePromise } from '@xylabs/react-promise'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModule?: () => void) => {\n const { cy } = useCytoscapeInstance()\n const [moduleAddress, setModuleAddress] = useState<string | null>()\n\n const [foundModule] = usePromise(async () => {\n if (moduleAddress === null) return null\n if (moduleAddress && rootModule) {\n const foundModule = await rootModule.resolve(moduleAddress)\n return foundModule ?? null\n }\n }, [moduleAddress, rootModule])\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (moduleAddress === null) {\n // cytoscape tries to center prematurely without it :(\n setTimeout(() => cy?.center(), 100)\n } else if (foundModule && cy) {\n const node = cy.nodes(`[id=\"${moduleAddress}\"]`)?.[0]\n // cy.pan(newPan)\n // cytoscape tries to center prematurely without it :(\n setTimeout(() => cy.center(node), 100)\n }\n })\n\n const container = cy?.container()\n if (container) {\n resizeObserver.observe(container)\n }\n\n return () => {\n if (container) resizeObserver.unobserve(container)\n }\n }, [cy, moduleAddress, foundModule, rootModule?.address])\n\n useEffect(() => {\n if (foundModule) {\n onFoundModule?.()\n }\n }, [cy, moduleAddress, foundModule, onFoundModule])\n\n const onModuleDetails = (address?: string | null) => {\n const moduleNode = cy?.nodes(`[id=\"${address}\"]`)\n const rootModuleNode = cy?.nodes(`[id=\"${rootModule?.address}\"]`)\n const foundModuleNode = cy?.nodes(`[id=\"${foundModule?.address}\"]`)\n const notModuleNode = cy?.nodes(`[id != \"${address}\"]`)\n\n if (address) {\n // address was passed so we set the node to active styles\n moduleNode?.toggleClass('activeNode', true)\n notModuleNode?.toggleClass('activeNode', false)\n } else {\n // no address was passes so we reset the state\n notModuleNode?.toggleClass('activeNode', false)\n const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode\n activeNode?.toggleClass('activeNode', true)\n }\n setModuleAddress(address)\n }\n\n return { module: foundModule, onModuleDetails }\n}\n","import { ModuleInstance } from '@xyo-network/module-model'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './elements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { use } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport fcose from 'cytoscape-fcose'\nimport { PropsWithChildren, useEffect, useState } from 'react'\n\nexport const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {\n const [initialized, setInitialized] = useState(false)\n useEffect(() => {\n use(cola)\n use(fcose)\n setInitialized(true)\n }, [])\n\n return <>{initialized ? children : undefined}</>\n}\n","import { Button, ButtonGroup, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport dagre from 'cytoscape-dagre'\nimport fcose from 'cytoscape-fcose'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { NodeRelationalGraphProps } from '../../lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(\n ({ actions, children, directed, showDetails, detail, spread, options, ...props }, ref) => {\n const theme = useTheme()\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n if (directed) {\n cy?.layout({ name: 'dagre', ...(typeof directed === 'object' ? directed : {}) }).run()\n }\n if (spread) {\n cy?.layout({ name: 'fcose', ...(typeof spread === 'object' ? spread : {}) }).run()\n }\n cy?.fit(undefined, 20)\n }\n\n useEffect(() => {\n if (sharedRef) {\n if (directed) {\n cytoscape.use(dagre)\n }\n if (spread) {\n cytoscape.use(fcose)\n }\n const newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n if (directed) {\n newCy.layout({ name: 'dagre', ...(typeof directed === 'object' ? directed : {}) }).run()\n }\n if (spread) {\n newCy.layout({ name: 'fcose', ...(typeof spread === 'object' ? spread : {}) }).run()\n }\n newCy.fit(undefined, 20)\n setCy(newCy)\n }\n }, [options, sharedRef, spread, directed])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol id=\"relational-graph-wrapper\" {...props}>\n <FlexRow justifyContent=\"start\" width=\"100%\">\n {actions === null ?\n null\n : actions ?\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n : <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n }\n </FlexRow>\n <FlexGrowRow width=\"100%\" alignItems=\"start\">\n {showDetails ?\n <FlexCol height=\"100%\" width={'85%'}>\n {detail}\n </FlexCol>\n : null}\n <FlexCol\n justifyContent=\"start\"\n classes=\"cytoscape-wrap\"\n width={showDetails ? '15%' : '100%'}\n height={showDetails ? '50%' : '100%'}\n border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}\n >\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" position=\"absolute\" width=\"100%\" height=\"100%\" ref={sharedRef} />\n {children}\n </FlexCol>\n </FlexGrowRow>\n </FlexCol>\n )\n },\n)\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\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 './Graph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n directed?: boolean | object\n node?: NodeInstance\n spread?: boolean | object\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 { CancelRounded } from '@mui/icons-material'\nimport { IconButton } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport interface DetailsFlexboxProps extends FlexBoxProps {\n onClose?: () => void\n}\n\nexport const DetailsFlexbox: React.FC<DetailsFlexboxProps> = ({ children, onClose }) => {\n return (\n <FlexGrowCol alignItems=\"end\" justifyContent=\"start\" id=\"module-detail\" width=\"100%\" p={2} gap={2}>\n <FlexRow justifyContent=\"end\">\n <IconButton onClick={onClose} size={'small'}>\n <CancelRounded />\n </IconButton>\n </FlexRow>\n {children}\n </FlexGrowCol>\n )\n}\n","import { PopperProps, styled } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { ReactElement } from 'react'\n\nimport { useNodeElement } from './hooks'\n\nexport interface ModuleHoverProps {\n children?: (anchorElement?: PopperProps['anchorEl'], container?: PopperProps['container']) => ReactElement\n node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ children, node }) => {\n const { boundingBox, ref, currentElement } = useNodeElement(node)\n\n return (\n <>\n <StyledNodeGhostElementFlexCol ref={ref} left={boundingBox?.x1} height={boundingBox?.h} top={boundingBox?.y1} width={boundingBox?.w} />\n {node ?\n <>{children?.(currentElement)}</>\n : null}\n </>\n )\n}\n\nconst StyledNodeGhostElementFlexCol = styled(FlexCol, { name: 'StyledNodeGhostElementFlexCol' })(() => ({\n // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n // backgroundColor: '#fff',\n // opacity: 0.25,\n\n // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n cursor: 'pointer',\n pointerEvents: 'none',\n position: 'absolute',\n}))\n","import { PopperProps } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useRef, useState } from 'react'\n\nexport const useNodeElement = (node?: NodeSingular) => {\n const ref = useRef<HTMLDivElement>(null)\n const [currentElement, setCurrentElement] = useState<PopperProps['anchorEl'] | null>(null)\n const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n\n // Ensure first render clears the previous element when node changes to avoid flicker\n useEffect(() => {\n setCurrentElement(null)\n }, [node])\n\n useEffect(() => {\n if (node) {\n setBoundingBox(node.renderedBoundingBox())\n }\n\n const listener = () => {\n setBoundingBox(node?.renderedBoundingBox())\n }\n\n node?.on('position', listener)\n\n return () => {\n node?.off('position', undefined, listener)\n }\n }, [node])\n\n // Once boundingBox state is set and applied to the layout, update the ref\n useEffect(() => {\n setCurrentElement(ref.current)\n }, [boundingBox])\n\n return { boundingBox, currentElement, ref }\n}\n","import { CancelRounded } from '@mui/icons-material'\nimport { Button, Card, CardActions, CardHeader, IconButton, Paper, Popper, PopperProps, styled } from '@mui/material'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { NodeSingular } from 'cytoscape'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n node?: NodeSingular\n onClose?: () => void\n onModuleDetails?: (address?: string) => void\n onModuleExplore?: (address?: string) => void\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {\n const { address, name } = node?.data() ?? {}\n return (\n <>\n {anchorEl ?\n <Popper anchorEl={anchorEl} {...props}>\n <Card elevation={3}>\n <CardHeader\n action={\n onClose ?\n <IconButton size=\"small\" onClick={onClose}>\n <CancelRounded />\n </IconButton>\n : null\n }\n avatar={\n <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>\n <Identicon value={address} size={24} />\n </Paper>\n }\n title={name}\n subheader={address}\n />\n <StyledCardActions>\n {onModuleDetails ?\n <Button onClick={() => onModuleDetails?.(address)} size=\"small\" variant=\"contained\">\n Details\n </Button>\n : null}\n {onModuleExplore ?\n <Button onClick={() => onModuleExplore?.(address)} size=\"small\" variant=\"contained\">\n Explore\n </Button>\n : null}\n </StyledCardActions>\n </Card>\n </Popper>\n : null}\n </>\n )\n}\n\nexport const StyledModuleHoverPopper = styled(ModuleHoverPopper, { name: 'StyledComponents' })(() => ({\n zIndex: 2,\n}))\n\nexport const StyledCardActions = styled(CardActions, { name: 'StyledCardActions' })(() => ({\n display: 'flex',\n justifyContent: 'center',\n}))\n"],"mappings":"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","names":["module","import_material","import_react","import_jsx_runtime","import_react_shared","import_node_model","import_react","import_archivist_model","import_diviner_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react","import_react","selectedAddress","module","import_react","renderedElements","import_react","import_react","import_material","import_react","import_react","import_jsx_runtime","import_react","foundModule","import_react","module","import_react","import_jsx_runtime","cola","fcose","import_material","import_react_shared","import_cytoscape","import_cytoscape_fcose","import_react","import_jsx_runtime","cytoscape","dagre","fcose","import_react_node","import_jsx_runtime","import_icons_material","import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_react","import_jsx_runtime","import_icons_material","import_material","import_jsx_runtime","import_jsx_runtime","module"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/module/CardParser.tsx","../../src/components/module/graph/GraphFlexBox.tsx","../../src/contexts/CytoscapeInstance/Context.ts","../../src/contexts/CytoscapeInstance/Provider.tsx","../../src/contexts/CytoscapeInstance/use.ts","../../src/hooks/cytoscape/elements/useCytoscapeElements.ts","../../src/Cytoscape/CytoscapeElements.ts","../../src/Cytoscape/lib/encodeSvg.ts","../../src/Cytoscape/lib/iconMap.ts","../../src/Cytoscape/lib/layout/ColaLayout.ts","../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../src/Cytoscape/lib/parseModuleType.ts","../../src/Cytoscape/CytoscapeIcons.tsx","../../src/Cytoscape/CytoscapeStyles.ts","../../src/hooks/cytoscape/elements/useHoveredNode.tsx","../../src/hooks/cytoscape/elements/useNewElements.tsx","../../src/hooks/cytoscape/elements/useRenderNewElements.tsx","../../src/hooks/cytoscape/elements/useSelectedElement.tsx","../../src/hooks/cytoscape/elements/useElements.tsx","../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../src/hooks/cytoscape/useIcons.tsx","../../src/hooks/cytoscape/useModuleDetails.tsx","../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../src/components/cytoscape-extensions/WithExtensions.tsx","../../src/components/relational/graph/Graph.tsx","../../src/components/relational/graph/ProvidedNodeRenderer.tsx","../../src/components/module/graph/DetailsFlexbox.tsx","../../src/components/module/graph/node/Hover.tsx","../../src/components/module/graph/node/hooks/useNodeElement.tsx","../../src/components/module/graph/Popper.tsx"],"sourcesContent":["export * from './components'\nexport * from './contexts'\nexport * from './Cytoscape'\nexport * from './hooks'\n","import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n switch (true) {\n case isArchivistInstance(module): {\n return <ArchivistCard module={asArchivistInstance(module)} />\n }\n case isDivinerInstance(module): {\n return <DivinerCard module={asDivinerInstance(module)} />\n }\n default: {\n return <ModuleCard module={module} />\n }\n }\n}\n","import { Button } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { useRef } from 'react'\n\nimport { CytoscapeInstanceProvider } from '../../../contexts'\nimport { useElements, useModuleDetails, useRelationalGraphOptions } from '../../../hooks'\nimport { WithExtensions } from '../../cytoscape-extensions'\nimport { NodeRelationalGraphFlexBox } from '../../relational'\nimport { DetailsFlexbox } from './DetailsFlexbox'\nimport { ModuleGraphNodeHover } from './node'\nimport { StyledModuleHoverPopper } from './Popper'\n\nexport interface ModuleGraphFlexBoxProps extends FlexBoxProps {\n disableModuleDetails?: boolean\n layout?: 'dagre' | 'euler' | 'fcose' | 'cose-bilkent' | 'cola'\n layoutOptions?: object\n rootModule?: ModuleInstance | null\n}\n\nexport const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, disableModuleDetails, ...props }) => {\n const cytoscapeRef = useRef<HTMLDivElement>(null)\n const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)\n const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels)\n\n const { module, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))\n\n return (\n <WithExtensions>\n <NodeRelationalGraphFlexBox\n actions={\n module ? null : (\n <Button size={'small'} onClick={handleToggleLabels} variant=\"contained\">\n Toggle Labels\n </Button>\n )\n }\n showDetails={!!module}\n detail={<DetailsFlexbox onClose={() => onModuleDetails(null)} />}\n options={options}\n ref={cytoscapeRef}\n width=\"100%\"\n {...props}\n >\n <ModuleGraphNodeHover node={hoveredNode}>\n {(element) => (\n <StyledModuleHoverPopper\n anchorEl={element}\n container={cytoscapeRef.current}\n node={hoveredNode}\n onClose={() => setHoveredNode(undefined)}\n onModuleExplore={toggleSelectedElement}\n onModuleDetails={disableModuleDetails ? undefined : onModuleDetails}\n placement={'top'}\n open\n />\n )}\n </ModuleGraphNodeHover>\n </NodeRelationalGraphFlexBox>\n </WithExtensions>\n )\n}\n\nexport const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {\n return (\n <CytoscapeInstanceProvider>\n <ModuleGraphFlexBox {...props} />\n </CytoscapeInstanceProvider>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n useEffect(() => {\n setCy(defaultInstance)\n }, [defaultInstance])\n\n return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction } from '@xyo-network/module-events'\nimport { ModuleInstance } from '@xyo-network/module-model'\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\n let detachedListener: EventUnsubscribeFunction | 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 { exists } from '@xylabs/exists'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\ninterface ModuleInfo {\n children: ModuleInfo[]\n depth: number\n module: ModuleInstance\n}\n\nexport const CytoscapeElements = {\n MaxNameLength: 20,\n\n buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition, properties?: { [key: string]: unknown }) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n ...properties,\n },\n }\n },\n\n async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const info = await CytoscapeElements.recurseNodes(module)\n const newElements: ElementDefinition[] = await this.buildElementsFromInfo(info, undefined, ['activeNode'])\n\n return newElements\n },\n\n async buildElementsFromInfo(info: ModuleInfo, root?: ElementDefinition, classes: string[] = []): Promise<ElementDefinition[]> {\n const newNode = CytoscapeElements.buildNode(info.module, { childCount: info.children.length, depth: info.depth }, classes)\n const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, { depth: info.depth, siblingCount: info.children.length }) : undefined\n const newElements: ElementDefinition[] = [newNode]\n if (newEdge) {\n newElements.push(newEdge)\n }\n\n for (const childInfo of info.children) {\n newElements.push(...(await this.buildElementsFromInfo(childInfo, newNode)))\n }\n\n return newElements\n },\n\n buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {\n const { address, id } = module\n return {\n classes,\n data: {\n address,\n id: address,\n name: id,\n type: parseModuleType(module),\n ...properties,\n },\n }\n },\n\n buildRootNode: (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, {}, ['activeNode'])\n },\n\n normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`\n return name\n },\n\n async recurseNodes(root: ModuleInstance, maxDepth = 10, depth = 1): Promise<ModuleInfo> {\n const info: ModuleInfo = { children: [], depth, module: root }\n\n if (maxDepth > 0) {\n const children = await root.resolve('*', { direction: 'down', maxDepth: 1 })\n info.children = (\n await Promise.all(\n children.map(async (child) => {\n if (child.address !== root.address) {\n return await this.recurseNodes(child, maxDepth - 1, depth + 1)\n // don't re add the root module that was passed in\n }\n }),\n )\n ).filter(exists)\n }\n\n return info\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.querySelectorAll('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel-model'\nimport { isWitnessModule } from '@xyo-network/witness-model'\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'\n// eslint-disable-next-line import/no-internal-modules\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 NodeWithName = (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 Node = (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 NodeAsRoot = (bgColor?: string) => ({\n selector: '.activeNode',\n style: {\n 'background-color': bgColor,\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 { NodeCollection, NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular | undefined, Dispatch<SetStateAction<NodeSingular | undefined>>] => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n // eslint-disable-next-line unicorn/no-array-for-each\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n // eslint-disable-next-line unicorn/no-array-for-each\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return [hoveredNode, setHoveredNode]\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const selectedAddress = useMemo(() => {\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n return selectedAddress\n }, [selectedElement])\n\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n return newElements\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { ColaLayout } from '../../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { NodeSingular } from 'cytoscape'\nimport { useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useSelectedElement = () => {\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n const { cy } = useCytoscapeInstance(true)\n\n const updateStyles = (element: NodeSingular) => {\n const nodes = cy?.nodes()\n nodes?.toggleClass('activeNode', false)\n element.toggleClass('activeNode', true)\n }\n\n const toggleSelectedElement = (address?: string) => {\n const selectedNode = cy?.nodes(`[id=\"${address}\"]`)?.[0]\n if (selectedNode) {\n setSelectedElement(selectedNode)\n updateStyles(selectedNode)\n }\n }\n\n return { selectedElement, toggleSelectedElement }\n}\n","import { useHoveredNode } from './useHoveredNode'\nimport { useNewElements } from './useNewElements'\nimport { useRenderNewElements } from './useRenderNewElements'\nimport { useSelectedElement } from './useSelectedElement'\n\nexport const useElements = (hideLabels: boolean) => {\n const { selectedElement, toggleSelectedElement } = useSelectedElement()\n const newElements = useNewElements(selectedElement)\n const renderedElements = useRenderNewElements(newElements, hideLabels)\n const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)\n\n return { hoveredNode, setHoveredNode, toggleSelectedElement }\n}\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, Node, NodeAsRoot, NodeWithName } 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 Node(icons, theme.palette.primary.main, hideLabels),\n NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeAsRoot(theme.palette.secondary.main),\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 // eslint-disable-next-line unicorn/no-array-reduce\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 { usePromise } from '@xylabs/react-promise'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModule?: () => void) => {\n const { cy } = useCytoscapeInstance()\n const [moduleAddress, setModuleAddress] = useState<string | null>()\n\n const [foundModule] = usePromise(async () => {\n if (moduleAddress === null) return null\n if (moduleAddress && rootModule) {\n const foundModule = await rootModule.resolve(moduleAddress)\n return foundModule ?? null\n }\n }, [moduleAddress, rootModule])\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (moduleAddress === null) {\n // cytoscape tries to center prematurely without it :(\n setTimeout(() => cy?.center(), 100)\n } else if (foundModule && cy) {\n const node = cy.nodes(`[id=\"${moduleAddress}\"]`)?.[0]\n // cy.pan(newPan)\n // cytoscape tries to center prematurely without it :(\n setTimeout(() => cy.center(node), 100)\n }\n })\n\n const container = cy?.container()\n if (container) {\n resizeObserver.observe(container)\n }\n\n return () => {\n if (container) resizeObserver.unobserve(container)\n }\n }, [cy, moduleAddress, foundModule, rootModule?.address])\n\n useEffect(() => {\n if (foundModule) {\n onFoundModule?.()\n }\n }, [cy, moduleAddress, foundModule, onFoundModule])\n\n const onModuleDetails = (address?: string | null) => {\n const moduleNode = cy?.nodes(`[id=\"${address}\"]`)\n const rootModuleNode = cy?.nodes(`[id=\"${rootModule?.address}\"]`)\n const foundModuleNode = cy?.nodes(`[id=\"${foundModule?.address}\"]`)\n const notModuleNode = cy?.nodes(`[id != \"${address}\"]`)\n\n if (address) {\n // address was passed so we set the node to active styles\n moduleNode?.toggleClass('activeNode', true)\n notModuleNode?.toggleClass('activeNode', false)\n } else {\n // no address was passes so we reset the state\n notModuleNode?.toggleClass('activeNode', false)\n const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode\n activeNode?.toggleClass('activeNode', true)\n }\n setModuleAddress(address)\n }\n\n return { module: foundModule, onModuleDetails }\n}\n","import { ModuleInstance } from '@xyo-network/module-model'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './elements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { use } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport coseBilkent from 'cytoscape-cose-bilkent'\nimport dagre from 'cytoscape-dagre'\nimport euler from 'cytoscape-euler'\nimport fcose from 'cytoscape-fcose'\nimport { PropsWithChildren, useEffect, useState } from 'react'\n\nexport const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {\n const [initialized, setInitialized] = useState(false)\n useEffect(() => {\n use(cola)\n use(fcose)\n use(dagre)\n use(coseBilkent)\n use(euler)\n setInitialized(true)\n }, [])\n\n return <>{initialized ? children : undefined}</>\n}\n","import { Button, ButtonGroup, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport coseBilkentLayout from 'cytoscape-cose-bilkent'\nimport dagre from 'cytoscape-dagre'\nimport eulerLayout from 'cytoscape-euler'\nimport fcose from 'cytoscape-fcose'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { NodeRelationalGraphProps } from '../../lib'\n\nconst applyLayout = (cy?: cytoscape.Core, name = 'cola', options?: object) => {\n cy?.layout({ name, ...options }).run()\n}\n\nconst loadLayout = (layout = 'cola') => {\n switch (layout) {\n case 'dagre': {\n cytoscape.use(dagre)\n break\n }\n case 'euler': {\n cytoscape.use(eulerLayout)\n break\n }\n case 'cose-bilkent': {\n cytoscape.use(coseBilkentLayout)\n break\n }\n case 'fcose': {\n cytoscape.use(fcose)\n break\n }\n case 'cola': {\n cytoscape.use(cola)\n break\n }\n }\n}\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(\n ({ actions, children, layout, layoutOptions, showDetails, detail, options, ...props }, ref) => {\n const theme = useTheme()\n const [cy, setCy] = useState<Core>()\n const { setCy: setCyContext } = useCytoscapeInstance()\n const sharedRef = useShareForwardedRef(ref)\n\n const handleReset = () => {\n cy?.reset()\n applyLayout(cy, layout ?? 'euler', layoutOptions)\n }\n\n useEffect(() => {\n let newCy: Core | undefined\n if (sharedRef) {\n loadLayout(layout)\n newCy = cytoscape({\n container: sharedRef.current,\n ...options,\n })\n applyLayout(newCy, layout ?? 'euler', layoutOptions)\n setCy(newCy)\n }\n return () => {\n newCy?.destroy()\n setCy(undefined)\n }\n }, [options, sharedRef, layoutOptions, layout])\n\n useEffect(() => {\n setCyContext?.(cy)\n }, [cy, setCyContext])\n\n return (\n <FlexCol id=\"relational-graph-wrapper\" {...props}>\n <FlexRow justifyContent=\"start\" width=\"100%\">\n {actions === null ?\n null\n : actions ?\n <ButtonGroup>\n {actions}\n <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset View\n </Button>\n </ButtonGroup>\n : <Button size={'small'} variant={'contained'} onClick={handleReset}>\n Reset\n </Button>\n }\n </FlexRow>\n <FlexGrowRow width=\"100%\" alignItems=\"start\">\n {showDetails ?\n <FlexCol height=\"100%\" width={'85%'}>\n {detail}\n </FlexCol>\n : null}\n <FlexCol\n justifyContent=\"start\"\n classes=\"cytoscape-wrap\"\n width={showDetails ? '15%' : '100%'}\n height={showDetails ? '50%' : '100%'}\n border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}\n >\n {/* Cytoscape Element */}\n <FlexCol alignItems=\"stretch\" position=\"absolute\" width=\"100%\" height=\"100%\" ref={sharedRef} />\n {children}\n </FlexCol>\n </FlexGrowRow>\n </FlexCol>\n )\n },\n)\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\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 './Graph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n account?: AccountInstance\n layout?: 'dagre' | 'euler' | 'fcose' | 'cose-bilkent' | 'cola'\n layoutOptions?: object\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 { CancelRounded } from '@mui/icons-material'\nimport { IconButton } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport interface DetailsFlexboxProps extends FlexBoxProps {\n onClose?: () => void\n}\n\nexport const DetailsFlexbox: React.FC<DetailsFlexboxProps> = ({ children, onClose }) => {\n return (\n <FlexGrowCol alignItems=\"end\" justifyContent=\"start\" id=\"module-detail\" width=\"100%\" p={2} gap={2}>\n <FlexRow justifyContent=\"end\">\n <IconButton onClick={onClose} size={'small'}>\n <CancelRounded />\n </IconButton>\n </FlexRow>\n {children}\n </FlexGrowCol>\n )\n}\n","import { PopperProps, styled } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { ReactElement } from 'react'\n\nimport { useNodeElement } from './hooks'\n\nexport interface ModuleHoverProps {\n children?: (anchorElement?: PopperProps['anchorEl'], container?: PopperProps['container']) => ReactElement\n node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ children, node }) => {\n const { boundingBox, ref, currentElement } = useNodeElement(node)\n\n return (\n <>\n <StyledNodeGhostElementFlexCol ref={ref} left={boundingBox?.x1} height={boundingBox?.h} top={boundingBox?.y1} width={boundingBox?.w} />\n {node ?\n <>{children?.(currentElement)}</>\n : null}\n </>\n )\n}\n\nconst StyledNodeGhostElementFlexCol = styled(FlexCol, { name: 'StyledNodeGhostElementFlexCol' })(() => ({\n // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n // backgroundColor: '#fff',\n // opacity: 0.25,\n\n // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n cursor: 'pointer',\n pointerEvents: 'none',\n position: 'absolute',\n}))\n","import { PopperProps } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useRef, useState } from 'react'\n\nexport const useNodeElement = (node?: NodeSingular) => {\n const ref = useRef<HTMLDivElement>(null)\n const [currentElement, setCurrentElement] = useState<PopperProps['anchorEl'] | null>(null)\n const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n\n // Ensure first render clears the previous element when node changes to avoid flicker\n useEffect(() => {\n setCurrentElement(null)\n }, [node])\n\n useEffect(() => {\n if (node) {\n setBoundingBox(node.renderedBoundingBox())\n }\n\n const listener = () => {\n setBoundingBox(node?.renderedBoundingBox())\n }\n\n node?.on('position', listener)\n\n return () => {\n node?.off('position', undefined, listener)\n }\n }, [node])\n\n // Once boundingBox state is set and applied to the layout, update the ref\n useEffect(() => {\n setCurrentElement(ref.current)\n }, [boundingBox])\n\n return { boundingBox, currentElement, ref }\n}\n","import { CancelRounded } from '@mui/icons-material'\nimport { Button, Card, CardActions, CardHeader, IconButton, Paper, Popper, PopperProps, styled } from '@mui/material'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { NodeSingular } from 'cytoscape'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n node?: NodeSingular\n onClose?: () => void\n onModuleDetails?: (address?: string) => void\n onModuleExplore?: (address?: string) => void\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {\n const { address, name } = node?.data() ?? {}\n return (\n <>\n {anchorEl ?\n <Popper anchorEl={anchorEl} {...props}>\n <Card elevation={3}>\n <CardHeader\n action={\n onClose ?\n <IconButton size=\"small\" onClick={onClose}>\n <CancelRounded />\n </IconButton>\n : null\n }\n avatar={\n <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>\n <Identicon value={address} size={24} />\n </Paper>\n }\n title={name}\n subheader={address}\n />\n <StyledCardActions>\n {onModuleDetails ?\n <Button onClick={() => onModuleDetails?.(address)} size=\"small\" variant=\"contained\">\n Details\n </Button>\n : null}\n {onModuleExplore ?\n <Button onClick={() => onModuleExplore?.(address)} size=\"small\" variant=\"contained\">\n Explore\n </Button>\n : null}\n </StyledCardActions>\n </Card>\n </Popper>\n : null}\n </>\n )\n}\n\nexport const StyledModuleHoverPopper = styled(ModuleHoverPopper, { name: 'StyledComponents' })(() => ({\n zIndex: 2,\n}))\n\nexport const StyledCardActions = styled(CardActions, { name: 'StyledCardActions' })(() => ({\n display: 'flex',\n justifyContent: 'center',\n}))\n"],"mappings":"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","names":["module","import_material","import_react","import_jsx_runtime","import_react_shared","import_node_model","import_react","import_archivist_model","import_diviner_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react","import_react","selectedAddress","module","import_react","renderedElements","import_react","import_react","import_material","import_react","import_react","import_jsx_runtime","import_react","foundModule","import_react","module","import_react","import_jsx_runtime","cola","fcose","dagre","coseBilkent","euler","import_material","import_react_shared","import_cytoscape","import_cytoscape_cola","import_cytoscape_cose_bilkent","import_cytoscape_dagre","import_cytoscape_euler","import_cytoscape_fcose","import_react","import_jsx_runtime","cytoscape","dagre","eulerLayout","coseBilkentLayout","fcose","cola","import_react_node","import_jsx_runtime","import_icons_material","import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_react","import_jsx_runtime","import_icons_material","import_material","import_jsx_runtime","import_jsx_runtime","module"]}
|
package/dist/node/index.js
CHANGED
|
@@ -499,6 +499,9 @@ var useRelationalGraphOptions = (module) => {
|
|
|
499
499
|
// src/components/cytoscape-extensions/WithExtensions.tsx
|
|
500
500
|
import { use } from "cytoscape";
|
|
501
501
|
import cola from "cytoscape-cola";
|
|
502
|
+
import coseBilkent from "cytoscape-cose-bilkent";
|
|
503
|
+
import dagre from "cytoscape-dagre";
|
|
504
|
+
import euler from "cytoscape-euler";
|
|
502
505
|
import fcose from "cytoscape-fcose";
|
|
503
506
|
import { useEffect as useEffect6, useState as useState8 } from "react";
|
|
504
507
|
import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
|
|
@@ -507,6 +510,9 @@ var WithExtensions = ({ children }) => {
|
|
|
507
510
|
useEffect6(() => {
|
|
508
511
|
use(cola);
|
|
509
512
|
use(fcose);
|
|
513
|
+
use(dagre);
|
|
514
|
+
use(coseBilkent);
|
|
515
|
+
use(euler);
|
|
510
516
|
setInitialized(true);
|
|
511
517
|
}, []);
|
|
512
518
|
return /* @__PURE__ */ jsx4(Fragment, { children: initialized ? children : void 0 });
|
|
@@ -517,48 +523,66 @@ import { Button, ButtonGroup, useTheme as useTheme3 } from "@mui/material";
|
|
|
517
523
|
import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
|
|
518
524
|
import { useShareForwardedRef } from "@xyo-network/react-shared";
|
|
519
525
|
import cytoscape from "cytoscape";
|
|
520
|
-
import
|
|
526
|
+
import cola2 from "cytoscape-cola";
|
|
527
|
+
import coseBilkentLayout from "cytoscape-cose-bilkent";
|
|
528
|
+
import dagre2 from "cytoscape-dagre";
|
|
529
|
+
import eulerLayout from "cytoscape-euler";
|
|
521
530
|
import fcose2 from "cytoscape-fcose";
|
|
522
531
|
import { forwardRef, useEffect as useEffect7, useState as useState9 } from "react";
|
|
523
532
|
import { jsx as jsx5, jsxs } from "react/jsx-runtime";
|
|
533
|
+
var applyLayout = (cy, name = "cola", options) => {
|
|
534
|
+
cy == null ? void 0 : cy.layout({ name, ...options }).run();
|
|
535
|
+
};
|
|
536
|
+
var loadLayout = (layout = "cola") => {
|
|
537
|
+
switch (layout) {
|
|
538
|
+
case "dagre": {
|
|
539
|
+
cytoscape.use(dagre2);
|
|
540
|
+
break;
|
|
541
|
+
}
|
|
542
|
+
case "euler": {
|
|
543
|
+
cytoscape.use(eulerLayout);
|
|
544
|
+
break;
|
|
545
|
+
}
|
|
546
|
+
case "cose-bilkent": {
|
|
547
|
+
cytoscape.use(coseBilkentLayout);
|
|
548
|
+
break;
|
|
549
|
+
}
|
|
550
|
+
case "fcose": {
|
|
551
|
+
cytoscape.use(fcose2);
|
|
552
|
+
break;
|
|
553
|
+
}
|
|
554
|
+
case "cola": {
|
|
555
|
+
cytoscape.use(cola2);
|
|
556
|
+
break;
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
};
|
|
524
560
|
var NodeRelationalGraphFlexBox = forwardRef(
|
|
525
|
-
({ actions, children,
|
|
561
|
+
({ actions, children, layout, layoutOptions, showDetails, detail, options, ...props }, ref) => {
|
|
526
562
|
const theme = useTheme3();
|
|
527
563
|
const [cy, setCy] = useState9();
|
|
528
564
|
const { setCy: setCyContext } = useCytoscapeInstance();
|
|
529
565
|
const sharedRef = useShareForwardedRef(ref);
|
|
530
566
|
const handleReset = () => {
|
|
531
567
|
cy == null ? void 0 : cy.reset();
|
|
532
|
-
|
|
533
|
-
cy == null ? void 0 : cy.layout({ name: "dagre", ...typeof directed === "object" ? directed : {} }).run();
|
|
534
|
-
}
|
|
535
|
-
if (spread) {
|
|
536
|
-
cy == null ? void 0 : cy.layout({ name: "fcose", ...typeof spread === "object" ? spread : {} }).run();
|
|
537
|
-
}
|
|
538
|
-
cy == null ? void 0 : cy.fit(void 0, 20);
|
|
568
|
+
applyLayout(cy, layout ?? "euler", layoutOptions);
|
|
539
569
|
};
|
|
540
570
|
useEffect7(() => {
|
|
571
|
+
let newCy;
|
|
541
572
|
if (sharedRef) {
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
}
|
|
545
|
-
if (spread) {
|
|
546
|
-
cytoscape.use(fcose2);
|
|
547
|
-
}
|
|
548
|
-
const newCy = cytoscape({
|
|
573
|
+
loadLayout(layout);
|
|
574
|
+
newCy = cytoscape({
|
|
549
575
|
container: sharedRef.current,
|
|
550
576
|
...options
|
|
551
577
|
});
|
|
552
|
-
|
|
553
|
-
newCy.layout({ name: "dagre", ...typeof directed === "object" ? directed : {} }).run();
|
|
554
|
-
}
|
|
555
|
-
if (spread) {
|
|
556
|
-
newCy.layout({ name: "fcose", ...typeof spread === "object" ? spread : {} }).run();
|
|
557
|
-
}
|
|
558
|
-
newCy.fit(void 0, 20);
|
|
578
|
+
applyLayout(newCy, layout ?? "euler", layoutOptions);
|
|
559
579
|
setCy(newCy);
|
|
560
580
|
}
|
|
561
|
-
|
|
581
|
+
return () => {
|
|
582
|
+
newCy == null ? void 0 : newCy.destroy();
|
|
583
|
+
setCy(void 0);
|
|
584
|
+
};
|
|
585
|
+
}, [options, sharedRef, layoutOptions, layout]);
|
|
562
586
|
useEffect7(() => {
|
|
563
587
|
setCyContext == null ? void 0 : setCyContext(cy);
|
|
564
588
|
}, [cy, setCyContext]);
|