[DOP-22580] Improve selection reset

Author: dolfinus

src/components/lineage/LineageGraph.tsx

@@ -7,6 +7,7 @@ import {
     useReactFlow,
     useNodesInitialized,
     BackgroundVariant,
+    Edge,
 } from "@xyflow/react";
 import { DatasetNode, JobNode, RunNode, OperationNode } from "./nodes";
 import { useEffect } from "react";
@@ -28,10 +29,21 @@ const nodeTypes = {
     operationNode: OperationNode,
 };
 
+const subgraphSelected = (edges?: Edge[]) => {
+    if (!edges) {
+        return false;
+    }
+    for (const edge of edges) {
+        if (edge.selected) {
+            return true;
+        }
+    }
+    return false;
+};
+
 const LineageGraph = (props: ReactFlowProps) => {
     const { fitView } = useReactFlow();
-    const { hideNonSelected, ...actions } = useLineageSelection();
-
+    const selectionHandlers = useLineageSelection();
     const nodesInitialized = useNodesInitialized();
 
     useEffect(() => {
@@ -40,7 +52,9 @@ const LineageGraph = (props: ReactFlowProps) => {
 
     return (
         <ReactFlow
-            className={hideNonSelected ? "hideNonSelected" : undefined}
+            className={
+                subgraphSelected(props.edges) ? "subgraphSelected" : undefined
+            }
             nodeTypes={nodeTypes}
             edgeTypes={edgeTypes}
             nodesFocusable={true}
@@ -56,7 +70,7 @@ const LineageGraph = (props: ReactFlowProps) => {
             zoomOnDoubleClick={false}
             fitView
             onDoubleClick={() => fitView()}
-            {...actions}
+            {...selectionHandlers}
             {...props}
         >
             <Background variant={BackgroundVariant.Dots} />

src/components/lineage/edges/BaseEdge.css

@@ -1,6 +1,6 @@
-.react-flow.hideNonSelected .react-flow__node:not(.selected),
-.react-flow.hideNonSelected .react-flow__edge:not(.selected),
-.react-flow.hideNonSelected
+.react-flow.subgraphSelected .react-flow__node:not(.selected),
+.react-flow.subgraphSelected .react-flow__edge:not(.selected),
+.react-flow.subgraphSelected
     .react-flow__edgelabel-renderer
     > div:not(.selected) {
     opacity: 0.3 !important;

src/components/lineage/nodes/base_node/BaseNode.css

@@ -1,3 +1,7 @@
+.react-flow__node.draggable.selectable {
+    cursor: pointer;
+}
+
 .react-flow__node.selected .MuiCard-root {
     --xy-selection-background-color: #ebf2fd;
     background-color: var(

src/components/lineage/selection/useLineageSelection.ts

@@ -1,14 +1,12 @@
 import { Edge, Node, useReactFlow } from "@xyflow/react";
-import { useCallback, useState, MouseEvent } from "react";
+import { useCallback, MouseEvent } from "react";
 
 const useLineageSelection = () => {
     const { getNodes, getEdges, setEdges, setNodes } = useReactFlow();
-    const [hideNonSelected, setHideNonSelected] = useState(false);
 
     const setSelection = (
         nodesToSelect: Set<string>,
         edgesToSelect: Set<string>,
-        hideOthers: boolean = true,
     ) => {
         const nodes = getNodes().map((node) => {
             node.selected = nodesToSelect.has(node.id);
@@ -22,9 +20,6 @@ const useLineageSelection = () => {
 
         setNodes(nodes);
         setEdges(edges);
-        setHideNonSelected(
-            hideOthers && nodesToSelect.size + edgesToSelect.size > 0,
-        );
     };
 
     const _visitNodes = (
@@ -102,6 +97,10 @@ const useLineageSelection = () => {
         return result;
     };
 
+    const selectNode = useCallback((nodeId: string) => {
+        setSelection(new Set([nodeId]), new Set());
+    }, []);
+
     const onEdgeClick = useCallback((e: MouseEvent, currentEdge: Edge) => {
         setSelection(
             new Set([currentEdge.source, currentEdge.target]),
@@ -123,8 +122,7 @@ const useLineageSelection = () => {
     );
 
     const onNodeClick = useCallback((e: MouseEvent, currentNode: Node) => {
-        // If only one node is selected, don't hide others, as it not very convenient
-        setSelection(new Set([currentNode.id]), new Set(), false);
+        selectNode(currentNode.id);
         e.stopPropagation();
     }, []);
 
@@ -143,7 +141,6 @@ const useLineageSelection = () => {
     }, []);
 
     return {
-        hideNonSelected,
         onEdgeClick,
         onEdgeDoubleClick,
         onNodeClick,