react-msaview 9.1.1 → 9.3.0

package/dist/model.d.ts

@@ -2,6 +2,7 @@ import type { ColumnStats } from './columnStats.ts';
 import type { ScrollZoomAxis } from './constants.ts';
 import type { HierarchyNode } from './hierarchy.ts';
 import type { ExportSvgOptions } from './renderToSvg.tsx';
+import type { ColorChannel, LegacyColumnTrack, LegacyEncoding, LegacyRowPanel, ScaleTable, SharedScale } from './scales.ts';
 import type { Annotation, Arc, BasicTrack, Cell, Clade, ResidueMappingProblem, ColumnTrackSpec, DomainBand, Encoding, Feature, Highlight, Legend, MsaSelection, NodeWithIds, Region, ResidueMapping, ResolvedClade, ResolvedEncoding, ResolvedFeaturePanel, ResolvedStripPanel, ResolvedHighlight, ResolvedSelection, TreeRoot, ResolvedRowPanel, RowDataInput, RowPanelSpec, RowResidue, StructureResidue, TrackKind, UnshareableData, Viewport } from './types.ts';
 import type { ZoomSnapshot } from './zoomSnapshot.ts';
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types';
@@ -542,7 +543,7 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * tracks supplied as data: per-column values drawn as bars, or a
      * per-column string drawn as a text track. See docs/layers.md
      */
-    columnTracks: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<ColumnTrackSpec, ColumnTrackSpec, ColumnTrackSpec>>, [undefined]>;
+    columnTracks: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISnapshotProcessor<import("@jbrowse/mobx-state-tree").IType<ColumnTrackSpec, ColumnTrackSpec, ColumnTrackSpec>, ColumnTrackSpec, import("@jbrowse/mobx-state-tree")._NotCustomized>>, [undefined]>;
     /**
      * #property
      * row-to-structure residue correspondence, computed outside the viewer
@@ -634,20 +635,21 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     clades: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<Clade, Clade, Clade>>, [undefined]>;
     /**
      * #property
-     * what the viewer's own marks read from `rowData`:
-     * `{channel, field, scale?}` per channel, where `channel` is
-     * `tipLabel` or `rowTint`. See docs/layers.md
+     * what the viewer's own marks read from `rowData` or the feature
+     * table: `{channel, field, range?, domain?, title?}` per channel. The
+     * earlier `scale: {palette}` and `scale: {map}` read as `range` and
+     * `domain`. See docs/layers.md
      */
-    encodings: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<Encoding, Encoding, Encoding>>, [undefined]>;
+    encodings: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISnapshotProcessor<import("@jbrowse/mobx-state-tree").IType<Encoding, Encoding, Encoding>, Encoding | LegacyEncoding, import("@jbrowse/mobx-state-tree")._NotCustomized>>, [undefined]>;
     /**
      * #property
      * panels drawn between the tree and the alignment:
-     * `{kind: "strip", field, scale?, width?, header?}` colors one cell
-     * per row from a `rowData` field, and
+     * `{kind: "strip", field, range?, domain?, title?, width?, header?}`
+     * colors one cell per row from a `rowData` field, and
      * `{kind: "features", x, encoding?, transform?, width?, header?}`
      * draws the spans the GFF carries. See docs/layers.md
      */
-    rowPanels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<RowPanelSpec, RowPanelSpec, RowPanelSpec>>, [undefined]>;
+    rowPanels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISnapshotProcessor<import("@jbrowse/mobx-state-tree").IType<RowPanelSpec, RowPanelSpec, RowPanelSpec>, LegacyRowPanel | RowPanelSpec, import("@jbrowse/mobx-state-tree")._NotCustomized>>, [undefined]>;
 }, {
     queueOfDialogs: [import("@jbrowse/core/util").DialogComponentType, any][];
 } & {
@@ -739,7 +741,8 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     volatileWidth: number | undefined;
     /**
      * #volatile
-     * resize handle width between tree and msa area, px
+     * thickness of the dividers, between the tree and the alignment and under
+     * the view, px
      */
     resizeHandleWidth: number;
     /**
@@ -1594,6 +1597,12 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * and the alphabet, not on zoom
      */
     readonly computedTrackModels: BasicTrack[];
+    /**
+     * #getter
+     * the reference row (`relativeTo`) repeated above the alignment, so it
+     * stays in view while the rows compared against it scroll
+     */
+    readonly referenceTrackModels: BasicTrack[];
     readonly tracks: BasicTrack[];
     /**
      * #getter
@@ -1992,7 +2001,7 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     /**
      * #action
      */
-    setColumnTracks(tracks: ColumnTrackSpec[]): void;
+    setColumnTracks(tracks: (ColumnTrackSpec | LegacyColumnTrack)[]): void;
     /**
      * #action
      * replace the row table, which the model keeps as the JSON string
@@ -2003,12 +2012,12 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * #action
      * replace what the viewer's marks read from the row table
      */
-    setEncodings(encodings: Encoding[]): void;
+    setEncodings(encodings: (Encoding | LegacyEncoding)[]): void;
     /**
      * #action
      * replace the panels drawn between the tree and the alignment
      */
-    setRowPanels(panels: RowPanelSpec[]): void;
+    setRowPanels(panels: (RowPanelSpec | LegacyRowPanel)[]): void;
     /**
      * #action
      * replace the alignment<->structure correspondence (see docs/layers.md)
@@ -2115,11 +2124,10 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * the categorical color keys drawn for this view, shared by the on-screen
      * legend overlay and the SVG export's reserved column. The domain overlay
      * produces the first, listing the `featureFill` scale where an encoding
-     * names one. Every field a row-table encoding or a row panel reads
-     * produces one more, so two channels over one field, or two strips over
-     * it, list that field once. A strip's `legend` names the title it lists
-     * under, so strips over eight fields with one set of colors list one
-     * legend between them
+     * names one. Every scale a row-table encoding or a row panel reads
+     * produces one more, keyed by its declaration, so two channels or two
+     * strips declaring one scale list it once, and strips over eight fields
+     * naming one `title` list one legend between them
      */
     readonly legends: Legend[];
     /**
@@ -2250,6 +2258,21 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * table or the encodings, never per row per frame.
      */
     readonly resolvedEncodings: ResolvedEncoding[];
+    /**
+     * #getter
+     * every color object the encodings and the row panels declare, keyed
+     * by declaration (`declarationKey`) and resolved once over the union
+     * of the values its records' fields take, so a value two strips share
+     * takes one color in both. A feature field reads every feature loaded,
+     * so hiding a type in the filter dialog leaves the rest in their
+     * colors, and its legend lists the values of the drawn features.
+     */
+    readonly resolvedScales: Map<string, SharedScale>;
+    /**
+     * #method
+     * the shared scale a record's color object resolves to
+     */
+    scaleOf(channel: ColorChannel, table: ScaleTable): SharedScale;
     /**
      * #getter
      * each row panel's scale resolved against the values its field takes,

package/dist/model.js

@@ -13,11 +13,11 @@ import { packDomainLanes } from './components/msa/packDomainLanes.js';
 import { visibleColRange } from './components/msa/visibleColRange.js';
 import { cladeGutterWidth } from './components/tree/cladeBrackets.js';
 import { scaleBarLength } from './components/tree/scaleBar.js';
-import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, settingsPanelWidth, treeScaleBarHeight, } from './constants.js';
+import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, resizeHandleWidth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, settingsPanelWidth, treeScaleBarHeight, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { exportFileName } from './exportFileName.js';
-import { featureName } from './featureFields.js';
-import { colorByRow, featureColorMap, featureLabelMap, featurePanelSpans, resolveFeatureScale, rowPanelWidth, stringFields, } from './featurePanels.js';
+import { featureField, featureName } from './featureFields.js';
+import { colorByRow, featureColorMap, featureLabelMap, featurePanelSpans, rowPanelWidth, stringFields, } from './featurePanels.js';
 import { featuresToAnnotations } from './featuresLayer.js';
 import { installFilehandleLoader } from './filehandleLoader.js';
 import { find, hierarchy, layoutTree, leaves, nodeCoveringRows, } from './hierarchy.js';
@@ -29,7 +29,7 @@ import { calculateNeighborJoiningTree } from './neighborJoining.js';
 import { calculatePropertyConservation } from './propertyConservation.js';
 import { preorder } from './rerootTree.js';
 import { globalColToVisibleCol, seqPosOfGlobalCol, visibleColToGlobalCol, visibleColsBefore, } from './rowCoordinateCalculations.js';
-import { resolveScale } from './scales.js';
+import { colorTable, declarationKey, readColumnTrack, readEncoding, readRowPanel, resolveShared, } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
 import { maxBitsFor } from './sequenceLogo.js';
 import { blosum62ColumnColors, identityColumnColors, } from './similarityColors.js';
@@ -391,7 +391,9 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * tracks supplied as data: per-column values drawn as bars, or a
          * per-column string drawn as a text track. See docs/layers.md
          */
-        columnTracks: stripDefault(types.array(types.frozen()), []),
+        columnTracks: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readColumnTrack,
+        })), []),
         /**
          * #property
          * row-to-structure residue correspondence, computed outside the viewer
@@ -471,20 +473,25 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         clades: stripDefault(types.array(types.frozen()), []),
         /**
          * #property
-         * what the viewer's own marks read from `rowData`:
-         * `{channel, field, scale?}` per channel, where `channel` is
-         * `tipLabel` or `rowTint`. See docs/layers.md
+         * what the viewer's own marks read from `rowData` or the feature
+         * table: `{channel, field, range?, domain?, title?}` per channel. The
+         * earlier `scale: {palette}` and `scale: {map}` read as `range` and
+         * `domain`. See docs/layers.md
          */
-        encodings: stripDefault(types.array(types.frozen()), []),
+        encodings: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readEncoding,
+        })), []),
         /**
          * #property
          * panels drawn between the tree and the alignment:
-         * `{kind: "strip", field, scale?, width?, header?}` colors one cell
-         * per row from a `rowData` field, and
+         * `{kind: "strip", field, range?, domain?, title?, width?, header?}`
+         * colors one cell per row from a `rowData` field, and
          * `{kind: "features", x, encoding?, transform?, width?, header?}`
          * draws the spans the GFF carries. See docs/layers.md
          */
-        rowPanels: stripDefault(types.array(types.frozen()), []),
+        rowPanels: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readRowPanel,
+        })), []),
     }))
         .volatile(() => ({
         /**
@@ -545,9 +552,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         volatileWidth: undefined,
         /**
          * #volatile
-         * resize handle width between tree and msa area, px
+         * thickness of the dividers, between the tree and the alignment and under
+         * the view, px
          */
-        resizeHandleWidth: 5,
+        resizeHandleWidth,
         /**
          * #volatile
          * size of blocks of content to be drawn, px
@@ -1943,7 +1951,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                         return [track.id, { arcs }];
                     }
                     if (track.kind === 'bar') {
-                        const max = track.max ?? 1;
+                        const max = track.scales?.y?.domainMax ?? 1;
                         const values = skip(project(track, track.values ?? [], 0)).map(v => Math.min(1, Math.max(0, v / max)));
                         return [track.id, { values }];
                     }
@@ -1987,7 +1995,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                                 height: this.trackHeight(track.kind, heightKey, track.height),
                                 barColor: track.color,
                                 arcColor: track.color,
-                                customColorScheme: track.colors,
+                                customColorScheme: track.encoding?.color
+                                    ? colorTable(track.encoding.color, [
+                                        ...(track.encoding.color.domain ?? []),
+                                        ...new Set(track.data),
+                                    ])
+                                    : undefined,
                                 data: content?.data,
                                 arcs: content?.arcs,
                             },
@@ -2117,6 +2130,28 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 },
             }));
         },
+        /**
+         * #getter
+         * the reference row (`relativeTo`) repeated above the alignment, so it
+         * stays in view while the rows compared against it scroll
+         */
+        get referenceTrackModels() {
+            const { relativeTo } = self;
+            const data = relativeTo === undefined ? undefined : self.columns.get(relativeTo);
+            return relativeTo === undefined || data === undefined
+                ? []
+                : [
+                    {
+                        model: {
+                            id: 'reference-row',
+                            name: relativeTo,
+                            kind: 'reference',
+                            data,
+                            height: self.rowHeight,
+                        },
+                    },
+                ];
+        },
         get tracks() {
             return [
                 ...this.adapterTrackModels,
@@ -2125,6 +2160,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 // every computed track reads the alignment's columns, and a tree, a
                 // GFF and a features panel draw a figure with none
                 ...(self.numColumns > 0 ? this.computedTrackModels : []),
+                ...this.referenceTrackModels,
             ];
         },
         /**
@@ -2888,7 +2924,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #action
          */
         setColumnTracks(tracks) {
-            self.columnTracks.replace(tracks);
+            self.columnTracks.replace(tracks.map(readColumnTrack));
         },
         /**
          * #action
@@ -2903,14 +2939,14 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * replace what the viewer's marks read from the row table
          */
         setEncodings(encodings) {
-            self.encodings.replace(encodings);
+            self.encodings.replace(encodings.map(readEncoding));
         },
         /**
          * #action
          * replace the panels drawn between the tree and the alignment
          */
         setRowPanels(panels) {
-            self.rowPanels.replace(panels);
+            self.rowPanels.replace(panels.map(readRowPanel));
         },
         /**
          * #action
@@ -3093,52 +3129,47 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * the categorical color keys drawn for this view, shared by the on-screen
          * legend overlay and the SVG export's reserved column. The domain overlay
          * produces the first, listing the `featureFill` scale where an encoding
-         * names one. Every field a row-table encoding or a row panel reads
-         * produces one more, so two channels over one field, or two strips over
-         * it, list that field once. A strip's `legend` names the title it lists
-         * under, so strips over eight fields with one set of colors list one
-         * legend between them
+         * names one. Every scale a row-table encoding or a row panel reads
+         * produces one more, keyed by its declaration, so two channels or two
+         * strips declaring one scale list it once, and strips over eight fields
+         * naming one `title` list one legend between them
          */
         get legends() {
             const { featureFillEncoding, fillPalette, visibleDomainTypes } = this;
             const byKey = new Map();
+            const ids = new Set();
             // the accession palette keys on no field, so it takes a key of its own
-            const add = (field, entries, id) => {
-                if (entries.length === 0) {
+            const add = (key, title, entries, overlay = false) => {
+                const k = key ?? 'domains';
+                if (entries.length === 0 || byKey.has(k)) {
                     return;
                 }
-                const key = field === undefined ? 'domains' : `field:${field}`;
-                const legend = byKey.get(key);
-                if (legend) {
-                    const seen = new Set(legend.entries.map(e => e.id));
-                    legend.entries.push(...entries.filter(e => !seen.has(e.id)));
-                }
-                else {
-                    byKey.set(key, {
-                        id: id ?? (field === undefined ? 'domains' : `rowData-${field}`),
-                        title: field ?? 'Domains',
-                        entries: [...entries],
-                    });
+                const base = overlay || key === undefined ? 'domains' : `rowData-${title}`;
+                let id = base;
+                for (let n = 2; ids.has(id); n++) {
+                    id = `${base}-${n}`;
                 }
+                ids.add(id);
+                byKey.set(k, { id, title: title ?? 'Domains', entries });
             };
             // the overlay draws the domain key; with no columns it draws nothing,
             // and a features panel taking the same colors lists them instead
             if (self.actuallyShowDomains && self.numColumns > 0) {
-                add(featureFillEncoding?.field, featureFillEncoding
+                add(featureFillEncoding?.key, featureFillEncoding?.title, featureFillEncoding
                     ? featureFillEncoding.legend
                     : visibleDomainTypes.map(d => ({
                         id: d.accession,
                         label: d.name,
                         color: d.color ?? fillPalette[d.accession],
-                    })), 'domains');
+                    })), true);
             }
-            for (const { channel, field, legend } of this.resolvedEncodings) {
+            for (const { channel, key, title, legend } of this.resolvedEncodings) {
                 if (!featureChannels.has(channel)) {
-                    add(field, legend);
+                    add(key, title, legend);
                 }
             }
-            for (const { legendTitle, legend } of this.rowPanelScales) {
-                add(legendTitle, legend);
+            for (const { legendKey, legendTitle, legend } of this.rowPanelScales) {
+                add(legendKey, legendTitle, legend);
             }
             return [...byKey.values()];
         },
@@ -3412,14 +3443,52 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * table or the encodings, never per row per frame.
          */
         get resolvedEncodings() {
-            const rows = Object.values(self.rowData);
             return self.encodings.map(encoding => ({
                 ...encoding,
-                ...(featureChannels.has(encoding.channel)
-                    ? resolveFeatureScale(encoding.field, encoding.scale, self.allAnnotations, self.filteredAnnotations)
-                    : resolveScale(encoding.scale, rows.map(row => row?.[encoding.field]).filter(notEmpty))),
+                ...this.scaleOf(encoding, featureChannels.has(encoding.channel) ? 'features' : 'rows'),
             }));
         },
+        /**
+         * #getter
+         * every color object the encodings and the row panels declare, keyed
+         * by declaration (`declarationKey`) and resolved once over the union
+         * of the values its records' fields take, so a value two strips share
+         * takes one color in both. A feature field reads every feature loaded,
+         * so hiding a type in the filter dialog leaves the rest in their
+         * colors, and its legend lists the values of the drawn features.
+         */
+        get resolvedScales() {
+            const rows = Object.values(self.rowData);
+            const featureValues = (list, field) => list.map(a => featureField(a, field)).filter(notEmpty);
+            const use = (channel, table) => ({
+                spec: channel,
+                field: channel.field,
+                table,
+                ...(table === 'rows'
+                    ? {
+                        values: rows.map(row => row?.[channel.field]).filter(notEmpty),
+                    }
+                    : {
+                        values: featureValues(self.allAnnotations, channel.field),
+                        shown: featureValues(self.filteredAnnotations, channel.field),
+                    }),
+            });
+            return resolveShared([
+                ...self.encodings.map(encoding => use(encoding, featureChannels.has(encoding.channel) ? 'features' : 'rows')),
+                ...self.rowPanels.flatMap(panel => panel.kind === 'strip'
+                    ? [use(panel, 'rows')]
+                    : panel.encoding?.color
+                        ? [use(panel.encoding.color, 'features')]
+                        : []),
+            ]);
+        },
+        /**
+         * #method
+         * the shared scale a record's color object resolves to
+         */
+        scaleOf(channel, table) {
+            return this.resolvedScales.get(declarationKey({ spec: channel, field: channel.field, table }));
+        },
         /**
          * #getter
          * each row panel's scale resolved against the values its field takes,
@@ -3434,7 +3503,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 if (panel.kind === 'features') {
                     const color = panel.encoding?.color;
                     const encoding = color
-                        ? resolveFeatureScale(color.field, color.scale, self.allAnnotations, annotations)
+                        ? { field: color.field, ...this.scaleOf(color, 'features') }
                         : featureFillEncoding;
                     const label = panel.encoding?.label;
                     return {
@@ -3442,7 +3511,8 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                         x: panel.x,
                         header: panel.header ?? '',
                         field: encoding?.field,
-                        legendTitle: encoding?.field,
+                        legendKey: encoding?.key,
+                        legendTitle: encoding?.title,
                         colors: color
                             ? featureColorMap(annotations, encoding, fillPalette)
                             : this.featureColors,
@@ -3457,14 +3527,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             })),
                     };
                 }
-                const { colorOf, legend } = resolveScale(panel.scale, Object.values(rowData)
-                    .map(row => row?.[panel.field])
-                    .filter(notEmpty));
+                const { colorOf, legend, key, title } = this.scaleOf(panel, 'rows');
                 return {
                     kind: panel.kind,
                     field: panel.field,
                     header: panel.header ?? panel.field,
-                    legendTitle: panel.legend ?? panel.field,
+                    legendKey: key,
+                    legendTitle: title,
                     colors: colorByRow(rowData, panel.field, colorOf),
                     legend,
                 };