flexdesk 0.17.10 → 0.17.12

package/dist/flexdesk.css

@@ -2999,11 +2999,11 @@ body.twm-window-maximized .twm-resize-handle {
     color: var(--text-bright);
 }
 .twm-plot-window-toolbar .twm-btn-icon.twm-is-active {
-    color: #4A90D9;
-    background: rgba(74, 144, 217, 0.15);
+    color: color-mix(in srgb, var(--accent-bright) 80%, white);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 15%, transparent);
 }
 .twm-plot-window-toolbar .twm-btn-icon.twm-is-active:hover {
-    background: rgba(74, 144, 217, 0.25);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 25%, transparent);
 }
 .twm-plot-window-content {
     flex: 1;
@@ -3074,7 +3074,7 @@ body.twm-window-maximized .twm-resize-handle {
     background: rgba(255, 255, 255, 0.02);
 }
 .twm-plot-window-container .twm-plot-tab-content .twm-preview-table tbody tr:hover {
-    background: rgba(74, 144, 217, 0.1);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 10%, transparent);
 }
 .twm-plot-window-container .twm-plot-tab-content .twm-preview-table td {
     color: #aaa;
@@ -3147,7 +3147,7 @@ body.twm-window-maximized .twm-resize-handle {
     background: rgba(255, 255, 255, 0.05);
 }
 .twm-plot-series-toggle-panel__item input[type="checkbox"] {
-    accent-color: #268bd2;
+    accent-color: color-mix(in srgb, var(--accent-bright) 87%, white);
     flex-shrink: 0;
 }
 .twm-plot-series-toggle-panel__line-indicator {
@@ -3256,7 +3256,7 @@ body.twm-window-maximized .twm-resize-handle {
     outline: none;
 }
 .twm-data-series-plot-config select:focus {
-    border-color: #268bd2;
+    border-color: color-mix(in srgb, var(--accent-bright) 87%, white);
 }
 .twm-data-series-plot-config__columns {
     max-height: 200px;
@@ -3298,7 +3298,7 @@ body.twm-window-maximized .twm-resize-handle {
     border-radius: 1px;
 }
 .twm-data-series-plot-config input[type="checkbox"] {
-    accent-color: #268bd2;
+    accent-color: color-mix(in srgb, var(--accent-bright) 87%, white);
     flex-shrink: 0;
 }
 /* Computing Status Window */
@@ -3315,7 +3315,7 @@ body.twm-window-maximized .twm-resize-handle {
     width: 32px;
     height: 32px;
     border: 3px solid #333;
-    border-top-color: #4a90d9;
+    border-top-color: color-mix(in srgb, var(--accent-bright) 80%, white);
     border-radius: 50%;
     animation: computing-spin 0.8s linear infinite;
 }
@@ -3808,22 +3808,21 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   cleared from every sibling by the same handler. #78b9ff is a literal:
-   `--accent-bright` is #007acc, which is a border colour on this background
-   and not a text one, and the derived light accents (`--accent-light`,
-   `--accent-lighter`) are less blue than this, so using them would change
-   the colour. */
+   cleared from every sibling by the same handler. It reads `--accent-lighter`
+   (BUG-0045): `--accent-bright` is a border colour on this background and not
+   a text one. It was #78b9ff, which no mix of `--accent-bright` with white
+   gives exactly; `--accent-lighter` (about #73b6e3) is the nearest. */
 .tile.tile--selected {
-    border-color: #78b9ff;
-    box-shadow: 0 0 0 2px rgba(120, 185, 255, 0.3), var(--shadow-md);
+    border-color: var(--accent-lighter);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-lighter) 30%, transparent), var(--shadow-md);
 }
 
 .tile.tile--selected .tile-header {
-    background: rgba(120, 185, 255, 0.1);
+    background: color-mix(in srgb, var(--accent-lighter) 10%, transparent);
 }
 
 .tile.tile--selected .tile-title {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* Read-only. `_buildChrome()`'s read-only branch emits no drag handle, no
@@ -3926,7 +3925,7 @@ body.twm-window-maximized .twm-resize-handle {
 .tile-menu-btn:hover,
 .tile-expand-btn:hover {
     background: var(--state-hover);
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 .tile-remove-btn:hover {
@@ -4014,7 +4013,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 .tile-menu-item:hover .material-symbols-outlined {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* ── the content area ────────────────────────────────────────────────── */
@@ -4528,12 +4527,12 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-action-dropdown-option .twm-option-icon {
     font-size: 20px;
-    color: #78b9ff;
+    color: var(--accent-lighter);
     flex-shrink: 0;
 }
 .twm-action-dropdown-option:hover .twm-option-icon,
 .twm-action-dropdown-option:focus .twm-option-icon {
-    color: #9ecfff;
+    color: var(--accent-lightest);
 }
 .twm-action-dropdown-option .twm-option-label {
     font-weight: 500;
@@ -4692,7 +4691,7 @@ body.twm-window-maximized .twm-resize-handle {
     position: absolute;
     z-index: 5999;
     pointer-events: none;
-    background: rgba(23, 119, 179, 0.18);
+    background: color-mix(in srgb, var(--accent-hover) 18%, transparent);
     border: 1px solid var(--accent-bright);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
     transition: left 0.09s ease, top 0.09s ease, width 0.09s ease, height 0.09s ease;
@@ -4986,12 +4985,11 @@ button.twm-managed-window__btn svg rect {
     transition: background-color 0.1s, color 0.1s;
 }
 .twm-bar-windows__item:hover {
-    /* Solarized blue */
-    background: #268bd2;
+    background: var(--accent-bright-hover);
     color: var(--text-bright);
 }
 .twm-bar-windows__item:active {
-    background: #1a6aa5;
+    background: var(--accent-pressed);
 }
 /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
 .twm-bar-windows__item-icon,
@@ -5597,7 +5595,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: var(--font-size-sm);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
+    border-color: var(--accent-lighter);
     box-shadow: 0 0 3px color-mix(in srgb, var(--accent-light) 30%, transparent);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input {
@@ -5915,8 +5913,8 @@ button.twm-about-dialog__btn--close:focus {
     color: var(--text-bright);
 }
 .twm-btn--primary:hover:not(:disabled) {
-    background: #1486cf;
-    border-color: #1486cf;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 /* Context menu separator (matches Ecosim's .twm-context-menu look). */
 .twm-context-menu__separator {
@@ -6438,8 +6436,8 @@ button.twm-about-dialog__btn--close:focus {
     font-weight: 600;
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--primary:hover:not(:disabled) {
-    background: #1683c4;
-    border-color: #1683c4;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--danger {
     background: #8b2a2a;
@@ -6705,7 +6703,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: 10px;
 }
 .twm-landing__pane--focused .twm-landing__pane-head {
-    background: rgba(17, 119, 179, 0.10);
+    background: color-mix(in srgb, var(--accent-hover) 10%, transparent);
 }
 .twm-landing__pane--focused .twm-landing__pane-title {
     color: var(--ea-accent);
@@ -6757,7 +6755,7 @@ button.twm-about-dialog__btn--close:focus {
    so the same arrow-key affordance reads identically across modes. */
 .twm-row-cursor {
     box-shadow: inset 2px 0 0 var(--ea-accent);
-    background: rgba(17, 119, 179, 0.12) !important;
+    background: color-mix(in srgb, var(--accent-hover) 12%, transparent) !important;
 }
 /* Quick-action strip — horizontal bar below the tables. Same chrome
    tone as `.twm-entity-header` so the page reads as a single stack:
@@ -6797,7 +6795,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-action-btn:hover {
     border-color: var(--ea-accent);
-    background: rgba(17, 119, 179, 0.08);
+    background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
 }
 .twm-action-btn:disabled,
 .twm-action-btn[aria-disabled="true"] {
@@ -13606,9 +13604,9 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     display: none !important;
 }
 .twm-flow-lanes {
-    --twm-lanes-wire: #5b9bd5;
+    --twm-lanes-wire: var(--accent-light);
     --twm-lanes-surface: #1b1b1c;
-    --twm-lanes-ring: #1683c4;
+    --twm-lanes-ring: var(--accent-bright-hover);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -13731,7 +13729,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     border-left: 1px solid var(--surface-3);
 }
 .twm-flow-lanes__show-btn[aria-pressed="true"] {
-    background: #0f6fa8;
+    background: var(--accent-pressed);
     color: var(--text-bright);
 }
 .twm-flow-lanes__show-btn:focus-visible,
@@ -13974,7 +13972,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .twm-flow-lanes__node--selected .twm-flow-lanes__card,
 .twm-flow-lanes__card:focus-visible {
     filter: drop-shadow(0 0 1px var(--twm-lanes-ring)) drop-shadow(0 0 1px var(--twm-lanes-ring))
-            drop-shadow(0 0 5px rgba(22, 131, 196, 0.8));
+            drop-shadow(0 0 5px color-mix(in srgb, var(--twm-lanes-ring) 80%, transparent));
 }
 .twm-flow-lanes__card:hover .twm-flow-lanes__body {
     filter: brightness(1.12);
@@ -14297,7 +14295,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .twm-flow-lanes__cell--new,
 .twm-flow-lanes__cell--changed {
-    background: rgba(22, 131, 196, 0.07);
+    background: color-mix(in srgb, var(--twm-lanes-ring) 7%, transparent);
 }
 .twm-flow-lanes__error {
     flex: 0 0 auto;
@@ -14331,7 +14329,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .twm-flow-lanes__column--new,
 .twm-flow-lanes__column--changed {
-    background: rgba(22, 131, 196, 0.14);
+    background: color-mix(in srgb, var(--twm-lanes-ring) 14%, transparent);
 }
 .twm-flow-lanes__column-name {
     font-family: var(--font-family-mono);
@@ -14344,7 +14342,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .twm-flow-lanes__column--new .twm-flow-lanes__column-type,
 .twm-flow-lanes__column--changed .twm-flow-lanes__column-type {
-    color: #9fd0f0;
+    color: var(--accent-lightest);
 }
 .twm-flow-lanes__column-origin {
     margin-left: auto;

package/dist/tiles.js

@@ -36,7 +36,7 @@ import {
   purge,
   resize,
   strideDownsampleShared
-} from "./chunk-2YTM3GJE.js";
+} from "./chunk-75FLVAUT.js";
 import "./chunk-NIJEJAZ7.js";
 import {
   isHexColor

package/dist/tokens.css

@@ -96,6 +96,11 @@
        sortable list's drop line and add button, a focused filter input. */
     --accent-light:     color-mix(in srgb, var(--accent-bright) 70%, white);  /* ≈ #4da2db, was #569cd6 */
     --accent-lighter:   color-mix(in srgb, var(--accent-bright) 55%, white);  /* ≈ #73b6e3, was #6eb3e9 */
+    /* BUG-0045: the other accent shades. A primary button's hover, the window
+       bar's hovered item; a pressed accent control; the lightest accent text. */
+    --accent-bright-hover: color-mix(in srgb, var(--accent-bright) 90%, white);  /* ≈ #1987d1, was #1486cf / #1683c4 */
+    --accent-pressed:      color-mix(in srgb, var(--accent-hover) 90%, black);   /* ≈ #0f6ba8, was #1a6aa5 / #0f6fa8 */
+    --accent-lightest:     color-mix(in srgb, var(--accent-bright) 36%, white);  /* ≈ #a3cfed, was #9ecfff / #9fd0f0 */
 
     /* ── Semantic colors ───────────────────────────────────────── */
     --color-success:        #3fb950;

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/concepts/styling.md

@@ -105,11 +105,77 @@ What changed in the stylesheet:
   `flexdesk.css` now needs `tokens.css` (or your own definitions of these tokens).
 
 Not part of the accent, and still literals: the autocomplete's type colours
-(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the notification
-border `#4fc1ff`, and links (`#3794ff`).
-
-Some accent blues in other shades are still literals, because no mix of an
-accent token gives their colour exactly. They include the selected tile
+(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the DataTable header
+icons' type colours (`flow` is `#268bd2` beside `#6c71c4`, `#cb4b16`,
+`#859900`), the notification border `#4fc1ff`, links (`#3794ff`, the about
+dialog's link hover `#4da6ff`, and the breadcrumb and plot-series links), and the flow kit's categorical colours
+(`--twm-flow-blue-*` beside `--twm-flow-indigo-*`, …). The (0.17.11) section
+lists the rest.
+
+0.17.10 left the accent blues in other shades as literals: the selected tile
 (`#78b9ff`), the primary button's hover (`#1683c4`, `#1486cf`), the row
 cursor and snap preview (`rgba(17, 119, 179, a)`), and some flow-lanes and
-plot-window colours. To retheme them, override their rules.
+plot-window colours. 0.17.11 derives them too (next section).
+
+## Retheming the accent shades (0.17.11)
+
+The accent blues that 0.17.10 left as literals, in shades no mix of an
+accent token gives exactly, are now derived from the accent tokens too, so
+setting `--accent`, `--accent-hover` and `--accent-bright` on `:root`
+rethemes the primary buttons' hover, the selected tile, the row cursor, the
+window bar, the plot window, the spinner and the flow lanes as well.
+`--accent` and `--accent-bright` stay two tokens.
+
+Three tokens are new in `tokens.css`, each read by more than one rule:
+
+- `--accent-bright-hover`: `color-mix(in srgb, var(--accent-bright) 90%, white)`,
+  about `#1987d1`. A primary button's hover (the modal's too) and the window
+  bar's hovered item.
+- `--accent-pressed`: `color-mix(in srgb, var(--accent-hover) 90%, black)`,
+  about `#0f6ba8`. The window bar's pressed item and the flow lanes' pressed
+  show button.
+- `--accent-lightest`: `color-mix(in srgb, var(--accent-bright) 36%, white)`,
+  about `#a3cfed`. The lightest accent text, after `--accent-light` and
+  `--accent-lighter`.
+
+They are defined from the accent tokens in `tokens.css`. If you supply your
+own token definitions instead of `tokens.css`, define these three as well:
+the rules that read them have no fallback.
+
+None of the old colours is an exact mix, so each moves to the nearest one,
+by the ΔE (OKLab × 100) below. A tint's ΔE is measured over `--surface-0`
+(`#1e1e1e`), where it is seen, and every colour is rounded to 8 bits per
+channel first.
+
+| Where | Was | Now reads | Default now | ΔE |
+|---|---|---|---|---|
+| `.twm-btn--primary:hover` | `#1486cf` | `--accent-bright-hover` | `#1987d1` | 0.4 |
+| the modal's primary button hover | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
+| `.twm-bar-windows__item:hover` | `#268bd2` | `--accent-bright-hover` | `#1987d1` | 1.3 |
+| `.twm-bar-windows__item:active` | `#1a6aa5` | `--accent-pressed` | `#0f6ba8` | 0.6 |
+| the plot series and plot config checkboxes (`accent-color`), the plot config select's focus border | `#268bd2` | `color-mix(in srgb, var(--accent-bright) 87%, white)` | `#218bd3` | 0.3 |
+| the plot window toolbar's active button, the computing spinner | `#4a90d9` | `color-mix(in srgb, var(--accent-bright) 80%, white)` | `#3395d6` | 2.1 |
+| the active button's tint and hover tint, the plot table's hovered row | `rgba(74, 144, 217, 0.15 \| 0.25 \| 0.1)` | that 80% mix at the same alpha | | 0.6, 0.9, 0.5 |
+| the selected tile's border and title, the tile header buttons' and tile menu's hover icons, the action dropdown's icons | `#78b9ff` | `--accent-lighter` | `#73b6e3` | 4.1 |
+| the selected tile's ring and header tint | `rgba(120, 185, 255, 0.3 \| 0.1)` | `--accent-lighter` at the same alpha | | 1.6, 0.6 |
+| the action dropdown's hovered or focused icon | `#9ecfff` | `--accent-lightest` | `#a3cfed` | 2.6 |
+| the notebook autocomplete's focused border | `#79b8f8` | `--accent-lighter` | `#73b6e3` | 3.2 |
+| `.twm-row-cursor`, the focused landing pane's head, `.twm-action-btn:hover` | `rgba(17, 119, 179, 0.12 \| 0.10 \| 0.08)` | `--accent-hover` at the same alpha | | 0.2, 0.2, 0.2 |
+| `.twm-snap-preview` | `rgba(23, 119, 179, 0.18)` | `--accent-hover` at 18% | | 0.2 |
+| the flow lanes' wire, `--twm-lanes-wire` | `#5b9bd5` | `--accent-light` | `#4da2db` | 2.0 |
+| the flow lanes' ring, `--twm-lanes-ring` | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
+| the flow lanes' pressed show button | `#0f6fa8` | `--accent-pressed` | `#0f6ba8` | 1.2 |
+| the selected card's glow, a new or changed cell and column | `rgba(22, 131, 196, 0.8 \| 0.07 \| 0.14)` | `--twm-lanes-ring` at the same alpha | | 1.7, 0.3, 0.4 |
+| a new or changed column's type | `#9fd0f0` | `--accent-lightest` | `#a3cfed` | 0.6 |
+
+The largest shift is the selected tile's light blue: `#78b9ff` is bluer
+than any mix of `#007acc` with white, and `--accent-lighter` is the nearest.
+`--twm-lanes-wire` and `--twm-lanes-ring` are set on `.twm-flow-lanes` and
+read `--accent-light` and `--accent-bright-hover`, so they follow the accent
+set on `:root` and can still be set per lanes view.
+
+Still literals, because they are not the accent: the colours listed in the
+(0.17.10) section above, the charts' series palette (`#268bd2` first in
+`COLOR_PALETTE`, `#1f77b4` as the colour pickers' default), and the Monaco
+editor theme's selection colours, which Monaco takes as hex values and not
+as CSS.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.10",
+    "version": "0.17.12",
     "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) {