Merge pull request #431

fix(18935): Fix the verification of connectivity limits on handles

* chore(18935): update dependencies

* fix(18935): fix deletion of connected edges

* refactor(18935): improve rendering of dummy target

* fix(18935): update connectable limits

* refactor(18935): refactor connectable checks

* refactor(18935): a bit of renaming

* test(18935): add tests

* chore(18935): eslint

Author: vanch3d

hivemq-edge/src/frontend/package.json

@@ -81,7 +81,7 @@
     "react-i18next": "^14.1.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.11.2",
-    "reactflow": "^11.10.2",
+    "reactflow": "^11.11.3",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.1",
     "zustand": "^4.4.7"

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { NodeRemoveChange, EdgeRemoveChange } from 'reactflow'
+import { NodeRemoveChange, EdgeRemoveChange, getConnectedEdges } from 'reactflow'
 import { ListItem, Text, UnorderedList, useDisclosure, useToast, VStack } from '@chakra-ui/react'
 
 import ConfirmationDialog from '@/components/Modal/ConfirmationDialog.tsx'
@@ -74,7 +74,10 @@ const DeleteListener: FC = () => {
 
   const handleConfirmOnSubmit = () => {
     const { selectedNodes, selectedEdges } = selectedElements
-    onEdgesChange(selectedEdges.map<EdgeRemoveChange>((edge) => ({ id: edge.id, type: 'remove' })))
+    const allConnectedEdges = getConnectedEdges(selectedNodes, edges)
+    onEdgesChange(
+      [...selectedEdges, ...allConnectedEdges].map<EdgeRemoveChange>((edge) => ({ id: edge.id, type: 'remove' }))
+    )
     onNodesChange(selectedNodes.map<NodeRemoveChange>((node) => ({ id: node.id, type: 'remove' })))
     setStatus(status === DesignerStatus.DRAFT ? DesignerStatus.DRAFT : DesignerStatus.MODIFIED)
   }

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/DeleteListener.tsx

@@ -5,6 +5,9 @@ import { Tag } from '@chakra-ui/react'
 import { getConnectedNodeFrom } from '@datahub/utils/node.utils.ts'
 import { NodeIcon } from '@datahub/components/helpers'
 
+const ICON_SIZE = 50
+const ICON_OFFSET = 20
+
 const ConnectionLine: FC<ConnectionLineComponentProps> = ({
   fromHandle,
   fromNode,
@@ -33,7 +36,12 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({
     <g>
       <path fill="none" stroke="grey" strokeWidth={1.5} className="animated" d={d} />
       {props.connectionStatus === null && (
-        <foreignObject x={toX} y={toY - 20} width="50px" height="50px">
+        <foreignObject
+          x={toX - (props.fromPosition === 'left' ? ICON_SIZE : 0)}
+          y={toY - ICON_OFFSET}
+          width={`${ICON_SIZE}px`}
+          height={`${ICON_SIZE}px`}
+        >
           <Tag size="lg" colorScheme="gray" borderRadius="full" variant="outline">
             <NodeIcon type={droppedNode?.type} />
           </Tag>

hivemq-edge/src/frontend/src/extensions/datahub/components/nodes/ConnectionLine.tsx

@@ -1,9 +1,11 @@
 import { CSSProperties, FC, HTMLAttributes, useMemo } from 'react'
-import { getConnectedEdges, Handle, HandleProps, useNodeId } from 'reactflow'
+import { Handle, HandleProps, useNodeId } from 'reactflow'
 
 import useDataHubDraftStore from '../../hooks/useDataHubDraftStore.ts'
+import { isNodeHandleConnectable } from '@datahub/utils/node.utils.ts'
 
-interface CustomHandleProps extends Omit<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>, 'isConnectable'> {
+interface CustomHandleProps
+  extends Omit<HandleProps & Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, 'isConnectable'> {
   isConnectable?: boolean | number
 }
 
@@ -12,22 +14,11 @@ export const CustomHandle: FC<CustomHandleProps> = (props) => {
   const nodeId = useNodeId()
 
   const isHandleConnectable = useMemo(() => {
-    if (typeof props.isConnectable === 'number') {
-      const node = nodes.find((node) => node.id === nodeId)
-      if (node) {
-        const connectedEdges = getConnectedEdges([node], edges)
-
-        const toHandle = connectedEdges.filter((edge) => {
-          const otherEnd = props.type === 'source' ? edge.sourceHandle : edge.targetHandle
-          return otherEnd === props.id
-        })
-
-        return toHandle.length < props.isConnectable
-      }
-      return false
-    }
-    return true
-  }, [edges, nodeId, nodes, props.id, props.isConnectable, props.type])
+    const node = nodes.find((node) => node.id === nodeId)
+    if (!node) return false
+    return isNodeHandleConnectable(props, node, edges)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodes.length, props, edges, nodeId])
 
   let transform: CSSProperties = {
     width: '12px',

hivemq-edge/src/frontend/src/extensions/datahub/components/nodes/CustomHandle.tsx

@@ -54,13 +54,7 @@ export const OperationNode: FC<NodeProps<OperationData>> = (props) => {
       </NodeWrapper>
       <CustomHandle type="target" position={Position.Left} id={OperationData.Handle.INPUT} />
       {!metadata?.isTerminal && (
-        <CustomHandle
-          type="source"
-          position={Position.Right}
-          id={OperationData.Handle.OUTPUT}
-          // TODO[18935] bug with the isConnectable routine
-          // isConnectable={1}
-        />
+        <CustomHandle type="source" position={Position.Right} id={OperationData.Handle.OUTPUT} isConnectable={1} />
       )}
       {isSerialiser && <CustomHandle type="target" position={Position.Top} id={OperationData.Handle.SCHEMA} />}
       {isTransform && (

hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationNode.tsx

@@ -30,6 +30,7 @@ export const TopicFilterNode: FC<NodeProps<TopicFilterData>> = (props) => {
       {data.topics?.map((t, index) => (
         <CustomHandle
           type="source"
+          isConnectable={1}
           position={Position.Right}
           id={`${t}-${index}`}
           key={`${id}-${t}-${index}`}

hivemq-edge/src/frontend/src/extensions/datahub/designer/topic_filter/TopicFilterNode.tsx

@@ -5,9 +5,11 @@ import { MOCK_DEFAULT_NODE } from '@/__test-utils__/react-flow/nodes.ts'
 import { DataPolicyValidator } from '@/api/__generated__'
 import { MOCK_JSONSCHEMA_SCHEMA } from '@datahub/__test-utils__/schema.mocks.ts'
 import {
+  ConnectableHandleProps,
   getAllParents,
   getNodeId,
   getNodePayload,
+  isNodeHandleConnectable,
   isValidPolicyConnection,
   reduceIdsFrom,
 } from '@datahub/utils/node.utils.ts'
@@ -337,3 +339,58 @@ describe('reduceIdsFrom', () => {
     )
   })
 })
+
+describe('isNodeHandleConnectable', () => {
+  const nodes: Node[] = [
+    {
+      id: '1',
+      data: {},
+      position: { x: 0, y: 0 },
+    },
+    {
+      id: '2',
+      data: {},
+      position: { x: 0, y: 0 },
+    },
+    {
+      id: '3',
+      data: {},
+      position: { x: 0, y: 0 },
+    },
+    {
+      id: '3',
+      data: {},
+      position: { x: 0, y: 0 },
+    },
+  ]
+  const edges: Edge[] = [
+    { id: '1', source: '1', target: '3', sourceHandle: 'source1', targetHandle: 'target3' },
+    { id: '2', source: '2', target: '3', sourceHandle: 'source2', targetHandle: 'target3' },
+    { id: '3', source: '3', target: '4', sourceHandle: 'source3', targetHandle: 'target4' },
+  ]
+
+  it('should detect connectivity', async () => {
+    const handle: ConnectableHandleProps = { id: 'source', type: 'source', isConnectable: false }
+    expect(isNodeHandleConnectable(handle, nodes[0], edges)).toBeFalsy()
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: undefined }, nodes[0], edges)).toBeFalsy()
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 1 }, nodes[0], edges)).toBeTruthy()
+  })
+
+  it('should detect connectivity', async () => {
+    const handle: ConnectableHandleProps = { id: 'target1', type: 'target', isConnectable: false }
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 1 }, nodes[0], edges)).toBeTruthy()
+  })
+
+  it('should detect connectivity', async () => {
+    const handle: ConnectableHandleProps = { id: 'source1', type: 'source', isConnectable: false }
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 1 }, nodes[0], edges)).toBeFalsy()
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 2 }, nodes[0], edges)).toBeTruthy()
+  })
+
+  it('should detect connectivity', async () => {
+    const handle: ConnectableHandleProps = { id: 'target3', type: 'target', isConnectable: false }
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 1 }, nodes[2], edges)).toBeFalsy()
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 2 }, nodes[2], edges)).toBeFalsy()
+    expect(isNodeHandleConnectable({ ...handle, isConnectable: 3 }, nodes[2], edges)).toBeTruthy()
+  })
+})

hivemq-edge/src/frontend/src/extensions/datahub/utils/node.utils.spec.ts

@@ -1,4 +1,4 @@
-import { Connection, Edge, getIncomers, getOutgoers, Node } from 'reactflow'
+import { Connection, Edge, getConnectedEdges, getIncomers, getOutgoers, HandleProps, Node } from 'reactflow'
 import { v4 as uuidv4 } from 'uuid'
 import { MOCK_JSONSCHEMA_SCHEMA } from '../__test-utils__/schema.mocks.ts'
 import i18n from '@/config/i18n.config.ts'
@@ -349,3 +349,20 @@ export const reduceIdsFrom =
     }
     return acc
   }
+
+export interface ConnectableHandleProps extends Pick<HandleProps, 'id' | 'type'> {
+  isConnectable?: boolean | number
+}
+
+export const isNodeHandleConnectable = (handle: ConnectableHandleProps, node: Node, edges: Edge[]) => {
+  if (typeof handle.isConnectable === 'number') {
+    const connectedEdges = getConnectedEdges([node], edges)
+    const toHandle = connectedEdges.filter((edge) => {
+      return handle.type === 'source'
+        ? edge.source === node.id && edge.sourceHandle === handle.id
+        : edge.target === node.id && edge.targetHandle === handle.id
+    })
+    return toHandle.length < handle.isConnectable
+  }
+  return handle.isConnectable
+}