flexdesk 0.17.11 → 0.17.13

package/dist/{chunk-BE2PU3LL.js → chunk-ZMH3OC7H.js}

@@ -9,7 +9,7 @@ import {
   normalizeHex,
   selectBox,
   toggleChips
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import {
   DragReorder
 } from "./chunk-WUFLGETN.js";
@@ -1308,4 +1308,4 @@ export {
   openConfirm,
   openModal
 };
-//# sourceMappingURL=chunk-BE2PU3LL.js.map
+//# sourceMappingURL=chunk-ZMH3OC7H.js.map

package/dist/flexdesk.css

@@ -1695,6 +1695,25 @@ body.twm-dt-col-resizing {
 .twm-global-top-bar, .twm-global-top-bar .twm-bar-left, .twm-global-top-bar .twm-bar-center, .twm-global-top-bar .twm-bar-right {
     min-width: 0; /* allow flex children to shrink */
 }
+/* Global menu row (STORY-0119, 0.17.13): a shell's `chrome.menuBar` in a
+ * full-width strip of its own, directly under .twm-global-top-bar in
+ * body.twm-body's column (host.css), so the host below shrinks by its height.
+ * It is a sibling of the top bar, not inside it: a window-drag region bound
+ * to the top bar does not include it. No z-index, so it is no stacking
+ * context: the top bar's dropdowns draw over it, and the .twm-menubar inside
+ * keeps its own styles, its menus (position: fixed, --z-over-windows) drawing
+ * over the page. Its height is the bar's plus the padding. */
+.twm-global-menu-bar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-xxs) var(--space-xs);
+    background-color: var(--surface-1);
+    color: var(--text-body);
+    border-bottom: 1px solid var(--surface-0);
+    overflow: visible; /* the bar's menus extend below */
+}
 .twm-bar-center {
     white-space: nowrap;
     overflow: hidden;
@@ -8528,8 +8547,9 @@ body.twm-dragging * { user-select: none; }
  * the WM host fills the remaining space.
  */
 
-/* Body is a flex column: top bar, WM host (fill), bottom bar. We
- * override the legacy `position: fixed` on both bars so they become
+/* Body is a flex column: top bar, menu row (when there is one), WM host
+ * (fill), bottom bar. We override the legacy `position: fixed` on both
+ * bars so they become
  * deterministic flex items and the host's height is exactly the
  * leftover space — no math, no overlap, no off-by-N pixels. Their
  * `z-index` stays put for dropdown stacking. */
@@ -8547,6 +8567,12 @@ body.twm-body > .twm-global-bottom-bar {
     inset: auto !important;
     flex: 0 0 auto;
 }
+/* The menu row (STORY-0119) sits between the top bar and the host, in
+ * normal flow: a fixed-size strip, so the host's leftover space is less by
+ * exactly its height. */
+body.twm-body > .twm-global-menu-bar {
+    flex: 0 0 auto;
+}
 body.twm-body > .twm-host {
     flex: 1 1 auto;
     min-height: 0;

package/dist/flow.js

@@ -1,15 +1,15 @@
 import {
   modalHost
-} from "./chunk-BE2PU3LL.js";
+} from "./chunk-ZMH3OC7H.js";
 import {
   DataTable
-} from "./chunk-NIJEJAZ7.js";
+} from "./chunk-2PM6ZMNS.js";
 import {
   choiceList,
   selectBox,
   shownValue,
   toggleChips
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import "./chunk-HNU6MM2B.js";
 import "./chunk-WUFLGETN.js";
 import {

package/dist/tiles.js

@@ -17,11 +17,11 @@ import {
 } from "./chunk-MIW7D6WC.js";
 import {
   showContextMenu
-} from "./chunk-F35XSQWA.js";
+} from "./chunk-IG74S3ZH.js";
 import {
   modalHost,
   openModal
-} from "./chunk-BE2PU3LL.js";
+} from "./chunk-ZMH3OC7H.js";
 import {
   buildHistogramTrace,
   buildLegendLayout,
@@ -36,11 +36,11 @@ import {
   purge,
   resize,
   strideDownsampleShared
-} from "./chunk-2YTM3GJE.js";
-import "./chunk-NIJEJAZ7.js";
+} from "./chunk-TLIV6QSU.js";
+import "./chunk-2PM6ZMNS.js";
 import {
   isHexColor
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import "./chunk-HNU6MM2B.js";
 import "./chunk-WUFLGETN.js";
 import {

package/dist/widgets.js

@@ -26,7 +26,7 @@ import {
 import {
   hideContextMenu,
   showContextMenu
-} from "./chunk-F35XSQWA.js";
+} from "./chunk-IG74S3ZH.js";
 import {
   ColorListField,
   SortableList,
@@ -35,7 +35,7 @@ import {
   openForm,
   openModal,
   setModalHost
-} from "./chunk-BE2PU3LL.js";
+} from "./chunk-ZMH3OC7H.js";
 import {
   ACTIONS,
   AutocompleteField,
@@ -82,7 +82,7 @@ import {
   resolvePaging,
   toTSV,
   tsvCell
-} from "./chunk-NIJEJAZ7.js";
+} from "./chunk-2PM6ZMNS.js";
 import {
   ColorField,
   DEFAULT_WINDOW_STORAGE_KEY,
@@ -96,7 +96,7 @@ import {
   normalizeHex,
   selectBox,
   shownValue
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import {
   getSetting
 } from "./chunk-HNU6MM2B.js";

package/dist/wm.js

@@ -8,14 +8,14 @@ import {
 } from "./chunk-REJ5HLIM.js";
 import {
   showContextMenu
-} from "./chunk-F35XSQWA.js";
+} from "./chunk-IG74S3ZH.js";
 import {
   openForm
-} from "./chunk-BE2PU3LL.js";
+} from "./chunk-ZMH3OC7H.js";
 import {
   ManagedWindow,
   isRowActivation
-} from "./chunk-CVMCZZX2.js";
+} from "./chunk-MADMGRX2.js";
 import "./chunk-HNU6MM2B.js";
 import {
   NotebookTabBar

package/docs/components/charts.md

@@ -4,6 +4,40 @@
 
 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).
 
+## An empty cell can name what is missing: `emptyMessage` as a function (0.17.12)
+
+[`renderPlotGrid`](#a-plot-config-in-any-container-renderplotgrid-0170),
+`PlotPopoutWindow` and `openPlotPopoutWindow` take `emptyMessage` as a string,
+as before, or as a function of the subplot:
+
+```js
+const grid = renderPlotGrid(el, plotConfig, results, {
+    emptyMessage: (subplot, results, index) => {
+        const name = subplot.yAxes[0].series[0]?.variable;
+        return results ? `${name} not in this run` : 'No data yet.';
+    },
+});
+await grid.update({ results: next });   // the empty cells say what is missing in `next`
+```
+
+The function is called each time a cell is drawn empty, with that cell's
+subplot, the grid's results at that moment (as the grid was given them, so null or undefined when there are none) and the
+cell's index in the layout: on the first draw, on every `update()` (new
+`results`, a new `plotConfig`, `overlays` or `hiddenSeries`), on a resize that
+draws a deferred cell, and when a subplot fails to draw. So the message follows
+results that stream in or change, without disposing and rebuilding the grid. A
+slot with no subplot still shows `noSubplotMessage`.
+
+The plot window hands its `emptyMessage` to its grid, so the function is called
+on the window's own redraws too: its refresh and stream events and
+`updateConfig()`. `openPlotPopoutWindow` forwards it with its other options.
+The Data tab's `tableEmptyMessage` stays a string.
+
+A string `emptyMessage` is shown exactly as before, and no option or export
+changed.
+
+`tests/plot_grid.test.mjs` §8 pins it.
+
 ## Interpolation `'auto'` is a listed choice (0.17.9)
 
 A subplot's `interpolation` is `'linear'`, `'step'`, `'cubic'` or `'auto'`.
@@ -197,7 +231,9 @@ subplot: its chart type, interpolation, data points and stack groups, every
 y-axis (left or right, linear or log, min, max, step), reference lines and
 shaded bands, the NaN strategy, the x-axis clipped to the results' time
 range, or an x variable instead of time (`xAxis: { useTime: false, variable }`).
-A subplot with nothing to draw shows `emptyMessage` (default `No data yet.`); a
+A subplot with nothing to draw shows `emptyMessage` (default `No data yet.`;
+[a function of the subplot](#an-empty-cell-can-name-what-is-missing-emptymessage-as-a-function-01712)
+since 0.17.12); a
 slot with no subplot shows `noSubplotMessage` (`No subplot configured.`); null
 results empty every subplot. A cell that is detached or has no size is not
 drawn: the grid's own ResizeObserver draws it once it has one. `dispose()`

package/docs/components/menus.md

@@ -101,6 +101,65 @@ The bar is `.twm-menubar` (not the older `.twm-menu-bar` icon strip).
 `tests/menu_bar.test.mjs` drives it in jsdom; `tests/menu_bar_css.test.mjs`
 holds its stylesheet.
 
+## The menu bar in its own row under the top bar (0.17.13)
+
+A shell's menu bar can sit on a second line, as a full-width strip directly
+under the top bar. Put `chrome.menuBar` in a `.twm-global-menu-bar` that is a
+child of `body.twm-body`, between `.twm-global-top-bar` and the host:
+
+```html
+<body class="twm-body">
+  <div class="twm-global-top-bar">
+    <div class="twm-bar-left">…</div>
+    <div class="twm-bar-center twm-top-nav">…</div>
+    <div class="twm-bar-right">…</div>
+  </div>
+  <div class="twm-global-menu-bar">
+    <div id="menus"></div>            <!-- chrome.menuBar -->
+  </div>
+  <div class="twm-host">…</div>     <!-- createShell's root -->
+  <div class="twm-global-bottom-bar">…</div>
+</body>
+```
+
+```js
+const shell = await createShell({
+    // …
+    menuBar: { menus, onAction },
+    chrome:  { menuBar: document.getElementById('menus') },
+});
+```
+
+- **The host gives up the row's height.** `body.twm-body` is a flex column,
+  and the row is a fixed-size item in it (`flex: 0 0 auto`). The host still
+  takes whatever is left, so it is shorter by the row's height and nothing is
+  drawn under the row. The row's height is the bar's (24px) plus its padding.
+- **It is styled with FlexDesk tokens.** It is a flex row with
+  `padding: var(--space-xxs) var(--space-xs)`, background `var(--surface-1)`,
+  text `var(--text-body)` and a bottom border `var(--surface-0)`, the same
+  border as the top bar. The `.twm-menubar` inside it keeps its own styles.
+- **It is not part of the top bar.** It is a sibling of `.twm-global-top-bar`,
+  not inside it. A window-drag region bound to the top bar
+  (`WindowChromeController`'s `topBar`, which defaults to
+  `.twm-global-top-bar`) does not include the row. A press on the row never
+  drags the window, and its menus open and take clicks as usual. The row sets
+  no `z-index`, so the top bar's dropdowns are drawn over it, and the bar's
+  menus (`position: fixed`) are drawn over the page.
+- **Windows on the page stop under it.** A `ManagedWindow` on `document.body`
+  (no `container`) is clamped, centred and maximised below the top bar and
+  the row, not under the row. Windows inside the shell already stay within
+  the host.
+- **A modal leaves it usable, like the top bar.** A modal `ManagedWindow`'s
+  backdrop starts below the top bar (`top: 35px`), so the row, like the top
+  bar, is not dimmed and its menus can still be opened while a modal is open.
+
+A shell without the row looks exactly as before: nothing changes until the
+page has a `.twm-global-menu-bar`. The row works only inside `body.twm-body`.
+Outside it, the top bar is `position: fixed` and would cover the row.
+`tests/menu_row_layout.test.mjs` loads flexdesk.css in jsdom and checks the
+row's rules, its place after the top bar, the drag region and the window
+bounds.
+
 ## Action dropdowns: separators (0.17.0)
 
 `new ActionDropdown({ trigger, options, onSelect })` draws one button per

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.11",
+    "version": "0.17.13",
     "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

@@ -72,6 +72,16 @@ function resolveSeriesData(series, results) {
     return series._resultTime ? { y, x: series._resultTime } : { y };
 }
 
+/**
+ * The text of an empty cell: `message` itself when it is a string, else what
+ * the function `message(subplot, results, index)` returns. PlotPopoutWindow
+ * hands its `emptyMessage` to the grid unchanged, so this is the one place the
+ * two forms are told apart.
+ */
+function emptyMessageFor(message, subplot, results, index) {
+    return typeof message === 'function' ? message(subplot, results, index) : message;
+}
+
 /**
  * Draw `plotConfig` into `container`.
  *
@@ -95,7 +105,10 @@ function resolveSeriesData(series, results) {
  * @param {Object} [options.theme] - Overrides for PLOT_GRID_THEME.
  * @param {boolean} [options.alwaysShowLegend=false] - Draw a 'hidden' legend at the top.
  * @param {Object} [options.layout] - Plotly layout fields merged over every figure's.
- * @param {string} [options.emptyMessage='No data yet.']
+ * @param {string|Function} [options.emptyMessage='No data yet.'] - What a subplot
+ *        with nothing to draw says: a string, or `(subplot, results, index) => string`,
+ *        called each time a cell is drawn empty (first draw, every `update()`, a
+ *        failed draw) with the grid's results at that moment (as the grid was given them, so null or undefined when there are none).
  * @param {string} [options.noSubplotMessage='No subplot configured.']
  * @param {Function} [options.onError] - `({ index, error })` when drawing a subplot
  *        throws — on an update or on a resize that draws a deferred one; that
@@ -170,6 +183,11 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
         deferred.clear();
     }
 
+    /** Show the empty message in cell `index`, for its subplot and the current results. */
+    function showEmpty(cell, index) {
+        showMessage(cell, emptyMessageFor(opts.emptyMessage, config?.subplots?.[index] ?? null, data, index));
+    }
+
     function showMessage(cell, text) {
         purgeCell(cell);
         const msg = document.createElement('div');
@@ -348,7 +366,7 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
 
         const figure = await buildFigure(sp, index);
         if (!current()) return false;
-        if (!figure) { showMessage(cell, opts.emptyMessage); deferred.delete(index); return false; }
+        if (!figure) { showEmpty(cell, index); deferred.delete(index); return false; }
 
         if (!hasSize(cell)) { deferred.add(index); return false; }
         deferred.delete(index);
@@ -381,7 +399,7 @@ function renderPlotGrid(container, plotConfig, results, options = {}) {
             if (disposed) return false;
             if (cells[index] === cell && tokens[index] === token) {
                 deferred.delete(index);
-                showMessage(cell, opts.emptyMessage);
+                showEmpty(cell, index);
             }
             opts.onError?.({ index, error });
             return false;

package/src/charts/plot_popout_window.js

@@ -62,6 +62,11 @@ export class PlotPopoutWindow {
      *        updates through `refreshEvent` and explicit calls only.
      * @param {Function} [options.resolveSeries] - `(series, results, subplot) => { y, x? } | null`
      *        (plot_grid.js); used by the chart and the data table. Default resolveSeriesData.
+     * @param {string|Function} [options.emptyMessage='No data yet.'] - What a chart
+     *        cell with nothing to draw says: a string, or `(subplot, results, index) =>
+     *        string`, called on every redraw that leaves the cell empty (renderPlotGrid).
+     * @param {string} [options.tableEmptyMessage='No data yet.'] - What the Data tab
+     *        says with no rows.
      */
     constructor({ id, title, plotConfig, getResults, services, host, onClose, actuals,
                   configRenderer, seriesTransforms, resolveSeries = resolveSeriesData,
@@ -1010,6 +1015,8 @@ const _openWindows = new Map();
  * @param {Function} options.getResults - Returns { time: number[], series: { [key]: number[] } }
  * @param {Object} options.services - { eventBus, logger }
  * @param {Object} [options.actuals] - ETL overlay data
+ * @param {string|Function} [options.emptyMessage] - As PlotPopoutWindow's: a string
+ *        or `(subplot, results, index) => string`. Every option is forwarded.
  * @returns {PlotPopoutWindow}
  */
 export async function openPlotPopoutWindow(options) {

package/src/ui/components/managed_window.js

@@ -34,6 +34,17 @@ const MAX_Z_INDEX = 6999;
 const TOP_BAR_HEIGHT = 35;
 const BOTTOM_BAR_HEIGHT = 22;
 
+/** STORY-0119. The space above a window on `document.body`: the top bar, and
+ *  under it a shell's menu row (`.twm-global-menu-bar`, a sibling of the top
+ *  bar in body.twm-body's column) when the page has one. The row is measured,
+ *  not assumed, because its height is its content's. Without a row this is
+ *  TOP_BAR_HEIGHT, exactly as before. */
+function _topInset() {
+    const row = typeof document !== 'undefined'
+        ? document.querySelector('body > .twm-global-menu-bar') : null;
+    return TOP_BAR_HEIGHT + (row ? row.getBoundingClientRect().height : 0);
+}
+
 /** C11. How close to an edge the POINTER must come for a snap zone to arm.
  *  Small enough that it takes intent, large enough to hit without aiming. */
 const SNAP_EDGE = 12;
@@ -953,6 +964,10 @@ export class ManagedWindow {
      *      width  = window.innerWidth
      *      height = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT
      *
+     *  (STORY-0119: TOP_BAR_HEIGHT here is `_topInset()`, which is
+     *  TOP_BAR_HEIGHT on a page without a menu row and adds the row's height
+     *  on a page with one.)
+     *
      *  so, substituting into the clamps below:
      *
      *      maxWidth  = width                          = window.innerWidth                      ✓
@@ -1005,11 +1020,12 @@ export class ManagedWindow {
                 height: this.container.clientHeight,
             };
         }
+        const top = _topInset();
         return {
             minX: 0,
-            minY: TOP_BAR_HEIGHT,
+            minY: top,
             width: window.innerWidth,
-            height: window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT,
+            height: window.innerHeight - top - BOTTOM_BAR_HEIGHT,
         };
     }
 
@@ -1266,7 +1282,8 @@ export class ManagedWindow {
         } else {
             // Center on screen (between top and bottom bars)
             this.x = Math.max(0, (maxWidth - this.width) / 2);
-            this.y = Math.max(TOP_BAR_HEIGHT, TOP_BAR_HEIGHT + (maxHeight - this.height) / 2);
+            const top = _topInset();
+            this.y = Math.max(top, top + (maxHeight - this.height) / 2);
         }
     }
 
@@ -1584,7 +1601,8 @@ export class ManagedWindow {
 
         // Calculate max available dimensions
         const maxWidth = window.innerWidth;
-        const maxHeight = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT;
+        const top = _topInset();
+        const maxHeight = window.innerHeight - top - BOTTOM_BAR_HEIGHT;
 
         let newX = state.startWinX;
         let newY = state.startWinY;
@@ -1604,12 +1622,12 @@ export class ManagedWindow {
 
         // Handle vertical resize
         if (dir.includes('s')) {
-            newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - TOP_BAR_HEIGHT)));
+            newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - top)));
         }
         if (dir.includes('n')) {
             const maxDy = state.startHeight - this.minHeight;
             const actualDy = Math.min(dy, maxDy);
-            newY = Math.max(TOP_BAR_HEIGHT, state.startWinY + actualDy);
+            newY = Math.max(top, state.startWinY + actualDy);
             newH = state.startHeight - (newY - state.startWinY);
         }