flexdesk 0.17.7 → 0.17.9

package/dist/widgets.js

@@ -17,16 +17,16 @@ import {
 import {
   TAB_LEVELS,
   createTabs
-} from "./chunk-HYJYYEPK.js";
+} from "./chunk-REJ5HLIM.js";
 import {
   ActionDropdown,
   ComponentBase,
   SlideOutPanel
-} from "./chunk-RKNFBX5K.js";
+} from "./chunk-MIW7D6WC.js";
 import {
   hideContextMenu,
   showContextMenu
-} from "./chunk-UWO43BZU.js";
+} from "./chunk-F35XSQWA.js";
 import {
   ColorListField,
   SortableList,
@@ -35,7 +35,7 @@ import {
   openForm,
   openModal,
   setModalHost
-} from "./chunk-D3COLZZ2.js";
+} from "./chunk-BE2PU3LL.js";
 import {
   ACTIONS,
   AutocompleteField,
@@ -82,7 +82,7 @@ import {
   resolvePaging,
   toTSV,
   tsvCell
-} from "./chunk-LWV23YVE.js";
+} from "./chunk-NIJEJAZ7.js";
 import {
   ColorField,
   DEFAULT_WINDOW_STORAGE_KEY,
@@ -106,7 +106,7 @@ import {
 } from "./chunk-N7HC3ADV.js";
 import {
   DragReorder
-} from "./chunk-WVFGV5FT.js";
+} from "./chunk-WUFLGETN.js";
 import "./chunk-JYWURG5T.js";
 
 // src/ui/base/controller_base.js

package/dist/wm.js

@@ -5,13 +5,13 @@ import {
 import {
   TAB_LEVELS,
   createTabs
-} from "./chunk-HYJYYEPK.js";
+} from "./chunk-REJ5HLIM.js";
 import {
   showContextMenu
-} from "./chunk-UWO43BZU.js";
+} from "./chunk-F35XSQWA.js";
 import {
   openForm
-} from "./chunk-D3COLZZ2.js";
+} from "./chunk-BE2PU3LL.js";
 import {
   ManagedWindow,
   isRowActivation
@@ -19,9 +19,9 @@ import {
 import "./chunk-HNU6MM2B.js";
 import {
   NotebookTabBar
-} from "./chunk-UURZ37SD.js";
+} from "./chunk-7U4IB65H.js";
 import "./chunk-N7HC3ADV.js";
-import "./chunk-WVFGV5FT.js";
+import "./chunk-WUFLGETN.js";
 import "./chunk-JYWURG5T.js";
 
 // src/tiling/bottom_panel_tabs.js

package/docs/components/charts.md

@@ -4,6 +4,101 @@
 
 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).
 
+## Interpolation `'auto'` is a listed choice (0.17.9)
+
+A subplot's `interpolation` is `'linear'`, `'step'`, `'cubic'` or `'auto'`.
+`'auto'` draws straight segments between the points, exactly as `'linear'`
+does (`buildTrace` gives both the Plotly line shape `linear`, as it always
+has); it is the value embedders such as EcoSim save for their plots.
+[`renderPlotConfigEditor`](#editing-a-plot-config-renderplotconfigeditor-0170)
+offered only Linear, Step and Cubic spline, so a subplot saved with `'auto'`
+opened with `auto (not found)` in **Interpolation**. The select now offers
+**Auto**, **Linear**, **Step** and **Cubic spline**: a subplot saved with
+`'auto'` opens with Auto chosen and keeps `'auto'` until you pick something
+else, and picking Auto writes `'auto'`. A new subplot is still `'linear'`
+(`makeDefaultSubplot`), and every value draws as before.
+
+`tests/plot_config_editor.test.mjs` §11 pins it.
+
+## The plot config editor writes no stray "null" (0.17.9)
+
+[`renderPlotConfigEditor`](#editing-a-plot-config-renderplotconfigeditor-0170)
+drew a subplot's sections into one body and appended the sections a subplot
+does not have as `null`, which `Element.append()` writes as the text `null`.
+So every 2D subplot showed a `null` line between the Y axes and **Reference
+lines** (where a 3D chart's **Z axis** goes), and an editor without
+`seriesTransforms` showed another after **Shaded bands** (where **Derived
+series** goes). The body now holds its sections and nothing else: a section
+the subplot does not have is left out. Nothing else about the editor changed.
+
+`tests/plot_config_editor.test.mjs` §10 pins it.
+
+## 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/menus.md

@@ -4,6 +4,35 @@
 
 `createMenuBar` draws File / Edit / View menus from one declarative model, with pointer and keyboard behaviour and the WAI-ARIA menubar roles, and plugs into the shell. `ActionDropdown` draws a dropdown of action buttons from a trigger.
 
+## Context menus stay inside the window (0.17.9)
+
+FlexDesk's own context menus: `showContextMenu(x, y, items, onAction)`, the
+DataTable's right-click menu (its copy items and your `contextMenuItems`), and
+`NotebookTabBar`'s tab menu. All three are placed the same way, however many
+items they hold:
+
+- **At most the window's height.** A menu is capped at the window's height
+  less 8px above and below. A longer menu scrolls inside (flexdesk.css gives
+  `.twm-context-menu` and `.nb-context-menu` `overflow-y: auto` and
+  `box-sizing: border-box`). Before, a menu had no cap: the DataTable's
+  opened above the window's top edge (a 101-item menu at y=-2153 in a 761px
+  window), and `showContextMenu`'s ran off the bottom. In both cases the items
+  past the edge could not be reached.
+- **At the pointer, moved only to fit.** A menu opens with its top-left
+  corner at the pointer. When that does not fit, it moves left or up just
+  enough, and never past the window's top or left edge.
+- **Every item can be reached from the keyboard.** The first enabled item has
+  focus when the menu opens. Up/Down (wrapping), Home and End move focus and
+  scroll the focused item into view inside the menu. Enter and Space choose,
+  and Escape closes. When the menu closes, focus goes back to where it was
+  (unless a click elsewhere has already moved it). The DataTable's menu and
+  the tab menu now do this too: before, only `showContextMenu` did.
+- **Scrolling the menu does not close it.** `showContextMenu` still closes
+  when the page scrolls, and the DataTable's menu when anything outside it
+  scrolls.
+
+Nothing changes in how you call them.
+
 ## A menu bar: `createMenuBar` (0.17.0)
 
 File / Edit / View menus from one declarative model, instead of hand-built
@@ -84,3 +113,15 @@ doubled rule. `setOptions` follows the same rules, and an option's
 `data-index` stays its index in `options`.
 
 `tests/action_dropdown_separators.test.mjs` drives it in jsdom.
+
+## Action dropdowns: positioning against the end edge (0.17.9)
+
+`ActionDropdown.position(trigger, menu, { align })` places any menu against
+any trigger: `position: fixed`, under the trigger when it fits there (else above it
+when it fits there, else on the side with more room, scrolling inside), and kept 8px
+inside the window. `align` says which trigger edge the menu lines up with
+first: `'start'` (the default, and what it did before) its left edge, `'end'`
+its right edge. Either flips to the other edge when the menu would leave the
+window. A tile's ⋯ menu uses `'end'`
+([Dashboard tiles](tiles.md#the--menu-is-drawn-over-the-page-0179)).
+

package/docs/components/tiles.md

@@ -13,6 +13,7 @@ Two different things in FlexDesk are called "tiles". `@flexdesk/wm` tiles the *w
 - [Figure tiles: one override, the draw is the base's (0.17.0)](#figure-tiles-one-override-the-draw-is-the-bases-0170)
 - [List and people tiles, and one scope for the board (0.16.1)](#list-and-people-tiles-and-one-scope-for-the-board-0161)
 - [A tile's settings as a form: `mountTileConfigForm` (0.17.0)](#a-tiles-settings-as-a-form-mounttileconfigform-0170)
+- [The ⋯ menu is drawn over the page (0.17.9)](#the--menu-is-drawn-over-the-page-0179)
 
 ## Layouts are keyed by whatever you key them by
 
@@ -208,3 +209,27 @@ modal is open is ignored. It answers a function that unsubscribes and closes the
 slide-out; an open modal is left to the user, keeps its form and still saves on
 Save. A renderer's `commit` on a `readonly` field applies nothing and answers
 `{valid: false, error}`.
+
+## The ⋯ menu is drawn over the page (0.17.9)
+
+A tile's **More actions** menu (`.tile-menu-dropdown`, the entries of
+`menuItems()`) is no longer drawn inside the tile. While it is open it is
+moved to `document.body` (or to the open modal's host, as `showContextMenu`
+does) and placed with `ActionDropdown.position(button, menu, { align: 'end' })`:
+
+- **Nothing clips it.** It is `position: fixed`, on `--z-over-windows`, so it
+  draws over neighbouring tiles, and over the managed window a grid sits in.
+- **It stays in the window.** Its right edge lines up with the ⋯ button's
+  when there is room; otherwise its left edge does, clamped 8px inside the
+  window. It opens under the button when it fits there, else above it when it
+  fits there, else on the side with more room, scrolling inside.
+- **It goes back when it closes.** Choosing an entry, a press outside it, or
+  the ⋯ button again closes it and puts it back in the tile's header, so
+  `tile.element.querySelector('.tile-menu-item')` finds the entries while it
+  is closed. `dispose()` closes an open menu first, so none is left on the
+  page.
+
+Until 0.17.8 the menu was `position: absolute` inside the tile, so in a tile
+narrower than about 220px its left part and its labels were cut off
+(BUG-0043). `tests/tile_menu_unclipped.test.mjs` holds it.
+

package/package.json

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

package/src/charts/chart_types.js

@@ -61,7 +61,8 @@ const LINE_DASH_MAP = {
 };
 
 /**
- * Interpolation mapping (Chart.js to Plotly line shape)
+ * Interpolation mapping (Chart.js to Plotly line shape). 'auto' draws straight
+ * segments between the points, as 'linear' does.
  */
 const INTERPOLATION_MAP = {
     linear: 'linear',
@@ -81,7 +82,7 @@ const INTERPOLATION_MAP = {
  * @param {string} [options.color] - Series color (hex)
  * @param {number} [options.lineWidth] - Line width in pixels
  * @param {string} [options.lineStyle] - Line style: solid, dashed, dotted
- * @param {string} [options.interpolation] - Interpolation: linear, step, cubic
+ * @param {string} [options.interpolation] - Interpolation: linear, step, cubic, or auto (drawn as linear)
  * @param {string} [options.yAxisId] - Y-axis identifier (y, y2, y3, etc.)
  * @param {boolean} [options.showMarkers] - Show data point markers
  * @param {number} [options.seriesIndex] - Index for default color selection

package/src/charts/plot_config_editor.js

@@ -63,7 +63,10 @@ const LEGEND_POSITIONS = Object.freeze([
     { value: 'hidden', label: 'Hidden' }, { value: 'top', label: 'Top' }, { value: 'bottom', label: 'Bottom' },
     { value: 'left', label: 'Left' }, { value: 'right', label: 'Right' },
 ]);
+// 'auto' is drawn as 'linear' (buildTrace); it is listed so a config saved with it
+// shows it and keeps it.
 const INTERPOLATIONS = Object.freeze([
+    { value: 'auto', label: 'Auto' },
     { value: 'linear', label: 'Linear' }, { value: 'step', label: 'Step' }, { value: 'cubic', label: 'Cubic spline' },
 ]);
 const NAN_STRATEGIES = Object.freeze([
@@ -364,7 +367,10 @@ function renderPlotConfigEditor(container, config, options = {}) {
         let sources = null;
         const overlaySources = () => (sources ??= Promise.resolve().then(() => opts.overlaySources()));
 
-        body.append(
+        // Element.append() writes a null child as the text "null": a section the
+        // subplot does not have (the z axis of a 2D chart, the transforms when
+        // there are none) is left out, not appended.
+        body.append(...[
             section('Subplot', field('Title', textInput(sp.displayName, (v) => { sp.displayName = v; notify(); },
                                                         { placeholder: 'Untitled' }))),
             section('Display', ...displayFields(sp)),
@@ -374,7 +380,7 @@ function renderPlotConfigEditor(container, config, options = {}) {
             section('Reference lines', referenceLinesEditor(sp)),
             section('Shaded bands', shadedBandsEditor(sp)),
             transformsSection(sp),
-        );
+        ].filter(Boolean));
     }
 
     function displayFields(sp) {

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