default category metadata

Author: alex-abanin

apps/chaingraph-frontend/src/components/flow/nodes/ChaingraphNode/ChaingraphNode.tsx

@@ -33,12 +33,34 @@ import {
 } from '@/store/ports'
 import { NodeResizeControl, ResizeControlVariant } from '@xyflow/react'
 import { useUnit } from 'effector-react'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { BreakpointButton } from '../debug/BreakpointButton'
 import NodeBody from './NodeBody'
 import NodeErrorPorts from './NodeErrorPorts'
 import { NodeHeader } from './NodeHeader'
 
+const defaultCategoryMetadata = {
+  id: 'other',
+  label: 'Other',
+  description: 'Other nodes',
+  icon: 'Package',
+  style: {
+    light: {
+      primary: '#F5F5F5', // Soft gray
+      secondary: '#FAFAFA',
+      background: '#FFFFFF',
+      text: '#616161', // Darker gray
+    },
+    dark: {
+      primary: '#2C2C2C',
+      secondary: '#1F1F1F',
+      background: '#1C1C1C',
+      text: '#BDBDBD',
+    },
+  },
+  order: 7,
+}
+
 function ChaingraphNodeComponent({
   data,
   selected,
@@ -61,9 +83,11 @@ function ChaingraphNodeComponent({
   const nodeEdges = useEdgesForNode(id)
   const highlightedNodeId = useUnit($highlightedNodeId)
 
-  const [style, setStyle] = useState(
-    theme === 'dark' ? data.categoryMetadata.style.dark : data.categoryMetadata.style.light,
-  )
+  const categoryMetadata = data.categoryMetadata ?? defaultCategoryMetadata
+
+  const style = useMemo(() => {
+    return theme === 'dark' ? categoryMetadata.style.dark : categoryMetadata.style.light
+  }, [categoryMetadata, theme])
 
   const isHighlighted = useMemo(
     () => highlightedNodeId && highlightedNodeId.includes(id),
@@ -104,12 +128,6 @@ function ChaingraphNodeComponent({
     }
   }, [isBreakpointSet, dispatch, id])
 
-  useEffect(() => {
-    setStyle(
-      theme === 'dark' ? data.categoryMetadata.style.dark : data.categoryMetadata.style.light,
-    )
-  }, [theme, data.categoryMetadata, id])
-
   // Use throttled/memoized version of execution state style to reduce renders
   const executionStateStyle = useMemo(() => {
     // Calculate the style based on node state
@@ -217,7 +235,7 @@ function ChaingraphNodeComponent({
       <NodeHeader
         node={nodeExecution?.node ?? node}
         context={portContextValue}
-        icon={data.categoryMetadata.icon}
+        icon={categoryMetadata.icon}
         style={style}
         onDelete={() => removeNodeFromFlow({
           flowId: activeFlow.id!,

apps/chaingraph-frontend/src/components/flow/nodes/ChaingraphNode/types.ts

@@ -11,5 +11,5 @@ import type { Node } from '@xyflow/react'
 
 export type ChaingraphNode = Node<{
   node: INode
-  categoryMetadata: CategoryMetadata
+  categoryMetadata?: CategoryMetadata
 }, 'chaingraphNode'>