WEBDEV-7003 Smart facet bar (#405)

* Checkpoint

* Fix type imports

* Dedupe smart facets, improve models/organization, and add language heuristic

* Ensure facet pane toggle only effective when smart facets shown

Author: latonv

src/app-root.ts

@@ -327,6 +327,14 @@ export class AppRoot extends LitElement {
               />
               <label for="enable-management">Enable manage mode</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-smart-facet-bar"
+                @click=${this.smartFacetBarCheckboxChanged}
+              />
+              <label for="enable-smart-facet-bar">Enable smart facet bar</label>
+            </div>
           </fieldset>
 
           <fieldset class="cb-visual-appearance">
@@ -696,6 +704,14 @@ export class AppRoot extends LitElement {
       'Select items to remove (customizable texts)';
   }
 
+  /**
+   * Handler for when the dev panel's "Enable smart facet bar" checkbox is changed.
+   */
+  private smartFacetBarCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.collectionBrowser.showSmartFacetBar = target.checked;
+  }
+
   /**
    * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
    */

src/assets/img/icons/filter.ts

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m 91.666668,8.3333328 v 0.9708343 l -35.3625,39.2916669 -2.137502,2.375 v 3.195832 32.350001 L 45.833334,82.35 V 54.166666 50.970834 l -2.1375,-2.375 L 8.3333328,9.3041671 V 8.3333328 H 91.666668 M 100,0 H 0 V 12.5 L 37.500001,54.166666 V 87.5 l 25,12.5 V 54.166666 L 100,12.5 Z"
+      fill="#000"
+    />
+  </svg>
+`;

src/collection-browser.ts

@@ -77,6 +77,7 @@ import './sort-filter-bar/sort-filter-bar';
 import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
+import './collection-facets/smart-facets/smart-facet-bar';
 
 @customElement('collection-browser')
 export class CollectionBrowser
@@ -95,7 +96,7 @@ export class CollectionBrowser
   /**
    * Which backend should be targeted by searches (e.g., metadata or FTS)
    */
-  @property({ type: String }) searchType: SearchType = SearchType.METADATA;
+  @property({ type: Number }) searchType: SearchType = SearchType.METADATA;
 
   /**
    * The identifier of the collection that searches should be performed within
@@ -147,6 +148,8 @@ export class CollectionBrowser
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
+  @property({ type: Boolean }) showSmartFacetBar = false;
+
   /**
    * Whether to show the date picker (above the facets)
    */
@@ -205,6 +208,8 @@ export class CollectionBrowser
    */
   @property({ type: String }) facetLoadStrategy: FacetLoadStrategy = 'eager';
 
+  @property({ type: Boolean }) facetPaneVisible = false;
+
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
@@ -496,6 +501,20 @@ export class CollectionBrowser
 
   render() {
     return html`
+      ${this.showSmartFacetBar
+        ? html` <smart-facet-bar
+            .query=${this.baseQuery}
+            .aggregations=${this.dataSource.aggregations}
+            .selectedFacets=${this.selectedFacets}
+            .collectionTitles=${this.dataSource.collectionTitles}
+            .filterToggleActive=${this.facetPaneVisible}
+            @facetsChanged=${this.facetsChanged}
+            @filtersToggled=${() => {
+              this.facetPaneVisible = !this.facetPaneVisible;
+            }}
+          ></smart-facet-bar>`
+        : nothing}
+
       <div
         id="content-container"
         class=${this.mobileView ? 'mobile' : 'desktop'}
@@ -599,7 +618,11 @@ export class CollectionBrowser
    */
   private get desktopLeftColumnTemplate(): TemplateResult {
     return html`
-      <div id="left-column" class="column">
+      <div
+        id="left-column"
+        class="column"
+        ?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
+      >
         ${this.facetTopViewSlot}
         <div id="facets-header-container">
           <h2 id="facets-header" class="sr-only">Filters</h2>

src/collection-facets/smart-facets/dedupe.ts

@@ -0,0 +1,43 @@
+import type { SmartFacet } from './models';
+import { smartFacetEquals } from './smart-facet-equals';
+
+/**
+ * Removes any duplicated smart facets from the given array.
+ * Smart facets are equal if they have the same `label` and same
+ * set of facet refs. Only the first occurrence of a given smart
+ * facet is kept.
+ * @param facets The array of smart facets to deduplicate
+ * @returns A new array containing the deduplicated set of facets
+ */
+export function dedupe<T extends SmartFacet[] | SmartFacet[][]>(facets: T): T {
+  if (!Array.isArray(facets[0])) {
+    const facetsUnnested = facets as SmartFacet[];
+
+    let result: SmartFacet[] = [...facetsUnnested];
+    for (const curFacet of facetsUnnested) {
+      result = result.filter(
+        sf => curFacet === sf || !smartFacetEquals(curFacet, sf)
+      );
+    }
+
+    return result as T;
+  }
+
+  const facetsNested = facets as SmartFacet[][];
+
+  const result: SmartFacet[][] = [];
+  for (const curFacetArray of facetsNested) {
+    const subresult: SmartFacet[] = [];
+    for (const curFacet of curFacetArray) {
+      const existing = result.find(sfa =>
+        sfa.find(sf => smartFacetEquals(curFacet, sf))
+      );
+      if (!existing) subresult.push(curFacet);
+    }
+    if (subresult.length > 0) {
+      result.push(subresult);
+    }
+  }
+
+  return result as T;
+}

src/collection-facets/smart-facets/heuristics/browser-language-heuristic.ts

@@ -0,0 +1,27 @@
+import type { SmartQueryHeuristic, SmartFacet } from '../models';
+
+export class BrowserLanguageHeuristic implements SmartQueryHeuristic {
+  async getRecommendedFacets(): Promise<SmartFacet[]> {
+    const browserLanguageCode = navigator.language;
+    const languageName =
+      BrowserLanguageHeuristic.getLanguageDisplayName(browserLanguageCode);
+    if (!languageName) return [];
+
+    return [
+      {
+        facets: [
+          {
+            facetType: 'language',
+            bucketKey: languageName,
+          },
+        ],
+      },
+    ];
+  }
+
+  private static getLanguageDisplayName(langCode: string): string | undefined {
+    // Strip off any script/region/variant codes for greater generality
+    const languageOnly = langCode.split('-')[0];
+    return new Intl.DisplayNames(['en'], { type: 'language' }).of(languageOnly);
+  }
+}

src/collection-facets/smart-facets/heuristics/query-keywords-heuristic.ts

@@ -0,0 +1,55 @@
+import type {
+  SmartQueryHeuristic,
+  KeywordFacetMap,
+  SmartFacet,
+} from '../models';
+
+// If the query contains X word but Y facet isn't selected, recommend facet Y
+export class QueryKeywordsHeuristic implements SmartQueryHeuristic {
+  private static readonly KEYWORDS: KeywordFacetMap = {
+    text: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    book: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    pdf: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    epub: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    audio: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    song: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    music: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    listen: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    podcast: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    radio: [{ facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] }],
+    stream: [
+      { facets: [{ facetType: 'mediatype', bucketKey: 'audio' }] },
+      { facets: [{ facetType: 'mediatype', bucketKey: 'movies' }] },
+    ],
+    video: [{ facets: [{ facetType: 'mediatype', bucketKey: 'movies' }] }],
+    movie: [{ facets: [{ facetType: 'mediatype', bucketKey: 'movies' }] }],
+    film: [{ facets: [{ facetType: 'mediatype', bucketKey: 'movies' }] }],
+    image: [{ facets: [{ facetType: 'mediatype', bucketKey: 'image' }] }],
+    photo: [{ facets: [{ facetType: 'mediatype', bucketKey: 'image' }] }],
+    picture: [{ facets: [{ facetType: 'mediatype', bucketKey: 'image' }] }],
+    software: [{ facets: [{ facetType: 'mediatype', bucketKey: 'software' }] }],
+    app: [{ facets: [{ facetType: 'mediatype', bucketKey: 'software' }] }],
+    program: [{ facets: [{ facetType: 'mediatype', bucketKey: 'software' }] }],
+    game: [{ facets: [{ facetType: 'mediatype', bucketKey: 'software' }] }],
+    etree: [{ facets: [{ facetType: 'mediatype', bucketKey: 'etree' }] }],
+    concert: [{ facets: [{ facetType: 'mediatype', bucketKey: 'etree' }] }],
+    'live music': [
+      { facets: [{ facetType: 'mediatype', bucketKey: 'etree' }] },
+    ],
+    dataset: [{ facets: [{ facetType: 'mediatype', bucketKey: 'data' }] }],
+  };
+
+  async getRecommendedFacets(query: string): Promise<SmartFacet[]> {
+    const recommendations: SmartFacet[] = [];
+
+    for (const [keyword, facets] of Object.entries(
+      QueryKeywordsHeuristic.KEYWORDS
+    )) {
+      if (query.includes(keyword)) {
+        recommendations.push(...facets);
+      }
+    }
+
+    return recommendations;
+  }
+}