@marimo-team/islands 0.24.1-dev95 → 0.24.1-dev96

package/src/plugins/impl/vega/__tests__/make-selectable.test.ts

@@ -2,12 +2,24 @@
 
 // @ts-expect-error - vega-parser is not typed
 import { parse } from "vega-parser";
-import { describe, expect, it } from "vitest";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import { invariant } from "@/utils/invariant";
 import { makeSelectable } from "../make-selectable";
-import { getSelectionParamNames } from "../params";
+import { getPanZoomModifier, getSelectionParamNames } from "../params";
 import type { VegaLiteSpec } from "../types";
 
+// Pin the platform so the pan/zoom modifier (and therefore the snapshots
+// below) is deterministic regardless of the host running the tests. We use a
+// non-Mac platform, which resolves the modifier to `ctrlKey` — this matches
+// the Linux/Windows environment from issue #3812.
+beforeAll(() => {
+  vi.spyOn(window.navigator, "platform", "get").mockReturnValue("Linux x86_64");
+});
+
+afterAll(() => {
+  vi.restoreAllMocks();
+});
+
 describe("makeSelectable", () => {
   it("should return correctly if mark is not string", () => {
     const spec = {
@@ -1268,3 +1280,67 @@ describe("makeSelectable", () => {
     expect(getSelectionParamNames(newSpec)).toEqual(["my_selection"]);
   });
 });
+
+describe("pan/zoom modifier key (issue #3812)", () => {
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  function mockPlatform(platform: string) {
+    // jsdom's navigator has no `userAgentData`, so the detection helper falls
+    // back to `navigator.platform`, which is what we override here.
+    vi.spyOn(window.navigator, "platform", "get").mockReturnValue(platform);
+  }
+
+  it("uses metaKey (Command) on macOS", () => {
+    mockPlatform("MacIntel");
+    expect(getPanZoomModifier()).toBe("metaKey");
+
+    const spec = { mark: "point" } as VegaLiteSpec;
+    const newSpec = makeSelectable(spec, {});
+    const panZoom = newSpec.params?.find((p) => p.name === "pan_zoom");
+    invariant(panZoom && "select" in panZoom, "expected pan_zoom param");
+    const select = panZoom.select as { on: string; zoom: string };
+    expect(select.on).toContain("event.metaKey");
+    expect(select.on).not.toContain("event.ctrlKey");
+    expect(select.zoom).toBe("wheel![event.metaKey]");
+  });
+
+  it.each(["Linux x86_64", "Win32"])(
+    "uses ctrlKey on non-macOS platform %s",
+    (platform) => {
+      mockPlatform(platform);
+      expect(getPanZoomModifier()).toBe("ctrlKey");
+
+      const spec = { mark: "point" } as VegaLiteSpec;
+      const newSpec = makeSelectable(spec, {});
+      const panZoom = newSpec.params?.find((p) => p.name === "pan_zoom");
+      invariant(panZoom && "select" in panZoom, "expected pan_zoom param");
+      const select = panZoom.select as { on: string; zoom: string };
+      // Must not use metaKey, which maps to the Super/Windows key here and is
+      // captured by the OS/desktop environment before the chart sees it.
+      expect(select.on).toContain("event.ctrlKey");
+      expect(select.on).not.toContain("event.metaKey");
+      expect(select.zoom).toBe("wheel![event.ctrlKey]");
+    },
+  );
+
+  it("keeps point/interval selection gated on the same modifier as pan/zoom", () => {
+    mockPlatform("Linux x86_64");
+    const spec = { mark: "bar" } as VegaLiteSpec;
+    const newSpec = makeSelectable(spec, {});
+    const mod = getPanZoomModifier();
+
+    for (const param of newSpec.params ?? []) {
+      if (!("select" in param) || typeof param.select !== "object") {
+        continue;
+      }
+      const select = param.select as { on?: string; translate?: string };
+      // The selection gating and pan/zoom must agree on the modifier, otherwise
+      // one gesture triggers both.
+      if (typeof select.on === "string" && select.on.includes("event.")) {
+        expect(select.on).toContain(`event.${mod}`);
+      }
+    }
+  });
+});

package/src/plugins/impl/vega/params.ts

@@ -2,6 +2,7 @@
 
 import type { TopLevelSpec } from "vega-lite";
 import type { NonNormalizedSpec } from "vega-lite/types_unstable/spec/index.js";
+import { isPlatformMac } from "@/core/hotkeys/shortcuts";
 import { uniq } from "@/utils/arrays";
 import { Marks } from "./marks";
 import {
@@ -51,6 +52,21 @@ export const ParamNames = {
   },
 };
 
+/**
+ * The keyboard modifier used to gate pan/zoom (and to exclude it from
+ * point/interval selection).
+ *
+ * On macOS we use the Command key (`metaKey`), which is conflict-free. On other
+ * platforms `metaKey` maps to the Super/Windows key, which GNOME/Wayland and
+ * Windows reserve for system actions (workspace switching, the activities
+ * overview, etc.), so pan/zoom never reaches the chart. We fall back to the
+ * Control key there, matching the common convention for chart pan/zoom on
+ * Linux and Windows. See https://github.com/marimo-team/marimo/issues/3812.
+ */
+export function getPanZoomModifier(): "metaKey" | "ctrlKey" {
+  return isPlatformMac() ? "metaKey" : "ctrlKey";
+}
+
 export const Params = {
   highlight() {
     return {
@@ -62,6 +78,7 @@ export const Params = {
     spec: VegaLiteUnitSpec,
     layerNum: number | undefined,
   ): SelectionParameter<"interval"> {
+    const mod = getPanZoomModifier();
     return {
       name: ParamNames.interval(layerNum),
       select: {
@@ -73,10 +90,9 @@ export const Params = {
           stroke: "#669EFF",
           strokeOpacity: 0.4,
         },
-        // So this does not conflict with pan/zoom via metaKey
-        on: "[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",
-        translate:
-          "[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",
+        // So this does not conflict with pan/zoom, which uses the same modifier
+        on: `[mousedown[!event.${mod}], mouseup] > mousemove[!event.${mod}]`,
+        translate: `[mousedown[!event.${mod}], mouseup] > mousemove[!event.${mod}]`,
       },
     };
   },
@@ -89,7 +105,7 @@ export const Params = {
       select: {
         type: "point",
         encodings: getEncodingAxisForMark(spec),
-        on: "click[!event.metaKey]",
+        on: `click[!event.${getPanZoomModifier()}]`,
       },
     };
   },
@@ -103,7 +119,7 @@ export const Params = {
       name: ParamNames.binColoring(layerNum),
       select: {
         type: "point",
-        on: "click[!event.metaKey]",
+        on: `click[!event.${getPanZoomModifier()}]`,
       },
     };
   },
@@ -118,15 +134,15 @@ export const Params = {
     };
   },
   panZoom(): SelectionParameter<"interval"> {
+    const mod = getPanZoomModifier();
     return {
       name: ParamNames.PAN_ZOOM,
       bind: "scales",
       select: {
         type: "interval",
-        on: "[mousedown[event.metaKey], window:mouseup] > window:mousemove!",
-        translate:
-          "[mousedown[event.metaKey], window:mouseup] > window:mousemove!",
-        zoom: "wheel![event.metaKey]",
+        on: `[mousedown[event.${mod}], window:mouseup] > window:mousemove!`,
+        translate: `[mousedown[event.${mod}], window:mouseup] > window:mousemove!`,
+        zoom: `wheel![event.${mod}]`,
       },
     };
   },

package/src/plugins/impl/vega/vega-component.tsx

@@ -13,6 +13,7 @@ import { tooltipHandler } from "@/components/charts/tooltip";
 import type { SignalListener } from "@/components/charts/types";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Tooltip } from "@/components/ui/tooltip";
+import { isPlatformMac } from "@/core/hotkeys/shortcuts";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useTheme } from "@/theme/useTheme";
@@ -229,9 +230,13 @@ const LoadedVegaComponent = ({
     }
 
     if (ParamNames.hasPanZoom(names)) {
+      // On macOS pan/zoom is gated behind the Command key; elsewhere the
+      // Super/Windows key is reserved by the OS, so we use Control instead.
+      // Keep this in sync with `getPanZoomModifier` in params.ts.
+      const modifierKey = isPlatformMac() ? "⌘" : "ctrl";
       hints.push(
-        ["Pan", "hold the meta key and drag"],
-        ["Zoom", "hold the meta key and scroll"],
+        ["Pan", `hold the ${modifierKey} key and drag`],
+        ["Zoom", `hold the ${modifierKey} key and scroll`],
       );
     }