feat: make graph panel changes apply explicitly

The webview now buffers operations, text filters, and layout values
before applying them, while grouped query labels and minimap visuals
were adjusted to make large graphs easier to inspect.

Constraint: Must not introduce new UI dependencies or persistent
layout state
Rejected: Auto-apply with debounce | still couples expensive graph
recomputation to typing and slider drag
Confidence: medium
Scope-risk: moderate
Directive: Keep apply semantics isolated per section; avoid shared
apply handlers across unrelated drafts
Tested: pnpm test; pnpm lint; pnpm type-check; pnpm build
Not-tested: Manual UX pass for every button combination in the webview

Author: fe-dudu

src/webview/GraphCanvas.tsx

@@ -31,12 +31,13 @@ import {
 } from './graphUtils';
 import { useResizablePanels } from './hooks/useResizablePanels';
 import { getLayoutedElements } from './layout';
+import { computeProjectBubbleFrame, computeProjectGridShifts } from './projectLayout';
 import { cx, isDeclareActionNode } from './utils';
 import { vscode } from './vscode';
 
 const defaultFilters: FilterState = {
   relation: {
-    invalidates: true,
+    invalidates: false,
     refetches: false,
     cancels: false,
     resets: false,
@@ -229,6 +230,8 @@ const PROJECT_TOP_DIVIDER_GAP = 42;
 const PROJECT_BAND_GAP = 8;
 const FILE_ACTION_PROJECT_GAP = 48;
 const PROJECT_COLUMN_GAP = 168;
+const MONOREPO_PROJECT_ROW_GAP = 96;
+const MONOREPO_PROJECT_MAX_COLUMNS = 4;
 const DECLARE_ACTION_QUERY_GAP = 56;
 const PROJECT_DIVIDER_TOP_MARGIN = 23;
 const PROJECT_DIVIDER_BOTTOM_MARGIN = 11;
@@ -439,37 +442,30 @@ function buildProjectDividerNodes(
       if (!keepFirstDivider && index === 0) {
         continue;
       }
-
-      const horizontalPadding = 72;
-      const topPadding = 82;
-      const bottomPadding = 52;
-      const bubbleX = range.minX - horizontalPadding;
-      const bubbleY = range.minY - topPadding;
-      const bubbleWidth = Math.max(860, range.maxX - range.minX + horizontalPadding * 2);
-      const bubbleHeight = Math.max(260, range.maxY - range.minY + topPadding + bottomPadding);
+      const bubbleFrame = computeProjectBubbleFrame(range);
 
       dividers.push({
         id: `divider:${index}:${range.label}`,
         type: 'rqvDivider',
         data: {
           label: range.label,
-          width: bubbleWidth,
-          height: bubbleHeight,
+          width: bubbleFrame.width,
+          height: bubbleFrame.height,
           showLabel: true,
           variant: 'bubble',
         },
         position: {
-          x: bubbleX,
-          y: bubbleY,
+          x: bubbleFrame.x,
+          y: bubbleFrame.y,
         },
         selectable: false,
         draggable: false,
         connectable: false,
         deletable: false,
         focusable: false,
         style: {
-          width: bubbleWidth,
-          height: bubbleHeight,
+          width: bubbleFrame.width,
+          height: bubbleFrame.height,
           zIndex: 0,
           pointerEvents: 'none',
         },
@@ -1158,50 +1154,29 @@ function arrangeProjectsHorizontally(nodes: Node[], graph: WebviewPayload['graph
     return nodes;
   }
 
-  const sortedProjects = [...boundsByProject.entries()]
-    .sort((a, b) => a[1].minX - b[1].minX || a[1].minY - b[1].minY || a[0].localeCompare(b[0]))
-    .map(([project]) => project);
-
-  const topBaseline = sortedProjects.reduce((minY, project) => {
-    const bounds = boundsByProject.get(project);
-    if (!bounds) {
-      return minY;
-    }
-    return Math.min(minY, bounds.minY);
-  }, Number.POSITIVE_INFINITY);
-
-  if (!Number.isFinite(topBaseline)) {
-    return nodes;
-  }
-
-  let cursorX = sortedProjects.reduce((minX, project) => {
-    const bounds = boundsByProject.get(project);
-    if (!bounds) {
-      return minX;
-    }
-    return Math.min(minX, bounds.minX);
-  }, Number.POSITIVE_INFINITY);
-
-  if (!Number.isFinite(cursorX)) {
-    return nodes;
-  }
-
   const shiftByNodeId = new Map<string, { x: number; y: number }>();
-  for (const project of sortedProjects) {
-    const bounds = boundsByProject.get(project);
+  const projectShifts = computeProjectGridShifts(
+    [...boundsByProject.entries()].map(([project, bounds]) => ({
+      project,
+      minX: bounds.minX,
+      maxX: bounds.maxX,
+      minY: bounds.minY,
+      maxY: bounds.maxY,
+    })),
+    {
+      columnGap: PROJECT_COLUMN_GAP,
+      rowGap: MONOREPO_PROJECT_ROW_GAP,
+      maxColumns: MONOREPO_PROJECT_MAX_COLUMNS,
+    },
+  );
+  for (const [project, shift] of projectShifts.entries()) {
     const nodeIds = nodeIdsByProject.get(project);
-    if (!bounds || !nodeIds || nodeIds.length === 0) {
+    if (!nodeIds || nodeIds.length === 0) {
       continue;
     }
-
-    const shiftX = cursorX - bounds.minX;
-    const shiftY = topBaseline - bounds.minY;
     for (const nodeId of nodeIds) {
-      shiftByNodeId.set(nodeId, { x: shiftX, y: shiftY });
+      shiftByNodeId.set(nodeId, shift);
     }
-
-    const width = Math.max(0, bounds.maxX - bounds.minX);
-    cursorX += width + PROJECT_COLUMN_GAP;
   }
 
   if (shiftByNodeId.size === 0) {
@@ -2141,14 +2116,16 @@ export function GraphCanvas({ payload }: { payload: WebviewPayload }) {
             nodeColor="var(--rqv-minimap-node)"
             maskColor="var(--rqv-minimap-mask)"
             style={{
-              width: 132,
-              height: 88,
+              width: 198,
+              height: 132,
               background: 'var(--rqv-minimap-bg)',
               border: '1px solid var(--rqv-minimap-border)',
               borderRadius: 10,
               boxShadow: '0 8px 20px var(--rqv-minimap-shadow)',
               marginRight: 10,
               marginBottom: 10,
+              ['--xy-minimap-mask-stroke-color' as string]: 'var(--rqv-minimap-mask-stroke)',
+              ['--xy-minimap-mask-stroke-width' as string]: 2.5,
             }}
           />
           <Background variant={BackgroundVariant.Lines} gap={44} size={0.48} color="var(--rqv-grid-color)" />

src/webview/components/LeftPanel.tsx

@@ -1,6 +1,13 @@
 import { type Dispatch, type ReactElement, type SetStateAction, useEffect, useMemo, useState } from 'react';
 
 import { OPERATION_RELATIONS, RELATION_COLOR, RELATION_LABEL } from '../constants';
+import {
+  applyFilterDraft,
+  buildFilterDraft,
+  hasPendingFilterChanges,
+  hasPendingOperationChanges,
+  hasPendingTextFilterChanges,
+} from '../filterDraft';
 import type { OperationRelation, ScannedFile } from '../model';
 import { cx } from '../utils';
 import type { FilterState } from '../viewTypes';
@@ -151,6 +158,9 @@ export function LeftPanel({
     relatedFiles: false,
   });
   const [collapsedDirectories, setCollapsedDirectories] = useState<Set<string>>(() => new Set());
+  const [draftFilters, setDraftFilters] = useState(() => buildFilterDraft(filters));
+  const [draftVerticalSpacing, setDraftVerticalSpacing] = useState(verticalSpacing);
+  const [draftHorizontalSpacing, setDraftHorizontalSpacing] = useState(horizontalSpacing);
 
   const filteredRelatedFiles = useMemo(() => {
     const unique = new Map<string, ScannedFile>();
@@ -184,8 +194,24 @@ export function LeftPanel({
     });
   }, [directoryPaths]);
 
+  useEffect(() => {
+    setDraftFilters({
+      relation: { ...filters.relation },
+      fileQuery: filters.fileQuery,
+      search: filters.search,
+    });
+  }, [filters.relation, filters.fileQuery, filters.search]);
+
+  useEffect(() => {
+    setDraftVerticalSpacing(verticalSpacing);
+  }, [verticalSpacing]);
+
+  useEffect(() => {
+    setDraftHorizontalSpacing(horizontalSpacing);
+  }, [horizontalSpacing]);
+
   const toggleRelation = (relation: OperationRelation) => {
-    setFilters((prev) => ({
+    setDraftFilters((prev) => ({
       ...prev,
       relation: {
         ...prev.relation,
@@ -213,6 +239,29 @@ export function LeftPanel({
     });
   };
 
+  const applyDraftFilters = () => {
+    if (!hasPendingFilterChanges(filters, draftFilters)) {
+      return;
+    }
+
+    setFilters((previous) => applyFilterDraft(previous, draftFilters));
+  };
+
+  const hasPendingOperations = hasPendingOperationChanges(filters, draftFilters);
+  const hasPendingTextFilters = hasPendingTextFilterChanges(filters, draftFilters);
+
+  const hasPendingLayoutChanges =
+    draftVerticalSpacing !== verticalSpacing || draftHorizontalSpacing !== horizontalSpacing;
+
+  const applyDraftLayout = () => {
+    if (!hasPendingLayoutChanges) {
+      return;
+    }
+
+    onVerticalSpacingChange(draftVerticalSpacing);
+    onHorizontalSpacingChange(draftHorizontalSpacing);
+  };
+
   const sectionHeader = (title: string, section: PanelSectionKey, extra?: string) => {
     const collapsed = collapsedSections[section];
 
@@ -369,21 +418,42 @@ export function LeftPanel({
                 key={relation}
                 className="my-1 flex items-center gap-2 rounded px-1 py-0.5 text-xs hover:bg-zinc-200/70 dark:hover:bg-zinc-800/70"
               >
-                <input type="checkbox" checked={filters.relation[relation]} onChange={() => toggleRelation(relation)} />
+                <input
+                  type="checkbox"
+                  checked={draftFilters.relation[relation]}
+                  onChange={() => toggleRelation(relation)}
+                />
                 <span
                   aria-hidden
                   className="h-[3px] w-4 shrink-0 rounded-full"
                   style={{ backgroundColor: RELATION_COLOR[relation] }}
                 />
                 <span
                   className={
-                    filters.relation[relation] ? 'text-zinc-800 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-400'
+                    draftFilters.relation[relation]
+                      ? 'text-zinc-800 dark:text-zinc-100'
+                      : 'text-zinc-500 dark:text-zinc-400'
                   }
                 >
                   {RELATION_LABEL[relation]}
                 </span>
               </label>
-            ))
+            )).concat(
+              <button
+                key="apply-operations"
+                type="button"
+                className={cx(
+                  'mt-2 w-full rounded-[7px] border px-2 py-[7px] text-[12px] font-medium transition-colors',
+                  hasPendingOperations
+                    ? 'border-zinc-500 bg-zinc-900 text-zinc-100 hover:bg-zinc-800 dark:border-zinc-300 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200'
+                    : 'cursor-not-allowed border-zinc-300 bg-zinc-200/80 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-500',
+                )}
+                onClick={applyDraftFilters}
+                disabled={!hasPendingOperations}
+              >
+                Apply Operations
+              </button>,
+            )
           : null}
       </section>
 
@@ -393,40 +463,65 @@ export function LeftPanel({
           <>
             <input
               className="mb-2 w-full rounded-[7px] border border-zinc-300 bg-zinc-100 px-2 py-[7px] text-[12px] text-zinc-700 placeholder:text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:placeholder:text-zinc-500"
-              value={filters.fileQuery}
+              value={draftFilters.fileQuery}
               placeholder="Filter files"
-              onChange={(event) => setFilters((prev) => ({ ...prev, fileQuery: event.target.value }))}
+              onChange={(event) => setDraftFilters((previous) => ({ ...previous, fileQuery: event.target.value }))}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  applyDraftFilters();
+                }
+              }}
             />
             <input
               className="mb-2 w-full rounded-[7px] border border-zinc-300 bg-zinc-100 px-2 py-[7px] text-[12px] text-zinc-700 placeholder:text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:placeholder:text-zinc-500"
-              value={filters.search}
+              value={draftFilters.search}
               placeholder="Search labels"
-              onChange={(event) => setFilters((prev) => ({ ...prev, search: event.target.value }))}
+              onChange={(event) => setDraftFilters((previous) => ({ ...previous, search: event.target.value }))}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  applyDraftFilters();
+                }
+              }}
             />
+            <button
+              type="button"
+              className={cx(
+                'w-full rounded-[7px] border px-2 py-[7px] text-[12px] font-medium transition-colors',
+                hasPendingTextFilters
+                  ? 'border-zinc-500 bg-zinc-900 text-zinc-100 hover:bg-zinc-800 dark:border-zinc-300 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200'
+                  : 'cursor-not-allowed border-zinc-300 bg-zinc-200/80 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-500',
+              )}
+              onClick={applyDraftFilters}
+              disabled={!hasPendingTextFilters}
+            >
+              Apply Filters
+            </button>
           </>
         ) : null}
       </section>
 
       <section className="mb-4 shrink-0 border-b border-zinc-300/75 pb-[10px] dark:border-zinc-700/70">
         {sectionHeader('Layout', 'layout')}
         {!collapsedSections.layout ? (
-          <div className="space-y-2 rounded-[7px] border border-zinc-300 px-2 py-1.5 dark:border-zinc-700">
+          <div className="space-y-2 px-2 py-1.5">
             <div>
               <label
                 className="mb-0.5 flex items-center justify-between text-[11px] text-zinc-600 dark:text-zinc-300"
                 htmlFor="rqv-vertical-spacing"
               >
                 <span>Vertical Spacing</span>
-                <span className="font-medium tabular-nums text-zinc-800 dark:text-zinc-100">{verticalSpacing}</span>
+                <span className="font-medium tabular-nums text-zinc-800 dark:text-zinc-100">
+                  {draftVerticalSpacing}
+                </span>
               </label>
               <input
                 id="rqv-vertical-spacing"
                 type="range"
                 min={0}
                 max={300}
                 step={2}
-                value={verticalSpacing}
-                onChange={(event) => onVerticalSpacingChange(Number(event.target.value))}
+                value={draftVerticalSpacing}
+                onChange={(event) => setDraftVerticalSpacing(Number(event.target.value))}
                 className="h-1.5 w-full cursor-pointer accent-zinc-700 dark:accent-zinc-300"
               />
             </div>
@@ -437,19 +532,35 @@ export function LeftPanel({
                 htmlFor="rqv-horizontal-spacing"
               >
                 <span>Horizontal Spacing</span>
-                <span className="font-medium tabular-nums text-zinc-800 dark:text-zinc-100">{horizontalSpacing}</span>
+                <span className="font-medium tabular-nums text-zinc-800 dark:text-zinc-100">
+                  {draftHorizontalSpacing}
+                </span>
               </label>
               <input
                 id="rqv-horizontal-spacing"
                 type="range"
                 min={100}
                 max={3000}
                 step={25}
-                value={horizontalSpacing}
-                onChange={(event) => onHorizontalSpacingChange(Number(event.target.value))}
+                value={draftHorizontalSpacing}
+                onChange={(event) => setDraftHorizontalSpacing(Number(event.target.value))}
                 className="h-1.5 w-full cursor-pointer accent-zinc-700 dark:accent-zinc-300"
               />
             </div>
+
+            <button
+              type="button"
+              className={cx(
+                'w-full rounded-[7px] border px-2 py-[7px] text-[12px] font-medium transition-colors',
+                hasPendingLayoutChanges
+                  ? 'border-zinc-500 bg-zinc-900 text-zinc-100 hover:bg-zinc-800 dark:border-zinc-300 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200'
+                  : 'cursor-not-allowed border-zinc-300 bg-zinc-200/80 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-500',
+              )}
+              onClick={applyDraftLayout}
+              disabled={!hasPendingLayoutChanges}
+            >
+              Apply Layout
+            </button>
           </div>
         ) : null}
       </section>