@marimo-team/frontend 0.22.1-dev33 → 0.22.1-dev38

package/src/plugins/impl/plotly/selection.ts

@@ -2,20 +2,29 @@
 
 import { pick } from "lodash-es";
 import type * as Plotly from "plotly.js";
-import { Arrays } from "@/utils/arrays";
+
 import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
 
 type AxisName = string;
 type AxisDatum = unknown;
 
-export interface PlotlyClickSelection {
-  points: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
-  indices: number[];
-  range: undefined;
-  selections: unknown[];
-}
+const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
+  "color",
+  "curveNumber",
+  "entry",
+  "hovertext",
+  "id",
+  "label",
+  "parent",
+  "percentEntry",
+  "percentParent",
+  "percentRoot",
+  "pointNumber",
+  "root",
+  "value",
+] as const;
 
-const CLICK_SELECTABLE_TRACE_TYPES = new Set(["heatmap", "histogram"]);
+const LINE_CLICK_TRACE_TYPES = new Set(["scatter", "scattergl"]);
 
 const STANDARD_POINT_KEYS: string[] = [
   "x",
@@ -29,61 +38,282 @@ const STANDARD_POINT_KEYS: string[] = [
   "pointIndex",
 ] as const;
 
+type PointWithFullData = Plotly.PlotDatum & {
+  pointNumbers?: number[];
+  fullData?: {
+    type?: string;
+    mode?: string;
+    x?: unknown[];
+    y?: unknown[];
+    hovertemplate?: string | string[];
+  };
+};
+
+interface TraceSource {
+  type?: string;
+  mode?: string;
+  x?: unknown[];
+  y?: unknown[];
+  hovertemplate?: string | string[];
+}
+
+export type ModeBarButton = NonNullable<
+  Plotly.Config["modeBarButtonsToAdd"]
+>[number];
+
+function coalesceField<T>(
+  primary: T | undefined,
+  fallback: T | undefined,
+): T | undefined {
+  return primary ?? fallback;
+}
+
+function getTraceSource(point: Plotly.PlotDatum): TraceSource {
+  const withFullData = point as PointWithFullData;
+  const data = (point.data ?? {}) as TraceSource;
+  const fullData = (withFullData.fullData ?? {}) as TraceSource;
+
+  // Plotly click payloads sometimes include partial `data` plus richer `fullData`.
+  // Merge field-by-field so we don't lose type/mode/x/y metadata for pure lines.
+  return {
+    type: coalesceField(data.type, fullData.type),
+    mode: coalesceField(data.mode, fullData.mode),
+    x: coalesceField(data.x, fullData.x),
+    y: coalesceField(data.y, fullData.y),
+    hovertemplate: coalesceField(data.hovertemplate, fullData.hovertemplate),
+  };
+}
+
+function asFiniteNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
 function getPointIndex(point: Plotly.PlotDatum): number | undefined {
-  if (typeof point.pointIndex === "number") {
-    return point.pointIndex;
+  const pointIndex = asFiniteNumber(point.pointIndex);
+  if (pointIndex !== undefined) {
+    return pointIndex;
   }
 
-  if (typeof point.pointNumber === "number") {
-    return point.pointNumber;
+  const pointNumber = asFiniteNumber(point.pointNumber);
+  if (pointNumber !== undefined) {
+    return pointNumber;
   }
 
-  return undefined;
+  const pointNumbers = (point as PointWithFullData).pointNumbers;
+  if (!Array.isArray(pointNumbers)) {
+    return undefined;
+  }
+
+  return pointNumbers.map(asFiniteNumber).find((n) => n !== undefined);
+}
+
+function isLinePoint(point: Plotly.PlotDatum): boolean {
+  const trace = getTraceSource(point);
+  if (!LINE_CLICK_TRACE_TYPES.has(String(trace.type))) {
+    return false;
+  }
+
+  const mode = trace.mode;
+  if (typeof mode !== "string") {
+    // Some Plotly click payloads omit mode on point.data, especially with
+    // line traces; treat scatter/scattergl as line-like in this case.
+    return true;
+  }
+
+  return mode.split("+").includes("lines");
 }
 
-function isClickSelectablePoint(point: Plotly.PlotDatum): boolean {
-  const traceType = point.data?.type;
-  return typeof traceType === "string"
-    ? CLICK_SELECTABLE_TRACE_TYPES.has(traceType)
-    : false;
+function isPureLineMode(mode: unknown): boolean {
+  if (typeof mode !== "string") {
+    return false;
+  }
+  const parts = mode.split("+");
+  return parts.includes("lines") && !parts.includes("markers");
 }
 
-export function extractIndices(points: Plotly.PlotDatum[]): number[] {
-  return points.flatMap((point) => {
-    const index = getPointIndex(point);
-    return typeof index === "number" ? [index] : [];
+export function hasPureLineTrace(
+  data: readonly Plotly.Data[] | undefined,
+): boolean {
+  if (!data) {
+    return false;
+  }
+
+  return data.some((trace) => {
+    const traceType = (trace as { type?: unknown }).type;
+    const isScatterLike =
+      traceType === undefined || LINE_CLICK_TRACE_TYPES.has(String(traceType));
+    if (!isScatterLike) {
+      return false;
+    }
+    return isPureLineMode((trace as { mode?: unknown }).mode);
   });
 }
 
-/**
- * This is a hack to extract the points with their original keys,
- * instead of the ones that Plotly uses internally,
- * by using the hovertemplate.
- */
-export function extractPoints(
-  points: Plotly.PlotDatum[],
-): Record<AxisName, AxisDatum>[] {
-  if (!points) {
-    return [];
+function createDragmodeButton(
+  name: string,
+  title: string,
+  svg: string,
+  dragmode: Plotly.Layout["dragmode"],
+  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
+): ModeBarButton {
+  return {
+    name,
+    title,
+    icon: { svg },
+    click: () => setDragmode(dragmode),
+  };
+}
+
+export function lineSelectionButtons(
+  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
+): ModeBarButton[] {
+  return [
+    createDragmodeButton(
+      "line-box-select",
+      "Box select",
+      `<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">
+        <rect x="4" y="4" width="16" height="16" stroke-dasharray="2 2" />
+      </svg>`,
+      "select",
+      setDragmode,
+    ),
+    createDragmodeButton(
+      "line-lasso-select",
+      "Lasso select",
+      `<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">
+        <path d="M6 8c0-2.2 2.2-4 5-4s5 1.8 5 4-2.2 4-5 4-5 1.8-5 4 2.2 4 5 4" />
+        <circle cx="17.5" cy="16.5" r="1.5" />
+      </svg>`,
+      "lasso",
+      setDragmode,
+    ),
+  ];
+}
+
+export function mergeModeBarButtonsToAdd(
+  defaults: readonly ModeBarButton[],
+  userButtons: readonly ModeBarButton[] | undefined,
+): ModeBarButton[] {
+  const merged: ModeBarButton[] = [];
+  const seenStrings = new Set<string>();
+
+  const pushButton = (button: ModeBarButton) => {
+    if (typeof button === "string") {
+      if (seenStrings.has(button)) {
+        return;
+      }
+      seenStrings.add(button);
+      merged.push(button);
+      return;
+    }
+    merged.push(button);
+  };
+
+  defaults.forEach(pushButton);
+  userButtons?.forEach(pushButton);
+  return merged;
+}
+
+export function shouldHandleClickSelection(
+  points: readonly Plotly.PlotDatum[],
+): boolean {
+  return points.some((point) => {
+    const type = getTraceSource(point).type;
+    return (
+      type === "bar" ||
+      type === "heatmap" ||
+      type === "histogram" ||
+      isLinePoint(point)
+    );
+  });
+}
+
+export function extractIndices(points: readonly Plotly.PlotDatum[]): number[] {
+  return points
+    .map(getPointIndex)
+    .filter((pointIndex): pointIndex is number => pointIndex !== undefined);
+}
+
+function getIndexedValue(series: unknown, index: number): unknown {
+  if (Array.isArray(series) || ArrayBuffer.isView(series)) {
+    return (series as ArrayLike<unknown>)[index];
+  }
+  if (typeof series === "object" && series !== null && "length" in series) {
+    const maybeLength = Number(
+      (series as { length?: unknown }).length ?? Number.NaN,
+    );
+    if (Number.isFinite(maybeLength) && index >= 0 && index < maybeLength) {
+      return (series as Record<number, unknown>)[index];
+    }
+  }
+  return undefined;
+}
+
+function withInferredXY(
+  point: Plotly.PlotDatum,
+  fields: Record<AxisName, AxisDatum>,
+): Record<AxisName, AxisDatum> {
+  // For some pure-line clicks Plotly provides index metadata but omits x/y.
+  // Recover x/y from trace arrays so Python gets a stable payload.
+  if (fields.x !== undefined && fields.y !== undefined) {
+    return fields;
+  }
+
+  const pointIndex = getPointIndex(point);
+  if (pointIndex === undefined) {
+    return fields;
+  }
+
+  const nextFields: Record<AxisName, AxisDatum> = { ...fields };
+  if (nextFields.pointIndex === undefined) {
+    nextFields.pointIndex = pointIndex;
+  }
+
+  const trace = getTraceSource(point);
+  if (nextFields.x === undefined) {
+    const inferredX = getIndexedValue(trace.x, pointIndex);
+    if (inferredX !== undefined) {
+      nextFields.x = inferredX;
+    }
+  }
+  if (nextFields.y === undefined) {
+    const inferredY = getIndexedValue(trace.y, pointIndex);
+    if (inferredY !== undefined) {
+      nextFields.y = inferredY;
+    }
   }
 
+  return nextFields;
+}
+
+export function extractPoints(
+  points: readonly Plotly.PlotDatum[],
+): Record<AxisName, AxisDatum>[] {
   let parser: PlotlyTemplateParser | undefined;
 
   return points.map((point) => {
-    const standardPointFields = pick(point, STANDARD_POINT_KEYS);
+    const standardPointFields = withInferredXY(
+      point,
+      pick(point, STANDARD_POINT_KEYS),
+    );
+
+    const trace = getTraceSource(point);
 
     // Get the first hovertemplate
-    const hovertemplate = Array.isArray(point.data.hovertemplate)
-      ? point.data.hovertemplate[0]
-      : point.data.hovertemplate;
+    const hovertemplate = Array.isArray(trace.hovertemplate)
+      ? trace.hovertemplate[0]
+      : trace.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") {
+    if (!hovertemplate || trace.type === "heatmap") {
       return standardPointFields;
     }
 
-    // Update or create a parser
     parser = parser
       ? parser.update(hovertemplate)
       : createParser(hovertemplate);
@@ -94,22 +324,10 @@ export function extractPoints(
   });
 }
 
-export function extractClickSelection(
-  evt: Readonly<Plotly.PlotMouseEvent>,
-): PlotlyClickSelection | undefined {
-  if (!evt.points?.length) {
-    return undefined;
-  }
-
-  const points = evt.points.filter(isClickSelectablePoint);
-  if (points.length === 0) {
-    return undefined;
-  }
-
-  return {
-    selections: Arrays.EMPTY,
-    points: extractPoints(points),
-    indices: extractIndices(points),
-    range: undefined,
-  };
+export function extractSunburstPoints(
+  points: readonly Plotly.PlotDatum[],
+): Record<string, unknown>[] {
+  return points.map((point) => pick(point, SUNBURST_DATA_KEYS));
 }
+
+export const extractTreemapPoints = extractSunburstPoints;

package/src/utils/mime-types.ts

@@ -151,7 +151,7 @@ export function sortByPrecedence<T>(
 ): [MimeType, T][] {
   const unknownPrecedence = precedence.size;
 
-  return [...entries].toSorted((a, b) => {
+  return entries.toSorted((a, b) => {
     const indexA = precedence.get(a[0]) ?? unknownPrecedence;
     const indexB = precedence.get(b[0]) ?? unknownPrecedence;
     return indexA - indexB;

package/dist/assets/common-B5GX57h6.js

@@ -1 +0,0 @@
-import{s as v}from"./chunk-LvLJmgfZ.js";import{t as w}from"./react-Bj1aDYRI.js";import{j as k}from"./cells-ArUhhHls.js";import{t as g}from"./compiler-runtime-B3qBwwSJ.js";import{t as N}from"./jsx-runtime-Blw4afVn.js";import{i as y,r as C,t as _}from"./popover-AtoFZ7i4.js";import{t as b}from"./badge-CufG8W4J.js";import{t as S}from"./use-toast-T0_cQDma.js";import{n as I}from"./copy-C8iWa1qI.js";import{t as j}from"./cell-link-D4UrIH9w.js";var O=g(),i=v(N(),1);const B=p=>{let e=(0,O.c)(18),{maxCount:n,cellIds:r,onClick:t,skipScroll:o}=p,m=k(),l,a,c;if(e[0]!==r||e[1]!==m||e[2]!==n||e[3]!==t||e[4]!==o){c=Symbol.for("react.early_return_sentinel");e:{let f;e[8]===m?f=e[9]:(f=(s,x)=>m.inOrderIds.indexOf(s)-m.inOrderIds.indexOf(x),e[8]=m,e[9]=f);let u=[...r].toSorted(f);if(r.length===0){let s;e[10]===Symbol.for("react.memo_cache_sentinel")?(s=(0,i.jsx)("div",{className:"text-muted-foreground",children:"--"}),e[10]=s):s=e[10],c=s;break e}let h;e[11]!==r.length||e[12]!==t||e[13]!==o?(h=(s,x)=>(0,i.jsxs)("span",{className:"truncate",children:[(0,i.jsx)(j,{variant:"focus",cellId:s,skipScroll:o,className:"whitespace-nowrap",onClick:t?()=>t(s):void 0},s),x<r.length-1&&", "]},s),e[11]=r.length,e[12]=t,e[13]=o,e[14]=h):h=e[14],l=u.slice(0,n).map(h),a=r.length>n&&(0,i.jsxs)(_,{children:[(0,i.jsx)(y,{asChild:!0,children:(0,i.jsxs)("span",{className:"whitespace-nowrap text-muted-foreground text-xs hover:underline cursor-pointer",children:["+",r.length-n," more"]})}),(0,i.jsx)(C,{className:"w-auto",children:(0,i.jsx)("div",{className:"flex flex-col gap-1 py-1",children:u.slice(n).map(s=>(0,i.jsx)(j,{variant:"focus",cellId:s,className:"whitespace-nowrap",onClick:t?()=>t(s):void 0},s))})})]})}e[0]=r,e[1]=m,e[2]=n,e[3]=t,e[4]=o,e[5]=l,e[6]=a,e[7]=c}else l=e[5],a=e[6],c=e[7];if(c!==Symbol.for("react.early_return_sentinel"))return c;let d;return e[15]!==l||e[16]!==a?(d=(0,i.jsxs)(i.Fragment,{children:[l,a]}),e[15]=l,e[16]=a,e[17]=d):d=e[17],d};var F=g();w();const q=p=>{let e=(0,F.c)(15),n,r,t,o;e[0]===p?(n=e[1],r=e[2],t=e[3],o=e[4]):({name:r,declaredBy:n,onClick:t,...o}=p,e[0]=p,e[1]=n,e[2]=r,e[3]=t,e[4]=o);let m=n.length>1?"destructive":"outline",l;e[5]!==r||e[6]!==t?(l=async d=>{if(t){t(d);return}await I(r),S({title:"Copied to clipboard"})},e[5]=r,e[6]=t,e[7]=l):l=e[7];let a;e[8]!==r||e[9]!==m||e[10]!==l?(a=(0,i.jsx)(b,{title:r,variant:m,className:"rounded-sm text-ellipsis block overflow-hidden max-w-fit cursor-pointer font-medium",onClick:l,children:r}),e[8]=r,e[9]=m,e[10]=l,e[11]=a):a=e[11];let c;return e[12]!==o||e[13]!==a?(c=(0,i.jsx)("div",{className:"max-w-[130px]",...o,children:a}),e[12]=o,e[13]=a,e[14]=c):c=e[14],c};export{B as n,q as t};