Flash only the cursor's field and add a persistent current highlight

The cursor reveal flashed every node on the path to the cursor, which in a deep
tree lit up a whole column at once and diluted the signal of where the cursor
actually landed. Flash only the field the cursor lands on; ancestors still
auto-expand but no longer flash.

Add a persistent highlight (a faint tint and a left accent bar) on the field the
cursor sits in, so the current field is readable at any moment rather than only
at the instant of a move. It is kept visually distinct from the checked,
in-document state, which only recolors the field name, and applies to
inline-fragment rows too.

Author: trevor-scheer

packages/graphiql-plugin-query-builder/src/components/field-row.tsx

@@ -13,6 +13,8 @@ type FieldRowProps = {
   expanded: boolean;
   /** Briefly highlight the row when it comes into view via cursor tracking. */
   flash?: boolean;
+  /** Persistent highlight while the editor cursor sits on this field. */
+  current?: boolean;
   argValues?: Record<string, ArgValue>;
   /**
    * Map of arg name → variable name for args that have been promoted to
@@ -38,6 +40,7 @@ export const FieldRow: FC<FieldRowProps> = ({
   hasChildren,
   expanded,
   flash = false,
+  current = false,
   argValues = {},
   argVariables = {},
   onToggle,
@@ -56,7 +59,9 @@ export const FieldRow: FC<FieldRowProps> = ({
 
   return (
     <div
-      className={`graphiql-qb-field-row${flash ? ' graphiql-qb-flash' : ''}`}
+      className={`graphiql-qb-field-row${flash ? ' graphiql-qb-flash' : ''}${
+        current ? ' graphiql-qb-current' : ''
+      }`}
       style={{ paddingLeft: indent }}
       data-testid="field-row"
       data-selected={selected ? 'true' : 'false'}

packages/graphiql-plugin-query-builder/src/components/field-tree-node.tsx

@@ -50,7 +50,11 @@ export const FieldTreeNode: FC<FieldTreeNodeProps> = ({ field, path }) => {
   const selected = isFieldSelected(doc, fullPath, operationName);
   const hasChildren = isObject || isAbstract;
 
-  const { flash, nodeRef } = useCursorReveal(fullPath, cursorPath, setExpanded);
+  const { flash, current, nodeRef } = useCursorReveal(
+    fullPath,
+    cursorPath,
+    setExpanded,
+  );
 
   function handleExpand() {
     setExpanded(prev => !prev);
@@ -65,6 +69,7 @@ export const FieldTreeNode: FC<FieldTreeNodeProps> = ({ field, path }) => {
         hasChildren={hasChildren}
         expanded={expanded}
         flash={flash}
+        current={current}
         argValues={argValues}
         argVariables={argVariables}
         onToggle={onToggle}

packages/graphiql-plugin-query-builder/src/components/type-condition-selector.tsx

@@ -186,7 +186,7 @@ const TypeConditionEntry: FC<TypeConditionEntryProps> = ({
     useFieldTreeContext();
   const [expanded, setExpanded] = useState(false);
   const fragmentPath = [...fieldPath, inlineFragmentSegment(typeName)];
-  const { flash, nodeRef } = useCursorReveal(
+  const { flash, current, nodeRef } = useCursorReveal(
     fragmentPath,
     cursorPath,
     setExpanded,
@@ -204,7 +204,7 @@ const TypeConditionEntry: FC<TypeConditionEntryProps> = ({
     <div
       className={`graphiql-qb-inline-fragment${
         flash ? ' graphiql-qb-flash' : ''
-      }`}
+      }${current ? ' graphiql-qb-current' : ''}`}
       ref={nodeRef}
     >
       <div

packages/graphiql-plugin-query-builder/src/components/use-cursor-reveal.ts

@@ -2,9 +2,12 @@ import { useEffect, useRef, useState } from 'react';
 
 /**
  * Reveals a tree node as the editor cursor moves onto it or a descendant:
- * auto-expands it when it's an ancestor of the cursor's field, flashes it (and
- * its ancestors), and scrolls it into view when the cursor lands exactly on it.
- * Shared by field rows and inline-fragment rows so both react to the cursor.
+ * auto-expands it when it's an ancestor of the cursor's field, and (only when
+ * the cursor lands exactly on it) flashes it, scrolls it into view, and marks it
+ * as the current node so the row can show a persistent highlight. Ancestors
+ * expand but neither flash nor highlight, to keep the "you are here" signal on
+ * the one field the cursor sits in. Shared by field rows and inline-fragment
+ * rows so both react to the cursor.
  */
 export function useCursorReveal(
   fullPath: string[],
@@ -35,19 +38,16 @@ export function useCursorReveal(
   // hands us a fresh array on every cursor event, so re-placing the cursor on
   // the same field re-flashes it (handy for getting your bearings).
   useEffect(() => {
-    if (!onCursorPath) {
+    if (!isTarget) {
       return;
     }
     setFlash(true);
-    // The leaf the cursor landed on is scrolled into view; ancestors only flash.
     // Center it vertically so it doesn't land under the sticky operation header
     // when scrolling up.
-    if (isTarget) {
-      nodeRef.current?.scrollIntoView({ block: 'center' });
-    }
+    nodeRef.current?.scrollIntoView({ block: 'center' });
     const timer = setTimeout(() => setFlash(false), 700);
     return () => clearTimeout(timer);
-  }, [cursorPath, onCursorPath, isTarget]);
+  }, [cursorPath, isTarget]);
 
-  return { flash, nodeRef };
+  return { flash, current: isTarget, nodeRef };
 }

packages/graphiql-plugin-query-builder/src/index.css

@@ -130,8 +130,8 @@
   padding: 1px 0;
 }
 
-/* Briefly highlight a row (and its ancestors) when the editor cursor brings it
-   into view, so it's obvious which field just expanded. */
+/* Briefly highlight the field the editor cursor lands on, so it's obvious where
+   the cursor moved to once the tree expands down to it. */
 @keyframes graphiql-qb-flash {
   from {
     background-color: oklch(var(--accent-purple) / 0.22);
@@ -150,6 +150,16 @@
   }
 }
 
+/* Persistent "you are here" highlight while the cursor sits on this field: a
+   left accent bar and a faint tint. Kept visually distinct from the checked /
+   in-document state, which only recolors the field name. */
+.graphiql-qb-field-row.graphiql-qb-current > .graphiql-qb-field-header,
+.graphiql-qb-inline-fragment.graphiql-qb-current
+  > .graphiql-qb-inline-fragment-header {
+  background-color: oklch(var(--accent-purple) / 0.08);
+  box-shadow: inset 2px 0 0 oklch(var(--accent-purple));
+}
+
 .graphiql-qb-field-header {
   display: flex;
   align-items: center;