@internetarchive/collection-browser 4.1.1-alpha-webdev8185.1 → 4.1.2-alpha1

package/renovate.json

@@ -1,6 +1,6 @@
-{
-  "extends": [
-    "config:base",
-    ":preserveSemverRanges"
-  ]
-}
+{
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

package/src/collection-browser.ts

@@ -36,13 +36,14 @@ import type { IAComboBox } from '@internetarchive/elements/ia-combo-box/ia-combo
 import {
   SelectedFacets,
   SortField,
-  type ExplicitSortField,
   CollectionBrowserContext,
   getDefaultSelectedFacets,
   TileModel,
   CollectionDisplayMode,
   FacetEventDetails,
+  sortOptionFromAPIString,
   SORT_OPTIONS,
+  defaultProfileElementSorts,
   FacetLoadStrategy,
   defaultFacetDisplayOrder,
   tvFacetDisplayOrder,
@@ -150,8 +151,10 @@ export class CollectionBrowser
 
   @property({ type: String }) sortDirection: SortDirection | null = null;
 
-  @property({ type: String }) defaultSortField: ExplicitSortField =
-    SortField.relevance;
+  @property({ type: String }) defaultSortField: Exclude<
+    SortField,
+    SortField.default
+  > = SortField.relevance;
 
   @property({ type: String }) defaultSortDirection: SortDirection | null = null;
 
@@ -598,6 +601,10 @@ export class CollectionBrowser
 
   willUpdate(changed: PropertyValues): void {
     this.setPlaceholderType();
+
+    if (changed.has('searchType') && this.searchType === SearchType.TV) {
+      this.applyDefaultTVSearchSort();
+    }
   }
 
   render() {
@@ -853,8 +860,12 @@ export class CollectionBrowser
     let sortFieldAvailability = defaultSortAvailability;
 
     // We adjust the available sort options for a couple of special cases...
-    if (this.withinCollection?.startsWith('fav-')) {
-      // When viewing a fav- collection, we include the Date Favorited option as the default
+    if (
+      this.withinCollection?.startsWith('fav-') ||
+      (this.profileElement as string) === 'favorites'
+    ) {
+      // When viewing a fav- collection or the favorites profile tab,
+      // we include the Date Favorited option as the default
       sortFieldAvailability = favoritesSortAvailability;
     } else if (!this.withinCollection && this.searchType === SearchType.TV) {
       // When viewing TV search results, we exclude several of the usual date sort options.
@@ -1639,12 +1650,6 @@ export class CollectionBrowser
     this.maxSelectedDate = queryState.maxSelectedDate;
     this.selectedSort = queryState.selectedSort ?? SortField.default;
     this.sortDirection = queryState.sortDirection;
-    if (queryState.defaultSortField) {
-      this.defaultSortField = queryState.defaultSortField;
-    }
-    if (queryState.defaultSortDirection !== undefined) {
-      this.defaultSortDirection = queryState.defaultSortDirection;
-    }
     this.selectedTitleFilter = queryState.selectedTitleFilter;
     this.selectedCreatorFilter = queryState.selectedCreatorFilter;
 
@@ -1755,6 +1760,21 @@ export class CollectionBrowser
       }
     }
 
+    if (changed.has('profileElement')) {
+      this.applyDefaultProfileSort();
+    }
+
+    if (changed.has('withinCollection') && this.withinCollection) {
+      // Set a sensible default collection sort while we load results, which we will later
+      // adjust based on any sort-by metadata once the response arrives.
+      if (!this.baseQuery) {
+        this.defaultSortField = this.withinCollection.startsWith('fav-')
+          ? SortField.datefavorited
+          : SortField.weeklyview;
+        this.defaultSortDirection = 'desc';
+      }
+    }
+
     if (changed.has('baseQuery')) {
       this.emitBaseQueryChanged();
     }
@@ -2067,22 +2087,6 @@ export class CollectionBrowser
     );
   }
 
-  /**
-   * Emits a `collectionExtraInfoLoaded` event when the data source has received
-   * collection metadata from the backend. This allows parent components to react
-   * to the metadata (e.g., to update their default sort based on the collection's
-   * `sort-by` metadata field).
-   */
-  emitCollectionExtraInfoLoaded(
-    collectionExtraInfo?: CollectionExtraInfo,
-  ): void {
-    this.dispatchEvent(
-      new CustomEvent('collectionExtraInfoLoaded', {
-        detail: collectionExtraInfo,
-      }),
-    );
-  }
-
   /**
    * Emits a `queryStateChanged` event indicating that one or more of this component's
    * properties have changed in a way that could affect the set of search results.
@@ -2382,6 +2386,75 @@ export class CollectionBrowser
     }
   }
 
+  /**
+   * Applies the default sort options for the TV search results page
+   */
+  applyDefaultTVSearchSort(): void {
+    this.defaultSortField = SortField.datearchived;
+    this.defaultSortDirection = 'desc';
+  }
+
+  /**
+   * Applies any default sort option for the current collection, by checking
+   * for one in the collection's metadata. If none is found, defaults to sorting
+   * descending by:
+   *  - Date Favorited for fav-* collections
+   *  - Weekly views for all other collections
+   */
+  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void {
+    if (this.baseQuery) {
+      // If there's a query set, then we default to relevance sorting regardless of
+      // the collection metadata-specified sort.
+      this.defaultSortField = SortField.relevance;
+      this.defaultSortDirection = null;
+      return;
+    }
+
+    // Favorite collections sort on Date Favorited by default.
+    // Other collections fall back to sorting on weekly views.
+    const baseDefaultSort: string =
+      collectionInfo?.public_metadata?.identifier?.startsWith('fav-')
+        ? '-favoritedate'
+        : '-week';
+
+    // The collection metadata may override the default sorting with something else
+    const metadataSort: string | undefined =
+      collectionInfo?.public_metadata?.['sort-by'];
+
+    // Prefer the metadata-specified sort if one exists
+    const defaultSortToApply = metadataSort ?? baseDefaultSort;
+
+    // Account for both -field and field:dir formats
+    let [field, dir] = defaultSortToApply.split(':');
+    if (field.startsWith('-')) {
+      field = field.slice(1);
+      dir = 'desc';
+    } else if (!['asc', 'desc'].includes(dir)) {
+      dir = 'asc';
+    }
+
+    const sortOption = sortOptionFromAPIString(field);
+    const sortField = sortOption.field;
+    if (sortField && sortField !== SortField.default) {
+      this.defaultSortField = sortField;
+      this.defaultSortDirection = dir as SortDirection;
+    }
+  }
+
+  /**
+   * Applies the default sort option for the current profile element
+   */
+  applyDefaultProfileSort(): void {
+    if (this.profileElement) {
+      const defaultSortField = defaultProfileElementSorts[this.profileElement];
+      this.defaultSortField = defaultSortField ?? SortField.weeklyview;
+    } else {
+      this.defaultSortField = SortField.weeklyview;
+    }
+
+    this.defaultSortDirection = 'desc';
+  }
+
   /**
    * This is useful for determining whether we need to reload the scroller.
    *

package/src/data-source/collection-browser-data-source.ts

@@ -1194,9 +1194,10 @@ export class CollectionBrowserDataSource
     if (withinCollection) {
       this.collectionExtraInfo = success.response.collectionExtraInfo;
 
-      // Emit the collection metadata so the parent page can set default sort
+      // For collections, we want the UI to respect the default sort option
+      // which can be specified in metadata, or otherwise assumed to be week:desc
       if (this.activeOnHost) {
-        this.host.emitCollectionExtraInfoLoaded(this.collectionExtraInfo);
+        this.host.applyDefaultCollectionSort(this.collectionExtraInfo);
       }
 
       if (this.collectionExtraInfo) {

package/src/data-source/collection-browser-query-state.ts

@@ -6,12 +6,7 @@ import type {
   SortDirection,
   SortParam,
 } from '@internetarchive/search-service';
-import type {
-  ExplicitSortField,
-  FacetLoadStrategy,
-  SelectedFacets,
-  SortField,
-} from '../models';
+import type { FacetLoadStrategy, SelectedFacets, SortField } from '../models';
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 
 /**
@@ -32,8 +27,6 @@ export interface CollectionBrowserQueryState {
   selectedCreatorFilter: string | null;
   selectedSort?: SortField;
   sortDirection: SortDirection | null;
-  defaultSortField?: ExplicitSortField;
-  defaultSortDirection?: SortDirection | null;
 }
 
 /**
@@ -45,7 +38,7 @@ export interface CollectionBrowserSearchInterface
   searchService?: SearchServiceInterface;
   isTVCollection: boolean;
   readonly sortParam: SortParam | null;
-  readonly defaultSortField: ExplicitSortField;
+  readonly defaultSortField: SortField | null;
   readonly defaultSortDirection: SortDirection | null;
   readonly facetLoadStrategy: FacetLoadStrategy;
   readonly initialPageNumber: number;
@@ -59,9 +52,7 @@ export interface CollectionBrowserSearchInterface
   setFacetsLoading(loading: boolean): void;
   setTotalResultCount(count: number): void;
   setTileCount(count: number): void;
-  emitCollectionExtraInfoLoaded(
-    collectionExtraInfo?: CollectionExtraInfo,
-  ): void;
+  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void;
   emitEmptyResults(): void;
   emitSearchError(): void;
   emitQueryStateChanged(): void;

package/src/models.ts

@@ -3,7 +3,6 @@ import { msg } from '@lit/localize';
 import type { MediaType } from '@internetarchive/field-parsers';
 import {
   AggregationSortType,
-  CollectionExtraInfo,
   HitType,
   SearchReview,
   SearchResult,
@@ -323,16 +322,6 @@ export enum SortField {
   'creator' = 'creator',
 }
 
-/**
- * A sort field other than the abstract "default" placeholder.
- * This is useful because the "default" sort field is just an indicator to
- * revert to an explicitly defined fallback value. So when defining default
- * sort logic, this type should be preferred to avoid accidentally permitting
- * that fallback to itself equal the "default" placeholder (which would be
- * rather circular/ill-defined).
- */
-export type ExplicitSortField = Exclude<SortField, SortField.default>;
-
 /**
  * Views-related sort fields
  */
@@ -564,47 +553,6 @@ export function sortOptionFromAPIString(sortName?: string | null): SortOption {
   );
 }
 
-/**
- * Resolves the default sort option for a collection based on its metadata.
- *
- * - Favorite collections (`fav-*`) default to Date Favorited descending.
- * - Other collections default to Weekly Views descending.
- * - If the collection metadata specifies a `sort-by` field, that overrides the above.
- *
- * Supports both `-field` (dash prefix = desc) and `field:dir` metadata formats.
- *
- * Note: This does NOT handle the "relevance when a query is present" rule,
- * which is managed separately by collection-browser itself.
- */
-export function resolveCollectionDefaultSort(
-  collectionInfo?: CollectionExtraInfo,
-): { field: ExplicitSortField; direction: SortDirection } {
-  const isFav = collectionInfo?.public_metadata?.identifier?.startsWith('fav-');
-  const baseDefaultSort: string = isFav ? '-favoritedate' : '-week';
-  const metadataSort: string | undefined =
-    collectionInfo?.public_metadata?.['sort-by'];
-  const defaultSortToApply = metadataSort ?? baseDefaultSort;
-
-  // Account for both -field and field:dir formats
-  let [field, dir] = defaultSortToApply.split(':');
-  if (field.startsWith('-')) {
-    field = field.slice(1);
-    dir = 'desc';
-  } else if (!['asc', 'desc'].includes(dir)) {
-    dir = 'asc';
-  }
-
-  const sortOption = sortOptionFromAPIString(field);
-  const sortField = sortOption.field;
-  if (sortField && sortField !== SortField.default) {
-    return {
-      field: sortField as ExplicitSortField,
-      direction: dir as SortDirection,
-    };
-  }
-  return { field: SortField.weeklyview, direction: 'desc' };
-}
-
 export const defaultSortAvailability: Record<SortField, boolean> = {
   [SortField.relevance]: true,
   [SortField.weeklyview]: true,
@@ -632,7 +580,10 @@ export const tvSortAvailability: Record<SortField, boolean> = {
   [SortField.dateadded]: false,
 };
 
-export const defaultProfileElementSorts: Record<string, ExplicitSortField> = {
+export const defaultProfileElementSorts: Record<
+  string,
+  Exclude<SortField, SortField.default>
+> = {
   uploads: SortField.datearchived,
   reviews: SortField.datereviewed,
   collections: SortField.datearchived,

package/src/restoration-state-handler.ts

@@ -337,7 +337,9 @@ export class RestorationStateHandler
     if (facetAnds) {
       facetAnds.forEach(and => {
         // eslint-disable-next-line prefer-const
-        let [field, value] = and.split(':');
+        let [field, ...valueParts] = and.split(':');
+        if (!valueParts.length) return;
+        const value = valueParts.join(':');
 
         // Legacy search allowed and[] fields like 'creatorSorter', 'languageSorter', etc.
         // which we want to normalize to 'creator', 'language', etc. if redirected here.
@@ -396,7 +398,9 @@ export class RestorationStateHandler
 
     if (facetNots) {
       facetNots.forEach(not => {
-        const [field, value] = not.split(':');
+        const [field, ...valueParts] = not.split(':');
+        if (!valueParts.length) return;
+        const value = valueParts.join(':');
         this.setSelectedFacetState(
           restorationState.selectedFacets,
           field as FacetOption,
@@ -531,7 +535,7 @@ export class RestorationStateHandler
     if (!facet) return; // Unrecognized facet group, ignore it.
 
     const unQuotedValue = this.stripQuotes(value);
-    facet[unQuotedValue] ??= this.getDefaultBucket(value);
+    facet[unQuotedValue] ??= this.getDefaultBucket(unQuotedValue);
     facet[unQuotedValue].state = state;
   }
 

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

@@ -13,7 +13,6 @@ import type { SortDirection } from '@internetarchive/search-service';
 import {
   CollectionDisplayMode,
   defaultSortAvailability,
-  type ExplicitSortField,
   PrefixFilterCounts,
   PrefixFilterType,
   SORT_OPTIONS,
@@ -43,8 +42,10 @@ export class SortFilterBar extends LitElement {
   @property({ type: String }) defaultSortDirection: SortDirection | null = null;
 
   /** The default sort field to use if none is set */
-  @property({ type: String }) defaultSortField: ExplicitSortField =
-    SortField.relevance;
+  @property({ type: String }) defaultSortField: Exclude<
+    SortField,
+    SortField.default
+  > = SortField.relevance;
 
   /** The current sort direction (asc/desc), or null if none is set */
   @property({ type: String }) sortDirection: SortDirection | null = null;

package/test/collection-browser.test.ts

@@ -1313,19 +1313,20 @@ describe('Collection Browser', () => {
     );
   });
 
-  it('sets default sort from externally-provided values', async () => {
+  it('sets default sort from collection metadata', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
         .baseNavigationUrl=${''}
-        .withinCollection=${'test-collection'}
-        .defaultSortField=${SortField.title}
-        .defaultSortDirection=${'asc'}
       ></collection-browser>`,
     );
 
+    el.withinCollection = 'default-sort';
+    await el.updateComplete;
+    await el.initialSearchComplete;
     await el.updateComplete;
+    await aTimeout(50);
 
     const sortBar = el.shadowRoot?.querySelector(
       'sort-filter-bar',
@@ -1337,19 +1338,20 @@ describe('Collection Browser', () => {
     expect(sortBar.sortDirection).to.be.null;
   });
 
-  it('reflects updated default sort field/direction on sort bar', async () => {
+  it('sets default sort from collection metadata in "-field" format', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
         .baseNavigationUrl=${''}
-        .withinCollection=${'test-collection'}
-        .defaultSortField=${SortField.dateadded}
-        .defaultSortDirection=${'desc'}
       ></collection-browser>`,
     );
 
+    el.withinCollection = 'default-sort-concise';
+    await el.updateComplete;
+    await el.initialSearchComplete;
     await el.updateComplete;
+    await aTimeout(50);
 
     const sortBar = el.shadowRoot?.querySelector(
       'sort-filter-bar',
@@ -1361,15 +1363,14 @@ describe('Collection Browser', () => {
     expect(sortBar.sortDirection).to.be.null;
   });
 
-  it('uses weekly views as default sort when set externally for profiles', async () => {
+  it('falls back to weekly views default sorting on profiles when tab not set', async () => {
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .withinProfile=${'@foobar'}
-        .defaultSortField=${SortField.weeklyview}
-        .defaultSortDirection=${'desc'}
       ></collection-browser>`,
     );
 
+    el.applyDefaultProfileSort();
     expect(el.defaultSortParam).to.deep.equal({
       field: 'week',
       direction: 'desc',
@@ -1402,19 +1403,20 @@ describe('Collection Browser', () => {
     expect(sortBar.sortDirection).to.be.null;
   });
 
-  it('uses date favorited sort as default when set externally for fav- collection', async () => {
+  it('uses date favorited sort as default when targeting fav- collection', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
         .baseNavigationUrl=${''}
-        .withinCollection=${'fav-sort'}
-        .defaultSortField=${SortField.datefavorited}
-        .defaultSortDirection=${'desc'}
       ></collection-browser>`,
     );
 
+    el.withinCollection = 'fav-sort';
     await el.updateComplete;
+    await el.initialSearchComplete;
+    await el.updateComplete;
+    await aTimeout(50);
 
     const sortBar = el.shadowRoot?.querySelector(
       'sort-filter-bar',

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "noEmitOnError": true,
-    "lib": [
-      "ESNext",
-      "dom",
-      "dom.iterable"
-    ],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "useDefineForClassFields": false,
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": [
+      "ESNext",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "useDefineForClassFields": false,
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});