@xyo-network/react-node-renderer 4.4.10 → 5.0.0-rc.1

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

@@ -16,7 +16,7 @@ import coseBilkentLayout from 'cytoscape-cose-bilkent'
 import dagre from 'cytoscape-dagre'
 import eulerLayout from 'cytoscape-euler'
 import React, {
-  forwardRef, useEffect, useRef, useState,
+  useEffect, useRef, useState,
 } from 'react'
 
 import type { NodeRelationalGraphProps } from '../../lib/index.ts'
@@ -72,120 +72,118 @@ const ModuleHoverDetails: React.FC<ModuleHoverDetailsProps> = ({
   )
 }
 
-export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(
-  ({
-    actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props
-  }, ref) => {
-    const theme = useTheme()
-    const [cy, setCy] = useState<Core>()
-    const cytoscapeRef = useRef<HTMLDivElement>()
-    const [hoverPosition, setHoverBoundingBox] = useState<{ x1: number; x2: number; y1: number; y2: number }>()
-    const [hoverAddress, setHoverAddress] = useState<Address>()
+export const NodeRelationalGraphFlexBox = ({
+  ref, actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props
+}: NodeRelationalGraphProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
+  const theme = useTheme()
+  const [cy, setCy] = useState<Core>()
+  const cytoscapeRef = useRef<HTMLDivElement>(null)
+  const [hoverPosition, setHoverBoundingBox] = useState<{ x1: number; x2: number; y1: number; y2: number }>()
+  const [hoverAddress, setHoverAddress] = useState<Address>()
 
-    const [moduleInstance] = useWeakModuleFromNode(hoverAddress, { node })
+  const [moduleInstance] = useWeakModuleFromNode(hoverAddress, { node })
 
-    useEffect(() => {
-      cy?.on('mouseover tap', ({ target }) => {
-        const cyNode = target as NodeSingular
-        const bb = cyNode?.renderedBoundingBox?.()
-        setHoverBoundingBox(bb)
-        const id = cyNode.id?.()
-        if (id) {
-          if (id.includes('/')) {
-            setHoverAddress(undefined)
-            onHover?.()
-          } else {
-            setHoverAddress(asAddress(id))
-            onHover?.(asAddress(id))
-          }
+  useEffect(() => {
+    cy?.on('mouseover tap', ({ target }) => {
+      const cyNode = target as NodeSingular
+      const bb = cyNode?.renderedBoundingBox?.()
+      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()
+    applyLayout(cy, layout ?? 'euler', layoutOptions)
+  }
+
+  useEffect(() => {
+    let newCy: Core | undefined
+    const container = cytoscapeRef.current
+    if (container) {
+      newCy = cytoscape({
+        container,
+        ...options,
       })
-    }, [onHover, cy])
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setCy(newCy)
+    } else {
+      newCy?.destroy()
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setCy(undefined)
+    }
+    return () => {
+      newCy?.destroy()
+      setCy(undefined)
+    }
+  }, [options, cytoscapeRef, layoutOptions])
 
-    const handleReset = () => {
-      cy?.reset()
+  useEffect(() => {
+    if (cy) {
+      loadLayout(layout)
       applyLayout(cy, layout ?? 'euler', layoutOptions)
     }
+  }, [cy, layoutOptions, layout])
 
-    useEffect(() => {
-      let newCy: Core | undefined
-      const container = cytoscapeRef.current
-      if (container) {
-        newCy = cytoscape({
-          container,
-          ...options,
-        })
-        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-        setCy(newCy)
-      } else {
-        newCy?.destroy()
-        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-        setCy(undefined)
-      }
-      return () => {
-        newCy?.destroy()
-        setCy(undefined)
-      }
-    }, [options, cytoscapeRef, layoutOptions])
-
-    useEffect(() => {
-      if (cy) {
-        loadLayout(layout)
-        applyLayout(cy, layout ?? 'euler', layoutOptions)
-      }
-    }, [cy, layoutOptions, layout])
-
-    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
-            : actions
-              ? (
-                  <ButtonGroup>
-                    {actions}
-                    <Button size="small" variant="contained" onClick={handleReset}>
-                      Reset View
-                    </Button>
-                  </ButtonGroup>
-                )
-              : (
+  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
+          : actions
+            ? (
+                <ButtonGroup>
+                  {actions}
                   <Button size="small" variant="contained" onClick={handleReset}>
-                    Reset
+                    Reset View
                   </Button>
-                )}
-        </FlexRow>
-        <FlexGrowRow width="100%" alignItems="start">
-          {showDetails
-            ? (
-                <FlexCol height="100%" width="85%">
-                  {detail}
-                </FlexCol>
+                </ButtonGroup>
               )
-            : null}
-          <FlexCol
-            justifyContent="start"
-            classes="cytoscape-wrap"
-            width={showDetails ? '15%' : '100%'}
-            height={showDetails ? '50%' : '100%'}
-            border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}
-          >
-            {/* Cytoscape Element */}
-            <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={cytoscapeRef} />
-            {children}
-          </FlexCol>
-        </FlexGrowRow>
-      </FlexCol>
-    )
-  },
-)
+            : (
+                <Button size="small" variant="contained" onClick={handleReset}>
+                  Reset
+                </Button>
+              )}
+      </FlexRow>
+      <FlexGrowRow width="100%" alignItems="start">
+        {showDetails
+          ? (
+              <FlexCol height="100%" width="85%">
+                {detail}
+              </FlexCol>
+            )
+          : null}
+        <FlexCol
+          justifyContent="start"
+          classes="cytoscape-wrap"
+          width={showDetails ? '15%' : '100%'}
+          height={showDetails ? '50%' : '100%'}
+          border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}
+        >
+          {/* Cytoscape Element */}
+          <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={cytoscapeRef} />
+          {children}
+        </FlexCol>
+      </FlexGrowRow>
+    </FlexCol>
+  )
+}
 
 NodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'
 

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -16,8 +16,8 @@ export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps>
   }), [cy, setCy])
 
   return (
-    <CytoscapeInstanceContext.Provider value={value}>
+    <CytoscapeInstanceContext value={value}>
       {children}
-    </CytoscapeInstanceContext.Provider>
+    </CytoscapeInstanceContext>
   )
 }

package/dist/browser/index.d.ts

@@ -1,148 +0,0 @@
-import { Address } from '@xylabs/hex';
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { NodeInstance } from '@xyo-network/node-model';
-import * as cytoscape from 'cytoscape';
-import { CytoscapeOptions, Core, ElementDefinition, LayoutOptions, StylesheetCSS } from 'cytoscape';
-import * as React from 'react';
-import React__default, { PropsWithChildren, ReactNode, Dispatch, SetStateAction, ReactElement } from 'react';
-import * as _xyo_network_module_model from '@xyo-network/module-model';
-import { ModuleInstance } from '@xyo-network/module-model';
-import * as _xyo_network_account_model from '@xyo-network/account-model';
-import { AccountInstance } from '@xyo-network/account-model';
-import * as _xyo_network_react_shared from '@xyo-network/react-shared';
-import { ContextExState } from '@xyo-network/react-shared';
-import { SvgIconComponent } from '@mui/icons-material';
-import * as _xylabs_object from '@xylabs/object';
-
-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;
-}
-
-interface ModuleCardParserProps {
-    mod?: ModuleInstance;
-}
-declare const ModuleCardParser: React__default.FC<ModuleCardParserProps>;
-
-interface ModuleGraphFlexBoxProps extends FlexBoxProps {
-    disableModuleDetails?: boolean;
-    hideActions?: boolean;
-    layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola';
-    layoutOptions?: object;
-    rootModule?: WeakRef<ModuleInstance> | null;
-}
-declare const ModuleGraphFlexBox: React__default.FC<ModuleGraphFlexBoxProps>;
-declare const ModuleGraphFlexBoxWithProvider: React__default.FC<ModuleGraphFlexBoxProps>;
-
-declare const NodeRelationalGraphFlexBox: React__default.ForwardRefExoticComponent<NodeRelationalGraphProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const NodeRelationalGraph: React__default.ForwardRefExoticComponent<NodeRelationalGraphProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
-    account?: AccountInstance;
-    layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola';
-    layoutOptions?: object;
-    node?: WeakRef<NodeInstance>;
-}
-declare const ProvidedNodeRenderer: React__default.FC<ProvidedNodeRendererProps>;
-
-interface CytoscapeInstanceState extends ContextExState {
-    cy?: WeakRef<Core>;
-    setCy?: Dispatch<SetStateAction<WeakRef<Core> | undefined>>;
-}
-
-declare const CytoscapeInstanceContext: React.Context<CytoscapeInstanceState & _xyo_network_react_shared.ContextExState>;
-
-interface CytoscapeInstanceProviderProps extends PropsWithChildren {
-    defaultInstance?: WeakRef<Core>;
-}
-declare const CytoscapeInstanceProvider: React__default.FC<CytoscapeInstanceProviderProps>;
-
-declare const useCytoscapeInstance: (required?: boolean) => Omit<CytoscapeInstanceState & _xyo_network_react_shared.ContextExState, "provided">;
-
-interface ModuleInfo {
-    children: ModuleInfo[];
-    depth: number;
-    mod: ModuleInstance;
-}
-declare const CytoscapeElements: {
-    MaxNameLength: number;
-    buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition, properties?: {
-        [key: string]: unknown;
-    }): {
-        data: {
-            id: string;
-            source: string | undefined;
-            target: string | undefined;
-        };
-    };
-    buildElements(mod: ModuleInstance): Promise<ElementDefinition[]>;
-    buildElementsFromInfo(info: ModuleInfo, root?: ElementDefinition, classes?: string[]): Promise<ElementDefinition[]>;
-    buildNode(mod: ModuleInstance, properties?: {
-        [key: string]: unknown;
-    }, classes?: string[]): ElementDefinition;
-    buildRootNode: (mod: ModuleInstance) => ElementDefinition;
-    normalizeName(name?: string): string | undefined;
-    recurseNodes(root: ModuleInstance, maxDepth?: number, depth?: number): Promise<ModuleInfo>;
-};
-
-type CyNodeModuleTypes = 'archivist' | 'bridge' | 'diviner' | 'module' | 'node' | 'witness' | 'sentinel';
-
-declare const encodeSvg: (reactElement: ReactElement, color?: string) => string;
-
-declare const generateIconMap: () => Record<CyNodeModuleTypes, string>;
-
-declare const ColaLayout: {
-    centerGraph: boolean;
-    convergenceThreshold: number;
-    name: string;
-};
-
-declare const ConcentricLayout: LayoutOptions;
-
-declare const parseModuleType: (mod?: ModuleInstance) => CyNodeModuleTypes;
-
-declare const CyIconSet: Record<CyNodeModuleTypes, SvgIconComponent>;
-
-declare const NodeWithName: (color?: string, outlineColor?: string) => StylesheetCSS;
-declare const Node: (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels?: boolean) => StylesheetCSS;
-declare const NodeAsRoot: (bgColor?: string) => StylesheetCSS;
-declare const EdgeStyled: (lineColor?: string, targetArrowColor?: string) => StylesheetCSS;
-
-declare const useCytoscapeElements: (mod?: WeakRef<ModuleInstance> | null) => ElementDefinition[];
-
-declare const useElements: (hideLabels: boolean) => {
-    hoveredNode: cytoscape.NodeSingular | undefined;
-    setHoveredNode: React.Dispatch<React.SetStateAction<cytoscape.NodeSingular | undefined>>;
-    toggleSelectedElement: (address?: string) => void;
-};
-
-declare const useCytoscapeOptions: (elements: CytoscapeOptions["elements"], style?: CytoscapeOptions["style"], layout?: CytoscapeOptions["layout"]) => CytoscapeOptions | undefined;
-
-declare const useModuleDetails: (rootModule?: WeakRef<ModuleInstance> | null, onFoundModule?: () => void) => {
-    mod: ModuleInstance<_xylabs_object.BaseParamsFields & {
-        account?: _xyo_network_account_model.AccountInstance | "random";
-        addToResolvers?: boolean;
-        additionalSigners?: _xyo_network_account_model.AccountInstance[];
-        allowNameResolution?: boolean;
-        config: _xyo_network_module_model.AnyConfigSchema<_xyo_network_module_model.ModuleConfig<void, void>>;
-        ephemeralQueryAccountEnabled?: boolean;
-        moduleIdentifierTransformers?: _xyo_network_module_model.ModuleIdentifierTransformer[];
-        privateChildren?: ModuleInstance[];
-        publicChildren?: ModuleInstance[];
-    }, _xyo_network_module_model.ModuleEventData<object>> | null | undefined;
-    onModuleDetails: (address?: string | null) => void;
-};
-
-declare const useRelationalGraphOptions: (mod?: WeakRef<ModuleInstance>) => {
-    handleToggleLabels: () => void;
-    hideLabels: boolean;
-    options: cytoscape.CytoscapeOptions | undefined;
-};
-
-export { ColaLayout, ConcentricLayout, CyIconSet, type CyNodeModuleTypes, CytoscapeElements, CytoscapeInstanceContext, CytoscapeInstanceProvider, type CytoscapeInstanceProviderProps, type CytoscapeInstanceState, EdgeStyled, ModuleCardParser, type ModuleCardParserProps, ModuleGraphFlexBox, type ModuleGraphFlexBoxProps, ModuleGraphFlexBoxWithProvider, Node, NodeAsRoot, NodeRelationalGraph, NodeRelationalGraphFlexBox, type NodeRelationalGraphProps, NodeWithName, ProvidedNodeRenderer, type ProvidedNodeRendererProps, encodeSvg, generateIconMap, parseModuleType, useCytoscapeElements, useCytoscapeInstance, useCytoscapeOptions, useElements, useModuleDetails, useRelationalGraphOptions };