Fix Edge Selection (#1146)

* Fix update selection, add pointer cursor

* Update CHANGELOG.md

CHANGELOG.md

@@ -17,6 +17,9 @@ and this project adheres to
 
 ### Fixed
 
+- Fix highlighted Edge can get out of sync with selected Edge
+  [#1099](https://github.com/OpenFn/Lightning/issues/1099)
+
 - Creating a new user without a password fails and there is no user feedback
   [#731](https://github.com/OpenFn/Lightning/issues/731)
 

assets/js/workflow-diagram/WorkflowDiagram.tsx

@@ -42,17 +42,21 @@ export default React.forwardRef<HTMLElement, WorkflowDiagramProps>(
     const updateSelection = useCallback(
       (id?: string) => {
         if (id !== selection) {
-          chartCache.current.lastSelection = id;
           onSelectionChange(id);
         }
       },
       [onSelectionChange, selection]
     );
 
+    const requestSelectionChange = useCallback((id?: string) => {
+      chartCache.current.lastSelection = id;
+      updateSelection(id);
+    }, []);
+
     const { placeholders, add: addPlaceholder } = usePlaceholders(
       ref,
       store,
-      updateSelection
+      requestSelectionChange
     );
 
     const workflow = useStore(

assets/js/workflow-diagram/edges/Edge.tsx

@@ -23,7 +23,7 @@ const CustomEdge: FC<EdgeProps> = props => {
               pointerEvents: 'all',
               ...labelStyles(selected),
             }}
-            className="nodrag nopan"
+            className="nodrag nopan cursor-pointer"
           >
             {label}
           </div>

assets/js/workflow-diagram/nodes/Node.tsx

@@ -100,7 +100,7 @@ const Node = ({
 
   return (
     <div className="group">
-      <div className="flex flex-row">
+      <div className="flex flex-row cursor-pointer">
         <div>
           {targetPosition && (
             <Handle

assets/js/workflow-diagram/usePlaceholders.ts

@@ -63,9 +63,6 @@ export default (
     const updated = create(parentNode);
     setPlaceholders(updated);
 
-    // clear the selection
-    // // TODO need to put the chart in placeholder mode
-    // chartCache.current.lastSelection = undefined;
     requestSelectionChange(updated.nodes[0].id);
   }, []);