@internetarchive/collection-browser 2.6.5 → 2.6.6-alpha.1

package/dist/src/collection-facets/smart-facet-bar.d.ts

@@ -1,8 +1,12 @@
 import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
 import type { CollectionTitles } from '../data-source/models';
+import type { Aggregation } from '@internetarchive/search-service';
+import './smart-facet-button';
 export declare class SmartFacetBar extends LitElement {
-    /** The collection name cache for converting collection identifiers to titles */
+    aggregations?: Record<string, Aggregation>;
+    /** The map from collection identifiers to their titles */
     collectionTitles?: CollectionTitles;
     render(): TemplateResult<1>;
+    private get facetsToDisplay();
     static get styles(): CSSResultGroup;
 }

package/dist/src/collection-facets/smart-facet-bar.js

@@ -1,22 +1,70 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
+import { map } from 'lit/directives/map.js';
 import { customElement, property } from 'lit/decorators.js';
+import './smart-facet-button';
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
 let SmartFacetBar = class SmartFacetBar extends LitElement {
     //
     // COMPONENT LIFECYCLE METHODS
     //
     render() {
-        return html ``;
+        return html `
+      <div id="smart-facets-container">
+        ${map(this.facetsToDisplay, facet => html `
+          <smart-facet-button
+            .facetType=${facet.facetType}
+            .bucket=${facet.bucket}
+          ></smart-facet-button>  
+        `)}
+      </div>
+    `;
+    }
+    //
+    // OTHER METHODS
+    //
+    get facetsToDisplay() {
+        if (!this.aggregations)
+            return [];
+        const facets = [];
+        for (const [key, agg] of Object.entries(this.aggregations)) {
+            if (agg.buckets.length === 0)
+                continue;
+            if (['lending', 'year_histogram'].includes(key))
+                continue;
+            if (typeof agg.buckets[0] === 'number')
+                continue;
+            const buckets = agg.buckets;
+            facets.push({
+                facetType: key,
+                bucket: {
+                    key: buckets[0].key.toString(),
+                    displayText: capitalize(buckets[0].key.toString()),
+                    count: buckets[0].doc_count,
+                    state: 'none',
+                }
+            });
+        }
+        return facets;
     }
     //
     // STYLES
     //
     static get styles() {
         return css `
-      
+      #smart-facets-container {
+        display: flex;
+        column-gap: 5px;
+        padding: 10px 0;
+      }
     `;
     }
 };
+__decorate([
+    property({ type: Object })
+], SmartFacetBar.prototype, "aggregations", void 0);
 __decorate([
     property({ type: Object })
 ], SmartFacetBar.prototype, "collectionTitles", void 0);

package/dist/src/collection-facets/smart-facet-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../src/collection-facets/smart-facet-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAIX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAK3C,EAAE;IACF,8BAA8B;IAC9B,EAAE;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,EAAE;IACF,SAAS;IACT,EAAE;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAnBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACS;AAHzB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAsBzB;SAtBY,aAAa","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { CollectionTitles } from '../data-source/models';\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n    /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html``;\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      \n    `;\n  }\n}\n"]}
+{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../src/collection-facets/smart-facet-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAIX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK5D,OAAO,sBAAsB,CAAC;AAO9B,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC;AAGD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAO3C,EAAE;IACF,8BAA8B;IAC9B,EAAE;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;yBAExB,KAAK,CAAC,SAAS;sBAClB,KAAK,CAAC,MAAM;;SAEzB,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED,EAAE;IACF,gBAAgB;IAChB,EAAE;IAEF,IAAY,eAAe;QACzB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO,EAAE,CAAC;QAElC,MAAM,MAAM,GAAuB,EAAE,CAAC;QACtC,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YAC1D,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,SAAS;YACvC,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAAE,SAAS;YAC1D,IAAI,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;gBAAE,SAAS;YAEjD,MAAM,OAAO,GAAG,GAAG,CAAC,OAAmB,CAAC;YACxC,MAAM,CAAC,IAAI,CAAC;gBACV,SAAS,EAAE,GAAkB;gBAC7B,MAAM,EAAE;oBACN,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE;oBAC9B,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;oBAClD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;oBAC3B,KAAK,EAAE,MAAM;iBACd;aACF,CAAC,CAAC;SACJ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,EAAE;IACF,SAAS;IACT,EAAE;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAhE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4C;AAIvE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACS;AALzB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAiEzB;SAjEY,aAAa","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { CollectionTitles } from '../data-source/models';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { FacetBucket, FacetOption } from '../models';\n\nimport './smart-facet-button';\n\ninterface SmartFacetBucket {\n  facetType: FacetOption;\n  bucket: FacetBucket;\n}\n\nfunction capitalize(str: string) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  /** The map from collection identifiers to their titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html`\n      <div id=\"smart-facets-container\">\n        ${map(this.facetsToDisplay, facet => html`\n          <smart-facet-button\n            .facetType=${facet.facetType}\n            .bucket=${facet.bucket}\n          ></smart-facet-button>  \n        `)}\n      </div>\n    `;\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private get facetsToDisplay(): SmartFacetBucket[] {\n    if (!this.aggregations) return [];\n\n    const facets: SmartFacetBucket[] = [];\n    for (const [key, agg] of Object.entries(this.aggregations)) {\n      if (agg.buckets.length === 0) continue;\n      if (['lending', 'year_histogram'].includes(key)) continue;\n      if (typeof agg.buckets[0] === 'number') continue;\n\n      const buckets = agg.buckets as Bucket[];\n      facets.push({\n        facetType: key as FacetOption,\n        bucket: {\n          key: buckets[0].key.toString(),\n          displayText: capitalize(buckets[0].key.toString()),\n          count: buckets[0].doc_count,\n          state: 'none',\n        }\n      });\n    }\n\n    return facets;\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #smart-facets-container {\n        display: flex;\n        column-gap: 5px;\n        padding: 10px 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/smart-facet-button.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, TemplateResult, CSSResultGroup, nothing } from 'lit';
+import type { FacetBucket, FacetOption } from '../models';
+export declare class SmartFacetButton extends LitElement {
+    facetType?: FacetOption;
+    bucket?: FacetBucket;
+    render(): TemplateResult<1> | typeof nothing;
+    private get href();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/collection-facets/smart-facet-button.js

@@ -0,0 +1,55 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let SmartFacetButton = class SmartFacetButton extends LitElement {
+    //
+    // COMPONENT LIFECYCLE METHODS
+    //
+    render() {
+        var _a, _b, _c;
+        const displayText = (_b = (_a = this.bucket) === null || _a === void 0 ? void 0 : _a.displayText) !== null && _b !== void 0 ? _b : (_c = this.bucket) === null || _c === void 0 ? void 0 : _c.key;
+        if (!displayText)
+            return nothing;
+        return html `
+      <a class="smart-facet-button" href=${this.href}>
+        ${displayText}
+      </a>
+    `;
+    }
+    //
+    // OTHER METHODS
+    //
+    get href() {
+        var _a;
+        const url = new URL(window.location.href);
+        url.searchParams.append('and[]', `${this.facetType}:"${(_a = this.bucket) === null || _a === void 0 ? void 0 : _a.key}"`);
+        return url.toString();
+    }
+    //
+    // STYLES
+    //
+    static get styles() {
+        return css `
+      .smart-facet-button {
+        padding: 5px 10px;
+        border-radius: 15px;
+        background: #194880;
+        color: white;
+        font-size: 1.4rem;
+        font-family: inherit;
+        text-decoration: none;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], SmartFacetButton.prototype, "facetType", void 0);
+__decorate([
+    property({ type: Object })
+], SmartFacetButton.prototype, "bucket", void 0);
+SmartFacetButton = __decorate([
+    customElement('smart-facet-button')
+], SmartFacetButton);
+export { SmartFacetButton };
+//# sourceMappingURL=smart-facet-button.js.map

package/dist/src/collection-facets/smart-facet-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-facet-button.js","sourceRoot":"","sources":["../../../src/collection-facets/smart-facet-button.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAK9C,EAAE;IACF,8BAA8B;IAC9B,EAAE;IAEF,MAAM;;QACJ,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,mCAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,GAAG,CAAC;QACjE,IAAI,CAAC,WAAW;YAAE,OAAO,OAAO,CAAC;QAEjC,OAAO,IAAI,CAAA;2CAC4B,IAAI,CAAC,IAAI;UAC1C,WAAW;;KAEhB,CAAC;IACJ,CAAC;IAED,EAAE;IACF,gBAAgB;IAChB,EAAE;IAEF,IAAY,IAAI;;QACd,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,KAAK,MAAA,IAAI,CAAC,MAAM,0CAAE,GAAG,GAAG,CAAC,CAAC;QAC5E,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IAED,EAAE;IACF,SAAS;IACT,EAAE;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;KAUT,CAAC;IACJ,CAAC;CACF,CAAA;AA9C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AAHtC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+C5B;SA/CY,gBAAgB","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { FacetBucket, FacetOption } from '../models';\n\n@customElement('smart-facet-button')\nexport class SmartFacetButton extends LitElement {\n  @property({ type: String }) facetType?: FacetOption;\n\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    const displayText = this.bucket?.displayText ?? this.bucket?.key;\n    if (!displayText) return nothing;\n\n    return html`\n      <a class=\"smart-facet-button\" href=${this.href}>\n        ${displayText}\n      </a>\n    `;\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private get href(): string {\n    const url = new URL(window.location.href);\n    url.searchParams.append('and[]', `${this.facetType}:\"${this.bucket?.key}\"`);\n    return url.toString();\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .smart-facet-button {\n        padding: 5px 10px;\n        border-radius: 15px;\n        background: #194880;\n        color: white;\n        font-size: 1.4rem;\n        font-family: inherit;\n        text-decoration: none;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/smart-facet-dropdown.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=smart-facet-dropdown.js.map

package/dist/src/collection-facets/smart-facet-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-facet-dropdown.js","sourceRoot":"","sources":["../../../src/collection-facets/smart-facet-dropdown.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.6.5",
+  "version": "2.6.6-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -31,7 +31,7 @@
     "@internetarchive/ia-dropdown": "^1.3.8",
     "@internetarchive/infinite-scroller": "1.0.1",
     "@internetarchive/modal-manager": "^0.2.8",
-    "@internetarchive/search-service": "^1.3.2",
+    "@internetarchive/search-service": "1.3.4-alpha.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",

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

@@ -6,12 +6,28 @@ import {
   CSSResultGroup,
   nothing,
 } from 'lit';
+import { map } from 'lit/directives/map.js';
 import { customElement, property } from 'lit/decorators.js';
 import type { CollectionTitles } from '../data-source/models';
+import type { Aggregation, Bucket } from '@internetarchive/search-service';
+import type { FacetBucket, FacetOption } from '../models';
+
+import './smart-facet-button';
+
+interface SmartFacetBucket {
+  facetType: FacetOption;
+  bucket: FacetBucket;
+}
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 
 @customElement('smart-facet-bar')
 export class SmartFacetBar extends LitElement {
-    /** The collection name cache for converting collection identifiers to titles */
+  @property({ type: Object }) aggregations?: Record<string, Aggregation>;
+
+  /** The map from collection identifiers to their titles */
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
 
@@ -20,7 +36,44 @@ export class SmartFacetBar extends LitElement {
   //
 
   render() {
-    return html``;
+    return html`
+      <div id="smart-facets-container">
+        ${map(this.facetsToDisplay, facet => html`
+          <smart-facet-button
+            .facetType=${facet.facetType}
+            .bucket=${facet.bucket}
+          ></smart-facet-button>  
+        `)}
+      </div>
+    `;
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private get facetsToDisplay(): SmartFacetBucket[] {
+    if (!this.aggregations) return [];
+
+    const facets: SmartFacetBucket[] = [];
+    for (const [key, agg] of Object.entries(this.aggregations)) {
+      if (agg.buckets.length === 0) continue;
+      if (['lending', 'year_histogram'].includes(key)) continue;
+      if (typeof agg.buckets[0] === 'number') continue;
+
+      const buckets = agg.buckets as Bucket[];
+      facets.push({
+        facetType: key as FacetOption,
+        bucket: {
+          key: buckets[0].key.toString(),
+          displayText: capitalize(buckets[0].key.toString()),
+          count: buckets[0].doc_count,
+          state: 'none',
+        }
+      });
+    }
+
+    return facets;
   }
 
   //
@@ -29,7 +82,11 @@ export class SmartFacetBar extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      
+      #smart-facets-container {
+        display: flex;
+        column-gap: 5px;
+        padding: 10px 0;
+      }
     `;
   }
 }

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

@@ -0,0 +1,60 @@
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { FacetBucket, FacetOption } from '../models';
+
+@customElement('smart-facet-button')
+export class SmartFacetButton extends LitElement {
+  @property({ type: String }) facetType?: FacetOption;
+
+  @property({ type: Object }) bucket?: FacetBucket;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    const displayText = this.bucket?.displayText ?? this.bucket?.key;
+    if (!displayText) return nothing;
+
+    return html`
+      <a class="smart-facet-button" href=${this.href}>
+        ${displayText}
+      </a>
+    `;
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private get href(): string {
+    const url = new URL(window.location.href);
+    url.searchParams.append('and[]', `${this.facetType}:"${this.bucket?.key}"`);
+    return url.toString();
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .smart-facet-button {
+        padding: 5px 10px;
+        border-radius: 15px;
+        background: #194880;
+        color: white;
+        font-size: 1.4rem;
+        font-family: inherit;
+        text-decoration: none;
+      }
+    `;
+  }
+}