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

package/src/components/module/graph/Popper.tsx

@@ -1,77 +0,0 @@
-import { CancelRounded } from '@mui/icons-material'
-import type { PopperProps } from '@mui/material'
-import {
-  Button, Card, CardActions, CardHeader, IconButton, Paper, Popper, styled,
-} from '@mui/material'
-import { Identicon } from '@xylabs/react-identicon'
-import type { NodeSingular } from 'cytoscape'
-import React from 'react'
-
-export interface ModuleHoverPopperProps extends PopperProps {
-  node?: NodeSingular
-  onClose?: () => void
-  onModuleDetails?: (address?: string) => void
-  onModuleExplore?: (address?: string) => void
-}
-
-export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({
-  anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props
-}) => {
-  const { address, name } = node?.data() ?? {}
-  return (
-    <>
-      {anchorEl
-        ? (
-            <Popper anchorEl={anchorEl} {...props}>
-              <Card elevation={3}>
-                <CardHeader
-                  action={
-                    onClose
-                      ? (
-                          <IconButton size="small" onClick={onClose}>
-                            <CancelRounded />
-                          </IconButton>
-                        )
-                      : null
-                  }
-                  avatar={(
-                    <Paper
-                      elevation={6}
-                      sx={{ bgcolor: '#fff', p: 1 }}
-                    >
-                      <Identicon value={address} size={24} />
-                    </Paper>
-                  )}
-                  title={name}
-                  subheader={address}
-                />
-                <StyledCardActions>
-                  {onModuleDetails
-                    ? (
-                        <Button onClick={() => onModuleDetails?.(address)} size="small" variant="contained">
-                          Details
-                        </Button>
-                      )
-                    : null}
-                  {onModuleExplore
-                    ? (
-                        <Button onClick={() => onModuleExplore?.(address)} size="small" variant="contained">
-                          Explore
-                        </Button>
-                      )
-                    : null}
-                </StyledCardActions>
-              </Card>
-            </Popper>
-          )
-        : null}
-    </>
-  )
-}
-
-export const StyledModuleHoverPopper = styled(ModuleHoverPopper, { name: 'StyledComponents' })(() => ({ zIndex: 2 }))
-
-export const StyledCardActions = styled(CardActions, { name: 'StyledCardActions' })(() => ({
-  display: 'flex',
-  justifyContent: 'center',
-}))

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

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

package/src/components/module/graph/node/Hover.tsx

@@ -1,38 +0,0 @@
-import type { PopperProps } from '@mui/material'
-import { styled } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { NodeSingular } from 'cytoscape'
-import type { ReactElement } from 'react'
-import React from 'react'
-
-import { useNodeElement } from './hooks/index.ts'
-
-export interface ModuleHoverProps {
-  children?: (anchorElement?: PopperProps['anchorEl'], container?: PopperProps['container']) => ReactElement
-  node?: NodeSingular
-}
-
-export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ children, node }) => {
-  const {
-    boundingBox, ref, currentElement,
-  } = useNodeElement(node)
-
-  return (
-    <>
-      <StyledNodeGhostElementFlexCol ref={ref} left={boundingBox?.x1} height={boundingBox?.h} top={boundingBox?.y1} width={boundingBox?.w} />
-      {node
-        ? <>{children?.(currentElement)}</>
-        : null}
-    </>
-  )
-}
-
-const StyledNodeGhostElementFlexCol = styled(FlexCol, { name: 'StyledNodeGhostElementFlexCol' })(() => ({
-  // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
-  // backgroundColor: '#fff',
-  // opacity: 0.25,
-
-  cursor: 'pointer',
-  pointerEvents: 'none',
-  position: 'absolute',
-}))

package/src/components/module/graph/node/hooks/index.ts

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

package/src/components/module/graph/node/hooks/useNodeElement.tsx

@@ -1,41 +0,0 @@
-import type { PopperProps } from '@mui/material'
-import type { NodeSingular } from 'cytoscape'
-import {
-  useEffect, useRef, useState,
-} from 'react'
-
-export const useNodeElement = (node?: NodeSingular) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const [currentElement, setCurrentElement] = useState<PopperProps['anchorEl'] | null>(null)
-  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())
-
-  // Ensure first render clears the previous element when node changes to avoid flicker
-  useEffect(() => {
-    setCurrentElement(null)
-  }, [node])
-
-  useEffect(() => {
-    setBoundingBox(node?.renderedBoundingBox())
-  }, [node])
-
-  useEffect(() => {
-    const listener = () => {
-      setBoundingBox(node?.renderedBoundingBox())
-    }
-
-    node?.on('position', listener)
-
-    return () => {
-      node?.off('position', undefined, listener)
-    }
-  }, [node])
-
-  // Once boundingBox state is set and applied to the layout, update the ref
-  useEffect(() => {
-    setCurrentElement(ref.current)
-  }, [boundingBox])
-
-  return {
-    boundingBox, currentElement, ref,
-  }
-}

package/src/components/module/graph/node/index.ts

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

package/src/components/module/index.ts

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

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

@@ -1,201 +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 { 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,
-  parameters: { layout: 'fullscreen' },
-  title: 'node/renderer/NodeRelationalGraph',
-} as Meta
-
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = props => <NodeRelationalGraphFlexBox {...props} />
-
-const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakProvidedNode()
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraphFlexBox options={options} {...props} />
-}
-
-const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-
-  return <NodeRelationalGraphFlexBox options={options} {...props} />
-}
-
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => {
-  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
-  return (
-    <div style={{
-      height: '100vh', width: '100vw', position: 'relative',
-    }}
-    >
-      <ButtonGroup>
-        <Button variant={layout === 'dagre' ? 'contained' : 'outlined'} onClick={() => setLayout('dagre')}>Dagre</Button>
-        <Button variant={layout === 'euler' ? 'contained' : 'outlined'} onClick={() => setLayout('euler')}>Euler</Button>
-        <Button variant={layout === 'cose-bilkent' ? 'contained' : 'outlined'} onClick={() => setLayout('cose-bilkent')}>CoseBilkent</Button>
-        <Button variant={layout === 'cola' ? 'contained' : 'outlined'} onClick={() => setLayout('cola')}>Cola</Button>
-      </ButtonGroup>
-      <ProvidedNodeRenderer {...props} layout={layout} />
-    </div>
-  )
-}
-
-const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useWeakNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  const [idWitness, setIdWitness] = useState<IdWitness>()
-  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
-
-  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>
-        <Button onClick={() => setLayout('dagre')}>Dagre</Button>
-        <Button onClick={() => setLayout('euler')}>Euler</Button>
-        <Button onClick={() => setLayout('cose-bilkent')}>CoseBilkent</Button>
-        <Button onClick={() => setLayout('cola')}>Cola</Button>
-      </ButtonGroup>
-      <NodeRelationalGraphFlexBox layout={layout} options={options} {...props} />
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = { options }
-
-const WithDescribe = TemplateDescribe.bind({})
-WithDescribe.args = {}
-WithDescribe.decorators = [MemoryNodeDecorator]
-
-const WithCustomAddress = TemplateCustomAddress.bind({})
-WithCustomAddress.args = {}
-WithCustomAddress.decorators = [MemoryNodeDecorator]
-
-const WithAttachDetach = TemplateAttachDetach.bind({})
-WithAttachDetach.args = {}
-WithAttachDetach.decorators = [MemoryNodeDecorator]
-
-const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
-WithProvidedNodeRenderer.args = {}
-WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
-
-export {
-  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
-}

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

@@ -1,200 +0,0 @@
-import type { CardProps } from '@mui/material'
-import {
-  Box, Button, ButtonGroup, Card, CardHeader, Paper, useTheme,
-} from '@mui/material'
-import {
-  FlexCol, FlexGrowRow, FlexRow,
-} from '@xylabs/react-flexbox'
-import { Identicon } from '@xylabs/react-identicon'
-import type { Address } from '@xylabs/sdk-js'
-import { asAddress, isDefined } from '@xylabs/sdk-js'
-import { useWeakModuleFromNode } from '@xyo-network/react-node'
-import type {
-  Core, EventHandler, NodeSingular,
-} from 'cytoscape'
-import cytoscape from 'cytoscape'
-import cola from 'cytoscape-cola'
-import coseBilkentLayout from 'cytoscape-cose-bilkent'
-import dagre from 'cytoscape-dagre'
-import euler from 'cytoscape-euler'
-import React, {
-  useEffect, useRef, useState,
-} from 'react'
-
-import type { NodeRelationalGraphProps } from '../../lib/index.ts'
-
-const applyLayout = (cy?: cytoscape.Core, name = 'cola', options?: object) => {
-  cy?.layout({ name, ...options }).run()
-}
-
-const loadLayout = (layout = 'cola') => {
-  switch (layout) {
-    case 'cose-bilkent': {
-      cytoscape.use(coseBilkentLayout)
-      break
-    }
-    case 'cola': {
-      cytoscape.use(cola)
-      break
-    }
-    case 'euler': {
-      cytoscape.use(euler)
-      break
-    }
-    case 'dagre': {
-      cytoscape.use(dagre)
-      break
-    }
-    default: {
-      cytoscape.use(euler)
-      break
-    }
-  }
-}
-
-type ModuleHoverDetailsProps = CardProps & {
-  address: Address
-  name: string
-}
-
-const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({
-  name, address, ...props
-}) => {
-  return (
-    <Card elevation={3} {...props}>
-      <CardHeader
-        avatar={(
-          <Paper
-            elevation={6}
-            sx={{ bgcolor: '#fff', p: 1 }}
-          >
-            <Identicon value={address} size={24} />
-          </Paper>
-        )}
-        title={name}
-        subheader={address}
-      />
-    </Card>
-  )
-}
-
-export const NodeRelationalGraphFlexBox: React.FC<NodeRelationalGraphProps> = ({
-  actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props
-}) => {
-  const theme = useTheme()
-  const [cy, setCy] = useState<Core>()
-  const cytoscapeRef = useRef<HTMLDivElement>(null)
-  const [hoverBoundingBox, setHoverBoundingBox] = useState<{ x1: number; x2: number; y1: number; y2: number }>()
-  const [hoverAddress, setHoverAddress] = useState<Address>()
-
-  const [moduleInstance] = useWeakModuleFromNode(hoverAddress, { node })
-
-  useEffect(() => {
-    const listener: EventHandler = ({ target }) => {
-      const cyNode = target as NodeSingular
-      const bb = cyNode?.renderedBoundingBox?.()
-      setHoverBoundingBox(bb)
-      const id = cyNode.id?.()
-      if (isDefined(id)) {
-        if (id.includes('/')) {
-          setHoverAddress(undefined)
-          onHover?.()
-        } else {
-          setHoverAddress(asAddress(id))
-          onHover?.(asAddress(id))
-        }
-      }
-    }
-    cy?.on('mouseover tap', listener)
-
-    return () => {
-      cy?.off('mouseover tap', listener)
-    }
-  }, [onHover, cy])
-
-  const handleReset = () => {
-    cy?.reset()
-    applyLayout(cy, layout ?? 'euler', layoutOptions)
-  }
-
-  useEffect(() => {
-    let newCy: Core | undefined
-    const container = cytoscapeRef.current
-    if (container) {
-      newCy = cytoscape({
-        container,
-        ...options,
-      })
-      setCy(newCy)
-    } else {
-      newCy?.destroy()
-      setCy(undefined)
-    }
-    return () => {
-      newCy?.destroy()
-      setCy(undefined)
-    }
-  }, [options, cytoscapeRef, layoutOptions])
-
-  useEffect(() => {
-    if (cy) {
-      loadLayout(layout)
-      applyLayout(cy, layout ?? 'cola', layoutOptions)
-    }
-  }, [cy, layoutOptions, layout])
-
-  return (
-    <FlexCol id="relational-graph-wrapper" {...props}>
-      {hoverAddress && hoverBoundingBox
-        ? (
-            <Box position="absolute" top={hoverBoundingBox.y1} left={hoverBoundingBox.x1} zIndex={100}>
-              <ModuleHoverDetails address={hoverAddress} name={moduleInstance?.deref()?.id ?? 'Unknown'} />
-            </Box>
-          )
-        : null}
-      <FlexRow justifyContent="start" width="100%">
-        {actions === null
-          ? null
-          : isDefined(actions)
-            ? (
-                <ButtonGroup>
-                  {actions}
-                  <Button size="small" variant="contained" onClick={handleReset}>
-                    Reset View
-                  </Button>
-                </ButtonGroup>
-              )
-            : (
-                <Button size="small" variant="contained" onClick={handleReset}>
-                  Reset
-                </Button>
-              )}
-      </FlexRow>
-      <FlexGrowRow width="100%" alignItems="start">
-        {showDetails
-          ? (
-              <FlexCol height="100%" width="85%">
-                {detail}
-              </FlexCol>
-            )
-          : null}
-        <FlexCol
-          justifyContent="start"
-          classes="cytoscape-wrap"
-          width={showDetails ? '15%' : '100%'}
-          height={showDetails ? '50%' : '100%'}
-          border={showDetails ? `1px solid ${theme.vars.palette.divider}` : undefined}
-        >
-          {/* Cytoscape Element */}
-          <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={cytoscapeRef} />
-          {children}
-        </FlexCol>
-      </FlexGrowRow>
-    </FlexCol>
-  )
-}
-
-NodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'
-
-/** @deprecated */
-export const NodeRelationalGraph = NodeRelationalGraphFlexBox