@marimo-team/frontend 0.22.1-dev3 → 0.22.1-dev32

package/src/core/static/__tests__/files.test.ts

@@ -192,20 +192,21 @@ describe("patchVegaLoader - loader.http", () => {
     "http://foo.com/virtual-file.json",
   ];
 
-  it.each(
-    pathsToTest,
-  )("should return file content for virtual files for %s", async (s) => {
-    const virtualFiles = {
-      "/virtual-file.json":
-        "data:application/json;base64,eyJrZXkiOiAidmFsdWUifQ==" as DataURLString,
-    };
-
-    const loader = createLoader();
-    const unpatch = patchVegaLoader(loader, virtualFiles);
-    const content = await loader.http(s);
-    unpatch();
-    expect(content).toBe('{"key": "value"}');
-  });
+  it.each(pathsToTest)(
+    "should return file content for virtual files for %s",
+    async (s) => {
+      const virtualFiles = {
+        "/virtual-file.json":
+          "data:application/json;base64,eyJrZXkiOiAidmFsdWUifQ==" as DataURLString,
+      };
+
+      const loader = createLoader();
+      const unpatch = patchVegaLoader(loader, virtualFiles);
+      const content = await loader.http(s);
+      unpatch();
+      expect(content).toBe('{"key": "value"}');
+    },
+  );
 
   it("should fallback to original http method for non-virtual files", async () => {
     const loader = createLoader();
@@ -236,20 +237,21 @@ describe("patchVegaLoader - loader.load", () => {
     "http://foo.com/virtual-file.json",
   ];
 
-  it.each(
-    pathsToTest,
-  )("should return file content for virtual files for %s", async (s) => {
-    const virtualFiles = {
-      "/virtual-file.json":
-        "data:application/json;base64,eyJrZXkiOiAidmFsdWUifQ==" as DataURLString,
-    };
-
-    const loader = createLoader();
-    const unpatch = patchVegaLoader(loader, virtualFiles);
-    const content = await loader.load(s);
-    unpatch();
-    expect(content).toBe('{"key": "value"}');
-  });
+  it.each(pathsToTest)(
+    "should return file content for virtual files for %s",
+    async (s) => {
+      const virtualFiles = {
+        "/virtual-file.json":
+          "data:application/json;base64,eyJrZXkiOiAidmFsdWUifQ==" as DataURLString,
+      };
+
+      const loader = createLoader();
+      const unpatch = patchVegaLoader(loader, virtualFiles);
+      const content = await loader.load(s);
+      unpatch();
+      expect(content).toBe('{"key": "value"}');
+    },
+  );
 
   it("should fallback to original load method for non-virtual  files", async () => {
     const loader = createLoader();

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -186,7 +186,7 @@ export function useMarimoKernelConnection(opts: {
         return;
 
       case "completion-result":
-        AUTOCOMPLETER.resolve(msg.data.completion_id as RequestId, msg.data);
+        AUTOCOMPLETER.resolve(msg.data.completion_id, msg.data);
         return;
       case "function-call-result":
         FUNCTIONS_REGISTRY.resolve(msg.data.function_call_id, msg.data);
@@ -207,20 +207,14 @@ export function useMarimoKernelConnection(opts: {
       case "variables":
         setVariables(
           msg.data.variables.map((v) => ({
-            name: v.name as VariableName,
+            name: v.name,
             declaredBy: v.declared_by,
             usedBy: v.used_by,
           })),
         );
-        filterDatasetsFromVariables(
-          msg.data.variables.map((v) => v.name as VariableName),
-        );
-        filterDataSourcesFromVariables(
-          msg.data.variables.map((v) => v.name as VariableName),
-        );
-        filterStorageFromVariables(
-          msg.data.variables.map((v) => v.name as VariableName),
-        );
+        filterDatasetsFromVariables(msg.data.variables.map((v) => v.name));
+        filterDataSourcesFromVariables(msg.data.variables.map((v) => v.name));
+        filterStorageFromVariables(msg.data.variables.map((v) => v.name));
         return;
       case "variable-values":
         setMetadata(

package/src/core/websocket/useWebSocket.tsx

@@ -30,6 +30,8 @@ function createConnectionTransport(
   // Create a connection transport using the ReconnectingWebSocket from partysocket
   // This handles reconnecting when the connection is lost.
   const urlProvider = options.url; // We don't call the URL provider now since it may change (i.e. if the runtime redirects)
+  // Cast needed: ReconnectingWebSocket types readyState as `number`
+  // but IConnectionTransport expects `0 | 1 | 2 | 3`
   return new ReconnectingWebSocket(urlProvider, undefined, {
     // We don't want Infinity retries
     maxRetries: 10,
@@ -38,7 +40,7 @@ function createConnectionTransport(
     // long timeout -- the server can become slow when many notebooks
     // are open.
     connectionTimeout: 10_000,
-  });
+  }) as unknown as IConnectionTransport;
 }
 
 /**

package/src/css/app/Cell.css

@@ -15,6 +15,7 @@
   border: 1px solid var(--gray-4);
 
   @apply divide-y divide-(--gray-5);
+
   &:hover {
     border-color: var(--gray-6);
   }
@@ -98,9 +99,31 @@
 
     /* Special case for particular components */
 
-    .output-area:has(> .output > marimo-ui-element > marimo-table) {
+    .output-area:has(
+      > .output:only-child > marimo-ui-element:only-child > marimo-table
+    ) {
+      padding: 0 0 5px;
       max-height: none;
       overflow: hidden;
+
+      /* Flush table: remove border and configure edge padding via CSS variable */
+      --marimo-table-edge-padding: 0.75rem;
+
+      marimo-table::part(table-tabs) {
+        margin-top: 0.25rem;
+        border: none;
+        border-radius: 0;
+        border-top-left-radius: 9px;
+      }
+
+      marimo-table::part(table-wrapper) {
+        border: none;
+        border-radius: 0;
+      }
+
+      marimo-table::part(table-footer) {
+        padding-inline: 0.25rem;
+      }
     }
 
     & > :first-child {
@@ -364,6 +387,7 @@
     border-top-left-radius: 9px;
     border-top-right-radius: 9px;
   }
+
   div[data-ai-input-open="true"] .cm-editor {
     border-top-left-radius: 0;
     border-top-right-radius: 0;

package/src/css/globals.css

@@ -148,46 +148,72 @@
   --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-xs:
+    1px 1px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-sm:
+    2px 2px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
+  --shadow-md:
+    4px 4px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
+  --shadow-lg:
+    5px 6px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
+  --shadow-xl:
+    8px 9px 4px 0px var(--base-shadow),
+    0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
+  --shadow-2xl:
+    10px 12px 10px 0px var(--base-shadow),
+    0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-xs-solid:
+    1px 1px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-sm-solid:
+    2px 2px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  --shadow-md-solid:
+    4px 4px 0px 0px var(--base-shadow-darker),
+    0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);
+  --shadow-lg-solid:
+    5px 6px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 75% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);
+  --shadow-xl-solid:
+    7px 8px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 85% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
+  --shadow-2xl-solid:
+    10px 12px 0px 0px var(--base-shadow-darker),
+    0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid-shade: 2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-sm-solid-shade:
+    2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md-solid-shade: 4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  --shadow-md-solid-shade:
+    4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 }

package/src/css/table.css

@@ -1,5 +1,22 @@
 @reference "../css/globals.css";
 
+/* Edge padding for flush tables (--marimo-table-edge-padding inherits through shadow DOM) */
+[part="table-wrapper"] th:first-child {
+  padding-left: var(--marimo-table-edge-padding, 0.5rem);
+}
+
+[part="table-wrapper"] th:last-child {
+  padding-right: var(--marimo-table-edge-padding, 0.5rem);
+}
+
+[part="table-wrapper"] td:first-child {
+  padding-left: var(--marimo-table-edge-padding, 0.375rem);
+}
+
+[part="table-wrapper"] td:last-child {
+  padding-right: var(--marimo-table-edge-padding, 0.375rem);
+}
+
 .markdown table,
 table.dataframe {
   display: block;

package/src/plugins/core/BadPlugin.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+
+const Accordion = AccordionPrimitive.Root;
+const AccordionContent = AccordionPrimitive.Content;
+const AccordionItem = AccordionPrimitive.Item;
+const AccordionTrigger = AccordionPrimitive.Trigger;
+
 import type { JSX } from "react";
 import { ZodError } from "zod";
 import { EmotionCacheProvider } from "@/components/editor/output/EmotionCacheProvider";

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { CheckedState } from "@radix-ui/react-checkbox";
+import type { Checkbox as CheckboxPrimitive } from "radix-ui";
+
+type CheckedState = CheckboxPrimitive.CheckedState;
+
 import { type JSX, useId } from "react";
 import { z } from "zod";
 import { Checkbox } from "../../components/ui/checkbox";

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import React, { useState } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
@@ -73,8 +76,10 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
     );
   });
 
-interface Props
-  extends Omit<DataEditorProps<object>, "data" | "onAddEdits" | "onAddRows"> {
+interface Props extends Omit<
+  DataEditorProps<object>,
+  "data" | "onAddEdits" | "onAddRows"
+> {
   data: TableData<object>;
   edits: Edits;
   onEdits: Setter<Edits>;

package/src/plugins/impl/DataTablePlugin.tsx

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import type {
   ColumnFiltersState,
   OnChangeFn,
@@ -763,6 +766,7 @@ export const LoadingDataTableComponent = memo(
         {props.showChartBuilder ? (
           <TablePanel
             displayHeader={displayHeader}
+            onCloseChartBuilder={() => setDisplayHeader(false)}
             data={data?.rows || []}
             columns={props.totalColumns}
             totalRows={props.totalRows}

package/src/plugins/impl/FormPlugin.tsx

@@ -80,8 +80,7 @@ export const FormPlugin = createPlugin("marimo-form")
   });
 
 export interface FormWrapperProps<T>
-  extends Omit<Data, "elementId">,
-    Functions {
+  extends Omit<Data, "elementId">, Functions {
   children: React.ReactNode;
   currentValue: T;
   newValue: T;

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

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, describe, expect, it, vi } from "vitest";

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

@@ -9,6 +9,35 @@ import { store } from "@/core/state/jotai";
 import type { IPluginProps } from "../../types";
 import { SliderPlugin } from "../SliderPlugin";
 
+vi.mock("@/components/ui/slider", () => ({
+  Slider: ({
+    disabled,
+    onValueChange,
+    onValueCommit,
+    value,
+  }: {
+    disabled?: boolean;
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    value: number[];
+  }) => (
+    <div>
+      <button
+        aria-label="Slider change"
+        disabled={disabled}
+        onClick={() => onValueChange?.([value[0] + 1])}
+        type="button"
+      />
+      <button
+        aria-label="Slider commit"
+        disabled={disabled}
+        onClick={() => onValueCommit?.(value)}
+        type="button"
+      />
+    </div>
+  ),
+}));
+
 SetupMocks.resizeObserver();
 
 describe("SliderPlugin", () => {
@@ -51,46 +80,45 @@ describe("SliderPlugin", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(false, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
-    expect(thumb).toBeTruthy();
+    const changeButton = getByRole("button", { name: "Slider change" });
 
-    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+      fireEvent.click(changeButton);
     });
 
     expect(setValue).toHaveBeenCalledWith(6);
   });
 
-  it("slider does not trigger setValue immediately when debounce is true", () => {
+  it("slider waits until commit before calling setValue when debounce is true", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(true, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
+    const changeButton = getByRole("button", { name: "Slider change" });
+    const commitButton = getByRole("button", { name: "Slider commit" });
 
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      // Simulate just a programmatic change that Radix would trigger via pointer move
-      // which fires onValueChange but not onValueCommit yet
-      // Because we can't easily separated Radix's internal pointer events in jsdom, we
-      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+      fireEvent.click(changeButton);
     });
 
-    // We verified above that NumberField works when debounce=true
     expect(setValue).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.click(commitButton);
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
   });
 
   it("editable input triggers setValue immediately even when slider debounce is true", () => {

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

@@ -4,7 +4,6 @@
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -145,18 +144,10 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     return <ErrorBanner error={error} />;
   }
 
-  // Find the closest parent element with an attribute of `random-id`
-  const randomId = props.host
-    .closest(`[${RANDOM_ID_ATTR}]`)
-    ?.getAttribute(RANDOM_ID_ATTR);
-  const key = randomId ?? jsUrl;
-
   return (
     <LoadedSlot
-      // Use the a key to force a re-render when the randomId (or jsUrl) changes
-      // Plugins may be stateful and we cannot make assumptions that we won't be
-      // so it is safer to just re-render.
-      key={key}
+      // Force remount when the widget module or model changes (cell re-run).
+      key={`${jsHash}:${modelId}`}
       widget={jsModule.default}
       modelId={modelId}
       host={host}

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

@@ -2,7 +2,10 @@
 
 import { type UIMessage, useChat } from "@ai-sdk/react";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { PopoverAnchor } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import {
   createUIMessageStreamResponse,

package/src/plugins/impl/data-frames/forms/__tests__/form.test.tsx

@@ -44,16 +44,14 @@ describe("renderZodSchema", () => {
     [...TransformTypeSchema.options],
     (z) => getUnionLiteral(z).value,
   );
-  it.each(
-    Object.entries(options),
-  )("should render a form %s", (name, schema: z.ZodType<
-    unknown,
-    FieldValues
-  >) => {
-    const expected = render(<Subject schema={schema} />);
+  it.each(Object.entries(options))(
+    "should render a form %s",
+    (name, schema: z.ZodType<unknown, FieldValues>) => {
+      const expected = render(<Subject schema={schema} />);
 
-    expect(expected.asFragment()).toMatchSnapshot();
-  });
+      expect(expected.asFragment()).toMatchSnapshot();
+    },
+  );
 });
 
 const options = [

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

@@ -15,7 +15,11 @@ import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
 import { Objects } from "@/utils/objects";
-import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+import {
+  extractClickSelection,
+  extractIndices,
+  extractPoints,
+} from "./selection";
 import { usePlotlyLayout } from "./usePlotlyLayout";
 
 interface Data {
@@ -23,12 +27,9 @@ interface Data {
   config: Partial<Plotly.Config>;
 }
 
-type AxisName = string;
-type AxisDatum = unknown;
-
 type T =
   | {
-      points?: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
+      points?: Record<string, unknown>[] | Plotly.PlotDatum[];
       indices?: number[];
       range?: {
         x?: number[];
@@ -202,19 +203,13 @@ export const PlotlyComponent = memo(
           if (!evt) {
             return;
           }
-          // Only handle clicks for chart types where box/lasso selection
-          // (onSelected) doesn't work, such as heatmaps.
-          const isHeatmap = evt.points.some(
-            (point) => point.data?.type === "heatmap",
-          );
-          if (!isHeatmap) {
+
+          const clickSelection = extractClickSelection(evt);
+          if (!clickSelection) {
             return;
           }
-          setValue((prev) => ({
-            ...prev,
-            points: extractPoints(evt.points),
-            indices: evt.points.map((point) => point.pointIndex),
-          }));
+
+          setValue((prev) => ({ ...prev, ...clickSelection }));
         })}
         onSelected={useEvent((evt: Readonly<Plotly.PlotSelectionEvent>) => {
           if (!evt) {
@@ -226,7 +221,7 @@ export const PlotlyComponent = memo(
             selections:
               "selections" in evt ? (evt.selections as unknown[]) : [],
             points: extractPoints(evt.points),
-            indices: evt.points.map((point) => point.pointIndex),
+            indices: extractIndices(evt.points),
             range: evt.range,
           }));
         })}
@@ -241,54 +236,3 @@ export const PlotlyComponent = memo(
   },
 );
 PlotlyComponent.displayName = "PlotlyComponent";
-
-/**
- * This is a hack to extract the points with their original keys,
- * instead of the ones that Plotly uses internally,
- * by using the hovertemplate.
- */
-const STANDARD_POINT_KEYS: string[] = [
-  "x",
-  "y",
-  "z",
-  "lat",
-  "lon",
-  "curveNumber",
-  "pointNumber",
-  "pointNumbers",
-  "pointIndex",
-];
-
-function extractPoints(
-  points: Plotly.PlotDatum[],
-): Record<AxisName, AxisDatum>[] {
-  if (!points) {
-    return [];
-  }
-
-  let parser: PlotlyTemplateParser | undefined;
-
-  return points.map((point) => {
-    const standardPointFields = Objects.pick(point, STANDARD_POINT_KEYS);
-
-    // Get the first hovertemplate
-    const hovertemplate = Array.isArray(point.data.hovertemplate)
-      ? point.data.hovertemplate[0]
-      : point.data.hovertemplate;
-
-    // For chart types with standard point keys (e.g. heatmaps),
-    // or when there's no hovertemplate, pick keys directly from the point.
-    if (!hovertemplate || point.data?.type === "heatmap") {
-      return standardPointFields;
-    }
-
-    // Update or create a parser
-    parser = parser
-      ? parser.update(hovertemplate)
-      : createParser(hovertemplate);
-    return {
-      ...standardPointFields,
-      ...parser.parse(point),
-    };
-  });
-}