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

package/src/Cytoscape/CytoscapeElements.ts

@@ -1,96 +0,0 @@
-import { exists, isFalsy } from '@xylabs/sdk-js'
-import type { ModuleInstance } from '@xyo-network/module-model'
-import type { ElementDefinition } from 'cytoscape'
-
-import { parseModuleType } from './lib/index.ts'
-
-interface ModuleInfo {
-  children: ModuleInfo[]
-  depth: number
-  mod: ModuleInstance
-}
-
-export const CytoscapeElements = {
-  MaxNameLength: 20,
-
-  buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition, properties?: { [key: string]: unknown }) {
-    return {
-      data: {
-        id: `${rootNode.data.id}/${newNode.data.id}`,
-        source: rootNode.data.id,
-        target: newNode.data.id,
-        ...properties,
-      },
-    }
-  },
-
-  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.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) {
-      newElements.push(newEdge)
-    }
-
-    for (const childInfo of info.children) {
-      newElements.push(...(await this.buildElementsFromInfo(childInfo, newNode)))
-    }
-
-    return newElements
-  },
-
-  buildNode(mod: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {
-    const { address, id } = mod
-    return {
-      classes,
-      data: {
-        address,
-        id: address,
-        name: id,
-        type: parseModuleType(mod),
-        ...properties,
-      },
-    }
-  },
-
-  buildRootNode: (mod: ModuleInstance): ElementDefinition => {
-    return CytoscapeElements.buildNode(mod, {}, ['activeNode'])
-  },
-
-  normalizeName(name?: string) {
-    if (isFalsy(name)) return
-    if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`
-    return name
-  },
-
-  async recurseNodes(root: ModuleInstance, maxDepth = 10, depth = 1): Promise<ModuleInfo> {
-    const info: ModuleInfo = {
-      children: [], depth, mod: root,
-    }
-
-    if (maxDepth > 0) {
-      const children = await root.resolve('*', { direction: 'down', maxDepth: 1 })
-      info.children = (
-        await Promise.all(
-          children.map(async (child) => {
-            // don't re add the root module that was passed in
-            if (child.address !== root.address) {
-              return await this.recurseNodes(child, maxDepth - 1, depth + 1)
-            }
-          }),
-        )
-      ).filter(exists)
-    }
-
-    return info
-  },
-}

package/src/Cytoscape/CytoscapeIcons.tsx

@@ -1,23 +0,0 @@
-import type { SvgIconComponent } from '@mui/icons-material'
-import {
-  BubbleChartRounded as BubbleChartRoundedIcon,
-  Hub as HubIcon,
-  InsertLinkRounded as InsertLinkRoundedIcon,
-  Inventory2Rounded as Inventory2RoundedIcon,
-  QuestionMarkRounded as QuestionMarkRoundedIcon,
-  TimerRounded as TimerRoundedIcon,
-  VisibilityRounded as VisibilityRoundedIcon,
-} from '@mui/icons-material'
-
-import type { CyNodeModuleTypes } from './lib/index.ts'
-
-export const CyIconSet: Record<CyNodeModuleTypes, SvgIconComponent> = {
-  archivist: Inventory2RoundedIcon,
-  bridge: InsertLinkRoundedIcon,
-  diviner: BubbleChartRoundedIcon,
-
-  module: QuestionMarkRoundedIcon,
-  node: HubIcon,
-  sentinel: TimerRoundedIcon,
-  witness: VisibilityRoundedIcon,
-}

package/src/Cytoscape/CytoscapeStyles.ts

@@ -1,46 +0,0 @@
-import type { StylesheetCSS } from 'cytoscape'
-
-import type { CyNodeModuleTypes } from './lib/index.ts'
-
-export const NodeWithName = (color?: string, outlineColor?: string): StylesheetCSS => ({
-  selector: 'node[name]',
-  css: {
-    color,
-    'font-family': 'Lexend Deca, Helvetica, sans-serif',
-    'font-size': 12,
-    'overlay-padding': '6px',
-    'text-halign': 'center',
-    'text-outline-color': outlineColor,
-    'text-outline-width': '1px',
-    'text-valign': 'top',
-  },
-})
-
-export const Node = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): StylesheetCSS => ({
-  selector: 'node',
-  css: {
-    'background-color': bgColor,
-    'background-height': '75%',
-    'background-image': elem => icons[elem.data('type') as CyNodeModuleTypes],
-    'background-width': '24',
-    'label': hideLabels ? undefined : 'data(name)',
-    'shape': 'round-rectangle',
-  },
-})
-
-export const NodeAsRoot = (bgColor?: string): StylesheetCSS => ({
-  selector: '.activeNode',
-  css: { 'background-color': bgColor },
-})
-
-export const EdgeStyled = (lineColor?: string, targetArrowColor?: string): StylesheetCSS => ({
-  selector: 'edge',
-  css: {
-    'curve-style': 'bezier',
-    'line-color': lineColor,
-    'line-opacity': 0.1,
-    'target-arrow-color': targetArrowColor,
-    'target-arrow-shape': 'triangle',
-    'width': 3,
-  },
-})

package/src/Cytoscape/index.ts

@@ -1,4 +0,0 @@
-export * from './CytoscapeElements.ts'
-export * from './CytoscapeIcons.tsx'
-export * from './CytoscapeStyles.ts'
-export * from './lib/index.ts'

package/src/Cytoscape/lib/CyNodeModuleTypes.ts

@@ -1 +0,0 @@
-export type CyNodeModuleTypes = 'archivist' | 'bridge' | 'diviner' | 'module' | 'node' | 'witness' | 'sentinel'

package/src/Cytoscape/lib/encodeSvg.ts

@@ -1,19 +0,0 @@
-import { isDefined } from '@xylabs/sdk-js'
-import type { ReactElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-
-const dataUri = 'data:image/svg+xml,'
-
-export const encodeSvg = (reactElement: ReactElement, color?: string) => {
-  const svgString = renderToStaticMarkup(reactElement)
-
-  const doc = new DOMParser().parseFromString(svgString, 'text/html')
-  const svgElement = doc.querySelectorAll('svg')[0]
-  if (isDefined(svgElement)) {
-    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-    svgElement.setAttribute('height', '100')
-    svgElement.style.fill = color ?? 'black'
-  }
-
-  return `${dataUri}${globalThis.encodeURIComponent(svgElement.outerHTML)}`
-}

package/src/Cytoscape/lib/iconMap.ts

@@ -1,12 +0,0 @@
-import type { CyNodeModuleTypes } from './CyNodeModuleTypes.ts'
-
-export const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({
-  archivist: '',
-  bridge: '',
-  diviner: '',
-
-  module: '',
-  node: '',
-  sentinel: '',
-  witness: '',
-})

package/src/Cytoscape/lib/index.ts

@@ -1,5 +0,0 @@
-export * from './CyNodeModuleTypes.ts'
-export * from './encodeSvg.ts'
-export * from './iconMap.ts'
-export * from './layout/index.ts'
-export * from './parseModuleType.ts'

package/src/Cytoscape/lib/layout/ColaLayout.ts

@@ -1,5 +0,0 @@
-export const ColaLayout = {
-  centerGraph: false,
-  convergenceThreshold: 0.01,
-  name: 'cola',
-}

package/src/Cytoscape/lib/layout/ConcentricLayout.ts

@@ -1,12 +0,0 @@
-import type { LayoutOptions } from 'cytoscape'
-
-export const ConcentricLayout: LayoutOptions = {
-  concentric: function (node) {
-    return node.degree(false)
-  },
-  levelWidth: function () {
-    return 2
-  },
-  minNodeSpacing: 75,
-  name: 'concentric',
-}

package/src/Cytoscape/lib/layout/index.ts

@@ -1,2 +0,0 @@
-export * from './ColaLayout.ts'
-export * from './ConcentricLayout.ts'

package/src/Cytoscape/lib/parseModuleType.ts

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

package/src/components/cytoscape-extensions/WithExtensions.tsx

@@ -1,16 +0,0 @@
-import cytoscape from 'cytoscape'
-import cola from 'cytoscape-cola'
-import coseBilkent from 'cytoscape-cose-bilkent'
-import type { PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
-
-export const WithExtensions: React.FC<PropsWithChildren> = ({ children }) => {
-  // eslint-disable-next-line react-x/no-unnecessary-use-memo
-  const initialized = useMemo(() => {
-    cytoscape.use(cola)
-    cytoscape.use(coseBilkent)
-    return true
-  }, [])
-
-  return <>{initialized ? children : undefined}</>
-}

package/src/components/cytoscape-extensions/index.ts

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

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export * from './lib/index.ts'
-export * from './module/index.ts'
-export * from './relational/index.ts'

package/src/components/lib/RelationalGraphProps.ts

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

package/src/components/lib/index.ts

@@ -1 +0,0 @@
-export * from './RelationalGraphProps.ts'

package/src/components/module/CardParser.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist-memory'
-import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
-import React from 'react'
-
-import { ModuleCardParser } from './CardParser.tsx'
-
-const meta: Meta<typeof ModuleCardParser> = {
-  component: ModuleCardParser,
-  render: (props, { loaded }) => <ModuleCardParser {...props} {...loaded} />,
-  title: 'node/renderer/ModuleCardParser',
-}
-
-export default meta
-type Story = StoryObj<typeof ModuleCardParser>
-
-export const WithArchivist: Story = {
-  loaders: [
-    async () => {
-      const ParentArchivist = await MemoryArchivist.create({ config: { name: 'ParentArchivist', schema: MemoryArchivistConfigSchema } })
-      return {
-        mod: await MemoryArchivist.create({
-          config: {
-            name: 'MemoryArchivist', parents: { write: [ParentArchivist.address] }, schema: MemoryArchivistConfigSchema,
-          },
-        }),
-      }
-    },
-  ],
-}
-
-export const WithWitness: Story = {
-  loaders: [
-    async () => ({ mod: await IdWitness.create({ config: { name: 'IdWitness', schema: IdWitnessConfigSchema } }) }),
-  ],
-}

package/src/components/module/CardParser.tsx

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

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

@@ -1,22 +0,0 @@
-import { CancelRounded } from '@mui/icons-material'
-import { IconButton } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export interface DetailsFlexboxProps extends FlexBoxProps {
-  onClose?: () => void
-}
-
-export const DetailsFlexbox: React.FC<DetailsFlexboxProps> = ({ children, onClose }) => {
-  return (
-    <FlexGrowCol alignItems="end" justifyContent="start" id="module-detail" width="100%" p={2} gap={2}>
-      <FlexRow justifyContent="end">
-        <IconButton onClick={onClose} size="small">
-          <CancelRounded />
-        </IconButton>
-      </FlexRow>
-      {children}
-    </FlexGrowCol>
-  )
-}

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

@@ -1,118 +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 { MemoryNode } from '@xyo-network/node-memory'
-import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, 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 { ModuleGraphFlexBoxWithProvider } from './GraphFlexBox.tsx'
-
-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}>
-        <Story {...args} />
-      </NodeProvider>
-    </WalletProvider>
-  )
-}
-
-export default {
-  component: ModuleGraphFlexBoxWithProvider,
-  title: 'node/renderer/ModuleGraphFlexBoxWithProvider',
-} as Meta
-
-const Template: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = props => <ModuleGraphFlexBoxWithProvider {...props} />
-
-const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => {
-  const [node] = useWeakProvidedNode()
-  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
-  return (
-    <div>
-      <ButtonGroup>
-        <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>
-      <ModuleGraphFlexBoxWithProvider rootModule={node} {...props} layout={layout} />
-    </div>
-  )
-}
-
-const defaultProps = {
-  height: 'calc(100vh - 20px)',
-  width: '100%',
-}
-
-const Default = Template.bind({})
-Default.args = {}
-Default.decorators = [MemoryNodeDecorator]
-
-const WithProvidedNode = TemplateWithProvidedModule.bind({})
-WithProvidedNode.args = { ...defaultProps }
-WithProvidedNode.decorators = [MemoryNodeDecorator]
-
-const WithDisabledDetails = TemplateWithProvidedModule.bind({})
-WithDisabledDetails.args = { ...defaultProps, disableModuleDetails: true }
-WithDisabledDetails.decorators = [MemoryNodeDecorator]
-
-export {
-  Default, WithDisabledDetails, WithProvidedNode,
-}

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

@@ -1,84 +0,0 @@
-import { Button } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-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 { WithExtensions } from '../../cytoscape-extensions/index.ts'
-import { NodeRelationalGraphFlexBox } from '../../relational/index.ts'
-import { DetailsFlexbox } from './DetailsFlexbox.tsx'
-import { ModuleGraphNodeHover } from './node/index.ts'
-import { StyledModuleHoverPopper } from './Popper.tsx'
-
-export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
-  disableModuleDetails?: boolean
-  hideActions?: boolean
-  layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola'
-  layoutOptions?: object
-  rootModule?: WeakRef<ModuleInstance> | null
-}
-
-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 { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))
-
-  return (
-    <WithExtensions>
-      <NodeRelationalGraphFlexBox
-        actions={
-          mod
-            ? null
-            : hideActions
-              ? null
-              : (
-                  <Button size="small" onClick={handleToggleLabels} variant="contained">
-                    Toggle Labels
-                  </Button>
-                )
-
-        }
-        showDetails={!!mod}
-        detail={<DetailsFlexbox onClose={() => onModuleDetails(null)} />}
-        options={options}
-        ref={cytoscapeRef}
-        width="100%"
-        {...props}
-      >
-        <ModuleGraphNodeHover node={hoveredNode}>
-          {element => (
-            <StyledModuleHoverPopper
-              anchorEl={element}
-              container={cytoscapeRef.current}
-              node={hoveredNode}
-              onClose={() => setHoveredNode(undefined)}
-              onModuleExplore={toggleSelectedElement}
-              onModuleDetails={disableModuleDetails ? undefined : onModuleDetails}
-              placement="top"
-              open
-            />
-          )}
-        </ModuleGraphNodeHover>
-      </NodeRelationalGraphFlexBox>
-    </WithExtensions>
-  )
-}
-
-export const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {
-  return (
-    <CytoscapeInstanceProvider>
-      <ModuleGraphFlexBox {...props} />
-    </CytoscapeInstanceProvider>
-  )
-}