@marimo-team/frontend 0.22.1-dev34 → 0.22.1-dev39

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -58,7 +58,7 @@ describe("isCustomMarimoElement", () => {
 });
 
 describe("connectedCallback - light DOM nesting detection", () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   let createRootSpy: any;
   const mockRoot = {
     render: vi.fn(),

package/src/plugins/core/registerReactComponent.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-/* eslint-disable unicorn/prefer-spread */
+/* oxlint-disable unicorn/prefer-spread */
 /**
  * WebComponent Factory for React Components
  *
@@ -88,7 +88,7 @@ interface PluginSlotProps<T> {
 
 /* Handles synchronization of value on behalf of the component */
 
-// eslint-disable-next-line react/function-component-definition
+// oxlint-disable-next-line react/function-component-definition
 function PluginSlotInternal<T>(
   { hostElement, plugin, children, getInitialValue }: PluginSlotProps<T>,
   ref: React.Ref<PluginSlotHandle>,
@@ -231,7 +231,7 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
@@ -265,7 +265,7 @@ function PluginSlotInternal<T>(
 }
 
 const PluginSlot: React.ForwardRefExoticComponent<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   PluginSlotProps<any> & React.RefAttributes<PluginSlotHandle>
 > = React.forwardRef(PluginSlotInternal);
 

package/src/plugins/core/rpc.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { ZodType } from "zod";
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -205,7 +205,7 @@ interface Data<T> {
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type DataTableFunctions = {
   download_as: DownloadAsArgs;
   get_column_summaries: <T>(opts: {}) => Promise<ColumnSummaries<T>>;

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -62,7 +62,7 @@ interface FileInfo {
   is_directory: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   list_directory: (req: { path: string }) => Promise<{
     files: FileInfo[];

package/src/plugins/impl/FormPlugin.tsx

@@ -44,7 +44,7 @@ interface Data {
  * is clicked, this plugin assumes the value of the associated plugin.
  */
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type Functions = {
   validate: (req: { value?: unknown }) => Promise<string | undefined | null>;
 };

package/src/plugins/impl/__tests__/MatrixPlugin.test.tsx

@@ -52,7 +52,7 @@ beforeEach(() => {
 
   // jsdom's PointerEvent doesn't properly inherit MouseEvent properties
   // like clientX. Polyfill it so fireEvent.pointerDown/Move/Up work.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (globalThis as any).PointerEvent = class PointerEvent extends MouseEvent {
     readonly pointerId: number;
     constructor(type: string, init: PointerEventInit = {}) {

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";

package/src/plugins/impl/anywidget/model.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyModel } from "@anywidget/types";
 import { debounce } from "lodash-es";

package/src/plugins/impl/anywidget/types.ts

@@ -2,7 +2,7 @@
 import type { Base64String } from "@/utils/json/base64";
 import type { TypedString } from "@/utils/typed";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type EventHandler = (...args: any[]) => void;
 
 /**
@@ -13,7 +13,7 @@ export type WidgetModelId = TypedString<"WidgetModelId">;
 /**
  * AnyWidget model state with buffers.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type ModelState = Record<string | number, any>;
 
 /**

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
 import { asRemoteURL } from "@/core/runtime/config";

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -13,7 +13,7 @@ const LazyChatbot = React.lazy(() =>
   import("./chat-ui").then((m) => ({ default: m.Chatbot })),
 );
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 export type PluginFunctions = {
   get_chat_history: (req: {}) => Promise<{ messages: UIMessage[] }>;
   delete_chat_history: (req: {}) => Promise<null>;

package/src/plugins/impl/chat/chat-ui.tsx

@@ -469,7 +469,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           resetInput();
         }}
         ref={formRef}
-        // biome-ignore lint/a11y/useSemanticElements: inert is used to disable the entire form
+        // oxlint-ignore-next-line -- inert is used to disable the entire form
         inert={props.disabled || undefined}
         className={cn(
           "flex w-full border-t border-(--slate-6) px-2 py-1 items-center",

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -227,7 +227,7 @@ export const GlideDataEditor = <T,>({
 
     // Force re-render to update the total rows
     rerender();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [data.length]);
 
   const getCellContent = useCallback(

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 import * as cql from "compassql/build/src";
 import { createStore, Provider, useAtomValue } from "jotai";
 import { ListFilterIcon } from "lucide-react";
@@ -268,7 +268,7 @@ const HorizontalCarouselItem = ({
   );
 };
 // Make the plot responsive
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeResponsive(spec: any) {
   // NOTE: for row/column, this applies to the inner plot
   // so we tend to overflow due to the legends,

package/src/plugins/impl/data-explorer/components/query-form.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 
 import { ExpandedType } from "compassql/build/src/query/expandedtype";
 import { PrimitiveType, type Schema } from "compassql/build/src/schema";

package/src/plugins/impl/data-explorer/functions/function.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 import type { FieldQuery } from "compassql/build/src/query/encoding";
 import { type FieldFunction, isAggregateOp, type TimeUnitOp } from "./types";
 

package/src/plugins/impl/data-explorer/queries/types.ts

@@ -28,7 +28,7 @@ export interface Result {
   limit: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
+// oxlint-disable-next-line typescript/no-explicit-any, typescript/no-redundant-type-constituents
 export type TopLevelFacetedUnitSpec = TopLevel<FacetedUnitSpec<any, any>> & {
   data: NamedData;
 };

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -54,7 +54,7 @@ interface Data {
   lazy: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   get_dataframe: (req: {}) => Promise<{
     url: string;

package/src/plugins/impl/data-frames/forms/renderers.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import React, { useEffect } from "react";
 import {

package/src/plugins/impl/data-frames/utils/operators.ts

@@ -194,7 +194,7 @@ export function isConditionValueValid(operator: string, value: unknown) {
   return possibleSchemas.some((schema) => schema.safeParse(value).success);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const safeGet = (obj: any, key: string): [z.ZodType] | [] => {
   if (obj[key]) {
     return obj[key];

package/src/plugins/impl/matplotlib/MatplotlibPlugin.tsx

@@ -57,7 +57,7 @@ const MatplotlibComponent = (props: MatplotlibState) => {
       controller.abort();
       instance.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // No dependency array: intentionally syncs all props into the imperative

package/src/plugins/impl/mpl-interactive/MplInteractivePlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import { useCallback, useEffect, useRef } from "react";
 import { z } from "zod";

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { z } from "zod";
@@ -74,7 +74,7 @@ interface PanelData {
 
 type T = Record<string, unknown>;
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   send_to_widget: <T>(req: {
     message?: unknown;

package/src/plugins/impl/plotly/Plot.tsx

@@ -4,7 +4,7 @@ import type * as PlotlyTypes from "plotly.js";
 // Import the pre-built dist bundle, not the source entry point.
 // The source entry point requires Node.js polyfills (e.g. `buffer/`)
 // that are unavailable in the browser/bundler environment.
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// oxlint-disable-next-line typescript/ban-ts-comment
 // @ts-expect-error — no type declarations for dist path, we use PlotlyTypes above
 import Plotly from "plotly.js/dist/plotly";
 import { useEffect, useRef } from "react";
@@ -107,7 +107,7 @@ export const Plot = (props: PlotProps) => {
 
       const plotlyEl = el as unknown as PlotlyElement;
 
-      // eslint-disable-next-line @typescript-eslint/ban-types -- Plotly's event API uses generic function references
+      // oxlint-disable-next-line typescript/ban-types -- Plotly's event API uses generic function references
       const attached: {
         plotlyName: string;
         handler: (...args: never[]) => void;
@@ -131,7 +131,7 @@ export const Plot = (props: PlotProps) => {
         }
       };
       // Re-sync whenever any event handler prop changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
     },
     EVENT_NAMES.map((name) => props[propName(name)]),
   );

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -14,11 +14,16 @@ import useEvent from "react-use-event-hook";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
-import { Objects } from "@/utils/objects";
 import {
-  extractClickSelection,
   extractIndices,
   extractPoints,
+  extractSunburstPoints,
+  extractTreemapPoints,
+  hasPureLineTrace,
+  lineSelectionButtons,
+  type ModeBarButton,
+  mergeModeBarButtonsToAdd,
+  shouldHandleClickSelection,
 } from "./selection";
 import { usePlotlyLayout } from "./usePlotlyLayout";
 
@@ -35,6 +40,10 @@ type T =
         x?: number[];
         y?: number[];
       };
+      lasso?: {
+        x?: unknown[];
+        y?: unknown[];
+      };
       // These are kept in the state to persist selections across re-renders
       // on the frontend, but likely not used in the backend.
       selections?: unknown[];
@@ -77,23 +86,6 @@ const LazyPlot = lazy(() =>
   import("./Plot").then((mod) => ({ default: mod.Plot })),
 );
 
-const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
-  "color",
-  "curveNumber",
-  "entry",
-  "hovertext",
-  "id",
-  "label",
-  "parent",
-  "percentEntry",
-  "percentParent",
-  "percentRoot",
-  "pointNumber",
-  "root",
-  "value",
-] as const;
-const TREE_MAP_DATA_KEYS = SUNBURST_DATA_KEYS;
-
 export const PlotlyComponent = memo(
   ({ figure: originalFigure, value, setValue, config }: PlotlyPluginProps) => {
     // Used for rendering LaTeX. TODO: Serve this library from Marimo
@@ -102,7 +94,7 @@ export const PlotlyComponent = memo(
     );
     const isScriptLoaded = scriptStatus === "ready";
 
-    const { figure, layout, handleReset } = usePlotlyLayout({
+    const { figure, layout, setLayout, handleReset } = usePlotlyLayout({
       originalFigure,
       initialValue: value,
       isScriptLoaded,
@@ -112,31 +104,48 @@ export const PlotlyComponent = memo(
       handleReset();
       setValue({});
     });
+    const handleSetDragmode = useEvent(
+      (dragmode: Plotly.Layout["dragmode"]) => {
+        setLayout((prev) => ({ ...prev, dragmode }));
+        setValue((prev) => ({ ...prev, dragmode }));
+      },
+    );
 
     const configMemo = useDeepCompareMemoize(config);
     const plotlyConfig = useMemo((): Partial<Plotly.Config> => {
-      return {
-        displaylogo: false,
-        modeBarButtonsToAdd: [
-          // Custom button to reset the state
-          {
-            name: "reset",
-            title: "Reset state",
-            icon: {
-              svg: `
+      const hasPureLine = hasPureLineTrace(figure.data);
+      const defaultButtons: ModeBarButton[] = [
+        // Custom button to reset the state
+        {
+          name: "reset",
+          title: "Reset state",
+          icon: {
+            svg: `
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw">
                 <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                 <path d="M3 3v5h5" />
               </svg>`,
-            },
-            click: handleResetWithClear,
           },
-        ],
+          click: handleResetWithClear,
+        },
+      ];
+      if (hasPureLine) {
+        defaultButtons.push(...lineSelectionButtons(handleSetDragmode));
+      }
+
+      return {
+        displaylogo: false,
         // Prioritize user's config
         ...configMemo,
+        modeBarButtonsToAdd: mergeModeBarButtonsToAdd(
+          defaultButtons,
+          configMemo.modeBarButtonsToAdd as
+            | readonly ModeBarButton[]
+            | undefined,
+        ),
       };
-    }, [handleResetWithClear, configMemo]);
+    }, [handleResetWithClear, handleSetDragmode, configMemo, figure.data]);
 
     return (
       <LazyPlot
@@ -171,6 +180,7 @@ export const PlotlyComponent = memo(
               points: Arrays.EMPTY,
               indices: Arrays.EMPTY,
               range: undefined,
+              lasso: undefined,
             };
           });
         })}
@@ -181,9 +191,7 @@ export const PlotlyComponent = memo(
 
           setValue((prev) => ({
             ...prev,
-            points: evt.points.map((point) =>
-              Objects.pick(point, TREE_MAP_DATA_KEYS),
-            ),
+            points: extractTreemapPoints(evt.points),
           }));
         })}
         onSunburstClick={useEvent((evt: Readonly<Plotly.PlotMouseEvent>) => {
@@ -193,9 +201,7 @@ export const PlotlyComponent = memo(
 
           setValue((prev) => ({
             ...prev,
-            points: evt.points.map((point) =>
-              Objects.pick(point, SUNBURST_DATA_KEYS),
-            ),
+            points: extractSunburstPoints(evt.points),
           }));
         })}
         config={plotlyConfig}
@@ -203,13 +209,21 @@ export const PlotlyComponent = memo(
           if (!evt) {
             return;
           }
-
-          const clickSelection = extractClickSelection(evt);
-          if (!clickSelection) {
+          // Handle clicks for chart types where box/lasso selection
+          // is limited or unavailable (e.g. bar, heatmaps, histograms, pure line traces).
+          if (!shouldHandleClickSelection(evt.points)) {
             return;
           }
-
-          setValue((prev) => ({ ...prev, ...clickSelection }));
+          const extractedPoints = extractPoints(evt.points);
+          const extractedIndices = extractIndices(evt.points);
+          setValue((prev) => ({
+            ...prev,
+            selections: Arrays.EMPTY,
+            range: undefined,
+            lasso: undefined,
+            points: extractedPoints,
+            indices: extractedIndices,
+          }));
         })}
         onSelected={useEvent((evt: Readonly<Plotly.PlotSelectionEvent>) => {
           if (!evt) {
@@ -223,6 +237,10 @@ export const PlotlyComponent = memo(
             points: extractPoints(evt.points),
             indices: extractIndices(evt.points),
             range: evt.range,
+            lasso:
+              "lassoPoints" in evt
+                ? (evt.lassoPoints as { x?: unknown[]; y?: unknown[] })
+                : undefined,
           }));
         })}
         className="w-full"

package/src/plugins/impl/plotly/__tests__/PlotlyPlugin.test.tsx

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, waitFor } from "@testing-library/react";
+import { Suspense } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import type { Setter } from "@/plugins/types";
+import { PlotlyComponent } from "../PlotlyPlugin";
+
+SetupMocks.resizeObserver();
+
+type CapturedPlotProps = {
+  onClick?: (event: {
+    points: {
+      data?: { type?: string };
+      x?: string | number;
+      y?: string | number;
+      pointIndex?: number;
+      pointNumber?: number;
+      curveNumber?: number;
+    }[];
+  }) => void;
+} | null;
+
+let capturedPlotProps: CapturedPlotProps = null;
+
+vi.mock("../Plot", () => ({
+  Plot: (props: CapturedPlotProps) => {
+    capturedPlotProps = props;
+    return <div data-testid="plotly-mock" />;
+  },
+}));
+
+vi.mock("../usePlotlyLayout", () => ({
+  usePlotlyLayout: ({
+    originalFigure,
+  }: {
+    originalFigure: {
+      data: unknown[];
+      layout: Record<string, unknown>;
+      frames: unknown[] | null;
+    };
+  }) => ({
+    figure: originalFigure,
+    layout: originalFigure.layout,
+    handleReset: vi.fn(),
+  }),
+}));
+
+vi.mock("@/hooks/useScript", () => ({
+  useScript: () => "ready",
+}));
+
+vi.mock("react-use-event-hook", () => ({
+  default: <T,>(callback: T) => callback,
+}));
+
+describe("PlotlyPlugin", () => {
+  it("clicking a bar selects that bar", async () => {
+    const setValue = vi.fn<Setter<unknown>>();
+
+    render(
+      <Suspense fallback={null}>
+        <PlotlyComponent
+          figure={{
+            data: [{ type: "bar" }],
+            layout: {},
+            frames: null,
+          }}
+          value={undefined}
+          setValue={setValue}
+          host={document.createElement("div")}
+          config={{}}
+        />
+      </Suspense>,
+    );
+
+    await waitFor(() => {
+      expect(capturedPlotProps).not.toBeNull();
+    });
+
+    act(() => {
+      capturedPlotProps?.onClick?.({
+        points: [
+          {
+            data: { type: "bar" },
+            x: "Feb",
+            y: 18,
+            pointIndex: 1,
+            pointNumber: 1,
+            curveNumber: 0,
+          },
+        ],
+      });
+    });
+
+    expect(setValue).toHaveBeenCalledTimes(1);
+    const updater = setValue.mock.calls[0][0] as (value: unknown) => unknown;
+    expect(updater({})).toEqual({
+      selections: [],
+      points: [
+        {
+          x: "Feb",
+          y: 18,
+          curveNumber: 0,
+          pointNumber: 1,
+          pointIndex: 1,
+        },
+      ],
+      indices: [1],
+      range: undefined,
+    });
+  });
+});