@internetarchive/collection-browser 2.15.1-alpha-webdev7667.3 → 2.16.0

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

@@ -26,7 +26,6 @@ export class TileListCompact extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   render() {
@@ -39,7 +38,6 @@ export class TileListCompact extends BaseTileComponent {
           .isListTile=${true}
           .viewSize=${this.classSize}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </image-block>
         <a href=${this.href} id="title"

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

@@ -36,7 +36,6 @@ export class TileList extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Object })
@@ -102,7 +101,6 @@ export class TileList extends BaseTileComponent {
         .isListTile=${true}
         .viewSize=${this.classSize}
         .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     </a> `;

package/src/tiles/tile-dispatcher.ts

@@ -45,7 +45,6 @@ export class TileDispatcher
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressTileBlurring = false;
    */
 
   @property({ type: String }) tileDisplayMode?: TileDisplayMode;
@@ -303,7 +302,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -317,7 +315,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -331,7 +328,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${false}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -348,7 +344,6 @@ export class TileDispatcher
               .defaultSortParam=${defaultSortParam}
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?useSimpleLayout=${this.useSimpleLayout}
               ?showTvClips=${this.showTvClips}
@@ -370,7 +365,6 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list-compact>`;
       case 'list-detail':
@@ -387,7 +381,6 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list>`;
       default:

package/test/collection-browser.test.ts

@@ -744,6 +744,22 @@ describe('Collection Browser', () => {
     );
   });
 
+  it('adds tv channel aliases to cache when present on response', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'channel-aliases';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(el.dataSource.tvChannelAliases.get('foo')).to.equal('Foo Network');
+    expect(el.dataSource.tvChannelAliases.get('bar')).to.equal('Bar Network');
+  });
+
   it('keeps search results from fetch if no change to query or sort param', async () => {
     const resultsSpy = sinon.spy();
     const searchService = new MockSearchService({
@@ -1101,7 +1117,58 @@ describe('Collection Browser', () => {
     // date query correctly.
     await el.updateComplete;
     expect(el.minSelectedDate).to.equal('1960');
-    expect(el.maxSelectedDate).to.equal('2000');
+    expect(el.maxSelectedDate).to.equal('2009');
+  });
+
+  it('sets date range query when monthly date picker selection changed', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .suppressPlaceholders=${true}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'months'; // Includes date_histogram aggregation in response
+    el.searchType = SearchType.TV;
+    el.showHistogramDatePicker = true;
+    await el.updateComplete;
+
+    const facets = el.shadowRoot?.querySelector(
+      'collection-facets',
+    ) as CollectionFacets;
+    await facets?.updateComplete;
+
+    // Wait for the date picker to be rendered (which may take until the next tick)
+    await nextTick();
+
+    const histogram = facets?.shadowRoot?.querySelector(
+      'histogram-date-range',
+    ) as HistogramDateRange;
+
+    expect(histogram, 'histogram exists').to.exist;
+
+    // Enter a new min date into the date picker
+    const minDateInput = histogram.shadowRoot?.querySelector(
+      '#date-min',
+    ) as HTMLInputElement;
+
+    const pressEnterEvent = new KeyboardEvent('keyup', {
+      key: 'Enter',
+    });
+
+    minDateInput.value = '2001-02';
+    minDateInput.dispatchEvent(pressEnterEvent);
+
+    // Wait for the histogram's update delay
+    await aTimeout(histogram.updateDelay + 50);
+
+    // Ensure that the histogram change propagated to the collection browser's
+    // date query correctly.
+    await el.updateComplete;
+    expect(el.minSelectedDate).to.equal('2001-02');
+    expect(el.maxSelectedDate).to.equal('2002-12');
   });
 
   it('emits event when results start and end loading', async () => {

package/test/collection-facets.test.ts

@@ -41,8 +41,13 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = true;
+    el.histogramAggregationLoading = true;
     el.showHistogramDatePicker = true;
+    el.histogramAggregation = new Aggregation({
+      buckets: [1, 2, 3],
+      first_bucket_key: 0,
+      last_bucket_key: 2,
+    });
     await el.updateComplete;
 
     const histogramLoader = el.shadowRoot?.querySelector(
@@ -56,8 +61,13 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = true;
+    el.histogramAggregationLoading = true;
     el.showHistogramDatePicker = false;
+    el.histogramAggregation = new Aggregation({
+      buckets: [1, 2, 3],
+      first_bucket_key: 0,
+      last_bucket_key: 2,
+    });
     await el.updateComplete;
 
     const histogramLoader = el.shadowRoot?.querySelector(
@@ -71,9 +81,9 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -89,9 +99,9 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = false;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -107,10 +117,10 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -126,10 +136,10 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = false;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -151,10 +161,10 @@ describe('Collection Facets', () => {
       ></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -868,10 +878,10 @@ describe('Collection Facets', () => {
       ></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,

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

@@ -237,6 +237,60 @@ export const getMockSuccessWithYearHistogramAggs: () => Result<
   },
 });
 
+export const getMockSuccessWithDateHistogramAggs: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'months',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'months',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    sessionContext: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      aggregations: {
+        subject: new Aggregation({
+          buckets: [
+            {
+              key: 'foo',
+              doc_count: 3,
+            },
+          ],
+        }),
+        date_histogram: new Aggregation({
+          buckets: [1, 2, 3, 3, 2, 1],
+          first_bucket_year: 2000,
+          first_bucket_month: 1,
+          last_bucket_year: 2002,
+          last_bucket_month: 7,
+          interval_in_months: 6,
+          number_buckets: 6,
+        }),
+      },
+      results: [],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockSuccessLoggedInResult: () => Result<
   SearchResponse,
   SearchServiceError
@@ -511,6 +565,52 @@ export const getMockSuccessWithCollectionTitles: () => Result<
   },
 });
 
+export const getMockSuccessWithChannelAliases: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'collection:foo',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'collection:foo',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    sessionContext: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new TvClipHit({
+          fields: {
+            identifier: 'foo',
+            creator: ['foo', 'bar'],
+          },
+        }),
+      ],
+      tvChannelAliases: {
+        foo: 'Foo Network',
+        bar: 'Bar Network',
+      },
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockSuccessWithCollectionAggregations: () => Result<
   SearchResponse,
   SearchServiceError

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

@@ -14,12 +14,14 @@ import {
   getMockSuccessNoPreviewResult,
   getMockSuccessLoggedInAndNoPreviewResult,
   getMockSuccessWithYearHistogramAggs,
+  getMockSuccessWithDateHistogramAggs,
   getMockSuccessMultiLineDescription,
   getMockSuccessFirstTitleResult,
   getMockSuccessFirstCreatorResult,
   getMockErrorResult,
   getMockMalformedResult,
   getMockSuccessWithCollectionTitles,
+  getMockSuccessWithChannelAliases,
   getMockSuccessWithCollectionAggregations,
   getMockSuccessExtraQuotedHref,
   getMockSuccessWithDefaultSort,
@@ -40,6 +42,7 @@ const responses: Record<
 > = {
   'single-result': getMockSuccessSingleResult,
   years: getMockSuccessWithYearHistogramAggs,
+  months: getMockSuccessWithDateHistogramAggs,
   'multi-line-description': getMockSuccessMultiLineDescription,
   loggedin: getMockSuccessLoggedInResult,
   'no-preview': getMockSuccessNoPreviewResult,
@@ -47,6 +50,7 @@ const responses: Record<
   'first-title': getMockSuccessFirstTitleResult,
   'first-creator': getMockSuccessFirstCreatorResult,
   'collection-titles': getMockSuccessWithCollectionTitles,
+  'channel-aliases': getMockSuccessWithChannelAliases,
   'collection-aggregations': getMockSuccessWithCollectionAggregations,
   'extra-quoted-href': getMockSuccessExtraQuotedHref,
   'default-sort': getMockSuccessWithDefaultSort,

package/test/tiles/hover/hover-pane-controller.test.ts

@@ -54,7 +54,6 @@ class HostElement extends LitElement implements HoverPaneProviderInterface {
     return {
       model: tileModel,
       loggedIn: false,
-      suppressBlurring: false,
       sortParam: null,
     };
   }