@internetarchive/collection-browser 0.3.0-alpha.4 → 0.3.0

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 (216) 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 +43 -42
  12. package/dist/src/app-root.js +308 -247
  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 +234 -235
  69. package/dist/src/collection-browser.js +1027 -1032
  70. package/dist/src/collection-browser.js.map +1 -1
  71. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  72. package/dist/src/collection-facets/facets-template.js +139 -131
  73. package/dist/src/collection-facets/facets-template.js.map +1 -1
  74. package/dist/src/collection-facets/facets-util.d.ts +10 -10
  75. package/dist/src/collection-facets/facets-util.js +19 -19
  76. package/dist/src/collection-facets/more-facets-content.d.ts +74 -84
  77. package/dist/src/collection-facets/more-facets-content.js +331 -354
  78. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  79. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  80. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  81. package/dist/src/collection-facets.d.ts +71 -71
  82. package/dist/src/collection-facets.js +331 -325
  83. package/dist/src/collection-facets.js.map +1 -1
  84. package/dist/src/empty-placeholder.d.ts +11 -11
  85. package/dist/src/empty-placeholder.js +42 -42
  86. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  87. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  88. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  89. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  90. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  91. package/dist/src/mediatype/mediatype-config.js +85 -85
  92. package/dist/src/models.d.ts +89 -90
  93. package/dist/src/models.js +85 -85
  94. package/dist/src/models.js.map +1 -1
  95. package/dist/src/restoration-state-handler.d.ts +45 -38
  96. package/dist/src/restoration-state-handler.js +219 -202
  97. package/dist/src/restoration-state-handler.js.map +1 -1
  98. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  99. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  100. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  101. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  102. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  103. package/dist/src/sort-filter-bar/img/list.js +2 -2
  104. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  105. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  106. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  107. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  108. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  109. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  110. package/dist/src/styles/item-image-styles.d.ts +8 -8
  111. package/dist/src/styles/item-image-styles.js +9 -9
  112. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  113. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  114. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  115. package/dist/src/tiles/grid/account-tile.js +20 -20
  116. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  117. package/dist/src/tiles/grid/collection-tile.js +23 -23
  118. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  119. package/dist/src/tiles/grid/item-tile.js +87 -87
  120. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  121. package/dist/src/tiles/grid/tile-stats.js +35 -35
  122. package/dist/src/tiles/image-block.d.ts +17 -17
  123. package/dist/src/tiles/image-block.js +73 -73
  124. package/dist/src/tiles/item-image.d.ts +31 -31
  125. package/dist/src/tiles/item-image.js +103 -103
  126. package/dist/src/tiles/list/account-label.d.ts +1 -1
  127. package/dist/src/tiles/list/account-label.js +6 -6
  128. package/dist/src/tiles/list/date-label.d.ts +1 -1
  129. package/dist/src/tiles/list/date-label.js +12 -12
  130. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  131. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  132. package/dist/src/tiles/list/tile-list-compact.d.ts +20 -20
  133. package/dist/src/tiles/list/tile-list-compact.js +87 -87
  134. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  135. package/dist/src/tiles/list/tile-list.js +263 -263
  136. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  137. package/dist/src/tiles/mediatype-icon.js +47 -47
  138. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  139. package/dist/src/tiles/overlay/icon-overlay.js +31 -31
  140. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  141. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  142. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  143. package/dist/src/tiles/text-snippet-block.js +81 -81
  144. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  145. package/dist/src/tiles/tile-dispatcher.js +128 -128
  146. package/dist/src/utils/analytics-events.d.ts +18 -18
  147. package/dist/src/utils/analytics-events.js +20 -20
  148. package/dist/src/utils/format-count.d.ts +7 -7
  149. package/dist/src/utils/format-count.js +75 -75
  150. package/dist/src/utils/format-date.d.ts +2 -2
  151. package/dist/src/utils/format-date.js +23 -23
  152. package/dist/test/collection-browser.test.d.ts +1 -1
  153. package/dist/test/collection-browser.test.js +318 -318
  154. package/dist/test/collection-browser.test.js.map +1 -1
  155. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  156. package/dist/test/collection-facets/facets-template.test.js +62 -62
  157. package/dist/test/collection-facets/facets-util.test.d.ts +1 -1
  158. package/dist/test/collection-facets/facets-util.test.js +12 -12
  159. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  160. package/dist/test/collection-facets/more-facets-content.test.js +91 -91
  161. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  162. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  163. package/dist/test/collection-facets.test.d.ts +2 -2
  164. package/dist/test/collection-facets.test.js +182 -182
  165. package/dist/test/empty-placeholder.test.d.ts +1 -1
  166. package/dist/test/empty-placeholder.test.js +33 -33
  167. package/dist/test/icon-overlay.test.d.ts +1 -1
  168. package/dist/test/icon-overlay.test.js +24 -24
  169. package/dist/test/item-image.test.d.ts +1 -1
  170. package/dist/test/item-image.test.js +56 -56
  171. package/dist/test/mediatype-config.test.d.ts +1 -1
  172. package/dist/test/mediatype-config.test.js +16 -16
  173. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  174. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  175. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  176. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  177. package/dist/test/mocks/mock-search-responses.d.ts +5 -5
  178. package/dist/test/mocks/mock-search-responses.js +103 -103
  179. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  180. package/dist/test/mocks/mock-search-service.js +25 -25
  181. package/dist/test/restoration-state-handler.test.d.ts +1 -0
  182. package/dist/test/restoration-state-handler.test.js +118 -0
  183. package/dist/test/restoration-state-handler.test.js.map +1 -0
  184. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  185. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  186. package/dist/test/text-overlay.test.d.ts +1 -1
  187. package/dist/test/text-overlay.test.js +41 -41
  188. package/dist/test/text-snippet-block.test.d.ts +1 -1
  189. package/dist/test/text-snippet-block.test.js +57 -57
  190. package/dist/test/tile-stats.test.d.ts +1 -1
  191. package/dist/test/tile-stats.test.js +33 -33
  192. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  193. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  194. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  195. package/dist/test/tiles/list/tile-list.test.js +36 -36
  196. package/dist/test/utils/format-count.test.d.ts +1 -1
  197. package/dist/test/utils/format-count.test.js +23 -23
  198. package/dist/test/utils/format-date.test.d.ts +1 -1
  199. package/dist/test/utils/format-date.test.js +17 -17
  200. package/index.html +24 -24
  201. package/local.archive.org.cert +86 -86
  202. package/local.archive.org.key +27 -27
  203. package/package.json +115 -115
  204. package/renovate.json +6 -6
  205. package/src/app-root.ts +106 -41
  206. package/src/collection-browser.ts +2 -9
  207. package/src/collection-facets/facets-template.ts +14 -6
  208. package/src/collection-facets/more-facets-content.ts +3 -33
  209. package/src/collection-facets.ts +12 -6
  210. package/src/models.ts +0 -2
  211. package/src/restoration-state-handler.ts +45 -11
  212. package/test/collection-browser.test.ts +2 -2
  213. package/test/restoration-state-handler.test.ts +176 -0
  214. package/tsconfig.json +21 -21
  215. package/web-dev-server.config.mjs +30 -30
  216. package/web-test-runner.config.mjs +41 -41
@@ -1,276 +1,253 @@
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 { SearchType, AggregationSortType, } from '@internetarchive/search-service';
7
- import { facetTitles, } from '../models';
8
- import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
- import './more-facets-pagination';
10
- import './facets-template';
11
- let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
- constructor() {
13
- super(...arguments);
14
- this.sortedBy = 'count'; // count | alpha
15
- this.facetGroup = [];
16
- this.facetGroupTitle = '';
17
- this.pageNumber = 1;
18
- /**
19
- * Facets are loading on popup
20
- */
21
- this.facetsLoading = true;
22
- this.paginationSize = 0;
23
- this.facetsType = 'modal';
24
- this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
25
- }
26
- updated(changed) {
27
- if (changed.has('facetKey')) {
28
- this.facetsLoading = true;
29
- this.pageNumber = 1;
30
- this.updateSpecificFacets();
31
- }
32
- if (changed.has('pageNumber')) {
33
- this.facetGroup = this.aggregationFacetGroups;
34
- }
35
- }
36
- firstUpdated() {
37
- this.setupEscapeListeners();
38
- }
39
- /**
40
- * Close more facets modal on Escape click
41
- */
42
- setupEscapeListeners() {
43
- if (this.modalManager) {
44
- document.addEventListener('keydown', (e) => {
45
- var _a;
46
- if (e.key === 'Escape') {
47
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
- }
49
- });
50
- }
51
- else {
52
- document.removeEventListener('keydown', () => { });
53
- }
54
- }
55
- /**
56
- * Get specific facets data from search-service API based of currently query params
57
- * - this.aggregations - hold result of search service and being used for further processing.
58
- */
59
- async updateSpecificFacets() {
60
- var _a, _b;
61
- const aggregations = {
62
- simpleParams: [this.facetAggregationKey],
63
- };
64
- const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
- const params = {
66
- query: this.fullQuery,
67
- aggregations,
68
- aggregationsSize,
69
- rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
- };
71
- const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchTarget === 'fulltext'
72
- ? SearchType.FULLTEXT
73
- : SearchType.METADATA));
74
- this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
75
- this.facetGroup = this.aggregationFacetGroups;
76
- this.facetsLoading = false;
77
- }
78
- pageNumberClicked(e) {
79
- var _a;
80
- const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
81
- if (page) {
82
- this.pageNumber = Number(page);
83
- }
84
- }
85
- /**
86
- * Combines the selected facets with the aggregations to create a single list of facets
87
- */
88
- get mergedFacets() {
89
- var _a;
90
- const facetGroups = [];
91
- const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
92
- const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
93
- // if the user selected a facet, but it's not in the aggregation, we add it as-is
94
- if (selectedFacetGroup && !aggregateFacetGroup) {
95
- facetGroups.push(selectedFacetGroup);
96
- return facetGroups;
97
- }
98
- // if we don't have an aggregate facet group, don't add this to the list
99
- if (!aggregateFacetGroup)
100
- return facetGroups;
101
- // start with either the selected group if we have one, or the aggregate group
102
- const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
103
- // attach the counts to the selected buckets
104
- const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
105
- const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
106
- return selectedBucket
107
- ? {
108
- ...bucket,
109
- count: selectedBucket.count,
110
- }
111
- : bucket;
112
- })) !== null && _a !== void 0 ? _a : [];
113
- // append any additional buckets that were not selected
114
- aggregateFacetGroup.buckets.forEach(bucket => {
115
- const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
116
- if (existingBucket)
117
- return;
118
- bucketsWithCount.push(bucket);
119
- });
120
- facetGroup.buckets = bucketsWithCount;
121
- facetGroups.push(facetGroup);
122
- return facetGroups;
123
- }
124
- /**
125
- * Converts the selected facets to a `FacetGroup` array,
126
- * which is easier to work with
127
- */
128
- get selectedFacetGroups() {
129
- if (!this.selectedFacets)
130
- return [];
131
- const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
132
- const option = key;
133
- const title = facetTitles[option];
134
- const buckets = Object.entries(selectedFacets).map(([value, data]) => {
135
- var _a, _b;
136
- let displayText = value;
137
- // for selected languages, we store the language code instead of the
138
- // display name, so look up the name from the mapping
139
- if (option === 'language') {
140
- displayText =
141
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
142
- }
143
- return {
144
- displayText,
145
- key: value,
146
- count: data === null || data === void 0 ? void 0 : data.count,
147
- state: data === null || data === void 0 ? void 0 : data.state,
148
- };
149
- });
150
- return {
151
- title,
152
- key: option,
153
- buckets,
154
- };
155
- });
156
- return facetGroups;
157
- }
158
- /**
159
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
160
- */
161
- get aggregationFacetGroups() {
162
- var _a;
163
- const facetGroups = [];
164
- Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
165
- // the year_histogram data is in a different format so can't be handled here
166
- if (key === 'year_histogram')
167
- return;
168
- const option = key;
169
- this.facetGroupTitle = facetTitles[option];
170
- // sort facets in specific order
171
- let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
172
- ? AggregationSortType.ALPHABETICAL
173
- : AggregationSortType.COUNT);
174
- if (option === 'collection') {
175
- // we are not showing fav- collection items in facets
176
- castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
177
- // asynchronously load the collection name
178
- this.preloadCollectionNames(castedBuckets);
179
- }
180
- // find length and pagination size for modal pagination
181
- const { length } = Object.keys(castedBuckets);
182
- this.paginationSize = Math.ceil(length / this.facetsPerPage);
183
- // render only items which will be visible as per this.facetsPerPage
184
- const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
185
- const facetBucket = bucketsMaxSix.map(bucket => {
186
- var _a, _b;
187
- let bucketKey = bucket.key;
188
- // for languages, we need to search by language code instead of the
189
- // display name, which is what we get from the search engine result
190
- if (option === 'language') {
191
- bucketKey =
192
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
193
- }
194
- return {
195
- displayText: `${bucket.key}`,
196
- key: `${bucketKey}`,
197
- count: bucket.doc_count,
198
- state: 'none',
199
- };
200
- });
201
- const group = {
202
- title: this.facetGroupTitle,
203
- key: option,
204
- buckets: facetBucket,
205
- };
206
- facetGroups.push(group);
207
- });
208
- return facetGroups;
209
- }
210
- /**
211
- * for collections, we need to asynchronously load the collection name
212
- * so we use the `async-collection-name` widget and for the rest, we have a static value to use
213
- *
214
- * @param castedBuckets
215
- */
216
- preloadCollectionNames(castedBuckets) {
217
- var _a;
218
- const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
219
- const collectionIdsArray = Array.from(new Set(collectionIds));
220
- (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
221
- }
222
- /**
223
- * sort the facets on modal
224
- * - alpha sort perform in ascending order
225
- * - count/frequency sort perform in descending order
226
- *
227
- * @param facetBucket as Bucket[]
228
- *
229
- * @return sortedFacetBucket as Bucket
230
- */
231
- sortedFacets(facetBucket) {
232
- let sortedFacetBucket = facetBucket;
233
- if (this.sortedBy === 'alpha') {
234
- // sort by alphabetic in ascending order. eg. a,b,c,...
235
- sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => (a.key > b.key ? 1 : -1));
236
- }
237
- else {
238
- // sort by frequency/count in descending order. eg 100,99,98,...
239
- sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => a.doc_count < b.doc_count ? 1 : -1);
240
- }
241
- return sortedFacetBucket;
242
- }
243
- get getMoreFacetsTemplate() {
244
- 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, } from '../models';
8
+ import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
+ import './more-facets-pagination';
10
+ import './facets-template';
11
+ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.sortedBy = 'count'; // count | alpha
15
+ this.facetGroup = [];
16
+ this.facetGroupTitle = '';
17
+ this.pageNumber = 1;
18
+ /**
19
+ * Facets are loading on popup
20
+ */
21
+ this.facetsLoading = true;
22
+ this.paginationSize = 0;
23
+ this.facetsType = 'modal';
24
+ this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
25
+ }
26
+ updated(changed) {
27
+ if (changed.has('facetKey')) {
28
+ this.facetsLoading = true;
29
+ this.pageNumber = 1;
30
+ this.updateSpecificFacets();
31
+ }
32
+ if (changed.has('pageNumber')) {
33
+ this.facetGroup = this.aggregationFacetGroups;
34
+ }
35
+ }
36
+ firstUpdated() {
37
+ this.setupEscapeListeners();
38
+ }
39
+ /**
40
+ * Close more facets modal on Escape click
41
+ */
42
+ setupEscapeListeners() {
43
+ if (this.modalManager) {
44
+ document.addEventListener('keydown', (e) => {
45
+ var _a;
46
+ if (e.key === 'Escape') {
47
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
+ }
49
+ });
50
+ }
51
+ else {
52
+ document.removeEventListener('keydown', () => { });
53
+ }
54
+ }
55
+ /**
56
+ * Get specific facets data from search-service API based of currently query params
57
+ * - this.aggregations - hold result of search service and being used for further processing.
58
+ */
59
+ async updateSpecificFacets() {
60
+ var _a, _b;
61
+ const aggregations = {
62
+ simpleParams: [this.facetAggregationKey],
63
+ };
64
+ const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
+ const params = {
66
+ query: this.fullQuery,
67
+ aggregations,
68
+ aggregationsSize,
69
+ rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
+ };
71
+ const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
72
+ this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
73
+ this.facetGroup = this.aggregationFacetGroups;
74
+ this.facetsLoading = false;
75
+ }
76
+ pageNumberClicked(e) {
77
+ var _a;
78
+ const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
79
+ if (page) {
80
+ this.pageNumber = Number(page);
81
+ }
82
+ }
83
+ /**
84
+ * Combines the selected facets with the aggregations to create a single list of facets
85
+ */
86
+ get mergedFacets() {
87
+ var _a;
88
+ const facetGroups = [];
89
+ const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
90
+ const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
91
+ // if the user selected a facet, but it's not in the aggregation, we add it as-is
92
+ if (selectedFacetGroup && !aggregateFacetGroup) {
93
+ facetGroups.push(selectedFacetGroup);
94
+ return facetGroups;
95
+ }
96
+ // if we don't have an aggregate facet group, don't add this to the list
97
+ if (!aggregateFacetGroup)
98
+ return facetGroups;
99
+ // start with either the selected group if we have one, or the aggregate group
100
+ const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
101
+ // attach the counts to the selected buckets
102
+ const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
103
+ const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
104
+ return selectedBucket
105
+ ? {
106
+ ...bucket,
107
+ count: selectedBucket.count,
108
+ }
109
+ : bucket;
110
+ })) !== null && _a !== void 0 ? _a : [];
111
+ // append any additional buckets that were not selected
112
+ aggregateFacetGroup.buckets.forEach(bucket => {
113
+ const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
114
+ if (existingBucket)
115
+ return;
116
+ bucketsWithCount.push(bucket);
117
+ });
118
+ facetGroup.buckets = bucketsWithCount;
119
+ facetGroups.push(facetGroup);
120
+ return facetGroups;
121
+ }
122
+ /**
123
+ * Converts the selected facets to a `FacetGroup` array,
124
+ * which is easier to work with
125
+ */
126
+ get selectedFacetGroups() {
127
+ if (!this.selectedFacets)
128
+ return [];
129
+ const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
130
+ const option = key;
131
+ const title = facetTitles[option];
132
+ const buckets = Object.entries(selectedFacets).map(([value, data]) => {
133
+ var _a, _b;
134
+ let displayText = value;
135
+ // for selected languages, we store the language code instead of the
136
+ // display name, so look up the name from the mapping
137
+ if (option === 'language') {
138
+ displayText =
139
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
140
+ }
141
+ return {
142
+ displayText,
143
+ key: value,
144
+ count: data === null || data === void 0 ? void 0 : data.count,
145
+ state: data === null || data === void 0 ? void 0 : data.state,
146
+ };
147
+ });
148
+ return {
149
+ title,
150
+ key: option,
151
+ buckets,
152
+ };
153
+ });
154
+ return facetGroups;
155
+ }
156
+ /**
157
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
158
+ */
159
+ get aggregationFacetGroups() {
160
+ var _a;
161
+ const facetGroups = [];
162
+ Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
163
+ // the year_histogram data is in a different format so can't be handled here
164
+ if (key === 'year_histogram')
165
+ return;
166
+ const option = key;
167
+ this.facetGroupTitle = facetTitles[option];
168
+ // sort facets in specific order
169
+ let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
170
+ ? AggregationSortType.ALPHABETICAL
171
+ : AggregationSortType.COUNT);
172
+ if (option === 'collection') {
173
+ // we are not showing fav- collection items in facets
174
+ castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
175
+ // asynchronously load the collection name
176
+ this.preloadCollectionNames(castedBuckets);
177
+ }
178
+ // find length and pagination size for modal pagination
179
+ const { length } = Object.keys(castedBuckets);
180
+ this.paginationSize = Math.ceil(length / this.facetsPerPage);
181
+ // render only items which will be visible as per this.facetsPerPage
182
+ const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
183
+ const facetBucket = bucketsMaxSix.map(bucket => {
184
+ var _a, _b;
185
+ let bucketKey = bucket.key;
186
+ // for languages, we need to search by language code instead of the
187
+ // display name, which is what we get from the search engine result
188
+ if (option === 'language') {
189
+ bucketKey =
190
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
191
+ }
192
+ return {
193
+ displayText: `${bucket.key}`,
194
+ key: `${bucketKey}`,
195
+ count: bucket.doc_count,
196
+ state: 'none',
197
+ };
198
+ });
199
+ const group = {
200
+ title: this.facetGroupTitle,
201
+ key: option,
202
+ buckets: facetBucket,
203
+ };
204
+ facetGroups.push(group);
205
+ });
206
+ return facetGroups;
207
+ }
208
+ /**
209
+ * for collections, we need to asynchronously load the collection name
210
+ * so we use the `async-collection-name` widget and for the rest, we have a static value to use
211
+ *
212
+ * @param castedBuckets
213
+ */
214
+ preloadCollectionNames(castedBuckets) {
215
+ var _a;
216
+ const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
217
+ const collectionIdsArray = Array.from(new Set(collectionIds));
218
+ (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
219
+ }
220
+ get getMoreFacetsTemplate() {
221
+ var _a;
245
222
  return html `
246
223
  <facets-template
247
224
  .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
248
225
  .selectedFacets=${this.selectedFacets}
249
226
  .renderOn=${'modal'}
250
227
  .collectionNameCache=${this.collectionNameCache}
251
- @selectedFacetsChanged=${(e) => {
252
- this.selectedFacets = e.detail;
228
+ @selectedFacetsChanged=${(e) => {
229
+ this.selectedFacets = e.detail;
253
230
  }}
254
231
  ></facets-template>
255
- `;
256
- }
257
- get loaderTemplate() {
232
+ `;
233
+ }
234
+ get loaderTemplate() {
258
235
  return html `<div class="facets-loader">
259
236
  <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
260
- </div> `;
261
- }
262
- // render pagination if more then 1 page
263
- get facetsPaginationTemplate() {
264
- return this.paginationSize > 1
237
+ </div> `;
238
+ }
239
+ // render pagination if more then 1 page
240
+ get facetsPaginationTemplate() {
241
+ return this.paginationSize > 1
265
242
  ? html `<more-facets-pagination
266
243
  .size=${this.paginationSize}
267
244
  .currentPage=${1}
268
245
  @pageNumberClicked=${this.pageNumberClicked}
269
- ></more-facets-pagination>`
270
- : nothing;
271
- }
272
- get footerTemplate() {
273
- if (this.paginationSize > 0) {
246
+ ></more-facets-pagination>`
247
+ : nothing;
248
+ }
249
+ get footerTemplate() {
250
+ if (this.paginationSize > 0) {
274
251
  return html `${this.facetsPaginationTemplate}
275
252
  <div class="footer">
276
253
  <button
@@ -287,19 +264,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
287
264
  >
288
265
  Apply filters
289
266
  </button>
290
- </div> `;
291
- }
292
- return nothing;
293
- }
294
- sortFacetAggregation() {
295
- this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
296
- this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
297
- }
298
- get getModalHeaderTemplate() {
299
- const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
300
- const image = this.sortedBy === 'alpha'
301
- ? 'https://archive.org/images/filter-alpha.png'
302
- : 'https://archive.org/images/filter-count.png';
267
+ </div> `;
268
+ }
269
+ return nothing;
270
+ }
271
+ sortFacetAggregation() {
272
+ this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
273
+ this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
274
+ }
275
+ get getModalHeaderTemplate() {
276
+ const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
277
+ const image = this.sortedBy === 'alpha'
278
+ ? 'https://archive.org/images/filter-alpha.png'
279
+ : 'https://archive.org/images/filter-count.png';
303
280
  return html `<span class="sr-only">More facets for:</span>
304
281
  <span class="title">
305
282
  ${this.facetGroupTitle}
@@ -311,12 +288,12 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
311
288
  title=${title}
312
289
  alt="sort facets"
313
290
  />
314
- </span> `;
315
- }
316
- render() {
291
+ </span> `;
292
+ }
293
+ render() {
317
294
  return html `
318
- ${this.facetsLoading
319
- ? this.loaderTemplate
295
+ ${this.facetsLoading
296
+ ? this.loaderTemplate
320
297
  : html `
321
298
  <div class="header-content">${this.getModalHeaderTemplate}</div>
322
299
  <div class="scrollable-content">
@@ -324,24 +301,24 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
324
301
  </div>
325
302
  ${this.footerTemplate}
326
303
  `}
327
- `;
328
- }
329
- applySearchFacetsClicked() {
330
- var _a;
331
- const event = new CustomEvent('facetsChanged', {
332
- detail: this.selectedFacets,
333
- bubbles: true,
334
- composed: true,
335
- });
336
- this.dispatchEvent(event);
337
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
338
- }
339
- cancelClick() {
340
- var _a;
341
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
342
- }
343
- static get styles() {
344
- const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
304
+ `;
305
+ }
306
+ applySearchFacetsClicked() {
307
+ var _a;
308
+ const event = new CustomEvent('facetsChanged', {
309
+ detail: this.selectedFacets,
310
+ bubbles: true,
311
+ composed: true,
312
+ });
313
+ this.dispatchEvent(event);
314
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
315
+ }
316
+ cancelClick() {
317
+ var _a;
318
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
319
+ }
320
+ static get styles() {
321
+ const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
345
322
  return css `
346
323
  .header-content .title {
347
324
  display: block;
@@ -352,7 +329,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
352
329
  }
353
330
  .scrollable-content {
354
331
  overflow-y: auto;
355
- max-height: 65vh;
332
+ max-height: 60vh;
356
333
  }
357
334
  .facets-content {
358
335
  font-size: 1.2rem;
@@ -416,62 +393,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
416
393
  vertical-align: baseline;
417
394
  cursor: pointer;
418
395
  }
419
- `;
420
- }
421
- };
422
- __decorate([
423
- property({ type: String })
424
- ], MoreFacetsContent.prototype, "facetKey", void 0);
425
- __decorate([
426
- property({ type: String })
427
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
428
- __decorate([
429
- property({ type: String })
430
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
431
- __decorate([
432
- property({ type: Object })
433
- ], MoreFacetsContent.prototype, "modalManager", void 0);
434
- __decorate([
435
- property({ type: Object })
436
- ], MoreFacetsContent.prototype, "searchService", void 0);
437
- __decorate([
438
- property({ type: String })
439
- ], MoreFacetsContent.prototype, "searchTarget", void 0);
440
- __decorate([
441
- property({ type: Object })
442
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
443
- __decorate([
444
- property({ type: Object })
445
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
446
- __decorate([
447
- property({ type: Object })
448
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
449
- __decorate([
450
- property({ type: String })
451
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
452
- __decorate([
453
- state()
454
- ], MoreFacetsContent.prototype, "aggregations", void 0);
455
- __decorate([
456
- state()
457
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
458
- __decorate([
459
- state()
460
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
461
- __decorate([
462
- state()
463
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
464
- __decorate([
465
- state()
466
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
467
- __decorate([
468
- state()
469
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
470
- __decorate([
471
- state()
472
- ], MoreFacetsContent.prototype, "facetsType", void 0);
473
- MoreFacetsContent = __decorate([
474
- customElement('more-facets-content')
475
- ], MoreFacetsContent);
476
- export { MoreFacetsContent };
396
+ `;
397
+ }
398
+ };
399
+ __decorate([
400
+ property({ type: String })
401
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
402
+ __decorate([
403
+ property({ type: String })
404
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
405
+ __decorate([
406
+ property({ type: String })
407
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
408
+ __decorate([
409
+ property({ type: Object })
410
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
411
+ __decorate([
412
+ property({ type: Object })
413
+ ], MoreFacetsContent.prototype, "searchService", void 0);
414
+ __decorate([
415
+ property({ type: String })
416
+ ], MoreFacetsContent.prototype, "searchType", void 0);
417
+ __decorate([
418
+ property({ type: Object })
419
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
420
+ __decorate([
421
+ property({ type: Object })
422
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
423
+ __decorate([
424
+ property({ type: Object })
425
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
426
+ __decorate([
427
+ property({ type: String })
428
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
429
+ __decorate([
430
+ state()
431
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
432
+ __decorate([
433
+ state()
434
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
435
+ __decorate([
436
+ state()
437
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
438
+ __decorate([
439
+ state()
440
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
441
+ __decorate([
442
+ state()
443
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
444
+ __decorate([
445
+ state()
446
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
447
+ __decorate([
448
+ state()
449
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
450
+ MoreFacetsContent = __decorate([
451
+ customElement('more-facets-content')
452
+ ], MoreFacetsContent);
453
+ export { MoreFacetsContent };
477
454
  //# sourceMappingURL=more-facets-content.js.map