Logging & bugfixes for facet bar (#410)

Author: latonv

src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -16,13 +16,15 @@ import type { CollectionTitles } from '../../data-source/models';
 import type { FacetOption, SelectedFacets } from '../../models';
 import { updateSelectedFacetBucket } from '../../utils/facet-utils';
 import { SmartQueryHeuristicGroup } from './smart-facet-heuristics';
+import type { SmartFacetDropdown } from './smart-facet-dropdown';
 import type { SmartFacet, SmartFacetEvent } from './models';
+import { smartFacetEquals } from './smart-facet-equals';
+import { dedupe } from './dedupe';
 import filterIcon from '../../assets/img/icons/filter';
 
 import './smart-facet-button';
 import './smart-facet-dropdown';
-import { smartFacetEquals } from './smart-facet-equals';
-import { dedupe } from './dedupe';
+import { log } from '../../utils/log';
 
 const fieldPrefixes: Partial<Record<FacetOption, string>> = {
   collection: 'Collection: ',
@@ -73,9 +75,12 @@ export class SmartFacetBar extends LitElement {
   }
 
   protected willUpdate(changed: PropertyValues): void {
+    let shouldUpdateSmartFacets = false;
+
     if (changed.has('query')) {
-      this.updateSmartFacets();
+      log('query change', changed.get('query'), this.query);
       this.lastAggregations = undefined;
+      shouldUpdateSmartFacets = true;
     }
 
     if (
@@ -84,16 +89,25 @@ export class SmartFacetBar extends LitElement {
       this.aggregations &&
       Object.keys(this.aggregations).length > 0
     ) {
+      log('aggs change', changed.get('aggregations'), this.aggregations);
       this.lastAggregations = this.aggregations;
+      shouldUpdateSmartFacets = true;
+    }
+
+    if (shouldUpdateSmartFacets) {
+      log('should update smart facets, doing so...');
+      this.updateSmartFacets();
     }
   }
 
   private async updateSmartFacets(): Promise<void> {
-    console.log('updating smart facets');
+    log('updating smart facets');
     if (this.query) {
       this.heuristicRecs =
         await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);
+      log('heuristic recs are', this.heuristicRecs);
       this.smartFacets = dedupe(this.facetsToDisplay);
+      log('smart facets are', this.smartFacets);
     }
   }
 
@@ -129,6 +143,7 @@ export class SmartFacetBar extends LitElement {
         .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
         .activeFacetRef=${facets[0].facets[0]}
         @facetClick=${this.facetDropdownClicked}
+        @dropdownClick=${this.onDropdownClick}
       ></smart-facet-dropdown>
     `;
   }
@@ -147,8 +162,6 @@ export class SmartFacetBar extends LitElement {
   }
 
   private get facetsToDisplay(): SmartFacet[][] {
-    if (!this.lastAggregations) return [];
-
     const facets: SmartFacet[][] = [];
 
     if (this.heuristicRecs.length > 0) {
@@ -157,52 +170,54 @@ export class SmartFacetBar extends LitElement {
       }
     }
 
-    const keys = [
-      'mediatype',
-      'year',
-      'language',
-      'creator',
-      'subject',
-      'collection',
-    ];
-    for (const key of keys) {
-      const agg = this.lastAggregations[key];
-      if (!agg) continue;
-      if (agg.buckets.length === 0) continue;
-      if (['lending', 'year_histogram'].includes(key)) continue;
-      if (typeof agg.buckets[0] === 'number') continue;
-
-      if (
-        key === 'mediatype' &&
-        this.selectedFacets &&
-        Object.values(this.selectedFacets.mediatype).some(
-          bucket => bucket.state !== 'none'
-        )
-      ) {
-        continue;
-      }
-
-      const facetType = key as FacetOption;
-      const buckets = agg.buckets as Bucket[];
-
-      const unusedBuckets = buckets.filter(b => {
-        const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
-        if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {
-          return false;
+    if (this.lastAggregations) {
+      const keys = [
+        'mediatype',
+        'year',
+        'language',
+        'creator',
+        'subject',
+        'collection',
+      ];
+      for (const key of keys) {
+        const agg = this.lastAggregations[key];
+        if (!agg) continue;
+        if (agg.buckets.length === 0) continue;
+        if (['lending', 'year_histogram'].includes(key)) continue;
+        if (typeof agg.buckets[0] === 'number') continue;
+
+        if (
+          key === 'mediatype' &&
+          this.selectedFacets &&
+          Object.values(this.selectedFacets.mediatype).some(
+            bucket => bucket.state !== 'none'
+          )
+        ) {
+          continue;
         }
-        return true;
-      });
 
-      if (facetType === 'mediatype') {
-        facets.push(
-          [this.toSmartFacet(facetType, [unusedBuckets[0]])],
-          [this.toSmartFacet(facetType, [unusedBuckets[1]])]
-        );
-      } else if (facetType === 'collection' || facetType === 'subject') {
-        const topBuckets = unusedBuckets.slice(0, 5);
-        facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
-      } else {
-        facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);
+        const facetType = key as FacetOption;
+        const buckets = agg.buckets as Bucket[];
+
+        const unusedBuckets = buckets.filter(b => {
+          const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
+          if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {
+            return false;
+          }
+          return true;
+        });
+
+        if (facetType === 'mediatype') {
+          facets.push(
+            [this.toSmartFacet(facetType, [unusedBuckets[0]])],
+            [this.toSmartFacet(facetType, [unusedBuckets[1]])]
+          );
+        } else if (facetType === 'collection' || facetType === 'subject') {
+          const topBuckets = unusedBuckets.slice(0, 5);
+          facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
+        } else {
+          facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);
+        }
       }
     }
 
@@ -222,10 +237,6 @@ export class SmartFacetBar extends LitElement {
           if (title) displayText = title;
         }
 
-        // if (prefix && fieldPrefixes[facetType]) {
-        //   displayText = fieldPrefixes[facetType] + displayText;
-        // }
-
         return {
           facetType,
           bucketKey: bucket.key.toString(),
@@ -236,10 +247,12 @@ export class SmartFacetBar extends LitElement {
   }
 
   private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
-    this.smartFacets = [
-      [{ ...e.detail.smartFacet, selected: !e.detail.smartFacet.selected }],
-      ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
-    ];
+    if (!e.detail.smartFacet.selected) {
+      this.smartFacets = [
+        [{ ...e.detail.smartFacet, selected: true }],
+        ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
+      ];
+    }
 
     for (const facet of e.detail.details) {
       this.selectedFacets = updateSelectedFacetBucket(
@@ -283,6 +296,18 @@ export class SmartFacetBar extends LitElement {
     this.dispatchEvent(event);
   }
 
+  private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {
+    log('smart bar: onDropdownClick', e.detail);
+    this.shadowRoot
+      ?.querySelectorAll('smart-facet-dropdown')
+      .forEach(dropdown => {
+        if (dropdown !== e.detail) {
+          log('closing', dropdown);
+          (dropdown as SmartFacetDropdown).close();
+        }
+      });
+  }
+
   private filterToggleClicked(): void {
     this.dispatchEvent(new CustomEvent('filtersToggled'));
   }

src/collection-facets/smart-facets/smart-facet-button.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { mediatypeConfig } from '../../mediatype/mediatype-config';
-import type { SmartFacet } from './models';
+import type { SmartFacet, SmartFacetEvent } from './models';
 
 function capitalize(str?: string): string | undefined {
   if (!str) return str;
@@ -75,7 +75,7 @@ export class SmartFacetButton extends LitElement {
     this.selected = !this.selected;
 
     this.dispatchEvent(
-      new CustomEvent('facetClick', {
+      new CustomEvent<SmartFacetEvent>('facetClick', {
         detail: {
           smartFacet: this.facetInfo,
           details: this.facetInfo.facets.map(f => ({

src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
 import type { FacetRef, SmartFacet, SmartFacetEvent } from './models';
+import { log } from '../../utils/log';
 
 @customElement('smart-facet-dropdown')
 export class SmartFacetDropdown extends LitElement {
@@ -36,6 +37,7 @@ export class SmartFacetDropdown extends LitElement {
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
           @optionSelected=${this.optionSelected}
+          @click=${this.onDropdownClick}
         >
           <span class="dropdown-label" slot="dropdown-label"
             >${this.labelPrefix ?? nothing} ${displayText}</span
@@ -105,6 +107,19 @@ export class SmartFacetDropdown extends LitElement {
     );
   }
 
+  private onDropdownClick(): void {
+    log('smart dropdown: onDropdownClick', this);
+    this.dispatchEvent(
+      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this })
+    );
+  }
+
+  close(): void {
+    if (this.dropdown) {
+      this.dropdown.open = false;
+    }
+  }
+
   //
   // STYLES
   //

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

@@ -1048,12 +1048,12 @@ export class CollectionBrowserDataSource
     };
     params.uid = await this.requestUID(params, 'hits');
 
-    log('=== FIRING PAGE REQUEST ===', params);
+    // log('=== FIRING PAGE REQUEST ===', params);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
     );
-    log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
+    // log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
     const success = searchResponse?.success;
 
     // This is checking to see if the fetch has been invalidated since it was fired off.