feat: container for generator vertices (#1321)

Signed-off-by: veds-g <[email protected]>
numaproj · Nov 2, 2023 · f4211fb · f4211fb
1 parent f4354af
commit f4211fb
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 31 deletions.
diff --git a/ui/src/components/pages/Pipeline/partials/Graph/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/index.tsx
@@ -108,15 +108,15 @@ const getLayoutedElements = (
   // setting nodes excepts generators and assigning generator height after remaining nodes are laid out
   let max_pos = 0;
   nodes.forEach((node) => {
-    if (node?.data?.type !== "sideInput") {
+    if (node?.data?.type !== "sideInput" && node?.data?.type !== "generator") {
       const nodeWithPosition = dagreGraph.node(node.id);
       max_pos = Math.max(max_pos, nodeWithPosition.y);
     }
   });
   let cnt = 2;
   nodes.forEach((node) => {
     const nodeWithPosition = dagreGraph.node(node.id);
-    if (node?.data?.type === "sideInput") {
+    if (node?.data?.type === "sideInput" || node?.data?.type === "generator") {
       nodeWithPosition.x = nodeWidth;
       nodeWithPosition.y = max_pos + nodeHeight * 0.75 * cnt;
       cnt++;

diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/CustomNode/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/CustomNode/index.tsx
@@ -149,47 +149,74 @@ const CustomNode: FC<NodeProps> = ({
       <Tooltip
         title={<div className={"node-tooltip"}>{data?.name}</div>}
         arrow
-        placement={"top-end"}
+        placement={"left"}
       >
         <div className={"sideInput_node"} onClick={handleClick}>
-          <div
-            className={"sideInput_node_ele"}
-            style={{
-              borderTopLeftRadius: "1rem",
-              borderBottomLeftRadius: "1rem",
-              ...genStyle(""),
-            }}
+          <Tooltip
+            title={<div className={"node-tooltip"}>Spec View</div>}
+            arrow
+            placement={"bottom-start"}
           >
-            <img
-              src={generatorImage[generatorToColorMap.get(data?.name)]}
-              alt={"generator"}
-              width={16}
-              height={16}
-              style={{ alignSelf: "center" }}
-            />
-          </div>
-          <div
-            className={"sideInput_node_ele"}
-            style={{
-              color: getSideInputColor(data?.name),
-              borderTopRightRadius: "1rem",
-              borderBottomRightRadius: "1rem",
-              ...genStyle("---"),
-            }}
+            <div
+              className={"sideInput_node_ele"}
+              style={{
+                borderTopLeftRadius: "1rem",
+                borderBottomLeftRadius: "1rem",
+                ...genStyle(""),
+              }}
+            >
+              <img
+                src={generatorImage[generatorToColorMap.get(data?.name)]}
+                alt={"generator"}
+                width={16}
+                height={16}
+                style={{ alignSelf: "center" }}
+              />
+            </div>
+          </Tooltip>
+          <Tooltip
+            title={<div className={"node-tooltip"}>Show Edges</div>}
+            arrow
+            placement={"bottom-start"}
           >
-            ---
-          </div>
+            <div
+              className={"sideInput_node_ele"}
+              style={{
+                color: getSideInputColor(data?.name),
+                borderTopRightRadius: "1rem",
+                borderBottomRightRadius: "1rem",
+                ...genStyle("---"),
+              }}
+            >
+              ---
+            </div>
+          </Tooltip>
           <Handle
+            className={"generator_handle"}
             type="source"
             id="2"
             position={Position.Right}
-            style={{ top: "60%", left: "35%" }}
           />
         </div>
       </Tooltip>
     );
   }
 
+  if (data?.type === "generator") {
+    return (
+      <div
+        className={"generator_node"}
+        style={{
+          height: `${(data?.sideInputCount + 1) * 3.4}rem`,
+          ...commonStyle,
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        Generator
+      </div>
+    );
+  }
+
   const handleInputClick = useCallback(
     (e) => {
       e.stopPropagation();
@@ -237,6 +264,7 @@ const CustomNode: FC<NodeProps> = ({
       });
       const updatedHighlightedState = {};
       updatedHighlightedState[source] = true;
+      updatedHighlightedState["---"] = true;
       setHighlightValues(updatedHighlightedState);
     },
     [data, sideInputNodes, sideInputEdges, setHidden, setHighlightValues]

diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/CustomNode/style.css b/ui/src/components/pages/Pipeline/partials/Graph/partials/CustomNode/style.css
@@ -124,6 +124,21 @@
     align-items: center;
 }
 
+.generator_handle {
+    top: 60%;
+    left: 82.5%;
+    background: none;
+}
+
+.generator_node {
+    background: #F8F8FB;
+    padding: 1rem 1.5rem 1rem 1.5rem;
+    margin-left: -1.5rem;
+    border-radius: 1.25rem;
+    border: 0.0625rem solid #DAE3E8;
+    color: #6B6C72;
+}
+
 .react-flow__handle-bottom {
     z-index: -1;
     margin: -0.2rem;

diff --git a/ui/src/utils/fetcherHooks/pipelineViewFetch.ts b/ui/src/utils/fetcherHooks/pipelineViewFetch.ts
@@ -493,9 +493,19 @@ export const usePipelineViewFetch = (
         newVertices.push(newNode);
       });
     }
-    //creating side input nodes
+    //creating side input nodes && wrapper generator node
     const generatorToColorIdx = new Map();
-    if (spec?.sideInputs) {
+    if (spec?.sideInputs && spec.sideInputs.length) {
+      const newNode = {} as Node;
+      newNode.id = "generator";
+      newNode.data = {
+        sideInputCount: spec.sideInputs.length,
+      };
+      newNode.position = { x: 0, y: 0 };
+      newNode.draggable = false;
+      newNode.type = "custom";
+      newNode.data.type = "generator";
+      newVertices.push(newNode);
       spec.sideInputs.forEach((sideInput, idx) => {
         const newNode = {} as Node;
         newNode.id = sideInput?.name;