@internetarchive/collection-browser 0.4.15-alpha.9 → 0.4.15

package/src/collection-browser.ts

@@ -280,11 +280,9 @@ export class CollectionBrowser
     letterFilters = true,
     sort = false,
   } = {}): void {
-    console.log('clearing filters');
     // Don't bother clearing facets if none are checked, so that we don't
     // trigger unnecessary update cycles.
     if (facets && this.hasCheckedFacets) {
-      console.log('clearing facets');
       this.selectedFacets = getDefaultSelectedFacets();
     }
 
@@ -323,6 +321,14 @@ export class CollectionBrowser
     return false;
   }
 
+  /**
+   * Manually requests to perform a search, which will only be executed if one of
+   * the query, the search type, or the sort has changed.
+   */
+  requestSearch() {
+    this.handleQueryChange();
+  }
+
   render() {
     this.setPlaceholderType();
     return html`
@@ -339,7 +345,7 @@ export class CollectionBrowser
 
   private setPlaceholderType() {
     this.placeholderType = null;
-    if (!this.baseQuery) {
+    if (!this.baseQuery?.trim()) {
       this.placeholderType = 'empty-query';
     }
 
@@ -681,13 +687,10 @@ export class CollectionBrowser
     }
 
     if (changed.has('baseQuery') || changed.has('searchType')) {
-      console.log('baseQuery or searchType changed:', this.baseQuery, this.searchType);
-      // Unless this query/search type update is from the initial page load or the
-      // result of hitting the back button,
+      // Unless this query/search type update is the result of hitting the back button,
       // we need to clear any existing filters since they may no longer be valid for
       // the new set of search results.
-      if (!this.historyPopOccurred && this.initialQueryChangeHappened) {
-        console.log('will clear filters from query change');
+      if (!this.historyPopOccurred) {
         // Only clear filters that haven't been simultaneously applied in this update
         this.clearFilters({
           facets: !changed.has('selectedFacets'),
@@ -801,7 +804,6 @@ export class CollectionBrowser
   }
 
   private emitSearchTypeChanged() {
-    console.log('emitting search type change', this.searchType);
     this.dispatchEvent(
       new CustomEvent<SearchType>('searchTypeChanged', {
         detail: this.searchType,
@@ -1006,20 +1008,20 @@ export class CollectionBrowser
   /** The base query joined with any title/creator letter filters */
   private get filteredQuery(): string | undefined {
     if (!this.baseQuery) return undefined;
-    let filteredQuery = this.baseQuery;
+    let filteredQuery = this.baseQuery.trim();
 
     const { sortFilterQueries } = this;
     if (sortFilterQueries) {
       filteredQuery += ` AND ${sortFilterQueries}`;
     }
 
-    return filteredQuery;
+    return filteredQuery.trim();
   }
 
   /** The full query, including year facets and date range clauses */
   private get fullQuery(): string | undefined {
     if (!this.baseQuery) return undefined;
-    let fullQuery = this.baseQuery;
+    let fullQuery = this.baseQuery.trim();
 
     const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
 
@@ -1032,13 +1034,13 @@ export class CollectionBrowser
     if (sortFilterQueries) {
       fullQuery += ` AND ${sortFilterQueries}`;
     }
-    return fullQuery;
+    return fullQuery.trim();
   }
 
   /** The full query without any title/creator letter filters */
   private get fullQueryWithoutAlphaFilters(): string | undefined {
     if (!this.baseQuery) return undefined;
-    let fullQuery = this.baseQuery;
+    let fullQuery = this.baseQuery.trim();
 
     const { facetQuery, dateRangeQueryClause } = this;
 
@@ -1048,7 +1050,7 @@ export class CollectionBrowser
     if (dateRangeQueryClause) {
       fullQuery += ` AND ${dateRangeQueryClause}`;
     }
-    return fullQuery;
+    return fullQuery.trim();
   }
 
   /**
@@ -1064,7 +1066,7 @@ export class CollectionBrowser
     )) {
       facetClauses.push(this.buildFacetClause(facetName, facetValues));
     }
-    return this.joinFacetClauses(facetClauses);
+    return this.joinFacetClauses(facetClauses)?.trim();
   }
 
   /**
@@ -1176,17 +1178,43 @@ export class CollectionBrowser
       aggregationsSize: 10,
       // Note: we don't need an aggregations param to fetch the default aggregations from the PPS.
       // The default aggregations for the search_results page type should be what we need here.
+      uid: this.facetFetchQueryKey,
     };
 
     this.facetsLoading = true;
-    const results = await this.searchService?.search(params, this.searchType);
+    const searchResponse = await this.searchService?.search(
+      params,
+      this.searchType
+    );
+    const success = searchResponse?.success;
     this.facetsLoading = false;
 
-    this.aggregations = results?.success?.response.aggregations;
+    if (!success) {
+      const errorMsg = searchResponse?.error?.message;
+      const detailMsg = searchResponse?.error?.details?.message;
+
+      if (!errorMsg && !detailMsg) {
+        // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
+        window?.Sentry?.captureMessage?.(
+          'Missing or malformed facet response from backend',
+          'error'
+        );
+      }
+
+      return;
+    }
+
+    // This is checking to see if the query has changed since the data was fetched.
+    // If so, we just want to discard this set of aggregations because they are
+    // likely no longer valid for the newer query.
+    const returnedUid = (success.request.clientParameters as any).uid;
+    const queryChangedSinceFetch = returnedUid !== this.facetFetchQueryKey;
+    if (queryChangedSinceFetch) return;
+
+    this.aggregations = success?.response.aggregations;
 
     this.fullYearsHistogramAggregation =
-      results?.success?.response?.aggregations?.year_histogram ??
-      results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
+      success?.response?.aggregations?.year_histogram;
   }
 
   private scrollToPage(pageNumber: number): Promise<void> {
@@ -1223,8 +1251,18 @@ export class CollectionBrowser
    * This lets us keep track of queries so we don't persist data that's
    * no longer relevant.
    */
-  private get pageFetchQueryKey() {
-    return `${this.fullQuery}-${this.searchType}-${this.sortParam?.field}-${this.sortParam?.direction}`;
+  private get pageFetchQueryKey(): string {
+    const sortField = this.sortParam?.field ?? 'none';
+    const sortDirection = this.sortParam?.direction ?? 'none';
+    return `${this.fullQuery}-${this.searchType}-${sortField}-${sortDirection}`;
+  }
+
+  /**
+   * Similar to `pageFetchQueryKey` above, but excludes sort fields since they
+   * are not relevant in determining aggregation queries.
+   */
+  private get facetFetchQueryKey(): string {
+    return `${this.fullQuery}-${this.searchType}`;
   }
 
   // this maps the query to the pages being fetched for that query
@@ -1254,6 +1292,7 @@ export class CollectionBrowser
       sort: sortParams,
       filters: this.filterMap,
       aggregations: { omit: true },
+      uid: this.pageFetchQueryKey,
     };
     const searchResponse = await this.searchService?.search(
       params,
@@ -1278,36 +1317,15 @@ export class CollectionBrowser
       return;
     }
 
-    this.totalResults = success.response.totalResults;
-
-    // this is checking to see if the query has changed since the data was fetched
-    // if so, we just want to discard the data since there should be a new query
-    // right behind it
-    const searchQuery = success.request.clientParameters.user_query;
-    const searchSort = success.request.clientParameters.sort;
-    let sortChanged = false;
-    if (!searchSort || searchSort.length === 0) {
-      // if we went from no sort to sort, the sort has changed
-      if (this.sortParam) {
-        sortChanged = true;
-      }
-    } else {
-      // check if the sort has changed
-      for (const sortType of searchSort) {
-        const [field, direction] = sortType.split(':');
-        if (
-          field !== this.sortParam?.field ||
-          direction !== this.sortParam?.direction
-        ) {
-          sortChanged = true;
-          break;
-        }
-      }
-    }
-    const queryChangedSinceFetch =
-      searchQuery !== this.filteredQuery || sortChanged;
+    // This is checking to see if the query has changed since the data was fetched.
+    // If so, we just want to discard the data since there should be a new query
+    // right behind it.
+    const returnedUid = (success.request.clientParameters as any).uid;
+    const queryChangedSinceFetch = returnedUid !== this.pageFetchQueryKey;
     if (queryChangedSinceFetch) return;
 
+    this.totalResults = success.response.totalResults;
+
     const { results } = success.response;
     if (results && results.length > 0) {
       this.preloadCollectionNames(results);

package/src/restoration-state-handler.ts

@@ -93,7 +93,6 @@ export class RestorationStateHandler
   }
 
   private persistQueryStateToUrl(state: RestorationState) {
-    console.log('persisting...', window.location.href, state);
     const url = new URL(window.location.href);
     const oldParams = new URLSearchParams(url.searchParams);
     const newParams = this.removeRecognizedParams(url.searchParams);
@@ -206,12 +205,9 @@ export class RestorationStateHandler
       '',
       url
     );
-
-    console.log('persisted', window.location.href, state);
   }
 
   private loadQueryStateFromUrl(): RestorationState {
-    console.log('loading...', window.location.href);
     const url = new URL(window.location.href);
     const searchInside = url.searchParams.get('sin');
     const pageNumber = url.searchParams.get('page');
@@ -237,14 +233,9 @@ export class RestorationStateHandler
       restorationState.baseQuery = legacySearchQuery;
     }
 
-    switch (searchInside) {
-      // Eventually there will be TV/Radio search types here too.
-      case 'TXT':
-        restorationState.searchType = SearchType.FULLTEXT;
-        break;
-      default:
-        restorationState.searchType = SearchType.METADATA;
-        break;
+    if (searchInside) {
+      restorationState.searchType =
+        searchInside === 'TXT' ? SearchType.FULLTEXT : SearchType.METADATA;
     }
 
     if (pageNumber) {
@@ -345,7 +336,6 @@ export class RestorationStateHandler
       });
     }
 
-    console.log('loaded', window.location.href, restorationState);
     return restorationState;
   }
 

package/test/collection-browser.test.ts

@@ -19,6 +19,7 @@ import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
 import { analyticsCategories } from '../src/utils/analytics-events';
 import type { TileDispatcher } from '../src/tiles/tile-dispatcher';
 import type { CollectionFacets } from '../src/collection-facets';
+import type { EmptyPlaceholder } from '../src/empty-placeholder';
 
 /**
  * Wait for the next tick of the event loop.
@@ -278,7 +279,7 @@ describe('Collection Browser', () => {
     ).to.contains('Results');
   });
 
-  it('can change search type', async () => {
+  it('can request a search when changing search type', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -289,6 +290,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     el.searchType = SearchType.FULLTEXT;
+    el.requestSearch();
     await el.updateComplete;
     await nextTick();
 
@@ -499,6 +501,59 @@ describe('Collection Browser', () => {
     expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
   });
 
+  it('trims queries of leading/trailing whitespace', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = '   collection:foo   ';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('collection:foo');
+  });
+
+  it('shows error message when error response received', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'error';
+    await el.updateComplete;
+    await nextTick();
+
+    const errorPlaceholder = el.shadowRoot?.querySelector(
+      'empty-placeholder'
+    ) as EmptyPlaceholder;
+    const errorDetails = errorPlaceholder?.shadowRoot?.querySelector(
+      '.error-details'
+    ) as HTMLParagraphElement;
+
+    expect(errorDetails).to.exist;
+    expect(errorDetails.textContent).to.contain('foo');
+  });
+
+  it('reports malformed response errors to Sentry', async () => {
+    const sentrySpy = sinon.spy();
+    (window as any).Sentry = { captureMessage: sentrySpy };
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'malformed';
+    await el.updateComplete;
+
+    expect(sentrySpy.callCount).to.be.greaterThanOrEqual(1);
+  });
+
   it('queries for collection names after a fetch', async () => {
     const searchService = new MockSearchService();
     const collectionNameCache = new MockCollectionNameCache();
@@ -561,12 +616,16 @@ describe('Collection Browser', () => {
     el.sortParam = { field: 'foo', direction: 'asc' };
     await el.updateComplete;
 
-    const fetchPromise = el.fetchPage(2);
+    // We want to spy exclusively on the first set of results, not the second
+    searchService.asyncResponse = false;
+    searchService.resultsSpy = () => {};
+
     el.sortParam = { field: 'foo', direction: 'desc' };
-    await fetchPromise;
+    await el.updateComplete;
+    await nextTick();
 
     // If the different sort param causes the results to be discarded,
-    // the results array should never be read.
+    // the first results array should never be read.
     expect(resultsSpy.callCount).to.equal(0);
   });
 
@@ -585,12 +644,16 @@ describe('Collection Browser', () => {
     el.baseQuery = 'single-result';
     await el.updateComplete;
 
-    const fetchPromise = el.fetchPage(2);
+    // We want to spy exclusively on the first set of results, not the second
+    searchService.asyncResponse = false;
+    searchService.resultsSpy = () => {};
+
     el.sortParam = { field: 'foo', direction: 'asc' };
-    await fetchPromise;
+    await el.updateComplete;
+    await nextTick();
 
     // If the different sort param causes the results to be discarded,
-    // the results array should never be read.
+    // the first results array should never be read.
     expect(resultsSpy.callCount).to.equal(0);
   });
 
@@ -607,14 +670,19 @@ describe('Collection Browser', () => {
     );
 
     el.baseQuery = 'with-sort';
+    el.sortParam = { field: 'foo', direction: 'asc' };
     await el.updateComplete;
 
-    const fetchPromise = el.fetchPage(2);
+    // We want to spy exclusively on the first set of results, not the second
+    searchService.asyncResponse = false;
+    searchService.resultsSpy = () => {};
+
     el.sortParam = null;
-    await fetchPromise;
+    await el.updateComplete;
+    await nextTick();
 
     // If the different sort param causes the results to be discarded,
-    // the results array should never be read.
+    // the first results array should never be read.
     expect(resultsSpy.callCount).to.equal(0);
   });
 
@@ -801,6 +869,37 @@ describe('Collection Browser', () => {
     infiniteScroller.scrollToCell = oldScrollToCell;
   });
 
+  it('shows mobile facets in mobile view', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .mobileBreakpoint=${9999}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    const contentContainer = el.shadowRoot?.querySelector(
+      '#content-container'
+    ) as HTMLElement;
+
+    el.handleResize({
+      target: contentContainer,
+      contentRect: contentContainer.getBoundingClientRect(),
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+    });
+    await el.updateComplete;
+
+    const mobileFacets = el.shadowRoot?.querySelector(
+      '#mobile-filter-collapse'
+    );
+    expect(mobileFacets).to.exist;
+  });
+
   it('refreshes when certain properties change - with some analytics event sampling', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
     const searchService = new MockSearchService();

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

@@ -5,11 +5,12 @@ import {
   SearchResponse,
   SearchServiceError,
 } from '@internetarchive/search-service';
+import { SearchServiceErrorType } from '@internetarchive/search-service/dist/src/search-service-error';
 
-export const mockSuccessSingleResult: Result<
+export const getMockSuccessSingleResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -39,12 +40,12 @@ export const mockSuccessSingleResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessWithYearHistogramAggs: Result<
+export const getMockSuccessWithYearHistogramAggs: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -84,12 +85,12 @@ export const mockSuccessWithYearHistogramAggs: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessLoggedInResult: Result<
+export const getMockSuccessLoggedInResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -121,12 +122,12 @@ export const mockSuccessLoggedInResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessNoPreviewResult: Result<
+export const getMockSuccessNoPreviewResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -156,12 +157,12 @@ export const mockSuccessNoPreviewResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessLoggedInAndNoPreviewResult: Result<
+export const getMockSuccessLoggedInAndNoPreviewResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -191,12 +192,12 @@ export const mockSuccessLoggedInAndNoPreviewResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessFirstTitleResult: Result<
+export const getMockSuccessFirstTitleResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -230,12 +231,12 @@ export const mockSuccessFirstTitleResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessFirstCreatorResult: Result<
+export const getMockSuccessFirstCreatorResult: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -269,7 +270,7 @@ export const mockSuccessFirstCreatorResult: Result<
       query_time: 0,
     },
   },
-};
+});
 
 export const getMockSuccessSingleResultWithSort: (
   resultsSpy: Function
@@ -308,10 +309,10 @@ export const getMockSuccessSingleResultWithSort: (
   },
 });
 
-export const mockSuccessMultipleResults: Result<
+export const getMockSuccessMultipleResults: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -347,12 +348,12 @@ export const mockSuccessMultipleResults: Result<
       query_time: 0,
     },
   },
-};
+});
 
-export const mockSuccessMultiLineDescription: Result<
+export const getMockSuccessMultiLineDescription: () => Result<
   SearchResponse,
   SearchServiceError
-> = {
+> = () => ({
   success: {
     request: {
       clientParameters: {
@@ -383,4 +384,18 @@ export const mockSuccessMultiLineDescription: Result<
       query_time: 0,
     },
   },
-};
+});
+
+export const getMockErrorResult: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  error: new SearchServiceError(SearchServiceErrorType.networkError, 'foo', {
+    message: 'bar',
+  }),
+});
+
+export const getMockMalformedResult: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({});