Merge branch 'feature/node-renderer-cleanup' into main

XYOracleNetwork · Sep 29, 2023 · 7a66081 · 7a66081
2 parents b729296 + 62a3bee
commit 7a66081
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 49 deletions.
diff --git a/packages/sdk/packages/node-renderer/src/components/RelationalGraph.stories.tsx b/packages/sdk/packages/node-renderer/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>
   )

diff --git a/packages/sdk/packages/node-renderer/src/components/RelationalGraph.tsx b/packages/sdk/packages/node-renderer/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
+              </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>

diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.stories.tsx b/packages/sdk/packages/node-renderer/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,25 +57,23 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   return (
     <WalletProvider rootWallet={wallet}>
       <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
+        <Story {...args} />
       </NodeProvider>
     </WalletProvider>
   )
 }
 
 // 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 = {

diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.tsx b/packages/sdk/packages/node-renderer/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>
+  )
+}
diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/NodeHover.tsx b/packages/sdk/packages/node-renderer/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,24 +36,30 @@ 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 />
         </>
       ) : null}

diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/Popper.tsx b/packages/sdk/packages/node-renderer/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}
+    </>
   )
 }
diff --git a/packages/sdk/packages/node-renderer/src/hooks/cytoscape/useCytoscapeOptions.ts b/packages/sdk/packages/node-renderer/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])

diff --git a/packages/sdk/packages/node-renderer/src/index.ts b/packages/sdk/packages/node-renderer/src/index.ts
@@ -1,3 +1,4 @@
 export * from './components'
+export * from './contexts'
 export * from './Cytoscape'
 export * from './hooks'