@internetarchive/collection-browser 2.7.2-alpha.1 → 2.7.2-alpha.3

package/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);
+  }
+}

package/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;
+  }
+}

package/src/collection-facets/smart-facets/heuristics/wikidata-heuristic.ts

@@ -0,0 +1,191 @@
+import type {
+  SmartQueryHeuristic,
+  KeywordFacetMap,
+  SmartFacet,
+} from '../models';
+
+// If wikidata describes the top query result as X, recommend facet Y, e.g.:
+// X              Y
+// written work   mt:texts
+// film           mt:movies
+// author         mt:texts and creator:<query>
+// filmmaker      mt:movies and creator:<query>
+// photographer   mt:image and creator:<query>
+// visual artist  mt:image and creator:<query>
+// etc.
+export class WikidataHeuristic implements SmartQueryHeuristic {
+  private static readonly ENTITIES: KeywordFacetMap = {
+    'written work': [
+      { facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] },
+    ],
+    literature: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    book: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    novel: [{ facets: [{ facetType: 'mediatype', bucketKey: 'texts' }] }],
+    filmmaker: [
+      {
+        label: 'Films by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'movies' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    author: [
+      {
+        label: 'Writing by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'texts' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    writer: [
+      {
+        label: 'Writing by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'texts' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    poet: [
+      {
+        label: 'Writing by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'texts' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    photographer: [
+      {
+        label: 'Images by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'image' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    painter: [
+      {
+        label: 'Images by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'image' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    'visual artist': [
+      {
+        label: 'Images by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'image' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    'graphic artist': [
+      {
+        label: 'Images by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'image' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    singer: [
+      {
+        label: 'Music by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'audio' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    songwriter: [
+      {
+        label: 'Music by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'audio' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    musician: [
+      {
+        label: 'Music by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'audio' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    composer: [
+      {
+        label: 'Music by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'audio' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+    pianist: [
+      {
+        label: 'Music by __QUERY',
+        facets: [
+          { facetType: 'mediatype', bucketKey: 'audio' },
+          { facetType: 'creator', bucketKey: '__QUERY' },
+        ],
+      },
+    ],
+  };
+
+  async getRecommendedFacets(query: string): Promise<SmartFacet[]> {
+    const recommendations: SmartFacet[] = [];
+
+    try {
+      const urlQuery = encodeURIComponent(query);
+
+      const wikidataResponse = await fetch(
+        `https://www.wikidata.org/w/api.php?action=wbsearchentities&search=${urlQuery}&format=json&language=en&uselang=en&origin=*&type=item&limit=5`
+      );
+      const searchResults = await wikidataResponse.json();
+
+      for (const [keyword, facets] of Object.entries(
+        WikidataHeuristic.ENTITIES
+      )) {
+        const keywordRegex = new RegExp(`\\b${keyword}\\b`);
+        if (keywordRegex.test(searchResults.search[0]?.description)) {
+          const entityName = searchResults.search[0].label;
+          recommendations.push(
+            ...facets.map(
+              sf =>
+                ({
+                  label: sf.label?.replace('__QUERY', entityName),
+                  facets: sf.facets.map(f => {
+                    const replaced = {
+                      ...f,
+                      bucketKey: f.bucketKey.replace('__QUERY', query),
+                    };
+
+                    if (f.displayText) {
+                      replaced.displayText = replaced.displayText?.replace(
+                        '__QUERY',
+                        entityName
+                      );
+                    }
+
+                    return replaced;
+                  }),
+                } as SmartFacet)
+            )
+          );
+        }
+      }
+
+      return recommendations;
+    } catch (err) {
+      return [];
+    }
+  }
+}

package/src/collection-facets/smart-facets/models.ts

@@ -0,0 +1,32 @@
+import type { FacetEventDetails, FacetOption } from '../../models';
+
+export interface FacetRef {
+  facetType: FacetOption;
+  bucketKey: string;
+  displayText?: string;
+}
+
+interface LabeledSmartFacet {
+  label: string;
+  facets: FacetRef[];
+  selected?: boolean;
+}
+
+interface UnlabeledSmartFacet {
+  label?: string;
+  facets: [FacetRef];
+  selected?: boolean;
+}
+
+export type SmartFacet = LabeledSmartFacet | UnlabeledSmartFacet;
+
+export interface SmartFacetEvent {
+  smartFacet: SmartFacet;
+  details: FacetEventDetails[];
+}
+
+export type KeywordFacetMap = Record<string, SmartFacet[]>;
+
+export interface SmartQueryHeuristic {
+  getRecommendedFacets(query: string): Promise<SmartFacet[]>;
+}

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -0,0 +1,330 @@
+/* eslint-disable no-continue */
+
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+  PropertyValues,
+} from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { Aggregation, Bucket } from '@internetarchive/search-service';
+import type { CollectionTitles } from '../../data-source/models';
+import type { FacetOption, SelectedFacets } from '../../models';
+import { updateSelectedFacetBucket } from '../../utils/facet-utils';
+import { SmartQueryHeuristicGroup } from './smart-facet-heuristics';
+import type { SmartFacet, SmartFacetEvent } from './models';
+import filterIcon from '../../assets/img/icons/filter';
+
+import './smart-facet-button';
+import './smart-facet-dropdown';
+import { smartFacetEquals } from './smart-facet-equals';
+import { dedupe } from './dedupe';
+
+const fieldPrefixes: Partial<Record<FacetOption, string>> = {
+  collection: 'Collection: ',
+  creator: 'By: ',
+  subject: 'About: ',
+};
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+@customElement('smart-facet-bar')
+export class SmartFacetBar extends LitElement {
+  @property({ type: String }) query?: string;
+
+  @property({ type: Object }) aggregations?: Record<string, Aggregation>;
+
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  /** The map from collection identifiers to their titles */
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  @property({ type: Boolean }) filterToggleActive = false;
+
+  @state() private heuristicRecs: SmartFacet[] = [];
+
+  @state() private smartFacets: SmartFacet[][] = [];
+
+  @state() private lastAggregations?: Record<string, Aggregation>;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    return html`
+      <div id="smart-facets-container">
+        ${this.filtersToggleTemplate}
+        ${repeat(
+          this.smartFacets,
+          f =>
+            `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,
+          facet => this.makeSmartFacet(facet)
+        )}
+      </div>
+    `;
+  }
+
+  protected willUpdate(changed: PropertyValues): void {
+    if (changed.has('query')) {
+      this.updateSmartFacets();
+      this.lastAggregations = undefined;
+    }
+
+    if (
+      changed.has('aggregations') &&
+      !this.lastAggregations &&
+      this.aggregations &&
+      Object.keys(this.aggregations).length > 0
+    ) {
+      this.lastAggregations = this.aggregations;
+    }
+  }
+
+  private async updateSmartFacets(): Promise<void> {
+    console.log('updating smart facets');
+    if (this.query) {
+      this.heuristicRecs =
+        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);
+      this.smartFacets = dedupe(this.facetsToDisplay);
+    }
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private makeSmartFacet(facets: SmartFacet[]) {
+    if (facets.length === 0) {
+      return nothing;
+    }
+    if (facets.length === 1) {
+      return this.smartFacetButton(facets[0]);
+    }
+    return this.smartFacetDropdown(facets);
+  }
+
+  private smartFacetButton(facet: SmartFacet) {
+    return html`
+      <smart-facet-button
+        .facetInfo=${facet}
+        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}
+        .selected=${facet.selected ?? false}
+        @facetClick=${this.facetClicked}
+      ></smart-facet-button>
+    `;
+  }
+
+  private smartFacetDropdown(facets: SmartFacet[]) {
+    return html`
+      <smart-facet-dropdown
+        .facetInfo=${facets}
+        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
+        .activeFacetRef=${facets[0].facets[0]}
+        @facetClick=${this.facetDropdownClicked}
+      ></smart-facet-dropdown>
+    `;
+  }
+
+  private get filtersToggleTemplate(): TemplateResult {
+    return html`
+      <button
+        id="filters-toggle"
+        class=${this.filterToggleActive ? 'active' : ''}
+        title="${this.filterToggleActive ? 'Hide' : 'Show'} filters pane"
+        @click=${this.filterToggleClicked}
+      >
+        ${filterIcon}
+      </button>
+    `;
+  }
+
+  private get facetsToDisplay(): SmartFacet[][] {
+    if (!this.lastAggregations) return [];
+
+    const facets: SmartFacet[][] = [];
+
+    if (this.heuristicRecs.length > 0) {
+      for (const rec of this.heuristicRecs) {
+        facets.push([rec]);
+      }
+    }
+
+    const keys = [
+      'mediatype',
+      'year',
+      'language',
+      'creator',
+      'subject',
+      'collection',
+    ];
+    for (const key of keys) {
+      const agg = this.lastAggregations[key];
+      if (!agg) continue;
+      if (agg.buckets.length === 0) continue;
+      if (['lending', 'year_histogram'].includes(key)) continue;
+      if (typeof agg.buckets[0] === 'number') continue;
+
+      if (
+        key === 'mediatype' &&
+        this.selectedFacets &&
+        Object.values(this.selectedFacets.mediatype).some(
+          bucket => bucket.state !== 'none'
+        )
+      ) {
+        continue;
+      }
+
+      const facetType = key as FacetOption;
+      const buckets = agg.buckets as Bucket[];
+
+      const unusedBuckets = buckets.filter(b => {
+        const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
+        if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {
+          return false;
+        }
+        return true;
+      });
+
+      if (facetType === 'mediatype') {
+        facets.push(
+          [this.toSmartFacet(facetType, [unusedBuckets[0]])],
+          [this.toSmartFacet(facetType, [unusedBuckets[1]])]
+        );
+      } else if (facetType === 'collection' || facetType === 'subject') {
+        const topBuckets = unusedBuckets.slice(0, 5);
+        facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
+      } else {
+        facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);
+      }
+    }
+
+    return facets;
+  }
+
+  private toSmartFacet(
+    facetType: FacetOption,
+    buckets: Bucket[]
+    // prefix = true
+  ): SmartFacet {
+    return {
+      facets: buckets.map(bucket => {
+        let displayText = capitalize(bucket.key.toString());
+        if (facetType === 'collection') {
+          const title = this.collectionTitles?.get(bucket.key.toString());
+          if (title) displayText = title;
+        }
+
+        // if (prefix && fieldPrefixes[facetType]) {
+        //   displayText = fieldPrefixes[facetType] + displayText;
+        // }
+
+        return {
+          facetType,
+          bucketKey: bucket.key.toString(),
+          displayText,
+        };
+      }),
+    } as SmartFacet;
+  }
+
+  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
+    this.smartFacets = [
+      [{ ...e.detail.smartFacet, selected: !e.detail.smartFacet.selected }],
+      ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
+    ];
+
+    for (const facet of e.detail.details) {
+      this.selectedFacets = updateSelectedFacetBucket(
+        this.selectedFacets,
+        facet.facetType,
+        facet.bucket,
+        true
+      );
+    }
+
+    const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+      detail: this.selectedFacets,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {
+    if (
+      this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))
+    ) {
+      return;
+    }
+
+    this.smartFacets = [
+      [{ ...e.detail.smartFacet, selected: true }],
+      ...this.smartFacets,
+    ];
+
+    for (const facet of e.detail.details) {
+      this.selectedFacets = updateSelectedFacetBucket(
+        this.selectedFacets,
+        facet.facetType,
+        facet.bucket,
+        true
+      );
+    }
+
+    const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+      detail: this.selectedFacets,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private filterToggleClicked(): void {
+    this.dispatchEvent(new CustomEvent('filtersToggled'));
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    return css`
+      #smart-facets-container {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 5px;
+        padding: 10px 0;
+      }
+
+      #filters-toggle {
+        margin: 0;
+        border: 0;
+        padding: 5px 10px;
+        border-radius: 15px;
+        background: #194880;
+        color: white;
+        font-size: 1.6rem;
+        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);
+      }
+
+      #filters-toggle > svg {
+        width: 15px;
+        filter: invert(1);
+        vertical-align: text-bottom;
+      }
+    `;
+  }
+}