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

package/dist/node/components/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/module/CardParser.tsx","../../../../src/components/module/graph/GraphFlexBox.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/Provider.tsx","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../../src/Cytoscape/CytoscapeElements.ts","../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../src/Cytoscape/lib/iconMap.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../src/hooks/cytoscape/useIcons.tsx","../../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../../src/hooks/cytoscape/useNewElements.tsx","../../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/components/cytoscape-extensions/WithExtensions.tsx","../../../../src/components/RelationalGraph.tsx","../../../../src/components/module/graph/NodeHover.tsx","../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n  module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n  switch (true) {\n    case isArchivistInstance(module):\n      return <ArchivistCard module={asArchivistInstance(module)} />\n    case isDivinerInstance(module):\n      return <DivinerCard module={asDivinerInstance(module)} />\n    default:\n      return <ModuleCard module={module} />\n  }\n}\n","import { Button } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { ModuleInstance } from '@xyo-network/module'\n\nimport { CytoscapeInstanceProvider } from '../../../contexts'\nimport { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'\nimport { WithExtensions } from '../../cytoscape-extensions'\nimport { NodeRelationalGraphFlexBox } from '../../RelationalGraph'\nimport { ModuleGraphNodeHover } from './NodeHover'\n\nexport interface ModuleGraphFlexBoxProps extends FlexBoxProps {\n  rootModule?: ModuleInstance | null\n}\n\nexport const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {\n  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)\n  const selectedElement = useSelectedElement()\n  const newElements = useNewElements(selectedElement)\n  const renderedElements = useRenderNewElements(newElements, hideLabels)\n  const hoveredNode = useHoveredNode(renderedElements)\n\n  return (\n    <WithExtensions>\n      <NodeRelationalGraphFlexBox\n        actions={\n          <Button size={'small'} onClick={handleToggleLabels} variant=\"contained\">\n            Toggle Labels\n          </Button>\n        }\n        options={options}\n        {...props}\n      >\n        <ModuleGraphNodeHover node={hoveredNode} />\n      </NodeRelationalGraphFlexBox>\n    </WithExtensions>\n  )\n}\n\nexport const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {\n  return (\n    <CytoscapeInstanceProvider>\n      <ModuleGraphFlexBox {...props} />\n    </CytoscapeInstanceProvider>\n  )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n  defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n  const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n  useEffect(() => {\n    setCy(defaultInstance)\n  }, [defaultInstance])\n\n  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (module) {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      }\n    },\n    [module],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (module && isNodeInstance(module)) {\n      attachedListener = module.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = module.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [module])\n\n  return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n  static MaxNameLength = 20\n\n  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n    return {\n      data: {\n        id: `${rootNode.data.id}/${newNode.data.id}`,\n        source: rootNode.data.id,\n        target: newNode.data.id,\n      },\n    }\n  }\n\n  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n    const newRootNode = CytoscapeElements.buildRootNode(module)\n    const newElements: ElementDefinition[] = [newRootNode]\n\n    try {\n      const childElements = await CytoscapeElements.recurseNodes(module)\n      childElements?.forEach((module) => {\n        const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n        newElements.push(newNode)\n\n        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n        newElements.push(newEdge)\n      })\n\n      return newElements\n    } catch (e) {\n      console.error('error resolving modules', e)\n      return []\n    }\n  }\n\n  static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n    const { address, config } = module\n    const normalizedName = config.name ?? address.substring(0, 8)\n    return {\n      data: {\n        address,\n        id: address,\n        name: normalizedName,\n        rootNodeId,\n        type: parseModuleType(module),\n      },\n    }\n  }\n\n  static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n    return CytoscapeElements.buildNode(module)\n  }\n\n  static normalizeName(name?: string) {\n    if (!name) return\n    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n    return name\n  }\n\n  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n    let localDepth = 0\n    const childModules: ModuleInstance[] = []\n\n    const traverse = async (nestedNode: ModuleInstance) => {\n      if (localDepth < maxTraversals) {\n        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n        await Promise.all(\n          modules.map(async (child) => {\n            if (child !== nestedNode && isNodeInstance(child)) {\n              localDepth++\n              await traverse(child)\n              // don't re add the root module that was passed in\n            } else if (child !== module) {\n              childModules.push(child)\n            }\n          }),\n        )\n      }\n    }\n\n    await traverse(module)\n\n    return childModules\n  }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n  const svgString = renderToStaticMarkup(reactElement)\n\n  const doc = new DOMParser().parseFromString(svgString, 'text/html')\n  const svgElement = doc.getElementsByTagName('svg')[0]\n  if (svgElement) {\n    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n    svgElement.setAttribute('height', '100')\n    svgElement.style.fill = color ?? 'black'\n  }\n\n  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n  archivist: '',\n  bridge: '',\n  diviner: '',\n  module: '',\n  node: '',\n  sentinel: '',\n  witness: '',\n})\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n  concentric: function (node) {\n    return node.degree()\n  },\n  levelWidth: function () {\n    return 2\n  },\n  minNodeSpacing: 75,\n  name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n  let type: CyNodeModuleTypes = 'module'\n  if (module) {\n    if (isArchivistInstance(module)) {\n      type = 'archivist'\n    } else if (isBridgeInstance(module)) {\n      type = 'bridge'\n    } else if (isDivinerInstance(module)) {\n      type = 'diviner'\n    } else if (isNodeInstance(module)) {\n      type = 'node'\n    } else if (isSentinelInstance(module)) {\n      type = 'sentinel'\n    } else if (isWitnessModule(module)) {\n      type = 'witness'\n    } else {\n      type = 'module'\n    }\n  }\n  return type\n}\n","import {\n  BubbleChartRounded as BubbleChartRoundedIcon,\n  Hub as HubIcon,\n  InsertLinkRounded as InsertLinkRoundedIcon,\n  Inventory2Rounded as Inventory2RoundedIcon,\n  QuestionMarkRounded as QuestionMarkRoundedIcon,\n  TimerRounded as TimerRoundedIcon,\n  VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n  archivist: Inventory2RoundedIcon,\n  bridge: InsertLinkRoundedIcon,\n  diviner: BubbleChartRoundedIcon,\n  module: QuestionMarkRoundedIcon,\n  node: HubIcon,\n  sentinel: TimerRoundedIcon,\n  witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n  elements: CytoscapeOptions['elements'],\n  style?: CytoscapeOptions['style'],\n  layout?: CytoscapeOptions['layout'],\n) => {\n  const defaultStyle = useCytoscapeStyle()\n\n  const resolvedLayout = layout ?? ConcentricLayout\n  const resolvedStyle = style ?? defaultStyle\n\n  const options = useMemo<CytoscapeOptions | undefined>(() => {\n    if (elements && resolvedLayout && resolvedStyle) {\n      return {\n        elements,\n        layout: resolvedLayout,\n        style: resolvedStyle,\n      }\n    }\n  }, [elements, layout, style])\n\n  return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n  const theme = useTheme()\n  const icons = useIcons()\n\n  const style: CytoscapeOptions['style'] = useMemo(\n    () => [\n      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n      NodeStyled(icons, theme.palette.primary.main, hideLabels),\n      EdgeStyled(theme.palette.divider, theme.palette.divider),\n    ],\n    [icons, hideLabels, theme],\n  )\n\n  return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n  const theme = useTheme()\n  const icons = useMemo(() => {\n    const iconMap = generateIconMap()\n    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n      const icon = <IconComponent fontSize=\"small\" />\n      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n      return acc\n    }, iconMap)\n  }, [theme.palette])\n\n  return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n  const nodeListener = useCallback((node: NodeSingular) => {\n    node.on('mouseover tap', () => {\n      setHoveredNode(node)\n    })\n    node.on('mouseout', () => {\n      setHoveredNode(undefined)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (renderedElements) {\n      renderedElements.nodes().forEach(nodeListener)\n    }\n  }, [nodeListener, renderedElements])\n\n  useEffect(() => {\n    cy?.ready(() => {\n      cy.nodes().forEach(nodeListener)\n    })\n  }, [cy, nodeListener])\n\n  return hoveredNode\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n  const { cy } = useCytoscapeInstance(true)\n  const { address: selectedAddress } = selectedElement?.data() ?? {}\n  const [module] = useModuleFromNode(selectedAddress)\n  const newElements = useCytoscapeElements(module)\n\n  useEffect(() => {\n    if (selectedAddress) {\n      const element = cy?.$(`node[id=\"${selectedAddress}\"]`)\n      if (element?.length) cy?.center(element)\n    }\n  }, [cy, selectedAddress])\n\n  return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n  const [hideLabels, setHideLabels] = useState(true)\n\n  const handleToggleLabels = () => {\n    setHideLabels((oldValue) => !oldValue)\n  }\n\n  const elements = useCytoscapeElements(module)\n  const style = useCytoscapeStyle(hideLabels)\n  const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n  return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element = event.target[0]\n      if (element.isNode()) setSelectedElement(element)\n    }\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, setSelectedElement])\n\n  return selectedElement\n}\n","import { use } from 'cytoscape'\nimport cola from 'cytoscape-cola'\nimport { PropsWithChildren, useEffect, useState } from 'react'\n\nexport const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {\n  const [initialized, setInitialized] = useState(false)\n  useEffect(() => {\n    use(cola)\n    setInitialized(true)\n  }, [])\n\n  return <>{initialized ? children : undefined}</>\n}\n","import { Button, ButtonGroup, styled } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../contexts'\nimport { NodeRelationalGraphProps } from './lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {\n  const [cy, setCy] = useState<Core>()\n  const { setCy: setCyContext } = useCytoscapeInstance()\n  const sharedRef = useShareForwardedRef(ref)\n\n  const handleReset = () => {\n    cy?.reset()\n    cy?.fit(undefined, 20)\n  }\n\n  useEffect(() => {\n    if (sharedRef) {\n      const newCy = cytoscape({\n        container: sharedRef.current,\n        ...options,\n      })\n      setCy(newCy)\n    }\n  }, [options, sharedRef])\n\n  useEffect(() => {\n    setCyContext?.(cy)\n  }, [cy, setCyContext])\n\n  return (\n    <FlexCol {...props}>\n      <ActionsContainer>\n        <>\n          {actions ? (\n            <ButtonGroup>\n              {actions}\n              <Button size={'small'} variant={'contained'} onClick={handleReset}>\n                Reset\n              </Button>\n            </ButtonGroup>\n          ) : (\n            <Button size={'small'} variant={'contained'} onClick={handleReset}>\n              Reset\n            </Button>\n          )}\n        </>\n      </ActionsContainer>\n      {/* Cytoscape Element */}\n      <FlexCol alignItems=\"stretch\" height=\"100%\" position=\"absolute\" ref={sharedRef} width=\"100%\"></FlexCol>\n      {children}\n    </FlexCol>\n  )\n})\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\nconst ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({\n  flexWrap: 'wrap',\n  gap: theme.spacing(1),\n  position: 'absolute',\n  right: '10px',\n  top: '10px',\n  zIndex: 2,\n}))\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n","import { PopperProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)\n\n  // Ensure first render clears the previous element when node changes to avoid flicker\n  useEffect(() => {\n    setCurrentEl(null)\n  }, [node])\n\n  useEffect(() => {\n    if (node) {\n      setBoundingBox(node.renderedBoundingBox())\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  // Once boundingBox state is set and applied to the layout, update the ref\n  useLayoutEffect(() => {\n    setCurrentEl(ref.current)\n  }, [boundingBox])\n\n  return (\n    <>\n      <FlexCol\n        ref={ref}\n        sx={{\n          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n          // backgroundColor: '#fff',\n          // opacity: 0.25,\n          cursor: 'pointer',\n          height: boundingBox?.h,\n          left: boundingBox?.x1,\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: boundingBox?.y1,\n          width: boundingBox?.w,\n        }}\n      />\n      {node ? (\n        <>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: PopperProps['anchorEl']\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <>\n      {element ? (\n        <Popper anchorEl={element} {...props}>\n          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n            <FlexRow gap={2}>\n              <Identicon value={address} size={24} />\n              <Typography>{name}</Typography>\n            </FlexRow>\n            <Chip label={address} color={'primary'} />\n          </FlexCol>\n        </Popper>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":"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","names":["Button","jsx","isNodeInstance","useEffect","useState","isNodeInstance","isArchivistInstance","isDivinerInstance","module","isNodeInstance","useState","useEffect","isNodeInstance","useMemo","useTheme","useMemo","jsx","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useEffect","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useState","useEffect","useEffect","useState","jsx","useEffect","useState","Fragment","jsx","useState","useEffect","FlexCol","useEffect","useState","FlexCol","FlexRow","Fragment","jsx","jsxs","Fragment","jsx","jsxs","useState","useEffect","FlexCol","jsx","Button"]}

package/dist/node/hooks/cytoscape/index.cjs

@@ -20,25 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/hooks/cytoscape/index.ts
 var cytoscape_exports = {};
 __export(cytoscape_exports, {
-  useAddNewElements: () => useAddNewElements,
   useCytoscapeElements: () => useCytoscapeElements,
   useCytoscapeOptions: () => useCytoscapeOptions,
+  useHoveredNode: () => useHoveredNode,
   useNewElements: () => useNewElements,
-  usePopperListener: () => usePopperListener,
-  useRelationalGraphOptions: () => useRelationalGraphOptions
+  useRelationalGraphOptions: () => useRelationalGraphOptions,
+  useRenderNewElements: () => useRenderNewElements,
+  useSelectedElement: () => useSelectedElement
 });
 module.exports = __toCommonJS(cytoscape_exports);
 
-// src/hooks/cytoscape/useAddNewElements.tsx
-var import_react2 = require("react");
-
-// src/contexts/CytoscapeInstance/Context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/CytoscapeInstance/use.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+// src/hooks/cytoscape/useCytoscapeElements.ts
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_node_model3 = require("@xyo-network/node-model");
+var import_react = require("react");
 
 // src/Cytoscape/CytoscapeElements.ts
 var import_node_model2 = require("@xyo-network/node-model");
@@ -241,57 +236,9 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/usePopperListener.tsx
-var import_material = require("@mui/material");
-var import_react = require("react");
-var usePopperListener = () => {
-  const theme = (0, import_material.useTheme)();
-  const popperListener = (0, import_react.useCallback)(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy == null ? void 0 : cy.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-var useAddNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  (0, import_react2.useEffect)(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy == null ? void 0 : cy.add(newElements);
-      renderedElements == null ? void 0 : renderedElements.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-      cy == null ? void 0 : cy.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements, popperListener]);
-};
-
 // src/hooks/cytoscape/useCytoscapeElements.ts
-var import_react_async_effect = require("@xylabs/react-async-effect");
-var import_node_model3 = require("@xyo-network/node-model");
-var import_react3 = require("react");
 var useCytoscapeElements = (module2) => {
-  const [elements, setElements] = (0, import_react3.useState)([]);
+  const [elements, setElements] = (0, import_react.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
@@ -302,7 +249,7 @@ var useCytoscapeElements = (module2) => {
     },
     [module2]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     let attachedListener = void 0;
     let detachedListener = void 0;
     if (module2 && (0, import_node_model3.isNodeInstance)(module2)) {
@@ -324,19 +271,19 @@ var useCytoscapeElements = (module2) => {
 };
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react6 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
-var import_material3 = require("@mui/material");
-var import_react5 = require("react");
+var import_material2 = require("@mui/material");
+var import_react3 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
-var import_material2 = require("@mui/material");
-var import_react4 = require("react");
+var import_material = require("@mui/material");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var useIcons = () => {
-  const theme = (0, import_material2.useTheme)();
-  const icons = (0, import_react4.useMemo)(() => {
+  const theme = (0, import_material.useTheme)();
+  const icons = (0, import_react2.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
       const icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { fontSize: "small" });
@@ -349,9 +296,9 @@ var useIcons = () => {
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var useCytoscapeStyle = (hideLabels = false) => {
-  const theme = (0, import_material3.useTheme)();
+  const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react5.useMemo)(
+  const style = (0, import_react3.useMemo)(
     () => [
       NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
       NodeStyled(icons, theme.palette.primary.main, hideLabels),
@@ -365,56 +312,128 @@ var useCytoscapeStyle = (hideLabels = false) => {
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
-  const options = (0, import_react6.useMemo)(() => {
-    if (elements && layout && style) {
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
+  const options = (0, import_react4.useMemo)(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle
+        layout: resolvedLayout,
+        style: resolvedStyle
       };
     }
   }, [elements, layout, style]);
   return options;
 };
 
+// src/hooks/cytoscape/useHoveredNode.tsx
+var import_react5 = require("react");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/useHoveredNode.tsx
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)();
+  const nodeListener = (0, import_react5.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+    node.on("mouseout", () => {
+      setHoveredNode(void 0);
+    });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react5.useEffect)(() => {
+    cy == null ? void 0 : cy.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return hoveredNode;
+};
+
 // src/hooks/cytoscape/useNewElements.tsx
 var import_react_node = require("@xyo-network/react-node");
-var import_react7 = require("react");
-var useNewElements = () => {
+var import_react6 = require("react");
+var useNewElements = (selectedElement) => {
   const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = (0, import_react7.useState)();
   const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
   const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
   const newElements = useCytoscapeElements(module2);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selectedAddress) {
       const element = cy == null ? void 0 : cy.$(`node[id="${selectedAddress}"]`);
       if (element == null ? void 0 : element.length)
         cy == null ? void 0 : cy.center(element);
     }
   }, [cy, selectedAddress]);
-  return { newElements, setSelectedElement };
+  return newElements;
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var useRelationalGraphOptions = (module2) => {
-  const [hideLabels, setHideLabels] = (0, import_react8.useState)(false);
+  const [hideLabels, setHideLabels] = (0, import_react7.useState)(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
   const elements = useCytoscapeElements(module2);
   const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ColaLayout);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var import_react8 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react8.useState)();
+  (0, import_react8.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy == null ? void 0 : cy.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var import_react9 = require("react");
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy == null ? void 0 : cy.on("select", listener);
+    return () => {
+      cy == null ? void 0 : cy.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useAddNewElements,
   useCytoscapeElements,
   useCytoscapeOptions,
+  useHoveredNode,
   useNewElements,
-  usePopperListener,
-  useRelationalGraphOptions
+  useRelationalGraphOptions,
+  useRenderNewElements,
+  useSelectedElement
 });
 //# sourceMappingURL=index.cjs.map

package/dist/node/hooks/cytoscape/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/index.ts","../../../../src/hooks/cytoscape/useAddNewElements.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/CytoscapeElements.ts","../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../src/Cytoscape/lib/iconMap.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../src/hooks/cytoscape/usePopperListener.tsx","../../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../src/hooks/cytoscape/useIcons.tsx","../../../../src/hooks/cytoscape/useNewElements.tsx","../../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx"],"sourcesContent":["export * from './useAddNewElements'\nexport * from './useCytoscapeElements'\nexport * from './useCytoscapeOptions'\nexport * from './useNewElements'\nexport * from './usePopperListener'\nexport * from './useRelationalGraphOptions'\n","import { ElementDefinition } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\nimport { usePopperListener } from './usePopperListener'\n\nexport const useAddNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const popperListener = usePopperListener()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy))\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements, popperListener])\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n  static MaxNameLength = 20\n\n  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n    return {\n      data: {\n        id: `${rootNode.data.id}/${newNode.data.id}`,\n        source: rootNode.data.id,\n        target: newNode.data.id,\n      },\n    }\n  }\n\n  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n    const newRootNode = CytoscapeElements.buildRootNode(module)\n    const newElements: ElementDefinition[] = [newRootNode]\n\n    try {\n      const childElements = await CytoscapeElements.recurseNodes(module)\n      childElements?.forEach((module) => {\n        const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)\n        newElements.push(newNode)\n\n        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n        newElements.push(newEdge)\n      })\n\n      return newElements\n    } catch (e) {\n      console.error('error resolving modules', e)\n      return []\n    }\n  }\n\n  static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {\n    const { address, config } = module\n    const normalizedName = config.name ?? address.substring(0, 8)\n    return {\n      data: {\n        address,\n        id: address,\n        name: normalizedName,\n        rootNodeId,\n        type: parseModuleType(module),\n      },\n    }\n  }\n\n  static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n    return CytoscapeElements.buildNode(module)\n  }\n\n  static normalizeName(name?: string) {\n    if (!name) return\n    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n    return name\n  }\n\n  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n    let localDepth = 0\n    const childModules: ModuleInstance[] = []\n\n    const traverse = async (nestedNode: ModuleInstance) => {\n      if (localDepth < maxTraversals) {\n        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n        await Promise.all(\n          modules.map(async (child) => {\n            if (child !== nestedNode && isNodeInstance(child)) {\n              localDepth++\n              await traverse(child)\n              // don't re add the root module that was passed in\n            } else if (child !== module) {\n              childModules.push(child)\n            }\n          }),\n        )\n      }\n    }\n\n    await traverse(module)\n\n    return childModules\n  }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n  const svgString = renderToStaticMarkup(reactElement)\n\n  const doc = new DOMParser().parseFromString(svgString, 'text/html')\n  const svgElement = doc.getElementsByTagName('svg')[0]\n  if (svgElement) {\n    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n    svgElement.setAttribute('height', '100')\n    svgElement.style.fill = color ?? 'black'\n  }\n\n  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n  archivist: '',\n  bridge: '',\n  diviner: '',\n  module: '',\n  node: '',\n  sentinel: '',\n  witness: '',\n})\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n","import { CytoscapeOptions } from 'cytoscape'\n\nexport const ConcentricLayout: CytoscapeOptions['layout'] = {\n  concentric: function (node) {\n    return node.degree()\n  },\n  levelWidth: function () {\n    return 2\n  },\n  minNodeSpacing: 75,\n  name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n  let type: CyNodeModuleTypes = 'module'\n  if (module) {\n    if (isArchivistInstance(module)) {\n      type = 'archivist'\n    } else if (isBridgeInstance(module)) {\n      type = 'bridge'\n    } else if (isDivinerInstance(module)) {\n      type = 'diviner'\n    } else if (isNodeInstance(module)) {\n      type = 'node'\n    } else if (isSentinelInstance(module)) {\n      type = 'sentinel'\n    } else if (isWitnessModule(module)) {\n      type = 'witness'\n    } else {\n      type = 'module'\n    }\n  }\n  return type\n}\n","import {\n  BubbleChartRounded as BubbleChartRoundedIcon,\n  Hub as HubIcon,\n  InsertLinkRounded as InsertLinkRoundedIcon,\n  Inventory2Rounded as Inventory2RoundedIcon,\n  QuestionMarkRounded as QuestionMarkRoundedIcon,\n  TimerRounded as TimerRoundedIcon,\n  VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n  archivist: Inventory2RoundedIcon,\n  bridge: InsertLinkRoundedIcon,\n  diviner: BubbleChartRoundedIcon,\n  module: QuestionMarkRoundedIcon,\n  node: HubIcon,\n  sentinel: TimerRoundedIcon,\n  witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n","import { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n  const theme = useTheme()\n\n  const popperListener = useCallback(\n    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n      const div = document.createElement('div')\n      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n      const popper = node.popper({\n        content: () => {\n          div.innerHTML = node.data().name\n          div.style.opacity = '0'\n          div.style.transition = 'opacity .25s'\n          div.style.textShadow = `0 0 3px ${shadowColor}`\n\n          document.body.appendChild(div)\n\n          return div\n        },\n      })\n\n      const update = async () => {\n        await popper.update()\n      }\n\n      node.on('position', update)\n      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n      cy?.on('pan zoom resize', update)\n    },\n    [theme],\n  )\n\n  return popperListener\n}\n","import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (module) {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      }\n    },\n    [module],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (module && isNodeInstance(module)) {\n      attachedListener = module.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = module.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [module])\n\n  return elements\n}\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n  elements: CytoscapeOptions['elements'],\n  style?: CytoscapeOptions['style'],\n  layout?: CytoscapeOptions['layout'],\n) => {\n  const defaultStyle = useCytoscapeStyle()\n\n  const options = useMemo<CytoscapeOptions | undefined>(() => {\n    if (elements && layout && style) {\n      return {\n        elements,\n        layout: layout ?? ConcentricLayout,\n        style: style ?? defaultStyle,\n      }\n    }\n  }, [elements, layout, style])\n\n  return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n  const theme = useTheme()\n  const icons = useIcons()\n\n  const style: CytoscapeOptions['style'] = useMemo(\n    () => [\n      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n      NodeStyled(icons, theme.palette.primary.main, hideLabels),\n      EdgeStyled(theme.palette.divider, theme.palette.divider),\n    ],\n    [icons, hideLabels, theme],\n  )\n\n  return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n  const theme = useTheme()\n  const icons = useMemo(() => {\n    const iconMap = generateIconMap()\n    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n      const icon = <IconComponent fontSize=\"small\" />\n      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n      return acc\n    }, iconMap)\n  }, [theme.palette])\n\n  return icons\n}\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeDataDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeDataDefinition>()\n  const { address: selectedAddress } = selectedElement?.data() ?? {}\n  const [module] = useModuleFromNode(selectedAddress)\n  const newElements = useCytoscapeElements(module)\n\n  useEffect(() => {\n    if (selectedAddress) {\n      const element = cy?.$(`node[id=\"${selectedAddress}\"]`)\n      if (element?.length) cy?.center(element)\n    }\n  }, [cy, selectedAddress])\n\n  return { newElements, setSelectedElement }\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ColaLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n  const [hideLabels, setHideLabels] = useState(false)\n\n  const handleToggleLabels = () => {\n    setHideLabels((oldValue) => !oldValue)\n  }\n\n  const elements = useCytoscapeElements(module)\n  const style = useCytoscapeStyle(hideLabels)\n  const options = useCytoscapeOptions(elements, style, ColaLayout)\n\n  return { handleToggleLabels, hideLabels, options }\n}\n"],"mappings":"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","names":["import_react","import_react_shared","import_node_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","import_node_model","import_react","module","import_react","import_material","import_react","import_material","import_react","import_react","module","import_react","module"]}
+{"version":3,"sources":["../../../../src/hooks/cytoscape/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 './useCytoscapeElements'\nexport * from './useCytoscapeOptions'\nexport * from './useHoveredNode'\nexport * from './useNewElements'\nexport * from './useRelationalGraphOptions'\nexport * from './useRenderNewElements'\nexport * from './useSelectedElement'\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"]}

package/dist/node/hooks/cytoscape/index.d.cts

@@ -1,7 +1,8 @@
-export * from './useAddNewElements';
 export * from './useCytoscapeElements';
 export * from './useCytoscapeOptions';
+export * from './useHoveredNode';
 export * from './useNewElements';
-export * from './usePopperListener';
 export * from './useRelationalGraphOptions';
+export * from './useRenderNewElements';
+export * from './useSelectedElement';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/cytoscape/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}

package/dist/node/hooks/cytoscape/index.d.mts

@@ -1,7 +1,8 @@
-export * from './useAddNewElements';
 export * from './useCytoscapeElements';
 export * from './useCytoscapeOptions';
+export * from './useHoveredNode';
 export * from './useNewElements';
-export * from './usePopperListener';
 export * from './useRelationalGraphOptions';
+export * from './useRenderNewElements';
+export * from './useSelectedElement';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/cytoscape/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}

package/dist/node/hooks/cytoscape/index.d.ts

@@ -1,7 +1,8 @@
-export * from './useAddNewElements';
 export * from './useCytoscapeElements';
 export * from './useCytoscapeOptions';
+export * from './useHoveredNode';
 export * from './useNewElements';
-export * from './usePopperListener';
 export * from './useRelationalGraphOptions';
+export * from './useRenderNewElements';
+export * from './useSelectedElement';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/cytoscape/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}