@xyo-network/react-node-renderer 2.64.4 → 2.64.5
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.cjs +5 -5
- package/dist/browser/Cytoscape/CytoscapeElements.cjs.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.cts +3 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.cts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.mts +3 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.mts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.ts +3 -1
- package/dist/browser/Cytoscape/CytoscapeElements.d.ts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeElements.js +5 -5
- package/dist/browser/Cytoscape/CytoscapeElements.js.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.cjs +2 -0
- package/dist/browser/Cytoscape/CytoscapeStyles.cjs.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.d.cts +1 -0
- package/dist/browser/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.d.mts +1 -0
- package/dist/browser/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.d.ts +1 -0
- package/dist/browser/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
- package/dist/browser/Cytoscape/CytoscapeStyles.js +2 -0
- package/dist/browser/Cytoscape/CytoscapeStyles.js.map +1 -1
- package/dist/browser/Cytoscape/index.cjs +7 -5
- package/dist/browser/Cytoscape/index.cjs.map +1 -1
- package/dist/browser/Cytoscape/index.js +7 -5
- package/dist/browser/Cytoscape/index.js.map +1 -1
- package/dist/browser/components/ProvidedNodeRenderer.cjs +6 -6
- package/dist/browser/components/ProvidedNodeRenderer.cjs.map +1 -1
- package/dist/browser/components/ProvidedNodeRenderer.js +6 -6
- package/dist/browser/components/ProvidedNodeRenderer.js.map +1 -1
- package/dist/browser/components/RelationalGraph.cjs +1 -1
- package/dist/browser/components/RelationalGraph.cjs.map +1 -1
- package/dist/browser/components/RelationalGraph.js +1 -1
- package/dist/browser/components/RelationalGraph.js.map +1 -1
- package/dist/browser/components/index.cjs +68 -52
- package/dist/browser/components/index.cjs.map +1 -1
- package/dist/browser/components/index.js +47 -31
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/components/module/graph/GraphFlexBox.cjs +68 -52
- package/dist/browser/components/module/graph/GraphFlexBox.cjs.map +1 -1
- package/dist/browser/components/module/graph/GraphFlexBox.js +47 -31
- package/dist/browser/components/module/graph/GraphFlexBox.js.map +1 -1
- package/dist/browser/components/module/graph/NodeHover.cjs +1 -1
- package/dist/browser/components/module/graph/NodeHover.cjs.map +1 -1
- package/dist/browser/components/module/graph/NodeHover.js +1 -1
- package/dist/browser/components/module/graph/NodeHover.js.map +1 -1
- package/dist/browser/components/module/graph/index.cjs +68 -52
- package/dist/browser/components/module/graph/index.cjs.map +1 -1
- package/dist/browser/components/module/graph/index.js +47 -31
- package/dist/browser/components/module/graph/index.js.map +1 -1
- package/dist/browser/components/module/index.cjs +68 -52
- package/dist/browser/components/module/index.cjs.map +1 -1
- package/dist/browser/components/module/index.js +47 -31
- package/dist/browser/components/module/index.js.map +1 -1
- package/dist/browser/hooks/cytoscape/index.cjs +41 -25
- package/dist/browser/hooks/cytoscape/index.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/index.js +37 -21
- package/dist/browser/hooks/cytoscape/index.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.cjs +5 -5
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.js +5 -5
- package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.cjs +5 -22
- package/dist/browser/hooks/cytoscape/useNewElements.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.d.cts.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.d.mts.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.d.ts.map +1 -1
- package/dist/browser/hooks/cytoscape/useNewElements.js +5 -22
- package/dist/browser/hooks/cytoscape/useNewElements.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -5
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js +5 -5
- package/dist/browser/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useSelectedElement.cjs +30 -3
- package/dist/browser/hooks/cytoscape/useSelectedElement.cjs.map +1 -1
- package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts.map +1 -1
- package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts.map +1 -1
- package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts.map +1 -1
- package/dist/browser/hooks/cytoscape/useSelectedElement.js +30 -3
- package/dist/browser/hooks/cytoscape/useSelectedElement.js.map +1 -1
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs +57 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.cjs.map +1 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts +4 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.cts.map +1 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts +4 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.mts.map +1 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts +4 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.d.ts.map +1 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js +36 -0
- package/dist/browser/hooks/cytoscape/useToggleSelectedElement.js.map +1 -0
- package/dist/browser/hooks/index.cjs +41 -25
- package/dist/browser/hooks/index.cjs.map +1 -1
- package/dist/browser/hooks/index.js +37 -21
- package/dist/browser/hooks/index.js.map +1 -1
- package/dist/browser/index.cjs +69 -52
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +48 -31
- package/dist/browser/index.js.map +1 -1
- package/dist/docs.json +446 -321
- package/dist/node/Cytoscape/CytoscapeElements.cjs +5 -5
- package/dist/node/Cytoscape/CytoscapeElements.cjs.map +1 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.cts +3 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.cts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.mts +3 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.mts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.ts +3 -1
- package/dist/node/Cytoscape/CytoscapeElements.d.ts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeElements.js +5 -5
- package/dist/node/Cytoscape/CytoscapeElements.js.map +1 -1
- package/dist/node/Cytoscape/CytoscapeStyles.cjs +3 -0
- package/dist/node/Cytoscape/CytoscapeStyles.cjs.map +1 -1
- package/dist/node/Cytoscape/CytoscapeStyles.d.cts +1 -0
- package/dist/node/Cytoscape/CytoscapeStyles.d.cts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeStyles.d.mts +1 -0
- package/dist/node/Cytoscape/CytoscapeStyles.d.mts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeStyles.d.ts +1 -0
- package/dist/node/Cytoscape/CytoscapeStyles.d.ts.map +1 -1
- package/dist/node/Cytoscape/CytoscapeStyles.js +2 -0
- package/dist/node/Cytoscape/CytoscapeStyles.js.map +1 -1
- package/dist/node/Cytoscape/index.cjs +8 -5
- package/dist/node/Cytoscape/index.cjs.map +1 -1
- package/dist/node/Cytoscape/index.js +7 -5
- package/dist/node/Cytoscape/index.js.map +1 -1
- package/dist/node/components/ProvidedNodeRenderer.cjs +6 -6
- package/dist/node/components/ProvidedNodeRenderer.cjs.map +1 -1
- package/dist/node/components/ProvidedNodeRenderer.js +6 -6
- package/dist/node/components/ProvidedNodeRenderer.js.map +1 -1
- package/dist/node/components/RelationalGraph.cjs +1 -1
- package/dist/node/components/RelationalGraph.cjs.map +1 -1
- package/dist/node/components/RelationalGraph.js +1 -1
- package/dist/node/components/RelationalGraph.js.map +1 -1
- package/dist/node/components/index.cjs +68 -52
- package/dist/node/components/index.cjs.map +1 -1
- package/dist/node/components/index.js +47 -31
- package/dist/node/components/index.js.map +1 -1
- package/dist/node/components/module/graph/GraphFlexBox.cjs +68 -52
- package/dist/node/components/module/graph/GraphFlexBox.cjs.map +1 -1
- package/dist/node/components/module/graph/GraphFlexBox.js +47 -31
- package/dist/node/components/module/graph/GraphFlexBox.js.map +1 -1
- package/dist/node/components/module/graph/NodeHover.cjs +1 -1
- package/dist/node/components/module/graph/NodeHover.cjs.map +1 -1
- package/dist/node/components/module/graph/NodeHover.js +1 -1
- package/dist/node/components/module/graph/NodeHover.js.map +1 -1
- package/dist/node/components/module/graph/index.cjs +68 -52
- package/dist/node/components/module/graph/index.cjs.map +1 -1
- package/dist/node/components/module/graph/index.js +47 -31
- package/dist/node/components/module/graph/index.js.map +1 -1
- package/dist/node/components/module/index.cjs +68 -52
- package/dist/node/components/module/index.cjs.map +1 -1
- package/dist/node/components/module/index.js +47 -31
- package/dist/node/components/module/index.js.map +1 -1
- package/dist/node/hooks/cytoscape/index.cjs +41 -25
- package/dist/node/hooks/cytoscape/index.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/index.js +37 -21
- package/dist/node/hooks/cytoscape/index.js.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeElements.cjs +5 -5
- package/dist/node/hooks/cytoscape/useCytoscapeElements.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeElements.js +5 -5
- package/dist/node/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeOptions.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeOptions.js.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeStyle.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useCytoscapeStyle.js.map +1 -1
- package/dist/node/hooks/cytoscape/useNewElements.cjs +5 -22
- package/dist/node/hooks/cytoscape/useNewElements.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useNewElements.d.cts.map +1 -1
- package/dist/node/hooks/cytoscape/useNewElements.d.mts.map +1 -1
- package/dist/node/hooks/cytoscape/useNewElements.d.ts.map +1 -1
- package/dist/node/hooks/cytoscape/useNewElements.js +5 -22
- package/dist/node/hooks/cytoscape/useNewElements.js.map +1 -1
- package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs +5 -5
- package/dist/node/hooks/cytoscape/useRelationalGraphOptions.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js +5 -5
- package/dist/node/hooks/cytoscape/useRelationalGraphOptions.js.map +1 -1
- package/dist/node/hooks/cytoscape/useSelectedElement.cjs +30 -3
- package/dist/node/hooks/cytoscape/useSelectedElement.cjs.map +1 -1
- package/dist/node/hooks/cytoscape/useSelectedElement.d.cts.map +1 -1
- package/dist/node/hooks/cytoscape/useSelectedElement.d.mts.map +1 -1
- package/dist/node/hooks/cytoscape/useSelectedElement.d.ts.map +1 -1
- package/dist/node/hooks/cytoscape/useSelectedElement.js +30 -3
- package/dist/node/hooks/cytoscape/useSelectedElement.js.map +1 -1
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs +61 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs.map +1 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts +4 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts.map +1 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts +4 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts.map +1 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts +4 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts.map +1 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.js +36 -0
- package/dist/node/hooks/cytoscape/useToggleSelectedElement.js.map +1 -0
- package/dist/node/hooks/index.cjs +41 -25
- package/dist/node/hooks/index.cjs.map +1 -1
- package/dist/node/hooks/index.js +37 -21
- package/dist/node/hooks/index.js.map +1 -1
- package/dist/node/index.cjs +70 -52
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +48 -31
- package/dist/node/index.js.map +1 -1
- package/package.json +27 -27
- package/src/Cytoscape/CytoscapeElements.ts +4 -4
- package/src/Cytoscape/CytoscapeStyles.ts +2 -0
- package/src/components/RelationalGraph.tsx +1 -1
- package/src/components/module/graph/NodeHover.tsx +1 -1
- package/src/hooks/cytoscape/useNewElements.tsx +0 -10
- package/src/hooks/cytoscape/useSelectedElement.tsx +8 -3
- package/src/hooks/cytoscape/useToggleSelectedElement.tsx +30 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/index.ts","../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/useNewElements.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../src/hooks/cytoscape/useSelectedElement.tsx"],"sourcesContent":["export * from './cytoscape'\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n rootNodeId,\n type: parseModuleType(module),\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module)\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { cy } = useCytoscapeInstance(true)\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n useEffect(() => {\n if (selectedAddress) {\n const element = cy?.$(`node[id=\"${selectedAddress}\"]`)\n if (element?.length) cy?.center(element)\n }\n }, [cy, selectedAddress])\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element = event.target[0]\n if (element.isNode()) setSelectedElement(element)\n }\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, setSelectedElement])\n\n return selectedElement\n}\n"],"mappings":"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","names":["import_node_model","import_node_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react","import_material","import_react","import_react","import_react","import_react_shared","import_react","module","import_react","module","import_react","renderedElements","import_react"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/index.ts","../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/useNewElements.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"sourcesContent":["export * from './cytoscape'\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n type: parseModuleType(module),\n ...properties,\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, { root: true })\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element: NodeSingular = event.target[0]\n if (element.isNode()) {\n toggleSelectedElement(element)\n }\n }\n\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, toggleSelectedElement])\n\n return selectedElement\n}\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n const { cy } = useCytoscapeInstance(true)\n const theme = useTheme()\n\n const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n cy\n ?.style()\n .selector(`node[id=\"${element.data().id}\"]`)\n .style(...styles)\n }\n\n const toggleSelectedElement = (element: NodeSingular) => {\n setSelectedElement((previousSelectedElement) => {\n if (previousSelectedElement) {\n updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n }\n return element\n })\n updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n }\n\n return toggleSelectedElement\n}\n"],"mappings":"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","names":["import_node_model","import_node_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react","import_material","import_react","import_react","import_react","import_react_shared","module","import_react","module","import_react","renderedElements","import_react","import_material"]}
|
|
@@ -98,7 +98,7 @@ var CytoscapeElements = class _CytoscapeElements {
|
|
|
98
98
|
try {
|
|
99
99
|
const childElements = await _CytoscapeElements.recurseNodes(module);
|
|
100
100
|
childElements?.forEach((module2) => {
|
|
101
|
-
const newNode = _CytoscapeElements.buildNode(module2, newRootNode.data.id);
|
|
101
|
+
const newNode = _CytoscapeElements.buildNode(module2, { rootNodeId: newRootNode.data.id });
|
|
102
102
|
newElements.push(newNode);
|
|
103
103
|
const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
|
|
104
104
|
newElements.push(newEdge);
|
|
@@ -109,7 +109,7 @@ var CytoscapeElements = class _CytoscapeElements {
|
|
|
109
109
|
return [];
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
static buildNode(module,
|
|
112
|
+
static buildNode(module, properties) {
|
|
113
113
|
const { address, config } = module;
|
|
114
114
|
const normalizedName = config.name ?? address.substring(0, 8);
|
|
115
115
|
return {
|
|
@@ -117,13 +117,13 @@ var CytoscapeElements = class _CytoscapeElements {
|
|
|
117
117
|
address,
|
|
118
118
|
id: address,
|
|
119
119
|
name: normalizedName,
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
type: parseModuleType(module),
|
|
121
|
+
...properties
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
124
|
}
|
|
125
125
|
static buildRootNode = (module) => {
|
|
126
|
-
return _CytoscapeElements.buildNode(module);
|
|
126
|
+
return _CytoscapeElements.buildNode(module, { root: true });
|
|
127
127
|
};
|
|
128
128
|
static normalizeName(name) {
|
|
129
129
|
if (!name)
|
|
@@ -211,6 +211,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
|
|
|
211
211
|
width: 3
|
|
212
212
|
}
|
|
213
213
|
});
|
|
214
|
+
var NodeBgStyles = (bgColor) => ["background-color", bgColor];
|
|
214
215
|
|
|
215
216
|
// src/hooks/cytoscape/useCytoscapeElements.ts
|
|
216
217
|
var useCytoscapeElements = (module) => {
|
|
@@ -340,19 +341,10 @@ var useHoveredNode = (renderedElements) => {
|
|
|
340
341
|
|
|
341
342
|
// src/hooks/cytoscape/useNewElements.tsx
|
|
342
343
|
import { useModuleFromNode } from "@xyo-network/react-node";
|
|
343
|
-
import { useEffect as useEffect3 } from "react";
|
|
344
344
|
var useNewElements = (selectedElement) => {
|
|
345
|
-
const { cy } = useCytoscapeInstance(true);
|
|
346
345
|
const { address: selectedAddress } = selectedElement?.data() ?? {};
|
|
347
346
|
const [module] = useModuleFromNode(selectedAddress);
|
|
348
347
|
const newElements = useCytoscapeElements(module);
|
|
349
|
-
useEffect3(() => {
|
|
350
|
-
if (selectedAddress) {
|
|
351
|
-
const element = cy?.$(`node[id="${selectedAddress}"]`);
|
|
352
|
-
if (element?.length)
|
|
353
|
-
cy?.center(element);
|
|
354
|
-
}
|
|
355
|
-
}, [cy, selectedAddress]);
|
|
356
348
|
return newElements;
|
|
357
349
|
};
|
|
358
350
|
|
|
@@ -370,11 +362,11 @@ var useRelationalGraphOptions = (module) => {
|
|
|
370
362
|
};
|
|
371
363
|
|
|
372
364
|
// src/hooks/cytoscape/useRenderNewElements.tsx
|
|
373
|
-
import { useEffect as
|
|
365
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
|
374
366
|
var useRenderNewElements = (newElements = [], hideLabels) => {
|
|
375
367
|
const { cy } = useCytoscapeInstance(true);
|
|
376
368
|
const [renderedElements, setRenderedElements] = useState4();
|
|
377
|
-
|
|
369
|
+
useEffect3(() => {
|
|
378
370
|
if (newElements.length > 1) {
|
|
379
371
|
const renderedElements2 = cy?.add(newElements);
|
|
380
372
|
setRenderedElements(renderedElements2);
|
|
@@ -385,21 +377,45 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
|
|
|
385
377
|
};
|
|
386
378
|
|
|
387
379
|
// src/hooks/cytoscape/useSelectedElement.tsx
|
|
388
|
-
import { useEffect as
|
|
380
|
+
import { useEffect as useEffect4, useState as useState5 } from "react";
|
|
381
|
+
|
|
382
|
+
// src/hooks/cytoscape/useToggleSelectedElement.tsx
|
|
383
|
+
import { useTheme as useTheme3 } from "@mui/material";
|
|
384
|
+
var useToggleSelectedElement = (setSelectedElement) => {
|
|
385
|
+
const { cy } = useCytoscapeInstance(true);
|
|
386
|
+
const theme = useTheme3();
|
|
387
|
+
const updateStyles = (element, styles) => {
|
|
388
|
+
cy?.style().selector(`node[id="${element.data().id}"]`).style(...styles);
|
|
389
|
+
};
|
|
390
|
+
const toggleSelectedElement = (element) => {
|
|
391
|
+
setSelectedElement((previousSelectedElement) => {
|
|
392
|
+
if (previousSelectedElement) {
|
|
393
|
+
updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
|
|
394
|
+
}
|
|
395
|
+
return element;
|
|
396
|
+
});
|
|
397
|
+
updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
|
|
398
|
+
};
|
|
399
|
+
return toggleSelectedElement;
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
// src/hooks/cytoscape/useSelectedElement.tsx
|
|
389
403
|
var useSelectedElement = () => {
|
|
390
404
|
const { cy } = useCytoscapeInstance(true);
|
|
391
405
|
const [selectedElement, setSelectedElement] = useState5();
|
|
392
|
-
|
|
406
|
+
const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
|
|
407
|
+
useEffect4(() => {
|
|
393
408
|
const listener = (event) => {
|
|
394
409
|
const element = event.target[0];
|
|
395
|
-
if (element.isNode())
|
|
396
|
-
|
|
410
|
+
if (element.isNode()) {
|
|
411
|
+
toggleSelectedElement(element);
|
|
412
|
+
}
|
|
397
413
|
};
|
|
398
414
|
cy?.on("select", listener);
|
|
399
415
|
return () => {
|
|
400
416
|
cy?.off("select", listener);
|
|
401
417
|
};
|
|
402
|
-
}, [cy,
|
|
418
|
+
}, [cy, toggleSelectedElement]);
|
|
403
419
|
return selectedElement;
|
|
404
420
|
};
|
|
405
421
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/useNewElements.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../src/hooks/cytoscape/useSelectedElement.tsx"],"sourcesContent":["import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n rootNodeId,\n type: parseModuleType(module),\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module)\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { cy } = useCytoscapeInstance(true)\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n useEffect(() => {\n if (selectedAddress) {\n const element = cy?.$(`node[id=\"${selectedAddress}\"]`)\n if (element?.length) cy?.center(element)\n }\n }, [cy, selectedAddress])\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element = event.target[0]\n if (element.isNode()) setSelectedElement(element)\n }\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, setSelectedElement])\n\n return selectedElement\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAE/B,SAAS,kBAAAA,uBAAsB;AAE/B,SAAS,WAAW,gBAAgB;;;ACHpC,SAAS,kBAAAC,uBAAsB;;;ACC/B,SAAS,4BAA4B;AAErC,IAAM,UAAU;AAET,IAAM,YAAY,CAAC,cAA4B,UAAmB;AACvE,QAAM,YAAY,qBAAqB,YAAY;AAEnD,QAAM,MAAM,IAAI,UAAU,EAAE,gBAAgB,WAAW,WAAW;AAClE,QAAM,aAAa,IAAI,qBAAqB,KAAK,EAAE,CAAC;AACpD,MAAI,YAAY;AACd,eAAW,aAAa,SAAS,4BAA4B;AAC7D,eAAW,aAAa,UAAU,KAAK;AACvC,eAAW,MAAM,OAAO,SAAS;AAAA,EACnC;AAEA,SAAO,GAAG,OAAO,GAAG,OAAO,mBAAmB,WAAW,SAAS,CAAC;AACrE;;;AChBO,IAAM,kBAA2D,OAAO;AAAA,EAC7E,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AACX;;;ACVO,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;ACFO,IAAM,mBAAkC;AAAA,EAC7C,YAAY,SAAU,MAAM;AAC1B,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EACA,YAAY,WAAY;AACtB,WAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,EAChB,MAAM;AACR;;;ACXA,SAAS,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;;;ARhCO,IAAM,uBAAuB,CAAC,WAAmC;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,CAAC,CAAC;AAEhE;AAAA;AAAA,IAEE,YAAY;AACV,UAAI,QAAQ;AACV,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,mBAAyD;AAC7D,QAAI,mBAAyD;AAE7D,QAAI,UAAUC,gBAAe,MAAM,GAAG;AACpC,yBAAmB,OAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AACD,yBAAmB,OAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAc,MAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,yBAAmB;AACnB,yBAAmB;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;;;AS3CA,SAAS,WAAAC,gBAAe;;;ACDxB,SAAS,YAAAC,iBAAgB;AAEzB,SAAS,WAAAC,gBAAe;;;ACFxB,SAAS,gBAAgB;AACzB,SAAS,eAAe;AASL;AALZ,IAAM,WAAW,MAAM;AAC5B,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,UAAU,gBAAgB;AAChC,WAAO,OAAO,QAAQ,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,aAAa,MAAM;AACtE,YAAM,OAAO,oBAAC,iBAAc,UAAS,SAAQ;AAC7C,UAAI,IAAyB,IAAI,UAAU,MAAM,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAC1G,aAAO;AAAA,IACT,GAAG,OAAO;AAAA,EACZ,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;;;ADVO,IAAM,oBAAoB,CAAC,aAAa,UAAU;AACvD,QAAM,QAAQC,UAAS;AACvB,QAAM,QAAQ,SAAS;AAEvB,QAAM,QAAmCC;AAAA,IACvC,MAAM;AAAA,MACJ,aAAa,MAAM,QAAQ,KAAK,SAAS,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAAA,MAClG,WAAW,OAAO,MAAM,QAAQ,QAAQ,MAAM,UAAU;AAAA,MACxD,WAAW,MAAM,QAAQ,SAAS,MAAM,QAAQ,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,OAAO,YAAY,KAAK;AAAA,EAC3B;AAEA,SAAO;AACT;;;ADfO,IAAM,sBAAsB,CACjC,UACA,OACA,WACG;AACH,QAAM,eAAe,kBAAkB;AAEvC,QAAM,iBAAiB,UAAU;AACjC,QAAM,gBAAgB,SAAS;AAE/B,QAAM,UAAUC,SAAsC,MAAM;AAC1D,QAAI,YAAY,kBAAkB,eAAe;AAC/C,aAAO;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,KAAK,CAAC;AAE5B,SAAO;AACT;;;AG1BA,SAAS,aAAa,aAAAC,YAAW,YAAAC,iBAAgB;;;ACDjD,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,iBAAiB,CAAC,qBAAsC;AACnE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,aAAa,cAAc,IAAIC,UAAuB;AAE7D,QAAM,eAAe,YAAY,CAAC,SAAuB;AACvD,SAAK,GAAG,iBAAiB,MAAM;AAC7B,qBAAe,IAAI;AAAA,IACrB,CAAC;AACD,SAAK,GAAG,YAAY,MAAM;AACxB,qBAAe,MAAS;AAAA,IAC1B,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,EAAAC,WAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,uBAAiB,MAAM,EAAE,QAAQ,YAAY;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,WAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,SAAG,MAAM,EAAE,QAAQ,YAAY;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,YAAY,CAAC;AAErB,SAAO;AACT;;;AG/BA,SAAS,yBAAyB;AAElC,SAAS,aAAAC,kBAAiB;AAKnB,IAAM,iBAAiB,CAAC,oBAAmC;AAChE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,EAAE,SAAS,gBAAgB,IAAI,iBAAiB,KAAK,KAAK,CAAC;AACjE,QAAM,CAAC,MAAM,IAAI,kBAAkB,eAAe;AAClD,QAAM,cAAc,qBAAqB,MAAM;AAE/C,EAAAC,WAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,YAAM,UAAU,IAAI,EAAE,YAAY,eAAe,IAAI;AACrD,UAAI,SAAS;AAAQ,YAAI,OAAO,OAAO;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,IAAI,eAAe,CAAC;AAExB,SAAO;AACT;;;ACpBA,SAAS,YAAAC,iBAAgB;AAOlB,IAAM,4BAA4B,CAAC,WAA4B;AACpE,QAAM,CAAC,YAAY,aAAa,IAAIC,UAAS,IAAI;AAEjD,QAAM,qBAAqB,MAAM;AAC/B,kBAAc,CAAC,aAAa,CAAC,QAAQ;AAAA,EACvC;AAEA,QAAM,WAAW,qBAAqB,MAAM;AAC5C,QAAM,QAAQ,kBAAkB,UAAU;AAC1C,QAAM,UAAU,oBAAoB,UAAU,OAAO,gBAAgB;AAErE,SAAO,EAAE,oBAAoB,YAAY,QAAQ;AACnD;;;ACnBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAK7B,IAAM,uBAAuB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AACnG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,UAAgC;AAEhF,EAAAC,WAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAMC,oBAAmB,IAAI,IAAI,WAAW;AAC5C,0BAAoBA,iBAAgB;AACpC,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,WAAW,CAAC;AAEhC,SAAO;AACT;;;AClBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAI7B,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,UAAuB;AAErE,EAAAC,WAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAU,MAAM,OAAO,CAAC;AAC9B,UAAI,QAAQ,OAAO;AAAG,2BAAmB,OAAO;AAAA,IAClD;AACA,QAAI,GAAG,UAAU,QAAQ;AAEzB,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,IAAI,kBAAkB,CAAC;AAE3B,SAAO;AACT;","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useEffect","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useState","useEffect"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/useNewElements.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"sourcesContent":["import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n const [elements, setElements] = useState<ElementDefinition[]>([])\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n if (module) {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n }\n },\n [module],\n )\n\n useEffect(() => {\n let attachedListener: EventUnsubscribeFunction | undefined = undefined\n let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n if (module && isNodeInstance(module)) {\n attachedListener = module.on('moduleAttached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n detachedListener = module.on('moduleDetached', async () => {\n const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n setElements(newElements)\n })\n }\n\n return () => {\n attachedListener?.()\n detachedListener?.()\n }\n }, [module])\n\n return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n static MaxNameLength = 20\n\n static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n return {\n data: {\n id: `${rootNode.data.id}/${newNode.data.id}`,\n source: rootNode.data.id,\n target: newNode.data.id,\n },\n }\n }\n\n static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n const newRootNode = CytoscapeElements.buildRootNode(module)\n const newElements: ElementDefinition[] = [newRootNode]\n\n try {\n const childElements = await CytoscapeElements.recurseNodes(module)\n childElements?.forEach((module) => {\n const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n newElements.push(newNode)\n\n const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n newElements.push(newEdge)\n })\n\n return newElements\n } catch (e) {\n console.error('error resolving modules', e)\n return []\n }\n }\n\n static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n const { address, config } = module\n const normalizedName = config.name ?? address.substring(0, 8)\n return {\n data: {\n address,\n id: address,\n name: normalizedName,\n type: parseModuleType(module),\n ...properties,\n },\n }\n }\n\n static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n return CytoscapeElements.buildNode(module, { root: true })\n }\n\n static normalizeName(name?: string) {\n if (!name) return\n if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n return name\n }\n\n static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n let localDepth = 0\n const childModules: ModuleInstance[] = []\n\n const traverse = async (nestedNode: ModuleInstance) => {\n if (localDepth < maxTraversals) {\n const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n await Promise.all(\n modules.map(async (child) => {\n if (child !== nestedNode && isNodeInstance(child)) {\n localDepth++\n await traverse(child)\n // don't re add the root module that was passed in\n } else if (child !== module) {\n childModules.push(child)\n }\n }),\n )\n }\n }\n\n await traverse(module)\n\n return childModules\n }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n const svgString = renderToStaticMarkup(reactElement)\n\n const doc = new DOMParser().parseFromString(svgString, 'text/html')\n const svgElement = doc.getElementsByTagName('svg')[0]\n if (svgElement) {\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttribute('height', '100')\n svgElement.style.fill = color ?? 'black'\n }\n\n return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n archivist: '',\n bridge: '',\n diviner: '',\n module: '',\n node: '',\n sentinel: '',\n witness: '',\n})\n","export const ColaLayout = {\n centerGraph: false,\n convergenceThreshold: 0.01,\n name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n concentric: function (node) {\n return node.degree()\n },\n levelWidth: function () {\n return 2\n },\n minNodeSpacing: 75,\n name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n let type: CyNodeModuleTypes = 'module'\n if (module) {\n if (isArchivistInstance(module)) {\n type = 'archivist'\n } else if (isBridgeInstance(module)) {\n type = 'bridge'\n } else if (isDivinerInstance(module)) {\n type = 'diviner'\n } else if (isNodeInstance(module)) {\n type = 'node'\n } else if (isSentinelInstance(module)) {\n type = 'sentinel'\n } else if (isWitnessModule(module)) {\n type = 'witness'\n } else {\n type = 'module'\n }\n }\n return type\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n Hub as HubIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n QuestionMarkRounded as QuestionMarkRoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n archivist: Inventory2RoundedIcon,\n bridge: InsertLinkRoundedIcon,\n diviner: BubbleChartRoundedIcon,\n module: QuestionMarkRoundedIcon,\n node: HubIcon,\n sentinel: TimerRoundedIcon,\n witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n selector: 'node[name]',\n style: {\n color,\n 'font-family': 'Lexend Deca, Helvetica, sans-serif',\n 'font-size': 12,\n 'overlay-padding': '6px',\n 'text-halign': 'center',\n 'text-outline-color': outlineColor,\n 'text-outline-width': '1px',\n 'text-valign': 'top',\n },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n selector: 'node',\n style: {\n 'background-color': bgColor,\n 'background-height': '75%',\n 'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n 'background-width': '24',\n label: hideLabels ? undefined : 'data(name)',\n shape: 'round-rectangle',\n },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n selector: 'edge',\n style: {\n 'curve-style': 'bezier',\n 'line-color': lineColor,\n 'line-opacity': 0.1,\n 'target-arrow-color': targetArrowColor,\n 'target-arrow-shape': 'triangle',\n width: 3,\n },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n elements: CytoscapeOptions['elements'],\n style?: CytoscapeOptions['style'],\n layout?: CytoscapeOptions['layout'],\n) => {\n const defaultStyle = useCytoscapeStyle()\n\n const resolvedLayout = layout ?? ConcentricLayout\n const resolvedStyle = style ?? defaultStyle\n\n const options = useMemo<CytoscapeOptions | undefined>(() => {\n if (elements && resolvedLayout && resolvedStyle) {\n return {\n elements,\n layout: resolvedLayout,\n style: resolvedStyle,\n }\n }\n }, [elements, layout, style])\n\n return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n const theme = useTheme()\n const icons = useIcons()\n\n const style: CytoscapeOptions['style'] = useMemo(\n () => [\n NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n NodeStyled(icons, theme.palette.primary.main, hideLabels),\n EdgeStyled(theme.palette.divider, theme.palette.divider),\n ],\n [icons, hideLabels, theme],\n )\n\n return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n const theme = useTheme()\n const icons = useMemo(() => {\n const iconMap = generateIconMap()\n return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n const icon = <IconComponent fontSize=\"small\" />\n acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n return acc\n }, iconMap)\n }, [theme.palette])\n\n return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n const { cy } = useCytoscapeInstance(true)\n const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n const nodeListener = useCallback((node: NodeSingular) => {\n node.on('mouseover tap', () => {\n setHoveredNode(node)\n })\n node.on('mouseout', () => {\n setHoveredNode(undefined)\n })\n }, [])\n\n useEffect(() => {\n if (renderedElements) {\n renderedElements.nodes().forEach(nodeListener)\n }\n }, [nodeListener, renderedElements])\n\n useEffect(() => {\n cy?.ready(() => {\n cy.nodes().forEach(nodeListener)\n })\n }, [cy, nodeListener])\n\n return hoveredNode\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n const { address: selectedAddress } = selectedElement?.data() ?? {}\n const [module] = useModuleFromNode(selectedAddress)\n const newElements = useCytoscapeElements(module)\n\n return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n const [hideLabels, setHideLabels] = useState(true)\n\n const handleToggleLabels = () => {\n setHideLabels((oldValue) => !oldValue)\n }\n\n const elements = useCytoscapeElements(module)\n const style = useCytoscapeStyle(hideLabels)\n const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n const { cy } = useCytoscapeInstance(true)\n const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n useEffect(() => {\n if (newElements.length > 1) {\n const renderedElements = cy?.add(newElements)\n setRenderedElements(renderedElements)\n cy?.layout(ColaLayout).run()\n }\n }, [cy, hideLabels, newElements])\n\n return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n const { cy } = useCytoscapeInstance(true)\n const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n useEffect(() => {\n const listener = (event: EventObject) => {\n const element: NodeSingular = event.target[0]\n if (element.isNode()) {\n toggleSelectedElement(element)\n }\n }\n\n cy?.on('select', listener)\n\n return () => {\n cy?.off('select', listener)\n }\n }, [cy, toggleSelectedElement])\n\n return selectedElement\n}\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n const { cy } = useCytoscapeInstance(true)\n const theme = useTheme()\n\n const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n cy\n ?.style()\n .selector(`node[id=\"${element.data().id}\"]`)\n .style(...styles)\n }\n\n const toggleSelectedElement = (element: NodeSingular) => {\n setSelectedElement((previousSelectedElement) => {\n if (previousSelectedElement) {\n updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n }\n return element\n })\n updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n }\n\n return toggleSelectedElement\n}\n"],"mappings":"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","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useTheme","useTheme","useState","useEffect"]}
|