@internetarchive/collection-browser 1.14.9-alpha1 → 1.14.9-alpha10

package/src/app-root.ts

@@ -229,91 +229,93 @@ export class AppRoot extends LitElement {
             >
           </div>
 
-          <div id="cell-controls" class="hidden">
-            <div id="cell-size-control">
-              <div>
-                <label for="cell-width-slider">Min cell width:</label>
-                <input
-                  type="range"
-                  min="10"
-                  max="100"
-                  value="18"
-                  step="0.1"
-                  id="cell-width-slider"
-                  @input=${this.widthChanged}
-                />
-                <span>${this.cellWidth}rem</span>
-              </div>
-              <div>
-                <label for="cell-height-slider">Cell height:</label>
-                <input
-                  type="range"
-                  min="10"
-                  max="100"
-                  value="29"
-                  step="0.1"
-                  id="cell-height-slider"
-                  @input=${this.heightChanged}
-                />
-                <span>${this.cellHeight}rem</span>
-              </div>
+          <fieldset class="cell-controls">
+            <legend>Cell Controls</legend>
+            <div>
+              <label for="cell-width-slider">Cell width:</label>
+              <input
+                type="range"
+                min="10"
+                max="100"
+                value="18"
+                step="0.1"
+                id="cell-width-slider"
+                @input=${this.widthChanged}
+              />
+              <span>${this.cellWidth}rem</span>
             </div>
-            <div id="cell-gap-control">
-              <div>
-                <label for="cell-row-gap-slider">Row gap:</label>
-                <input
-                  type="range"
-                  min="0"
-                  max="5"
-                  value="1.7"
-                  step="0.1"
-                  id="cell-row-gap-slider"
-                  @input=${this.rowGapChanged}
-                />
-                <span>${this.rowGap}rem</span>
-              </div>
-              <div>
-                <label for="cell-col-gap-slider">Col gap:</label>
-                <input
-                  type="range"
-                  min="0"
-                  max="5"
-                  value="1.7"
-                  step="0.1"
-                  id="cell-col-gap-slider"
-                  @input=${this.colGapChanged}
-                />
-                <span>${this.colGap}rem</span>
-              </div>
+            <div>
+              <label for="cell-height-slider">Cell height:</label>
+              <input
+                type="range"
+                min="10"
+                max="100"
+                value="29"
+                step="0.1"
+                id="cell-height-slider"
+                @input=${this.heightChanged}
+              />
+              <span>${this.cellHeight}rem</span>
             </div>
-          </div>
-          <div id="checkbox-controls">
+            <div>
+              <label for="cell-row-gap-slider">Row gap:</label>
+              <input
+                type="range"
+                min="0"
+                max="5"
+                value="1.7"
+                step="0.1"
+                id="cell-row-gap-slider"
+                @input=${this.rowGapChanged}
+              />
+              <span>${this.rowGap}rem</span>
+            </div>
+            <div>
+              <label for="cell-col-gap-slider">Col gap:</label>
+              <input
+                type="range"
+                min="0"
+                max="5"
+                value="1.7"
+                step="0.1"
+                id="cell-col-gap-slider"
+                @input=${this.colGapChanged}
+              />
+              <span>${this.colGap}rem</span>
+            </div>
+          </fieldset>
+
+          <fieldset class="other-controls">
+            <legend>Other Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <label for="show-outline-check">Show cell outlines</label>
+              <label for="simulate-login">Simulate login</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-facet-group-outline-check"
-                @click=${this.toggleFacetGroupOutline}
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
               />
-              <label for="show-facet-group-outline-check">
-                Show facet group outlines
-              </label>
+              <label for="enable-date-picker">Enable date picker</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
+                id="enable-management"
+                @click=${this.manageModeCheckboxChanged}
               />
-              <label for="simulate-login">Simulate login</label>
+              <label for="enable-management">Enable manage mode</label>
             </div>
+          </fieldset>
+
+          <fieldset class="cb-visual-appearance">
+            <legend>CB Visual Appearance</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -325,27 +327,34 @@ export class AppRoot extends LitElement {
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-date-picker"
-                checked
-                @click=${this.datePickerChanged}
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <label for="enable-date-picker">Enable date picker</label>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-management"
-                @click=${this.manageModeCheckboxChanged}
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <label for="enable-management">Enable manage mode</label>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
+          </fieldset>
+
+          <fieldset class="user-profile-controls">
+            <legend>User Profile Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-facet-top-view"
-                @click=${this.facetTopViewCheckboxChanged}
+                id="enable-result-last-tile-view"
+                @click=${this.resultLastTileViewCheckboxChanged}
               />
-              <label for="enable-facet-top-view">Show facet top view</label>
+              <label for="enable-result-last-tile-view"
+                >Show result last tile view</label
+              >
             </div>
             <div class="checkbox-control">
               <input
@@ -355,7 +364,15 @@ export class AppRoot extends LitElement {
               />
               <label for="enable-cb-top-view">Show CB top view</label>
             </div>
-          </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-facet-top-view"
+                @click=${this.facetTopViewCheckboxChanged}
+              />
+              <label for="enable-facet-top-view">Show facet top view</label>
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -558,6 +575,26 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private resultLastTileViewCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+
+    const div = document.createElement('div');
+    const title = document.createElement('h3');
+    title.textContent = 'Upload';
+
+    div.setAttribute('slot', 'result-last-tile');
+    div.setAttribute('class', 'result-last-tile');
+    div.appendChild(title);
+
+    if (target.checked) {
+      this.collectionBrowser.appendChild(div);
+    } else {
+      this.collectionBrowser.removeChild(
+        this.collectionBrowser.lastElementChild as Element
+      );
+    }
+  }
+
   /**
    * Handler for when the dev panel's "Show cb top view" checkbox is changed.
    */
@@ -706,7 +743,6 @@ export class AppRoot extends LitElement {
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
-      width: 75%;
       background: #ffffffb3;
     }
 
@@ -749,11 +785,17 @@ export class AppRoot extends LitElement {
       margin-right: 1rem;
     }
 
-    #cell-controls {
+    .cell-controls {
       display: flex;
       flex-wrap: wrap;
     }
-
+    .cell-controls div {
+      display: flex;
+      align-items: center;
+    }
+    .cell-controls input[type='range'] {
+      width: 120px;
+    }
     #cell-controls label {
       display: inline-block;
       width: 10rem;
@@ -777,6 +819,9 @@ export class AppRoot extends LitElement {
     .checkbox-control {
       flex-basis: 50%;
     }
+    .checkbox-control label {
+      user-select: none;
+    }
 
     #last-event {
       background-color: aliceblue;
@@ -799,5 +844,37 @@ export class AppRoot extends LitElement {
       background-color: aliceblue;
       font-size: 1.6rem;
     }
+
+    /* user profile controls */
+    .user-profile-controls {
+      width: fit-content;
+    }
+
+    fieldset {
+      display: inline-block !important;
+    }
+
+    .result-last-tile {
+      border-radius: 4px;
+      background-color: white;
+      border: 3px dashed #555;
+      box-shadow: none;
+      display: grid;
+      align-content: center;
+    }
+    .result-last-tile:hover {
+      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
+      transition: box-shadow 0.1s ease 0s;
+      cursor: pointer;
+      border: 3px dashed #4b64ff;
+    }
+    .result-last-tile h3 {
+      margin-bottom: 4rem;
+      margin: 0px auto;
+      font-size: 2.8rem;
+      color: rgb(44, 44, 44);
+      font-weight: 200;
+      text-align: center;
+    }
   `;
 }

package/src/collection-browser.ts

@@ -127,7 +127,7 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
-  @property({ type: Boolean }) suppressEmptyPlaceholder = false;
+  @property({ type: Boolean }) suppressPlaceholders = false;
 
   @property({ type: Boolean }) suppressResultCount = false;
 
@@ -433,10 +433,11 @@ export class CollectionBrowser
       (this.totalResults === 0 || !this.searchService);
 
     this.placeholderType = null;
+    if (this.suppressPlaceholders) return;
 
     if (!hasQuery && !isCollection) {
       this.placeholderType = 'empty-query';
-    } else if (noResults && !this.suppressEmptyPlaceholder) {
+    } else if (noResults) {
       // Within a collection, no query + no results means the collection simply has no viewable items.
       // Otherwise, we must have a user query that produced 0 results.
       this.placeholderType =
@@ -585,7 +586,10 @@ export class CollectionBrowser
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
       @visibleCellsChanged=${this.visibleCellsChanged}
-    ></infinite-scroller>`;
+      >${this.displayMode === 'grid'
+        ? html`<slot name="result-last-tile" slot="result-last-tile"></slot>`
+        : nothing}
+    </infinite-scroller>`;
   }
 
   private get infiniteScrollerClasses() {
@@ -1750,27 +1754,26 @@ export class CollectionBrowser
   }
 
   facetClickHandler({
-    detail: { key, state: facetState, negative },
+    detail: { facetType, bucket, negative },
   }: CustomEvent<FacetEventDetails>): void {
+    let action: analyticsActions;
     if (negative) {
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action:
-          facetState !== 'none'
-            ? analyticsActions.facetNegativeSelected
-            : analyticsActions.facetNegativeDeselected,
-        label: key,
-      });
+      action =
+        bucket.state !== 'none'
+          ? analyticsActions.facetNegativeSelected
+          : analyticsActions.facetNegativeDeselected;
     } else {
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action:
-          facetState !== 'none'
-            ? analyticsActions.facetSelected
-            : analyticsActions.facetDeselected,
-        label: key,
-      });
+      action =
+        bucket.state !== 'none'
+          ? analyticsActions.facetSelected
+          : analyticsActions.facetDeselected;
     }
+
+    this.analyticsHandler?.sendEvent({
+      category: this.searchContext,
+      action,
+      label: facetType,
+    });
   }
 
   private async fetchFacets() {

package/src/collection-facets/facet-row.ts

@@ -0,0 +1,274 @@
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import type {
+  FacetOption,
+  FacetBucket,
+  FacetEventDetails,
+  FacetState,
+} from '../models';
+
+@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;
+
+  /** The collection name cache for converting collection identifiers to titles */
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
+  //
+  // 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`;
+
+    // For collections, we need to asynchronously load the collection name
+    // so we use the `async-collection-name` widget.
+    // For other facet types, we just have a static value to use.
+    const bucketTextDisplay =
+      facetType !== 'collection'
+        ? html`${bucket.displayText ?? bucket.key}`
+        : html`<a href="/details/${bucket.key}">
+            <async-collection-name
+              .collectionNameCache=${this.collectionNameCache}
+              .identifier=${bucket.key}
+              placeholder="-"
+            ></async-collection-name>
+          </a> `;
+
+    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`;
+
+    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}
+          />
+          <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}
+          >
+            <span class="eye">${eyeIcon}</span>
+            <span class="eye-closed">${eyeClosedIcon}</span>
+          </label>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucket.count.toLocaleString()}</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;
+    bucket.state = FacetRow.getFacetState(checked, negative);
+
+    this.dispatchFacetClickEvent({
+      facetType,
+      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)`;
+
+    return css`
+      async-collection-name {
+        display: contents;
+      }
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: 15px;
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: 15px;
+        width: 15px;
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+        overflow: hidden;
+      }
+      .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-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        display: none;
+      }
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+        opacity: 0.3;
+        display: inline-block;
+      }
+      .hide-facet-icon:hover,
+      .active {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye,
+      .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 {
+        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;
+      }
+    `;
+  }
+}