From 361f02dd1796561660b3162fe45a1348a9833598 Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Fri, 21 Apr 2023 11:14:20 -0700
Subject: [PATCH] fix scope highlight

---
 ui/src/App.css               | 3 +--
 ui/src/components/Canvas.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/App.css b/ui/src/App.css
index d1f973dd..26cc672b 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -79,8 +79,7 @@
   box-shadow: 0px 0px 12px 0px rgba(100, 100, 100, 0.9);
 }
 
-.react-flow__node-scope.selected,
-.react-flow__node-scope:hover {
+.react-flow__node-scope.selected {
   box-shadow: 0px 0px 8px 0px rgba(100, 100, 100, 0.5);
 }
 
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
index e1776adb..5704972c 100644
--- a/ui/src/components/Canvas.tsx
+++ b/ui/src/components/Canvas.tsx
@@ -497,6 +497,7 @@ function CanvasImpl() {
     store,
     (state) => state.removeDragHighlight
   );
+  const updateView = useStore(store, (state) => state.updateView);
 
   const addNode = useStore(store, (state) => state.addNode);
   const reactFlowInstance = useReactFlow();
@@ -584,7 +585,7 @@ function CanvasImpl() {
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           onNodeDragStop={(event, node) => {
-            // removeDragHighlight();
+            removeDragHighlight();
             let mousePos = project({ x: event.clientX, y: event.clientY });
             // check if the mouse is still inside this node. If not, the user
             // has beenn trying to move a pod out.
@@ -601,11 +602,14 @@ function CanvasImpl() {
             if (scope && scope.id !== node.parentNode) {
               moveIntoScope(node.id, scope.id);
             }
+            // update view manually to remove the drag highlight.
+            updateView();
           }}
           onNodeDrag={(event, node) => {
             let mousePos = project({ x: event.clientX, y: event.clientY });
             let scope = getScopeAtPos(mousePos, node.id);
             if (scope) {
+              // The view is updated at the node position change.
               setDragHighlight(scope.id);
             } else {
               removeDragHighlight();