@xyo-network/react-node-renderer 2.64.3 → 2.64.5

package/package.json

@@ -10,19 +10,19 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-async-effect": "^3.0.6",
-    "@xylabs/react-flexbox": "^3.0.6",
-    "@xylabs/react-identicon": "^3.0.6",
-    "@xylabs/react-shared": "^3.0.6",
-    "@xyo-network/account-model": "^2.75.4",
-    "@xyo-network/archivist-model": "^2.75.4",
-    "@xyo-network/diviner-model": "^2.75.4",
-    "@xyo-network/module": "^2.75.4",
-    "@xyo-network/node-model": "^2.75.4",
-    "@xyo-network/react-archivist": "~2.64.3",
-    "@xyo-network/react-module": "~2.64.3",
-    "@xyo-network/react-node": "~2.64.3",
-    "@xyo-network/react-shared": "~2.64.3",
+    "@xylabs/react-async-effect": "^3.0.8",
+    "@xylabs/react-flexbox": "^3.0.8",
+    "@xylabs/react-identicon": "^3.0.8",
+    "@xylabs/react-shared": "^3.0.8",
+    "@xyo-network/account-model": "^2.75.6",
+    "@xyo-network/archivist-model": "^2.75.6",
+    "@xyo-network/diviner-model": "^2.75.6",
+    "@xyo-network/module": "^2.75.6",
+    "@xyo-network/node-model": "^2.75.6",
+    "@xyo-network/react-archivist": "~2.64.5",
+    "@xyo-network/react-module": "~2.64.5",
+    "@xyo-network/react-node": "~2.64.5",
+    "@xyo-network/react-shared": "~2.64.5",
     "cytoscape": "^3.26.0",
     "cytoscape-cola": "^2.5.1"
   },
@@ -39,19 +39,19 @@
     "@storybook/react": "^7.4.5",
     "@types/cytoscape": "^3.19.11",
     "@types/react-dom": "^18.2.8",
-    "@xylabs/ts-scripts-yarn3": "^3.0.79",
-    "@xylabs/tsconfig-react": "^3.0.79",
-    "@xyo-network/archivist": "^2.75.4",
-    "@xyo-network/bridge-model": "^2.75.5",
-    "@xyo-network/http-bridge": "^2.75.4",
-    "@xyo-network/id-plugin": "^2.75.4",
-    "@xyo-network/module": "^2.75.4",
-    "@xyo-network/node-memory": "^2.75.4",
-    "@xyo-network/react-node": "~2.64.3",
-    "@xyo-network/react-storybook": "~2.64.3",
-    "@xyo-network/react-wallet": "~2.64.3",
-    "@xyo-network/sentinel": "^2.75.4",
-    "@xyo-network/witness": "^2.75.4",
+    "@xylabs/ts-scripts-yarn3": "^3.0.82",
+    "@xylabs/tsconfig-react": "^3.0.82",
+    "@xyo-network/archivist": "^2.75.6",
+    "@xyo-network/bridge-model": "^2.75.6",
+    "@xyo-network/http-bridge": "^2.75.6",
+    "@xyo-network/id-plugin": "^2.75.6",
+    "@xyo-network/module": "^2.75.6",
+    "@xyo-network/node-memory": "^2.75.6",
+    "@xyo-network/react-node": "~2.64.5",
+    "@xyo-network/react-storybook": "~2.64.5",
+    "@xyo-network/react-wallet": "~2.64.5",
+    "@xyo-network/sentinel": "^2.75.6",
+    "@xyo-network/witness": "^2.75.6",
     "typescript": "^5.2.2"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -105,6 +105,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.64.3",
+  "version": "2.64.5",
   "type": "module"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -24,7 +24,7 @@ export class CytoscapeElements {
     try {
       const childElements = await CytoscapeElements.recurseNodes(module)
       childElements?.forEach((module) => {
-        const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)
+        const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })
         newElements.push(newNode)
 
         const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
@@ -38,7 +38,7 @@ export class CytoscapeElements {
     }
   }
 
-  static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {
+  static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {
     const { address, config } = module
     const normalizedName = config.name ?? address.substring(0, 8)
     return {
@@ -46,14 +46,14 @@ export class CytoscapeElements {
         address,
         id: address,
         name: normalizedName,
-        rootNodeId,
         type: parseModuleType(module),
+        ...properties,
       },
     }
   }
 
   static buildRootNode = (module: ModuleInstance): ElementDefinition => {
-    return CytoscapeElements.buildNode(module)
+    return CytoscapeElements.buildNode(module, { root: true })
   }
 
   static normalizeName(name?: string) {

package/src/Cytoscape/CytoscapeStyles.ts

@@ -39,3 +39,5 @@ export const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({
     width: 3,
   },
 })
+
+export const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]

package/src/components/RelationalGraph.stories.tsx

@@ -12,6 +12,7 @@ import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
 import { useState } from 'react'
 
+import { CytoscapeInstanceProvider } from '../contexts'
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
 import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
 import { NodeRelationalGraphFlexBox } from './RelationalGraph'
@@ -62,7 +63,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   return (
     <WalletProvider rootWallet={wallet}>
       <NodeProvider node={node}>
-        <Story {...args} />
+        <CytoscapeInstanceProvider>
+          <Story {...args} />
+        </CytoscapeInstanceProvider>
       </NodeProvider>
     </WalletProvider>
   )

package/src/components/RelationalGraph.tsx

@@ -34,12 +34,20 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
   return (
     <FlexCol {...props}>
       <ActionsContainer>
-        <ButtonGroup>
-          {actions}
-          <Button size={'small'} variant={'contained'} onClick={handleReset}>
-            Reset
-          </Button>
-        </ButtonGroup>
+        <>
+          {actions ? (
+            <ButtonGroup>
+              {actions}
+              <Button size={'small'} variant={'contained'} onClick={handleReset}>
+                Reset View
+              </Button>
+            </ButtonGroup>
+          ) : (
+            <Button size={'small'} variant={'contained'} onClick={handleReset}>
+              Reset
+            </Button>
+          )}
+        </>
       </ActionsContainer>
       {/* Cytoscape Element */}
       <FlexCol alignItems="stretch" height="100%" position="absolute" ref={sharedRef} width="100%"></FlexCol>

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

@@ -10,8 +10,7 @@ import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
 import { useState } from 'react'
 
-import { CytoscapeInstanceProvider } from '../../../contexts'
-import { ModuleGraphFlexBox } from './GraphFlexBox'
+import { ModuleGraphFlexBoxWithProvider } from './GraphFlexBox'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -58,9 +57,7 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   return (
     <WalletProvider rootWallet={wallet}>
       <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
+        <Story {...args} />
       </NodeProvider>
     </WalletProvider>
   )
@@ -68,15 +65,15 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
 
 // eslint-disable-next-line import/no-default-export
 export default {
-  component: ModuleGraphFlexBox,
-  title: 'node/renderer/ModuleGraphFlexBox',
+  component: ModuleGraphFlexBoxWithProvider,
+  title: 'node/renderer/ModuleGraphFlexBoxWithProvider',
 } as Meta
 
-const Template: StoryFn<typeof ModuleGraphFlexBox> = (props) => <ModuleGraphFlexBox {...props} />
+const Template: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => <ModuleGraphFlexBoxWithProvider {...props} />
 
-const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBox> = (props) => {
+const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => {
   const [node] = useProvidedNode()
-  return <ModuleGraphFlexBox rootModule={node} {...props} />
+  return <ModuleGraphFlexBoxWithProvider rootModule={node} {...props} />
 }
 
 const defaultProps = {

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

@@ -2,6 +2,7 @@ import { Button } from '@mui/material'
 import { FlexBoxProps } from '@xylabs/react-flexbox'
 import { ModuleInstance } from '@xyo-network/module'
 
+import { CytoscapeInstanceProvider } from '../../../contexts'
 import { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'
 import { WithExtensions } from '../../cytoscape-extensions'
 import { NodeRelationalGraphFlexBox } from '../../RelationalGraph'
@@ -34,3 +35,11 @@ export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModu
     </WithExtensions>
   )
 }
+
+export const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {
+  return (
+    <CytoscapeInstanceProvider>
+      <ModuleGraphFlexBox {...props} />
+    </CytoscapeInstanceProvider>
+  )
+}

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

@@ -1,5 +1,7 @@
+import { PopperProps } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
 import { NodeSingular } from 'cytoscape'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 import { ModuleHoverPopper } from './Popper'
 
@@ -11,12 +13,16 @@ export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {
   const { address, name } = node?.data() ?? {}
   const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())
   const ref = useRef<HTMLDivElement>(null)
-  const [currentEl, setCurrentEl] = useState<HTMLDivElement | null>(null)
+  const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)
 
-  useLayoutEffect(() => {
-    if (node && ref.current) {
+  // Ensure first render clears the previous element when node changes to avoid flicker
+  useEffect(() => {
+    setCurrentEl(null)
+  }, [node])
+
+  useEffect(() => {
+    if (node) {
       setBoundingBox(node.renderedBoundingBox())
-      setCurrentEl(ref.current)
     }
 
     const listener = () => {
@@ -30,25 +36,31 @@ export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {
     }
   }, [node])
 
+  // Once boundingBox state is set and applied to the layout, update the ref
+  useLayoutEffect(() => {
+    setCurrentEl(ref.current)
+  }, [boundingBox])
+
   return (
     <>
+      <FlexCol
+        ref={ref}
+        sx={{
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: 'pointer',
+          height: boundingBox?.h,
+          left: boundingBox?.x1,
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: boundingBox?.y1,
+          width: boundingBox?.w,
+        }}
+      />
       {node ? (
         <>
-          <div
-            ref={ref}
-            style={{
-              // backgroundColor: '#fff',
-              // opacity: 0.25,
-              cursor: 'pointer',
-              height: boundingBox?.h,
-              left: boundingBox?.x1,
-              pointerEvents: 'none',
-              position: 'absolute',
-              top: boundingBox?.y1,
-              width: boundingBox?.w,
-            }}
-          ></div>
-          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />
+          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open sx={{ zIndex: 2 }} />
         </>
       ) : null}
     </>

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

@@ -4,20 +4,24 @@ import { Identicon } from '@xylabs/react-identicon'
 
 export interface ModuleHoverPopperProps extends PopperProps {
   address?: string
-  element?: HTMLElement | null
+  element?: PopperProps['anchorEl']
   name?: string
 }
 
 export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {
   return (
-    <Popper anchorEl={element} {...props}>
-      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>
-        <FlexRow gap={2}>
-          <Identicon value={address} size={24} />
-          <Typography>{name}</Typography>
-        </FlexRow>
-        <Chip label={address} color={'primary'} />
-      </FlexCol>
-    </Popper>
+    <>
+      {element ? (
+        <Popper anchorEl={element} {...props}>
+          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>
+            <FlexRow gap={2}>
+              <Identicon value={address} size={24} />
+              <Typography>{name}</Typography>
+            </FlexRow>
+            <Chip label={address} color={'primary'} />
+          </FlexCol>
+        </Popper>
+      ) : null}
+    </>
   )
 }

package/src/hooks/cytoscape/useCytoscapeOptions.ts

@@ -11,12 +11,15 @@ export const useCytoscapeOptions = (
 ) => {
   const defaultStyle = useCytoscapeStyle()
 
+  const resolvedLayout = layout ?? ConcentricLayout
+  const resolvedStyle = style ?? defaultStyle
+
   const options = useMemo<CytoscapeOptions | undefined>(() => {
-    if (elements && layout && style) {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle,
+        layout: resolvedLayout,
+        style: resolvedStyle,
       }
     }
   }, [elements, layout, style])

package/src/hooks/cytoscape/useNewElements.tsx

@@ -1,22 +1,12 @@
 import { useModuleFromNode } from '@xyo-network/react-node'
 import { NodeSingular } from 'cytoscape'
-import { useEffect } from 'react'
 
-import { useCytoscapeInstance } from '../../contexts'
 import { useCytoscapeElements } from './useCytoscapeElements'
 
 export const useNewElements = (selectedElement?: NodeSingular) => {
-  const { cy } = useCytoscapeInstance(true)
   const { address: selectedAddress } = selectedElement?.data() ?? {}
   const [module] = useModuleFromNode(selectedAddress)
   const newElements = useCytoscapeElements(module)
 
-  useEffect(() => {
-    if (selectedAddress) {
-      const element = cy?.$(`node[id="${selectedAddress}"]`)
-      if (element?.length) cy?.center(element)
-    }
-  }, [cy, selectedAddress])
-
   return newElements
 }

package/src/hooks/cytoscape/useSelectedElement.tsx

@@ -2,22 +2,27 @@ import { EventObject, NodeSingular } from 'cytoscape'
 import { useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../contexts'
+import { useToggleSelectedElement } from './useToggleSelectedElement'
 
 export const useSelectedElement = () => {
   const { cy } = useCytoscapeInstance(true)
   const [selectedElement, setSelectedElement] = useState<NodeSingular>()
+  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)
 
   useEffect(() => {
     const listener = (event: EventObject) => {
-      const element = event.target[0]
-      if (element.isNode()) setSelectedElement(element)
+      const element: NodeSingular = event.target[0]
+      if (element.isNode()) {
+        toggleSelectedElement(element)
+      }
     }
+
     cy?.on('select', listener)
 
     return () => {
       cy?.off('select', listener)
     }
-  }, [cy, setSelectedElement])
+  }, [cy, toggleSelectedElement])
 
   return selectedElement
 }

package/src/hooks/cytoscape/useToggleSelectedElement.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@mui/material'
+import { NodeSingular } from 'cytoscape'
+import { Dispatch, SetStateAction } from 'react'
+
+import { useCytoscapeInstance } from '../../contexts'
+import { NodeBgStyles } from '../../Cytoscape'
+
+export const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {
+  const { cy } = useCytoscapeInstance(true)
+  const theme = useTheme()
+
+  const updateStyles = (element: NodeSingular, styles: [string, string]) => {
+    cy
+      ?.style()
+      .selector(`node[id="${element.data().id}"]`)
+      .style(...styles)
+  }
+
+  const toggleSelectedElement = (element: NodeSingular) => {
+    setSelectedElement((previousSelectedElement) => {
+      if (previousSelectedElement) {
+        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))
+      }
+      return element
+    })
+    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))
+  }
+
+  return toggleSelectedElement
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components'
+export * from './contexts'
 export * from './Cytoscape'
 export * from './hooks'