@xyo-network/react-node-renderer 7.5.8 → 7.5.12

package/src/components/relational/graph/GraphEuler.stories.tsx

@@ -1,187 +0,0 @@
-import { Button, ButtonGroup } from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist-memory'
-import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
-import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
-import type { AttachableModuleInstance } from '@xyo-network/module-model'
-import { MemoryNode } from '@xyo-network/node-memory'
-import { NodeConfigSchema } from '@xyo-network/node-model'
-import {
-  NodeProvider, useWeakNodeFromNode, useWeakProvidedNode,
-} from '@xyo-network/react-node'
-import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
-import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
-import { SentinelConfigSchema } from '@xyo-network/sentinel'
-import { MemorySentinel } from '@xyo-network/sentinel-memory'
-import React, { useState } from 'react'
-
-import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
-import { WithExtensions } from '../../cytoscape-extensions/index.ts'
-import { NodeRelationalGraphFlexBox } from './Graph.tsx'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer.tsx'
-import { options } from './story/index.ts'
-
-const client = { url: 'http://localhost:8080/node' }
-
-const MemoryNodeDecorator: Decorator = (Story, args) => {
-  const [node, setNode] = useState<MemoryNode>()
-
-  useAsyncEffect(
-
-    async () => {
-      try {
-        const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
-        const node1 = await MemoryNode.create({ config: { name: 'ChildNode', schema: NodeConfigSchema } })
-        const bridge = await HttpBridge.create({
-          config: {
-            name: 'Bridge', client, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
-          },
-        })
-        await node.register(bridge)
-        await node.attach(bridge.address, true)
-
-        const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: MemoryArchivistConfigSchema } })
-        await node.register(archivist)
-        await node.attach(archivist.address, true)
-
-        const sentinel = await MemorySentinel.create({
-          config: {
-            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
-          },
-        })
-        await node.register(sentinel)
-        await node.attach(sentinel.address, true)
-
-        const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: MemoryArchivistConfigSchema } })
-        await node1.register(archivist1)
-        await node1.attach(archivist1.address, true)
-
-        await node.register(node1)
-        await node.attach(node1.address, true)
-
-        setNode(node)
-      } catch (e) {
-        console.error('Error Creating MemoryNode', e)
-      }
-    },
-    [],
-  )
-
-  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })
-
-  return (
-    <WalletProvider rootWallet={wallet}>
-      <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
-      </NodeProvider>
-    </WalletProvider>
-  )
-}
-
-export default {
-  component: NodeRelationalGraphFlexBox,
-  title: 'node/renderer/euler/NodeRelationalGraph',
-} as Meta
-
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox layout="euler" {...props} />
-
-const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakProvidedNode()
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
-}
-
-const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
-}
-
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = props => <ProvidedNodeRenderer layout="euler" {...props} />
-
-const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  const [idWitness, setIdWitness] = useState<IdWitness>()
-
-  useAsyncEffect(
-    async () => {
-      const witnessModule = await IdWitness.create({
-        config: {
-          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
-        },
-      })
-      setIdWitness(witnessModule)
-    },
-    [],
-  )
-
-  const handleAddWitness = async () => {
-    if (node && idWitness) {
-      const memoryNode = node.deref() as MemoryNode | undefined
-      await memoryNode?.register(idWitness as unknown as AttachableModuleInstance)
-      await memoryNode?.attach(idWitness.address, true)
-    }
-  }
-
-  const handleRemoveWitness = async () => {
-    if (node && idWitness) {
-      const memoryNode = node.deref() as MemoryNode | undefined
-      if (((await memoryNode?.registered()) ?? []).includes(idWitness.address)) {
-        await memoryNode?.unregister(idWitness as unknown as AttachableModuleInstance)
-      }
-    }
-  }
-
-  return (
-    <>
-      <ButtonGroup>
-        <Button onClick={handleAddWitness}>Add Witness</Button>
-        <Button onClick={handleRemoveWitness}>Remove Witness</Button>
-      </ButtonGroup>
-      <WithExtensions>
-        <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
-      </WithExtensions>
-    </>
-  )
-}
-
-const defaultProps = {
-  height: 'calc(100vh - 20px)',
-  width: '100%',
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = { options, ...defaultProps }
-
-const WithDescribe = TemplateDescribe.bind({})
-WithDescribe.args = { ...defaultProps }
-WithDescribe.decorators = [MemoryNodeDecorator]
-
-const WithCustomAddress = TemplateCustomAddress.bind({})
-WithCustomAddress.args = { ...defaultProps }
-WithCustomAddress.decorators = [MemoryNodeDecorator]
-
-const WithAttachDetach = TemplateAttachDetach.bind({})
-WithAttachDetach.args = { ...defaultProps }
-WithAttachDetach.decorators = [MemoryNodeDecorator]
-
-const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
-WithProvidedNodeRenderer.args = { ...defaultProps }
-WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
-
-export {
-  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
-}

package/src/components/relational/graph/GraphEvents.stories.tsx

@@ -1,82 +0,0 @@
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist-memory'
-import { MemoryNode } from '@xyo-network/node-memory'
-import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakProvidedNode } from '@xyo-network/react-node'
-import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
-import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
-import type { EventObject } from 'cytoscape'
-import React, { useEffect, useState } from 'react'
-
-import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../../../contexts/index.ts'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
-import { NodeRelationalGraphFlexBox } from './Graph.tsx'
-
-const MemoryNodeDecorator: Decorator = (Story, args) => {
-  const [node, setNode] = useState<MemoryNode>()
-
-  useAsyncEffect(
-    async () => {
-      const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
-
-      const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: MemoryArchivistConfigSchema } })
-      await node.register(archivist)
-      await node.attach(archivist.address, true)
-
-      setNode(node)
-    },
-    [],
-  )
-
-  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })
-
-  return (
-    <WalletProvider rootWallet={wallet}>
-      <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
-      </NodeProvider>
-    </WalletProvider>
-  )
-}
-
-export default {
-  component: NodeRelationalGraphFlexBox,
-  title: 'node/renderer/NodeRelationalGraphEvents',
-} as Meta
-
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakProvidedNode()
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-
-  const { cy } = useCytoscapeInstance(true)
-
-  useEffect(() => {
-    const listener = (event: EventObject) => {
-      const element = event.target[0]
-      console.log(element.data().address)
-    }
-    cy?.deref()?.on('select', listener)
-
-    return () => {
-      cy?.deref()?.off('select', listener)
-    }
-  }, [cy])
-  return <NodeRelationalGraphFlexBox options={options} {...props} />
-}
-
-const defaultProps = {
-  height: 'calc(100vh - 20px)',
-  width: '100%',
-}
-
-const Default = Template.bind({})
-Default.args = { ...defaultProps }
-Default.decorators = [MemoryNodeDecorator]
-
-export { Default }

package/src/components/relational/graph/ProvidedNodeRenderer.tsx

@@ -1,23 +0,0 @@
-import type { AccountInstance } from '@xyo-network/account-model'
-import type { NodeInstance } from '@xyo-network/node-model'
-import { useWeakProvidedNode } from '@xyo-network/react-node'
-import React from 'react'
-
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks/index.ts'
-import type { NodeRelationalGraphProps } from '../../lib/index.ts'
-import { NodeRelationalGraphFlexBox } from './Graph.tsx'
-
-export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
-  account?: AccountInstance
-  layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola'
-  layoutOptions?: object
-  node?: WeakRef<NodeInstance>
-}
-
-export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {
-  const [providedNode] = useWeakProvidedNode()
-  const elements = useCytoscapeElements(node ?? providedNode)
-  const options = useCytoscapeOptions(elements)
-
-  return <NodeRelationalGraphFlexBox alignItems="stretch" flexGrow={1} height="100%" options={options} {...props} />
-}

package/src/components/relational/graph/index.ts

@@ -1,2 +0,0 @@
-export * from './Graph.tsx'
-export * from './ProvidedNodeRenderer.tsx'

package/src/components/relational/graph/story/TestData.tsx

@@ -1,51 +0,0 @@
-import type { CytoscapeOptions } from 'cytoscape'
-
-const elements: CytoscapeOptions['elements'] = [
-  {
-    // node a
-    data: { id: 'a', name: 'element a' },
-  },
-  {
-    // node b
-    data: { id: 'b', name: 'element b' },
-  },
-  {
-    // node c
-    data: { id: 'c', name: 'element c' },
-  },
-  {
-    // edge ab
-    data: {
-      id: 'ab', source: 'a', target: 'b',
-    },
-  },
-  {
-    // edge ac
-    data: {
-      id: 'ac', source: 'a', target: 'c',
-    },
-  },
-]
-
-const style: CytoscapeOptions['style'] = [
-  {
-    selector: 'node',
-    style: { label: 'data(id)' },
-  },
-
-  {
-    selector: 'edge',
-    style: {
-      'curve-style': 'bezier',
-      'line-color': '#ccc',
-      'target-arrow-color': '#ccc',
-      'target-arrow-shape': 'triangle',
-      'width': 3,
-    },
-  },
-]
-
-export const options: CytoscapeOptions = {
-  elements,
-  style,
-}

package/src/components/relational/graph/story/index.ts

@@ -1 +0,0 @@
-export * from './TestData.tsx'

package/src/components/relational/index.ts

@@ -1 +0,0 @@
-export * from './graph/index.ts'

package/src/contexts/CytoscapeInstance/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { CytoscapeInstanceState } from './State.ts'
-
-export const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -1,24 +0,0 @@
-import type { Core } from 'cytoscape'
-import type { PropsWithChildren } from 'react'
-import React, { useMemo, useState } from 'react'
-
-import { CytoscapeInstanceContext } from './Context.ts'
-import type { CytoscapeInstanceState } from './State.ts'
-
-export interface CytoscapeInstanceProviderProps extends PropsWithChildren {
-  defaultInstance?: WeakRef<Core>
-}
-
-export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {
-  const [cy, setCy] = useState<WeakRef<Core> | undefined>(() => defaultInstance)
-
-  const value: CytoscapeInstanceState = useMemo(() => ({
-    cy, provided: true, setCy,
-  }), [cy, setCy])
-
-  return (
-    <CytoscapeInstanceContext value={value}>
-      {children}
-    </CytoscapeInstanceContext>
-  )
-}

package/src/contexts/CytoscapeInstance/State.ts

@@ -1,8 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { Core } from 'cytoscape'
-import type { Dispatch, SetStateAction } from 'react'
-
-export type CytoscapeInstanceState = ContextExState<{
-  cy?: WeakRef<Core>
-  setCy?: Dispatch<SetStateAction<WeakRef<Core> | undefined>>
-}>

package/src/contexts/CytoscapeInstance/index.ts

@@ -1,4 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'
-export * from './use.ts'

package/src/contexts/CytoscapeInstance/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { CytoscapeInstanceContext } from './Context.ts'
-
-export const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)

package/src/contexts/index.ts

@@ -1 +0,0 @@
-export * from './CytoscapeInstance/index.ts'

package/src/hooks/cytoscape/elements/index.ts

@@ -1,2 +0,0 @@
-export * from './useCytoscapeElements.ts'
-export * from './useElements.tsx'

package/src/hooks/cytoscape/elements/useCytoscapeElements.ts

@@ -1,47 +0,0 @@
-import type { EventUnsubscribeFunction } from '@xylabs/events'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import type { ModuleInstance } from '@xyo-network/module-model'
-import { isNodeInstance } from '@xyo-network/node-model'
-import type { ElementDefinition } from 'cytoscape'
-import { useEffect, useState } from 'react'
-
-import { CytoscapeElements } from '../../../Cytoscape/index.ts'
-
-export const useCytoscapeElements = (mod?: WeakRef<ModuleInstance> | null) => {
-  const [elements, setElements] = useState<ElementDefinition[]>([])
-
-  useAsyncEffect(
-
-    async () => {
-      const moduleInstance = mod?.deref()
-      if (moduleInstance) {
-        const newElements = (await CytoscapeElements.buildElements(moduleInstance)) ?? []
-        setElements(newElements)
-      }
-    },
-    [mod],
-  )
-
-  useEffect(() => {
-    let attachedListener: EventUnsubscribeFunction | undefined
-    let detachedListener: EventUnsubscribeFunction | undefined
-
-    if (mod && isNodeInstance(mod)) {
-      attachedListener = mod.on('moduleAttached', async () => {
-        const newElements = (await CytoscapeElements.buildElements(mod)) ?? []
-        setElements(newElements)
-      })
-      detachedListener = mod.on('moduleDetached', async () => {
-        const newElements = (await CytoscapeElements.buildElements(mod)) ?? []
-        setElements(newElements)
-      })
-    }
-
-    return () => {
-      attachedListener?.()
-      detachedListener?.()
-    }
-  }, [mod])
-
-  return elements
-}

package/src/hooks/cytoscape/elements/useElements.tsx

@@ -1,15 +0,0 @@
-import { useHoveredNode } from './useHoveredNode.tsx'
-import { useNewElements } from './useNewElements.tsx'
-import { useRenderNewElements } from './useRenderNewElements.tsx'
-import { useSelectedElement } from './useSelectedElement.tsx'
-
-export const useElements = (hideLabels: boolean) => {
-  const { selectedElement, toggleSelectedElement } = useSelectedElement()
-  const newElements = useNewElements(selectedElement)
-  const renderedElements = useRenderNewElements(newElements, hideLabels)
-  const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)
-
-  return {
-    hoveredNode, setHoveredNode, toggleSelectedElement,
-  }
-}

package/src/hooks/cytoscape/elements/useHoveredNode.tsx

@@ -1,34 +0,0 @@
-import type { NodeCollection, NodeSingular } from 'cytoscape'
-import type { Dispatch, SetStateAction } from 'react'
-import {
-  useCallback, useEffect, useState,
-} from 'react'
-
-import { useCytoscapeInstance } from '../../../contexts/index.ts'
-
-export const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular | undefined, Dispatch<SetStateAction<NodeSingular | undefined>>] => {
-  const { cy } = useCytoscapeInstance(true)
-  const [hoveredNode, setHoveredNode] = useState<NodeSingular>()
-
-  const nodeListener = useCallback((node: NodeSingular) => {
-    node.on('mouseover tap', () => {
-      setHoveredNode(node)
-    })
-  }, [])
-
-  useEffect(() => {
-    if (renderedElements) {
-      // eslint-disable-next-line unicorn/no-array-for-each
-      renderedElements.nodes().forEach(nodeListener)
-    }
-  }, [nodeListener, renderedElements])
-
-  useEffect(() => {
-    cy?.deref()?.ready(() => {
-      // eslint-disable-next-line unicorn/no-array-for-each
-      cy?.deref()?.nodes().forEach(nodeListener)
-    })
-  }, [cy, nodeListener])
-
-  return [hoveredNode, setHoveredNode]
-}

package/src/hooks/cytoscape/elements/useNewElements.tsx

@@ -1,17 +0,0 @@
-import { useWeakModuleFromNode } from '@xyo-network/react-node'
-import type { NodeSingular } from 'cytoscape'
-import { useMemo } from 'react'
-
-import { useCytoscapeElements } from './useCytoscapeElements.ts'
-
-export const useNewElements = (selectedElement?: NodeSingular) => {
-  const selectedAddress = useMemo(() => {
-    const { address: selectedAddress } = selectedElement?.data() ?? {}
-    return selectedAddress
-  }, [selectedElement])
-
-  const [mod] = useWeakModuleFromNode(selectedAddress)
-  const newElements = useCytoscapeElements(mod)
-
-  return newElements
-}

package/src/hooks/cytoscape/elements/useRenderNewElements.tsx

@@ -1,17 +0,0 @@
-import type { ElementDefinition } from 'cytoscape'
-import { useMemo } from 'react'
-
-import { useCytoscapeInstance } from '../../../contexts/index.ts'
-import { ColaLayout } from '../../../Cytoscape/index.ts'
-
-export const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {
-  const { cy } = useCytoscapeInstance(true)
-
-  return useMemo(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy?.deref()?.add(newElements)
-      cy?.deref()?.layout(ColaLayout).run()
-      return renderedElements
-    }
-  }, [cy, hideLabels, newElements])
-}

package/src/hooks/cytoscape/elements/useSelectedElement.tsx

@@ -1,25 +0,0 @@
-import type { NodeSingular } from 'cytoscape'
-import { useState } from 'react'
-
-import { useCytoscapeInstance } from '../../../contexts/index.ts'
-
-export const useSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = useState<NodeSingular>()
-  const { cy } = useCytoscapeInstance(true)
-
-  const updateStyles = (element: NodeSingular) => {
-    const nodes = cy?.deref()?.nodes()
-    nodes?.toggleClass('activeNode', false)
-    element.toggleClass('activeNode', true)
-  }
-
-  const toggleSelectedElement = (address?: string) => {
-    const selectedNode = cy?.deref()?.nodes(`[id="${address}"]`)?.[0]
-    if (selectedNode) {
-      setSelectedElement(selectedNode)
-      updateStyles(selectedNode)
-    }
-  }
-
-  return { selectedElement, toggleSelectedElement }
-}

package/src/hooks/cytoscape/index.ts

@@ -1,4 +0,0 @@
-export * from './elements/index.ts'
-export * from './useCytoscapeOptions.ts'
-export * from './useModuleDetails.tsx'
-export * from './useRelationalGraphOptions.tsx'

package/src/hooks/cytoscape/useCytoscapeOptions.ts

@@ -1,29 +0,0 @@
-import { isDefined } from '@xylabs/sdk-js'
-import type { CytoscapeOptions } from 'cytoscape'
-import { useMemo } from 'react'
-
-import { ConcentricLayout } from '../../Cytoscape/index.ts'
-import { useCytoscapeStyle } from './useCytoscapeStyle.tsx'
-
-export const useCytoscapeOptions = (
-  elements: CytoscapeOptions['elements'],
-  style?: CytoscapeOptions['style'],
-  layout?: CytoscapeOptions['layout'],
-) => {
-  const defaultStyle = useCytoscapeStyle()
-
-  const resolvedLayout = layout ?? ConcentricLayout
-  const resolvedStyle = style ?? defaultStyle
-
-  const options = useMemo<CytoscapeOptions | undefined>(() => {
-    if (elements && isDefined(resolvedLayout) && isDefined(resolvedStyle)) {
-      return {
-        elements,
-        layout: resolvedLayout,
-        style: resolvedStyle,
-      }
-    }
-  }, [elements, resolvedLayout, resolvedStyle])
-
-  return options
-}

package/src/hooks/cytoscape/useCytoscapeStyle.tsx

@@ -1,34 +0,0 @@
-import { useTheme } from '@mui/material'
-import { useIsDark } from '@xylabs/react-theme'
-import type { CytoscapeOptions } from 'cytoscape'
-import { useMemo } from 'react'
-
-import {
-  EdgeStyled, Node, NodeAsRoot, NodeWithName,
-} from '../../Cytoscape/index.ts'
-import { useIcons } from './useIcons.tsx'
-
-export const useCytoscapeStyle = (hideLabels = false) => {
-  const theme = useTheme()
-  const dark = useIsDark()
-  const icons = useIcons()
-
-  const style: CytoscapeOptions['style'] = useMemo(
-    // eslint-disable-next-line complexity
-    () => [
-      Node(icons, dark ? theme.colorSchemes.dark?.palette.primary.main : theme.colorSchemes.light?.palette.primary.main, hideLabels),
-      NodeWithName(
-        dark ? theme.colorSchemes.dark?.palette.primary.contrastText : theme.colorSchemes.light?.palette.primary.contrastText,
-        dark ? theme.colorSchemes.dark?.palette.text.primary : theme.colorSchemes.light?.palette.text.primary,
-      ),
-      NodeAsRoot(dark ? theme.colorSchemes.dark?.palette.secondary.main : theme.colorSchemes.light?.palette.secondary.main),
-      EdgeStyled(
-        dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider,
-        dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider,
-      ),
-    ],
-    [icons, hideLabels, theme],
-  )
-
-  return style
-}

package/src/hooks/cytoscape/useIcons.tsx

@@ -1,22 +0,0 @@
-import { useTheme } from '@mui/material'
-import React, { useMemo } from 'react'
-
-import type { CyNodeModuleTypes } from '../../Cytoscape/index.ts'
-import {
-  CyIconSet, encodeSvg, generateIconMap,
-} from '../../Cytoscape/index.ts'
-
-export const useIcons = () => {
-  const theme = useTheme()
-  const icons = useMemo(() => {
-    const iconMap = generateIconMap()
-    // eslint-disable-next-line unicorn/no-array-reduce
-    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = <IconComponent fontSize="small" />
-      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.vars.palette.primary.contrastText)
-      return acc
-    }, iconMap)
-  }, [theme.vars.palette.primary.contrastText])
-
-  return icons
-}