@xyo-network/react-node-renderer 2.47.35 → 2.47.37

package/src/hooks/useCytoscapeElements.ts

@@ -1,67 +0,0 @@
-import { useAsyncEffect } from '@xylabs/react-shared'
-import { ModuleWrapper } from '@xyo-network/module'
-import { NodeWrapper } from '@xyo-network/node'
-import { useProvidedWrappedNode } from '@xyo-network/react-node'
-import { CytoscapeOptions } from 'cytoscape'
-import { useState } from 'react'
-
-import { parseModuleType } from '../lib'
-
-/**
- * Note: Relies on describe but could eventually be converted to a discover call
- * Logic would be similar to what the bridge does
- */
-export const useCytoscapeElements = () => {
-  const [node] = useProvidedWrappedNode()
-  const [elements, setElements] = useState<CytoscapeOptions['elements']>()
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      if (node) {
-        try {
-          const newElements = []
-          const wrapper = NodeWrapper.wrap(node)
-          const description = await wrapper?.describe()
-          const rootNodeId = description.name ?? description.address.substring(0, 6)
-          newElements.push({
-            data: { id: rootNodeId, type: parseModuleType(description.queries) },
-          })
-          const children = description.children
-          await Promise.all(
-            (children ?? [])?.map(async (address) => {
-              const [result] = await wrapper.resolveWrapped(ModuleWrapper, { address: [address] })
-              try {
-                const description = await result.describe()
-                const newNodeId = description.name ?? description.address.substring(0, 6)
-                const newNode = {
-                  data: {
-                    id: newNodeId,
-                    type: parseModuleType(description.queries),
-                  },
-                }
-                newElements.push(newNode)
-                const newEdge = {
-                  data: {
-                    id: `${rootNodeId}/${newNodeId}`,
-                    source: rootNodeId,
-                    target: newNodeId,
-                  },
-                }
-                newElements.push(newEdge)
-              } catch (e) {
-                console.error(e, result)
-              }
-            }),
-          )
-          setElements(newElements)
-        } catch (e) {
-          console.error(e)
-        }
-      }
-    },
-    [node],
-  )
-
-  return elements
-}

package/src/hooks/useCytoscapeOptions.ts

@@ -1,57 +0,0 @@
-import { useTheme } from '@mui/material'
-import { CytoscapeOptions } from 'cytoscape'
-import { useMemo } from 'react'
-
-import { CyNodeIcons, useIcons } from './useIcons'
-
-export const useCytoscapeOptions = (elements: CytoscapeOptions['elements']) => {
-  const theme = useTheme()
-  const icons = useIcons()
-
-  const options = useMemo<CytoscapeOptions>(
-    () => ({
-      elements,
-      layout: {
-        minNodeSpacing: 75,
-        name: 'concentric',
-      },
-      style: [
-        {
-          selector: 'node[id]',
-          style: {
-            color: theme.palette.text.primary,
-            'font-family': 'Lexend Deca, Helvetica, sans-serif',
-            'font-size': 14,
-            'text-margin-y': -5,
-          },
-        },
-        {
-          selector: 'node',
-          style: {
-            'background-color': theme.palette.primary.main,
-            'background-height': '75%',
-            // TODO - make dynamic
-            'background-image': (elem) => icons[elem.data('type') as CyNodeIcons],
-            'background-image-smoothing': 'yes',
-            'background-width': '75%',
-            label: 'data(id)',
-          },
-        },
-        {
-          selector: 'edge',
-          style: {
-            'curve-style': 'bezier',
-            'line-color': theme.palette.divider,
-            'line-opacity': 0.1,
-            'target-arrow-color': theme.palette.divider,
-            'target-arrow-shape': 'triangle',
-            width: 3,
-          },
-        },
-      ],
-    }),
-    [elements, icons, theme.palette.divider, theme.palette.primary.main, theme.palette.text.primary],
-  )
-
-  return options
-}

package/src/hooks/useIcons.tsx

@@ -1,33 +0,0 @@
-import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
-import HubIcon from '@mui/icons-material/Hub'
-import QuestionMarkRoundedIcon from '@mui/icons-material/QuestionMarkRounded'
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded'
-import { SvgIconTypeMap, useTheme } from '@mui/material'
-import { OverridableComponent } from '@mui/material/OverridableComponent'
-import { useMemo } from 'react'
-
-import { encodeSvg } from '../lib'
-
-export type CyNodeIcons = 'node' | 'archivist' | 'diviner' | 'module'
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const CyIconSet: Record<CyNodeIcons, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {
-  archivist: GridViewRoundedIcon,
-  diviner: VisibilityRoundedIcon,
-  module: QuestionMarkRoundedIcon,
-  node: HubIcon,
-}
-
-export const useIcons = () => {
-  const theme = useTheme()
-  const icons = useMemo(() => {
-    const iconMap: Record<CyNodeIcons, string> = { archivist: '', diviner: '', module: '', node: '' }
-    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = <IconComponent fontSize="small" />
-      acc[name as CyNodeIcons] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))
-      return acc
-    }, iconMap)
-  }, [theme.palette])
-
-  return icons
-}