Merge pull request #678 from XYOracleNetwork/feature/active-module-st…

…yles

active module details

packages/sdk/packages/node-renderer/package.json

@@ -13,6 +13,7 @@
     "@xylabs/react-async-effect": "^3.0.8",
     "@xylabs/react-flexbox": "^3.0.8",
     "@xylabs/react-identicon": "^3.0.8",
+    "@xylabs/react-promise": "^3.0.8",
     "@xylabs/react-shared": "^3.0.8",
     "@xyo-network/account-model": "^2.75.6",
     "@xyo-network/archivist-model": "^2.75.6",

packages/sdk/packages/node-renderer/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, { rootNodeId: newRootNode.data.id })
+        const newNode = CytoscapeElements.buildNode(module)
         newElements.push(newNode)
 
         const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
@@ -38,10 +38,11 @@ export class CytoscapeElements {
     }
   }
 
-  static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {
+  static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {
     const { address, config } = module
     const normalizedName = config.name ?? address.substring(0, 8)
     return {
+      classes,
       data: {
         address,
         id: address,
@@ -53,7 +54,7 @@ export class CytoscapeElements {
   }
 
   static buildRootNode = (module: ModuleInstance): ElementDefinition => {
-    return CytoscapeElements.buildNode(module, { root: true })
+    return CytoscapeElements.buildNode(module, {}, ['activeNode'])
   }
 
   static normalizeName(name?: string) {

packages/sdk/packages/node-renderer/src/Cytoscape/CytoscapeStyles.ts

@@ -2,7 +2,7 @@ import { Stylesheet } from 'cytoscape'
 
 import { CyNodeModuleTypes } from './lib'
 
-export const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({
+export const NodeWithName = (color?: string, outlineColor?: string): Stylesheet => ({
   selector: 'node[name]',
   style: {
     color,
@@ -16,7 +16,7 @@ export const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet
   },
 })
 
-export const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({
+export const Node = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({
   selector: 'node',
   style: {
     'background-color': bgColor,
@@ -28,6 +28,13 @@ export const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: s
   },
 })
 
+export const NodeAsRoot = (bgColor?: string) => ({
+  selector: '.activeNode',
+  style: {
+    'background-color': bgColor,
+  },
+})
+
 export const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({
   selector: 'edge',
   style: {
@@ -39,5 +46,3 @@ export const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({
     width: 3,
   },
 })
-
-export const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]

packages/sdk/packages/node-renderer/src/components/index.ts

@@ -1,4 +1,3 @@
 export * from './lib'
 export * from './module'
-export * from './ProvidedNodeRenderer'
-export * from './RelationalGraph'
+export * from './relational'

packages/sdk/packages/node-renderer/src/components/lib/RelationalGraphProps.ts

@@ -4,5 +4,7 @@ import { PropsWithChildren, ReactNode } from 'react'
 
 export interface NodeRelationalGraphProps extends PropsWithChildren<FlexBoxProps> {
   actions?: ReactNode
+  detail?: ReactNode
   options?: CytoscapeOptions
+  showDetails?: boolean
 }

packages/sdk/packages/node-renderer/src/components/module/graph/DetailsFlexbox.tsx

@@ -0,0 +1,20 @@
+import CancelRoundedIcon from '@mui/icons-material/CancelRounded'
+import { IconButton } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+
+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'}>
+          <CancelRoundedIcon />
+        </IconButton>
+      </FlexRow>
+      {children}
+    </FlexGrowCol>
+  )
+}

packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.stories.tsx

@@ -89,4 +89,8 @@ const WithProvidedNode = TemplateWithProvidedModule.bind({})
 WithProvidedNode.args = { ...defaultProps }
 WithProvidedNode.decorators = [MemoryNodeDecorator]
 
-export { Default, WithProvidedNode }
+const WithDisabledDetails = TemplateWithProvidedModule.bind({})
+WithDisabledDetails.args = { ...defaultProps, disableModuleDetails: true }
+WithDisabledDetails.decorators = [MemoryNodeDecorator]
+
+export { Default, WithDisabledDetails, WithProvidedNode }

packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.tsx

@@ -1,36 +1,59 @@
 import { Button } from '@mui/material'
 import { FlexBoxProps } from '@xylabs/react-flexbox'
 import { ModuleInstance } from '@xyo-network/module'
+import { useRef } from 'react'
 
 import { CytoscapeInstanceProvider } from '../../../contexts'
-import { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'
+import { useElements, useModuleDetails, useRelationalGraphOptions } from '../../../hooks'
 import { WithExtensions } from '../../cytoscape-extensions'
-import { NodeRelationalGraphFlexBox } from '../../RelationalGraph'
-import { ModuleGraphNodeHover } from './NodeHover'
+import { NodeRelationalGraphFlexBox } from '../../relational'
+import { DetailsFlexbox } from './DetailsFlexbox'
+import { ModuleGraphNodeHover } from './node'
+import { StyledModuleHoverPopper } from './Popper'
 
 export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
+  disableModuleDetails?: boolean
   rootModule?: ModuleInstance | null
 }
 
-export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {
+export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, disableModuleDetails, ...props }) => {
+  const cytoscapeRef = useRef<HTMLDivElement>(null)
   const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
-  const selectedElement = useSelectedElement()
-  const newElements = useNewElements(selectedElement)
-  const renderedElements = useRenderNewElements(newElements, hideLabels)
-  const hoveredNode = useHoveredNode(renderedElements)
+  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels)
+
+  const { module, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(undefined))
 
   return (
     <WithExtensions>
       <NodeRelationalGraphFlexBox
         actions={
-          <Button size={'small'} onClick={handleToggleLabels} variant="contained">
-            Toggle Labels
-          </Button>
+          module ? null : (
+            <Button size={'small'} onClick={handleToggleLabels} variant="contained">
+              Toggle Labels
+            </Button>
+          )
         }
+        showDetails={!!module}
+        detail={<DetailsFlexbox onClose={() => onModuleDetails(null)} />}
         options={options}
+        ref={cytoscapeRef}
+        width="100%"
         {...props}
       >
-        <ModuleGraphNodeHover node={hoveredNode} />
+        <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>
   )