@internetarchive/collection-browser 0.0.1-alpha.1

package/src/collection-facets.ts

@@ -0,0 +1,285 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { Aggregation } from '@internetarchive/search-service';
+
+type FacetOption =
+  | 'subject'
+  | 'mediatype'
+  | 'language'
+  | 'creator'
+  | 'collection'
+  | 'year';
+
+const facetDisplayOrder: FacetOption[] = [
+  'mediatype',
+  'year',
+  'subject',
+  'collection',
+  'creator',
+  'language',
+];
+
+const aggregationToFacetOption: Record<string, FacetOption> = {
+  subjectSorter: 'subject',
+  mediatypeSorter: 'mediatype',
+  languageSorter: 'language',
+  creatorSorter: 'creator',
+  collection: 'collection',
+  year: 'year',
+};
+
+const facetTitles: Record<FacetOption, string> = {
+  subject: 'Subject',
+  mediatype: 'Media Type',
+  language: 'Language',
+  creator: 'Creator',
+  collection: 'Collection',
+  year: 'Year',
+};
+
+interface FacetBucket {
+  // for some facets, we augment the key with a display value
+  displayText?: string;
+  key: string;
+  count: number;
+  selected: boolean;
+}
+
+interface FacetGroup {
+  title: string;
+  key: string;
+  buckets: FacetBucket[];
+}
+
+@customElement('collection-facets')
+export class CollectionFacets extends LitElement {
+  @property({ type: Object }) aggregations?: Record<string, Aggregation>;
+
+  @property({ type: Object }) selectedFacets: Record<string, string[]> = {};
+
+  private get hydratedSelectedFacets(): Record<string, string[]> {
+    const { selectedFacets } = this;
+    const hydratedSelectedFacets: Record<string, string[]> = {};
+    Object.entries(selectedFacets).forEach(([key]) => {
+      const values = hydratedSelectedFacets[key];
+      const title = facetTitles[key as FacetOption];
+      hydratedSelectedFacets[title] = values || [];
+      delete hydratedSelectedFacets[key];
+    });
+    return hydratedSelectedFacets;
+  }
+
+  render() {
+    return html`
+      <h1>Facets</h1>
+
+      ${this.mergedFacets.map(facetGroup => this.getFacetTemplate(facetGroup))}
+    `;
+  }
+
+  /**
+   * Combines the selected facets with the aggregations to create a single list of facets
+   */
+  private get mergedFacets(): FacetGroup[] {
+    const facetGroups: FacetGroup[] = [];
+
+    facetDisplayOrder.forEach(facetKey => {
+      const selectedFacetGroup = this.selectedFacetGroups.find(
+        group => group.key === facetKey
+      );
+      const aggregateFacetGroup = this.aggregationFacetGroups.find(
+        group => group.key === facetKey
+      );
+
+      // if the user selected a facet, but it's not in the aggregation, we add it as-is
+      if (selectedFacetGroup && !aggregateFacetGroup) {
+        facetGroups.push(selectedFacetGroup);
+        return;
+      }
+
+      // if we don't have an aggregate facet group, don't add this to the list
+      if (!aggregateFacetGroup) return;
+
+      // start with either the selected group if we have one, or the aggregate group
+      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;
+
+      // attach the counts to the selected buckets
+      const bucketsWithCount =
+        selectedFacetGroup?.buckets.map(bucket => {
+          const selectedBucket = aggregateFacetGroup.buckets.find(
+            b => b.key === bucket.key
+          );
+          if (selectedBucket) {
+            return {
+              ...bucket,
+              count: selectedBucket.count,
+            };
+          }
+          return bucket;
+        }) ?? [];
+
+      // append any additional buckets that were not selected
+      aggregateFacetGroup.buckets.forEach(bucket => {
+        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
+        if (existingBucket) return;
+        bucketsWithCount.push(bucket);
+      });
+      facetGroup.buckets = bucketsWithCount.splice(0, 5);
+
+      if (facetGroup.buckets.length === 0) return;
+
+      facetGroups.push(facetGroup);
+    });
+
+    return facetGroups;
+  }
+
+  /**
+   * Converts the raw `selectedFacets` to `FacetGroups`, which are easier to use
+   */
+  private get selectedFacetGroups(): FacetGroup[] {
+    const selectedFacetGroups: FacetGroup[] = [];
+    Object.entries(this.selectedFacets).forEach(([key, buckets]) => {
+      const title = facetTitles[key as FacetOption];
+      const group = {
+        title,
+        key,
+        buckets: buckets.map(bucket => ({
+          key: bucket,
+          count: 0,
+          selected: true,
+        })),
+      };
+      selectedFacetGroups.push(group);
+    });
+    return selectedFacetGroups;
+  }
+
+  /**
+   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+   */
+  private get aggregationFacetGroups(): FacetGroup[] {
+    const facetGroups: FacetGroup[] = [];
+    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {
+      if (key === 'year_histogram') return;
+      const option = this.getFacetOptionFromKey(key);
+      const title = facetTitles[option];
+      const facetBuckets: FacetBucket[] = buckets.buckets.map(bucket => ({
+        key: `${bucket.key}`,
+        count: bucket.doc_count,
+        selected: false,
+      }));
+      const group: FacetGroup = {
+        title,
+        key: option,
+        buckets: facetBuckets,
+      };
+      facetGroups.push(group);
+    });
+    return facetGroups;
+  }
+
+  private getFacetTemplate(facetGroup: FacetGroup) {
+    return html`
+      <h2>${facetGroup.title}</h2>
+      ${repeat(
+        facetGroup.buckets,
+        bucket => `${facetGroup.key}:${bucket.key}`,
+        bucket => html`
+          <label class="facet-row">
+            <div class="facet-checkbox">
+              <input
+                type="checkbox"
+                .name=${facetGroup.key}
+                .value=${bucket.key}
+                @click=${this.facetToggled}
+                ?checked=${bucket.selected}
+              />
+            </div>
+            <div class="facet-title">${bucket.key}</div>
+            <div class="facet-count">${bucket.count}</div>
+          </label>
+        `
+      )}
+    `;
+  }
+
+  private facetChecked(name: string, value: string) {
+    const { selectedFacets } = this;
+    const facetClone = { ...selectedFacets };
+    const currentFacetValues = facetClone[name];
+    if (currentFacetValues) {
+      currentFacetValues.push(value);
+      facetClone[name] = currentFacetValues;
+    } else {
+      facetClone[name] = [value];
+    }
+    this.selectedFacets = facetClone;
+  }
+
+  private facetUnchecked(name: string, value: string) {
+    const { selectedFacets } = this;
+    const facetClone = { ...selectedFacets };
+    let currentFacetValues = selectedFacets[name];
+    if (currentFacetValues) {
+      currentFacetValues = currentFacetValues.filter(el => el !== value);
+      facetClone[name] = currentFacetValues;
+      if (currentFacetValues.length === 0) {
+        delete facetClone[name];
+      }
+    }
+    this.selectedFacets = facetClone;
+  }
+
+  private facetToggled(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const { checked, name, value } = target;
+    if (checked) {
+      this.facetChecked(name, value);
+    } else {
+      this.facetUnchecked(name, value);
+    }
+
+    const event = new CustomEvent<Record<string, string[]>>('facetsChanged', {
+      detail: this.selectedFacets,
+    });
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * Parse the aggregate key title into the human readable title
+   *
+   * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+   *
+   * @param key
+   * @returns
+   */
+  private getFacetOptionFromKey(key: string): FacetOption {
+    const parts = key.split('__');
+    const fieldNamePart = parts[2];
+    const fieldName = fieldNamePart.split(':')[1];
+    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) =>
+      fieldName.includes(key2)
+    );
+    const option = facetMatch?.[1];
+    if (!option) throw new Error(`Could not find facet option for key: ${key}`);
+    return option;
+  }
+
+  static get styles() {
+    return css`
+      .facet-row {
+        display: flex;
+      }
+
+      .facet-title {
+        flex: 1;
+      }
+
+      .facet-count {
+        margin-left: 0.5rem;
+      }
+    `;
+  }
+}

package/src/mediatype-icon.ts

@@ -0,0 +1,83 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { audioIcon } from './assets/img/icons/mediatype/audio';
+import { etreeIcon } from './assets/img/icons/mediatype/etree';
+import { imagesIcon } from './assets/img/icons/mediatype/images';
+import { filmIcon } from './assets/img/icons/mediatype/film';
+import { softwareIcon } from './assets/img/icons/mediatype/software';
+import { textsIcon } from './assets/img/icons/mediatype/texts';
+import { tvIcon } from './assets/img/icons/mediatype/tv';
+import { videoIcon } from './assets/img/icons/mediatype/video';
+import { webIcon } from './assets/img/icons/mediatype/web';
+import { collectionIcon } from './assets/img/icons/mediatype/collection';
+
+@customElement('mediatype-icon')
+export class MediatypeIcon extends LitElement {
+  @property({ type: String }) mediatype: string | undefined;
+
+  @property({ type: Boolean }) showText = false;
+
+  private readonly mediatypeIcons: { [key: string]: any } = {
+    audio: audioIcon,
+    collection: collectionIcon,
+    data: etreeIcon,
+    etree: etreeIcon,
+    film: filmIcon,
+    image: imagesIcon,
+    movies: filmIcon,
+    software: softwareIcon,
+    texts: textsIcon,
+    tv: tvIcon,
+    video: videoIcon,
+    web: webIcon,
+  };
+
+  private readonly mediatypeText: { [key: string]: any } = {
+    audio: 'Audio',
+    collection: 'Collection',
+    data: 'Data',
+    etree: 'E-tree',
+    film: 'Film',
+    image: 'Image',
+    movies: 'Movie',
+    software: 'Software',
+    texts: 'Text',
+    tv: 'TV',
+    video: 'Video',
+    web: 'Web',
+  };
+
+  render() {
+    if (!this.mediatype) {
+      return html``;
+    }
+    return html`
+      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}">
+        ${this.mediatypeIcons[this.mediatype]}
+        <p class="status-text">${this.mediatypeText[this.mediatype]}</p>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      #icon.show-text svg {
+        height: 10px;
+        width: 10px;
+      }
+    `;
+  }
+}

package/src/models.ts

@@ -0,0 +1,25 @@
+import type { MediaType } from '@internetarchive/field-parsers';
+
+export interface TileModel {
+  identifier: string;
+  title: string;
+  averageRating?: number;
+  dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]
+  dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]
+  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]
+  datePublished?: Date; // Date work published in the world (user-defined) [from: date]
+  mediatype: MediaType;
+  viewCount: number;
+  itemCount: number;
+  favCount: number;
+  commentCount: number;
+  description?: string;
+  collectionIdentifier?: string;
+  collectionName?: string;
+  creator?: string;
+  subject?: string;
+  source?: string;
+  collection: string[];
+}
+
+export type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';

package/src/sort-filter-bar/alpha-bar.ts

@@ -0,0 +1,86 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('alpha-bar')
+export class AlphaBar extends LitElement {
+  @property({ type: String }) headline?: string;
+
+  @property({ type: String }) selectedLetter?: string;
+
+  private get selectedUppercaseLetter(): string | undefined {
+    return this.selectedLetter?.toUpperCase();
+  }
+
+  render() {
+    return html`
+      <h1>${this.headline}</h1>
+      <div id="container">
+        <ul>
+          ${this.alphabet.map(
+            letter =>
+              html`
+                <li
+                  class=${letter === this.selectedUppercaseLetter
+                    ? 'selected'
+                    : nothing}
+                >
+                  <a href="#" @click=${() => this.letterClicked(letter)}>
+                    ${letter}
+                  </a>
+                </li>
+              `
+          )}
+        </ul>
+      </div>
+    `;
+  }
+
+  private letterClicked(letter: string) {
+    if (letter === this.selectedUppercaseLetter) {
+      this.selectedLetter = undefined;
+    } else {
+      this.selectedLetter = letter;
+    }
+    this.dispatchEvent(
+      new CustomEvent('letterChanged', {
+        detail: { selectedLetter: this.selectedUppercaseLetter },
+      })
+    );
+  }
+
+  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+
+  static styles = css`
+    h1 {
+      font-size: 1.2rem;
+    }
+
+    #container {
+      background-color: #ddd;
+      color: #333;
+    }
+
+    ul {
+      list-style: none;
+      display: flex;
+      margin: 0;
+      padding: 0.5rem 1rem;
+      justify-content: space-between;
+    }
+
+    a {
+      color: #333;
+      text-decoration: none;
+      padding: 0.5rem 0.7rem;
+      display: block;
+    }
+
+    .selected {
+      background-color: darkgray;
+    }
+
+    .selected a {
+      color: white;
+    }
+  `;
+}