flexdesk 0.16.1 → 0.17.0

package/dist/charts.js

@@ -1,10 +1,18 @@
+import {
+  AutocompleteField
+} from "./chunk-QWQJUDPD.js";
+import {
+  createTabs
+} from "./chunk-HYJYYEPK.js";
 import {
   ALL_CHART_TYPES,
   CHART_TYPES_2D,
   CHART_TYPES_3D,
   COLOR_PALETTE,
   DARK_THEME_LAYOUT,
+  DEFAULT_CHART_EXPORT_FILENAME,
   DEFAULT_CONFIG,
+  PLOT_GRID_THEME,
   PLOT_LAYOUTS,
   PlotPopoutWindow,
   applyNanHandling,
@@ -21,35 +29,48 @@ import {
   buildYAxisLayout,
   createChart,
   createChartDeferred,
+  deriveSeriesTraces,
   ensurePlotly,
   extendTraces,
+  getChartExportFilename,
   getSeriesColor,
   hasPlot,
   hexToRgba,
   is3DChart,
   lttb,
+  makeDefaultSeries,
   makeDefaultSubplot,
+  makeDefaultYAxis,
   migrateData,
   migrateSingleChart,
   openPlotPopoutWindow,
   openRawTracesWindow,
   purge,
   relayout,
+  renderPlotGrid,
+  renderSeriesTransformControls,
   resize,
+  resolveSeriesData,
   restyle,
+  setChartExportFilename,
   setPlotlySource,
   strideDownsampleShared,
   strideIndices,
   uid,
   updateChart
-} from "./chunk-RQM5Z2MU.js";
+} from "./chunk-MCIXFNVF.js";
 import {
   createRafResizeObserver
-} from "./chunk-FBGP5KN5.js";
+} from "./chunk-Q36EPT2R.js";
 import {
-  ManagedWindow
-} from "./chunk-6JSOVNID.js";
-import "./chunk-FL5KFNQH.js";
+  ColorField,
+  ManagedWindow,
+  ToggleField,
+  selectBox
+} from "./chunk-CVMCZZX2.js";
+import "./chunk-HNU6MM2B.js";
+import "./chunk-N7HC3ADV.js";
+import "./chunk-WVFGV5FT.js";
 import "./chunk-JYWURG5T.js";
 
 // src/charts/data_series_plot_window.js
@@ -243,20 +264,20 @@ var DataSeriesPlotWindow = class _DataSeriesPlotWindow {
     return section;
   }
   #buildXColumnSelect() {
-    const select = document.createElement("select");
+    const select2 = document.createElement("select");
     for (const header of this.headers) {
       if (!this._numericColumns.has(header)) continue;
       const opt = document.createElement("option");
       opt.value = header;
       opt.textContent = this.labelHeader(header);
       if (header === this._config.xColumn) opt.selected = true;
-      select.appendChild(opt);
+      select2.appendChild(opt);
     }
-    select.addEventListener("change", () => {
-      this._config.xColumn = select.value;
+    select2.addEventListener("change", () => {
+      this._config.xColumn = select2.value;
       this.#onConfigChanged();
     });
-    return select;
+    return select2;
   }
   #populateYColumns() {
     const list = this._yColumnsList;
@@ -313,16 +334,16 @@ var DataSeriesPlotWindow = class _DataSeriesPlotWindow {
     return getSeriesColor(index);
   }
   #buildSelect(options, value, onChange) {
-    const select = document.createElement("select");
+    const select2 = document.createElement("select");
     for (const opt of options) {
-      const el = document.createElement("option");
-      el.value = opt;
-      el.textContent = opt.charAt(0).toUpperCase() + opt.slice(1);
-      if (opt === value) el.selected = true;
-      select.appendChild(el);
+      const el2 = document.createElement("option");
+      el2.value = opt;
+      el2.textContent = opt.charAt(0).toUpperCase() + opt.slice(1);
+      if (opt === value) el2.selected = true;
+      select2.appendChild(el2);
     }
-    select.addEventListener("change", () => onChange(select.value));
-    return select;
+    select2.addEventListener("change", () => onChange(select2.value));
+    return select2;
   }
   #buildCheckbox(label, checked, onChange) {
     const wrapper = document.createElement("label");
@@ -663,13 +684,674 @@ function closeDataSeriesPlotWindow(seriesId) {
     _openPlotWindows.delete(seriesId);
   }
 }
+
+// src/charts/plot_config_editor.js
+var CHART_TYPE_OPTIONS = Object.freeze([
+  { group: "2D", options: CHART_TYPES_2D },
+  { group: "3D", options: CHART_TYPES_3D }
+]);
+var SCALES = Object.freeze([{ value: "linear", label: "Linear" }, { value: "log", label: "Log" }]);
+var POSITIONS = Object.freeze([{ value: "left", label: "Left" }, { value: "right", label: "Right" }]);
+var DASHES = Object.freeze([
+  { value: "solid", label: "Solid" },
+  { value: "dashed", label: "Dashed" },
+  { value: "dotted", label: "Dotted" }
+]);
+var LEGEND_POSITIONS2 = Object.freeze([
+  { value: "hidden", label: "Hidden" },
+  { value: "top", label: "Top" },
+  { value: "bottom", label: "Bottom" },
+  { value: "left", label: "Left" },
+  { value: "right", label: "Right" }
+]);
+var INTERPOLATIONS = Object.freeze([
+  { value: "linear", label: "Linear" },
+  { value: "step", label: "Step" },
+  { value: "cubic", label: "Cubic spline" }
+]);
+var NAN_STRATEGIES = Object.freeze([
+  { value: "gap", label: "Gap" },
+  { value: "zero", label: "Zero" },
+  { value: "hold", label: "Hold last value" },
+  { value: "interpolate", label: "Interpolate" }
+]);
+var X_SOURCES = Object.freeze([{ value: "time", label: "Time" }, { value: "series", label: "Series" }]);
+var OVERLAY_MODES = Object.freeze([
+  { value: "markers+lines", label: "Markers and lines" },
+  { value: "markers", label: "Markers" },
+  { value: "lines", label: "Lines" }
+]);
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = String(text);
+  return node;
+}
+function button(text, onClick, { title = null, className = "twm-btn twm-plot-config__add" } = {}) {
+  const b = el("button", className, text);
+  b.type = "button";
+  if (title) b.title = title;
+  b.addEventListener("click", () => {
+    if (!b.disabled) onClick();
+  });
+  return b;
+}
+function removeButton(title, onClick) {
+  const b = button("", onClick, { title, className: "twm-btn-icon twm-plot-config__remove" });
+  b.setAttribute("aria-label", title);
+  b.appendChild(el("span", "material-symbols-outlined", "close"));
+  return b;
+}
+function field(label, control) {
+  const single = control.matches("input, select, textarea");
+  const row = el(single ? "label" : "div", "twm-plot-config__field");
+  row.append(el("span", "twm-plot-config__label", label), control);
+  return row;
+}
+function textInput(value, onSet, { placeholder = "", label = null } = {}) {
+  const input = el("input", "twm-plot-config__input");
+  input.type = "text";
+  input.value = value ?? "";
+  input.placeholder = placeholder;
+  if (label) input.setAttribute("aria-label", label);
+  input.addEventListener("input", () => onSet(input.value));
+  return input;
+}
+function numberInput(value, onSet, { placeholder = "Auto", label = null, min = null, max = null, step = "any" } = {}) {
+  const input = el("input", "twm-plot-config__input twm-plot-config__input--number");
+  input.type = "number";
+  input.step = String(step);
+  if (min != null) input.min = String(min);
+  if (max != null) input.max = String(max);
+  input.value = value == null ? "" : String(value);
+  input.placeholder = placeholder;
+  if (label) input.setAttribute("aria-label", label);
+  input.addEventListener("change", () => {
+    const n = parseFloat(input.value);
+    onSet(Number.isFinite(n) ? n : null);
+  });
+  return input;
+}
+function select(options, value, onPick, { label = null, empty = null } = {}) {
+  const s = selectBox(options, value, {
+    label: label ?? "",
+    empty,
+    className: "twm-plot-config__input twm-plot-config__input--select"
+  });
+  s.box.addEventListener("change", () => onPick(s.valueOf()));
+  return s.box;
+}
+function makeZAxis() {
+  return { label: "", scale: "linear", min: null, max: null, step: null, variable: "" };
+}
+var editorCount = 0;
+function renderPlotConfigEditor(container, config, options = {}) {
+  const opts = {
+    onChange: null,
+    seriesProvider: null,
+    overlaySources: null,
+    seriesTransforms: null,
+    extraSeriesFields: null,
+    logger: null,
+    ...options
+  };
+  const editorId = `twm-plot-config-${++editorCount}`;
+  let fieldCount = 0;
+  let active = 0;
+  let disposed = false;
+  let bodyDisposers = [];
+  let generation = 0;
+  const notify = () => {
+    if (!disposed) opts.onChange?.(config);
+  };
+  const track = (fn) => {
+    bodyDisposers.push(fn);
+  };
+  const template = () => PLOT_LAYOUTS[config.layout] || PLOT_LAYOUTS["1x1"];
+  const slots = () => template().slots;
+  function ensureSubplots() {
+    if (!Array.isArray(config.subplots)) config.subplots = [];
+    while (config.subplots.length < slots()) {
+      config.subplots.push(makeDefaultSubplot(config.subplots.length));
+    }
+  }
+  const root = el("div", "twm-plot-config");
+  const layoutButtons = /* @__PURE__ */ new Map();
+  const picker = el("div", "twm-plot-config__layouts");
+  picker.setAttribute("role", "group");
+  picker.setAttribute("aria-label", "Layout");
+  for (const [key, tmpl] of Object.entries(PLOT_LAYOUTS)) {
+    const b = button(tmpl.label, () => setLayout(key), { className: "twm-btn twm-plot-config__layout" });
+    layoutButtons.set(key, b);
+    picker.appendChild(b);
+  }
+  const syncLayoutButtons = () => {
+    for (const [key, b] of layoutButtons) {
+      const on = key === config.layout;
+      b.setAttribute("aria-pressed", on ? "true" : "false");
+      b.classList.toggle("twm-plot-config__layout--on", on);
+    }
+  };
+  root.appendChild(section("Layout", picker));
+  const tabsHost = el("div", "twm-plot-config__tabs");
+  const body = el("div", "twm-plot-config__body");
+  root.append(tabsHost, body);
+  container.appendChild(root);
+  ensureSubplots();
+  const tabItems = () => Array.from({ length: slots() }, (_, i) => ({ id: i, label: `Subplot ${i + 1}` }));
+  const tabs = createTabs(tabsHost, {
+    items: tabItems(),
+    active: 0,
+    compact: true,
+    label: "Subplots",
+    onSelect: (id) => {
+      if (id == null || id === active) return;
+      active = id;
+      renderBody();
+    }
+  });
+  const syncChrome = () => {
+    syncLayoutButtons();
+    tabs.update(tabItems(), active);
+    tabsHost.hidden = slots() < 2;
+  };
+  function setLayout(key) {
+    if (disposed || key === config.layout) return;
+    config.layout = key;
+    ensureSubplots();
+    active = Math.min(active, slots() - 1);
+    syncChrome();
+    renderBody();
+    notify();
+  }
+  function section(title, ...children) {
+    const s = el("section", "twm-plot-config__section");
+    s.appendChild(el("h4", "twm-plot-config__heading", title));
+    for (const child of children) if (child) s.appendChild(child);
+    return s;
+  }
+  function disposeBody() {
+    generation += 1;
+    const disposers = bodyDisposers;
+    bodyDisposers = [];
+    for (const fn of disposers) {
+      try {
+        fn();
+      } catch (error) {
+        opts.logger?.warn?.("[plot config editor] a field failed to dispose", error);
+      }
+    }
+  }
+  function seriesPicker(target, key, role, sp, placeholder) {
+    let alive = true;
+    const ac = new AutocompleteField({
+      fieldId: `${editorId}-field-${++fieldCount}`,
+      field: { placeholder, value: target[key] ?? "" },
+      skipNamespacePrefix: true,
+      logger: opts.logger,
+      provider: ({ value }) => opts.seriesProvider ? opts.seriesProvider({ value, role, subplot: sp }) : [],
+      onChange: (value) => {
+        if (!alive || (target[key] ?? "") === value) return;
+        target[key] = value;
+        notify();
+      }
+    });
+    track(() => {
+      alive = false;
+      ac.dispose();
+    });
+    const node = ac.render();
+    node.classList.add("twm-plot-config__picker");
+    return node;
+  }
+  function colorField(value, onSet, label) {
+    const f = new ColorField({
+      value: value ?? "",
+      label,
+      onChange: (v) => {
+        if (v !== null) {
+          onSet(v || null);
+          notify();
+        }
+      }
+    });
+    track(() => f.dispose());
+    return f.render();
+  }
+  function toggle(label, checked, onSet) {
+    const t = new ToggleField({ label, checked, compact: true, onChange: (on) => {
+      onSet(on);
+      notify();
+    } });
+    track(() => t.dispose());
+    return t.render();
+  }
+  function listEditor(sp, key, { addLabel, makeItem, fields }) {
+    if (!Array.isArray(sp[key])) sp[key] = [];
+    const items = sp[key];
+    const wrap = el("div", "twm-plot-config__list");
+    items.forEach((item, i) => {
+      const row = el("div", "twm-plot-config__row");
+      row.append(...fields(item), removeButton("Remove", () => {
+        items.splice(i, 1);
+        renderBody();
+        notify();
+      }));
+      wrap.appendChild(row);
+    });
+    wrap.appendChild(button(addLabel, () => {
+      items.push(makeItem());
+      renderBody();
+      notify();
+    }));
+    return wrap;
+  }
+  function normalise(sp) {
+    if (!sp.xAxis) sp.xAxis = { useTime: true, variable: "" };
+    if (!Array.isArray(sp.yAxes) || !sp.yAxes.length) sp.yAxes = [makeDefaultYAxis(0)];
+    for (const axis of sp.yAxes) if (!Array.isArray(axis.series)) axis.series = [];
+    if (is3DChart(sp.chartType) && !sp.zAxis) sp.zAxis = makeZAxis();
+  }
+  function renderBody() {
+    if (disposed) return;
+    disposeBody();
+    body.replaceChildren();
+    const sp = config.subplots[active];
+    if (!sp) return;
+    normalise(sp);
+    const is3D = is3DChart(sp.chartType);
+    let sources = null;
+    const overlaySources = () => sources ??= Promise.resolve().then(() => opts.overlaySources());
+    body.append(
+      section("Subplot", field("Title", textInput(
+        sp.displayName,
+        (v) => {
+          sp.displayName = v;
+          notify();
+        },
+        { placeholder: "Untitled" }
+      ))),
+      section("Display", ...displayFields(sp)),
+      section("X axis", ...xAxisFields(sp)),
+      section("Y axes", yAxesEditor(sp, is3D, overlaySources)),
+      is3D ? section("Z axis", ...zAxisFields(sp)) : null,
+      section("Reference lines", referenceLinesEditor(sp)),
+      section("Shaded bands", shadedBandsEditor(sp)),
+      transformsSection(sp)
+    );
+  }
+  function displayFields(sp) {
+    return [
+      field("Chart type", select(CHART_TYPE_OPTIONS, sp.chartType ?? "line", (v) => {
+        const was3D = is3DChart(sp.chartType);
+        sp.chartType = v;
+        const now3D = is3DChart(v);
+        if (now3D) sp.zAxis ??= makeZAxis();
+        else sp.zAxis = null;
+        if (was3D !== now3D) renderBody();
+        notify();
+      })),
+      field("Legend", select(
+        LEGEND_POSITIONS2,
+        sp.legendPosition ?? "hidden",
+        (v) => {
+          sp.legendPosition = v;
+          notify();
+        }
+      )),
+      field("Interpolation", select(
+        INTERPOLATIONS,
+        sp.interpolation ?? "linear",
+        (v) => {
+          sp.interpolation = v;
+          notify();
+        }
+      )),
+      field("Missing values", select(
+        NAN_STRATEGIES,
+        sp.nanHandling ?? "gap",
+        (v) => {
+          sp.nanHandling = v;
+          notify();
+        }
+      )),
+      toggle("Data points", sp.showDataPoints === true, (on) => {
+        sp.showDataPoints = on;
+      })
+    ];
+  }
+  function xAxisFields(sp) {
+    const useTime = sp.xAxis.useTime !== false;
+    const out = [field("Against", select(X_SOURCES, useTime ? "time" : "series", (v) => {
+      sp.xAxis.useTime = v === "time";
+      renderBody();
+      notify();
+    }))];
+    if (!useTime) {
+      out.push(
+        field("Series", seriesPicker(sp.xAxis, "variable", "x", sp, "X series")),
+        field("Label", textInput(
+          sp.xAxis.label,
+          (v) => {
+            sp.xAxis.label = v;
+            notify();
+          },
+          { placeholder: sp.xAxis.variable || "Axis title" }
+        ))
+      );
+    }
+    return out;
+  }
+  function zAxisFields(sp) {
+    const z = sp.zAxis;
+    return [
+      field("Series", seriesPicker(z, "variable", "z", sp, "Z series")),
+      field("Label", textInput(z.label, (v) => {
+        z.label = v;
+        notify();
+      }, { placeholder: "Axis title" })),
+      field("Scale", select(SCALES, z.scale ?? "linear", (v) => {
+        z.scale = v;
+        notify();
+      })),
+      field("Min", numberInput(z.min, (v) => {
+        z.min = v;
+        notify();
+      })),
+      field("Max", numberInput(z.max, (v) => {
+        z.max = v;
+        notify();
+      })),
+      field("Step", numberInput(z.step, (v) => {
+        z.step = v;
+        notify();
+      }))
+    ];
+  }
+  function yAxesEditor(sp, is3D, overlaySources) {
+    const wrap = el("div", "twm-plot-config__axes");
+    sp.yAxes.forEach((axis, i) => wrap.appendChild(yAxisEditor(sp, axis, i, is3D, overlaySources)));
+    const add = button("Add Y axis", () => {
+      sp.yAxes.push(makeDefaultYAxis(sp.yAxes.length));
+      renderBody();
+      notify();
+    }, { title: is3D ? "A 3D chart has one Y axis" : null });
+    add.disabled = is3D;
+    wrap.appendChild(add);
+    return wrap;
+  }
+  function yAxisEditor(sp, axis, index, is3D, overlaySources) {
+    const group = el("fieldset", "twm-plot-config__axis");
+    const legend = el("legend", "twm-plot-config__axis-title", `Y axis ${index + 1}`);
+    group.appendChild(legend);
+    if (sp.yAxes.length > 1) {
+      legend.appendChild(removeButton("Remove Y axis", () => {
+        sp.yAxes.splice(index, 1);
+        renderBody();
+        notify();
+      }));
+    }
+    if (is3D && index > 0) {
+      group.disabled = true;
+      group.classList.add("twm-plot-config__axis--disabled");
+      group.title = "A 3D chart uses the first Y axis only";
+    }
+    const fields = el("div", "twm-plot-config__axis-fields");
+    fields.append(
+      field("Label", textInput(axis.label, (v) => {
+        axis.label = v;
+        notify();
+      }, { placeholder: "Axis title" })),
+      field("Scale", select(SCALES, axis.scale ?? "linear", (v) => {
+        axis.scale = v;
+        notify();
+      })),
+      field("Position", select(POSITIONS, axis.position ?? "left", (v) => {
+        axis.position = v;
+        notify();
+      })),
+      field("Min", numberInput(axis.min, (v) => {
+        axis.min = v;
+        notify();
+      })),
+      field("Max", numberInput(axis.max, (v) => {
+        axis.max = v;
+        notify();
+      })),
+      field("Step", numberInput(axis.step, (v) => {
+        axis.step = v;
+        notify();
+      }))
+    );
+    group.appendChild(fields);
+    const list = el("div", "twm-plot-config__series-list");
+    if (!axis.series.length) list.appendChild(el("div", "twm-plot-config__empty", "No series."));
+    for (const s of axis.series) list.appendChild(seriesRow(sp, axis, s, overlaySources));
+    group.appendChild(list);
+    group.appendChild(button("Add series", () => {
+      const count = sp.yAxes.reduce((n, a) => n + (a.series?.length ?? 0), 0);
+      axis.series.push(makeDefaultSeries(count));
+      renderBody();
+      notify();
+    }));
+    return group;
+  }
+  function seriesRow(sp, axis, s, overlaySources) {
+    const row = el("div", "twm-plot-config__series");
+    const main = el("div", "twm-plot-config__series-main");
+    main.append(
+      seriesPicker(s, "variable", "series", sp, "Series"),
+      textInput(s.label, (v) => {
+        s.label = v;
+        notify();
+      }, { placeholder: "Legend label", label: "Legend label" }),
+      colorField(s.color, (v) => {
+        if (v) s.color = v;
+        else delete s.color;
+      }, "Colour"),
+      numberInput(
+        s.lineWidth ?? 2,
+        (v) => {
+          s.lineWidth = v ?? 2;
+          notify();
+        },
+        { placeholder: "2", label: "Line width", min: 1, max: 10, step: 1 }
+      ),
+      select(DASHES, s.lineStyle ?? "solid", (v) => {
+        s.lineStyle = v;
+        notify();
+      }, { label: "Dash" }),
+      textInput(
+        s.stackGroup,
+        (v) => {
+          s.stackGroup = v || null;
+          notify();
+        },
+        { placeholder: "Stack group", label: "Stack group" }
+      ),
+      removeButton("Remove series", () => {
+        const i = axis.series.indexOf(s);
+        if (i >= 0) axis.series.splice(i, 1);
+        renderBody();
+        notify();
+      })
+    );
+    row.appendChild(main);
+    if (opts.extraSeriesFields) {
+      const extra = el("div", "twm-plot-config__series-extra");
+      row.appendChild(extra);
+      const handle = opts.extraSeriesFields(extra, s, { subplot: sp, axis, onChange: notify });
+      if (typeof handle?.dispose === "function") track(() => handle.dispose());
+    }
+    if (opts.overlaySources) row.appendChild(overlayEditor(s, overlaySources));
+    return row;
+  }
+  function overlayEditor(s, overlaySources) {
+    const wrap = el("div", "twm-plot-config__overlay");
+    const head = el("div", "twm-plot-config__overlay-source", "Loading overlay sources\u2026");
+    const details = el("div", "twm-plot-config__overlay-fields");
+    wrap.append(head, details);
+    const drawDetails = () => {
+      details.replaceChildren();
+      const ov = s.overlay;
+      if (!ov) return;
+      details.append(
+        field("Label", textInput(
+          ov.label,
+          (v) => {
+            ov.label = v;
+            notify();
+          },
+          { placeholder: `${s.label || s.variable || "Series"} (actual)` }
+        )),
+        field("Colour", colorField(ov.color, (v) => {
+          if (v) ov.color = v;
+          else delete ov.color;
+        }, "Overlay colour")),
+        field("Dash", select(DASHES, ov.lineStyle ?? "dashed", (v) => {
+          ov.lineStyle = v;
+          notify();
+        })),
+        field("Width", numberInput(
+          ov.lineWidth ?? 2,
+          (v) => {
+            ov.lineWidth = v ?? 2;
+            notify();
+          },
+          { placeholder: "2", min: 1, max: 10, step: 1 }
+        )),
+        field("Mode", select(OVERLAY_MODES, ov.mode ?? "markers+lines", (v) => {
+          ov.mode = v;
+          notify();
+        }))
+      );
+    };
+    const gen = generation;
+    overlaySources().then((list) => {
+      if (disposed || gen !== generation) return;
+      head.replaceChildren(field("Overlay", select(Array.isArray(list) ? list : [], s.overlay?.source, (v) => {
+        if (v === void 0) delete s.overlay;
+        else s.overlay = { ...s.overlay ?? {}, source: v };
+        drawDetails();
+        notify();
+      }, { empty: "None" })));
+      drawDetails();
+    }, () => {
+      if (disposed || gen !== generation) return;
+      head.textContent = "Could not load overlay sources.";
+      head.classList.add("twm-plot-config__overlay-source--error");
+    });
+    return wrap;
+  }
+  function referenceLinesEditor(sp) {
+    const axisOptions = sp.yAxes.map((a, i) => ({ value: a.id, label: a.label || `Y axis ${i + 1}` }));
+    return listEditor(sp, "referenceLines", {
+      addLabel: "Add reference line",
+      makeItem: () => ({ yAxisId: sp.yAxes[0].id, value: 0, label: "", lineStyle: "dashed" }),
+      fields: (line) => [
+        select(
+          axisOptions,
+          line.yAxisId ?? sp.yAxes[0].id,
+          (v) => {
+            line.yAxisId = v;
+            notify();
+          },
+          { label: "Axis" }
+        ),
+        numberInput(line.value, (v) => {
+          line.value = v;
+          notify();
+        }, { placeholder: "Value", label: "Value" }),
+        textInput(line.label, (v) => {
+          line.label = v;
+          notify();
+        }, { placeholder: "Label", label: "Label" }),
+        colorField(line.color, (v) => {
+          if (v) line.color = v;
+          else delete line.color;
+        }, "Colour"),
+        select(DASHES, line.lineStyle ?? "dashed", (v) => {
+          line.lineStyle = v;
+          notify();
+        }, { label: "Dash" })
+      ]
+    });
+  }
+  function shadedBandsEditor(sp) {
+    return listEditor(sp, "shadedBands", {
+      addLabel: "Add shaded band",
+      makeItem: () => ({ x0: null, x1: null, label: "" }),
+      fields: (band) => [
+        numberInput(band.x0, (v) => {
+          band.x0 = v;
+          notify();
+        }, { placeholder: "From", label: "From" }),
+        numberInput(band.x1, (v) => {
+          band.x1 = v;
+          notify();
+        }, { placeholder: "To", label: "To" }),
+        textInput(band.label, (v) => {
+          band.label = v;
+          notify();
+        }, { placeholder: "Label", label: "Label" }),
+        colorField(band.color, (v) => {
+          if (v) band.color = v;
+          else delete band.color;
+        }, "Colour"),
+        numberInput(band.opacity, (v) => {
+          if (v == null) delete band.opacity;
+          else band.opacity = v;
+          notify();
+        }, { placeholder: "Opacity", label: "Opacity", min: 0, max: 1, step: 0.05 })
+      ]
+    });
+  }
+  function transformsSection(sp) {
+    if (!Object.keys(opts.seriesTransforms ?? {}).length) return null;
+    const s = section("Derived series");
+    const controls = renderSeriesTransformControls(s, sp, opts.seriesTransforms, { onChange: notify });
+    track(() => controls.dispose());
+    return s;
+  }
+  syncChrome();
+  renderBody();
+  return {
+    /** Dispose every field it created and remove the editor. Later calls do nothing. */
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      disposeBody();
+      tabs.destroy();
+      root.remove();
+    },
+    /** Redraw from the config, after it was changed from outside. */
+    refresh() {
+      if (disposed) return;
+      ensureSubplots();
+      active = Math.min(active, slots() - 1);
+      syncChrome();
+      renderBody();
+    },
+    /** Bring subplot `index` to the front. */
+    selectSubplot(index) {
+      if (disposed || !Number.isInteger(index) || index < 0 || index >= slots()) return;
+      tabs.select(index);
+    },
+    /** The index of the subplot in front. */
+    get activeSubplot() {
+      return active;
+    }
+  };
+}
 export {
   ALL_CHART_TYPES,
   CHART_TYPES_2D,
   CHART_TYPES_3D,
   COLOR_PALETTE,
   DARK_THEME_LAYOUT,
+  DEFAULT_CHART_EXPORT_FILENAME,
   DEFAULT_CONFIG,
+  PLOT_GRID_THEME,
   PLOT_LAYOUTS,
   PlotPopoutWindow,
   applyNanHandling,
@@ -687,14 +1369,18 @@ export {
   closeDataSeriesPlotWindow,
   createChart,
   createChartDeferred,
+  deriveSeriesTraces,
   ensurePlotly,
   extendTraces,
+  getChartExportFilename,
   getSeriesColor,
   hasPlot,
   hexToRgba,
   is3DChart,
   lttb,
+  makeDefaultSeries,
   makeDefaultSubplot,
+  makeDefaultYAxis,
   migrateData,
   migrateSingleChart,
   openDataSeriesPlotWindow,
@@ -702,8 +1388,13 @@ export {
   openRawTracesWindow,
   purge,
   relayout,
+  renderPlotConfigEditor,
+  renderPlotGrid,
+  renderSeriesTransformControls,
   resize,
+  resolveSeriesData,
   restyle,
+  setChartExportFilename,
   setPlotlySource,
   strideDownsampleShared,
   strideIndices,