WEBDEV-7090: Style and event updates for federated search (#450)

latonv · web-flow · commit 56edbc99963b · 2025-06-11T18:43:27.000-07:00
* Update styling of smart bubbles/dropdowns

* Further styling changes

* Add more close attrs to dropdowns

* Lowercase creator heuristic bucket keys

* Add results header property

* Omit mediatype smart facets

* Add label to smart bubbles

* Only show label when there are &gt; 0 smart facets

* Hide smart facets if query is cleared

* Upgrade search-service to alpha version

* Add method to refresh smart facets

* Fix alignment/padding on dropdown entries

* Version fix

* Adjust smart facet bar styling &amp; update cycle

* Emit event when facet pane visibility changes

* Suppress mediatype-only facets from heuristics

* Add missing unit test

* Upgrade off alpha search-service
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@internetarchive/iaux-item-metadata": "^1.0.4",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",
-    "@internetarchive/search-service": "^2.0.0",
+    "@internetarchive/search-service": "^2.1.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",
diff --git a/src/assets/img/icons/close-circle-dark.ts b/src/assets/img/icons/close-circle-dark.ts
@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z" fill-rule="evenodd"/></svg>
+`;
diff --git a/src/collection-browser.ts b/src/collection-browser.ts
@@ -67,6 +67,7 @@ import { sha1 } from './utils/sha1';
 import { log } from './utils/log';
 import type { PlaceholderType } from './empty-placeholder';
 import type { ManageBar } from './manage/manage-bar';
+import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
 
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -250,6 +251,8 @@ export class CollectionBrowser
   /** Whether to display a smart results carousel above the full results */
   @property({ type: Boolean, reflect: true }) showSmartResults = false;
 
+  @property({ type: String }) resultsHeader?: string;
+
   /**
    * The maximum number of pages we will load when a privileged user clicks
    * the "Manage" button on the search page. Limited to 15 pages.
@@ -304,6 +307,8 @@ export class CollectionBrowser
 
   @query('manage-bar') private manageBar?: ManageBar;
 
+  @query('smart-facet-bar') private smartFacetBar?: SmartFacetBar;
+
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -507,7 +512,7 @@ export class CollectionBrowser
   render() {
     return html`
       ${this.showSmartFacetBar
-        ? html` <smart-facet-bar
+        ? html`<smart-facet-bar
             .query=${this.baseQuery}
             .aggregations=${this.dataSource.aggregations}
             .selectedFacets=${this.selectedFacets}
@@ -516,6 +521,7 @@ export class CollectionBrowser
             @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
               this.facetPaneVisible = !this.facetPaneVisible;
+              this.emitFacetPaneVisibilityChanged();
             }}
           ></smart-facet-bar>`
         : nothing}
@@ -682,18 +688,21 @@ export class CollectionBrowser
    * tiles and sort/filter bar are shown.
    */
   private get rightColumnTemplate(): TemplateResult {
+    const rightColumnClasses = classMap({
+      column: true,
+      'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
+      'smart-results-spacing': !!this.showSmartResults,
+    });
+
     return html`
-      <div
-        id="right-column"
-        class="column ${this.showSmartResults ? 'smart-results-spacing' : ''}"
-      >
+      <div id="right-column" class=${rightColumnClasses}>
         ${this.showSmartResults
           ? html`<slot name="smart-results"></slot>`
           : nothing}
         <section id="results">
           ${this.showSmartResults
             ? html`<h2 class="results-section-heading">
-                ${msg('All results')}
+                ${this.resultsHeader ?? msg('All results')}
               </h2>`
             : nothing}
           <div id="cb-top-view">
@@ -841,6 +850,10 @@ export class CollectionBrowser
     );
   }
 
+  refreshSmartFacets(): void {
+    this.smartFacetBar?.refresh();
+  }
+
   /**
    * Handler to show processing modal while removing item
    */
@@ -1663,6 +1676,18 @@ export class CollectionBrowser
     );
   }
 
+  /**
+   * Emits a `facetPaneVisibilityChanged` event indicating that the facet pane has
+   * been toggled open or closed.
+   */
+  private emitFacetPaneVisibilityChanged(): void {
+    this.dispatchEvent(
+      new CustomEvent<boolean>('facetPaneVisibilityChanged', {
+        detail: this.facetPaneVisible,
+      }),
+    );
+  }
+
   /**
    * Emits a `queryStateChanged` event indicating that one or more of this component's
    * properties have changed in a way that could affect the set of search results.
@@ -2207,13 +2232,16 @@ export class CollectionBrowser
           flex: 1;
           position: relative;
           min-height: 90vh;
-          border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
           margin-top: var(--rightColumnMarginTop, 0);
           padding-top: 2rem;
           background: #fff;
         }
 
+        #left-column:not([hidden]) + #right-column {
+          border-left: 1px solid rgb(232, 232, 232);
+        }
+
         #right-column.smart-results-spacing {
           padding-top: 0.5rem;
           border-right: none;
diff --git a/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-heuristic.ts b/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-heuristic.ts
@@ -44,7 +44,10 @@ export class WikidataHeuristic implements SmartQueryHeuristic {
           facets: smartFacet.facets.map(facet => {
             const replaced = {
               ...facet,
-              bucketKey: facet.bucketKey.replace('__QUERY', query),
+              bucketKey: facet.bucketKey.replace(
+                '__QUERY',
+                query.toLowerCase(),
+              ),
             };
 
             if (facet.displayText) {
diff --git a/src/collection-facets/smart-facets/smart-facet-bar.ts b/src/collection-facets/smart-facets/smart-facet-bar.ts
@@ -9,6 +9,7 @@ import {
 } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, property, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import type { CollectionTitles } from '../../data-source/models';
 import type { FacetOption, SelectedFacets } from '../../models';
@@ -18,11 +19,11 @@ import type { SmartFacetDropdown } from './smart-facet-dropdown';
 import type { SmartFacet, SmartFacetEvent } from './models';
 import { smartFacetEquals } from './smart-facet-equals';
 import { dedupe } from './dedupe';
+import { log } from '../../utils/log';
 import filterIcon from '../../assets/img/icons/filter';
 
 import './smart-facet-button';
 import './smart-facet-dropdown';
-import { log } from '../../utils/log';
 
 const fieldPrefixes: Partial<Record<FacetOption, string>> = {
   collection: 'Collection: ',
@@ -59,9 +60,14 @@ export class SmartFacetBar extends LitElement {
   //
 
   render() {
+    if (!this.query) return nothing;
+
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
+        ${this.smartFacets.length > 0
+          ? html`<p id="filters-label">${msg('Insights:')}</p>`
+          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -98,6 +104,11 @@ export class SmartFacetBar extends LitElement {
     }
   }
 
+  refresh(): void {
+    this.lastAggregations = this.aggregations;
+    this.updateSmartFacets();
+  }
+
   private async updateSmartFacets(): Promise<void> {
     log('updating smart facets');
     if (this.query) {
@@ -164,6 +175,10 @@ export class SmartFacetBar extends LitElement {
 
     if (this.heuristicRecs.length > 0) {
       for (const rec of this.heuristicRecs) {
+        // Suppress mediatype-only facets for now.
+        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')
+          continue;
+
         facets.push([rec]);
       }
     }
@@ -206,10 +221,8 @@ export class SmartFacetBar extends LitElement {
         });
 
         if (facetType === 'mediatype') {
-          facets.push(
-            [this.toSmartFacet(facetType, [unusedBuckets[0]])],
-            [this.toSmartFacet(facetType, [unusedBuckets[1]])],
-          );
+          continue;
+          // Don't include mediatype bubbles
         } else if (facetType === 'collection' || facetType === 'subject') {
           const topBuckets = unusedBuckets.slice(0, 5);
           facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
@@ -320,33 +333,42 @@ export class SmartFacetBar extends LitElement {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        gap: 5px;
+        gap: 5px 10px;
         padding: 10px 0;
       }
 
       #filters-toggle {
         margin: 0;
         border: 0;
-        padding: 5px 10px;
-        border-radius: 15px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        padding: 5px 8px;
+        border-radius: 50%;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
         text-decoration: none;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
         cursor: pointer;
       }
 
       #filters-toggle.active {
-        background: #09294d;
-        box-shadow: -1px -1px rgba(0, 0, 0, 0.1);
+        background: #194880;
+        color: white;
       }
 
       #filters-toggle > svg {
-        width: 15px;
+        width: 12px;
+        filter: invert(0.16667);
+        vertical-align: -1px;
+      }
+
+      #filters-toggle.active > svg {
         filter: invert(1);
-        vertical-align: text-bottom;
+      }
+
+      #filters-label {
+        font-weight: bold;
+        margin: 0 -5px 0 0;
       }
     `;
   }
diff --git a/src/collection-facets/smart-facets/smart-facet-button.ts b/src/collection-facets/smart-facets/smart-facet-button.ts
@@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { mediatypeConfig } from '../../mediatype/mediatype-config';
 import type { SmartFacet, SmartFacetEvent } from './models';
 
+import closeCircleDark from '../../assets/img/icons/close-circle-dark';
+
 function capitalize(str?: string): string | undefined {
   if (!str) return str;
   return str.charAt(0).toLocaleUpperCase() + str.slice(1);
@@ -47,7 +49,7 @@ export class SmartFacetButton extends LitElement {
       >
         ${icon} ${displayText}
         ${this.selected
-          ? html`<span style="margin-left: 5px;">×</span>`
+          ? html`<span class="unselect-button">${closeCircleDark}</span>`
           : nothing}
       </a>
     `;
@@ -101,24 +103,39 @@ export class SmartFacetButton extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .smart-facet-button {
-        padding: 5px 10px;
-        border-radius: 15px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        display: inline-flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 5px 5px;
+        border-radius: 5px;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
+        line-height: normal;
         text-decoration: none;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .smart-facet-button.selected {
-        background: #4c76aa;
+        background: #194880;
+        color: white;
+      }
+
+      .unselect-button > svg {
+        width: 10px;
+        height: 10px;
+        filter: invert(1);
       }
 
       .smart-facet-button > svg {
-        width: 15px;
+        width: 12px;
+        height: 12px;
+        filter: invert(0.16667);
+      }
+
+      .smart-facet-button.selected > svg {
         filter: invert(1);
-        vertical-align: text-top;
       }
     `;
   }
diff --git a/src/collection-facets/smart-facets/smart-facet-dropdown.ts b/src/collection-facets/smart-facets/smart-facet-dropdown.ts
@@ -33,6 +33,8 @@ export class SmartFacetDropdown extends LitElement {
           displayCaret
           openViaButton
           closeOnSelect
+          closeOnEscape
+          closeOnBackdropClick
           includeSelectedOption
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
@@ -57,8 +59,11 @@ export class SmartFacetDropdown extends LitElement {
         const firstFacet = smartFacet.facets[0];
         return {
           id: firstFacet.bucketKey,
-          label:
-            smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,
+          label: html`<span>
+            ${smartFacet.label ??
+            firstFacet.displayText ??
+            firstFacet.bucketKey}
+          </span>`,
         };
       }) ?? []
     );
@@ -127,23 +132,29 @@ export class SmartFacetDropdown extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .dropdown-container {
-        padding: 5px 8px;
+        padding: 5px 5px;
         border-radius: 5px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .dropdown-label {
-        font-size: 1.6rem;
+        font-size: 1.4rem;
         font-family: inherit;
       }
 
       .dropdown {
-        --dropdownBorderWidth: 5px;
-        --dropdownBorderColor: transparent;
+        --dropdownBorderColor: #194880;
+        --dropdownBorderWidth: 1px;
+        --dropdownBgColor: white;
+        --dropdownHoverBgColor: #f8f8f8;
+        --dropdownTextColor: #2c2c2c;
+        --dropdownHoverTextColor: #2c2c2c;
+        --dropdownCaretColor: #2c2c2c;
+        --dropdownWhiteSpace: nowrap;
         --caretWidth: 14px;
         --caretHeight: 14px;
       }
diff --git a/test/collection-browser.test.ts b/test/collection-browser.test.ts
diff --git a/yarn.lock b/yarn.lock
