@internetarchive/collection-browser 2.1.9 → 2.1.11-alpha.0

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

@@ -72,6 +72,12 @@ export class CollectionBrowserDataSource
    */
   private facetsLoading = false;
 
+  /**
+   * Whether the facets are actually visible -- if not, then we can delay any facet
+   * fetches until they become visible.
+   */
+  private facetsVisible = false;
+
   /**
    * Whether further query changes should be ignored and not trigger fetches
    */
@@ -238,6 +244,7 @@ export class CollectionBrowserDataSource
     this.numTileModels = 0;
     this.endOfDataReached = false;
     this.queryInitialized = false;
+    this.facetsLoading = false;
 
     // Invalidate any fetches in progress
     this.fetchesInProgress.clear();
@@ -369,6 +376,7 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   async handleQueryChange(): Promise<void> {
+    console.log('in handleQueryChange');
     // Don't react to the change if fetches are suppressed for this data source
     if (this.suppressFetches) return;
 
@@ -379,21 +387,60 @@ export class CollectionBrowserDataSource
       this._initialSearchCompleteResolver = res;
     });
 
-    const shouldFetchFacets =
-      !this.host.suppressFacets &&
-      !FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!);
-
     // Fire the initial page & facet requests
+    console.log('handling query change:', this.canFetchFacets);
     this.queryInitialized = true;
     await Promise.all([
       this.doInitialPageFetch(),
-      shouldFetchFacets ? this.fetchFacets() : null,
+      this.canFetchFacets ? this.fetchFacets() : null,
     ]);
 
     // Resolve the `initialSearchComplete` promise for this search
     this._initialSearchCompleteResolver(true);
   }
 
+  /**
+   * @inheritdoc
+   */
+  async handleFacetVisibilityChange(visible: boolean): Promise<void> {
+    console.log(
+      'handling facet visibility change:',
+      this.facetsVisible,
+      '->',
+      visible
+    );
+    const facetsBecameVisible = !this.facetsVisible && visible;
+    this.facetsVisible = visible;
+
+    const needsFetch =
+      this.host.lazyLoadFacets && facetsBecameVisible && this.canFetchFacets;
+    if (needsFetch) {
+      this.fetchFacets();
+    }
+  }
+
+  /**
+   * Whether the data source & its host are in a state where a facet request should be fired.
+   * (i.e., they aren't suppressed or already loading, etc.)
+   */
+  private get canFetchFacets(): boolean {
+    // Don't fetch facets if they are suppressed entirely or not required for the current profile page element
+    if (this.host.suppressFacets) return false;
+    if (FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!))
+      return false;
+
+    // If facets are to be lazy-loaded, don't fetch them if they are not going to be visible anyway
+    // (wait until they become visible instead)
+    if (this.host.lazyLoadFacets && !this.facetsVisible) return false;
+
+    // Don't fetch facets again if they are already fetched or pending
+    const facetsAlreadyFetched =
+      Object.keys(this.aggregations ?? {}).length > 0;
+    if (this.facetsLoading || facetsAlreadyFetched) return false;
+
+    return true;
+  }
+
   /**
    * @inheritdoc
    */
@@ -868,6 +915,7 @@ export class CollectionBrowserDataSource
    * the current search state.
    */
   private async fetchFacets(): Promise<void> {
+    console.log('called fetchFacets');
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
 
@@ -875,6 +923,9 @@ export class CollectionBrowserDataSource
     if (this.fetchesInProgress.has(facetFetchQueryKey)) return;
     this.fetchesInProgress.add(facetFetchQueryKey);
 
+    console.log('setting facets loading');
+    this.setFacetsLoading(true);
+
     const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
       ...this.pageSpecifierParams,
@@ -891,7 +942,6 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    this.setFacetsLoading(true);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType

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

@@ -37,6 +37,7 @@ export interface CollectionBrowserSearchInterface
   readonly sortParam: SortParam | null;
   readonly defaultSortParam: SortParam | null;
   readonly suppressFacets?: boolean;
+  readonly lazyLoadFacets?: boolean;
   readonly initialPageNumber: number;
   readonly currentVisiblePageNumbers: number[];
   readonly clearResultsOnEmptyQuery?: boolean;

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

@@ -255,6 +255,11 @@ export class SortFilterBar
     }
   };
 
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    this.setupResizeObserver();
+  }
+
   disconnectedCallback(): void {
     if (this.resizeObserver) {
       this.disconnectResizeObserver(this.resizeObserver);

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "importsNotUsedAsValues": "error"
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "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',
+});

package/web-test-runner.config.mjs

@@ -1,41 +1,41 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});