@xyo-network/react-node-renderer 2.75.7 → 2.76.1

package/package.json

@@ -10,25 +10,25 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/exists": "^3.1.13",
+    "@xylabs/exists": "^3.3.2",
     "@xylabs/react-async-effect": "^3.1.7",
     "@xylabs/react-flexbox": "^3.1.7",
     "@xylabs/react-identicon": "^3.1.7",
     "@xylabs/react-promise": "^3.1.7",
     "@xylabs/react-shared": "^3.1.7",
-    "@xyo-network/account-model": "^2.99.1",
-    "@xyo-network/archivist-model": "^2.99.1",
-    "@xyo-network/bridge-model": "^2.99.1",
-    "@xyo-network/diviner-model": "^2.99.1",
-    "@xyo-network/module-events": "^2.99.1",
-    "@xyo-network/module-model": "^2.99.1",
-    "@xyo-network/node-model": "^2.99.1",
-    "@xyo-network/react-archivist": "~2.75.7",
-    "@xyo-network/react-module": "~2.75.7",
-    "@xyo-network/react-node": "~2.75.7",
-    "@xyo-network/react-shared": "~2.75.7",
-    "@xyo-network/sentinel-model": "^2.99.1",
-    "@xyo-network/witness-model": "^2.99.1",
+    "@xyo-network/account-model": "^2.99.3",
+    "@xyo-network/archivist-model": "^2.99.3",
+    "@xyo-network/bridge-model": "^2.99.3",
+    "@xyo-network/diviner-model": "^2.99.3",
+    "@xyo-network/module-events": "^2.99.3",
+    "@xyo-network/module-model": "^2.99.3",
+    "@xyo-network/node-model": "^2.99.3",
+    "@xyo-network/react-archivist": "~2.76.1",
+    "@xyo-network/react-module": "~2.76.1",
+    "@xyo-network/react-node": "~2.76.1",
+    "@xyo-network/react-shared": "~2.76.1",
+    "@xyo-network/sentinel-model": "^2.99.3",
+    "@xyo-network/witness-model": "^2.99.3",
     "cytoscape": "^3.29.2",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-cose-bilkent": "^4.1.0",
@@ -48,16 +48,16 @@
     "@types/cytoscape-dagre": "^2.3.3",
     "@types/cytoscape-euler": "^1.2.3",
     "@types/react-dom": "^18.3.0",
-    "@xylabs/ts-scripts-yarn3": "^3.9.1",
-    "@xylabs/tsconfig-react": "^3.9.1",
-    "@xyo-network/archivist": "^2.99.1",
-    "@xyo-network/bridge-model": "^2.99.1",
-    "@xyo-network/http-bridge": "^2.99.1",
+    "@xylabs/ts-scripts-yarn3": "^3.10.0",
+    "@xylabs/tsconfig-react": "^3.10.0",
+    "@xyo-network/archivist": "^2.99.3",
+    "@xyo-network/bridge-model": "^2.99.3",
+    "@xyo-network/http-bridge": "^2.99.3",
     "@xyo-network/id-plugin": "^2.94.3",
-    "@xyo-network/node-memory": "^2.99.1",
-    "@xyo-network/react-storybook": "~2.75.7",
-    "@xyo-network/react-wallet": "~2.75.7",
-    "@xyo-network/sentinel": "^2.99.1",
+    "@xyo-network/node-memory": "^2.99.3",
+    "@xyo-network/react-storybook": "~2.76.1",
+    "@xyo-network/react-wallet": "~2.76.1",
+    "@xyo-network/sentinel": "^2.99.3",
     "typescript": "^5.4.5"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -111,6 +111,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.75.7",
+  "version": "2.76.1",
   "type": "module"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -7,7 +7,7 @@ import { parseModuleType } from './lib'
 interface ModuleInfo {
   children: ModuleInfo[]
   depth: number
-  module: ModuleInstance
+  mod: ModuleInstance
 }
 
 export const CytoscapeElements = {
@@ -24,15 +24,15 @@ export const CytoscapeElements = {
     }
   },
 
-  async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {
-    const info = await CytoscapeElements.recurseNodes(module)
+  async buildElements(mod: ModuleInstance): Promise<ElementDefinition[]> {
+    const info = await CytoscapeElements.recurseNodes(mod)
     const newElements: ElementDefinition[] = await this.buildElementsFromInfo(info, undefined, ['activeNode'])
 
     return newElements
   },
 
   async buildElementsFromInfo(info: ModuleInfo, root?: ElementDefinition, classes: string[] = []): Promise<ElementDefinition[]> {
-    const newNode = CytoscapeElements.buildNode(info.module, { childCount: info.children.length, depth: info.depth }, classes)
+    const newNode = CytoscapeElements.buildNode(info.mod, { childCount: info.children.length, depth: info.depth }, classes)
     const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, { depth: info.depth, siblingCount: info.children.length }) : undefined
     const newElements: ElementDefinition[] = [newNode]
     if (newEdge) {
@@ -46,22 +46,22 @@ export const CytoscapeElements = {
     return newElements
   },
 
-  buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {
-    const { address, id } = module
+  buildNode(mod: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {
+    const { address, id } = mod
     return {
       classes,
       data: {
         address,
         id: address,
         name: id,
-        type: parseModuleType(module),
+        type: parseModuleType(mod),
         ...properties,
       },
     }
   },
 
-  buildRootNode: (module: ModuleInstance): ElementDefinition => {
-    return CytoscapeElements.buildNode(module, {}, ['activeNode'])
+  buildRootNode: (mod: ModuleInstance): ElementDefinition => {
+    return CytoscapeElements.buildNode(mod, {}, ['activeNode'])
   },
 
   normalizeName(name?: string) {
@@ -71,7 +71,7 @@ export const CytoscapeElements = {
   },
 
   async recurseNodes(root: ModuleInstance, maxDepth = 10, depth = 1): Promise<ModuleInfo> {
-    const info: ModuleInfo = { children: [], depth, module: root }
+    const info: ModuleInfo = { children: [], depth, mod: root }
 
     if (maxDepth > 0) {
       const children = await root.resolve('*', { direction: 'down', maxDepth: 1 })

package/src/Cytoscape/CytoscapeIcons.tsx

@@ -18,6 +18,7 @@ export const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTy
   archivist: Inventory2RoundedIcon,
   bridge: InsertLinkRoundedIcon,
   diviner: BubbleChartRoundedIcon,
+  // eslint-disable-next-line id-denylist
   module: QuestionMarkRoundedIcon,
   node: HubIcon,
   sentinel: TimerRoundedIcon,

package/src/Cytoscape/lib/iconMap.ts

@@ -4,6 +4,7 @@ export const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({
   archivist: '',
   bridge: '',
   diviner: '',
+  // eslint-disable-next-line id-denylist
   module: '',
   node: '',
   sentinel: '',

package/src/Cytoscape/lib/parseModuleType.ts

@@ -8,20 +8,20 @@ import { isWitnessModule } from '@xyo-network/witness-model'
 
 import { CyNodeModuleTypes } from './CyNodeModuleTypes'
 
-export const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {
+export const parseModuleType = (mod?: ModuleInstance): CyNodeModuleTypes => {
   let type: CyNodeModuleTypes = 'module'
-  if (module) {
-    if (isArchivistInstance(module)) {
+  if (mod) {
+    if (isArchivistInstance(mod)) {
       type = 'archivist'
-    } else if (isBridgeInstance(module)) {
+    } else if (isBridgeInstance(mod)) {
       type = 'bridge'
-    } else if (isDivinerInstance(module)) {
+    } else if (isDivinerInstance(mod)) {
       type = 'diviner'
-    } else if (isNodeInstance(module)) {
+    } else if (isNodeInstance(mod)) {
       type = 'node'
-    } else if (isSentinelInstance(module)) {
+    } else if (isSentinelInstance(mod)) {
       type = 'sentinel'
-    } else if (isWitnessModule(module)) {
+    } else if (isWitnessModule(mod)) {
       type = 'witness'
     } else {
       type = 'module'

package/src/components/lib/RelationalGraphProps.ts

@@ -1,4 +1,6 @@
+import { Address } from '@xylabs/hex'
 import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { NodeInstance } from '@xyo-network/node-model'
 import { CytoscapeOptions } from 'cytoscape'
 import { PropsWithChildren, ReactNode } from 'react'
 
@@ -7,6 +9,8 @@ export interface NodeRelationalGraphProps extends PropsWithChildren<FlexBoxProps
   detail?: ReactNode
   layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola'
   layoutOptions?: object
+  node?: WeakRef<NodeInstance>
+  onHover?: (address?: Address) => void
   options?: CytoscapeOptions
   showDetails?: boolean
 }

package/src/components/module/CardParser.tsx

@@ -5,19 +5,19 @@ import { ArchivistCard } from '@xyo-network/react-archivist'
 import { DivinerCard, ModuleCard } from '@xyo-network/react-module'
 
 export interface ModuleCardParserProps {
-  module?: ModuleInstance
+  mod?: ModuleInstance
 }
 
-export const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {
+export const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ mod }) => {
   switch (true) {
-    case isArchivistInstance(module): {
-      return <ArchivistCard module={asArchivistInstance(module)} />
+    case isArchivistInstance(mod): {
+      return <ArchivistCard mod={asArchivistInstance(mod)} />
     }
-    case isDivinerInstance(module): {
-      return <DivinerCard module={asDivinerInstance(module)} />
+    case isDivinerInstance(mod): {
+      return <DivinerCard mod={asDivinerInstance(mod)} />
     }
     default: {
-      return <ModuleCard module={module} />
+      return <ModuleCard mod={mod} />
     }
   }
 }

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

@@ -24,13 +24,13 @@ export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ hideActi
   const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
   const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels)
 
-  const { module, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))
+  const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))
 
   return (
     <WithExtensions>
       <NodeRelationalGraphFlexBox
         actions={
-          module ? null
+          mod ? null
           : hideActions ?
             null
           : <Button size={'small'} onClick={handleToggleLabels} variant="contained">
@@ -38,7 +38,7 @@ export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ hideActi
             </Button>
 
         }
-        showDetails={!!module}
+        showDetails={!!mod}
         detail={<DetailsFlexbox onClose={() => onModuleDetails(null)} />}
         options={options}
         ref={cytoscapeRef}

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

@@ -1,13 +1,16 @@
-import { Button, ButtonGroup, useTheme } from '@mui/material'
+import { CancelRounded } from '@mui/icons-material'
+import { Box, Button, ButtonGroup, Card, CardHeader, CardProps, IconButton, Paper, useTheme } from '@mui/material'
+import { Address, asAddress } from '@xylabs/hex'
 import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
-import cytoscape, { Core } from 'cytoscape'
+import { Identicon } from '@xylabs/react-identicon'
+import { useWeakModuleFromNode } from '@xyo-network/react-node'
+import cytoscape, { Core, NodeSingular } from 'cytoscape'
 import cola from 'cytoscape-cola'
 import coseBilkentLayout from 'cytoscape-cose-bilkent'
 import dagre from 'cytoscape-dagre'
 import eulerLayout from 'cytoscape-euler'
 import { forwardRef, useEffect, useRef, useState } from 'react'
 
-import { useCytoscapeInstance } from '../../../contexts'
 import { NodeRelationalGraphProps } from '../../lib'
 
 const applyLayout = (cy?: cytoscape.Core, name = 'cola', options?: object) => {
@@ -35,12 +38,55 @@ const loadLayout = (layout = 'cola') => {
   }
 }
 
+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 = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(
-  ({ actions, children, layout, layoutOptions, showDetails, detail, options, ...props }, ref) => {
+  ({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
     const theme = useTheme()
     const [cy, setCy] = useState<Core>()
-    const { setCy: setCyContext } = useCytoscapeInstance()
     const cytoscapeRef = useRef<HTMLDivElement>()
+    const [hoverPosition, setHoverBoundingBox] = useState<{ x1: number; x2: number; y1: number; y2: number }>()
+    const [hoverAddress, setHoverAddress] = useState<Address>()
+
+    const [moduleInstance] = useWeakModuleFromNode(hoverAddress, { node })
+
+    useEffect(() => {
+      cy?.on('mouseover tap', ({ target }) => {
+        const cyNode = target as NodeSingular
+        const bb = cyNode?.renderedBoundingBox?.()
+        console.log(bb)
+        setHoverBoundingBox(bb)
+        const id = cyNode.id?.()
+        if (id) {
+          if (id.includes('/')) {
+            setHoverAddress(undefined)
+            onHover?.()
+          } else {
+            setHoverAddress(asAddress(id))
+            onHover?.(asAddress(id))
+          }
+        }
+      })
+    }, [onHover, cy])
 
     const handleReset = () => {
       cy?.reset()
@@ -70,12 +116,13 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
       }
     }, [cy, layoutOptions, layout])
 
-    useEffect(() => {
-      setCyContext?.(cy ? new WeakRef(cy) : undefined)
-    }, [cy, setCyContext])
-
     return (
       <FlexCol id="relational-graph-wrapper" ref={ref} {...props}>
+        {hoverAddress && hoverPosition ?
+          <Box position="absolute" top={hoverPosition.y1} left={hoverPosition.x1} zIndex={100}>
+            <ModuleHoverDetails address={hoverAddress} name={moduleInstance?.deref()?.id ?? 'Unknown'} />
+          </Box>
+        : null}
         <FlexRow justifyContent="start" width="100%">
           {actions === null ?
             null

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

@@ -7,32 +7,32 @@ import { useEffect, useState } from 'react'
 
 import { CytoscapeElements } from '../../../Cytoscape'
 
-export const useCytoscapeElements = (module?: WeakRef<ModuleInstance> | null) => {
+export const useCytoscapeElements = (mod?: WeakRef<ModuleInstance> | null) => {
   const [elements, setElements] = useState<ElementDefinition[]>([])
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
-      const moduleInstance = module?.deref()
+      const moduleInstance = mod?.deref()
       if (moduleInstance) {
         const newElements = (await CytoscapeElements.buildElements(moduleInstance)) ?? []
         setElements(newElements)
       }
     },
-    [module],
+    [mod],
   )
 
   useEffect(() => {
     let attachedListener: EventUnsubscribeFunction | undefined
     let detachedListener: EventUnsubscribeFunction | undefined
 
-    if (module && isNodeInstance(module)) {
-      attachedListener = module.on('moduleAttached', async () => {
-        const newElements = (await CytoscapeElements.buildElements(module)) ?? []
+    if (mod && isNodeInstance(mod)) {
+      attachedListener = mod.on('moduleAttached', async () => {
+        const newElements = (await CytoscapeElements.buildElements(mod)) ?? []
         setElements(newElements)
       })
-      detachedListener = module.on('moduleDetached', async () => {
-        const newElements = (await CytoscapeElements.buildElements(module)) ?? []
+      detachedListener = mod.on('moduleDetached', async () => {
+        const newElements = (await CytoscapeElements.buildElements(mod)) ?? []
         setElements(newElements)
       })
     }
@@ -41,7 +41,7 @@ export const useCytoscapeElements = (module?: WeakRef<ModuleInstance> | null) =>
       attachedListener?.()
       detachedListener?.()
     }
-  }, [module])
+  }, [mod])
 
   return elements
 }

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

@@ -10,8 +10,8 @@ export const useNewElements = (selectedElement?: NodeSingular) => {
     return selectedAddress
   }, [selectedElement])
 
-  const [module] = useWeakModuleFromNode(selectedAddress)
-  const newElements = useCytoscapeElements(module)
+  const [mod] = useWeakModuleFromNode(selectedAddress)
+  const newElements = useCytoscapeElements(mod)
 
   return newElements
 }

package/src/hooks/cytoscape/useModuleDetails.tsx

@@ -69,5 +69,5 @@ export const useModuleDetails = (rootModule?: WeakRef<ModuleInstance> | null, on
     setModuleAddress(address)
   }
 
-  return { module: foundModule, onModuleDetails }
+  return { mod: foundModule, onModuleDetails }
 }

package/src/hooks/cytoscape/useRelationalGraphOptions.tsx

@@ -6,14 +6,14 @@ import { useCytoscapeElements } from './elements'
 import { useCytoscapeOptions } from './useCytoscapeOptions'
 import { useCytoscapeStyle } from './useCytoscapeStyle'
 
-export const useRelationalGraphOptions = (module?: WeakRef<ModuleInstance>) => {
+export const useRelationalGraphOptions = (mod?: WeakRef<ModuleInstance>) => {
   const [hideLabels, setHideLabels] = useState(true)
 
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue)
   }
 
-  const elements = useCytoscapeElements(module)
+  const elements = useCytoscapeElements(mod)
   const style = useCytoscapeStyle(hideLabels)
   const options = useCytoscapeOptions(elements, style, ConcentricLayout)