Merge pull request #159 from SdgSoft/main

Added Switch Node to the Flow group, implement Object Property Hide Editor and restict type dropdown with list of type options

Author: yakud

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

@@ -31,6 +31,7 @@ import {
   removeFieldObjectPort,
   requestUpdatePortUI,
   requestUpdatePortValue,
+  updateItemConfigArrayPort,
 } from '@/store/ports'
 import { NodeResizeControl, ResizeControlVariant } from '@xyflow/react'
 import { useUnit } from 'effector-react'
@@ -75,6 +76,7 @@ function ChaingraphNodeComponent({
     removeBreakpoint,
     requestUpdatePortValue,
     requestUpdatePortUI,
+    updateItemConfigArrayPort,
     appendElementArrayPort,
     removeElementArrayPort,
     addFieldObjectPort,
@@ -190,6 +192,11 @@ function ChaingraphNodeComponent({
         portId: params.portId,
         key: params.key,
       }),
+      updateItemConfigArrayPort: params => dispatch.updateItemConfigArrayPort({
+        nodeId: params.nodeId,
+        portId: params.portId,
+        itemConfig: params.itemConfig,
+      }),
       appendElementArrayPort: params => dispatch.appendElementArrayPort({
         nodeId: params.nodeId,
         portId: params.portId,

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

@@ -105,9 +105,11 @@ export function ArrayItemSchemaEditor({
               </TabsList>
             </div>
 
-            <TabsContent value="visual" className="flex-1 flex flex-col">
-              <ArrayItemEditorContent onSave={onSave} />
-            </TabsContent>
+            {tab === 'visual' && (
+              <TabsContent value="visual" className="flex-1 flex flex-col">
+                <ArrayItemEditorContent onSave={onSave} />
+              </TabsContent>
+            )}
 
             <TabsContent value="json" className="flex-1 p-6">
               <JsonEditor onSave={onSave} />
@@ -238,11 +240,11 @@ function ArrayItemEditorContent({ onSave }: { onSave: (config: IPortConfig) => v
 
   return (
     <>
-      <ScrollArea className="flex-1">
+      <ScrollArea type="scroll" className="flex-1">
         <div className="p-6">
           <div className="mb-4">
             <h3 className="text-lg font-medium">
-              Array Item Type:
+              Array Item Type:&nbsp;
               <span className="text-primary">{itemConfig.type}</span>
             </h3>
             <p className="text-sm text-muted-foreground mb-4">

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

@@ -6,7 +6,7 @@
  * As of the Change Date specified in that file, in accordance with the Business Source License, use of this software will be governed by the Apache License, version 2.0.
  */
 
-import type { ArrayPort, IPortConfig, PortType } from '@badaitech/chaingraph-types'
+import type { ArrayPortConfig, IPort, IPortConfig, PortType } from '@badaitech/chaingraph-types'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -26,9 +26,9 @@ interface Data {
 }
 
 interface Props {
-  port: ArrayPort
+  port: IPort<ArrayPortConfig>
   onClose: () => void
-  onSubmit: (data: Data) => void
+  onSubmit: (newItemConfig: IPortConfig) => void
 }
 
 const typeConfigMap: Record<PortType, IPortConfig> = {
@@ -111,18 +111,19 @@ const typeConfigMap: Record<PortType, IPortConfig> = {
 export function AddElementPopover(props: Props) {
   const { onClose, onSubmit, port } = props
 
+  const itemType = port.getConfig().itemConfig.type
+  const dropDownValues = (itemType !== 'any' ? [itemType] : (port.getConfig().ui?.allowedTypes || PORT_TYPES)).filter(portType => portType !== 'any') // && portType !== 'secret')))
+
   const [type, setType] = useState<PortType | undefined>(
-    port.getConfig().itemConfig?.type || 'any',
+    dropDownValues.at(0) || itemType,
   )
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 
   const handleSubmit = () => {
     if (!type)
       return
 
-    onSubmit({
-      config: typeConfigMap[type],
-    })
+    onSubmit(typeConfigMap[type])
   }
 
   return (
@@ -157,8 +158,7 @@ export function AddElementPopover(props: Props) {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent align="start">
-          {PORT_TYPES
-            .filter(portType => portType !== 'any')// && portType !== 'secret')
+          {dropDownValues
             .map(portType => (
               <DropdownMenuItem
                 key={portType}

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

@@ -11,7 +11,6 @@ import type {
 } from '@/components/flow/nodes/ChaingraphNode/ports/context/PortContext'
 import type {
   ArrayPortConfig,
-  ArrayPort as ArrayPortType,
   INode,
   IPort,
   IPortConfig,
@@ -82,6 +81,7 @@ export function ArrayPort({ node, port, context }: ArrayPortProps) {
   const [isSchemaEditorOpen, setIsSchemaEditorOpen] = useState(false)
   const {
     updatePortUI,
+    updateItemConfigArrayPort,
     appendElementArrayPort,
     removeElementArrayPort,
     updatePortValue,
@@ -95,6 +95,15 @@ export function ArrayPort({ node, port, context }: ArrayPortProps) {
   const ui = config.ui
   const executionID = useExecutionID()
 
+  // Memoize child ports to prevent recalculation
+  const childPorts = useMemo(() => {
+    return Array.from(node.ports.values())
+      .filter(p => p.getConfig().parentId === config.id)
+  }, [node.ports, config.id])
+
+  // Use firstport config as itemconfig otherwise, arrayports itemConfig
+  const newItemConfig = useMemo(() => childPorts.length > 0 ? childPorts[0].getConfig() : config.itemConfig, [childPorts, config.itemConfig])
+
   // Memoize edges
   const connectedEdges = useMemo(() => {
     return getEdgesForPort(port.id)
@@ -108,21 +117,38 @@ export function ArrayPort({ node, port, context }: ArrayPortProps) {
 
   // Memoize callback functions
   const handleAddElement = useCallback(() => {
-    setIsAddPropOpen(true)
-  }, [])
+    // if type is not any you want immediately add element instead of choose type
+    if (newItemConfig.type === 'any') {
+      setIsAddPropOpen(true)
+    } else {
+      // if type is not any you want immediately add element instead of choose type
+      appendElementArrayPort({
+        nodeId: node.id,
+        portId: port.id,
+        value: newItemConfig.defaultValue,
+      })
+    }
+  }, [newItemConfig, appendElementArrayPort, node.id, port.id])
 
   const handleClosePopover = useCallback(() => {
     setIsAddPropOpen(false)
   }, [])
 
-  const handleSubmitPopover = useCallback(() => {
+  const handleSubmitPopover = useCallback((newItemConfig: IPortConfig) => {
+    // Update array ports itemConfig
+    updateItemConfigArrayPort({
+      nodeId: node.id,
+      portId: port.id,
+      itemConfig: newItemConfig,
+    })
+    // Add new array element with the choosen type
     appendElementArrayPort({
       nodeId: node.id,
       portId: port.id,
-      value: config.itemConfig.defaultValue,
+      value: newItemConfig.defaultValue,
     })
     setIsAddPropOpen(false)
-  }, [node.id, port.id, config.itemConfig.defaultValue, appendElementArrayPort])
+  }, [node.id, port.id, appendElementArrayPort, updateItemConfigArrayPort])
 
   const handleToggleCollapsible = useCallback(() => {
     updatePortUI({
@@ -184,13 +210,7 @@ export function ArrayPort({ node, port, context }: ArrayPortProps) {
     setIsSchemaEditorOpen(false)
   }, [node.id, port, config.ui, updatePortUI, updatePortValue])
 
-  // Memoize child ports to prevent recalculation
-  const childPorts = useMemo(() => {
-    return Array.from(node.ports.values())
-      .filter(p => p.getConfig().parentId === config.id)
-  }, [node.ports, config.id])
-
-  if (ui?.hide)
+  if (ui?.hidden)
     return null
 
   return (
@@ -296,7 +316,7 @@ export function ArrayPort({ node, port, context }: ArrayPortProps) {
                   </PopoverTrigger>
                   {isAddPropOpen && (
                     <AddElementPopover
-                      port={port as ArrayPortType}
+                      port={port}
                       onClose={handleClosePopover}
                       onSubmit={handleSubmitPopover}
                     />

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

@@ -146,6 +146,15 @@ export function ObjectSchemaEditor({ initialSchema, onChange }: ObjectSchemaEdit
         setVirtualNode(virtualNode.clone())
       },
 
+      updateItemConfigArrayPort: (params) => {
+        const port = virtualNode.getPort(params.portId)
+        if (!port) {
+          return
+        }
+
+        virtualNode.updateArrayItemConfig(port)
+        setVirtualNode(virtualNode.clone())
+      },
       appendElementArrayPort: (params) => {
         const port = virtualNode.getPort(params.portId)
         if (!port) {

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

@@ -64,17 +64,16 @@ export function PortHeader({
             {title}
           </PortTitle>
         </button>
-      </div>
-
-      {rightElement && (
-        <div className={cn(
-          'flex',
-          isOutput ? 'justify-end' : 'justify-start',
+        {rightElement && (
+          <div className={cn(
+            'flex',
+            isOutput ? 'justify-end' : 'justify-start',
+          )}
+          >
+            {rightElement}
+          </div>
         )}
-        >
-          {rightElement}
-        </div>
-      )}
+      </div>
     </div>
   )
 }

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

@@ -223,6 +223,7 @@ export function ObjectPort({ node, port, context }: ObjectPortProps) {
                       onClose={handleClosePopover}
                       onSubmit={handleSubmitPopover}
                       nextOrder={childPorts.length + 1}
+                      port={port}
                     />
                   )}
                 </Popover>

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

@@ -6,7 +6,7 @@
  * As of the Change Date specified in that file, in accordance with the Business Source License, use of this software will be governed by the Apache License, version 2.0.
  */
 
-import type { IPortConfig, PortType } from '@badaitech/chaingraph-types'
+import type { IPort, IPortConfig, ObjectPortConfig, PortType } from '@badaitech/chaingraph-types'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -29,6 +29,7 @@ interface Props {
   onClose: () => void
   onSubmit: (data: Data) => void
   nextOrder?: number
+  port: IPort<ObjectPortConfig>
 }
 
 const typeConfigMap: Record<PortType, IPortConfig> = {
@@ -88,6 +89,7 @@ const typeConfigMap: Record<PortType, IPortConfig> = {
     defaultValue: [],
     ui: {
       hideEditor: false,
+      allowedTypes: ['string', 'number', 'boolean'],
     },
     isMutable: true,
   },
@@ -109,10 +111,16 @@ const typeConfigMap: Record<PortType, IPortConfig> = {
 }
 
 export function AddPropPopover(props: Props) {
-  const { onClose, onSubmit } = props
-
+  const { onClose, onSubmit, port } = props
   const [key, setKey] = useState('')
-  const [type, setType] = useState<PortType | undefined>('string')
+
+  // use all porttypes if allowedTypes undefined and filter stream ans any out
+  const dropDownValues = (port.getConfig().ui?.allowedTypes || PORT_TYPES).filter(t => t !== 'stream' && t !== 'any')
+
+  const [type, setType] = useState<PortType | undefined>(
+    // use as initial value first enumvalue if type is any
+    dropDownValues.at(0),
+  )
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 
   const handleSubmit = () => {
@@ -163,8 +171,7 @@ export function AddPropPopover(props: Props) {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent>
-          {PORT_TYPES
-            .filter(t => t !== 'stream' && t !== 'any')
+          {dropDownValues
             .map(portType => (
               <DropdownMenuItem
                 key={portType}

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

@@ -39,6 +39,15 @@ export function PortField({
     parentPort.getConfig()?.ui?.keyDeletable
     || parentPort.getConfig()?.ui?.keyDeletable === undefined, [parentPort])
 
+  const portConfig = port.getConfig()
+  port.setConfig({
+    ...portConfig,
+    ui: {
+      ...portConfig.ui || {},
+      hideEditor: parentPort.getConfig()?.ui?.hidePropertyEditor || false,
+    },
+  })
+
   return (
     <div className="py-1 w-full relative">
       <div className={cn(

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

@@ -37,6 +37,12 @@ export interface RemoveFieldObjectPortParams {
   key: string
 }
 
+export interface UpdateItemConfigArrayPortParams {
+  nodeId: string
+  portId: string
+  itemConfig: IPortConfig
+}
+
 export interface AddElementArrayPortParams {
   nodeId: string
   portId: string
@@ -57,6 +63,7 @@ export interface PortContextValue {
   addFieldObjectPort: (params: AddFieldObjectPortParams) => void
   removeFieldObjectPort: (params: RemoveFieldObjectPortParams) => void
   // Array port callbacks
+  updateItemConfigArrayPort: (params: UpdateItemConfigArrayPortParams) => void
   appendElementArrayPort: (params: AddElementArrayPortParams) => void
   removeElementArrayPort: (params: RemoveElementArrayPortParams) => void
   // Edge utilities
@@ -69,6 +76,7 @@ const defaultContext: PortContextValue = {
   updatePortUI: () => { },
   addFieldObjectPort: () => { },
   removeFieldObjectPort: () => { },
+  updateItemConfigArrayPort: () => { },
   appendElementArrayPort: () => { },
   removeElementArrayPort: () => { },
   getEdgesForPort: () => [],