@mosaicajs/components 0.2.0 → 0.4.0

package/dist/filter-panel.js

@@ -38,10 +38,11 @@ import { repeat } from 'lit/directives/repeat.js';
 import { CLUSTER_PREFIX, activeCount, artifactName, emptyDraft, isPopulated, withoutClause, withoutMember } from '@mosaicajs/client';
 import { OPERATOR_WORDS } from './filter.js';
 import { HeldAggregate } from './aggregate.js';
-import { MosaicaElement, UNNAMED, columnCaption, dateRangeText, countText, emit, keyTitle, shortCount } from './base.js';
+import { BOOL_WORDS, MosaicaElement, boolKeys, called, columnCaption, dateRangeText, countText, emit, focusLost, keyTitle, shortCount } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
 import { exportparts, forwarded } from './parts.js';
+import { switchView } from './view-switch.js';
 import { FloatingList } from './float.js';
 import { renderState, stateOf } from './states.js';
 import { chrome, tokens } from './tokens.js';
@@ -55,12 +56,27 @@ export function clusterFieldLayers(meta, view) {
 /** A layer's field as the panel keys it, apart from any column's. */
 const layerField = (layer) => `${CLUSTER_PREFIX}${layer}`;
 const VERBS = ['filter', 'highlight'];
+/** A view's name as the view picker shows it, else its id. */
+const viewTitle = (meta, id) => meta.views.find((v) => v.id === id)?.displayName ?? id;
+/** A held region's chip text: its shape and the view it was drawn in. */
+function regionText(shape, view) {
+    const kind = shape.kind === 'box' ? 'Box' : shape.kind === 'lasso' ? 'Lasso' : 'Shape';
+    return `${shape.outside ? `Outside ${kind.toLowerCase()}` : kind} in ${view}`;
+}
 /** A figure in the subject row: whole, or shortened in the compact layout. */
 const figure = (n, compact) => (compact ? shortCount(n) : countText(n));
 /**
  * Use the filter panel as the place where viewers narrow the map down, as `<mosaica-explorer>` does
- * in its sidebar. Each filter or highlight in force shows as a chip above the cards, and pressing a
- * chip opens its field's card.
+ * in its sidebar. Each filter or highlight in force shows as a chip above the cards, a highlight's
+ * with a pen on it, and pressing a chip opens its field's card. When a chip is removed, focus
+ * moves to the × of the chip after it, else of the one before, else to Add field. Under
+ * `chips-only` there is no Add field, so when the last chip is removed the panel shows the words
+ * No filters, which take focus and go as focus leaves them; a chip that arrives while they hold
+ * focus takes it on its ×.
+ *
+ * A region selected in another view keeps filtering after the viewer switches away from it, and
+ * shows as a chip naming its view, such as "Lasso in Topics". Pressing the chip switches back to
+ * that view, where the region is selected again, and its × removes it.
  *
  * The row at the top says what the cards' solid bars count. That is the items in view that the
  * filters match, or the highlighted items while there is a highlight. The pale bars count
@@ -70,6 +86,10 @@ const figure = (n, compact) => (compact ? shortCount(n) : countText(n));
  * highlight, and for the field the map is coloured by. Viewers add other fields with Add field.
  * Taking a card off clears that field's filters and highlights.
  *
+ * The panel sets `hide-chips` on the cards it shows, so that a layer's card does not repeat the
+ * chips the panel shows for its clauses. Under `controls-only` the panel shows no chips, and the
+ * cards keep theirs.
+ *
  * Set `chips-only` on one panel and `controls-only` on another when you want the chips apart from
  * the cards.
  *
@@ -80,6 +100,10 @@ const figure = (n, compact) => (compact ? shortCount(n) : countText(n));
  *   column's chip was removed, Clear all was pressed, the highlight was cleared from the subject
  *   row, or a card was taken off in Add field. Removing a `member_of` chip fires nothing. Each card
  *   fires its own as well.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-selectchange']>} mosaica-selectchange - The chip
+ *   of a region held in another view was removed, or Clear all removed one, with that `view`.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-viewswitch']>} mosaica-viewswitch - The chip of
+ *   a region held in another view was pressed, and the panel switched to that view.
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-chipopen']>} mosaica-chipopen - A column's chip
  *   was pressed while `chips-only` is set, so you can show its card.
  * @csspart state - The state line, with `data-state`.
@@ -92,15 +116,18 @@ const figure = (n, compact) => (compact ? shortCount(n) : countText(n));
  * @csspart clear-highlight - The × beside Highlighted, which clears the highlight.
  * @csspart all - All matching and its number.
  * @csspart all-count - The number matching.
- * @csspart chips - The line of chips, while any filter or highlight is in force.
- * @csspart chip - One chip, with `data-verb` (`filter` or `highlight`) and `data-column` or
- *   `data-artifact`.
- * @csspart edit - A column chip's text, a button that opens its card.
+ * @csspart chips - The line of chips, while any filter or highlight is in force, and under
+ *   `chips-only` the words that stand in it after the last chip is removed.
+ * @csspart chip - One chip, with `data-verb` (`filter` or `highlight`) and `data-column`,
+ *   `data-artifact`, or `data-view` for a region held in another view.
+ * @csspart edit - A column chip's text, a button that opens its card; on a held region's chip, a
+ *   button that switches to its view.
  * @csspart clear - The Clear all button.
  * @csspart card - One `<mosaica-field-card>`, with `data-field`.
  * @csspart add - The Add field button, with `aria-expanded`.
  * @csspart add-note - How many fields are not listed.
- * @csspart add-list - The list of fields to add, while it is open.
+ * @csspart add-list - The list of fields to add, while it is open. A press outside it, or focus
+ *   leaving it, closes it.
  * @csspart add-search - The search box over that list.
  * @csspart add-option - One field in that list, with `data-column` or `data-layer`, `aria-checked`
  *   while its card is shown, and `aria-disabled` if it is pinned and cannot be taken off.
@@ -122,9 +149,9 @@ let MosaicaFilterPanel = (() => {
     let _compact_decorators;
     let _compact_initializers = [];
     let _compact_extraInitializers = [];
-    let _clusterLevel_decorators;
-    let _clusterLevel_initializers = [];
-    let _clusterLevel_extraInitializers = [];
+    let _clusterLevels_decorators;
+    let _clusterLevels_initializers = [];
+    let _clusterLevels_extraInitializers = [];
     let _opened_decorators;
     let _opened_initializers = [];
     let _opened_extraInitializers = [];
@@ -143,6 +170,9 @@ let MosaicaFilterPanel = (() => {
     let _addActive_decorators;
     let _addActive_initializers = [];
     let _addActive_extraInitializers = [];
+    let _emptied_decorators;
+    let _emptied_initializers = [];
+    let _emptied_extraInitializers = [];
     return class MosaicaFilterPanel extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -150,24 +180,26 @@ let MosaicaFilterPanel = (() => {
             _controlsOnly_decorators = [property({ type: Boolean, attribute: 'controls-only' })];
             _pinned_decorators = [property()];
             _compact_decorators = [property({ type: Boolean, reflect: true })];
-            _clusterLevel_decorators = [property({ type: Number, attribute: 'cluster-level' })];
+            _clusterLevels_decorators = [property({ attribute: false })];
             _opened_decorators = [state()];
             _folded_decorators = [state()];
             _openCard_decorators = [state()];
             _adding_decorators = [state()];
             _addSearch_decorators = [state()];
             _addActive_decorators = [state()];
+            _emptied_decorators = [state()];
             __esDecorate(this, null, _chipsOnly_decorators, { kind: "accessor", name: "chipsOnly", static: false, private: false, access: { has: obj => "chipsOnly" in obj, get: obj => obj.chipsOnly, set: (obj, value) => { obj.chipsOnly = value; } }, metadata: _metadata }, _chipsOnly_initializers, _chipsOnly_extraInitializers);
             __esDecorate(this, null, _controlsOnly_decorators, { kind: "accessor", name: "controlsOnly", static: false, private: false, access: { has: obj => "controlsOnly" in obj, get: obj => obj.controlsOnly, set: (obj, value) => { obj.controlsOnly = value; } }, metadata: _metadata }, _controlsOnly_initializers, _controlsOnly_extraInitializers);
             __esDecorate(this, null, _pinned_decorators, { kind: "accessor", name: "pinned", static: false, private: false, access: { has: obj => "pinned" in obj, get: obj => obj.pinned, set: (obj, value) => { obj.pinned = value; } }, metadata: _metadata }, _pinned_initializers, _pinned_extraInitializers);
             __esDecorate(this, null, _compact_decorators, { kind: "accessor", name: "compact", static: false, private: false, access: { has: obj => "compact" in obj, get: obj => obj.compact, set: (obj, value) => { obj.compact = value; } }, metadata: _metadata }, _compact_initializers, _compact_extraInitializers);
-            __esDecorate(this, null, _clusterLevel_decorators, { kind: "accessor", name: "clusterLevel", static: false, private: false, access: { has: obj => "clusterLevel" in obj, get: obj => obj.clusterLevel, set: (obj, value) => { obj.clusterLevel = value; } }, metadata: _metadata }, _clusterLevel_initializers, _clusterLevel_extraInitializers);
+            __esDecorate(this, null, _clusterLevels_decorators, { kind: "accessor", name: "clusterLevels", static: false, private: false, access: { has: obj => "clusterLevels" in obj, get: obj => obj.clusterLevels, set: (obj, value) => { obj.clusterLevels = value; } }, metadata: _metadata }, _clusterLevels_initializers, _clusterLevels_extraInitializers);
             __esDecorate(this, null, _opened_decorators, { kind: "accessor", name: "opened", static: false, private: false, access: { has: obj => "opened" in obj, get: obj => obj.opened, set: (obj, value) => { obj.opened = value; } }, metadata: _metadata }, _opened_initializers, _opened_extraInitializers);
             __esDecorate(this, null, _folded_decorators, { kind: "accessor", name: "folded", static: false, private: false, access: { has: obj => "folded" in obj, get: obj => obj.folded, set: (obj, value) => { obj.folded = value; } }, metadata: _metadata }, _folded_initializers, _folded_extraInitializers);
             __esDecorate(this, null, _openCard_decorators, { kind: "accessor", name: "openCard", static: false, private: false, access: { has: obj => "openCard" in obj, get: obj => obj.openCard, set: (obj, value) => { obj.openCard = value; } }, metadata: _metadata }, _openCard_initializers, _openCard_extraInitializers);
             __esDecorate(this, null, _adding_decorators, { kind: "accessor", name: "adding", static: false, private: false, access: { has: obj => "adding" in obj, get: obj => obj.adding, set: (obj, value) => { obj.adding = value; } }, metadata: _metadata }, _adding_initializers, _adding_extraInitializers);
             __esDecorate(this, null, _addSearch_decorators, { kind: "accessor", name: "addSearch", static: false, private: false, access: { has: obj => "addSearch" in obj, get: obj => obj.addSearch, set: (obj, value) => { obj.addSearch = value; } }, metadata: _metadata }, _addSearch_initializers, _addSearch_extraInitializers);
             __esDecorate(this, null, _addActive_decorators, { kind: "accessor", name: "addActive", static: false, private: false, access: { has: obj => "addActive" in obj, get: obj => obj.addActive, set: (obj, value) => { obj.addActive = value; } }, metadata: _metadata }, _addActive_initializers, _addActive_extraInitializers);
+            __esDecorate(this, null, _emptied_decorators, { kind: "accessor", name: "emptied", static: false, private: false, access: { has: obj => "emptied" in obj, get: obj => obj.emptied, set: (obj, value) => { obj.emptied = value; } }, metadata: _metadata }, _emptied_initializers, _emptied_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #chipsOnly_accessor_storage = __runInitializers(this, _chipsOnly_initializers, false);
@@ -190,11 +222,15 @@ let MosaicaFilterPanel = (() => {
         /** Keeps one card open at a time, and shortens the subject row's figures. */
         get compact() { return this.#compact_accessor_storage; }
         set compact(value) { this.#compact_accessor_storage = value; }
-        #clusterLevel_accessor_storage = (__runInitializers(this, _compact_extraInitializers), __runInitializers(this, _clusterLevel_initializers, null));
-        /** The level that cards for layers with levels count at. `null` is the coarsest level. */
-        get clusterLevel() { return this.#clusterLevel_accessor_storage; }
-        set clusterLevel(value) { this.#clusterLevel_accessor_storage = value; }
-        #opened_accessor_storage = (__runInitializers(this, _clusterLevel_extraInitializers), __runInitializers(this, _opened_initializers, new Set()));
+        #clusterLevels_accessor_storage = (__runInitializers(this, _compact_extraInitializers), __runInitializers(this, _clusterLevels_initializers, new Map()));
+        /**
+         * The level each card for a `stacked` or `tiered` layer counts at, keyed by layer name. A layer
+         * with no entry counts at the level the map draws it at, which follows the zoom where its levels
+         * declare no zoom range. Set it as a property; it has no attribute.
+         */
+        get clusterLevels() { return this.#clusterLevels_accessor_storage; }
+        set clusterLevels(value) { this.#clusterLevels_accessor_storage = value; }
+        #opened_accessor_storage = (__runInitializers(this, _clusterLevels_extraInitializers), __runInitializers(this, _opened_initializers, new Set()));
         /** The fields the user added, which stay listed. @internal */
         get opened() { return this.#opened_accessor_storage; }
         set opened(value) { this.#opened_accessor_storage = value; }
@@ -257,6 +293,7 @@ let MosaicaFilterPanel = (() => {
         height: 6px;
         border-radius: 1px;
         background: var(--_mosaica-bar);
+        forced-color-adjust: none;
       }
       .swatch.lit {
         background: var(--_mosaica-bar-highlight);
@@ -276,6 +313,7 @@ let MosaicaFilterPanel = (() => {
         color: var(--_mosaica-ink);
       }
       [part='clear-highlight'] {
+        position: relative;
         width: 18px;
         height: 18px;
         display: grid;
@@ -283,6 +321,18 @@ let MosaicaFilterPanel = (() => {
         border-radius: 4px;
         color: var(--_mosaica-ink-2);
       }
+      /* Each takes a press from 24 px around its middle, drawn no larger for it. */
+      [part='clear-highlight']::after,
+      .chip .edit::after,
+      [part='clear']::after {
+        content: '';
+        position: absolute;
+        inset: -3px;
+      }
+      .chip .edit::after,
+      [part='clear']::after {
+        inset: -4px 0;
+      }
       [part='clear-highlight']:hover {
         background: var(--_mosaica-surface-3);
       }
@@ -295,17 +345,30 @@ let MosaicaFilterPanel = (() => {
         border-bottom: 1px solid var(--_mosaica-line-2);
       }
       [part='chip'] {
+        position: relative;
         min-height: 0;
         padding: 2px 4px 2px 8px;
         gap: 4px;
       }
-      [part='chip'] > button:last-child {
-        width: 16px;
-        height: 16px;
-        display: grid;
-        place-items: center;
+      /* A region held as the viewer leaves its view arrives here from the map's corner. */
+      [part='chip'][data-view] {
+        animation: arrive 1.2s ease-out 1;
+      }
+      @keyframes arrive {
+        from {
+          box-shadow: 0 0 0 3px var(--_mosaica-accent);
+        }
+        to {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        [part='chip'][data-view] {
+          animation: none;
+        }
       }
       .chip .edit {
+        position: relative;
         display: inline-flex;
         flex: 0 1 auto;
         align-items: center;
@@ -313,7 +376,12 @@ let MosaicaFilterPanel = (() => {
         font: inherit;
         text-align: left;
       }
+      /* The pen on a highlight's chip, which says in a shape what the chip's colour says. */
+      [part='chip'] > svg {
+        flex: none;
+      }
       [part='clear'] {
+        position: relative;
         margin-left: auto;
         padding: 0;
         font-size: 12px;
@@ -389,12 +457,37 @@ let MosaicaFilterPanel = (() => {
         font-size: 12px;
         color: var(--_mosaica-ink-3);
       }
+      .emptied {
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        color: var(--_mosaica-ink-2);
+      }
+      @media (forced-colors: active) {
+        .swatch {
+          background: CanvasText;
+        }
+        .swatch.lit {
+          background: Highlight;
+        }
+        .swatch.pale {
+          background: GrayText;
+        }
+      }
     `
         ];
         /** Every item the filters admit, which All matching counts. */
         matching = (__runInitializers(this, _addActive_extraInitializers), new HeldAggregate('fields-match'));
         /** The card to open, scroll to and focus once the cards are drawn. */
         editing = null;
+        /** A pressed control that its own action removes, and the control that takes focus once it has gone. */
+        leaving = null;
+        #emptied_accessor_storage = __runInitializers(this, _emptied_initializers, false);
+        /** Whether the last chip was removed from a panel with nothing else to focus, which then says so. @internal */
+        get emptied() { return this.#emptied_accessor_storage; }
+        set emptied(value) { this.#emptied_accessor_storage = value; }
+        /** Whether those words held focus as a render began. */
+        wordsHeld = (__runInitializers(this, _emptied_extraInitializers), false);
         /** The keys of the fields shown, in the order they were first shown. */
         listOrder = [];
         floating = new FloatingList(() => {
@@ -424,8 +517,41 @@ let MosaicaFilterPanel = (() => {
         disconnectedCallback() {
             this.floating.stop();
             this.matching.set(null, null);
+            document.removeEventListener('pointerdown', this.onPressOutsideAdd, true);
             super.disconnectedCallback();
         }
+        /** A press outside the open Add field list closes it, as Escape does. */
+        onPressOutsideAdd = (e) => {
+            const adder = this.renderRoot.querySelector('.adder');
+            if (!adder || !e.composedPath().includes(adder))
+                this.adding = false;
+        };
+        /**
+         * Before an action that removes the pressed control `gone`, note where focus goes once it has.
+         * From a chip's ×, to the × of the chip after it, else of the chip before, as each stands then.
+         * From there, and from Clear all and the clear-highlight ×, to Add field: a × that took focus
+         * unasked would remove a filter on the next press. Under `chips-only`, which has no Add field, to
+         * the words that say no filter is left.
+         */
+        leave(gone) {
+            const closes = Array.from(this.renderRoot.querySelectorAll('[part="chip"] > button:last-child'));
+            const at = closes.indexOf(gone);
+            this.leaving = { gone, to: at < 0 ? null : (closes[at + 1] ?? closes[at - 1] ?? null) };
+        }
+        /** Move focus as {@link leave} noted, once the pressed control has gone and taken focus with it. */
+        settleFocus() {
+            const leaving = this.leaving;
+            if (!leaving || leaving.gone.isConnected)
+                return;
+            this.leaving = null;
+            if (!focusLost())
+                return;
+            const to = (leaving.to?.isConnected ? leaving.to : null) ?? this.renderRoot.querySelector('[part="add"]');
+            if (to)
+                return to.focus();
+            this.emptied = true;
+            void this.updateComplete.then(() => this.renderRoot.querySelector('.emptied')?.focus());
+        }
         /** Show `field`'s card, open it, and scroll to and focus it. Call it after `mosaica-chipopen` to show the chip's card. */
         show(field) {
             this.opened = new Set([...this.opened, field]);
@@ -478,6 +604,20 @@ let MosaicaFilterPanel = (() => {
         updated(changed) {
             super.updated(changed);
             this.floating.update();
+            this.settleFocus();
+            // A chip that arrives takes the words' place, and their focus where they held it.
+            const arrived = this.emptied ? this.renderRoot.querySelector('[part="chip"] > button:last-child') : null;
+            if (arrived) {
+                this.emptied = false;
+                if (this.wordsHeld && focusLost())
+                    arrived.focus();
+            }
+            if (changed.has('adding')) {
+                if (this.adding)
+                    document.addEventListener('pointerdown', this.onPressOutsideAdd, true);
+                else
+                    document.removeEventListener('pointerdown', this.onPressOutsideAdd, true);
+            }
             const s = this.resolvedStore;
             this.matching.set(s, this.isConnected && !this.chipsOnly && !this.controlsOnly && s?.get('meta') ? { groupings: [{ count: true }] } : null);
             if (!this.editing || this.chipsOnly)
@@ -501,9 +641,12 @@ let MosaicaFilterPanel = (() => {
                 case 'category':
                     return `${caption}: ${draft.keys.map((k) => keyTitle(this.resolvedStore, column, k)).join(', ')}`;
                 case 'numeric': {
-                    const meta = this.resolvedStore?.get('meta');
-                    if (meta?.declaredScalars.find((c) => c.name === column)?.arrowType === 'timestamp_us')
+                    const type = this.resolvedStore?.get('meta')?.declaredScalars.find((c) => c.name === column)?.arrowType;
+                    if (type === 'timestamp_us')
                         return `${caption} ${dateRangeText(draft.gte, draft.lte)}`;
+                    const kept = type === 'bool' ? boolKeys(draft) : [];
+                    if (kept.length > 0)
+                        return `${caption}: ${kept.map((k) => BOOL_WORDS[k]).join(', ')}`;
                     const f = (v) => v.toLocaleString('en-GB');
                     if (draft.lte === null)
                         return `${caption} ≥ ${f(draft.gte)}`;
@@ -515,14 +658,27 @@ let MosaicaFilterPanel = (() => {
         }
         /**
          * A `member_of` chip's text: the clause's own label (the only name a filter layer's artifact has,
-         * since it is not served), else the served name, else unnamed.
+         * since it is not served), else the served name or key, else unnamed.
          */
         memberText(clause) {
             const artifacts = this.resolvedStore?.get('artifacts');
             const served = artifacts?.served.find((a) => a.mosaicaId === clause.artifact && a.layer === clause.layer);
-            const name = clause.label ?? (served ? artifactName(served, artifacts.attached) : null) ?? UNNAMED;
+            const name = clause.label ?? called(served ? artifactName(served, artifacts.attached) : null, served?.key).text;
             return clause.outside ? `Outside ${name}` : name;
         }
+        /** Switch to the view a held region is in, where the store selects it again. */
+        showRegion(meta, view) {
+            const s = this.resolvedStore;
+            if (s)
+                switchView(this, s, meta, view);
+        }
+        clearRegion(view) {
+            const s = this.resolvedStore;
+            if (!s)
+                return;
+            s.setRegions(s.get('filters').regions.filter((r) => r.view !== view));
+            emit(this, 'mosaica-selectchange', { shape: null, view, status: 'cleared' });
+        }
         clearMember(clause) {
             const s = this.resolvedStore;
             if (!s)
@@ -541,9 +697,13 @@ let MosaicaFilterPanel = (() => {
             const meta = s?.get('meta');
             if (!s || !meta)
                 return;
+            const held = s.get('filters').regions;
             s.setFilters(emptyDraft(meta.filterOperands));
             s.setMembers([]);
+            s.setRegions([]);
             emit(this, 'mosaica-filterchange', { column: null, expr: null });
+            for (const { view } of held)
+                emit(this, 'mosaica-selectchange', { shape: null, view, status: 'cleared' });
         }
         /** Empty every clause in the highlight position, so the cards count what is in view again. */
         clearHighlight() {
@@ -616,12 +776,12 @@ let MosaicaFilterPanel = (() => {
             const layers = clusterFieldLayers(meta, s.get('view').id);
             if (operands.length === 0 && layers.length === 0)
                 return html `<div class="panel"><span part="state" data-state="empty">Nothing to filter</span></div>`;
-            const { draft, members } = s.get('filters');
+            const { draft, members, regions } = s.get('filters');
             const holds = (column, verb) => {
                 const d = draft[verb][column];
                 return d !== undefined && isPopulated(d);
             };
-            const chips = this.chipLine(draft, members, holds);
+            const chips = this.chipLine(meta, draft, members, regions, holds);
             if (this.chipsOnly)
                 return chips;
             const fields = [
@@ -638,7 +798,7 @@ let MosaicaFilterPanel = (() => {
             this.listOrder = [...this.listOrder.filter((k) => keys.has(k)), ...shown.map((f) => f.key).filter((k) => !this.listOrder.includes(k))];
             const listed = this.listOrder.map((k) => shown.find((f) => f.key === k));
             const open = this.compact ? (listed.some((f) => f.key === this.openCard) ? this.openCard : null) : null;
-            const card = (f) => html `<mosaica-field-card part="card" exportparts=${CARD_PARTS} data-field=${f.key} field=${f.key} .store=${s} .level=${this.clusterLevel}
+            const card = (f) => html `<mosaica-field-card part="card" exportparts=${CARD_PARTS} data-field=${f.key} field=${f.key} ?hide-chips=${!this.controlsOnly} .store=${s} .level=${f.layer ? (this.clusterLevels.get(f.layer.name) ?? null) : null}
         ?compact=${this.compact} .folded=${this.compact ? f.key !== open : this.folded.has(f.key)}
         @mosaica-fold=${(e) => this.onToggle(f.key, e.currentTarget)}
         @mosaica-filterchange=${() => this.keepListed(f.key)} @mosaica-clausechange=${() => this.keepListed(f.key)}></mosaica-field-card>`;
@@ -655,26 +815,54 @@ let MosaicaFilterPanel = (() => {
             const skel = html `<span class="skel" aria-hidden="true"></span>`;
             return html `<div part="subject">
       <span class="key"><span part="subject-key" class=${`swatch${lit ? ' lit' : ''}`}></span><span part="subject-name" class=${lit ? 'lit' : ''}>${lit ? 'Highlighted' : 'In view'}</span><span part="subject-count">${n === null ? skel : figure(n, this.compact)}</span>${lit
-                ? html `<button part="clear-highlight" type="button" aria-label="Clear highlight" title="Clear highlight" @click=${() => this.clearHighlight()}>${icon('close', 11, 2.4)}</button>`
+                ? html `<button part="clear-highlight" type="button" aria-label="Clear highlight" title="Clear highlight" @click=${(e) => {
+                    this.leave(e.currentTarget);
+                    this.clearHighlight();
+                }}>${icon('close', 11, 2.4)}</button>`
                 : nothing}</span>
       <span part="all" class="key"><span class="swatch pale"></span><span>${this.compact ? 'All' : 'All matching'}</span><span part="all-count">${total === null ? skel : figure(total, this.compact)}</span></span>
     </div>`;
         }
         /** Every clause as a chip, then Clear all; nothing while none is applied. */
-        chipLine(draft, members, holds) {
+        chipLine(meta, draft, members, regions, holds) {
             const columns = [...new Set([...Object.keys(draft.filter), ...Object.keys(draft.highlight)])];
             const chips = VERBS.flatMap((verb) => columns.flatMap((c) => (holds(c, verb) ? [{ c, verb, d: draft[verb][c] }] : [])));
-            if (chips.length === 0 && members.length === 0)
-                return nothing;
+            if (chips.length === 0 && members.length === 0 && regions.length === 0) {
+                return this.emptied && this.chipsOnly ? html `<div part="chips"><span class="emptied" tabindex="-1" @blur=${() => (this.emptied = false)}>No filters</span></div>` : nothing;
+            }
+            // The pen on a highlight's chip, with the word for a reader; a filter's has neither.
+            const word = (verb) => (verb === 'highlight' ? html `${icon('highlight', 12, 1.6)}<span class="sr-only">highlight </span>` : nothing);
+            const pressed = (e) => this.leave(e.currentTarget);
             return html `<div part="chips">
-      ${chips.map(({ c, verb, d }) => html `<span part="chip" class="chip" data-verb=${verb} data-column=${c}
-          ><button part="edit" class="edit" type="button" title="Show its card" @click=${() => this.edit(c, verb)}>${this.chipText(c, d)}</button
-          ><button type="button" aria-label=${`Remove the ${columnCaption(c)} ${verb}`} @click=${() => this.clearColumn(c, verb)}>${icon('close', 10, 2.4)}</button></span
+      ${repeat(chips, ({ c, verb }) => `${verb} ${c}`, ({ c, verb, d }) => html `<span part="chip" class="chip" data-verb=${verb} data-column=${c}
+          >${word(verb)}<button part="edit" class="edit" type="button" title="Show its card" @click=${() => this.edit(c, verb)}>${this.chipText(c, d)}</button
+          ><button type="button" aria-label=${`Remove the ${columnCaption(c)} ${verb}`} @click=${(e) => {
+                pressed(e);
+                this.clearColumn(c, verb);
+            }}>${icon('close', 10, 2.4)}</button></span
         >`)}
-      ${[...members].sort((a, b) => VERBS.indexOf(a.verb) - VERBS.indexOf(b.verb)).map((m) => html `<span part="chip" class="chip" data-verb=${m.verb} data-artifact=${String(m.artifact)}
-          >${this.memberText(m)}<button type="button" aria-label=${`Remove ${this.memberText(m)}`} @click=${() => this.clearMember(m)}>${icon('close', 10, 2.4)}</button></span
+      ${repeat([...members].sort((a, b) => VERBS.indexOf(a.verb) - VERBS.indexOf(b.verb)), (m) => `${m.verb} ${m.layer} ${m.artifact}`, (m) => html `<span part="chip" class="chip" data-verb=${m.verb} data-artifact=${String(m.artifact)}
+          >${word(m.verb)}${this.memberText(m)}<button type="button" aria-label=${`Remove the ${this.memberText(m)} ${m.verb}`} @click=${(e) => {
+                pressed(e);
+                this.clearMember(m);
+            }}>${icon('close', 10, 2.4)}</button></span
         >`)}
-      <button part="clear" type="button" @click=${() => this.clearAll()}>Clear all</button>
+      ${repeat(regions, (r) => r.view, (r) => {
+                const view = viewTitle(meta, r.view);
+                const text = regionText(r.shape, view);
+                return html `<span part="chip" class="chip" data-verb="filter" data-view=${r.view}
+            ><button part="edit" class="edit" type="button" title=${`Show in ${view}`} @click=${() => this.showRegion(meta, r.view)}
+              >${icon(r.shape.kind === 'lasso' ? 'lasso' : 'box', 12)}${text}</button
+            ><button type="button" aria-label=${`Remove the ${text} filter`} @click=${(e) => {
+                    pressed(e);
+                    this.clearRegion(r.view);
+                }}>${icon('close', 10, 2.4)}</button></span
+          >`;
+            })}
+      <button part="clear" type="button" @click=${(e) => {
+                pressed(e);
+                this.clearAll();
+            }}>Clear all</button>
     </div>`;
         }
         /** Add field, its list of every field, and how many are not listed. */
@@ -690,7 +878,12 @@ let MosaicaFilterPanel = (() => {
                     this.takeOff(key);
             };
             const rest = fields.length - listed.length;
-            return html `<div class="adder">
+            return html `<div class="adder" @focusout=${(e) => {
+                // Focus that goes to nothing, as on a press on the list's own padding or scrollbar, has not left.
+                const to = e.relatedTarget;
+                if (to && !e.currentTarget.contains(to))
+                    this.adding = false;
+            }}>
       <button part="add" class="btn" type="button" aria-expanded=${this.adding ? 'true' : 'false'} aria-controls="add-list"
         @click=${() => {
                 this.adding = !this.adding;
@@ -720,6 +913,9 @@ let MosaicaFilterPanel = (() => {
                     if (unlisted)
                         this.add(unlisted.key);
                 }} /></div>
+            <div role="status">${offered.length > 0
+                    ? html `<span class="sr-only">${offered.length} ${offered.length === 1 ? 'field' : 'fields'} listed</span>`
+                    : html `<span class="none">No field by that name</span>`}</div>
             ${offered.length > 0
                     ? html `<div role="menu" aria-label="Fields">${offered.map((o, i) => {
                         const added = isListed(o.key);
@@ -729,13 +925,17 @@ let MosaicaFilterPanel = (() => {
                     aria-disabled=${kept ? 'true' : nothing} title=${kept ? 'Always shown here' : added ? 'Remove from the column' : nothing} tabindex=${i === tabbed ? '0' : '-1'}
                     @click=${() => choose(o.key)} @keydown=${(e) => this.addKeys(e, i)}><span>${o.title}</span>${added ? html `<span class="kind">Shown</span>` : o.layer ? html `<span class="kind">Clusters</span>` : nothing}</button>`;
                     })}</div>`
-                    : html `<span class="none">No field by that name</span>`}
+                    : nothing}
           </div>`
                 : nothing}
     </div>`;
         }
         willUpdate(changed) {
             super.willUpdate(changed);
+            let at = this.emptied && this.isConnected ? document.activeElement : null;
+            while (at && at.getRootNode() !== this.shadowRoot)
+                at = at.shadowRoot?.activeElement ?? null;
+            this.wordsHeld = at?.classList.contains('emptied') ?? false;
             // The search box takes focus as the list opens.
             if (changed.has('adding') && this.adding)
                 void this.updateComplete.then(() => this.renderRoot.querySelector('[part="add-search"]')?.focus());

package/dist/filter.d.ts

@@ -14,11 +14,16 @@ export declare const OPERATOR_WORDS: Record<KeywordOperator, string>;
  * - A text column takes words that an item must all contain. Double quotes match a phrase where the
  *   column supports phrases, and `OR` between terms matches either.
  * - A category column suggests values as the viewer types. The arrow keys move through the
- *   suggestions, Enter chooses or removes one, and Escape clears what was typed.
+ *   suggestions, as do Home and End once one is reached. Enter chooses or removes the suggestion
+ *   they reached, and Escape clears what was typed. A line under the box says how many values are
+ *   listed, or why none is, and that they are loading once that has taken a quarter of a second.
  * - A keyword column has a menu for choosing how to match, by `contains`, `prefix` or `eq`.
  *
  * The box sets the filter 350 ms after the last keystroke, so that the map does not redraw for
- * every letter. If your code sets a text filter the box cannot express, the box shows it read-only.
+ * every letter. While the query that change started is still loading, and once it has run for a
+ * quarter of a second, a spinner takes the search icon's place. The spinner is not read out:
+ * `<mosaica-status>` is what announces a running query. If your code sets a text filter the box
+ * cannot express, the box shows it read-only.
  *
  * @summary A search box that filters the map by one column.
  * @tagname mosaica-filter
@@ -26,11 +31,13 @@ export declare const OPERATOR_WORDS: Record<KeywordOperator, string>;
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-filterchange']>} mosaica-filterchange - The box
  *   changed the column's filter.
  * @csspart entry - The box.
+ * @csspart spinner - The spinner in the search icon's place while the box's own query runs.
  * @csspart mode - The keyword column's operator button, which opens its menu.
  * @csspart operators - The menu of a keyword column's operators.
  * @csspart operator - One operator in the menu, with `aria-checked`.
  * @csspart values - The typeahead's suggestions.
- * @csspart tick - One suggested value, with `aria-selected`.
+ * @csspart tick - One suggested value, with `aria-selected`, and `data-active` on the one the arrow
+ *   keys reached.
  * @csspart bar - A bar for a suggested value's share of the items counted.
  * @csspart value-count - A suggested value's count.
  * @csspart more - The note under the box when nothing matches, or when more values match than are
@@ -56,13 +63,18 @@ export declare class MosaicaFilter extends MosaicaElement {
     accessor draft: ColumnDraft | null;
     /** @internal */
     accessor search: string;
-    /** The suggestion the arrow keys moved to, by code; `null` is the first. @internal */
+    /** The suggestion the arrow keys reached, by code; `null` before they reach one. @internal */
     accessor activeCode: number | null;
     /** Whether the category box has focus, which its suggestions show only while it does. @internal */
     accessor focused: boolean;
     /** Whether a keyword column's operator menu is open. @internal */
     accessor operatorsOpen: boolean;
     private sent;
+    /** Whether the query the store is running was started by this box. */
+    private asked;
+    private readonly query;
+    /** Whether the suggestions have been awaited long enough to say so. */
+    private readonly awaited;
     private readonly floating;
     private readonly operatorMenu;
     private typing;
@@ -92,10 +104,16 @@ export declare class MosaicaFilter extends MosaicaElement {
     /** Moves focus to the box. */
     focus(options?: FocusOptions): void;
     protected updated(changed: PropertyValues<this>): void;
+    private get querying();
+    /** Whether a category box holds text whose suggestions have neither landed nor been refused. */
+    private get awaiting();
+    /** The search icon, or a spinner while the query this box started has run long enough to name. */
+    private lead;
     /** The box's draft: the one being edited, else the store's, else the client's empty one, which also sets a keyword's starting operator. */
     private currentDraft;
     private change;
     render(): TemplateResult | typeof nothing;
+    /** The box's name: the column, and the placeholder the box shows. */
     private label;
     private text;
     /** A keyword box, offering the operators the column publishes in a menu. */