@internetarchive/collection-browser 0.3.7 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (218) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +26 -26
  3. package/.github/workflows/gh-pages-main.yml +39 -39
  4. package/.github/workflows/npm-publish.yml +39 -39
  5. package/.github/workflows/pr-preview.yml +38 -38
  6. package/.husky/pre-commit +4 -4
  7. package/LICENSE +661 -661
  8. package/README.md +83 -83
  9. package/dist/index.d.ts +9 -9
  10. package/dist/index.js +9 -9
  11. package/dist/src/app-root.d.ts +48 -47
  12. package/dist/src/app-root.js +271 -250
  13. package/dist/src/app-root.js.map +1 -1
  14. package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
  15. package/dist/src/assets/img/icons/arrow-left.js +2 -2
  16. package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
  17. package/dist/src/assets/img/icons/arrow-right.js +2 -2
  18. package/dist/src/assets/img/icons/chevron.d.ts +2 -2
  19. package/dist/src/assets/img/icons/chevron.js +2 -2
  20. package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
  21. package/dist/src/assets/img/icons/empty-query.js +2 -2
  22. package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
  23. package/dist/src/assets/img/icons/eye-closed.js +2 -2
  24. package/dist/src/assets/img/icons/eye.d.ts +2 -2
  25. package/dist/src/assets/img/icons/eye.js +2 -2
  26. package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
  27. package/dist/src/assets/img/icons/favorite-filled.js +2 -2
  28. package/dist/src/assets/img/icons/login-required.d.ts +1 -1
  29. package/dist/src/assets/img/icons/login-required.js +2 -2
  30. package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
  31. package/dist/src/assets/img/icons/mediatype/account.js +2 -2
  32. package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
  33. package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
  34. package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
  35. package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
  36. package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
  37. package/dist/src/assets/img/icons/mediatype/data.js +2 -2
  38. package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
  39. package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
  40. package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
  41. package/dist/src/assets/img/icons/mediatype/film.js +2 -2
  42. package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
  43. package/dist/src/assets/img/icons/mediatype/images.js +2 -2
  44. package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
  45. package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
  46. package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
  47. package/dist/src/assets/img/icons/mediatype/software.js +2 -2
  48. package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
  49. package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
  50. package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
  51. package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
  52. package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
  53. package/dist/src/assets/img/icons/mediatype/video.js +2 -2
  54. package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
  55. package/dist/src/assets/img/icons/mediatype/web.js +2 -2
  56. package/dist/src/assets/img/icons/null-result.d.ts +2 -2
  57. package/dist/src/assets/img/icons/null-result.js +2 -2
  58. package/dist/src/assets/img/icons/restricted.d.ts +1 -1
  59. package/dist/src/assets/img/icons/restricted.js +2 -2
  60. package/dist/src/assets/img/icons/reviews.d.ts +1 -1
  61. package/dist/src/assets/img/icons/reviews.js +2 -2
  62. package/dist/src/assets/img/icons/upload.d.ts +1 -1
  63. package/dist/src/assets/img/icons/upload.js +2 -2
  64. package/dist/src/assets/img/icons/views.d.ts +1 -1
  65. package/dist/src/assets/img/icons/views.js +2 -2
  66. package/dist/src/circular-activity-indicator.d.ts +5 -5
  67. package/dist/src/circular-activity-indicator.js +17 -17
  68. package/dist/src/collection-browser.d.ts +278 -246
  69. package/dist/src/collection-browser.js +1105 -1031
  70. package/dist/src/collection-browser.js.map +1 -1
  71. package/dist/src/collection-facets/facet-tombstone-row.d.ts +5 -5
  72. package/dist/src/collection-facets/facet-tombstone-row.js +15 -15
  73. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  74. package/dist/src/collection-facets/facets-template.js +125 -125
  75. package/dist/src/collection-facets/more-facets-content.d.ts +76 -76
  76. package/dist/src/collection-facets/more-facets-content.js +353 -353
  77. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  78. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  79. package/dist/src/collection-facets.d.ts +77 -77
  80. package/dist/src/collection-facets.js +388 -389
  81. package/dist/src/collection-facets.js.map +1 -1
  82. package/dist/src/empty-placeholder.d.ts +11 -11
  83. package/dist/src/empty-placeholder.js +42 -42
  84. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  85. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  86. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  87. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  88. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  89. package/dist/src/mediatype/mediatype-config.js +85 -85
  90. package/dist/src/models.d.ts +103 -103
  91. package/dist/src/models.js +117 -117
  92. package/dist/src/restoration-state-handler.d.ts +46 -46
  93. package/dist/src/restoration-state-handler.js +230 -230
  94. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  95. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  96. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  97. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  98. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  99. package/dist/src/sort-filter-bar/img/list.js +2 -2
  100. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  101. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  102. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  103. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  104. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  105. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  106. package/dist/src/styles/item-image-styles.d.ts +8 -8
  107. package/dist/src/styles/item-image-styles.js +9 -9
  108. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  109. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  110. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  111. package/dist/src/tiles/grid/account-tile.js +20 -20
  112. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  113. package/dist/src/tiles/grid/collection-tile.js +23 -23
  114. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  115. package/dist/src/tiles/grid/item-tile.js +87 -87
  116. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  117. package/dist/src/tiles/grid/tile-stats.js +40 -40
  118. package/dist/src/tiles/image-block.d.ts +17 -17
  119. package/dist/src/tiles/image-block.js +69 -69
  120. package/dist/src/tiles/item-image.d.ts +31 -31
  121. package/dist/src/tiles/item-image.js +103 -103
  122. package/dist/src/tiles/list/account-label.d.ts +1 -1
  123. package/dist/src/tiles/list/account-label.js +6 -6
  124. package/dist/src/tiles/list/date-label.d.ts +1 -1
  125. package/dist/src/tiles/list/date-label.js +12 -12
  126. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  127. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  128. package/dist/src/tiles/list/tile-list-compact.d.ts +21 -21
  129. package/dist/src/tiles/list/tile-list-compact.js +93 -93
  130. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  131. package/dist/src/tiles/list/tile-list.js +275 -272
  132. package/dist/src/tiles/list/tile-list.js.map +1 -1
  133. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  134. package/dist/src/tiles/mediatype-icon.js +47 -47
  135. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  136. package/dist/src/tiles/overlay/icon-overlay.js +30 -30
  137. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  138. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  139. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  140. package/dist/src/tiles/text-snippet-block.js +81 -81
  141. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  142. package/dist/src/tiles/tile-dispatcher.js +128 -128
  143. package/dist/src/utils/analytics-events.d.ts +22 -22
  144. package/dist/src/utils/analytics-events.js +24 -24
  145. package/dist/src/utils/format-count.d.ts +7 -7
  146. package/dist/src/utils/format-count.js +76 -76
  147. package/dist/src/utils/format-date.d.ts +2 -2
  148. package/dist/src/utils/format-date.js +23 -23
  149. package/dist/test/collection-browser.test.d.ts +1 -1
  150. package/dist/test/collection-browser.test.js +583 -444
  151. package/dist/test/collection-browser.test.js.map +1 -1
  152. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  153. package/dist/test/collection-facets/facets-template.test.js +62 -62
  154. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  155. package/dist/test/collection-facets/more-facets-content.test.js +114 -114
  156. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  157. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  158. package/dist/test/collection-facets.test.d.ts +2 -2
  159. package/dist/test/collection-facets.test.js +544 -498
  160. package/dist/test/collection-facets.test.js.map +1 -1
  161. package/dist/test/empty-placeholder.test.d.ts +1 -1
  162. package/dist/test/empty-placeholder.test.js +33 -33
  163. package/dist/test/icon-overlay.test.d.ts +1 -1
  164. package/dist/test/icon-overlay.test.js +24 -24
  165. package/dist/test/image-block.test.d.ts +1 -1
  166. package/dist/test/image-block.test.js +48 -48
  167. package/dist/test/item-image.test.d.ts +1 -1
  168. package/dist/test/item-image.test.js +56 -56
  169. package/dist/test/mediatype-config.test.d.ts +1 -1
  170. package/dist/test/mediatype-config.test.js +16 -16
  171. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  172. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  173. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  174. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  175. package/dist/test/mocks/mock-search-responses.d.ts +10 -8
  176. package/dist/test/mocks/mock-search-responses.js +271 -198
  177. package/dist/test/mocks/mock-search-responses.js.map +1 -1
  178. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  179. package/dist/test/mocks/mock-search-service.js +36 -32
  180. package/dist/test/mocks/mock-search-service.js.map +1 -1
  181. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  182. package/dist/test/restoration-state-handler.test.js +126 -126
  183. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  184. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  185. package/dist/test/text-overlay.test.d.ts +1 -1
  186. package/dist/test/text-overlay.test.js +41 -41
  187. package/dist/test/text-snippet-block.test.d.ts +1 -1
  188. package/dist/test/text-snippet-block.test.js +57 -57
  189. package/dist/test/tile-stats.test.d.ts +1 -1
  190. package/dist/test/tile-stats.test.js +33 -33
  191. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  192. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  193. package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -1
  194. package/dist/test/tiles/list/tile-list-compact.test.js +92 -92
  195. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  196. package/dist/test/tiles/list/tile-list.test.js +96 -67
  197. package/dist/test/tiles/list/tile-list.test.js.map +1 -1
  198. package/dist/test/utils/format-count.test.d.ts +1 -1
  199. package/dist/test/utils/format-count.test.js +23 -23
  200. package/dist/test/utils/format-date.test.d.ts +1 -1
  201. package/dist/test/utils/format-date.test.js +17 -17
  202. package/index.html +24 -24
  203. package/local.archive.org.cert +86 -86
  204. package/local.archive.org.key +27 -27
  205. package/package.json +3 -3
  206. package/renovate.json +6 -6
  207. package/src/app-root.ts +32 -9
  208. package/src/collection-browser.ts +130 -35
  209. package/src/collection-facets.ts +2 -3
  210. package/src/tiles/list/tile-list.ts +6 -2
  211. package/test/collection-browser.test.ts +207 -0
  212. package/test/collection-facets.test.ts +67 -0
  213. package/test/mocks/mock-search-responses.ts +82 -0
  214. package/test/mocks/mock-search-service.ts +6 -0
  215. package/test/tiles/list/tile-list.test.ts +40 -0
  216. package/tsconfig.json +21 -21
  217. package/web-dev-server.config.mjs +30 -30
  218. package/web-test-runner.config.mjs +41 -41
@@ -1,263 +1,263 @@
1
- import { __decorate } from "tslib";
2
- /* eslint-disable dot-notation */
3
- /* eslint-disable lit-a11y/click-events-have-key-events */
4
- import { css, html, LitElement, nothing, } from 'lit';
5
- import { customElement, property, state } from 'lit/decorators.js';
6
- import { AggregationSortType, } from '@internetarchive/search-service';
7
- import { facetTitles, suppressedCollections, } from '../models';
8
- import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
- import './more-facets-pagination';
10
- import './facets-template';
11
- import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
12
- let MoreFacetsContent = class MoreFacetsContent extends LitElement {
13
- constructor() {
14
- super(...arguments);
15
- this.sortedBy = 'count';
16
- this.facetGroup = [];
17
- this.facetGroupTitle = '';
18
- this.pageNumber = 1;
19
- /**
20
- * Facets are loading on popup
21
- */
22
- this.facetsLoading = true;
23
- this.paginationSize = 0;
24
- this.facetsType = 'modal';
25
- this.facetsPerPage = 35;
26
- }
27
- updated(changed) {
28
- if (changed.has('facetKey')) {
29
- this.facetsLoading = true;
30
- this.pageNumber = 1;
31
- this.updateSpecificFacets();
32
- }
33
- if (changed.has('pageNumber')) {
34
- this.facetGroup = this.aggregationFacetGroups;
35
- }
36
- }
37
- firstUpdated() {
38
- this.setupEscapeListeners();
39
- }
40
- /**
41
- * Close more facets modal on Escape click
42
- */
43
- setupEscapeListeners() {
44
- if (this.modalManager) {
45
- document.addEventListener('keydown', (e) => {
46
- var _a;
47
- if (e.key === 'Escape') {
48
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
49
- }
50
- });
51
- }
52
- else {
53
- document.removeEventListener('keydown', () => { });
54
- }
55
- }
56
- /**
57
- * Get specific facets data from search-service API based of currently query params
58
- * - this.aggregations - hold result of search service and being used for further processing.
59
- */
60
- async updateSpecificFacets() {
61
- var _a, _b;
62
- const aggregations = {
63
- simpleParams: [this.facetAggregationKey],
64
- };
65
- const aggregationsSize = 65535; // todo - do we want to have all the records at once?
66
- const params = {
67
- query: this.fullQuery,
68
- aggregations,
69
- aggregationsSize,
70
- rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
71
- };
72
- const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
73
- this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
74
- this.facetGroup = this.aggregationFacetGroups;
75
- this.facetsLoading = false;
76
- }
77
- pageNumberClicked(e) {
78
- var _a, _b;
79
- const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
80
- if (page) {
81
- this.pageNumber = Number(page);
82
- }
83
- (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
84
- category: analyticsCategories.default,
85
- action: analyticsActions.moreFacetsPageChange,
86
- label: `${this.pageNumber}`,
87
- });
88
- }
89
- /**
90
- * Combines the selected facets with the aggregations to create a single list of facets
91
- */
92
- get mergedFacets() {
93
- var _a;
94
- const facetGroups = [];
95
- const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
96
- const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
97
- // if the user selected a facet, but it's not in the aggregation, we add it as-is
98
- if (selectedFacetGroup && !aggregateFacetGroup) {
99
- facetGroups.push(selectedFacetGroup);
100
- return facetGroups;
101
- }
102
- // if we don't have an aggregate facet group, don't add this to the list
103
- if (!aggregateFacetGroup)
104
- return facetGroups;
105
- // start with either the selected group if we have one, or the aggregate group
106
- const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
107
- // attach the counts to the selected buckets
108
- const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
109
- const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
110
- return selectedBucket
111
- ? {
112
- ...bucket,
113
- count: selectedBucket.count,
114
- }
115
- : bucket;
116
- })) !== null && _a !== void 0 ? _a : [];
117
- // append any additional buckets that were not selected
118
- aggregateFacetGroup.buckets.forEach(bucket => {
119
- const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
120
- if (existingBucket)
121
- return;
122
- bucketsWithCount.push(bucket);
123
- });
124
- facetGroup.buckets = bucketsWithCount;
125
- facetGroups.push(facetGroup);
126
- return facetGroups;
127
- }
128
- /**
129
- * Converts the selected facets to a `FacetGroup` array,
130
- * which is easier to work with
131
- */
132
- get selectedFacetGroups() {
133
- if (!this.selectedFacets)
134
- return [];
135
- const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
136
- const option = key;
137
- const title = facetTitles[option];
138
- const buckets = Object.entries(selectedFacets).map(([value, data]) => {
139
- var _a, _b;
140
- let displayText = value;
141
- // for selected languages, we store the language code instead of the
142
- // display name, so look up the name from the mapping
143
- if (option === 'language') {
144
- displayText =
145
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
146
- }
147
- return {
148
- displayText,
149
- key: value,
150
- count: data === null || data === void 0 ? void 0 : data.count,
151
- state: data === null || data === void 0 ? void 0 : data.state,
152
- };
153
- });
154
- return {
155
- title,
156
- key: option,
157
- buckets,
158
- };
159
- });
160
- return facetGroups;
161
- }
162
- /**
163
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
164
- */
165
- get aggregationFacetGroups() {
166
- var _a;
167
- const facetGroups = [];
168
- Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
169
- // the year_histogram data is in a different format so can't be handled here
170
- if (key === 'year_histogram')
171
- return;
172
- const option = key;
173
- this.facetGroupTitle = facetTitles[option];
174
- // sort facets in specific order
175
- let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
176
- ? AggregationSortType.ALPHABETICAL
177
- : AggregationSortType.COUNT);
178
- if (option === 'collection') {
179
- // we are not showing fav- collections or certain deemphasized collections in facets
180
- castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => {
181
- var _a;
182
- const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
183
- return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
184
- });
185
- // asynchronously load the collection name
186
- this.preloadCollectionNames(castedBuckets);
187
- }
188
- // find length and pagination size for modal pagination
189
- const { length } = Object.keys(castedBuckets);
190
- this.paginationSize = Math.ceil(length / this.facetsPerPage);
191
- // render only items which will be visible as per this.facetsPerPage
192
- const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
193
- const facetBucket = bucketsMaxSix.map(bucket => {
194
- var _a, _b;
195
- let bucketKey = bucket.key;
196
- // for languages, we need to search by language code instead of the
197
- // display name, which is what we get from the search engine result
198
- if (option === 'language') {
199
- bucketKey =
200
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
201
- }
202
- return {
203
- displayText: `${bucket.key}`,
204
- key: `${bucketKey}`,
205
- count: bucket.doc_count,
206
- state: 'none',
207
- };
208
- });
209
- const group = {
210
- title: this.facetGroupTitle,
211
- key: option,
212
- buckets: facetBucket,
213
- };
214
- facetGroups.push(group);
215
- });
216
- return facetGroups;
217
- }
218
- /**
219
- * for collections, we need to asynchronously load the collection name
220
- * so we use the `async-collection-name` widget and for the rest, we have a static value to use
221
- *
222
- * @param castedBuckets
223
- */
224
- preloadCollectionNames(castedBuckets) {
225
- var _a;
226
- const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
227
- const collectionIdsArray = Array.from(new Set(collectionIds));
228
- (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
229
- }
230
- get getMoreFacetsTemplate() {
231
- var _a;
1
+ import { __decorate } from "tslib";
2
+ /* eslint-disable dot-notation */
3
+ /* eslint-disable lit-a11y/click-events-have-key-events */
4
+ import { css, html, LitElement, nothing, } from 'lit';
5
+ import { customElement, property, state } from 'lit/decorators.js';
6
+ import { AggregationSortType, } from '@internetarchive/search-service';
7
+ import { facetTitles, suppressedCollections, } from '../models';
8
+ import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
+ import './more-facets-pagination';
10
+ import './facets-template';
11
+ import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
12
+ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.sortedBy = 'count';
16
+ this.facetGroup = [];
17
+ this.facetGroupTitle = '';
18
+ this.pageNumber = 1;
19
+ /**
20
+ * Facets are loading on popup
21
+ */
22
+ this.facetsLoading = true;
23
+ this.paginationSize = 0;
24
+ this.facetsType = 'modal';
25
+ this.facetsPerPage = 35;
26
+ }
27
+ updated(changed) {
28
+ if (changed.has('facetKey')) {
29
+ this.facetsLoading = true;
30
+ this.pageNumber = 1;
31
+ this.updateSpecificFacets();
32
+ }
33
+ if (changed.has('pageNumber')) {
34
+ this.facetGroup = this.aggregationFacetGroups;
35
+ }
36
+ }
37
+ firstUpdated() {
38
+ this.setupEscapeListeners();
39
+ }
40
+ /**
41
+ * Close more facets modal on Escape click
42
+ */
43
+ setupEscapeListeners() {
44
+ if (this.modalManager) {
45
+ document.addEventListener('keydown', (e) => {
46
+ var _a;
47
+ if (e.key === 'Escape') {
48
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
49
+ }
50
+ });
51
+ }
52
+ else {
53
+ document.removeEventListener('keydown', () => { });
54
+ }
55
+ }
56
+ /**
57
+ * Get specific facets data from search-service API based of currently query params
58
+ * - this.aggregations - hold result of search service and being used for further processing.
59
+ */
60
+ async updateSpecificFacets() {
61
+ var _a, _b;
62
+ const aggregations = {
63
+ simpleParams: [this.facetAggregationKey],
64
+ };
65
+ const aggregationsSize = 65535; // todo - do we want to have all the records at once?
66
+ const params = {
67
+ query: this.fullQuery,
68
+ aggregations,
69
+ aggregationsSize,
70
+ rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
71
+ };
72
+ const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
73
+ this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
74
+ this.facetGroup = this.aggregationFacetGroups;
75
+ this.facetsLoading = false;
76
+ }
77
+ pageNumberClicked(e) {
78
+ var _a, _b;
79
+ const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
80
+ if (page) {
81
+ this.pageNumber = Number(page);
82
+ }
83
+ (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
84
+ category: analyticsCategories.default,
85
+ action: analyticsActions.moreFacetsPageChange,
86
+ label: `${this.pageNumber}`,
87
+ });
88
+ }
89
+ /**
90
+ * Combines the selected facets with the aggregations to create a single list of facets
91
+ */
92
+ get mergedFacets() {
93
+ var _a;
94
+ const facetGroups = [];
95
+ const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
96
+ const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
97
+ // if the user selected a facet, but it's not in the aggregation, we add it as-is
98
+ if (selectedFacetGroup && !aggregateFacetGroup) {
99
+ facetGroups.push(selectedFacetGroup);
100
+ return facetGroups;
101
+ }
102
+ // if we don't have an aggregate facet group, don't add this to the list
103
+ if (!aggregateFacetGroup)
104
+ return facetGroups;
105
+ // start with either the selected group if we have one, or the aggregate group
106
+ const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
107
+ // attach the counts to the selected buckets
108
+ const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
109
+ const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
110
+ return selectedBucket
111
+ ? {
112
+ ...bucket,
113
+ count: selectedBucket.count,
114
+ }
115
+ : bucket;
116
+ })) !== null && _a !== void 0 ? _a : [];
117
+ // append any additional buckets that were not selected
118
+ aggregateFacetGroup.buckets.forEach(bucket => {
119
+ const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
120
+ if (existingBucket)
121
+ return;
122
+ bucketsWithCount.push(bucket);
123
+ });
124
+ facetGroup.buckets = bucketsWithCount;
125
+ facetGroups.push(facetGroup);
126
+ return facetGroups;
127
+ }
128
+ /**
129
+ * Converts the selected facets to a `FacetGroup` array,
130
+ * which is easier to work with
131
+ */
132
+ get selectedFacetGroups() {
133
+ if (!this.selectedFacets)
134
+ return [];
135
+ const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
136
+ const option = key;
137
+ const title = facetTitles[option];
138
+ const buckets = Object.entries(selectedFacets).map(([value, data]) => {
139
+ var _a, _b;
140
+ let displayText = value;
141
+ // for selected languages, we store the language code instead of the
142
+ // display name, so look up the name from the mapping
143
+ if (option === 'language') {
144
+ displayText =
145
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
146
+ }
147
+ return {
148
+ displayText,
149
+ key: value,
150
+ count: data === null || data === void 0 ? void 0 : data.count,
151
+ state: data === null || data === void 0 ? void 0 : data.state,
152
+ };
153
+ });
154
+ return {
155
+ title,
156
+ key: option,
157
+ buckets,
158
+ };
159
+ });
160
+ return facetGroups;
161
+ }
162
+ /**
163
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
164
+ */
165
+ get aggregationFacetGroups() {
166
+ var _a;
167
+ const facetGroups = [];
168
+ Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
169
+ // the year_histogram data is in a different format so can't be handled here
170
+ if (key === 'year_histogram')
171
+ return;
172
+ const option = key;
173
+ this.facetGroupTitle = facetTitles[option];
174
+ // sort facets in specific order
175
+ let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
176
+ ? AggregationSortType.ALPHABETICAL
177
+ : AggregationSortType.COUNT);
178
+ if (option === 'collection') {
179
+ // we are not showing fav- collections or certain deemphasized collections in facets
180
+ castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => {
181
+ var _a;
182
+ const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
183
+ return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
184
+ });
185
+ // asynchronously load the collection name
186
+ this.preloadCollectionNames(castedBuckets);
187
+ }
188
+ // find length and pagination size for modal pagination
189
+ const { length } = Object.keys(castedBuckets);
190
+ this.paginationSize = Math.ceil(length / this.facetsPerPage);
191
+ // render only items which will be visible as per this.facetsPerPage
192
+ const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
193
+ const facetBucket = bucketsMaxSix.map(bucket => {
194
+ var _a, _b;
195
+ let bucketKey = bucket.key;
196
+ // for languages, we need to search by language code instead of the
197
+ // display name, which is what we get from the search engine result
198
+ if (option === 'language') {
199
+ bucketKey =
200
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
201
+ }
202
+ return {
203
+ displayText: `${bucket.key}`,
204
+ key: `${bucketKey}`,
205
+ count: bucket.doc_count,
206
+ state: 'none',
207
+ };
208
+ });
209
+ const group = {
210
+ title: this.facetGroupTitle,
211
+ key: option,
212
+ buckets: facetBucket,
213
+ };
214
+ facetGroups.push(group);
215
+ });
216
+ return facetGroups;
217
+ }
218
+ /**
219
+ * for collections, we need to asynchronously load the collection name
220
+ * so we use the `async-collection-name` widget and for the rest, we have a static value to use
221
+ *
222
+ * @param castedBuckets
223
+ */
224
+ preloadCollectionNames(castedBuckets) {
225
+ var _a;
226
+ const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
227
+ const collectionIdsArray = Array.from(new Set(collectionIds));
228
+ (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
229
+ }
230
+ get getMoreFacetsTemplate() {
231
+ var _a;
232
232
  return html `
233
233
  <facets-template
234
234
  .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
235
235
  .selectedFacets=${this.selectedFacets}
236
236
  .renderOn=${'modal'}
237
237
  .collectionNameCache=${this.collectionNameCache}
238
- @selectedFacetsChanged=${(e) => {
239
- this.selectedFacets = e.detail;
238
+ @selectedFacetsChanged=${(e) => {
239
+ this.selectedFacets = e.detail;
240
240
  }}
241
241
  ></facets-template>
242
- `;
243
- }
244
- get loaderTemplate() {
242
+ `;
243
+ }
244
+ get loaderTemplate() {
245
245
  return html `<div class="facets-loader">
246
246
  <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
247
- </div> `;
248
- }
249
- // render pagination if more then 1 page
250
- get facetsPaginationTemplate() {
251
- return this.paginationSize > 1
247
+ </div> `;
248
+ }
249
+ // render pagination if more then 1 page
250
+ get facetsPaginationTemplate() {
251
+ return this.paginationSize > 1
252
252
  ? html `<more-facets-pagination
253
253
  .size=${this.paginationSize}
254
254
  .currentPage=${1}
255
255
  @pageNumberClicked=${this.pageNumberClicked}
256
- ></more-facets-pagination>`
257
- : nothing;
258
- }
259
- get footerTemplate() {
260
- if (this.paginationSize > 0) {
256
+ ></more-facets-pagination>`
257
+ : nothing;
258
+ }
259
+ get footerTemplate() {
260
+ if (this.paginationSize > 0) {
261
261
  return html `${this.facetsPaginationTemplate}
262
262
  <div class="footer">
263
263
  <button
@@ -274,19 +274,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
274
274
  >
275
275
  Apply filters
276
276
  </button>
277
- </div> `;
278
- }
279
- return nothing;
280
- }
281
- sortFacetAggregation() {
282
- this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
283
- this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
284
- }
285
- get getModalHeaderTemplate() {
286
- const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
287
- const image = this.sortedBy === 'alpha'
288
- ? 'https://archive.org/images/filter-alpha.png'
289
- : 'https://archive.org/images/filter-count.png';
277
+ </div> `;
278
+ }
279
+ return nothing;
280
+ }
281
+ sortFacetAggregation() {
282
+ this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
283
+ this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
284
+ }
285
+ get getModalHeaderTemplate() {
286
+ const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
287
+ const image = this.sortedBy === 'alpha'
288
+ ? 'https://archive.org/images/filter-alpha.png'
289
+ : 'https://archive.org/images/filter-count.png';
290
290
  return html `<span class="sr-only">More facets for:</span>
291
291
  <span class="title">
292
292
  ${this.facetGroupTitle}
@@ -298,12 +298,12 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
298
298
  title=${title}
299
299
  alt="sort facets"
300
300
  />
301
- </span> `;
302
- }
303
- render() {
301
+ </span> `;
302
+ }
303
+ render() {
304
304
  return html `
305
- ${this.facetsLoading
306
- ? this.loaderTemplate
305
+ ${this.facetsLoading
306
+ ? this.loaderTemplate
307
307
  : html `
308
308
  <section id="more-facets">
309
309
  <div class="header-content">${this.getModalHeaderTemplate}</div>
@@ -311,34 +311,34 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
311
311
  ${this.footerTemplate}
312
312
  </section>
313
313
  `}
314
- `;
315
- }
316
- applySearchFacetsClicked() {
317
- var _a, _b;
318
- const event = new CustomEvent('facetsChanged', {
319
- detail: this.selectedFacets,
320
- bubbles: true,
321
- composed: true,
322
- });
323
- this.dispatchEvent(event);
324
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
325
- (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
326
- category: analyticsCategories.default,
327
- action: `${analyticsActions.applyMoreFacetsModal}`,
328
- label: `${this.facetKey}`,
329
- });
330
- }
331
- cancelClick() {
332
- var _a, _b;
333
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
334
- (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
335
- category: analyticsCategories.default,
336
- action: analyticsActions.closeMoreFacetsModal,
337
- label: `${this.facetKey}`,
338
- });
339
- }
340
- static get styles() {
341
- const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
314
+ `;
315
+ }
316
+ applySearchFacetsClicked() {
317
+ var _a, _b;
318
+ const event = new CustomEvent('facetsChanged', {
319
+ detail: this.selectedFacets,
320
+ bubbles: true,
321
+ composed: true,
322
+ });
323
+ this.dispatchEvent(event);
324
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
325
+ (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
326
+ category: analyticsCategories.default,
327
+ action: `${analyticsActions.applyMoreFacetsModal}`,
328
+ label: `${this.facetKey}`,
329
+ });
330
+ }
331
+ cancelClick() {
332
+ var _a, _b;
333
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
334
+ (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
335
+ category: analyticsCategories.default,
336
+ action: analyticsActions.closeMoreFacetsModal,
337
+ label: `${this.facetKey}`,
338
+ });
339
+ }
340
+ static get styles() {
341
+ const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
342
342
  return css `
343
343
  @media (max-width: 560px) {
344
344
  section#more-facets {
@@ -424,65 +424,65 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
424
424
  vertical-align: baseline;
425
425
  cursor: pointer;
426
426
  }
427
- `;
428
- }
429
- };
430
- __decorate([
431
- property({ type: String })
432
- ], MoreFacetsContent.prototype, "facetKey", void 0);
433
- __decorate([
434
- property({ type: String })
435
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
436
- __decorate([
437
- property({ type: String })
438
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
439
- __decorate([
440
- property({ type: Object })
441
- ], MoreFacetsContent.prototype, "modalManager", void 0);
442
- __decorate([
443
- property({ type: Object })
444
- ], MoreFacetsContent.prototype, "searchService", void 0);
445
- __decorate([
446
- property({ type: String })
447
- ], MoreFacetsContent.prototype, "searchType", void 0);
448
- __decorate([
449
- property({ type: Object })
450
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
451
- __decorate([
452
- property({ type: Object })
453
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
454
- __decorate([
455
- property({ type: Object })
456
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
457
- __decorate([
458
- property({ type: String })
459
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
460
- __decorate([
461
- property({ type: Object, attribute: false })
462
- ], MoreFacetsContent.prototype, "analyticsHandler", void 0);
463
- __decorate([
464
- state()
465
- ], MoreFacetsContent.prototype, "aggregations", void 0);
466
- __decorate([
467
- state()
468
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
469
- __decorate([
470
- state()
471
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
472
- __decorate([
473
- state()
474
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
475
- __decorate([
476
- state()
477
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
478
- __decorate([
479
- state()
480
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
481
- __decorate([
482
- state()
483
- ], MoreFacetsContent.prototype, "facetsType", void 0);
484
- MoreFacetsContent = __decorate([
485
- customElement('more-facets-content')
486
- ], MoreFacetsContent);
487
- export { MoreFacetsContent };
427
+ `;
428
+ }
429
+ };
430
+ __decorate([
431
+ property({ type: String })
432
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
433
+ __decorate([
434
+ property({ type: String })
435
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
436
+ __decorate([
437
+ property({ type: String })
438
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
439
+ __decorate([
440
+ property({ type: Object })
441
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
442
+ __decorate([
443
+ property({ type: Object })
444
+ ], MoreFacetsContent.prototype, "searchService", void 0);
445
+ __decorate([
446
+ property({ type: String })
447
+ ], MoreFacetsContent.prototype, "searchType", void 0);
448
+ __decorate([
449
+ property({ type: Object })
450
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
451
+ __decorate([
452
+ property({ type: Object })
453
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
454
+ __decorate([
455
+ property({ type: Object })
456
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
457
+ __decorate([
458
+ property({ type: String })
459
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
460
+ __decorate([
461
+ property({ type: Object, attribute: false })
462
+ ], MoreFacetsContent.prototype, "analyticsHandler", void 0);
463
+ __decorate([
464
+ state()
465
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
466
+ __decorate([
467
+ state()
468
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
469
+ __decorate([
470
+ state()
471
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
472
+ __decorate([
473
+ state()
474
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
475
+ __decorate([
476
+ state()
477
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
478
+ __decorate([
479
+ state()
480
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
481
+ __decorate([
482
+ state()
483
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
484
+ MoreFacetsContent = __decorate([
485
+ customElement('more-facets-content')
486
+ ], MoreFacetsContent);
487
+ export { MoreFacetsContent };
488
488
  //# sourceMappingURL=more-facets-content.js.map