flexdesk 0.17.6 → 0.17.8

package/dist/flexdesk.css

@@ -9593,6 +9593,74 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 
 
+/* ══ OVERLAY SCROLLBARS (0.17.7) ═════════════════════════════════════
+ *
+ * `installOverlayScrollbar(container, { orientation })`
+ * (src/ui/utils/overlay_scrollbar.js) appends a `.overlay-scrollbar-v` or
+ * `.overlay-scrollbar-h` holding a `.track` and a `.thumb`, and sets their
+ * top/left/height/width from the container's scroll position. The bar is
+ * absolute, so it takes no layout space: a static bar is content, its height
+ * feeds the container's scrollHeight, and the container grows without limit
+ * (BUG-0039). The script sets `data-scrollable` on the container and drives
+ * the bar's opacity and pointer events itself (shown on hover or focus while
+ * the container overflows, kept while the thumb is dragged); these rules are
+ * the hidden starting state, the geometry and the colours. The bar takes no
+ * pointer events, so content under it stays clickable; the thumb takes them
+ * back to be dragged. */
+.overlay-scrollbar-v,
+.overlay-scrollbar-h {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+    z-index: var(--z-scrollbar);
+}
+.overlay-scrollbar-v {
+    top: 0;
+    right: 0;
+    width: var(--scrollbar-size);
+}
+.overlay-scrollbar-h {
+    left: 0;
+    bottom: 0;
+    height: var(--scrollbar-size);
+}
+.overlay-scrollbar-v .track,
+.overlay-scrollbar-h .track {
+    position: absolute;
+    inset: 0;
+    background: var(--scrollbar-track);
+    border-radius: var(--scrollbar-radius);
+}
+.overlay-scrollbar-v .thumb,
+.overlay-scrollbar-h .thumb {
+    position: absolute;
+    background: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-radius);
+    pointer-events: auto;
+    cursor: pointer;
+    transition: background 80ms ease;
+}
+.overlay-scrollbar-v .thumb {
+    right: 0;
+    width: 100%;
+    min-height: 30px;
+}
+.overlay-scrollbar-h .thumb {
+    bottom: 0;
+    height: 100%;
+    min-width: 30px;
+}
+.overlay-scrollbar-v .thumb:hover,
+.overlay-scrollbar-h .thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+}
+.overlay-scrollbar-v .thumb:active,
+.overlay-scrollbar-h .thumb:active {
+    background: var(--scrollbar-thumb-active);
+}
+
+
 /* ══ RECORD LIST & FACT SHEET (0.7.0) ══════════════════════════════════
  * `createRecordList` (src/ui/components/record_list.js) and
  * `createFactTable` (src/ui/components/fact_table.js). Neither has a height
@@ -10740,8 +10808,8 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 /* ══ SERIES TRANSFORMS ═══════════════════════════════════════════════
  *
  * `renderSeriesTransformControls` (src/charts/series_transforms.js): per
- * injected transform, a group with a toggle per output and a number field per
- * parameter, in a subplot's config. */
+ * injected transform, a group with a toggle per output and a number field (or,
+ * for a choice parameter, a select) per parameter, in a subplot's config. */
 .twm-series-transforms {
     display: flex;
     flex-direction: column;
@@ -10781,6 +10849,13 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .twm-series-transforms__param:disabled {
     opacity: 0.5;
 }
+/* A choice parameter's select (0.17.8): as wide as its option labels. */
+.twm-series-transforms__select {
+    width: auto;
+    min-width: 96px;
+    max-width: 60%;
+    cursor: pointer;
+}
 /* ══ end SERIES TRANSFORMS ══ */
 
 /* ══ PLOT GRID ════════════════════════════════════════════════════════

package/dist/tiles.js

@@ -35,7 +35,7 @@ import {
   purge,
   resize,
   strideDownsampleShared
-} from "./chunk-RMTRWWEO.js";
+} from "./chunk-EIYNF4BD.js";
 import "./chunk-LWV23YVE.js";
 import {
   isHexColor

package/dist/tokens.css

@@ -102,6 +102,14 @@
     --state-active:   rgba(255, 255, 255, 0.08);
     --state-selected: rgba(0, 122, 204, 0.15);
 
+    /* ── Overlay scrollbars (installOverlayScrollbar) ─────────── */
+    --scrollbar-size:         6px;
+    --scrollbar-radius:       3px;
+    --scrollbar-track:        rgba(255, 255, 255, 0.08);
+    --scrollbar-thumb:        rgba(255, 255, 255, 0.28);
+    --scrollbar-thumb-hover:  rgba(255, 255, 255, 0.38);
+    --scrollbar-thumb-active: rgba(255, 255, 255, 0.48);
+
     /* ── Shadows / elevation ──────────────────────────────────── */
     --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
     --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
@@ -119,6 +127,9 @@
        stack from 6000 to 6999 (managed_window.js), so a popover at
        --z-popover would open behind the window that opened it. */
     --z-over-windows: 7100;
+    /* An overlay scrollbar inside a scroll container: over the container's
+       content and its dropdowns, under managed windows (6000+). */
+    --z-scrollbar: 500;
 
     /* ── Transitions ──────────────────────────────────────────── */
     --transition-fast:   120ms ease;

package/docs/components/charts.md

@@ -4,6 +4,72 @@
 
 Plotly-backed charts: the wrapper, the chart types, subplot layouts, downsampling, the plot grid, the plot-config editor and the two plot windows. Plotly itself is not in the bundle; call `setPlotlySource()` with the path to your copy. The plot window's `streamEvents` option is described with the [other application-neutral options](../concepts/domain-neutrality.md#no-application-globals-the-gallery-picker-and-plot-window-events-0170).
 
+## A series transform knows its series, and takes a choice parameter (0.17.8)
+
+Two additions to [`seriesTransforms`](#derived-series-seriestransforms-0170).
+A transform written for `run(y, params)` with number parameters works exactly
+as before.
+
+**The series it runs on.** `run` gets a third argument:
+
+```js
+run(y, params, { series, subplot, results, resolveSeries })
+```
+
+`series` is the subplot's series entry the trace was drawn from (the same
+object, with its `variable` and whatever else you keep on it, such as a
+`scenario`), `subplot` the subplot config, `results` the results the figure was
+drawn from, and `resolveSeries` the `(series, results, subplot) => { y, x? }`
+the figure was drawn with (yours, or `resolveSeriesData`). `y` is still the
+drawn values, after the subplot's NaN handling and whatever your
+`resolveSeries` did to them (a rebase, say). So a transform can draw the same
+series from somewhere else, resolved the same way, instead of guessing which
+series `y` is:
+
+```js
+delta: {
+    label: 'Scenario delta',
+    params: { baseline: { label: 'Compare with', type: 'choice',
+                          options: () => scenarios.map((s) => ({ value: s.id, label: s.name })) } },
+    outputs: { difference: { label: 'Difference', suffix: ' (Δ)', lineStyle: 'dashed' } },
+    run: (y, { baseline }, { series, subplot, resolveSeries }) => {
+        const base = resolveSeries(series, resultsOf(baseline), subplot)?.y;
+        return base ? { difference: y.map((v, i) => v - base[i]) } : {};
+    },
+},
+```
+
+`renderPlotGrid`, and so `PlotPopoutWindow`, run transforms on the same
+traces as in 0.17.7, with the same derived traces: every line or scatter trace
+of the figure, overlays included, never a derived trace. A trace drawn from one
+of the subplot's series gets that series as `context.series`; any other trace,
+such as an overlay, gets `context.series` null (with `subplot`, `results` and
+`resolveSeries` still given), so a transform that needs a series, such as a
+scenario delta, skips it itself (`if (!series) return {};`).
+`deriveSeriesTraces(traces, subplot, seriesTransforms,
+{ onError, seriesOf, results, resolveSeries })` takes the same as options:
+`seriesOf(trace)` names the series a trace was drawn from (null for none); it
+only fills `context.series` and does not choose which traces are run on.
+Without these options `series`, `results` and `resolveSeries` are null.
+
+**A choice parameter.** A parameter declared `{ type: 'choice', options }` is
+a select instead of a number field. `options` is an array of
+`{ value, label }` (a bare value, a `disabled` option and a `{ group, options }`
+entry work as in the other FlexDesk selects), or a function
+`(subplot) => options`, called when the controls are drawn and also whenever
+the parameter needs its default (nothing saved, no `default`), which is on
+each redraw of the figure. It is drawn by
+`renderSeriesTransformControls` with the same select the settings view and
+the flow kit use (choice_controls' `selectBox`), so a value comes back as the
+option's own value (a number stays a number) and a saved value the list no
+longer offers stays chosen, shown as `<value> (not found)`. The pick is saved
+under `subplot.transforms.<id>.params` and passed to `run` like a number
+parameter. Without a `default` and with nothing saved, the parameter is its
+first enabled option (`{ group, options }` entries flattened in order, as the
+select draws them), in the select and in `run`.
+
+`tests/series_transforms.test.mjs` §7 to §10 pin all of it.
+
 ## A data series with no saved plot config opens (0.17.5)
 
 `openDataSeriesPlotWindow` (and `new DataSeriesPlotWindow`, the module's

package/docs/components/layout-widgets.md

@@ -36,6 +36,44 @@ at the right edge of a window that was not maximized, so those panes had no
 scrollbar at all (BUG-0036). `tests/autoscroll_resize_handle_not_cover.test.mjs`
 holds it.
 
+## `installOverlayScrollbar` is styled by flexdesk.css (0.17.7)
+
+`installOverlayScrollbar(container, { orientation })` (from
+`@flexdesk/widgets`) gives one container its own bar: a
+`.overlay-scrollbar-v` or `.overlay-scrollbar-h` element, holding a `.track`
+and a `.thumb`, appended to the container (or to its parent with
+`externalBar: true`, as `installTabsScrollbars` does). flexdesk.css styles
+it, so it works with only FlexDesk's stylesheets loaded:
+
+- **It takes no layout space.** The bar is `position: absolute` at the
+  container's right edge (vertical) or bottom edge (horizontal),
+  `--scrollbar-size` thick, on `--z-scrollbar` (over the container's content,
+  under managed windows). The script keeps it pinned to the visible edge as
+  the container scrolls.
+- **It shows on hover while the container overflows.** The script sets
+  `data-scrollable="1"` or `"0"` on the container, and shows the bar on
+  `mouseenter` and `focusin` when it is `"1"`. It hides the bar on leave,
+  unless the thumb is being dragged. The bar starts at `opacity: 0`.
+- **The thumb drags; the rest lets clicks through.** The bar takes no
+  pointer events, so content under it stays clickable. The thumb takes them
+  back (`pointer-events: auto`) and is at least 30px long.
+- **Colours are tokens** in tokens.css: `--scrollbar-track`,
+  `--scrollbar-thumb`, `--scrollbar-thumb-hover`, `--scrollbar-thumb-active`,
+  and `--scrollbar-radius` for the rounding. Override them to restyle every
+  overlay bar.
+
+The rules key on the orientation classes, so a bar created with another
+`className` (`installWorkspaceScrollbars` uses `panel-scrollbar` and
+`tabs-scrollbar`) is styled the same way. `installCollapsibleScrollbars`,
+`installTabsScrollbars` and `installWorkspaceScrollbars` all build on
+`installOverlayScrollbar`, so none of them needs embedder CSS either.
+
+Until 0.17.7 no FlexDesk stylesheet had a rule for these classes. The bar
+was `position: static`: it sat in the scroll container's flow, its height fed
+the container's content height, and the container grew without limit unless
+the embedder brought its own CSS (BUG-0039).
+`tests/overlay_scrollbar_styles.test.mjs` holds it.
+
 ## A stack of collapsible sections: `createSectionStack` (0.17.0)
 
 Inspector-style panel content: titled sections in a column, each opened and

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.6",
+    "version": "0.17.8",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/charts/plot_grid.js

@@ -84,6 +84,10 @@ function resolveSeriesData(series, results) {
  * @param {Object} [options.overlays] - `{ [series.id]: { years, values } }`, drawn for
  *        every series with an `overlay` description.
  * @param {Object} [options.seriesTransforms] - `{ [id]: transform }` (series_transforms.js).
+ *        Each runs on every line/scatter trace (overlays included, derived traces
+ *        not) as `run(y, params, { series, subplot, results, resolveSeries })`,
+ *        `series` being the subplot's series entry the trace was drawn from, or
+ *        null for an overlay.
  * @param {Function} [options.onTransformError] - `({ transformId, traceName, error })`.
  * @param {Function} [options.derivedTraces] - `(traces, subplot, { results, index })
  *        => trace[] | Promise<trace[]>`: extra traces appended to a subplot's figure.
@@ -197,6 +201,8 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
         /** The subplot's own series (overlays and derived traces aside), and how many are hidden. */
         let ownCount = 0;
         let hiddenCount = 0;
+        /** Each trace drawn from one of the subplot's series, to that series (a transform's context.series). */
+        const seriesByTrace = new Map();
 
         const useX = sp.xAxis && sp.xAxis.useTime === false && sp.xAxis.variable;
         const xData = useX
@@ -237,7 +243,7 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
                 const y = Array.isArray(resolved.y)
                     ? applyNanHandling(resolved.y, sp.nanHandling ?? 'gap', x)
                     : resolved.y;
-                traces.push(buildTrace({
+                const trace = buildTrace({
                     chartType: sp.chartType || 'line',
                     x,
                     y,
@@ -249,7 +255,9 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
                     yAxisId: yRef,
                     showMarkers: sp.showDataPoints ?? false,
                     stackGroup: s.stackGroup ?? null,
-                }));
+                });
+                traces.push(trace);
+                seriesByTrace.set(trace, s);
 
                 const overlay = s.overlay ? opts.overlays?.[s.id] : null;
                 if (!overlay?.years?.length) continue;
@@ -280,8 +288,12 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
             }
         });
 
-        traces.push(...await deriveSeriesTraces(traces, sp, opts.seriesTransforms,
-                                                { onError: opts.onTransformError ?? undefined }));
+        traces.push(...await deriveSeriesTraces(traces, sp, opts.seriesTransforms, {
+            onError: opts.onTransformError ?? undefined,
+            seriesOf: (trace) => seriesByTrace.get(trace) ?? null,
+            results: data,
+            resolveSeries: opts.resolveSeries,
+        }));
         if (opts.derivedTraces) {
             const extra = await opts.derivedTraces(traces, sp, { results: data, index });
             if (Array.isArray(extra)) traces.push(...extra);

package/src/charts/plot_popout_window.js

@@ -50,7 +50,8 @@ export class PlotPopoutWindow {
      *        renders the Config tab. What it returns is disposed (`dispose()`) when the
      *        window closes, so an editor drawn there (renderPlotConfigEditor) goes with it.
      * @param {Object} [options.seriesTransforms] - `{ [id]: transform }` (series_transforms.js);
-     *        absent => no derived series are drawn
+     *        absent => no derived series are drawn. Each runs as
+     *        `run(y, params, { series, subplot, results, resolveSeries })` (renderPlotGrid).
      * @param {string} [options.refreshEvent='data:changed'] - Bus event after which the
      *        window re-reads `getResults()` and redraws.
      * @param {{delta?: string|null, complete?: string|null}} [options.streamEvents] - Bus