Merge pull request #486 from DataRecce/feature/drc-894-enter-multi-no…

…des-mode-by-selecting-the-checkbox-of-a-node

Add multi-select checkbox on the node

js/src/components/lineage/ActionControl.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, HStack, StackDivider } from "@chakra-ui/react";
+import { LineageGraphNode } from "./lineage";
+import { useLineageViewContext } from "./LineageViewContext";
+
+export interface ActionControlProps {
+  onClose: () => void;
+}
+
+export function ActionControl({ onClose }: ActionControlProps) {
+  const { cancel, actionState } = useLineageViewContext();
+
+  const getProgressMessage = () => {
+    if (actionState.mode === "per_node") {
+      return `${actionState.completed} / ${actionState.total}`;
+    } else {
+      if (actionState.currentRun?.progress?.percentage) {
+        return `${actionState.currentRun.progress.percentage * 100}%`;
+      } else {
+        if (actionState.status === "completed") {
+          return "100%";
+        } else {
+          return "0%";
+        }
+      }
+    }
+  };
+
+  return (
+    <Box bg="white" rounded="md" shadow="dark-lg">
+      <HStack
+        p="5px 15px"
+        mt="4"
+        divider={<StackDivider borderColor="gray.200" />}
+        spacing={4}
+      >
+        <Box fontSize="10pt">
+          Progress: {getProgressMessage()}{" "}
+          {actionState.status === "canceled" ? " (canceled)" : ""}
+        </Box>
+
+        {actionState.status === "running" ||
+        actionState.status === "canceling" ? (
+          <Button
+            size="xs"
+            variant="outline"
+            onClick={cancel}
+            isLoading={actionState.status === "canceling"}
+            loadingText="Canceling"
+          >
+            Cancel
+          </Button>
+        ) : (
+          <HStack>
+            <Button size="xs" variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </HStack>
+        )}
+      </HStack>
+    </Box>
+  );
+}

js/src/components/lineage/GraphNode.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, HStack, Icon, Spacer, Tooltip } from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
 
 import { Handle, NodeProps, Position, useStore } from "reactflow";
 import { LineageGraphNode } from "./lineage";
@@ -10,14 +10,12 @@ import "./styles.css";
 import { ActionTag } from "./ActionTag";
 import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
 
-import { MdFormatListNumberedRtl, MdSchema } from "react-icons/md";
-import { NodeColumnData } from "@/lib/api/info";
 import { findByRunType } from "../run/registry";
 import { isSchemaChanged } from "../schema/schemaDiff";
+import { useLineageViewContext } from "./LineageViewContext";
 
 interface GraphNodeProps extends NodeProps<LineageGraphNode> {}
 
-
 const NodeRunsAggregated = ({ id }: { id: string }) => {
   const { lineageGraph, runsAggregated } = useLineageGraphContext();
   const runs = runsAggregated?.[id];
@@ -84,11 +82,13 @@ export function GraphNode({ data }: GraphNodeProps) {
   const showContent = useStore((s) => s.transform[2] > 0.3);
 
   const { icon: resourceIcon } = getIconForResourceType(resourceType);
+  const [isHovered, setIsHovered] = useState(false);
+  const { selectNodeMulti, selectMode } = useLineageViewContext();
 
   // text color, icon
 
   let color = "gray.400";
-  let iconChangeStatus;
+  let iconChangeStatus: any;
   let borderStyle = "solid";
   if (changeStatus) {
     iconChangeStatus = getIconForChangeStatus(changeStatus).icon;
@@ -130,6 +130,8 @@ export function GraphNode({ data }: GraphNodeProps) {
         transition="box-shadow 0.2s ease-in-out"
         padding={0}
         className={highlightClassName}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <Flex
           backgroundColor={color}
@@ -140,7 +142,23 @@ export function GraphNode({ data }: GraphNodeProps) {
           alignItems="top"
           visibility={showContent ? "inherit" : "hidden"}
         >
-          <Icon as={resourceIcon} />
+          {isHovered || selectMode === "multi" ? (
+            // Don't know why that the chakra checkbox would trigger two onNodeClick events, use the native cehckbox instead
+            // <Checkbox isChecked={isSelected} />
+            <input
+              checked={isSelected && selectMode === "multi"}
+              type="checkbox"
+              onChange={() => {
+                //noop, add the handler to prevent the warning in the console.
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                selectNodeMulti(data.id);
+              }}
+            />
+          ) : (
+            <Icon as={resourceIcon} />
+          )}
         </Flex>
 
         <Flex flex="1 0 auto" mx="1" width="100px" direction="column">