@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/facet-row.ts

@@ -0,0 +1,309 @@
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import type {
+  FacetOption,
+  FacetBucket,
+  FacetEventDetails,
+  FacetState,
+} from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import { srOnlyStyle } from '../styles/sr-only';
+
+@customElement('facet-row')
+export class FacetRow extends LitElement {
+  //
+  // UI STATE
+  //
+
+  /** The name of the facet group to which this facet belongs (e.g., "mediatype") */
+  @property({ type: String }) facetType?: FacetOption;
+
+  /** The facet bucket containing details about the state, count, and key for this row */
+  @property({ type: Object }) bucket?: FacetBucket;
+
+  /**
+   * Whether to omit the negative/hide button from this facet row if possible.
+   * Has no effect if the facet bucket is itself hidden, in which case the hide
+   * button *must* be shown to represent the state accurately.
+   */
+  @property({ type: Boolean, reflect: true }) omitHideButton = false;
+
+  /** The collection name cache for converting collection identifiers to titles */
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    return html`${this.facetRowTemplate}`;
+  }
+
+  //
+  // TEMPLATE GETTERS
+  //
+
+  /**
+   * Template for the full facet row, including the positive/negative checks,
+   * the display name, and the count.
+   */
+  private get facetRowTemplate(): TemplateResult | typeof nothing {
+    const { bucket, facetType } = this;
+    if (!bucket || !facetType) return nothing;
+
+    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
+    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
+
+    const extraNoteSpan = bucket.extraNote
+      ? html`<span class="facet-note">${bucket.extraNote}</span>`
+      : nothing;
+
+    // For collections, we render the collection title as a link.
+    // For other facet types, we just have a static value to use.
+    const bucketTextDisplay =
+      facetType !== 'collection'
+        ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
+        : html`<a href="/details/${bucket.key}">
+            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
+          </a> `;
+
+    const bucketCountText =
+      bucket.count > 0 ? bucket.count.toLocaleString() : '';
+
+    const facetHidden = bucket.state === 'hidden';
+    const facetSelected = bucket.state === 'selected';
+
+    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
+    const onlyShowText = facetSelected
+      ? `Show all ${facetType}s`
+      : `Only show ${titleText}`;
+    const hideText = `Hide ${titleText}`;
+    const unhideText = `Unhide ${titleText}`;
+    const showHideText = facetHidden ? unhideText : hideText;
+    const ariaLabel = `${titleText}, ${bucket.count} results`;
+
+    // Added data-testid for Playwright testing
+    return html`
+      <div class="facet-row-container">
+        <div class="facet-checkboxes">
+          <input
+            type="checkbox"
+            .name=${facetType}
+            .value=${bucket.key}
+            @click=${(e: Event) => {
+              this.facetClicked(e, false);
+            }}
+            .checked=${facetSelected}
+            class="select-facet-checkbox"
+            title=${onlyShowText}
+            id=${showOnlyCheckboxId}
+            data-testid=${showOnlyCheckboxId}
+          />
+          <div
+            class="hide-facet-container"
+            ?hidden=${this.omitHideButton && !facetHidden}
+          >
+            <input
+              type="checkbox"
+              id=${negativeCheckboxId}
+              .name=${facetType}
+              .value=${bucket.key}
+              @click=${(e: Event) => {
+                this.facetClicked(e, true);
+              }}
+              .checked=${facetHidden}
+              class="hide-facet-checkbox"
+            />
+            <label
+              for=${negativeCheckboxId}
+              class="hide-facet-icon${facetHidden ? ' active' : ''}"
+              title=${showHideText}
+              data-testid=${negativeCheckboxId}
+            >
+              <span class="sr-only">${showHideText}</span>
+              <span class="eye eye-open">${eyeIcon}</span>
+              <span class="eye eye-closed">${eyeClosedIcon}</span>
+            </label>
+          </div>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucketCountText}</div>
+        </label>
+      </div>
+    `;
+  }
+
+  //
+  // EVENT HANDLERS & DISPATCHERS
+  //
+
+  /**
+   * Handler for whenever this facet is clicked & its state changes
+   */
+  private facetClicked(e: Event, negative: boolean) {
+    const { bucket, facetType } = this;
+    if (!bucket || !facetType) return;
+
+    const target = e.target as HTMLInputElement;
+    const { checked } = target;
+    this.bucket = {
+      ...bucket,
+      state: FacetRow.getFacetState(checked, negative),
+    };
+
+    this.dispatchFacetClickEvent({
+      facetType,
+      bucket: this.bucket,
+      negative,
+    });
+  }
+
+  /**
+   * Emits a `facetClick` event with details about this facet & its current state
+   */
+  private dispatchFacetClickEvent(detail: FacetEventDetails) {
+    const event = new CustomEvent<FacetEventDetails>('facetClick', {
+      detail,
+    });
+    this.dispatchEvent(event);
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  /**
+   * Returns the composed facet state corresponding to a positive or negative facet's checked state
+   */
+  static getFacetState(checked: boolean, negative: boolean): FacetState {
+    let state: FacetState;
+    if (checked) {
+      state = negative ? 'hidden' : 'selected';
+    } else {
+      state = 'none';
+    }
+    return state;
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;
+    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;
+    const checkboxHeight = css`15px`;
+
+    const ownCss = css`
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: ${checkboxHeight};
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: ${checkboxHeight};
+        width: ${checkboxHeight};
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 0 auto;
+        padding: 0.25rem 0;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+        flex-wrap: wrap;
+      }
+      .facet-title {
+        word-break: break-word;
+        display: inline-block;
+        flex: 1 1 0%;
+      }
+      .facet-note {
+        color: #bbb;
+      }
+      .facet-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+      }
+      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
+        outline-style: auto;
+        outline-offset: 2px;
+      }
+      .hide-facet-icon {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        cursor: pointer;
+        display: flex;
+      }
+      .eye {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        opacity: 0.3;
+      }
+      .hide-facet-icon:hover .eye,
+      .active .eye {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye-open,
+      .hide-facet-icon .eye-closed {
+        display: none;
+      }
+      .hide-facet-icon:hover .eye-closed,
+      .hide-facet-icon.active .eye-closed {
+        display: inline;
+      }
+      .hide-facet-icon.active .eye-open {
+        display: none;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+
+    return [srOnlyStyle, ownCss];
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/facet-tombstone-row.ts

@@ -0,0 +1,40 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('facet-tombstone-row')
+export class FacetTombstoneRow extends LitElement {
+  render() {
+    return html`
+      <div id="row">
+        <input type="checkbox" disabled />
+        <div class="tombstone-line"></div>
+        <div class="tombstone-line"></div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      #row {
+        display: grid;
+        grid-template-columns: 15px 1fr 36px;
+        grid-gap: 9px 6px;
+        align-items: center;
+        margin: 2.5px auto;
+        border: 1px solid transparent;
+      }
+
+      .tombstone-line {
+        background: #ddd;
+        height: 6px;
+        border-radius: 50px;
+      }
+
+      input[type='checkbox'] {
+        width: 15px;
+        height: 15px;
+        margin: 0;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/facets-template.ts

@@ -0,0 +1,85 @@
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import './facet-row';
+
+@customElement('facets-template')
+export class FacetsTemplate extends LitElement {
+  @property({ type: Object }) facetGroup?: FacetGroup;
+
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  private facetClicked(e: CustomEvent<FacetEventDetails>) {
+    this.dispatchFacetClickEvent(e.detail);
+  }
+
+  private dispatchFacetClickEvent(detail: FacetEventDetails) {
+    const event = new CustomEvent<FacetEventDetails>('facetClick', {
+      detail,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private get facetsTemplate(): TemplateResult | typeof nothing {
+    const { facetGroup } = this;
+    if (!facetGroup) return nothing;
+
+    const facetBuckets = facetGroup.buckets as FacetBucket[];
+    const isLoneBucket = facetBuckets.length === 1;
+
+    // Added data-testid for Playwright testing
+    // Using className and aria-labels is not ideal for Playwright locator
+    return html`
+      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
+        ${repeat(
+          facetBuckets,
+          bucket => `${facetGroup.key}:${bucket.key}`,
+          bucket =>
+            html`<facet-row
+              .facetType=${facetGroup.key}
+              .bucket=${bucket}
+              .collectionTitles=${this.collectionTitles}
+              ?omitHideButton=${isLoneBucket}
+              @facetClick=${this.facetClicked}
+            ></facet-row>`,
+        )}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`${this.facetsTemplate}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    const columnCount = css`var(--facetsColumnCount, 1)`;
+    const columnGap = css`var(--facetsColumnGap, 15px)`;
+
+    return css`
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/models.ts

@@ -0,0 +1,10 @@
+/**
+ * Maximum number of aggregations to include in the More... facet dialogs.
+ */
+export const MORE_FACETS__MAX_AGGREGATIONS = 10000;
+
+/**
+ * Default number of facets to show per page of the More... facet dialogs.
+ * Can be overridden via component property.
+ */
+export const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;