flexdesk 0.17.7 → 0.17.9

package/src/charts/series_transforms.js

@@ -15,11 +15,44 @@
  *         },
  *     };
  *
- * `run(y, params)` resolves `{ [output]: number[] }`. It is called ONCE per
- * eligible trace (a 2-D line/scatter trace) for each transform with at least one
- * output switched on, and every switched-on output it returns is drawn as an
- * extra trace in the source trace's colour, named `<source name><suffix>`, with
- * the output's `lineStyle` (solid | dashed | dotted) and `lineWidth`.
+ * `run(y, params, context)` resolves `{ [output]: number[] }`. It is called
+ * ONCE per eligible trace (a 2-D line/scatter trace) for each transform with at
+ * least one output switched on, and every switched-on output it returns is
+ * drawn as an extra trace in the source trace's colour, named
+ * `<source name><suffix>`, with the output's `lineStyle` (solid | dashed |
+ * dotted) and `lineWidth`.
+ *
+ * `y` is the drawn values (after the subplot's NaN handling and whatever the
+ * embedder's `resolveSeries` did, such as a rebase). `context` (0.17.8) says
+ * which series they are:
+ *
+ *     { series,          // the subplot's series entry the trace was drawn from
+ *                        //   (its variable, scenario, ...); null when unknown
+ *       subplot,         // the subplot config
+ *       results,         // the results the figure was drawn from, or null
+ *       resolveSeries }  // the `(series, results, subplot) => { y, x? }` the
+ *                        //   figure was drawn with, or null
+ *
+ * so a transform can look the same series up elsewhere (a baseline scenario)
+ * and resolve it the same way. renderPlotGrid (and so PlotPopoutWindow) runs
+ * transforms on the same traces as before 0.17.8 (overlays included, derived
+ * traces never); a trace drawn from one of the subplot's series gets that
+ * series, any other (an overlay) gets `series: null`. A transform written as
+ * `run(y, params)` ignores the third argument and works as before.
+ *
+ * A parameter is a number field by default:
+ *
+ *     window: { label: 'Window', default: 5, min: 1, step: 1 }
+ *
+ * or, declared `type: 'choice'` (0.17.8), a select over `options`: an array of
+ * `{ value, label }`, or a function `(subplot) => [{ value, label }]` called
+ * when the controls are drawn (and when the parameter needs its default):
+ *
+ *     baseline: { label: 'Compare with', type: 'choice',
+ *                 options: () => scenarios.map((s) => ({ value: s.id, label: s.name })) }
+ *
+ * The chosen value is saved and passed to `run` like a number. Without a
+ * `default` and with nothing saved, a choice is its first enabled option.
  *
  * What is switched on lives in the subplot, under `subplot.transforms`:
  *
@@ -30,14 +63,38 @@
  */
 
 import { buildTrace } from './chart_types.js';
+import { flatChoices, selectBox } from '../ui/components/choice_controls.js';
+
+/** Whether a parameter spec is a choice (a select) rather than a number. */
+const isChoice = (spec) => spec?.type === 'choice';
+
+/** A choice parameter's options for `subplot`: its array, or what its function returns. */
+function choiceOptions(spec, subplot) {
+    const options = typeof spec.options === 'function' ? spec.options(subplot) : spec.options;
+    return Array.isArray(options) ? options : [];
+}
+
+/**
+ * A choice parameter's value when none is declared or saved: the option
+ * selectBox selects for it, its first enabled one, `{ group, options }`
+ * entries flattened in order (the first of all when every one is disabled).
+ */
+function firstChoice(spec, subplot) {
+    const flat = flatChoices(choiceOptions(spec, subplot));
+    return (flat.find((o) => !o.disabled) ?? flat[0])?.value;
+}
 
 /** A transform's parameter values: its declared defaults under the subplot's own. */
-function resolveParams(transform, state) {
+function resolveParams(transform, state, subplot) {
+    const saved = state?.params ?? {};
     const params = {};
     for (const [name, spec] of Object.entries(transform.params ?? {})) {
         params[name] = spec?.default;
+        if (isChoice(spec) && spec.default === undefined && saved[name] === undefined) {
+            params[name] = firstChoice(spec, subplot);
+        }
     }
-    return { ...params, ...(state?.params ?? {}) };
+    return { ...params, ...saved };
 }
 
 /** The output names of `transform` that `state` switches on, in declared order. */
@@ -60,23 +117,34 @@ function isEligible(trace) {
  * @param {Object} [options]
  * @param {Function} [options.onError] - `({ transformId, traceName, error })`,
  *        called for each skipped run.
+ * @param {Function} [options.seriesOf] - `(trace) => series | null`: the series
+ *        config a trace was drawn from, passed as `context.series` (null for a
+ *        trace it names none for, and for every trace without it). It does not
+ *        choose the sources: every eligible trace is run on, as before.
+ * @param {Object} [options.results] - The results the figure was drawn from
+ *        (`context.results`).
+ * @param {Function} [options.resolveSeries] - The resolver the figure was drawn
+ *        with (`context.resolveSeries`).
  * @returns {Promise<Object[]>} The extra traces, in transform then trace order.
  */
-async function deriveSeriesTraces(traces, subplot, seriesTransforms, { onError } = {}) {
+async function deriveSeriesTraces(traces, subplot, seriesTransforms,
+                                  { onError, seriesOf, results, resolveSeries } = {}) {
     const derived = [];
     if (!seriesTransforms) return derived;
-    const sources = traces.filter(isEligible);
+    const sources = traces.filter(isEligible)
+        .map((trace) => ({ trace, series: typeof seriesOf === 'function' ? (seriesOf(trace) ?? null) : null }));
 
     for (const [transformId, transform] of Object.entries(seriesTransforms)) {
         const state = subplot?.transforms?.[transformId];
         const outputs = enabledOutputs(transform, state);
         if (!outputs.length || typeof transform?.run !== 'function') continue;
-        const params = resolveParams(transform, state);
+        const params = resolveParams(transform, state, subplot);
 
-        for (const source of sources) {
+        for (const { trace: source, series } of sources) {
+            const context = { series, subplot, results: results ?? null, resolveSeries: resolveSeries ?? null };
             let result;
             try {
-                result = await transform.run(source.y, params);
+                result = await transform.run(source.y, params, context);
             } catch (error) {
                 onError?.({ transformId, traceName: source.name, error });
                 continue;
@@ -112,7 +180,8 @@ async function deriveSeriesTraces(traces, subplot, seriesTransforms, { onError }
 
 /**
  * The controls for `seriesTransforms` in a subplot's config: per transform, a
- * toggle for each output and a number field for each parameter. They edit
+ * toggle for each output and, for each parameter, a number field or, for a
+ * `type: 'choice'` parameter, a select (choice_controls' selectBox). They edit
  * `subplot.transforms` in place and call `onChange()` after every edit. With no
  * transforms (null or `{}`) nothing is rendered.
  *
@@ -173,22 +242,47 @@ function renderSeriesTransformControls(container, subplot, seriesTransforms, { o
             row.className = 'twm-series-transforms__row';
             const text = document.createElement('span');
             text.textContent = spec?.label ?? name;
+            const writeParam = (value) => {
+                const state = stateOf(transformId);
+                const params = { ...(state.params ?? {}) };
+                if (value === undefined) delete params[name];
+                else params[name] = value;
+                state.params = params;
+                onChange?.();
+            };
+            const saved = subplot.transforms?.[transformId]?.params?.[name];
+
+            if (isChoice(spec)) {
+                const current = saved ?? spec.default ?? firstChoice(spec, subplot);
+                const choice = selectBox(choiceOptions(spec, subplot), current, {
+                    label: spec?.label ?? name,
+                    valueAttr: 'value',
+                    className: 'twm-series-transforms__param twm-series-transforms__select',
+                });
+                choice.box.addEventListener('change', () => {
+                    const value = choice.valueOf();
+                    // Redrawn with the chosen value, as settings do: a stale
+                    // '(not found)' entry goes once an offered option is picked.
+                    choice.setOptions(choiceOptions(spec, subplot), value);
+                    writeParam(value);
+                });
+                paramInputs.push(choice.box);
+                row.append(text, choice.box);
+                group.appendChild(row);
+                continue;
+            }
+
             const input = document.createElement('input');
             input.type = 'number';
             input.className = 'twm-series-transforms__param';
             for (const attr of ['min', 'max', 'step']) {
                 if (spec?.[attr] != null) input[attr] = String(spec[attr]);
             }
-            const current = subplot.transforms?.[transformId]?.params?.[name] ?? spec?.default;
+            const current = saved ?? spec?.default;
             input.value = current == null ? '' : String(current);
             input.addEventListener('change', () => {
                 const value = parseFloat(input.value);
-                const state = stateOf(transformId);
-                const params = { ...(state.params ?? {}) };
-                if (Number.isFinite(value)) params[name] = value;
-                else delete params[name];
-                state.params = params;
-                onChange?.();
+                writeParam(Number.isFinite(value) ? value : undefined);
             });
             paramInputs.push(input);
             row.append(text, input);

package/src/editor/notebook_tab_bar.js

@@ -24,6 +24,7 @@
 
 import { DragReorder } from '../ui/components/drag_reorder.js';
 import { revealInStrip, wheelStripSideways } from '../ui/utils/strip_scroll.js';
+import { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../ui/utils/menu_viewport.js';
 
 /** The MIME type a dragged editor tab carries when the embedder names none. */
 export const DEFAULT_TAB_DRAG_MIME = 'application/x-flexdesk-tab';
@@ -64,6 +65,8 @@ export class NotebookTabBar {
 
     /** @type {HTMLElement|null} */
     #contextMenuEl = null;
+    /** BUG-0040. What had focus when the menu opened. @type {Element|null} */
+    #contextMenuReturnFocus = null;
 
     /** @type {Function|null} */
     #boundHideContextMenu = null;
@@ -417,6 +420,7 @@ export class NotebookTabBar {
 
         const menu = document.createElement('div');
         menu.className = 'nb-context-menu';
+        menu.setAttribute('role', 'menu');
 
         for (const item of cleaned) {
             if (item.separator) {
@@ -427,6 +431,8 @@ export class NotebookTabBar {
             }
 
             const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.setAttribute('role', 'menuitem');
             btn.className = 'nb-context-menu__item';
             if (item.danger) btn.classList.add('nb-context-menu__item--danger');
             if (item.disabled) btn.classList.add('nb-context-menu__item--disabled');
@@ -445,15 +451,14 @@ export class NotebookTabBar {
             menu.appendChild(btn);
         }
 
+        this.#contextMenuReturnFocus = document.activeElement;
         document.body.appendChild(menu);
         this.#contextMenuEl = menu;
 
-        // Position with viewport clamping
-        const rect = menu.getBoundingClientRect();
-        const left = Math.min(x, window.innerWidth - rect.width - 8);
-        const top = Math.min(y, window.innerHeight - rect.height - 8);
-        menu.style.left = `${Math.max(0, left)}px`;
-        menu.style.top = `${Math.max(0, top)}px`;
+        // BUG-0040. Inside the window, at most its height, scrolling when
+        // longer; the keyboard starts on the first item it can use.
+        placeMenuInViewport(menu, x, y);
+        focusMenuItem(this.#contextMenuItems()[0]);
 
         // Animate in
         requestAnimationFrame(() => menu.classList.add('visible'));
@@ -468,15 +473,29 @@ export class NotebookTabBar {
 
     #hideContextMenu() {
         if (!this.#contextMenuEl) return;
+        const returnTo = this.#contextMenuReturnFocus;
+        const held = this.#contextMenuEl.contains(document.activeElement);
         this.#contextMenuEl.remove();
         this.#contextMenuEl = null;
+        this.#contextMenuReturnFocus = null;
         document.removeEventListener('click', this.#boundHideContextMenu, true);
         document.removeEventListener('contextmenu', this.#boundHideContextMenu, true);
         document.removeEventListener('keydown', this.#onKeyDown);
+        if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
+    }
+
+    /** BUG-0040. The menu's items the keyboard can land on. */
+    #contextMenuItems() {
+        return this.#contextMenuEl
+            ? [...this.#contextMenuEl.querySelectorAll('.nb-context-menu__item:not(.nb-context-menu__item--disabled)')]
+            : [];
     }
 
     #onKeyDown = (e) => {
-        if (e.key === 'Escape') this.#hideContextMenu();
+        if (e.key === 'Escape') { this.#hideContextMenu(); return; }
+        // BUG-0040. Up/Down/Home/End move between the items and scroll the
+        // focused one into view; Enter and Space are the buttons' own.
+        moveMenuFocus(e, this.#contextMenuItems());
     };
 
     #handleContextMenuAction(action, filePath) {

package/src/tiles/tile_base.js

@@ -8,6 +8,8 @@
 
 import { openRawTracesWindow } from '../charts/plot_popout_window.js';
 import { formatVariableLabel } from './config_schema.js';
+import { ActionDropdown } from '../ui/components/action_dropdown.js';
+import { modalHost } from '../ui/components/modal.js';
 // The host is INJECTED, not fetched from a global.
 //
 // This imported `appHost()` from ui/js/ecoagent/app_host.js — a tile reaching into
@@ -403,6 +405,12 @@ export class TileBase {
         if (this._disposed) return;
         this._disposed = true;
 
+        // An open ⋯ menu lives on document.body; take it back first.
+        this._closeTileMenu();
+        this._menuButton = null;
+        this._menuDropdown = null;
+        this._menuHome = null;
+
         // Close expand window if open
         if (this._expandWindow?.isVisible) {
             this._expandWindow.close();
@@ -485,6 +493,13 @@ export class TileBase {
      * @private
      */
     _buildChrome() {
+        // A rebuilt header gets a new ⋯ menu; an open old one must not stay
+        // behind on document.body.
+        this._closeTileMenu();
+        this._menuButton = null;
+        this._menuDropdown = null;
+        this._menuHome = null;
+
         // Header with drag handle and controls
         const header = document.createElement('div');
         header.className = 'tile-header';
@@ -584,23 +599,13 @@ export class TileBase {
             const menuBtn = header.querySelector('.tile-menu-btn');
             const menuDropdown = header.querySelector('.tile-menu-dropdown');
             if (menuBtn && menuDropdown) {
+                this._menuButton = menuBtn;
+                this._menuDropdown = menuDropdown;
+                this._menuHome = menuDropdown.parentNode;
                 menuBtn.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    const isOpen = !menuDropdown.hidden;
-                    menuDropdown.hidden = !menuDropdown.hidden;
-                    if (!isOpen) {
-                        // Close on outside click
-                        const closeMenu = (ev) => {
-                            if (!menuDropdown.contains(ev.target) && ev.target !== menuBtn) {
-                                menuDropdown.hidden = true;
-                                document.removeEventListener('pointerdown', closeMenu, true);
-                            }
-                        };
-                        // Delay to avoid immediate close from the same click
-                        requestAnimationFrame(() => {
-                            document.addEventListener('pointerdown', closeMenu, true);
-                        });
-                    }
+                    if (menuDropdown.hidden) this._openTileMenu();
+                    else this._closeTileMenu();
                 });
                 // One listener per rendered entry, dispatching by `data-action`
                 // into `_onMenuAction`. Wiring each action by name here is what
@@ -609,7 +614,7 @@ export class TileBase {
                 menuDropdown.querySelectorAll('.tile-menu-item').forEach((itemEl) => {
                     itemEl.addEventListener('click', (e) => {
                         e.stopPropagation();
-                        menuDropdown.hidden = true;
+                        this._closeTileMenu();
                         this._onMenuAction(itemEl.dataset.action);
                     });
                 });
@@ -654,6 +659,52 @@ export class TileBase {
         }
     }
 
+    /**
+     * Open the ⋯ menu. It is drawn on `document.body` (or the open modal's
+     * host, as `showContextMenu` is), not inside the tile: a tile clips its
+     * content, so a menu wider than a narrow tile lost its left part. It is
+     * placed with `ActionDropdown.position` — fixed, under the button (above
+     * when there is no room), right edges aligned, kept inside the window.
+     * @private
+     */
+    _openTileMenu() {
+        const btn = this._menuButton;
+        const menu = this._menuDropdown;
+        if (!btn || !menu || !menu.hidden) return;
+        (modalHost() || document.body).appendChild(menu);
+        menu.hidden = false;
+        ActionDropdown.position(btn, menu, { align: 'end' });
+        // Close on a press outside the menu and its button. Added a frame
+        // later so the press that opened it does not close it.
+        this._menuOutsideListener = (ev) => {
+            if (!menu.contains(ev.target) && !btn.contains(ev.target)) this._closeTileMenu();
+        };
+        const listener = this._menuOutsideListener;
+        requestAnimationFrame(() => {
+            if (this._menuOutsideListener === listener) {
+                document.addEventListener('pointerdown', listener, true);
+            }
+        });
+    }
+
+    /**
+     * Close the ⋯ menu and put it back in the tile's header.
+     * @private
+     */
+    _closeTileMenu() {
+        const menu = this._menuDropdown;
+        if (this._menuOutsideListener) {
+            document.removeEventListener('pointerdown', this._menuOutsideListener, true);
+            this._menuOutsideListener = null;
+        }
+        if (!menu) return;
+        menu.hidden = true;
+        for (const prop of ['position', 'top', 'bottom', 'left', 'right', 'maxHeight', 'overflowY']) {
+            menu.style[prop] = '';
+        }
+        if (this._menuHome && menu.parentNode !== this._menuHome) this._menuHome.appendChild(menu);
+    }
+
     /**
      * Handle config button click — highlight tile and emit config request.
      * @private