Make the cross-links focusable

so they stay highlighted even if I move the mouse somewhere else
tableau · Feb 1, 2024 · c71d24d · c71d24d
1 parent 7123fe8
commit c71d24d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/query-graphs/src/ui/QueryGraph.css b/query-graphs/src/ui/QueryGraph.css
@@ -35,7 +35,8 @@
   transition-duration: .5s;
 }
 
-.query-graph .react-flow__edge.qg-crosslink:hover .react-flow__edge-path {
+.query-graph .react-flow__edge.qg-crosslink:hover .react-flow__edge-path,
+.query-graph .react-flow__edge.qg-crosslink:focus .react-flow__edge-path {
   stroke: hsl(309, 84%, 36%);
   stroke-width: 1.5px;
   stroke-dasharray: 6 2;

diff --git a/query-graphs/src/ui/QueryGraph.tsx b/query-graphs/src/ui/QueryGraph.tsx
@@ -89,7 +89,6 @@ function QueryGraphInternal({treeDescription}: QueryGraphProps) {
             elementsSelectable={true}
             nodesDraggable={false}
             nodesConnectable={false}
-            edgesFocusable={false}
             nodesFocusable={false}
             className={"query-graph"}
         >

diff --git a/query-graphs/src/ui/tree-layout.ts b/query-graphs/src/ui/tree-layout.ts
@@ -84,6 +84,7 @@ export function layoutTree(
             label: e.target.data.edgeLabel,
             className: e.target.data.edgeClass,
             style: style,
+            focusable: false,
         } as Edge;
     });
 
@@ -106,6 +107,7 @@ export function layoutTree(
             source: sourceId,
             target: targetId,
             className: "qg-crosslink",
+            focusable: true,
         });
     }