@internetarchive/collection-browser 1.4.1-alpha.6 → 1.4.1

package/src/app-root.ts

@@ -39,8 +39,6 @@ export class AppRoot extends LitElement {
 
   @state() private searchQuery?: string;
 
-  @state() private withinCollection?: string;
-
   @state() private cellWidth: number = 18;
 
   @state() private cellHeight: number = 29;
@@ -57,9 +55,6 @@ export class AppRoot extends LitElement {
 
   @query('#base-query-field') private baseQueryField!: HTMLInputElement;
 
-  @query('#base-collection-field')
-  private baseCollectionField!: HTMLInputElement;
-
   @query('#page-number-input') private pageNumberInput!: HTMLInputElement;
 
   @query('collection-browser') private collectionBrowser!: CollectionBrowser;
@@ -100,16 +95,6 @@ export class AppRoot extends LitElement {
     }
   }
 
-  private collectionChanged(e: Event) {
-    e.preventDefault();
-    this.withinCollection = this.baseCollectionField.value;
-    this.collectionBrowser.withinCollection = this.withinCollection;
-
-    if ((this.currentPage ?? 1) > 1) {
-      this.collectionBrowser.goToPage(this.currentPage ?? 1);
-    }
-  }
-
   private changePagePressed(e: Event) {
     e.preventDefault();
     this.currentPage = this.pageNumberInput.valueAsNumber;
@@ -156,17 +141,6 @@ export class AppRoot extends LitElement {
               <input type="submit" value="Go" />
             </form>
           </div>
-          <div>
-            <form @submit=${this.collectionChanged}>
-              <label for="base-collection-field"> Within collection: </label>
-              <input
-                type="text"
-                id="base-collection-field"
-                .value=${this.withinCollection ?? ''}
-              />
-              <input type="submit" value="Search" />
-            </form>
-          </div>
 
           <div id="search-types">
             Search type:

package/src/collection-browser.ts

@@ -90,8 +90,6 @@ export class CollectionBrowser
 
   @property({ type: String }) searchType: SearchType = SearchType.METADATA;
 
-  @property({ type: String }) withinCollection?: string;
-
   @property({ type: String }) baseQuery?: string;
 
   @property({ type: String }) displayMode?: CollectionDisplayMode;
@@ -120,8 +118,6 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   /** describes where this component is being used */
   @property({ type: String, reflect: true }) searchContext: string =
     analyticsCategories.default;
@@ -386,7 +382,7 @@ export class CollectionBrowser
 
   private setPlaceholderType() {
     this.placeholderType = null;
-    if (!this.baseQuery?.trim() && !this.withinCollection) {
+    if (!this.baseQuery?.trim()) {
       this.placeholderType = 'empty-query';
     } else if (
       !this.searchResultsLoading &&
@@ -716,7 +712,6 @@ export class CollectionBrowser
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-        .collectionPagePath=${this.collectionPagePath}
         .searchService=${this.searchService}
         .featureFeedbackService=${this.featureFeedbackService}
         .recaptchaManager=${this.recaptchaManager}
@@ -914,8 +909,7 @@ export class CollectionBrowser
       changed.has('maxSelectedDate') ||
       changed.has('sortParam') ||
       changed.has('selectedFacets') ||
-      changed.has('searchService') ||
-      changed.has('withinCollection')
+      changed.has('searchService')
     ) {
       this.handleQueryChange();
     }
@@ -956,8 +950,7 @@ export class CollectionBrowser
     const previousView = this.mobileView;
     if (entry.target === this.contentContainer) {
       this.contentWidth = entry.contentRect.width;
-      this.mobileView =
-        this.contentWidth > 0 && this.contentWidth < this.mobileBreakpoint;
+      this.mobileView = this.contentWidth < this.mobileBreakpoint;
       // If changing from desktop to mobile disable transition
       if (this.mobileView && !previousView) {
         this.isResizeToMobile = true;
@@ -1354,7 +1347,8 @@ export class CollectionBrowser
 
   /** The full query, including year facets and date range clauses */
   private get fullQuery(): string | undefined {
-    let fullQuery = this.baseQuery?.trim() ?? '';
+    if (!this.baseQuery) return undefined;
+    let fullQuery = this.baseQuery.trim();
 
     const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
 
@@ -1486,15 +1480,14 @@ export class CollectionBrowser
 
   private async fetchFacets() {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return;
+    if (!trimmedQuery) return;
     if (!this.searchService) return;
 
     const { facetFetchQueryKey } = this;
 
     const sortParams = this.sortParam ? [this.sortParam] : [];
     const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
+      query: trimmedQuery,
       rows: 0,
       filters: this.filterMap,
       // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
@@ -1576,24 +1569,10 @@ export class CollectionBrowser
     });
   }
 
-  /**
-   * Additional params to pass to the search service if targeting a collection page,
-   * or null otherwise.
-   */
-  private get collectionParams(): {
-    pageType: string;
-    pageTarget: string;
-  } | null {
-    return this.withinCollection
-      ? { pageType: 'collection_details', pageTarget: this.withinCollection }
-      : null;
-  }
-
   /**
    * The query key is a string that uniquely identifies the current search.
    * It consists of:
    *  - The current base query
-   *  - The current collection
    *  - The current search type
    *  - Any currently-applied facets
    *  - Any currently-applied date range
@@ -1606,7 +1585,7 @@ export class CollectionBrowser
   private get pageFetchQueryKey(): string {
     const sortField = this.sortParam?.field ?? 'none';
     const sortDirection = this.sortParam?.direction ?? 'none';
-    return `${this.fullQuery}-${this.withinCollection}-${this.searchType}-${sortField}-${sortDirection}`;
+    return `${this.fullQuery}-${this.searchType}-${sortField}-${sortDirection}`;
   }
 
   /**
@@ -1614,7 +1593,7 @@ export class CollectionBrowser
    * are not relevant in determining aggregation queries.
    */
   private get facetFetchQueryKey(): string {
-    return `${this.fullQuery}-${this.withinCollection}-${this.searchType}`;
+    return `${this.fullQuery}-${this.searchType}`;
   }
 
   // this maps the query to the pages being fetched for that query
@@ -1630,7 +1609,7 @@ export class CollectionBrowser
    */
   async fetchPage(pageNumber: number, numInitialPages = 1) {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return;
+    if (!trimmedQuery) return;
     if (!this.searchService) return;
 
     // if we already have data, don't fetch again
@@ -1655,8 +1634,7 @@ export class CollectionBrowser
 
     const sortParams = this.sortParam ? [this.sortParam] : [];
     const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
+      query: trimmedQuery,
       page: pageNumber,
       rows: numRows,
       sort: sortParams,
@@ -1808,7 +1786,7 @@ export class CollectionBrowser
         dateReviewed: result.reviewdate?.value,
         description: result.description?.values.join('\n'),
         favCount: result.num_favorites?.value ?? 0,
-        href: result.__href__?.value,
+        href: this.collapseRepeatedQuotes(result.__href__?.value),
         identifier: result.identifier,
         issue: result.issue?.value,
         itemCount: result.item_count?.value ?? 0,
@@ -1833,19 +1811,31 @@ export class CollectionBrowser
     }
   }
 
+  /**
+   * Returns the input string, but removing one set of quotes from all instances of
+   * ""clauses wrapped in two sets of quotes"". This assumes the quotes are already
+   * URL-encoded.
+   *
+   * This should be a temporary measure to address the fact that the __href__ field
+   * sometimes acquires extra quotation marks during query rewriting. Once there is a
+   * full Lucene parser in place that handles quoted queries correctly, this can likely
+   * be removed.
+   */
+  private collapseRepeatedQuotes(str?: string): string | undefined {
+    return str?.replace(/%22%22(?!%22%22)(.+?)%22%22/g, '%22$1%22');
+  }
+
   /** Fetches the aggregation buckets for the given prefix filter type. */
   private async fetchPrefixFilterBuckets(
     filterType: PrefixFilterType
   ): Promise<Bucket[]> {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return [];
+    if (!trimmedQuery) return [];
 
     const filterAggregationKey = prefixFilterAggregationKeys[filterType];
     const sortParams = this.sortParam ? [this.sortParam] : [];
-
     const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
+      query: trimmedQuery,
       rows: 0,
       filters: this.filterMap,
       // Only fetch the firstTitle or firstCreator aggregation
@@ -1942,7 +1932,6 @@ export class CollectionBrowser
 
     return html`
       <tile-dispatcher
-        .collectionPagePath=${this.collectionPagePath}
         .baseNavigationUrl=${this.baseNavigationUrl}
         .baseImageUrl=${this.baseImageUrl}
         .model=${model}
@@ -2046,7 +2035,6 @@ export class CollectionBrowser
           border-right: 1px solid rgb(232, 232, 232);
           padding-left: 1rem;
           padding-right: 1rem;
-          margin-top: var(--rightColumnMarginTop, 0);
           background: #fff;
         }
 

package/src/collection-facets/facets-template.ts

@@ -22,8 +22,6 @@ export class FacetsTemplate extends LitElement {
 
   @property({ type: String }) renderOn?: string;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   @property({ type: Object })
   collectionNameCache?: CollectionNameCacheInterface;
 
@@ -148,7 +146,7 @@ export class FacetsTemplate extends LitElement {
             const bucketTextDisplay =
               facetGroup.key !== 'collection'
                 ? html`${bucket.displayText ?? bucket.key}`
-                : html`<a href="${this.collectionPagePath}${bucket.key}">
+                : html`<a href="/details/${bucket.key}">
                     <async-collection-name
                       .collectionNameCache=${this.collectionNameCache}
                       .identifier=${bucket.key}

package/src/collection-facets.ts

@@ -90,8 +90,6 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Object }) filterMap?: FilterMap;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -628,7 +626,6 @@ export class CollectionFacets extends LitElement {
   private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {
     return html`
       <facets-template
-        .collectionPagePath=${this.collectionPagePath}
         .facetGroup=${facetGroup}
         .selectedFacets=${this.selectedFacets}
         .renderOn=${'page'}

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

@@ -210,7 +210,7 @@ export class AlphaBar extends LitElement {
       border: none;
       border-radius: 4px;
       font-family: inherit;
-      font-size: 1.2rem;
+      font-size: inherit;
       cursor: pointer;
     }
 

package/src/tiles/list/tile-list-compact.ts

@@ -30,8 +30,6 @@ export class TileListCompact extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
@@ -68,14 +66,9 @@ export class TileListCompact extends LitElement {
   private get href(): string {
     // Use the server-specified href if available.
     // Otherwise, construct a details page URL from the item identifier.
-    if (this.model?.href) {
-      return `${this.baseNavigationUrl}${this.model?.href}`;
-    }
-
-    const isCollection = this.model?.mediatype === 'collection';
-    return `${this.baseNavigationUrl}${
-      isCollection ? this.collectionPagePath : '/details/'
-    }${this.model?.identifier}`;
+    return this.model?.href
+      ? `${this.baseNavigationUrl}${this.model.href}`
+      : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;
   }
 
   /*

package/src/tiles/list/tile-list.ts

@@ -49,8 +49,6 @@ export class TileList extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
@@ -95,11 +93,10 @@ export class TileList extends LitElement {
   private get imageBlockTemplate() {
     if (!this.model) return nothing;
 
-    const isCollection = this.model.mediatype === 'collection';
     return html`<a
-      href="${this.baseNavigationUrl}${isCollection
-        ? this.collectionPagePath
-        : '/details/'}${encodeURI(this.model.identifier)}"
+      href="${this.baseNavigationUrl}/details/${encodeURI(
+        this.model.identifier
+      )}"
     >
       <image-block
         .model=${this.model}
@@ -151,11 +148,7 @@ export class TileList extends LitElement {
       ? html`<a href="${this.baseNavigationUrl}${this.model.href}"
           >${this.model.title ?? this.model.identifier}</a
         >`
-      : this.detailsLink(
-          this.model.identifier,
-          this.model.title,
-          this.model.mediatype === 'collection'
-        );
+      : this.detailsLink(this.model.identifier, this.model.title);
   }
 
   private get itemLineTemplate() {
@@ -348,18 +341,12 @@ export class TileList extends LitElement {
     /* eslint-enable lit/no-invalid-html */
   }
 
-  private detailsLink(
-    identifier: string,
-    text?: string,
-    collection = false
-  ): TemplateResult {
+  private detailsLink(identifier: string, text?: string): TemplateResult {
     const linkText = text ?? identifier;
     // No whitespace after closing tag
     // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway
     return html`<a
-      href="${this.baseNavigationUrl}${collection
-        ? this.collectionPagePath
-        : '/details/'}${encodeURI(identifier)}"
+      href="${this.baseNavigationUrl}/details/${encodeURI(identifier)}"
       >${DOMPurify.sanitize(linkText)}</a
     >`;
   }
@@ -377,7 +364,7 @@ export class TileList extends LitElement {
       case 'account':
         return nothing;
       default:
-        return `${this.baseNavigationUrl}${this.collectionPagePath}${encodeURI(
+        return `${this.baseNavigationUrl}/details/${encodeURI(
           this.model.mediatype
         )}`;
     }
@@ -411,7 +398,7 @@ export class TileList extends LitElement {
         promises.push(
           this.collectionNameCache?.collectionNameFor(collection).then(name => {
             newCollectionLinks.push(
-              this.detailsLink(collection, name ?? collection, true)
+              this.detailsLink(collection, name ?? collection)
             );
           })
         );

package/src/tiles/tile-dispatcher.ts

@@ -56,8 +56,6 @@ export class TileDispatcher
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   private hoverPaneController?: HoverPaneControllerInterface;
 
   @query('#container')
@@ -142,14 +140,9 @@ export class TileDispatcher
   private get linkTileHref() {
     // Use the server-specified href if available.
     // Otherwise, construct a details page URL from the item identifier.
-    if (this.model?.href) {
-      return `${this.baseNavigationUrl}${this.model?.href}`;
-    }
-
-    const isCollection = this.model?.mediatype === 'collection';
-    return `${this.baseNavigationUrl}${
-      isCollection ? this.collectionPagePath : '/details/'
-    }${this.model?.identifier}`;
+    return this.model?.href
+      ? `${this.baseNavigationUrl}${this.model?.href}`
+      : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;
   }
 
   /**
@@ -273,7 +266,6 @@ export class TileDispatcher
       case 'list-compact':
         return html`<tile-list-compact
           .model=${model}
-          .collectionPagePath=${this.collectionPagePath}
           .currentWidth=${currentWidth}
           .currentHeight=${currentHeight}
           .baseNavigationUrl=${baseNavigationUrl}
@@ -286,7 +278,6 @@ export class TileDispatcher
       case 'list-detail':
         return html`<tile-list
           .model=${model}
-          .collectionPagePath=${this.collectionPagePath}
           .collectionNameCache=${this.collectionNameCache}
           .currentWidth=${currentWidth}
           .currentHeight=${currentHeight}

package/test/collection-browser.test.ts

@@ -945,7 +945,6 @@ describe('Collection Browser', () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
-        .log=${true}
         .searchService=${searchService}
       ></collection-browser>`
     );
@@ -961,6 +960,34 @@ describe('Collection Browser', () => {
     expect(spy.secondCall.firstArg?.detail?.loading).to.equal(false);
   });
 
+  it('collapses extra set of quotes around href field', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'extra-quoted-href';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await el.updateComplete;
+    await nextTick();
+
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+    expect(infiniteScroller).to.exist;
+
+    const firstResult =
+      infiniteScroller!.shadowRoot?.querySelector('tile-dispatcher');
+    expect(firstResult).to.exist;
+
+    // Original href q param starts/ends with %22%22, but should be collapsed to %22 before render
+    expect(
+      firstResult!.shadowRoot?.querySelector('a[href]')?.getAttribute('href')
+    ).to.equal('/details/foo?q=%22quoted+query%22');
+  });
+
   it('scrolls to page', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(

package/test/mocks/mock-search-responses.ts

@@ -4,6 +4,7 @@ import {
   ItemHit,
   SearchResponse,
   SearchServiceError,
+  TextHit,
 } from '@internetarchive/search-service';
 import { SearchServiceErrorType } from '@internetarchive/search-service/dist/src/search-service-error';
 
@@ -475,6 +476,42 @@ export const getMockSuccessMultiLineDescription: () => Result<
   },
 });
 
+export const getMockSuccessExtraQuotedHref: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      clientParameters: {
+        user_query: 'extra-quoted-href',
+        sort: [],
+      },
+      finalizedParameters: {
+        user_query: 'extra-quoted-href',
+        sort: [],
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new TextHit({
+          fields: {
+            identifier: 'foo',
+            title: 'Foo',
+            __href__: '/details/foo?q=%22%22quoted+query%22%22',
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockErrorResult: () => Result<
   SearchResponse,
   SearchServiceError

package/test/mocks/mock-search-service.ts

@@ -21,6 +21,7 @@ import {
   getMockMalformedResult,
   getMockSuccessWithCollectionTitles,
   getMockSuccessWithCollectionAggregations,
+  getMockSuccessExtraQuotedHref,
 } from './mock-search-responses';
 
 const responses: Record<
@@ -37,6 +38,7 @@ const responses: Record<
   'first-creator': getMockSuccessFirstCreatorResult,
   'collection-titles': getMockSuccessWithCollectionTitles,
   'collection-aggregations': getMockSuccessWithCollectionAggregations,
+  'extra-quoted-href': getMockSuccessExtraQuotedHref,
   error: getMockErrorResult,
   malformed: getMockMalformedResult,
 };