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

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

@@ -0,0 +1,153 @@
+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' },
+        ],
+      },
+    ],
+    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' },
+        ],
+      },
+    ],
+  };
+
+  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,30 @@
+import type { FacetEventDetails, FacetOption } from '../../models';
+
+export interface FacetRef {
+  facetType: FacetOption;
+  bucketKey: string;
+  displayText?: string;
+}
+
+interface LabeledSmartFacet {
+  label: string;
+  facets: FacetRef[];
+}
+
+interface UnlabeledSmartFacet {
+  label?: string;
+  facets: [FacetRef];
+}
+
+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,281 @@
+/* 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';
+
+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[] = [];
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    return html`
+      <div id="smart-facets-container">
+        ${this.filtersToggleTemplate}
+        ${repeat(
+          this.smartFacets,
+          f => `${f.label}|${f.facets[0].facetType}|${f.facets[0].bucketKey}`,
+          facet => this.makeSmartFacet([facet])
+        )}
+      </div>
+    `;
+  }
+
+  protected willUpdate(changed: PropertyValues): void {
+    if (
+      changed.has('query') ||
+      (changed.has('aggregations') &&
+        (!changed.get('aggregations') ||
+          Object.keys(changed.get('aggregations')).length === 0))
+    ) {
+      this.updateSmartFacets();
+    }
+  }
+
+  private async updateSmartFacets(): Promise<void> {
+    if (this.query) {
+      this.heuristicRecs =
+        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);
+      this.smartFacets = this.facetsToDisplay;
+    }
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private makeSmartFacet(facets: SmartFacet[]) {
+    if (facets.length === 0) {
+      return nothing;
+    }
+    return this.smartFacetButton(facets[0]);
+    // else {
+    //   return this.smartFacetDropdown(facets);
+    // }
+  }
+
+  private smartFacetButton(facet: SmartFacet) {
+    return html`
+      <smart-facet-button
+        .facetInfo=${facet}
+        @facetClick=${this.facetClicked}
+      ></smart-facet-button>
+    `;
+  }
+
+  // private smartFacetDropdown(facets: SmartFacet[]) {
+  //   return html`
+  //     <smart-facet-dropdown
+  //       .facetType=${facets[0].facets[0].facetType}
+  //       .buckets=${facets.map(sf => sf.facets.map(f => ({
+  //         key: f.bucketKey,
+
+  //       })))}
+  //       .activeBucket=${facet.buckets[0]}
+  //       @facetClick=${this.facetClicked}
+  //     ></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.aggregations) return [];
+
+    const facets: SmartFacet[] = [];
+
+    if (this.heuristicRecs.length > 0) {
+      for (const rec of this.heuristicRecs) {
+        facets.push(rec);
+      }
+    }
+
+    for (const [key, agg] of Object.entries(this.aggregations)) {
+      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 bestBucket = buckets.find(b => {
+        const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
+        if (selectedFacetBucket && selectedFacetBucket.state !== 'none')
+          return false;
+        return true;
+      });
+      if (!bestBucket) continue;
+
+      facets.push(this.toSmartFacet(facetType, [bestBucket]));
+
+      if (facetType === 'mediatype') {
+        facets.push(this.toSmartFacet(facetType, [buckets[1]]));
+      }
+
+      // if (facetType === 'collection' || facetType === 'subject') {
+      //   facets[facets.length - 1].buckets.push(...buckets.slice(1, 4).map(b => this.toSmartFacet(facetType, [b], false).buckets[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,
+      ...this.smartFacets.filter(f => f !== 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 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;
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,114 @@
+import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mediatypeConfig } from '../../mediatype/mediatype-config';
+import type { SmartFacet } from './models';
+
+@customElement('smart-facet-button')
+export class SmartFacetButton extends LitElement {
+  @property({ type: Object }) facetInfo?: SmartFacet;
+
+  @property({ type: Boolean }) selected = false;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    if (!this.facetInfo) return nothing;
+
+    const isSingleFacet = this.facetInfo.facets.length === 1;
+    const firstFacet = this.facetInfo.facets[0];
+
+    const displayText =
+      this.facetInfo.label ?? firstFacet.displayText ?? firstFacet.bucketKey;
+    if (!displayText) return nothing;
+
+    const icon =
+      isSingleFacet && firstFacet.facetType === 'mediatype'
+        ? mediatypeConfig[firstFacet.bucketKey].icon
+        : nothing;
+
+    return html`
+      <a
+        class="smart-facet-button ${this.selected ? 'selected' : ''}"
+        href=${this.href}
+        @click=${this.facetClicked}
+      >
+        ${icon} ${displayText}
+        ${this.selected
+          ? html`<span style="margin-left: 5px;">×</span>`
+          : nothing}
+      </a>
+    `;
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private get href(): string {
+    const url = new URL(window.location.href);
+    if (this.facetInfo) {
+      for (const facet of this.facetInfo.facets) {
+        url.searchParams.append(
+          'and[]',
+          encodeURIComponent(`${facet.facetType}:"${facet.bucketKey}"`)
+        );
+      }
+    }
+    return url.toString();
+  }
+
+  private facetClicked(e: Event): void {
+    e.preventDefault();
+    if (!this.facetInfo) return;
+
+    this.selected = !this.selected;
+
+    this.dispatchEvent(
+      new CustomEvent('facetClick', {
+        detail: {
+          smartFacet: this.facetInfo,
+          details: this.facetInfo.facets.map(f => ({
+            facetType: f.facetType,
+            bucket: {
+              key: f.bucketKey,
+              count: 0,
+              state: this.selected ? 'selected' : 'none',
+            },
+            negative: false,
+          })),
+        },
+      })
+    );
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .smart-facet-button {
+        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);
+      }
+
+      .smart-facet-button.selected {
+        background: #4c76aa;
+      }
+
+      .smart-facet-button > svg {
+        width: 15px;
+        filter: invert(1);
+        vertical-align: text-top;
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,129 @@
+import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
+import type { FacetRef, SmartFacet, SmartFacetEvent } from './models';
+
+@customElement('smart-facet-dropdown')
+export class SmartFacetDropdown extends LitElement {
+  @property({ type: Array }) facetInfo?: SmartFacet[];
+
+  @property({ type: String }) labelPrefix?: string;
+
+  @property({ type: Object }) activeFacetRef?: FacetRef;
+
+  @query('ia-dropdown') dropdown?: IaDropdown;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    if (!this.facetInfo || !this.activeFacetRef) return nothing;
+    if (this.facetInfo.length === 0) return nothing;
+
+    const displayText = this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;
+    if (!displayText) return nothing;
+
+    return html`
+      <div class="dropdown-container">
+        <ia-dropdown
+          class="dropdown"
+          displayCaret
+          openViaButton
+          closeOnSelect
+          includeSelectedOption
+          .options=${this.dropdownOptions}
+          .selectedOption=${this.activeDropdownOption}
+          @optionSelected=${this.optionSelected}
+        >
+          <span class="dropdown-label" slot="dropdown-label"
+            >${this.labelPrefix ?? nothing} ${displayText}</span
+          >
+        </ia-dropdown>
+      </div>
+    `;
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private get dropdownOptions(): optionInterface[] {
+    return (
+      this.facetInfo?.map(smartFacet => {
+        const firstFacet = smartFacet.facets[0];
+        return {
+          id: firstFacet.bucketKey,
+          label: smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,
+        };
+      }) ?? []
+    );
+  }
+
+  private get activeDropdownOption(): optionInterface | undefined {
+    if (!this.activeFacetRef) return undefined;
+    return this.dropdownOptions.find(opt => opt.id === this.activeFacetRef?.bucketKey);
+  }
+
+  private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {
+    if (!this.facetInfo || !this.activeFacetRef) return;
+
+    let selectedSmartFacet;
+    for (const smartFacet of this.facetInfo) {
+      const selectedRef = smartFacet.facets.find(b => b.bucketKey === e.detail.option.id);
+      if (selectedRef) {
+        this.activeFacetRef = selectedRef;
+        selectedSmartFacet = smartFacet;
+      }
+    }
+
+    if (!selectedSmartFacet) return;
+
+    this.dispatchEvent(
+      new CustomEvent<SmartFacetEvent>('facetClick', {
+        detail: {
+          smartFacet: selectedSmartFacet,
+          details: [{
+            facetType: this.activeFacetRef.facetType,
+            bucket: {
+              key: this.activeFacetRef.bucketKey,
+              count: 0,
+              state: 'selected',
+            },
+            negative: false,
+          }],
+        },
+      })
+    );
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .dropdown-container {
+        padding: 5px 8px;
+        border-radius: 5px;
+        background: #194880;
+        color: white;
+        font-size: 1.6rem;
+        font-family: inherit;
+        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+      }
+
+      .dropdown-label {
+        font-size: 1.6rem;
+        font-family: inherit;
+      }
+
+      .dropdown {
+        --dropdownBorderWidth: 5px;
+        --dropdownBorderColor: transparent;
+        --caretWidth: 14px;
+        --caretHeight: 14px;
+      }
+    `;
+  }
+}