@xyo-network/react-node-renderer 3.0.2 → 3.0.4

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

@@ -1,5 +1,7 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
@@ -25,7 +27,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -35,7 +39,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -106,4 +112,6 @@ const WithDisabledDetails = TemplateWithProvidedModule.bind({})
 WithDisabledDetails.args = { ...defaultProps, disableModuleDetails: true }
 WithDisabledDetails.decorators = [MemoryNodeDecorator]
 
-export { Default, WithDisabledDetails, WithProvidedNode }
+export {
+  Default, WithDisabledDetails, WithProvidedNode,
+}

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

@@ -4,7 +4,9 @@ import type { ModuleInstance } from '@xyo-network/module-model'
 import React, { useRef } from 'react'
 
 import { CytoscapeInstanceProvider } from '../../../contexts/index.ts'
-import { useElements, useModuleDetails, useRelationalGraphOptions } from '../../../hooks/index.ts'
+import {
+  useElements, useModuleDetails, useRelationalGraphOptions,
+} from '../../../hooks/index.ts'
 import { WithExtensions } from '../../cytoscape-extensions/index.ts'
 import { NodeRelationalGraphFlexBox } from '../../relational/index.ts'
 import { DetailsFlexbox } from './DetailsFlexbox.tsx'
@@ -19,10 +21,16 @@ export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
   rootModule?: WeakRef<ModuleInstance> | null
 }
 
-export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ hideActions, rootModule, disableModuleDetails, ...props }) => {
+export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({
+  hideActions, rootModule, disableModuleDetails, ...props
+}) => {
   const cytoscapeRef = useRef<HTMLDivElement>(null)
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
-  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels)
+  const {
+    handleToggleLabels, hideLabels, options,
+  } = useRelationalGraphOptions(rootModule ?? undefined)
+  const {
+    hoveredNode, setHoveredNode, toggleSelectedElement,
+  } = useElements(hideLabels)
 
   const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))
 

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

@@ -1,6 +1,8 @@
 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 {
+  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'
@@ -12,7 +14,9 @@ export interface ModuleHoverPopperProps extends PopperProps {
   onModuleExplore?: (address?: string) => void
 }
 
-export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
+export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({
+  anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props
+}) => {
   const { address, name } = node?.data() ?? {}
   return (
     <>
@@ -31,7 +35,10 @@ export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl,
                       : null
                   }
                   avatar={(
-                    <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>
+                    <Paper
+                      elevation={6}
+                      sx={{ bgcolor: '#fff', p: 1 }}
+                    >
                       <Identicon value={address} size={24} />
                     </Paper>
                   )}
@@ -62,9 +69,7 @@ export const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ anchorEl,
   )
 }
 
-export const StyledModuleHoverPopper = styled(ModuleHoverPopper, { name: 'StyledComponents' })(() => ({
-  zIndex: 2,
-}))
+export const StyledModuleHoverPopper = styled(ModuleHoverPopper, { name: 'StyledComponents' })(() => ({ zIndex: 2 }))
 
 export const StyledCardActions = styled(CardActions, { name: 'StyledCardActions' })(() => ({
   display: 'flex',

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

@@ -13,7 +13,9 @@ export interface ModuleHoverProps {
 }
 
 export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ children, node }) => {
-  const { boundingBox, ref, currentElement } = useNodeElement(node)
+  const {
+    boundingBox, ref, currentElement,
+  } = useNodeElement(node)
 
   return (
     <>

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

@@ -1,6 +1,8 @@
 import type { PopperProps } from '@mui/material'
 import type { NodeSingular } from 'cytoscape'
-import { useEffect, useRef, useState } from 'react'
+import {
+  useEffect, useRef, useState,
+} from 'react'
 
 export const useNodeElement = (node?: NodeSingular) => {
   const ref = useRef<HTMLDivElement>(null)
@@ -33,5 +35,7 @@ export const useNodeElement = (node?: NodeSingular) => {
     setCurrentElement(ref.current)
   }, [boundingBox])
 
-  return { boundingBox, currentElement, ref }
+  return {
+    boundingBox, currentElement, ref,
+  }
 }

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

@@ -1,12 +1,16 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
+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 { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -29,7 +33,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -39,7 +45,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -118,7 +126,11 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
 
   useAsyncEffect(
     async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
+      const witnessModule = await IdWitness.create({
+        config: {
+          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
+        },
+      })
       setIdWitness(witnessModule)
     },
     [],
@@ -183,4 +195,6 @@ const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
 WithProvidedNodeRenderer.args = { ...defaultProps }
 WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }
+export {
+  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
+}

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

@@ -1,8 +1,12 @@
 import type { CardProps } from '@mui/material'
-import { Box, Button, ButtonGroup, Card, CardHeader, Paper, useTheme } from '@mui/material'
+import {
+  Box, Button, ButtonGroup, Card, CardHeader, Paper, useTheme,
+} from '@mui/material'
 import type { Address } from '@xylabs/hex'
 import { asAddress } from '@xylabs/hex'
-import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import {
+  FlexCol, FlexGrowRow, FlexRow,
+} from '@xylabs/react-flexbox'
 import { Identicon } from '@xylabs/react-identicon'
 import { useWeakModuleFromNode } from '@xyo-network/react-node'
 import type { Core, NodeSingular } from 'cytoscape'
@@ -11,7 +15,9 @@ import cola from 'cytoscape-cola'
 import coseBilkentLayout from 'cytoscape-cose-bilkent'
 import dagre from 'cytoscape-dagre'
 import eulerLayout from 'cytoscape-euler'
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, {
+  forwardRef, useEffect, useRef, useState,
+} from 'react'
 
 import type { NodeRelationalGraphProps } from '../../lib/index.ts'
 
@@ -45,12 +51,17 @@ type ModuleHoverDetailsProps = CardProps & {
   name: string
 }
 
-const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({ name, address, ...props }) => {
+const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({
+  name, address, ...props
+}) => {
   return (
     <Card elevation={3} {...props}>
       <CardHeader
         avatar={(
-          <Paper elevation={6} sx={{ bgcolor: '#fff', p: 1 }}>
+          <Paper
+            elevation={6}
+            sx={{ bgcolor: '#fff', p: 1 }}
+          >
             <Identicon value={address} size={24} />
           </Paper>
         )}
@@ -62,7 +73,9 @@ const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({ name, address,
 }
 
 export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(
-  ({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
+  ({
+    actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props
+  }, ref) => {
     const theme = useTheme()
     const [cy, setCy] = useState<Core>()
     const cytoscapeRef = useRef<HTMLDivElement>()

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

@@ -1,12 +1,16 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
+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 { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -30,7 +34,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -40,7 +46,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -105,7 +113,11 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   useAsyncEffect(
 
     async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
+      const witnessModule = await IdWitness.create({
+        config: {
+          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
+        },
+      })
       setIdWitness(witnessModule)
     },
     [],
@@ -168,4 +180,6 @@ const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
 WithProvidedNodeRenderer.args = { ...defaultProps }
 WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }
+export {
+  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
+}

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

@@ -1,12 +1,16 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
+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 { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -30,7 +34,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -40,7 +46,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -104,7 +112,11 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
 
   useAsyncEffect(
     async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
+      const witnessModule = await IdWitness.create({
+        config: {
+          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
+        },
+      })
       setIdWitness(witnessModule)
     },
     [],
@@ -167,4 +179,6 @@ const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
 WithProvidedNodeRenderer.args = { ...defaultProps }
 WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }
+export {
+  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
+}

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

@@ -1,12 +1,16 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
+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 { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -30,7 +34,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -40,7 +46,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -105,7 +113,11 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
   useAsyncEffect(
 
     async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
+      const witnessModule = await IdWitness.create({
+        config: {
+          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
+        },
+      })
       setIdWitness(witnessModule)
     },
     [],
@@ -168,4 +180,6 @@ const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
 WithProvidedNodeRenderer.args = { ...defaultProps }
 WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }
+export {
+  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
+}

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

@@ -1,12 +1,16 @@
 import { Button, ButtonGroup } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge-http'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
+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 { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -31,7 +35,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         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', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+          config: {
+            name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true },
+          },
         })
         await node.register(bridge)
         await node.attach(bridge.address, true)
@@ -41,7 +47,9 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.attach(archivist.address, true)
 
         const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
+          config: {
+            name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [],
+          },
         })
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
@@ -105,7 +113,11 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
 
   useAsyncEffect(
     async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
+      const witnessModule = await IdWitness.create({
+        config: {
+          name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema,
+        },
+      })
       setIdWitness(witnessModule)
     },
     [],
@@ -168,4 +180,6 @@ const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
 WithProvidedNodeRenderer.args = { ...defaultProps }
 WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }
+export {
+  Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer,
+}

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

@@ -1,4 +1,6 @@
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { MemoryNode } from '@xyo-network/node-memory'

package/src/components/relational/graph/story/TestData.tsx

@@ -15,20 +15,22 @@ const elements: CytoscapeOptions['elements'] = [
   },
   {
     // edge ab
-    data: { id: 'ab', source: 'a', target: 'b' },
+    data: {
+      id: 'ab', source: 'a', target: 'b',
+    },
   },
   {
     // edge ac
-    data: { id: 'ac', source: 'a', target: 'c' },
+    data: {
+      id: 'ac', source: 'a', target: 'c',
+    },
   },
 ]
 
 const style: CytoscapeOptions['style'] = [
   {
     selector: 'node',
-    style: {
-      label: 'data(id)',
-    },
+    style: { label: 'data(id)' },
   },
 
   {

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -1,6 +1,6 @@
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Core } from 'cytoscape'
-import React, { useEffect, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { CytoscapeInstanceContext } from './Context.ts'
 
@@ -9,11 +9,15 @@ export interface CytoscapeInstanceProviderProps extends WithChildren {
 }
 
 export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {
-  const [cy, setCy] = useState<WeakRef<Core> | undefined>(defaultInstance)
-  useEffect(() => {
-    setCy(defaultInstance)
-  }, [defaultInstance])
+  const [cy, setCy] = useState<WeakRef<Core> | undefined>(() => defaultInstance)
 
-  // eslint-disable-next-line @eslint-react/no-unstable-context-value
-  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>
+  const value = useMemo(() => ({
+    cy, provided: true, setCy,
+  }), [cy, setCy])
+
+  return (
+    <CytoscapeInstanceContext.Provider value={value}>
+      {children}
+    </CytoscapeInstanceContext.Provider>
+  )
 }

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

@@ -9,5 +9,7 @@ export const useElements = (hideLabels: boolean) => {
   const renderedElements = useRenderNewElements(newElements, hideLabels)
   const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)
 
-  return { hoveredNode, setHoveredNode, toggleSelectedElement }
+  return {
+    hoveredNode, setHoveredNode, toggleSelectedElement,
+  }
 }

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

@@ -1,6 +1,8 @@
 import type { NodeCollection, NodeSingular } from 'cytoscape'
 import type { Dispatch, SetStateAction } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import {
+  useCallback, useEffect, useState,
+} from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts/index.ts'
 

package/src/hooks/cytoscape/useCytoscapeStyle.tsx

@@ -2,7 +2,9 @@ import { useTheme } from '@mui/material'
 import type { CytoscapeOptions } from 'cytoscape'
 import { useMemo } from 'react'
 
-import { EdgeStyled, Node, NodeAsRoot, NodeWithName } from '../../Cytoscape/index.ts'
+import {
+  EdgeStyled, Node, NodeAsRoot, NodeWithName,
+} from '../../Cytoscape/index.ts'
 import { useIcons } from './useIcons.tsx'
 
 export const useCytoscapeStyle = (hideLabels = false) => {

package/src/hooks/cytoscape/useIcons.tsx

@@ -2,7 +2,9 @@ import { useTheme } from '@mui/material'
 import React, { useMemo } from 'react'
 
 import type { CyNodeModuleTypes } from '../../Cytoscape/index.ts'
-import { CyIconSet, encodeSvg, generateIconMap } from '../../Cytoscape/index.ts'
+import {
+  CyIconSet, encodeSvg, generateIconMap,
+} from '../../Cytoscape/index.ts'
 
 export const useIcons = () => {
   const theme = useTheme()

package/src/hooks/cytoscape/useRelationalGraphOptions.tsx

@@ -17,5 +17,7 @@ export const useRelationalGraphOptions = (mod?: WeakRef<ModuleInstance>) => {
   const style = useCytoscapeStyle(hideLabels)
   const options = useCytoscapeOptions(elements, style, ConcentricLayout)
 
-  return { handleToggleLabels, hideLabels, options }
+  return {
+    handleToggleLabels, hideLabels, options,
+  }
 }

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },