exploreda 0.0.6 → 0.1.0

package/dist/chunk-C62KHV7S.js

@@ -0,0 +1,1225 @@
+import { useChartTrace, useChartTraceApi, useTraceSource, guideTargets, resolveGuideTrace } from './chunk-54M32JJB.js';
+import { useColorScales, makeColorScale } from './chunk-4HNDKMWF.js';
+import { DEFAULT_CHART_SETTINGS } from './chunk-CJQQFNEY.js';
+import { planChartMargin, numericScale, planAxes, getRangeFilterForField, useBrush, PlannedGrid, PlannedAxes, findAxisGuide } from './chunk-7PTJNIOD.js';
+import { FieldSelector } from './chunk-SFV5LZPD.js';
+import { applyFilter } from './chunk-YXPAWUXO.js';
+import { CalculatedFieldBadge } from './chunk-NDF5LCST.js';
+import { Label, Input } from './chunk-MJPDJ5AS.js';
+import { useDataLayer, formatFieldValue, getChartTitle, categoryValue, categoryKey, categoryIncludes, categoryLabel, hasFieldDisplayFormat, getFieldLabel, finiteNumber, convertFieldValue } from './chunk-JNO7OXCC.js';
+import { ScatterChart } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useId, useRef, useMemo, useEffect, useCallback } from 'react';
+
+function ScatterPlotSettingsPanel({
+  settings,
+  onSettingsChange
+}) {
+  const { getOrCreateScaleForField } = useColorScales();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { children: "X Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.xField,
+          onChange: (value) => onSettingsChange({ ...settings, xField: value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { children: "Y Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.yField,
+          onChange: (value) => onSettingsChange({ ...settings, yField: value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { children: "Color Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.colorField ?? "",
+          allowClear: true,
+          onChange: (value) => onSettingsChange({
+            ...settings,
+            colorField: value || void 0,
+            colorScaleId: value ? getOrCreateScaleForField(value) : void 0
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "scatter-point-size", children: "Point size" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "scatter-point-size",
+          type: "number",
+          min: 1,
+          max: 12,
+          step: 0.5,
+          value: settings.pointSize ?? 3,
+          onChange: (event) => {
+            const value = Number(event.target.value);
+            if (value >= 1 && value <= 12)
+              onSettingsChange({ ...settings, pointSize: value });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "scatter-opacity", children: "Opacity" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "scatter-opacity",
+          type: "number",
+          min: 0.1,
+          max: 1,
+          step: 0.1,
+          value: settings.pointOpacity ?? 0.7,
+          onChange: (event) => {
+            const value = Number(event.target.value);
+            if (value >= 0.1 && value <= 1)
+              onSettingsChange({ ...settings, pointOpacity: value });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Smaller, transparent points reveal overlap. Drag a rectangle to filter the other views." })
+  ] });
+}
+
+// src/components/charts/ScatterPlot/planScatterPoints.ts
+function planScatterPoints({
+  settings,
+  style,
+  ids,
+  xData,
+  yData,
+  colorData,
+  xScale,
+  yScale,
+  getColor
+}) {
+  const xFilter = getRangeFilterForField(settings.filters, settings.xField);
+  const yFilter = getRangeFilterForField(settings.filters, settings.yField);
+  const colorFilters = settings.filters.filter(
+    (filter) => filter.field === settings.colorField
+  );
+  const points = [];
+  for (const sourceId of ids) {
+    const rawX = xData[sourceId];
+    const rawY = yData[sourceId];
+    const xValue = finiteNumber(rawX) ?? NaN;
+    const yValue = finiteNumber(rawY) ?? NaN;
+    if (!Number.isFinite(xValue) || !Number.isFinite(yValue)) {
+      continue;
+    }
+    const x = xScale(xValue);
+    const y = yScale(yValue);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+      continue;
+    }
+    const passesOwnFilter = (!xFilter || applyFilter(xValue, xFilter)) && (!yFilter || applyFilter(yValue, yFilter)) && colorFilters.every((filter) => applyFilter(colorData[sourceId], filter));
+    const mappedColor = getColor(colorData[sourceId]);
+    points.push({
+      id: `${settings.id}:point:${sourceId}`,
+      sourceId,
+      xValue,
+      yValue,
+      colorValue: colorData[sourceId],
+      mappedColor,
+      x,
+      y,
+      color: passesOwnFilter ? mappedColor : "rgb(156 163 175)",
+      opacity: passesOwnFilter ? style.opacity.value : style.dimmedOpacity.value,
+      radius: style.radius.value,
+      passesOwnFilter
+    });
+  }
+  return points;
+}
+
+// src/components/charts/ScatterPlot/scatterPlan.ts
+function numeric(value) {
+  return finiteNumber(value) ?? NaN;
+}
+function bounds(ids, data) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const id of ids) {
+    const value = numeric(data[id]);
+    if (!Number.isFinite(value)) {
+      continue;
+    }
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+  }
+  return min === Infinity ? [0, 1] : [min, max];
+}
+function fieldLabel(field, settings) {
+  return field === "__ID" ? "Row sequence" : getFieldLabel(field, settings[field]);
+}
+function display(field, value, settings) {
+  return hasFieldDisplayFormat(settings[field]) ? formatFieldValue(field, value, settings[field]) : String(value);
+}
+function planScatter(settings, snapshot, width, height) {
+  const xLabel = settings.xAxisLabel || fieldLabel(settings.xField, snapshot.fieldSettings);
+  const yLabel = settings.yAxisLabel || fieldLabel(settings.yField, snapshot.fieldSettings);
+  const [xMin, xMax] = bounds(snapshot.allIds, snapshot.xData);
+  const [yMin, yMax] = bounds(snapshot.allIds, snapshot.yData);
+  const xBuffer = (xMax - xMin) * 0.1;
+  const yBuffer = (yMax - yMin) * 0.1;
+  const yDomain = [yMin - yBuffer, yMax + yBuffer];
+  const { margin, policy: marginPolicy } = planChartMargin({
+    margin: settings.margin,
+    width,
+    yDomain,
+    hasXLabel: Boolean(xLabel),
+    hasYLabel: Boolean(yLabel)
+  });
+  const plotWidth = width - margin.left - margin.right;
+  const plotHeight = height - margin.top - margin.bottom;
+  const xDomain = [
+    settings.xAxis.scaleType === "symlog" ? xMin : xMin - xBuffer,
+    xMax + xBuffer
+  ];
+  const actualYDomain = settings.yAxis.scaleType === "symlog" ? [yMin, yDomain[1]] : yDomain;
+  const xScale = numericScale(settings.xAxis).domain(xDomain).range([0, plotWidth]);
+  const yScale = numericScale(settings.yAxis).domain(actualYDomain).range([plotHeight, 0]);
+  const xType = settings.xAxis.scaleType === "symlog" ? "symlog" : "linear";
+  const yType = settings.yAxis.scaleType === "symlog" ? "symlog" : "linear";
+  const facetSet = new Set(snapshot.facetIds);
+  const ids = snapshot.facetIds?.length ? snapshot.chartIds.filter((id) => facetSet.has(id)) : snapshot.chartIds;
+  const resolveColor = snapshot.colorScale ? makeColorScale(snapshot.colorScale) : null;
+  const getColor = (value) => {
+    if (!settings.colorScaleId) {
+      return "#3479a8";
+    }
+    if (!resolveColor) {
+      return "#000000";
+    }
+    try {
+      return resolveColor(value);
+    } catch {
+      return "#000000";
+    }
+  };
+  const filteredSet = new Set(snapshot.filteredIds);
+  const pointStyle = {
+    radius: {
+      value: settings.pointSize ?? 3,
+      source: settings.pointSize == null ? "scatter-default" : "chart-setting"
+    },
+    opacity: {
+      value: settings.pointOpacity ?? 0.7,
+      source: settings.pointOpacity == null ? "scatter-default" : "chart-setting"
+    },
+    dimmedOpacity: { value: 0.15, source: "own-filter-rule" }
+  };
+  const points = planScatterPoints({
+    settings,
+    style: pointStyle,
+    ids,
+    xData: snapshot.xData,
+    yData: snapshot.yData,
+    colorData: snapshot.colorData,
+    xScale,
+    yScale,
+    getColor
+  }).map((point) => ({
+    ...point,
+    passesAllFilters: filteredSet.has(point.sourceId)
+  }));
+  const included = new Set(points.map((point) => point.sourceId));
+  const format = (field) => (value) => formatFieldValue(field, value, snapshot.fieldSettings[field]);
+  const labelSource = (local) => local ? "chart-setting" : "field-label";
+  const axes = planAxes({
+    plotWidth,
+    plotHeight,
+    margin,
+    marginPolicy,
+    x: {
+      scale: xScale,
+      scaleType: xType,
+      field: settings.xField,
+      fieldLabel: xLabel,
+      density: settings.xGridLines,
+      grid: settings.xAxis.grid,
+      format: format(settings.xField),
+      label: [xLabel, xType === "symlog" && "symlog"].filter(Boolean).join(" \xB7 "),
+      labelSource: labelSource(settings.xAxisLabel),
+      domainSource: {
+        population: "all source rows",
+        rows: snapshot.allIds.length,
+        bounds: [xMin, xMax],
+        padding: xType === "symlog" ? "10% above" : "10% on each side"
+      }
+    },
+    y: {
+      scale: yScale,
+      scaleType: yType,
+      field: settings.yField,
+      fieldLabel: yLabel,
+      density: settings.yGridLines,
+      grid: settings.yAxis.grid,
+      format: format(settings.yField),
+      label: [yLabel, yType === "symlog" && "symlog"].filter(Boolean).join(" \xB7 "),
+      labelSource: labelSource(settings.yAxisLabel),
+      rule: false,
+      domainSource: {
+        population: "all source rows",
+        rows: snapshot.allIds.length,
+        bounds: [yMin, yMax],
+        padding: yType === "symlog" ? "10% above" : "10% on each side"
+      }
+    }
+  });
+  const xFilter = getRangeFilterForField(settings.filters, settings.xField);
+  const yFilter = getRangeFilterForField(settings.filters, settings.yField);
+  const round = (value) => Math.round(value * 1e4) / 1e4;
+  const brushExtent = xFilter?.min !== void 0 && xFilter.max !== void 0 && yFilter?.min !== void 0 && yFilter.max !== void 0 ? [
+    [round(xScale(xFilter.min)), round(yScale(yFilter.max))],
+    [round(xScale(xFilter.max)), round(yScale(yFilter.min))]
+  ] : null;
+  const title = getChartTitle(
+    settings,
+    (field) => fieldLabel(field, snapshot.fieldSettings)
+  );
+  const calculatedBadges = [];
+  if (snapshot.calculatedFields?.includes(settings.xField)) {
+    calculatedBadges.push({
+      id: "calculation:x",
+      field: settings.xField,
+      x: margin.left + plotWidth / 2 + Math.min(90, xLabel.length * 3.2) + 8,
+      y: margin.top + plotHeight + Math.max(30, margin.bottom - 10) - 12,
+      rotation: 0
+    });
+  }
+  if (snapshot.calculatedFields?.includes(settings.yField)) {
+    calculatedBadges.push({
+      id: "calculation:y",
+      field: settings.yField,
+      x: 0,
+      y: margin.top + plotHeight / 2 - Math.min(90, yLabel.length * 3.2) - 30,
+      rotation: -90
+    });
+  }
+  let legend;
+  if (settings.colorField && settings.colorScaleId && snapshot.colorScale) {
+    const scale = snapshot.colorScale;
+    if (scale.type === "categorical") {
+      const values = /* @__PURE__ */ new Map();
+      for (const id of snapshot.allIds) {
+        const value = categoryValue(snapshot.colorData[id]);
+        values.set(categoryKey(value), value);
+      }
+      const counts = /* @__PURE__ */ new Map();
+      for (const id of snapshot.chartIds) {
+        const key = categoryKey(snapshot.colorData[id]);
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+      const selected = settings.filters.filter(
+        (filter) => filter.type === "value" && filter.field === settings.colorField
+      ).flatMap((filter) => filter.values);
+      legend = {
+        field: settings.colorField,
+        scaleId: scale.id,
+        type: "categorical",
+        palette: [...scale.palette],
+        items: [...values].map(([id, value]) => ({
+          id,
+          value,
+          label: hasFieldDisplayFormat(
+            snapshot.fieldSettings[settings.colorField]
+          ) ? formatFieldValue(
+            settings.colorField,
+            value,
+            snapshot.fieldSettings[settings.colorField]
+          ) : categoryLabel(value),
+          count: counts.get(id) ?? 0,
+          color: getColor(value),
+          selected: categoryIncludes(selected, value)
+        }))
+      };
+    } else {
+      legend = {
+        field: settings.colorField,
+        scaleId: scale.id,
+        type: "numerical",
+        palette: scale.palette,
+        domain: [scale.min, scale.max],
+        items: []
+      };
+    }
+  }
+  return {
+    revision: snapshot.revision,
+    width,
+    height,
+    margin,
+    plotWidth,
+    plotHeight,
+    clipWidth: Math.max(0, plotWidth),
+    clipHeight: Math.max(0, plotHeight),
+    pixelRatio: snapshot.pixelRatio ?? 1,
+    calculatedBadges,
+    xScale: { type: xType, domain: xDomain, range: [0, plotWidth] },
+    yScale: { type: yType, domain: actualYDomain, range: [plotHeight, 0] },
+    title,
+    description: [
+      `Interactive scatter chart.`,
+      settings.xAxisLabel && `Horizontal axis: ${settings.xAxisLabel}.`,
+      settings.yAxisLabel && `Vertical axis: ${settings.yAxisLabel}.`
+    ].filter(Boolean).join(" "),
+    axes,
+    domainInputs: {
+      x: [xMin, xMax],
+      y: [yMin, yMax],
+      buffer: 0.1,
+      population: "all"
+    },
+    legend,
+    brushExtent,
+    pointStyle,
+    points,
+    exclusions: ids.filter((id) => !included.has(id)).map((sourceId) => ({
+      sourceId,
+      reason: !Number.isFinite(numeric(snapshot.xData[sourceId])) ? "invalid-x" : !Number.isFinite(numeric(snapshot.yData[sourceId])) ? "invalid-y" : "nonfinite-position"
+    })),
+    populations: {
+      all: snapshot.allIds.length,
+      chart: snapshot.chartIds.length,
+      filtered: snapshot.filteredIds.length,
+      facet: ids.length
+    },
+    rowSets: {
+      all: snapshot.allIds,
+      chart: snapshot.chartIds,
+      filtered: snapshot.filteredIds,
+      facet: ids
+    },
+    xField: settings.xField,
+    yField: settings.yField,
+    xDisplay: xLabel,
+    yDisplay: yLabel,
+    fieldSettings: snapshot.fieldSettings
+  };
+}
+function scatterPointReadout(plan, point) {
+  return {
+    xText: display(plan.xField, point.xValue, plan.fieldSettings),
+    yText: display(plan.yField, point.yValue, plan.fieldSettings)
+  };
+}
+function scatterHoverReadout(plan, snapshot, settings, point) {
+  const value = (field, item) => hasFieldDisplayFormat(snapshot.fieldSettings[field]) ? formatFieldValue(field, item, snapshot.fieldSettings[field]) : categoryLabel(item);
+  return {
+    ...scatterPointReadout(plan, point),
+    colorText: settings.colorField ? value(settings.colorField, point.colorValue) : void 0,
+    facetRowText: settings.facet.enabled ? value(
+      settings.facet.rowVariable,
+      snapshot.facetRowData?.[point.sourceId]
+    ) : void 0,
+    facetColumnText: settings.facet.enabled && settings.facet.type === "grid" ? value(
+      settings.facet.columnVariable,
+      snapshot.facetColumnData?.[point.sourceId]
+    ) : void 0
+  };
+}
+function brushFilters(plan, extent) {
+  const xScale = numericScale({ scaleType: plan.xScale.type }).domain(plan.xScale.domain).range(plan.xScale.range);
+  const yScale = numericScale({ scaleType: plan.yScale.type }).domain(plan.yScale.domain).range(plan.yScale.range);
+  return {
+    x: [
+      Math.min(xScale.invert(extent[0][0]), xScale.invert(extent[1][0])),
+      Math.max(xScale.invert(extent[0][0]), xScale.invert(extent[1][0]))
+    ],
+    y: [
+      Math.min(yScale.invert(extent[0][1]), yScale.invert(extent[1][1])),
+      Math.max(yScale.invert(extent[0][1]), yScale.invert(extent[1][1]))
+    ]
+  };
+}
+function planScatterOverlay(plan, extent, hoveredId) {
+  const brush = [];
+  if (extent) {
+    const [[x0, y0], [x1, y1]] = extent;
+    brush.push({
+      kind: "rect",
+      id: "brush",
+      x: x0,
+      y: y0,
+      width: Math.max(0, x1 - x0),
+      height: Math.max(0, y1 - y0),
+      fill: "var(--primary)",
+      fillOpacity: 0.09,
+      stroke: "var(--primary)",
+      strokeWidth: 1.25,
+      cursor: "move"
+    });
+    for (const [i, x] of [x0, x1].entries()) {
+      brush.push({
+        kind: "rect",
+        id: `brush:x:${i}`,
+        x: x - 2,
+        y: (y0 + y1) / 2 - 8,
+        width: 4,
+        height: 16,
+        rx: 2,
+        fill: "var(--primary)",
+        cursor: "ew-resize"
+      });
+    }
+    for (const [i, y] of [y0, y1].entries()) {
+      brush.push({
+        kind: "rect",
+        id: `brush:y:${i}`,
+        x: (x0 + x1) / 2 - 8,
+        y: y - 2,
+        width: 16,
+        height: 4,
+        rx: 2,
+        fill: "var(--primary)",
+        cursor: "ns-resize"
+      });
+    }
+  }
+  const point = plan.points.find((item) => item.id === hoveredId);
+  const readout = [];
+  let readoutLabel;
+  if (point) {
+    const { x, y, color } = point;
+    const { xText, yText } = scatterPointReadout(plan, point);
+    readoutLabel = `Source row ${point.sourceId}; ${plan.xDisplay}: ${xText}; ${plan.yDisplay}: ${yText}`;
+    const xWidth = xText.length * 6 + 12;
+    const yWidth = yText.length * 6 + 12;
+    const labelX = Math.max(
+      xWidth / 2,
+      Math.min(plan.plotWidth - xWidth / 2, x)
+    );
+    readout.push(
+      {
+        kind: "line",
+        id: "readout:x-rule",
+        x1: x,
+        x2: x,
+        y1: y,
+        y2: plan.plotHeight + 3,
+        stroke: color,
+        strokeOpacity: 0.4,
+        strokeWidth: 1,
+        strokeDasharray: "2 3"
+      },
+      {
+        kind: "line",
+        id: "readout:y-rule",
+        x1: x,
+        x2: 0,
+        y1: y,
+        y2: y,
+        stroke: color,
+        strokeOpacity: 0.4,
+        strokeWidth: 1,
+        strokeDasharray: "2 3"
+      },
+      {
+        kind: "circle",
+        id: "readout:ring",
+        cx: x,
+        cy: y,
+        r: point.radius + 5,
+        fill: "none",
+        stroke: "var(--primary)",
+        strokeWidth: 2.5
+      },
+      { kind: "circle", id: "readout:center", cx: x, cy: y, r: 2, fill: color },
+      {
+        kind: "rect",
+        id: "readout:x-bg",
+        x: labelX - xWidth / 2,
+        y: plan.plotHeight + 5,
+        width: xWidth,
+        height: 20,
+        fill: "var(--card)"
+      },
+      {
+        kind: "rect",
+        id: "readout:y-bg",
+        x: -yWidth - 3,
+        y: y - 10,
+        width: yWidth,
+        height: 20,
+        fill: "var(--card)"
+      },
+      {
+        kind: "text",
+        id: "readout:x-text",
+        x: labelX,
+        y: plan.plotHeight + 18,
+        text: xText,
+        fill: color,
+        fontSize: 10,
+        fontWeight: 600,
+        textAnchor: "middle"
+      },
+      {
+        kind: "text",
+        id: "readout:y-text",
+        x: -8,
+        y,
+        dy: ".32em",
+        text: yText,
+        fill: color,
+        fontSize: 10,
+        fontWeight: 600,
+        textAnchor: "end"
+      }
+    );
+  }
+  return {
+    brush,
+    readout,
+    readoutLabel
+  };
+}
+function Primitive({
+  item,
+  selected
+}) {
+  if (item.kind === "line") {
+    const { kind: kind2, id: id2, hitStrokeWidth, ...props2 } = item;
+    const hasHitTarget = hitStrokeWidth !== void 0;
+    const line = /* @__PURE__ */ jsx(
+      "line",
+      {
+        "data-plan-id": id2,
+        ...props2,
+        style: selected ? { stroke: "var(--primary)" } : void 0,
+        strokeOpacity: selected ? 1 : item.strokeOpacity,
+        strokeWidth: selected ? 2.5 : item.strokeWidth,
+        pointerEvents: hasHitTarget ? "none" : void 0
+      }
+    );
+    return hasHitTarget ? /* @__PURE__ */ jsxs("g", { children: [
+      line,
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          "data-plan-id": id2,
+          x1: item.x1,
+          y1: item.y1,
+          x2: item.x2,
+          y2: item.y2,
+          stroke: "transparent",
+          strokeWidth: hitStrokeWidth,
+          pointerEvents: "stroke"
+        }
+      )
+    ] }) : line;
+  }
+  if (item.kind === "rect") {
+    const { kind: kind2, id: id2, cursor, ...props2 } = item;
+    return /* @__PURE__ */ jsx("rect", { "data-plan-id": id2, ...props2, style: { cursor } });
+  }
+  if (item.kind === "circle") {
+    const { kind: kind2, id: id2, ...props2 } = item;
+    return /* @__PURE__ */ jsx("circle", { "data-plan-id": id2, ...props2 });
+  }
+  const { kind, id, title, text, ...props } = item;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      "data-plan-id": id,
+      ...props,
+      "aria-label": title,
+      fill: selected ? "var(--primary)" : item.fill,
+      textDecoration: selected ? "underline" : void 0,
+      children: text
+    }
+  );
+}
+function Primitives({
+  items,
+  selectedId
+}) {
+  return items.map((item) => /* @__PURE__ */ jsx(Primitive, { item, selected: item.id === selectedId }, item.id));
+}
+function ScatterSvg({
+  plan,
+  hoveredId,
+  onBrushChange,
+  onInspectPoint,
+  onInspectGuide,
+  onInspectOverlay,
+  selectedId
+}) {
+  const svgRef = useRef(null);
+  const altAtDown = useRef(false);
+  const [hoveredGuideId, setHoveredGuideId] = useState(null);
+  const [altHover, setAltHover] = useState(false);
+  const chartId = useId();
+  const brush = useBrush({
+    svgRef,
+    marginLeft: plan.margin.left,
+    marginTop: plan.margin.top,
+    innerWidth: plan.plotWidth,
+    innerHeight: plan.plotHeight,
+    mode: "2d",
+    onBrushChange,
+    onPlotClick: (_, event) => event.altKey || altAtDown.current,
+    defaultExtent: plan.brushExtent
+  });
+  const overlay = planScatterOverlay(plan, brush.extent ?? null, hoveredId);
+  if (plan.width < 1 || plan.height < 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      width: plan.width,
+      height: plan.height,
+      role: "group",
+      "aria-label": plan.title,
+      "aria-describedby": `${chartId}-description`,
+      className: "absolute select-none",
+      style: {
+        cursor: altHover && (hoveredId || hoveredGuideId) ? "pointer" : brush.getCursor(),
+        touchAction: "none"
+      },
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        const id = event.target.closest("[data-plan-id]")?.getAttribute("data-plan-id");
+        if (event.altKey && event.key === "Enter" && id && findAxisGuide(plan.axes, id)) {
+          event.preventDefault();
+          event.stopPropagation();
+          onInspectGuide(id);
+          return;
+        }
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          brush.clear();
+        }
+      },
+      onPointerDownCapture: (event) => {
+        altAtDown.current = event.altKey;
+        brush.handlePointerDown(event);
+      },
+      onPointerMoveCapture: (event) => {
+        brush.handlePointerMove(event);
+        setAltHover(event.altKey);
+        const id = event.target.closest("[data-plan-id]")?.getAttribute("data-plan-id");
+        setHoveredGuideId(
+          event.altKey && id && findAxisGuide(plan.axes, id) ? id : null
+        );
+      },
+      onPointerLeave: () => {
+        setHoveredGuideId(null);
+        setAltHover(false);
+      },
+      onPointerUpCapture: brush.handlePointerUp,
+      onPointerCancel: brush.cancel,
+      onLostPointerCapture: brush.cancel,
+      onClick: (event) => {
+        if (!event.altKey || brush.wasDrag.current) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left - plan.margin.left;
+        const y = event.clientY - rect.top - plan.margin.top;
+        if (x >= 0 && x <= plan.plotWidth && y >= 0 && y <= plan.plotHeight && onInspectPoint(x, y))
+          return;
+        const id = event.target.closest("[data-plan-id]")?.getAttribute("data-plan-id");
+        if (id && findAxisGuide(plan.axes, id)) {
+          onInspectGuide(id);
+          return;
+        }
+        if (id && overlay.brush.some((item) => item.id === id)) {
+          onInspectOverlay(id);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("desc", { id: `${chartId}-description`, children: plan.description }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `${chartId}-plot`, children: /* @__PURE__ */ jsx("rect", { width: plan.clipWidth, height: plan.clipHeight }) }) }),
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${plan.margin.left},${plan.margin.top})`, children: [
+          /* @__PURE__ */ jsx("g", { clipPath: `url(#${chartId}-plot)`, children: /* @__PURE__ */ jsx(
+            PlannedGrid,
+            {
+              plan: plan.axes,
+              interactive: true,
+              activeId: hoveredGuideId ?? selectedId
+            }
+          ) }),
+          /* @__PURE__ */ jsx("g", { className: "eda-brush", clipPath: `url(#${chartId}-plot)`, children: /* @__PURE__ */ jsx(Primitives, { items: overlay.brush }) }),
+          /* @__PURE__ */ jsx(
+            PlannedAxes,
+            {
+              plan: plan.axes,
+              interactive: true,
+              activeId: hoveredGuideId ?? selectedId
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              className: "eda-axis-readout",
+              role: overlay.readoutLabel ? "img" : void 0,
+              "aria-label": overlay.readoutLabel,
+              pointerEvents: "none",
+              children: /* @__PURE__ */ jsx(Primitives, { items: overlay.readout })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/charts/ScatterPlot/scatterTrace.ts
+function sourceFields(trace) {
+  const calculated = new Set(trace.dependencies.map((item) => item.field));
+  return [
+    .../* @__PURE__ */ new Set([
+      ...trace.inputs.filter((item) => !calculated.has(item.field)).map((item) => item.field),
+      ...trace.dependencies.flatMap(sourceFields)
+    ])
+  ];
+}
+function resolveScatterTrace(selection, plan, snapshot, settings, rawRows, preparedRows, profiles, manager) {
+  if (selection.kind === "guide")
+    return resolveGuideTrace(plan.axes, selection.id, plan.revision);
+  if (selection.kind === "badge") {
+    const badge = plan.calculatedBadges.find(
+      (item) => item.id === selection.id
+    );
+    if (!badge) return void 0;
+    return { kind: "badge", id: badge.id, revision: plan.revision, badge };
+  }
+  if (selection.kind === "overlay") {
+    const primitive = planScatterOverlay(
+      plan,
+      plan.brushExtent,
+      null
+    ).brush.find((item) => item.id === selection.id);
+    if (!primitive) return void 0;
+    return {
+      kind: "overlay",
+      id: selection.id,
+      revision: plan.revision,
+      primitive,
+      extent: plan.brushExtent,
+      filters: settings.filters.filter(
+        (filter) => filter.type === "range" && (filter.field === settings.xField || filter.field === settings.yField)
+      )
+    };
+  }
+  const conversionFor = (field, raw) => {
+    const fieldSetting = snapshot.fieldSettings[field] ?? {};
+    const applied = Boolean(
+      fieldSetting.type || fieldSetting.datePreset || fieldSetting.nullTokens?.length
+    );
+    const type = fieldSetting.type ?? profiles.find((item) => item.name === field)?.dataType;
+    return applied && type ? { type, error: convertFieldValue(raw, type, fieldSetting).error } : void 0;
+  };
+  const fieldTrace = (field, value, sourceId) => {
+    const raw = rawRows[sourceId]?.[field];
+    const calculation = manager.traceRow(field, sourceId);
+    const conversion = calculation ? void 0 : conversionFor(field, raw);
+    const sources = calculation ? sourceFields(calculation).map((name) => ({
+      field: name,
+      raw: rawRows[sourceId]?.[name],
+      prepared: preparedRows[sourceId]?.[name],
+      conversion: conversionFor(name, rawRows[sourceId]?.[name])
+    })) : [];
+    return { field, raw, prepared: value, conversion, calculation, sources };
+  };
+  if (selection.kind === "point") {
+    const point = plan.points.find((item) => item.id === selection.id);
+    if (!point) return void 0;
+    return {
+      kind: "point",
+      id: point.id,
+      revision: plan.revision,
+      plan,
+      sourceId: point.sourceId,
+      x: {
+        ...fieldTrace(settings.xField, point.xValue, point.sourceId),
+        pixel: point.x
+      },
+      y: {
+        ...fieldTrace(settings.yField, point.yValue, point.sourceId),
+        pixel: point.y
+      },
+      color: settings.colorField ? {
+        ...fieldTrace(
+          settings.colorField,
+          point.colorValue,
+          point.sourceId
+        ),
+        mapped: point.mappedColor,
+        rendered: point.color
+      } : void 0,
+      facet: settings.facet.enabled && snapshot.facetIds?.length ? {
+        type: settings.facet.type,
+        row: fieldTrace(
+          settings.facet.rowVariable,
+          snapshot.facetRowData?.[point.sourceId],
+          point.sourceId
+        ),
+        column: settings.facet.type === "grid" ? fieldTrace(
+          settings.facet.columnVariable,
+          snapshot.facetColumnData?.[point.sourceId],
+          point.sourceId
+        ) : void 0,
+        sourceRows: snapshot.facetIds.length,
+        chartRows: plan.populations.facet
+      } : void 0,
+      radius: point.radius,
+      opacity: point.opacity,
+      passesOwnFilter: point.passesOwnFilter,
+      passesAllFilters: point.passesAllFilters,
+      hover: scatterHoverReadout(plan, snapshot, settings, point)
+    };
+  }
+  if (selection.kind === "excluded") {
+    const sourceId = Number(selection.id);
+    const exclusion = plan.exclusions.find(
+      (item) => item.sourceId === sourceId
+    );
+    if (!exclusion) return void 0;
+    return {
+      kind: "excluded",
+      id: selection.id,
+      revision: plan.revision,
+      sourceId,
+      reason: exclusion.reason,
+      x: fieldTrace(settings.xField, snapshot.xData[sourceId], sourceId),
+      y: fieldTrace(settings.yField, snapshot.yData[sourceId], sourceId)
+    };
+  }
+  return void 0;
+}
+function scatterTraceTargets(plan) {
+  return [
+    ...guideTargets(plan.axes),
+    ...planScatterOverlay(plan, plan.brushExtent, null).brush.map(({ id }) => ({
+      kind: "overlay",
+      id,
+      label: id
+    })),
+    ...plan.calculatedBadges.map((badge) => ({
+      kind: "badge",
+      id: badge.id,
+      label: `Calculated: ${badge.field}`
+    }))
+  ];
+}
+function findScatterTraceRow(plan, id) {
+  const point = plan.points.find((item) => item.sourceId === id);
+  if (point) return { kind: "point", id: point.id };
+  return plan.exclusions.some((item) => item.sourceId === id) ? { kind: "excluded", id: String(id) } : void 0;
+}
+function ScatterPlot({
+  settings,
+  width,
+  height,
+  facetIds
+}) {
+  const [hoveredId, setHoveredId] = useState(null);
+  const trace = useChartTrace();
+  const traceApi = useChartTraceApi();
+  const owner = useId();
+  const canvasRef = useRef(null);
+  const data = useDataLayer((state) => state.data);
+  const rawData = useDataLayer((state) => state.rawData);
+  const profiles = useDataLayer((state) => state.fieldProfiles);
+  const manager = useDataLayer((state) => state.calculationManager);
+  const calculations = useDataLayer((state) => state.calculations);
+  const nonce = useDataLayer((state) => state.nonce);
+  const chartItems = useDataLayer((state) => state.liveItems[settings.id]);
+  const crossfilter = useDataLayer((state) => state.crossfilterWrapper);
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const fieldSettings = useDataLayer((state) => state.fieldSettings);
+  const colorScale = useDataLayer(
+    (state) => state.colorScales.find((item) => item.id === settings.colorScaleId)
+  );
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const allIds = useMemo(() => data.map((row) => row.__ID), [data]);
+  const snapshot = useMemo(() => {
+    const chartIds = chartItems?.items.filter((item) => item.value > 0).map((item) => item.key) ?? [];
+    const column = (field) => field ? getColumnData(field) : {};
+    return {
+      revision: `${nonce}:${chartItems?.nonce ?? 0}`,
+      allIds,
+      chartIds,
+      filteredIds: crossfilter.getFilteredRowIds(),
+      facetIds: facetIds?.slice(),
+      xData: column(settings.xField),
+      yData: column(settings.yField),
+      colorData: column(settings.colorField),
+      facetRowData: settings.facet.enabled ? column(settings.facet.rowVariable) : void 0,
+      facetColumnData: settings.facet.enabled && settings.facet.type === "grid" ? column(settings.facet.columnVariable) : void 0,
+      fieldSettings: Object.fromEntries(
+        Object.entries(fieldSettings).map(([field, value]) => [
+          field,
+          { ...value }
+        ])
+      ),
+      colorScale: colorScale?.type === "categorical" ? {
+        ...colorScale,
+        mapping: new Map(colorScale.mapping),
+        palette: [...colorScale.palette]
+      } : colorScale && { ...colorScale },
+      calculatedFields: calculations.map((calc) => calc.resultColumnName),
+      pixelRatio: typeof window === "undefined" ? 1 : window.devicePixelRatio || 1
+    };
+  }, [
+    allIds,
+    chartItems,
+    crossfilter,
+    getColumnData,
+    fieldSettings,
+    colorScale,
+    calculations,
+    nonce,
+    settings.xField,
+    settings.yField,
+    settings.colorField,
+    settings.facet,
+    facetIds
+  ]);
+  const plan = useMemo(
+    () => planScatter(settings, snapshot, width, height),
+    [settings, snapshot, width, height]
+  );
+  const source = useMemo(
+    () => ({
+      role: "chart",
+      revision: plan.revision,
+      resolve: (kind, id) => resolveScatterTrace(
+        { kind, id },
+        plan,
+        snapshot,
+        settings,
+        rawData,
+        data,
+        profiles,
+        manager
+      ),
+      findRow: (id) => findScatterTraceRow(plan, id),
+      targets: () => scatterTraceTargets(plan),
+      legendItems: plan.legend?.type === "categorical" ? plan.legend.items : void 0
+    }),
+    [plan, snapshot, settings, rawData, data, profiles, manager]
+  );
+  useTraceSource(owner, source);
+  const choose = (kind, id) => traceApi?.inspect(owner, kind, id);
+  const activeSelection = trace?.selection?.owner === owner ? trace.selection : null;
+  const pointAt = (x, y) => {
+    let nearest;
+    let distance = 100;
+    for (const point of plan.points) {
+      const dx = point.x - x;
+      const dy = point.y - y;
+      const squared = dx * dx + dy * dy;
+      if (squared < distance) {
+        nearest = point;
+        distance = squared;
+      }
+    }
+    return nearest;
+  };
+  const hoveredPoint = plan.points.find((point) => point.id === hoveredId);
+  const hoveredText = hoveredPoint && scatterHoverReadout(plan, snapshot, settings, hoveredPoint);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const dpr = plan.pixelRatio;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, height);
+    ctx.translate(plan.margin.left, plan.margin.top);
+    ctx.beginPath();
+    ctx.rect(0, 0, plan.plotWidth, plan.plotHeight);
+    ctx.clip();
+    for (const point of plan.points) {
+      ctx.fillStyle = point.color;
+      ctx.globalAlpha = point.opacity;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [plan, width, height]);
+  const handleBrushChange = useCallback(
+    (extent) => {
+      const filters = settings.filters.filter(
+        (filter) => filter.field !== settings.xField && filter.field !== settings.yField
+      );
+      if (extent) {
+        const next = brushFilters(plan, extent);
+        filters.push({
+          type: "range",
+          field: settings.xField,
+          min: next.x[0],
+          max: next.x[1]
+        });
+        filters.push({
+          type: "range",
+          field: settings.yField,
+          min: next.y[0],
+          max: next.y[1]
+        });
+      }
+      updateChart(settings.id, { filters });
+    },
+    [plan, settings, updateChart]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { width, height },
+      className: "relative",
+      onPointerLeave: () => setHoveredId(null),
+      onPointerDownCapture: () => setHoveredId(null),
+      onKeyDownCapture: (event) => {
+        if (event.key === "Escape") {
+          setHoveredId(null);
+        }
+      },
+      onPointerMove: (event) => {
+        if (event.buttons) {
+          return;
+        }
+        const bounds2 = event.currentTarget.getBoundingClientRect();
+        const px = event.clientX - bounds2.left - plan.margin.left;
+        const py = event.clientY - bounds2.top - plan.margin.top;
+        if (px < 0 || px > plan.plotWidth || py < 0 || py > plan.plotHeight) {
+          setHoveredId(null);
+          return;
+        }
+        setHoveredId(pointAt(px, py)?.id ?? null);
+      },
+      children: plan.populations.facet > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute inset-0 pointer-events-none",
+            style: { width, height }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScatterSvg,
+          {
+            plan,
+            hoveredId,
+            onBrushChange: handleBrushChange,
+            onInspectPoint: (x, y) => {
+              const point = pointAt(x, y);
+              if (!point) return false;
+              return Boolean(choose("point", point.id));
+            },
+            onInspectGuide: (id) => choose("guide", id),
+            onInspectOverlay: (id) => choose("overlay", id),
+            selectedId: activeSelection?.kind === "guide" ? activeSelection.id : void 0
+          }
+        ),
+        plan.calculatedBadges.map((badge) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `eda-scatter-axis-calc ${badge.rotation ? "eda-scatter-axis-calc-y" : ""}`,
+            style: { left: badge.x, top: badge.y },
+            onClickCapture: (event) => {
+              if (!event.altKey) return;
+              event.stopPropagation();
+              choose("badge", badge.id);
+            },
+            children: /* @__PURE__ */ jsx(
+              CalculatedFieldBadge,
+              {
+                field: badge.field,
+                hoverOpen: false,
+                side: badge.rotation ? "right" : "top"
+              }
+            )
+          },
+          badge.id
+        )),
+        hoveredPoint && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-none absolute left-2 top-2 max-w-[min(16rem,70%)] rounded border border-border bg-card/95 px-2 py-1 text-xs text-card-foreground shadow-sm",
+            role: "status",
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                plan.xDisplay,
+                ": ",
+                hoveredText?.xText
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                plan.yDisplay,
+                ": ",
+                hoveredText?.yText
+              ] }),
+              settings.colorField && /* @__PURE__ */ jsxs("div", { children: [
+                "Color \xB7 ",
+                settings.colorField,
+                ": ",
+                hoveredText?.colorText
+              ] }),
+              settings.facet.enabled && /* @__PURE__ */ jsxs("div", { children: [
+                "Facet ",
+                settings.facet.rowVariable,
+                ":",
+                " ",
+                hoveredText?.facetRowText,
+                settings.facet.type === "grid" && ` \xB7 ${settings.facet.columnVariable}: ${hoveredText?.facetColumnText}`
+              ] })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No data available" })
+    }
+  );
+}
+
+// src/components/charts/ScatterPlot/definition.ts
+var scatterPlotDefinition = {
+  type: "scatter",
+  name: "Scatter Plot",
+  description: "Display data as points in a 2D space",
+  icon: ScatterChart,
+  component: ScatterPlot,
+  settingsPanel: ScatterPlotSettingsPanel,
+  createDefaultSettings: (layout, field) => ({
+    ...DEFAULT_CHART_SETTINGS,
+    id: crypto.randomUUID(),
+    type: "scatter",
+    title: "Scatter Plot",
+    layout,
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
+    xField: "__ID",
+    yField: field ?? "",
+    filters: []
+  }),
+  validateSettings: (settings) => {
+    return !!settings.xField && !!settings.yField;
+  },
+  getFilterFunction: (settings, fieldGetter) => {
+    const filters = settings.filters.map((filter) => ({
+      filter,
+      values: fieldGetter(filter.field)
+    }));
+    return (id) => filters.every(({ filter, values }) => applyFilter(values[id], filter));
+  }
+};
+
+export { scatterPlotDefinition };
+//# sourceMappingURL=chunk-C62KHV7S.js.map
+//# sourceMappingURL=chunk-C62KHV7S.js.map