@xyo-network/react-node-renderer 2.47.35

package/src/components/RelationalGraph.tsx

@@ -0,0 +1,35 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+import { useShareForwardedRef } from '@xyo-network/react-shared'
+import cytoscape, { Core, CytoscapeOptions } from 'cytoscape'
+import { forwardRef, useEffect, useState } from 'react'
+
+export interface NodeRelationalGraph extends WithChildren<FlexBoxProps> {
+  options?: CytoscapeOptions
+}
+
+export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ children, options, ...props }, ref) => {
+  const sharedRef = useShareForwardedRef(ref)
+  // TODO - likely a value to stick in context
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [cy, setCy] = useState<Core>()
+
+  useEffect(() => {
+    if (sharedRef) {
+      setCy(
+        cytoscape({
+          container: sharedRef.current,
+          ...options,
+        }),
+      )
+    }
+  }, [options, sharedRef])
+
+  return (
+    <FlexCol ref={sharedRef} {...props}>
+      {children}
+    </FlexCol>
+  )
+})
+
+NodeRelationalGraph.displayName = 'NodeRelationalGraph'

package/src/components/index.ts

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

package/src/components/story/TestData.tsx

@@ -0,0 +1,49 @@
+import { 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/story/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCytoscapeElements'
+export * from './useCytoscapeOptions'

package/src/hooks/useCytoscapeElements.ts

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,33 @@
+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
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './hooks'

package/src/lib/index.ts

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

package/src/lib/utils.ts

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react'
+// eslint-disable-next-line import/no-internal-modules
+import { renderToStaticMarkup } from 'react-dom/server'
+
+const dataUri = 'data:image/svg+xml,'
+
+export const encodeSvg = (reactElement: ReactElement, color?: string) => {
+  const svgString = renderToStaticMarkup(reactElement)
+
+  const doc = new DOMParser().parseFromString(svgString, 'text/html')
+  const svgElement = doc.getElementsByTagName('svg')[0]
+  if (svgElement) {
+    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+    svgElement.setAttribute('height', '100')
+    svgElement.style.fill = color ?? 'black'
+  }
+
+  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`
+}
+
+export const parseModuleType = (queries?: string[]) => {
+  let type
+  if (queries) {
+    for (let i = 0; i < queries.length; i++) {
+      if (queries[i].includes('archivist')) {
+        type = 'archivist'
+        break
+      }
+      if (queries[i].includes('diviner')) {
+        type = 'diviner'
+        break
+      }
+      if (queries[i].includes('node')) {
+        type = 'node'
+        break
+      }
+      type = 'module'
+    }
+    return type
+  }
+}

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'