Merge pull request #140 from badaitech/fix/default-categoryMetadata

default category metadata

Author: yakud

apps/chaingraph-backend/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @badaitech/chaingraph-backend
 
+## 0.1.22
+
+### Patch Changes
+
+- default category metadata
+- Updated dependencies
+  - @badaitech/chaingraph-nodes@0.1.22
+  - @badaitech/chaingraph-trpc@0.1.22
+  - @badaitech/chaingraph-types@0.1.22
+
 ## 0.1.21
 
 ### Patch Changes

apps/chaingraph-backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-backend",
   "type": "module",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "description": "Backend server for the Chaingraph project",
   "license": "BUSL-1.1",

apps/chaingraph-frontend/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @badaitech/chaingraph-frontend
 
+## 0.1.22
+
+### Patch Changes
+
+- default category metadata
+- Updated dependencies
+  - @badaitech/chaingraph-nodes@0.1.22
+  - @badaitech/chaingraph-trpc@0.1.22
+  - @badaitech/chaingraph-types@0.1.22
+
 ## 0.1.21
 
 ### Patch Changes

apps/chaingraph-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph-frontend",
   "type": "module",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "description": "Frontend application for the Chaingraph project",
   "license": "BUSL-1.1",

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

@@ -33,13 +33,35 @@ 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 { useElementResize } from './hooks/useElementResize'
 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,
@@ -62,9 +84,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),
@@ -105,12 +129,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
@@ -252,7 +270,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'>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/chaingraph",
   "type": "module",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "packageManager": "pnpm@10.5.2",
   "license": "BUSL-1.1",

packages/badai-api/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @badaitech/badai-api
 
+## 0.1.22
+
+### Patch Changes
+
+- default category metadata
+
 ## 0.1.21
 
 ### Patch Changes

packages/badai-api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@badaitech/badai-api",
   "type": "module",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "description": "Bad AI GraphQL API client",
   "license": "BUSL-1.1",

packages/chaingraph-nodes/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @badaitech/chaingraph-nodes
 
+## 0.1.22
+
+### Patch Changes
+
+- default category metadata
+- Updated dependencies
+  - @badaitech/chaingraph-types@0.1.22
+
 ## 0.1.21
 
 ### Patch Changes