feat: v2 - minimap in separate window

src/routes/v2/pages/Editor/EditorV2.tsx

@@ -32,6 +32,7 @@ import { DriverPermissionGate } from "./components/DriverPermissionGate";
 import { EditorMenuBar } from "./components/EditorMenuBar/EditorMenuBar";
 import { EmptyEditorState } from "./components/EmptyEditorState";
 import { FlowCanvas } from "./components/FlowCanvas/FlowCanvas";
+import { useCanvasControlsWindow } from "./hooks/useCanvasControlsWindow";
 import { useComponentLibraryWindow } from "./hooks/useComponentLibraryWindow";
 import { useEditorEscapeShortcut } from "./hooks/useEditorEscapeShortcut";
 import { useHistoryWindow } from "./hooks/useHistoryWindow";
@@ -81,6 +82,7 @@ const PipelineEditor = withSuspenseWrapper(
     usePipelineDetailsWindow();
     usePipelineTreeWindow();
     useHistoryWindow();
+    useCanvasControlsWindow();
     useRecentRunsWindow();
     useRunsAndSubmissionWindow();
     useUndoRedoKeyboard();

src/routes/v2/pages/Editor/components/CanvasControls/CanvasControlsContent.tsx

@@ -0,0 +1,40 @@
+import { Controls, MiniMap } from "@xyflow/react";
+
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { useAnalytics } from "@/providers/AnalyticsProvider";
+
+export function CanvasControlsContent() {
+  const { track } = useAnalytics();
+
+  return (
+    <BlockStack
+      fill
+      className="relative bg-white [--xy-minimap-mask-background-color-props:#f0f0f0] [--xy-minimap-node-background-color-props:grey]"
+      data-testid="canvas-controls-window"
+    >
+      <InlineStack fill blockAlign="start" className="relative">
+        <MiniMap
+          pannable
+          zoomable
+          onClick={() => track("v2.pipeline_canvas.minimap.click")}
+          onNodeClick={() => track("v2.pipeline_canvas.minimap.node.click")}
+          className="flex-1 !relative !inset-auto !m-0 !w-full !h-full [&_.react-flow__minimap-svg]:!w-full [&_.react-flow__minimap-svg]:!h-full [&_.react-flow__minimap-svg]:!block"
+        />
+        <Controls
+          showZoom
+          showFitView
+          showInteractive
+          onZoomIn={() => track("v2.pipeline_canvas.controls.zoom_in.click")}
+          onZoomOut={() => track("v2.pipeline_canvas.controls.zoom_out.click")}
+          onFitView={() => track("v2.pipeline_canvas.controls.fit_view.click")}
+          onInteractiveChange={(interactive) =>
+            track("v2.pipeline_canvas.controls.interactive.toggle", {
+              interactive,
+            })
+          }
+          className="h-full !relative !inset-auto !m-0 !shadow-none flex justify-around"
+        />
+      </InlineStack>
+    </BlockStack>
+  );
+}

src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.tsx

@@ -1,7 +1,5 @@
 import {
   Background,
-  Controls,
-  MiniMap,
   ReactFlow,
   type ReactFlowInstance,
   useConnection,
@@ -12,7 +10,6 @@ import { useState } from "react";
 import { BlockStack } from "@/components/ui/layout";
 import { cn } from "@/lib/utils";
 import type { ComponentSpec } from "@/models/componentSpec";
-import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { useAutoLayout } from "@/routes/v2/pages/Editor/hooks/useAutoLayout";
 import { SubgraphBreadcrumbs } from "@/routes/v2/shared/components/SubgraphBreadcrumbs";
 import { FLOW_CANVAS_DEFAULT_PROPS } from "@/routes/v2/shared/flowCanvasDefaults";
@@ -44,7 +41,6 @@ export const FlowCanvas = observer(function FlowCanvas({
   spec,
   className,
 }: FlowCanvasProps) {
-  const { track } = useAnalytics();
   const registry = useNodeRegistry();
   const nodeTypes = registry.getNodeTypes();
   const edgeTypes = registry.getEdgeTypes();
@@ -122,24 +118,6 @@ export const FlowCanvas = observer(function FlowCanvas({
       >
         <FloatingSelectionToolbar spec={spec} />
         <Background gap={10} className="bg-slate-50!" />
-        <Controls
-          position="bottom-right"
-          onZoomIn={() => track("v2.pipeline_canvas.controls.zoom_in.click")}
-          onZoomOut={() => track("v2.pipeline_canvas.controls.zoom_out.click")}
-          onFitView={() => track("v2.pipeline_canvas.controls.fit_view.click")}
-          onInteractiveChange={(interactive) =>
-            track("v2.pipeline_canvas.controls.interactive.toggle", {
-              interactive,
-            })
-          }
-        />
-        <MiniMap
-          position="bottom-left"
-          pannable
-          zoomable
-          onClick={() => track("v2.pipeline_canvas.minimap.click")}
-          onNodeClick={() => track("v2.pipeline_canvas.minimap.node.click")}
-        />
       </ReactFlow>
     </BlockStack>
   );

src/routes/v2/pages/Editor/hooks/useCanvasControlsWindow.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+import { CanvasControlsContent } from "@/routes/v2/pages/Editor/components/CanvasControls/CanvasControlsContent";
+import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
+
+const CANVAS_CONTROLS_WINDOW_ID = "canvas-controls";
+
+export function useCanvasControlsWindow() {
+  const { windows } = useSharedStores();
+  useEffect(() => {
+    if (!windows.getWindowById(CANVAS_CONTROLS_WINDOW_ID)) {
+      windows.openWindow(<CanvasControlsContent />, {
+        id: CANVAS_CONTROLS_WINDOW_ID,
+        title: "Canvas Controls",
+        position: { x: 320, y: window.innerHeight - 109 },
+        size: { width: 226, height: 109 },
+        minSize: { width: 226, height: 109 },
+        disabledActions: ["close", "maximize"],
+        persisted: true,
+      });
+    }
+  }, [windows]);
+}

src/routes/v2/shared/windows/viewPresets.ts

@@ -20,6 +20,7 @@ export const DEFAULT_DOCK_AREAS: PresetDockAreas = {
     "history",
     "debug-panel",
     "recent-runs",
+    "canvas-controls",
   ],
   right: ["pipeline-details", "context-panel"],
 };
@@ -46,6 +47,7 @@ export const DEFAULT_VIEW_PRESET: ViewPreset = {
     "recent-runs",
     "component-library",
     "pipeline-details",
+    "canvas-controls",
   ]),
   dockAreas: DEFAULT_DOCK_AREAS,
 };
@@ -64,6 +66,7 @@ export const VIEW_PRESETS: ViewPreset[] = [
       "pipeline-details",
       "debug-panel",
       "recent-runs",
+      "canvas-controls",
     ]),
     dockAreas: DEFAULT_DOCK_AREAS,
   },