@internetarchive/collection-browser 0.4.15 → 0.4.16-alpha.1

package/src/collection-facets/more-facets-content.ts

@@ -29,6 +29,7 @@ import {
   FacetOption,
   facetTitles,
   suppressedCollections,
+  valueFacetSort,
 } from '../models';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './more-facets-pagination';
@@ -86,7 +87,13 @@ export class MoreFacetsContent extends LitElement {
   private facetsPerPage = 35;
 
   updated(changed: PropertyValues) {
-    if (changed.has('facetKey')) {
+    if (
+      changed.has('facetKey') ||
+      changed.has('facetAggregationKey') ||
+      changed.has('query') ||
+      changed.has('searchType') ||
+      changed.has('filterMap')
+    ) {
       this.facetsLoading = true;
       this.pageNumber = 1;
 
@@ -380,17 +387,22 @@ export class MoreFacetsContent extends LitElement {
     return html`<span class="sr-only">More facets for:</span>
       <span class="title">
         ${this.facetGroupTitle}
+
         <label class="sort-label">Sort by:</label>
-        <toggle-switch
-          class="sort-toggle"
-          leftValue=${AggregationSortType.COUNT}
-          leftLabel="Count"
-          rightValue=${AggregationSortType.ALPHABETICAL}
-          rightLabel=${this.facetGroupTitle}
-          @change=${(e: CustomEvent<string>) => {
-            this.sortFacetAggregation(Number(e.detail) as AggregationSortType);
-          }}
-        ></toggle-switch>
+        ${this.facetKey
+          ? html`<toggle-switch
+              class="sort-toggle"
+              leftValue=${AggregationSortType.COUNT}
+              leftLabel="Count"
+              rightValue=${valueFacetSort[this.facetKey]}
+              rightLabel=${this.facetGroupTitle}
+              @change=${(e: CustomEvent<string>) => {
+                this.sortFacetAggregation(
+                  Number(e.detail) as AggregationSortType
+                );
+              }}
+            ></toggle-switch>`
+          : nothing}
       </span>`;
   }
 

package/src/collection-facets.ts

@@ -11,6 +11,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import type {
   Aggregation,
+  AggregationSortType,
   Bucket,
   FilterMap,
   SearchServiceInterface,
@@ -40,6 +41,7 @@ import {
   lendingFacetKeysVisibility,
   LendingFacetKey,
   suppressedCollections,
+  defaultFacetSort,
 } from './models';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
@@ -309,7 +311,7 @@ export class CollectionFacets extends LitElement {
    */
   private get aggregationFacetGroups(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
-    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {
+    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {
       // the year_histogram data is in a different format so can't be handled here
       if (key === 'year_histogram') return;
 
@@ -317,7 +319,9 @@ export class CollectionFacets extends LitElement {
       const title = facetTitles[option];
       if (!title) return;
 
-      let castedBuckets = buckets.buckets as Bucket[];
+      let castedBuckets = aggregation.getSortedBuckets(
+        defaultFacetSort[option]
+      ) as Bucket[];
 
       if (option === 'collection') {
         // we are not showing fav- collections or certain deemphasized collections in facets
@@ -433,10 +437,13 @@ export class CollectionFacets extends LitElement {
       return nothing;
     }
 
+    // We sort years in numeric order by default, rather than bucket count
+    const facetSort = defaultFacetSort[facetGroup.key];
+
     return html`<button
       class="more-link"
       @click=${() => {
-        this.showMoreFacetsModal(facetGroup, 'count');
+        this.showMoreFacetsModal(facetGroup, facetSort);
         this.analyticsHandler?.sendEvent({
           category: analyticsCategories.default,
           action: analyticsActions.showMoreFacetsModal,
@@ -453,7 +460,7 @@ export class CollectionFacets extends LitElement {
 
   async showMoreFacetsModal(
     facetGroup: FacetGroup,
-    sortedBy: string
+    sortedBy: AggregationSortType
   ): Promise<void> {
     const facetAggrKey = facetGroup.key;
 

package/src/models.ts

@@ -1,5 +1,8 @@
 import type { MediaType } from '@internetarchive/field-parsers';
-import type { SortDirection } from '@internetarchive/search-service';
+import {
+  AggregationSortType,
+  SortDirection,
+} from '@internetarchive/search-service';
 
 export interface TileModel {
   averageRating?: number;
@@ -254,6 +257,33 @@ export const facetTitles: Record<FacetOption, string> = {
   year: 'Year',
 };
 
+/**
+ * The default sort type to use for each facet type
+ */
+export const defaultFacetSort: Record<FacetOption, AggregationSortType> = {
+  subject: AggregationSortType.COUNT,
+  lending: AggregationSortType.COUNT,
+  mediatype: AggregationSortType.COUNT,
+  language: AggregationSortType.COUNT,
+  creator: AggregationSortType.COUNT,
+  collection: AggregationSortType.COUNT,
+  year: AggregationSortType.NUMERIC,
+};
+
+/**
+ * The sort type corresponding to facet bucket values, for each facet type
+ * (i.e., the opposite of "sort by count" for that type).
+ */
+export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
+  subject: AggregationSortType.ALPHABETICAL,
+  lending: AggregationSortType.ALPHABETICAL,
+  mediatype: AggregationSortType.ALPHABETICAL,
+  language: AggregationSortType.ALPHABETICAL,
+  creator: AggregationSortType.ALPHABETICAL,
+  collection: AggregationSortType.ALPHABETICAL,
+  year: AggregationSortType.NUMERIC,
+};
+
 export type LendingFacetKey =
   | 'is_lendable'
   | 'is_borrowable'

package/src/restoration-state-handler.ts

@@ -233,9 +233,14 @@ export class RestorationStateHandler
       restorationState.baseQuery = legacySearchQuery;
     }
 
-    if (searchInside) {
-      restorationState.searchType =
-        searchInside === 'TXT' ? SearchType.FULLTEXT : SearchType.METADATA;
+    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 (pageNumber) {

package/test/collection-browser.test.ts

@@ -261,13 +261,13 @@ describe('Collection Browser', () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<CollectionBrowser>(
-      html` <collection-browser
-        .searchService=${searchService}
-        .searchType=${SearchType.METADATA}
-      >
+      html` <collection-browser .searchService=${searchService}>
       </collection-browser>`
     );
 
+    el.searchType = SearchType.METADATA;
+    await el.updateComplete;
+
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
     await nextTick();
@@ -279,7 +279,7 @@ describe('Collection Browser', () => {
     ).to.contains('Results');
   });
 
-  it('can request a search when changing search type', async () => {
+  it('can change search type', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -290,7 +290,6 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     el.searchType = SearchType.FULLTEXT;
-    el.requestSearch();
     await el.updateComplete;
     await nextTick();
 
@@ -301,13 +300,13 @@ describe('Collection Browser', () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<CollectionBrowser>(
-      html` <collection-browser
-        .searchService=${searchService}
-        .searchType=${SearchType.FULLTEXT}
-      >
+      html` <collection-browser .searchService=${searchService}>
       </collection-browser>`
     );
 
+    el.searchType = SearchType.FULLTEXT;
+    await el.updateComplete;
+
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
     await nextTick();

package/test/restoration-state-handler.test.ts

@@ -26,6 +26,17 @@ describe('Restoration state handler', () => {
     expect(restorationState.searchType).to.equal(SearchType.METADATA);
   });
 
+  it('should restore metadata search type if sin explicitly empty in URL', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?sin=';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.searchType).to.equal(SearchType.METADATA);
+  });
+
   it('should restore full text search type from URL', async () => {
     const handler = new RestorationStateHandler({ context: 'search' });