show handles with input output names on hover

core/services/workflow_service/schemas/compute_block.py

@@ -74,12 +74,14 @@ def replace_minio_host(url: str | None) -> str | None:
 
 class BaseIODTO(BaseModel):
     id: UUID | None = None
+    name: str | None = None
     data_type: DataType
 
     @classmethod
     def from_input_output(cls, io):
         return cls(
             id=io.uuid,
+            name=io.name,
             data_type=io.data_type
         )
 

frontend/components/nodes/ComputeBlockNode.tsx

@@ -5,6 +5,7 @@ import { useSelectedComputeBlock } from "@/hooks/useSelectedComputeBlock"
 import type { ComputeBlock, InputOutput } from "../CreateComputeBlockModal"
 import { ComputeBlockStatus, InputOutputType } from "../CreateComputeBlockModal"
 import { CheckCircle, Error, Warning, Schedule, Autorenew } from "@mui/icons-material"
+import Tooltip from "@mui/material/Tooltip"
 
 export interface ComputeBlockNodeType extends Node {
   id: string,
@@ -67,22 +68,28 @@ export default function ComputeBlockNode({ data }: { data: ComputeBlock }) {
   const renderHandles = (items: InputOutput[], type: "target" | "source", position: Position) => {
     return items.map((item, index) => {
       return (
-        <Handle
-          key={index}
-          type={type}
-          position={position}
-          id={item.id}
-          style={{
-            ...handleStyles[item.data_type] || {
-              backgroundImage: "",
-              backgroundColor: "grey",
-            },
-            width: "15px",
-            height: "15px",
-            borderRadius: "50%",
-            top: `${(index + 1) * 20}%`,
-          }}
-        />
+        <Tooltip
+          key={item.id}
+          title={`${item.name} (${item.data_type})`}
+          placement={type === "target" ? "left" : "right"}
+          arrow
+          disableInteractive
+        >
+          <Handle
+            key={item.id}
+            id={item.id}
+            type={type}
+            position={position}
+            style={{
+              ...handleStyles[item.data_type],
+              width: "15px",
+              height: "15px",
+              borderRadius: "50%",
+              top: `${(index + 1) * 20}%`,
+              pointerEvents: "all",
+            }}
+          />
+        </Tooltip>
       )
     })
   }

frontend/eslint.config.js

@@ -4,10 +4,17 @@ export default [
   ...config.nextExtension,
   {
     rules: {
-      ...config.nextExtension.rules,
       "semi": ["error", "never"],
-      "quotes": ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }],  // Override quotes rule
-      "@stylistic/quotes": ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }]  // Override the @stylistic/quotes plugin rule as wellls: true }], // Override or add the quotes rule
-    }
-  }
+      "quotes": ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }],
+      "@stylistic/quotes": ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }],
+    },
+  },
+  // Override for generated Next.js file
+  {
+    files: ["next-env.d.ts"],
+    rules: {
+      "@typescript-eslint/triple-slash-reference": "off",
+    },
+  },
 ]
+

frontend/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.