@internetarchive/collection-browser 1.6.0 → 1.7.1-alpha.0

package/dist/test/mocks/mock-search-service.js

@@ -1,4 +1,4 @@
-import { getMockSuccessSingleResult, getMockSuccessMultipleResults, getMockSuccessSingleResultWithSort, getMockSuccessLoggedInResult, getMockSuccessNoPreviewResult, getMockSuccessLoggedInAndNoPreviewResult, getMockSuccessWithYearHistogramAggs, getMockSuccessMultiLineDescription, getMockSuccessFirstTitleResult, getMockSuccessFirstCreatorResult, getMockErrorResult, getMockMalformedResult, getMockSuccessWithCollectionTitles, getMockSuccessWithCollectionAggregations, getMockSuccessExtraQuotedHref, } from './mock-search-responses';
+import { getMockSuccessSingleResult, getMockSuccessMultipleResults, getMockSuccessSingleResultWithSort, getMockSuccessLoggedInResult, getMockSuccessNoPreviewResult, getMockSuccessLoggedInAndNoPreviewResult, getMockSuccessWithYearHistogramAggs, getMockSuccessMultiLineDescription, getMockSuccessFirstTitleResult, getMockSuccessFirstCreatorResult, getMockErrorResult, getMockMalformedResult, getMockSuccessWithCollectionTitles, getMockSuccessWithCollectionAggregations, getMockSuccessExtraQuotedHref, getMockSuccessWithDefaultSort, getMockSuccessWithConciseDefaultSort, } from './mock-search-responses';
 const responses = {
     'single-result': getMockSuccessSingleResult,
     years: getMockSuccessWithYearHistogramAggs,
@@ -11,6 +11,8 @@ const responses = {
     'collection-titles': getMockSuccessWithCollectionTitles,
     'collection-aggregations': getMockSuccessWithCollectionAggregations,
     'extra-quoted-href': getMockSuccessExtraQuotedHref,
+    'default-sort': getMockSuccessWithDefaultSort,
+    'default-sort-concise': getMockSuccessWithConciseDefaultSort,
     error: getMockErrorResult,
     malformed: getMockMalformedResult,
 };
@@ -21,7 +23,7 @@ export class MockSearchService {
         this.resultsSpy = resultsSpy;
     }
     async search(params, searchType) {
-        var _a;
+        var _a, _b;
         this.searchParams = params;
         this.searchType = searchType;
         if (this.asyncResponse) {
@@ -30,7 +32,8 @@ export class MockSearchService {
                 setTimeout(res, this.asyncResponseDelay);
             });
         }
-        const resultFn = (_a = responses[this.searchParams.query]) !== null && _a !== void 0 ? _a : getMockSuccessMultipleResults;
+        const responseKey = (_a = (this.searchParams.query || this.searchParams.pageTarget)) !== null && _a !== void 0 ? _a : '';
+        const resultFn = (_b = responses[responseKey]) !== null && _b !== void 0 ? _b : getMockSuccessMultipleResults;
         let result = resultFn();
         // with-sort query has special handling
         if (this.searchParams.query === 'with-sort') {

package/dist/test/mocks/mock-search-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-search-service.js","sourceRoot":"","sources":["../../../test/mocks/mock-search-service.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,kCAAkC,EAClC,4BAA4B,EAC5B,6BAA6B,EAC7B,wCAAwC,EACxC,mCAAmC,EACnC,kCAAkC,EAClC,8BAA8B,EAC9B,gCAAgC,EAChC,kBAAkB,EAClB,sBAAsB,EACtB,kCAAkC,EAClC,wCAAwC,EACxC,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,SAAS,GAGX;IACF,eAAe,EAAE,0BAA0B;IAC3C,KAAK,EAAE,mCAAmC;IAC1C,wBAAwB,EAAE,kCAAkC;IAC5D,QAAQ,EAAE,4BAA4B;IACtC,YAAY,EAAE,6BAA6B;IAC3C,qBAAqB,EAAE,wCAAwC;IAC/D,aAAa,EAAE,8BAA8B;IAC7C,eAAe,EAAE,gCAAgC;IACjD,mBAAmB,EAAE,kCAAkC;IACvD,yBAAyB,EAAE,wCAAwC;IACnE,mBAAmB,EAAE,6BAA6B;IAClD,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,sBAAsB;CAClC,CAAC;AAEF,MAAM,OAAO,iBAAiB;IAW5B,YAAY,EACV,aAAa,GAAG,KAAK,EACrB,kBAAkB,GAAG,CAAC,EACtB,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,GACtB,GAAG,EAAE;QACJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,MAAM,CACV,MAAoB,EACpB,UAAsB;;QAEtB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAE7B,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,iCAAiC;YACjC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE;gBACtB,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;SACJ;QAED,MAAM,QAAQ,GACZ,MAAA,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mCAAI,6BAA6B,CAAC;QACtE,IAAI,MAAM,GAAG,QAAQ,EAAE,CAAC;QAExB,uCAAuC;QACvC,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,WAAW,EAAE;YAC3C,MAAM,GAAG,kCAAkC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC9D;QAED,uCAAuC;QACvC,IAAI,MAAM,CAAC,OAAO,EAAE;YACjB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,gBAAwB,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;SACnE;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;CACF","sourcesContent":["import type { Result } from '@internetarchive/result-type';\nimport type {\n  SearchParams,\n  SearchResponse,\n  SearchServiceInterface,\n  SearchServiceError,\n  SearchType,\n} from '@internetarchive/search-service';\nimport {\n  getMockSuccessSingleResult,\n  getMockSuccessMultipleResults,\n  getMockSuccessSingleResultWithSort,\n  getMockSuccessLoggedInResult,\n  getMockSuccessNoPreviewResult,\n  getMockSuccessLoggedInAndNoPreviewResult,\n  getMockSuccessWithYearHistogramAggs,\n  getMockSuccessMultiLineDescription,\n  getMockSuccessFirstTitleResult,\n  getMockSuccessFirstCreatorResult,\n  getMockErrorResult,\n  getMockMalformedResult,\n  getMockSuccessWithCollectionTitles,\n  getMockSuccessWithCollectionAggregations,\n  getMockSuccessExtraQuotedHref,\n} from './mock-search-responses';\n\nconst responses: Record<\n  string,\n  () => Result<SearchResponse, SearchServiceError>\n> = {\n  'single-result': getMockSuccessSingleResult,\n  years: getMockSuccessWithYearHistogramAggs,\n  'multi-line-description': getMockSuccessMultiLineDescription,\n  loggedin: getMockSuccessLoggedInResult,\n  'no-preview': getMockSuccessNoPreviewResult,\n  'loggedin-no-preview': getMockSuccessLoggedInAndNoPreviewResult,\n  'first-title': getMockSuccessFirstTitleResult,\n  'first-creator': getMockSuccessFirstCreatorResult,\n  'collection-titles': getMockSuccessWithCollectionTitles,\n  'collection-aggregations': getMockSuccessWithCollectionAggregations,\n  'extra-quoted-href': getMockSuccessExtraQuotedHref,\n  error: getMockErrorResult,\n  malformed: getMockMalformedResult,\n};\n\nexport class MockSearchService implements SearchServiceInterface {\n  searchParams?: SearchParams;\n\n  searchType?: SearchType;\n\n  asyncResponse: boolean;\n\n  asyncResponseDelay: number;\n\n  resultsSpy: Function;\n\n  constructor({\n    asyncResponse = false,\n    asyncResponseDelay = 0,\n    resultsSpy = () => {},\n  } = {}) {\n    this.asyncResponse = asyncResponse;\n    this.asyncResponseDelay = asyncResponseDelay;\n    this.resultsSpy = resultsSpy;\n  }\n\n  async search(\n    params: SearchParams,\n    searchType: SearchType\n  ): Promise<Result<SearchResponse, SearchServiceError>> {\n    this.searchParams = params;\n    this.searchType = searchType;\n\n    if (this.asyncResponse) {\n      // Add an artificial 1-tick delay\n      await new Promise(res => {\n        setTimeout(res, this.asyncResponseDelay);\n      });\n    }\n\n    const resultFn: () => Result<SearchResponse, SearchServiceError> =\n      responses[this.searchParams.query] ?? getMockSuccessMultipleResults;\n    let result = resultFn();\n\n    // with-sort query has special handling\n    if (this.searchParams.query === 'with-sort') {\n      result = getMockSuccessSingleResultWithSort(this.resultsSpy);\n    }\n\n    // Apply any uid param from the request\n    if (result.success) {\n      (result.success.request.clientParameters as any).uid = params.uid;\n    }\n\n    return result;\n  }\n}\n"]}
+{"version":3,"file":"mock-search-service.js","sourceRoot":"","sources":["../../../test/mocks/mock-search-service.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,kCAAkC,EAClC,4BAA4B,EAC5B,6BAA6B,EAC7B,wCAAwC,EACxC,mCAAmC,EACnC,kCAAkC,EAClC,8BAA8B,EAC9B,gCAAgC,EAChC,kBAAkB,EAClB,sBAAsB,EACtB,kCAAkC,EAClC,wCAAwC,EACxC,6BAA6B,EAC7B,6BAA6B,EAC7B,oCAAoC,GACrC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,SAAS,GAGX;IACF,eAAe,EAAE,0BAA0B;IAC3C,KAAK,EAAE,mCAAmC;IAC1C,wBAAwB,EAAE,kCAAkC;IAC5D,QAAQ,EAAE,4BAA4B;IACtC,YAAY,EAAE,6BAA6B;IAC3C,qBAAqB,EAAE,wCAAwC;IAC/D,aAAa,EAAE,8BAA8B;IAC7C,eAAe,EAAE,gCAAgC;IACjD,mBAAmB,EAAE,kCAAkC;IACvD,yBAAyB,EAAE,wCAAwC;IACnE,mBAAmB,EAAE,6BAA6B;IAClD,cAAc,EAAE,6BAA6B;IAC7C,sBAAsB,EAAE,oCAAoC;IAC5D,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,sBAAsB;CAClC,CAAC;AAEF,MAAM,OAAO,iBAAiB;IAW5B,YAAY,EACV,aAAa,GAAG,KAAK,EACrB,kBAAkB,GAAG,CAAC,EACtB,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,GACtB,GAAG,EAAE;QACJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,MAAM,CACV,MAAoB,EACpB,UAAsB;;QAEtB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAE7B,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,iCAAiC;YACjC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE;gBACtB,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;SACJ;QAED,MAAM,WAAW,GACf,MAAA,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC;QAClE,MAAM,QAAQ,GACZ,MAAA,SAAS,CAAC,WAAW,CAAC,mCAAI,6BAA6B,CAAC;QAC1D,IAAI,MAAM,GAAG,QAAQ,EAAE,CAAC;QAExB,uCAAuC;QACvC,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,WAAW,EAAE;YAC3C,MAAM,GAAG,kCAAkC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC9D;QAED,uCAAuC;QACvC,IAAI,MAAM,CAAC,OAAO,EAAE;YACjB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,gBAAwB,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;SACnE;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;CACF","sourcesContent":["import type { Result } from '@internetarchive/result-type';\nimport type {\n  SearchParams,\n  SearchResponse,\n  SearchServiceInterface,\n  SearchServiceError,\n  SearchType,\n} from '@internetarchive/search-service';\nimport {\n  getMockSuccessSingleResult,\n  getMockSuccessMultipleResults,\n  getMockSuccessSingleResultWithSort,\n  getMockSuccessLoggedInResult,\n  getMockSuccessNoPreviewResult,\n  getMockSuccessLoggedInAndNoPreviewResult,\n  getMockSuccessWithYearHistogramAggs,\n  getMockSuccessMultiLineDescription,\n  getMockSuccessFirstTitleResult,\n  getMockSuccessFirstCreatorResult,\n  getMockErrorResult,\n  getMockMalformedResult,\n  getMockSuccessWithCollectionTitles,\n  getMockSuccessWithCollectionAggregations,\n  getMockSuccessExtraQuotedHref,\n  getMockSuccessWithDefaultSort,\n  getMockSuccessWithConciseDefaultSort,\n} from './mock-search-responses';\n\nconst responses: Record<\n  string,\n  () => Result<SearchResponse, SearchServiceError>\n> = {\n  'single-result': getMockSuccessSingleResult,\n  years: getMockSuccessWithYearHistogramAggs,\n  'multi-line-description': getMockSuccessMultiLineDescription,\n  loggedin: getMockSuccessLoggedInResult,\n  'no-preview': getMockSuccessNoPreviewResult,\n  'loggedin-no-preview': getMockSuccessLoggedInAndNoPreviewResult,\n  'first-title': getMockSuccessFirstTitleResult,\n  'first-creator': getMockSuccessFirstCreatorResult,\n  'collection-titles': getMockSuccessWithCollectionTitles,\n  'collection-aggregations': getMockSuccessWithCollectionAggregations,\n  'extra-quoted-href': getMockSuccessExtraQuotedHref,\n  'default-sort': getMockSuccessWithDefaultSort,\n  'default-sort-concise': getMockSuccessWithConciseDefaultSort,\n  error: getMockErrorResult,\n  malformed: getMockMalformedResult,\n};\n\nexport class MockSearchService implements SearchServiceInterface {\n  searchParams?: SearchParams;\n\n  searchType?: SearchType;\n\n  asyncResponse: boolean;\n\n  asyncResponseDelay: number;\n\n  resultsSpy: Function;\n\n  constructor({\n    asyncResponse = false,\n    asyncResponseDelay = 0,\n    resultsSpy = () => {},\n  } = {}) {\n    this.asyncResponse = asyncResponse;\n    this.asyncResponseDelay = asyncResponseDelay;\n    this.resultsSpy = resultsSpy;\n  }\n\n  async search(\n    params: SearchParams,\n    searchType: SearchType\n  ): Promise<Result<SearchResponse, SearchServiceError>> {\n    this.searchParams = params;\n    this.searchType = searchType;\n\n    if (this.asyncResponse) {\n      // Add an artificial 1-tick delay\n      await new Promise(res => {\n        setTimeout(res, this.asyncResponseDelay);\n      });\n    }\n\n    const responseKey =\n      (this.searchParams.query || this.searchParams.pageTarget) ?? '';\n    const resultFn: () => Result<SearchResponse, SearchServiceError> =\n      responses[responseKey] ?? getMockSuccessMultipleResults;\n    let result = resultFn();\n\n    // with-sort query has special handling\n    if (this.searchParams.query === 'with-sort') {\n      result = getMockSuccessSingleResultWithSort(this.resultsSpy);\n    }\n\n    // Apply any uid param from the request\n    if (result.success) {\n      (result.success.request.clientParameters as any).uid = params.uid;\n    }\n\n    return result;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "1.6.0",
+  "version": "1.7.1-alpha.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@internetarchive/analytics-manager": "^0.1.2",
-    "@internetarchive/collection-name-cache": "^0.2.12",
+    "@internetarchive/collection-name-cache": "^0.2.13-alpha.0",
     "@internetarchive/feature-feedback": "^0.1.4",
     "@internetarchive/field-parsers": "^0.1.3",
     "@internetarchive/histogram-date-range": "^1.1.0",
@@ -32,7 +32,7 @@
     "@internetarchive/infinite-scroller": "^0.1.4",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.8",
-    "@internetarchive/search-service": "^1.1.0",
+    "@internetarchive/search-service": "^1.1.1-alpha.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",

package/src/collection-browser.ts

@@ -57,6 +57,8 @@ import {
   PrefixFilterCounts,
   prefixFilterAggregationKeys,
   FacetEventDetails,
+  MetadataFieldToSortField,
+  MetadataSortField,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -100,7 +102,7 @@ export class CollectionBrowser
 
   @property({ type: Object }) sortParam: SortParam | null = null;
 
-  @property({ type: String }) selectedSort: SortField = SortField.relevance;
+  @property({ type: String }) selectedSort: SortField = SortField.default;
 
   @property({ type: String }) selectedTitleFilter: string | null = null;
 
@@ -194,6 +196,11 @@ export class CollectionBrowser
 
   @state() private contentWidth?: number;
 
+  @state() private defaultSortField: Exclude<SortField, SortField.default> =
+    SortField.relevance;
+
+  @state() private defaultSortDirection: SortDirection | null = null;
+
   @state() private placeholderType: PlaceholderType = null;
 
   @state() private prefixFilterCountMap: Partial<
@@ -351,7 +358,7 @@ export class CollectionBrowser
     if (sort) {
       this.sortParam = null;
       this.sortDirection = null;
-      this.selectedSort = SortField.relevance;
+      this.selectedSort = SortField.default;
     }
   }
 
@@ -553,8 +560,11 @@ export class CollectionBrowser
   private get sortFilterBarTemplate() {
     return html`
       <sort-filter-bar
+        .defaultSortField=${this.defaultSortField}
+        .defaultSortDirection=${this.defaultSortDirection}
         .selectedSort=${this.selectedSort}
         .sortDirection=${this.sortDirection}
+        .showRelevance=${this.isRelevanceSortAvailable}
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
@@ -598,7 +608,7 @@ export class CollectionBrowser
   }
 
   private selectedSortChanged(): void {
-    if (this.selectedSort === 'relevance') {
+    if ([SortField.default, SortField.relevance].includes(this.selectedSort)) {
       this.sortParam = null;
       return;
     }
@@ -1195,6 +1205,11 @@ export class CollectionBrowser
       this.infiniteScroller.reload();
     }
 
+    if (this.withinCollection && this.baseQuery?.trim()) {
+      this.defaultSortField = SortField.relevance;
+      this.defaultSortDirection = null;
+    }
+
     if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
       this.scrollToPage(this.initialPageNumber);
     }
@@ -1238,7 +1253,7 @@ export class CollectionBrowser
     this.displayMode = restorationState.displayMode;
     if (restorationState.searchType != null)
       this.searchType = restorationState.searchType;
-    this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
+    this.selectedSort = restorationState.selectedSort ?? SortField.default;
     this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
@@ -1612,6 +1627,14 @@ export class CollectionBrowser
     });
   }
 
+  /**
+   * Whether sorting by relevance makes sense for the current state.
+   * Currently equivalent to having a non-empty query.
+   */
+  private get isRelevanceSortAvailable(): boolean {
+    return !!this.baseQuery?.trim();
+  }
+
   /**
    * Whether a search may be performed in the current state of the component.
    * This is only true if the search service is defined, and either
@@ -1757,6 +1780,10 @@ export class CollectionBrowser
 
     if (this.withinCollection) {
       this.collectionInfo = success.response.collectionExtraInfo;
+
+      // 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
+      this.applyDefaultCollectionSort(success.response.collectionExtraInfo);
     }
 
     const { results, collectionTitles } = success.response;
@@ -1804,6 +1831,39 @@ export class CollectionBrowser
     this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);
   }
 
+  /**
+   * 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 weekly views.
+   */
+  private applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo) {
+    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;
+    }
+
+    const defaultSort: string =
+      collectionInfo?.public_metadata?.['sort-by'] ?? '-week';
+
+    // Account for both -field and field:dir formats
+    let [field, dir] = defaultSort.split(':');
+    if (field.startsWith('-')) {
+      field = field.slice(1);
+      dir = 'desc';
+    } else if (!['asc', 'desc'].includes(dir)) {
+      dir = 'asc';
+    }
+
+    const sortField = MetadataFieldToSortField[field as MetadataSortField];
+    if (sortField && sortField !== SortField.default) {
+      this.defaultSortField = sortField;
+      this.defaultSortDirection = dir as SortDirection;
+    }
+  }
+
   /**
    * This is useful for determining whether we need to reload the scroller.
    *

package/src/models.ts

@@ -55,6 +55,7 @@ export type CollectionBrowserContext = 'collection' | 'search';
  * The sort fields shown in the sort filter bar
  */
 export enum SortField {
+  'default' = 'default',
   'relevance' = 'relevance',
   'alltimeview' = 'alltimeview',
   'weeklyview' = 'weeklyview',
@@ -87,6 +88,7 @@ export type URLSortField = MetadataSortField | 'title' | 'creator';
 export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
+  default: '', // Use the default sorting option for the current page context, if none has been selected
   relevance: 'Relevance',
   alltimeview: 'All-time views',
   weeklyview: 'Weekly views',
@@ -99,9 +101,10 @@ export const SortFieldDisplayName: {
 };
 
 export const DefaultSortDirection: {
-  [key in SortField]: SortDirection;
+  [key in SortField]: SortDirection | null;
 } = {
-  relevance: 'desc', // Can't actually change the sort direction for relevance
+  default: null,
+  relevance: null, // Sort direction is disabled entirely for relevance sort (user can't click the button)
   alltimeview: 'desc',
   weeklyview: 'desc',
   title: 'asc',
@@ -118,6 +121,7 @@ export const DefaultSortDirection: {
 export const SortFieldToMetadataField: {
   [key in SortField]: MetadataSortField | null;
 } = {
+  default: null,
   relevance: null,
   alltimeview: 'downloads',
   weeklyview: 'week',

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

@@ -42,11 +42,20 @@ export class SortFilterBar
   /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */
   @property({ type: String }) displayMode?: CollectionDisplayMode;
 
+  /** The default sort direction to use if none is set */
+  @property({ type: String }) defaultSortDirection: SortDirection | null = null;
+
+  /** The default sort field to use if none is set */
+  @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;
 
   /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
-  @property({ type: String }) selectedSort: SortField = SortField.relevance;
+  @property({ type: String }) selectedSort: SortField = SortField.default;
 
   /** The currently selected title letter filter, or null if none is set */
   @property({ type: String }) selectedTitleFilter: string | null = null;
@@ -144,7 +153,7 @@ export class SortFilterBar
     }
 
     if (changed.has('selectedSort') && this.sortDirection === null) {
-      this.sortDirection = DefaultSortDirection[this.selectedSort];
+      this.sortDirection = DefaultSortDirection[this.finalizedSortField];
     }
 
     if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
@@ -265,8 +274,8 @@ export class SortFilterBar
     return html`
       <button
         class="sort-direction-selector"
-        ?disabled=${this.selectedSort === 'relevance'}
-        @click=${this.toggleSortDirection}
+        ?disabled=${this.finalizedSortField === SortField.relevance}
+        @click=${this.handleSortDirectionClicked}
       >
         <span class="sr-only">${srLabel}</span>
         ${this.sortDirectionIcon}
@@ -277,14 +286,14 @@ export class SortFilterBar
   /** Template to render the sort direction button's icon in the correct current state */
   private get sortDirectionIcon(): TemplateResult {
     // For relevance sort, show a fully disabled icon
-    if (this.selectedSort === 'relevance') {
+    if (this.finalizedSortField === SortField.relevance) {
       return html`<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
     }
 
     // For all other sorts, show the ascending/descending direction
     return html`
       <div class="sort-direction-icon">
-        ${this.sortDirection === 'asc' ? sortUpIcon : sortDownIcon}
+        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
       </div>
     `;
   }
@@ -297,25 +306,25 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
         <ul id="desktop-sort-selector">
-          <li>
-            ${this.showRelevance
-              ? this.getSortDisplayOption(SortField.relevance, {
+          ${this.showRelevance
+            ? html`<li>
+                ${this.getSortDisplayOption(SortField.relevance, {
                   onClick: () => {
                     this.dropdownBackdropVisible = false;
-                    if (this.selectedSort !== SortField.relevance) {
+                    if (this.finalizedSortField !== SortField.relevance) {
                       this.clearAlphaBarFilters();
                       this.setSelectedSort(SortField.relevance);
                     }
                   },
-                })
-              : nothing}
-          </li>
+                })}
+              </li>`
+            : nothing}
           <li>${this.viewsDropdownTemplate}</li>
           <li>
             ${this.getSortDisplayOption(SortField.title, {
               onClick: () => {
                 this.dropdownBackdropVisible = false;
-                if (this.selectedSort !== SortField.title) {
+                if (this.finalizedSortField !== SortField.title) {
                   this.alphaSelectorVisible = 'title';
                   this.selectedCreatorFilter = null;
                   this.setSelectedSort(SortField.title);
@@ -329,7 +338,7 @@ export class SortFilterBar
             ${this.getSortDisplayOption(SortField.creator, {
               onClick: () => {
                 this.dropdownBackdropVisible = false;
-                if (this.selectedSort !== SortField.creator) {
+                if (this.finalizedSortField !== SortField.creator) {
                   this.alphaSelectorVisible = 'creator';
                   this.selectedTitleFilter = null;
                   this.setSelectedSort(SortField.creator);
@@ -345,19 +354,24 @@ export class SortFilterBar
 
   /** The template to render all the sort options in mobile view */
   private get mobileSortSelectorTemplate() {
+    const isDisplayableField = (field: string) =>
+      field !== SortField.default &&
+      (field !== SortField.relevance || this.showRelevance);
+
     return html`
       <div
         id="mobile-sort-container"
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,
+          displayName: html`${SortFieldDisplayName[this.finalizedSortField] ??
+          'Relevance'}`,
           id: 'mobile-dropdown',
           selected: true,
-          dropdownOptions: Object.keys(SortField).map(field =>
-            this.getDropdownOption(field as SortField)
-          ),
-          selectedOption: this.selectedSort ?? SortField.relevance,
+          dropdownOptions: Object.keys(SortField)
+            .filter(field => isDisplayableField(field))
+            .map(field => this.getDropdownOption(field as SortField)),
+          selectedOption: this.finalizedSortField,
           onOptionSelected: this.mobileSortChanged,
           onDropdownClick: () => {
             this.dropdownBackdropVisible = this.mobileDropdown.open;
@@ -392,7 +406,8 @@ export class SortFilterBar
       onClick?: (e: Event) => void;
     }
   ): TemplateResult {
-    const isSelected = options?.selected ?? this.selectedSort === sortField;
+    const isSelected =
+      options?.selected ?? this.finalizedSortField === sortField;
     const displayName = options?.displayName ?? SortFieldDisplayName[sortField];
     return html`
       <button
@@ -653,7 +668,25 @@ export class SortFilterBar
 
   /** Toggles the current sort direction between 'asc' and 'desc' */
   private toggleSortDirection() {
-    this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');
+    this.setSortDirection(
+      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'
+    );
+  }
+
+  private handleSortDirectionClicked(): void {
+    if (
+      !this.sortDirection &&
+      this.defaultSortField &&
+      this.defaultSortDirection
+    ) {
+      // When the sort direction is merely defaulted (not set by the user), clicking
+      // the toggled button should "promote" the default sort to an explicitly-set one
+      // and then toggle it as usual.
+      this.selectedSort = this.defaultSortField;
+      this.sortDirection = this.defaultSortDirection;
+    }
+
+    this.toggleSortDirection();
   }
 
   private setSelectedSort(sort: SortField) {
@@ -663,6 +696,20 @@ export class SortFilterBar
     this.emitSortChangedEvent();
   }
 
+  /** The current sort field, or the default one if no explicit sort is set */
+  private get finalizedSortField(): SortField {
+    return this.selectedSort === SortField.default
+      ? this.defaultSortField
+      : this.selectedSort;
+  }
+
+  /** The current sort direction, or the default one if no explicit direction is set */
+  private get finalizedSortDirection(): SortDirection | null {
+    return this.sortDirection === null
+      ? this.defaultSortDirection
+      : this.sortDirection;
+  }
+
   /**
    * There are four date sort options.
    *
@@ -680,7 +727,7 @@ export class SortFilterBar
       SortField.datereviewed,
       SortField.dateadded,
     ];
-    return dateSortFields.includes(this.selectedSort);
+    return dateSortFields.includes(this.finalizedSortField);
   }
 
   /**
@@ -698,7 +745,7 @@ export class SortFilterBar
       SortField.alltimeview,
       SortField.weeklyview,
     ];
-    return viewSortFields.includes(this.selectedSort);
+    return viewSortFields.includes(this.finalizedSortField);
   }
 
   /**
@@ -712,7 +759,7 @@ export class SortFilterBar
   private get dateSortField(): string {
     const defaultSort = SortFieldDisplayName[SortField.date];
     const name = this.dateOptionSelected
-      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
+      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
       : defaultSort;
     return name;
   }
@@ -728,7 +775,7 @@ export class SortFilterBar
   private get viewSortField(): string {
     const defaultSort = SortFieldDisplayName[SortField.weeklyview];
     const name = this.viewOptionSelected
-      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
+      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
       : defaultSort;
     return name;
   }

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

@@ -197,7 +197,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('By'))}
         ${join(
           map(this.model.creators, id => this.searchLink('creator', id)),
-          html`, `
+          ', '
         )}
       </div>
     `;
@@ -262,7 +262,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('Topics'))}
         ${join(
           map(this.model.subjects, id => this.searchLink('subject', id)),
-          html`, `
+          ', '
         )}
       </div>
     `;
@@ -275,7 +275,7 @@ export class TileList extends BaseTileComponent {
     return html`
       <div id="collections" class="metadata">
         ${this.labelTemplate(msg('Collections'))}
-        ${join(this.collectionLinks, html`, `)}
+        ${join(this.collectionLinks, ', ')}
       </div>
     `;
   }
@@ -544,6 +544,10 @@ export class TileList extends BaseTileComponent {
         overflow-wrap: anywhere;
       }
 
+      #collections > a {
+        display: inline-block;
+      }
+
       #icon {
         padding-top: 5px;
       }

package/test/collection-browser.test.ts

@@ -20,6 +20,7 @@ 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';
+import type { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';
 
 /**
  * Wait for the next tick of the event loop.
@@ -93,7 +94,7 @@ describe('Collection Browser', () => {
     el.clearFilters({ sort: true }); // Sort is reset too due to the option
 
     expect(el.selectedFacets).to.deep.equal(getDefaultSelectedFacets());
-    expect(el.selectedSort).to.equal('relevance');
+    expect(el.selectedSort).to.equal(SortField.default);
     expect(el.sortDirection).to.be.null;
     expect(el.sortParam).to.be.null;
     expect(el.selectedCreatorFilter).to.be.null;
@@ -763,7 +764,7 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    expect(el.selectedSort).to.equal(SortField.relevance);
+    expect(el.selectedSort).to.equal(SortField.default);
 
     el.baseQuery = 'foo';
     await el.updateComplete;
@@ -988,6 +989,82 @@ describe('Collection Browser', () => {
     ).to.equal('/details/foo?q=%22quoted+query%22');
   });
 
+  it('sets default sort from collection metadata', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      ></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'
+    ) as SortFilterBar;
+    expect(sortBar).to.exist;
+    expect(sortBar.defaultSortField).to.equal(SortField.title);
+    expect(sortBar.defaultSortDirection).to.equal('asc');
+    expect(sortBar.selectedSort).to.equal(SortField.default);
+    expect(sortBar.sortDirection).to.be.null;
+  });
+
+  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=${''}
+      ></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'
+    ) as SortFilterBar;
+    expect(sortBar).to.exist;
+    expect(sortBar.defaultSortField).to.equal(SortField.dateadded);
+    expect(sortBar.defaultSortDirection).to.equal('desc');
+    expect(sortBar.selectedSort).to.equal(SortField.default);
+    expect(sortBar.sortDirection).to.be.null;
+  });
+
+  it('uses relevance sort as default when a query is set', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      ></collection-browser>`
+    );
+
+    el.withinCollection = 'default-sort';
+    el.baseQuery = 'default-sort';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await el.updateComplete;
+    await aTimeout(50);
+
+    const sortBar = el.shadowRoot?.querySelector(
+      'sort-filter-bar'
+    ) as SortFilterBar;
+    expect(sortBar).to.exist;
+    expect(sortBar.defaultSortField).to.equal(SortField.relevance);
+    expect(sortBar.defaultSortDirection).to.be.null;
+    expect(sortBar.selectedSort).to.equal(SortField.default);
+    expect(sortBar.sortDirection).to.be.null;
+  });
+
   it('scrolls to page', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(