@genspectrum/dashboard-components 0.13.6 → 0.14.1
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.
- package/custom-elements.json +41 -79
- package/dist/{LineageFilterChangedEvent-GedKNGFI.js → LineageFilterChangedEvent-C9dXOxt6.js} +11 -3
- package/dist/LineageFilterChangedEvent-C9dXOxt6.js.map +1 -0
- package/dist/components.d.ts +63 -71
- package/dist/components.js +440 -312
- package/dist/components.js.map +1 -1
- package/dist/style.css +20 -5
- package/dist/util.d.ts +61 -51
- package/dist/util.js +1 -1
- package/package.json +1 -1
- package/src/preact/LapisUrlContext.ts +14 -1
- package/src/preact/aggregatedData/aggregate.stories.tsx +3 -3
- package/src/preact/aggregatedData/aggregate.tsx +3 -4
- package/src/preact/components/tabs.tsx +3 -5
- package/src/preact/dateRangeSelector/computeInitialValues.spec.ts +34 -20
- package/src/preact/dateRangeSelector/computeInitialValues.ts +25 -21
- package/src/preact/dateRangeSelector/date-range-selector.stories.tsx +104 -40
- package/src/preact/dateRangeSelector/date-range-selector.tsx +29 -20
- package/src/preact/dateRangeSelector/dateRangeOption.ts +11 -1
- package/src/preact/lineageFilter/lineage-filter.stories.tsx +3 -3
- package/src/preact/lineageFilter/lineage-filter.tsx +3 -4
- package/src/preact/locationFilter/location-filter.stories.tsx +3 -3
- package/src/preact/locationFilter/location-filter.tsx +4 -4
- package/src/preact/map/sequences-by-location.stories.tsx +3 -3
- package/src/preact/map/sequences-by-location.tsx +3 -4
- package/src/preact/mutationComparison/mutation-comparison.stories.tsx +3 -3
- package/src/preact/mutationComparison/mutation-comparison.tsx +4 -4
- package/src/preact/mutationFilter/ExampleMutation.tsx +68 -0
- package/src/preact/mutationFilter/mutation-filter-info.tsx +179 -112
- package/src/preact/mutationFilter/mutation-filter.stories.tsx +5 -5
- package/src/preact/mutationFilter/mutation-filter.tsx +10 -5
- package/src/preact/mutations/mutations.stories.tsx +3 -3
- package/src/preact/mutations/mutations.tsx +4 -4
- package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx +26 -4
- package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx +3 -3
- package/src/preact/mutationsOverTime/mutations-over-time.tsx +4 -4
- package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx +3 -3
- package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx +4 -4
- package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx +3 -3
- package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +4 -4
- package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx +3 -3
- package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx +4 -4
- package/src/preact/statistic/statistics.stories.tsx +3 -3
- package/src/preact/statistic/statistics.tsx +2 -3
- package/src/preact/textInput/text-input.stories.tsx +3 -3
- package/src/preact/textInput/text-input.tsx +3 -4
- package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx +5 -9
- package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx +5 -5
- package/src/web-components/PreactLitAdapter.tsx +3 -3
- package/src/web-components/{app.stories.ts → gs-app.stories.ts} +1 -1
- package/src/web-components/{app.ts → gs-app.ts} +5 -3
- package/src/web-components/index.ts +1 -1
- package/src/web-components/input/gs-date-range-selector.stories.ts +6 -13
- package/src/web-components/input/gs-date-range-selector.tsx +15 -38
- package/src/web-components/input/gs-lineage-filter.stories.ts +1 -1
- package/src/web-components/input/gs-location-filter.stories.ts +1 -1
- package/src/web-components/input/gs-mutation-filter.stories.ts +2 -2
- package/src/web-components/input/gs-text-input.stories.ts +1 -1
- package/src/web-components/visualization/gs-aggregate.stories.ts +1 -1
- package/src/web-components/visualization/gs-mutation-comparison.stories.ts +1 -1
- package/src/web-components/visualization/gs-mutations-over-time.stories.ts +1 -1
- package/src/web-components/visualization/gs-mutations.stories.ts +1 -1
- package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts +1 -1
- package/src/web-components/visualization/gs-prevalence-over-time.stories.ts +1 -1
- package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts +1 -1
- package/src/web-components/visualization/gs-sequences-by-location.stories.ts +1 -1
- package/src/web-components/visualization/gs-statistics.stories.ts +1 -1
- package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts +4 -1
- package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx +6 -2
- package/standalone-bundle/dashboard-components.js +7016 -6951
- package/standalone-bundle/dashboard-components.js.map +1 -1
- package/standalone-bundle/style.css +1 -1
- package/dist/LineageFilterChangedEvent-GedKNGFI.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -62,7 +62,13 @@
|
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"kind": "javascript-module",
|
|
65
|
-
"path": "src/web-components/
|
|
65
|
+
"path": "src/web-components/errorHandling.mdx",
|
|
66
|
+
"declarations": [],
|
|
67
|
+
"exports": []
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "javascript-module",
|
|
71
|
+
"path": "src/web-components/gs-app.stories.ts",
|
|
66
72
|
"declarations": [
|
|
67
73
|
{
|
|
68
74
|
"kind": "variable",
|
|
@@ -140,7 +146,7 @@
|
|
|
140
146
|
"name": "default",
|
|
141
147
|
"declaration": {
|
|
142
148
|
"name": "meta",
|
|
143
|
-
"module": "src/web-components/app.stories.ts"
|
|
149
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
144
150
|
}
|
|
145
151
|
},
|
|
146
152
|
{
|
|
@@ -148,7 +154,7 @@
|
|
|
148
154
|
"name": "Default",
|
|
149
155
|
"declaration": {
|
|
150
156
|
"name": "Default",
|
|
151
|
-
"module": "src/web-components/app.stories.ts"
|
|
157
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
152
158
|
}
|
|
153
159
|
},
|
|
154
160
|
{
|
|
@@ -156,7 +162,7 @@
|
|
|
156
162
|
"name": "WithNoLapisUrl",
|
|
157
163
|
"declaration": {
|
|
158
164
|
"name": "WithNoLapisUrl",
|
|
159
|
-
"module": "src/web-components/app.stories.ts"
|
|
165
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
160
166
|
}
|
|
161
167
|
},
|
|
162
168
|
{
|
|
@@ -164,7 +170,7 @@
|
|
|
164
170
|
"name": "DelayFetchingReferenceGenome",
|
|
165
171
|
"declaration": {
|
|
166
172
|
"name": "DelayFetchingReferenceGenome",
|
|
167
|
-
"module": "src/web-components/app.stories.ts"
|
|
173
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
168
174
|
}
|
|
169
175
|
},
|
|
170
176
|
{
|
|
@@ -172,7 +178,7 @@
|
|
|
172
178
|
"name": "FailsToFetchReferenceGenome",
|
|
173
179
|
"declaration": {
|
|
174
180
|
"name": "FailsToFetchReferenceGenome",
|
|
175
|
-
"module": "src/web-components/app.stories.ts"
|
|
181
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
176
182
|
}
|
|
177
183
|
},
|
|
178
184
|
{
|
|
@@ -180,19 +186,19 @@
|
|
|
180
186
|
"name": "gs-app-display",
|
|
181
187
|
"declaration": {
|
|
182
188
|
"name": "AppDisplay",
|
|
183
|
-
"module": "src/web-components/app.stories.ts"
|
|
189
|
+
"module": "src/web-components/gs-app.stories.ts"
|
|
184
190
|
}
|
|
185
191
|
}
|
|
186
192
|
]
|
|
187
193
|
},
|
|
188
194
|
{
|
|
189
195
|
"kind": "javascript-module",
|
|
190
|
-
"path": "src/web-components/app.ts",
|
|
196
|
+
"path": "src/web-components/gs-app.ts",
|
|
191
197
|
"declarations": [
|
|
192
198
|
{
|
|
193
199
|
"kind": "class",
|
|
194
200
|
"description": "## Context\n\nThis component provides the main application context.\nAll other `gs-*` components must be (possibly nested) children of this component.\nIt makes use of the [Lit Context](https://lit.dev/docs/data/context/) to\n- provide the URL to the LAPIS instance to all its children\n- fetch the reference genomes from LAPIS and provide it to all its children\n\nThis will show an error message if the reference genome cannot be fetched\n(e.g., due to an invalid LAPIS URL).\n\n## Shadow DOM\n\nThis component does __not__ use a shadow DOM. Children of this component will be rendered directly in the light DOM.",
|
|
195
|
-
"name": "
|
|
201
|
+
"name": "AppComponent",
|
|
196
202
|
"members": [
|
|
197
203
|
{
|
|
198
204
|
"kind": "field",
|
|
@@ -227,28 +233,22 @@
|
|
|
227
233
|
"exports": [
|
|
228
234
|
{
|
|
229
235
|
"kind": "js",
|
|
230
|
-
"name": "
|
|
236
|
+
"name": "AppComponent",
|
|
231
237
|
"declaration": {
|
|
232
|
-
"name": "
|
|
233
|
-
"module": "src/web-components/app.ts"
|
|
238
|
+
"name": "AppComponent",
|
|
239
|
+
"module": "src/web-components/gs-app.ts"
|
|
234
240
|
}
|
|
235
241
|
},
|
|
236
242
|
{
|
|
237
243
|
"kind": "custom-element-definition",
|
|
238
244
|
"name": "gs-app",
|
|
239
245
|
"declaration": {
|
|
240
|
-
"name": "
|
|
241
|
-
"module": "src/web-components/app.ts"
|
|
246
|
+
"name": "AppComponent",
|
|
247
|
+
"module": "src/web-components/gs-app.ts"
|
|
242
248
|
}
|
|
243
249
|
}
|
|
244
250
|
]
|
|
245
251
|
},
|
|
246
|
-
{
|
|
247
|
-
"kind": "javascript-module",
|
|
248
|
-
"path": "src/web-components/errorHandling.mdx",
|
|
249
|
-
"declarations": [],
|
|
250
|
-
"exports": []
|
|
251
|
-
},
|
|
252
252
|
{
|
|
253
253
|
"kind": "javascript-module",
|
|
254
254
|
"path": "src/web-components/index.ts",
|
|
@@ -256,10 +256,10 @@
|
|
|
256
256
|
"exports": [
|
|
257
257
|
{
|
|
258
258
|
"kind": "js",
|
|
259
|
-
"name": "
|
|
259
|
+
"name": "AppComponent",
|
|
260
260
|
"declaration": {
|
|
261
|
-
"name": "
|
|
262
|
-
"module": "./app
|
|
261
|
+
"name": "AppComponent",
|
|
262
|
+
"module": "./gs-app"
|
|
263
263
|
}
|
|
264
264
|
},
|
|
265
265
|
{
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
"type": {
|
|
299
299
|
"text": "Meta<Required<DateRangeSelectorProps>>"
|
|
300
300
|
},
|
|
301
|
-
"default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: {
|
|
301
|
+
"default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
|
|
302
302
|
},
|
|
303
303
|
{
|
|
304
304
|
"kind": "variable",
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
"type": {
|
|
307
307
|
"text": "StoryObj<Required<DateRangeSelectorProps>>"
|
|
308
308
|
},
|
|
309
|
-
"default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .
|
|
309
|
+
"default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-selector> </div> </gs-app>`, }"
|
|
310
310
|
},
|
|
311
311
|
{
|
|
312
312
|
"kind": "variable",
|
|
@@ -360,7 +360,7 @@
|
|
|
360
360
|
"text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
|
|
361
361
|
},
|
|
362
362
|
"default": "[]",
|
|
363
|
-
"description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `
|
|
363
|
+
"description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `value`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
|
|
364
364
|
"attribute": "dateRangeOptions"
|
|
365
365
|
},
|
|
366
366
|
{
|
|
@@ -375,33 +375,13 @@
|
|
|
375
375
|
},
|
|
376
376
|
{
|
|
377
377
|
"kind": "field",
|
|
378
|
-
"name": "
|
|
379
|
-
"type": {
|
|
380
|
-
"text": "string | undefined"
|
|
381
|
-
},
|
|
382
|
-
"default": "undefined",
|
|
383
|
-
"description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
|
|
384
|
-
"attribute": "initialValue"
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"kind": "field",
|
|
388
|
-
"name": "initialDateFrom",
|
|
389
|
-
"type": {
|
|
390
|
-
"text": "string | undefined"
|
|
391
|
-
},
|
|
392
|
-
"default": "undefined",
|
|
393
|
-
"description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
|
|
394
|
-
"attribute": "initialDateFrom"
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"kind": "field",
|
|
398
|
-
"name": "initialDateTo",
|
|
378
|
+
"name": "value",
|
|
399
379
|
"type": {
|
|
400
|
-
"text": "string | undefined"
|
|
380
|
+
"text": "string | { dateFrom?: string; dateTo?: string } | undefined"
|
|
401
381
|
},
|
|
402
382
|
"default": "undefined",
|
|
403
|
-
"description": "
|
|
404
|
-
"attribute": "
|
|
383
|
+
"description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
|
|
384
|
+
"attribute": "value"
|
|
405
385
|
},
|
|
406
386
|
{
|
|
407
387
|
"kind": "field",
|
|
@@ -436,7 +416,7 @@
|
|
|
436
416
|
"type": {
|
|
437
417
|
"text": "CustomEvent<{ string | {dateFrom: string, dateTo: string}}>"
|
|
438
418
|
},
|
|
439
|
-
"description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the selected dateRangeOption or when users select custom values it contains the selected dates. Use this event, when you want to control this component in your JS application.",
|
|
419
|
+
"description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the selected dateRangeOption or when users select custom values it contains the selected dates. Use this event, when you want to control this component in your JS application. You can supply the `detail` of this event to the `value` attribute of this component.",
|
|
440
420
|
"name": "gs-date-range-option-changed"
|
|
441
421
|
}
|
|
442
422
|
],
|
|
@@ -447,7 +427,7 @@
|
|
|
447
427
|
"text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
|
|
448
428
|
},
|
|
449
429
|
"default": "[]",
|
|
450
|
-
"description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `
|
|
430
|
+
"description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `value`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
|
|
451
431
|
"fieldName": "dateRangeOptions"
|
|
452
432
|
},
|
|
453
433
|
{
|
|
@@ -460,31 +440,13 @@
|
|
|
460
440
|
"fieldName": "earliestDate"
|
|
461
441
|
},
|
|
462
442
|
{
|
|
463
|
-
"name": "
|
|
464
|
-
"type": {
|
|
465
|
-
"text": "string | undefined"
|
|
466
|
-
},
|
|
467
|
-
"default": "undefined",
|
|
468
|
-
"description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
|
|
469
|
-
"fieldName": "initialValue"
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
"name": "initialDateFrom",
|
|
473
|
-
"type": {
|
|
474
|
-
"text": "string | undefined"
|
|
475
|
-
},
|
|
476
|
-
"default": "undefined",
|
|
477
|
-
"description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
|
|
478
|
-
"fieldName": "initialDateFrom"
|
|
479
|
-
},
|
|
480
|
-
{
|
|
481
|
-
"name": "initialDateTo",
|
|
443
|
+
"name": "value",
|
|
482
444
|
"type": {
|
|
483
|
-
"text": "string | undefined"
|
|
445
|
+
"text": "string | { dateFrom?: string; dateTo?: string } | undefined"
|
|
484
446
|
},
|
|
485
447
|
"default": "undefined",
|
|
486
|
-
"description": "
|
|
487
|
-
"fieldName": "
|
|
448
|
+
"description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
|
|
449
|
+
"fieldName": "value"
|
|
488
450
|
},
|
|
489
451
|
{
|
|
490
452
|
"name": "width",
|
|
@@ -1028,7 +990,7 @@
|
|
|
1028
990
|
"type": {
|
|
1029
991
|
"text": "StoryObj<MutationFilterProps>"
|
|
1030
992
|
},
|
|
1031
|
-
"default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:
|
|
993
|
+
"default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
|
|
1032
994
|
}
|
|
1033
995
|
],
|
|
1034
996
|
"exports": [
|
|
@@ -3963,7 +3925,7 @@
|
|
|
3963
3925
|
"type": {
|
|
3964
3926
|
"text": "Meta<WastewaterMutationsOverTimeProps & { infoText: string }>"
|
|
3965
3927
|
},
|
|
3966
|
-
"default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', infoText: 'Some info text', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
|
|
3928
|
+
"default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', infoText: 'Some info text', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
|
|
3967
3929
|
},
|
|
3968
3930
|
{
|
|
3969
3931
|
"kind": "variable",
|
|
@@ -3971,7 +3933,7 @@
|
|
|
3971
3933
|
"type": {
|
|
3972
3934
|
"text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
|
|
3973
3935
|
},
|
|
3974
|
-
"default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
|
|
3936
|
+
"default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} .maxNumberOfGridRows=${args.maxNumberOfGridRows} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
|
|
3975
3937
|
}
|
|
3976
3938
|
],
|
|
3977
3939
|
"exports": [
|
|
@@ -4055,7 +4017,7 @@
|
|
|
4055
4017
|
"text": "number"
|
|
4056
4018
|
},
|
|
4057
4019
|
"default": "100",
|
|
4058
|
-
"description": "The maximum number of grid rows to display
|
|
4020
|
+
"description": "The maximum number of grid rows to display.",
|
|
4059
4021
|
"attribute": "maxNumberOfGridRows"
|
|
4060
4022
|
}
|
|
4061
4023
|
],
|
|
@@ -4102,7 +4064,7 @@
|
|
|
4102
4064
|
"text": "number"
|
|
4103
4065
|
},
|
|
4104
4066
|
"default": "100",
|
|
4105
|
-
"description": "The maximum number of grid rows to display
|
|
4067
|
+
"description": "The maximum number of grid rows to display.",
|
|
4106
4068
|
"fieldName": "maxNumberOfGridRows"
|
|
4107
4069
|
}
|
|
4108
4070
|
],
|
package/dist/{LineageFilterChangedEvent-GedKNGFI.js → LineageFilterChangedEvent-C9dXOxt6.js}
RENAMED
|
@@ -46,6 +46,13 @@ const dateRangeOptionSchema = z.object({
|
|
|
46
46
|
*/
|
|
47
47
|
dateTo: z.string().date().optional()
|
|
48
48
|
});
|
|
49
|
+
const dateRangeValueSchema = z.union([
|
|
50
|
+
z.string(),
|
|
51
|
+
z.object({
|
|
52
|
+
dateFrom: z.string().date().optional(),
|
|
53
|
+
dateTo: z.string().date().optional()
|
|
54
|
+
})
|
|
55
|
+
]);
|
|
49
56
|
class DateRangeOptionChangedEvent extends CustomEvent {
|
|
50
57
|
constructor(detail) {
|
|
51
58
|
super("gs-date-range-option-changed", {
|
|
@@ -130,9 +137,10 @@ export {
|
|
|
130
137
|
TextInputChangedEvent as T,
|
|
131
138
|
LineageFilterChangedEvent as a,
|
|
132
139
|
dateRangeOptionSchema as b,
|
|
133
|
-
|
|
140
|
+
dateRangeValueSchema as c,
|
|
134
141
|
dateRangeOptionPresets as d,
|
|
135
|
-
|
|
142
|
+
toYYYYMMDD as e,
|
|
143
|
+
lapisLocationFilterSchema as f,
|
|
136
144
|
lapisFilterSchema as l,
|
|
137
145
|
mutationsFilterSchema as m,
|
|
138
146
|
namedLapisFilterSchema as n,
|
|
@@ -140,4 +148,4 @@ export {
|
|
|
140
148
|
temporalGranularitySchema as t,
|
|
141
149
|
views as v
|
|
142
150
|
};
|
|
143
|
-
//# sourceMappingURL=LineageFilterChangedEvent-
|
|
151
|
+
//# sourceMappingURL=LineageFilterChangedEvent-C9dXOxt6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineageFilterChangedEvent-C9dXOxt6.js","sources":["../src/types.ts","../src/preact/dateRangeSelector/dateConversion.ts","../src/preact/dateRangeSelector/dateRangeOption.ts","../src/preact/locationFilter/LocationChangedEvent.ts","../src/preact/textInput/TextInputChangedEvent.ts","../src/preact/lineageFilter/LineageFilterChangedEvent.ts"],"sourcesContent":["import z from 'zod';\n\nimport {\n type Deletion,\n type DeletionClass,\n type Insertion,\n type InsertionClass,\n type Substitution,\n type SubstitutionClass,\n} from './utils/mutations';\n\nexport const mutationsFilterSchema = z.object({\n nucleotideMutations: z.array(z.string()),\n aminoAcidMutations: z.array(z.string()),\n nucleotideInsertions: z.array(z.string()),\n aminoAcidInsertions: z.array(z.string()),\n});\nexport type MutationsFilter = z.infer<typeof mutationsFilterSchema>;\n\nexport const lapisFilterSchema = z\n .record(z.union([z.string(), z.array(z.string()), z.number(), z.null(), z.boolean(), z.undefined()]))\n .and(mutationsFilterSchema.partial());\nexport type LapisFilter = z.infer<typeof lapisFilterSchema>;\n\nexport const namedLapisFilterSchema = z.object({\n lapisFilter: lapisFilterSchema,\n displayName: z.string(),\n});\nexport type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;\n\nexport const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined()]));\nexport type LapisLocationFilter = z.infer<typeof lapisLocationFilterSchema>;\n\nexport const temporalGranularitySchema = z.union([\n z.literal('day'),\n z.literal('week'),\n z.literal('month'),\n z.literal('year'),\n]);\nexport type TemporalGranularity = z.infer<typeof temporalGranularitySchema>;\n\nexport const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);\nexport type SequenceType = z.infer<typeof sequenceTypeSchema>;\n\nexport type SubstitutionOrDeletion = 'substitution' | 'deletion';\n\nexport type MutationType = SubstitutionOrDeletion | 'insertion';\n\nexport type SubstitutionEntry<T extends Substitution = SubstitutionClass> = {\n type: 'substitution';\n mutation: T;\n count: number;\n proportion: number;\n};\n\nexport type DeletionEntry<T extends Deletion = DeletionClass> = {\n type: 'deletion';\n mutation: T;\n count: number;\n proportion: number;\n};\n\nexport type InsertionEntry<T extends Insertion = InsertionClass> = { type: 'insertion'; mutation: T; count: number };\n\nexport type SubstitutionOrDeletionEntry<\n S extends Substitution = SubstitutionClass,\n D extends Deletion = DeletionClass,\n> = SubstitutionEntry<S> | DeletionEntry<D>;\n\nexport type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;\n\nexport const views = {\n table: 'table',\n venn: 'venn',\n grid: 'grid',\n insertions: 'insertions',\n bar: 'bar',\n line: 'line',\n bubble: 'bubble',\n map: 'map',\n} as const;\n","export const toYYYYMMDD = (date: Date) => {\n const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return date.toLocaleDateString('en-CA', options);\n};\n","import z from 'zod';\n\nimport { toYYYYMMDD } from './dateConversion';\n\n/**\n * A date range option that can be used in the `gs-date-range-selector` component.\n */\nexport const dateRangeOptionSchema = z.object({\n /** The label of the date range option that will be shown to the user */\n label: z.string(),\n /**\n * The start date of the date range in the format `YYYY-MM-DD`.\n * If not set, the date range selector will default to the `earliestDate` property.\n */\n dateFrom: z.string().date().optional(),\n /**\n * The end date of the date range in the format `YYYY-MM-DD`.\n * If not set, the date range selector will default to the current date.\n */\n dateTo: z.string().date().optional(),\n});\n\nexport type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;\n\nexport const dateRangeValueSchema = z.union([\n z.string(),\n z.object({\n dateFrom: z.string().date().optional(),\n dateTo: z.string().date().optional(),\n }),\n]);\n\nexport type DateRangeValue = z.infer<typeof dateRangeValueSchema>;\n\nexport type DateRangeSelectOption = Required<DateRangeValue>;\n\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {\n constructor(detail: DateRangeSelectOption) {\n super('gs-date-range-option-changed', {\n detail,\n bubbles: true,\n composed: true,\n });\n }\n}\n\nconst today = new Date();\n\nconst twoWeeksAgo = new Date();\ntwoWeeksAgo.setDate(today.getDate() - 14);\n\nconst lastMonth = new Date(today);\nlastMonth.setMonth(today.getMonth() - 1);\n\nconst last2Months = new Date(today);\nlast2Months.setMonth(today.getMonth() - 2);\n\nconst last3Months = new Date(today);\nlast3Months.setMonth(today.getMonth() - 3);\n\nconst last6Months = new Date(today);\nlast6Months.setMonth(today.getMonth() - 6);\n\nconst lastYear = new Date(today);\nlastYear.setFullYear(today.getFullYear() - 1);\n\n/**\n * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.\n */\nexport const dateRangeOptionPresets = {\n last2Weeks: {\n label: 'Last 2 weeks',\n dateFrom: toYYYYMMDD(twoWeeksAgo),\n },\n lastMonth: {\n label: 'Last month',\n dateFrom: toYYYYMMDD(lastMonth),\n },\n last2Months: {\n label: 'Last 2 months',\n dateFrom: toYYYYMMDD(last2Months),\n },\n last3Months: {\n label: 'Last 3 months',\n dateFrom: toYYYYMMDD(last3Months),\n },\n last6Months: {\n label: 'Last 6 months',\n dateFrom: toYYYYMMDD(last6Months),\n },\n lastYear: {\n label: 'Last year',\n dateFrom: toYYYYMMDD(lastYear),\n },\n allTimes: {\n label: 'All times',\n },\n} satisfies Record<string, DateRangeOption>;\n","import { type LapisLocationFilter } from '../../types';\n\nexport class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {\n constructor(detail: LapisLocationFilter) {\n super('gs-location-changed', {\n detail,\n bubbles: true,\n composed: true,\n });\n }\n}\n","type LapisTextFilter = Record<string, string | undefined>;\n\nexport class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {\n constructor(detail: LapisTextFilter) {\n super('gs-text-input-changed', {\n detail,\n bubbles: true,\n composed: true,\n });\n }\n}\n","type LapisLineageFilter = Record<string, string | undefined>;\n\nexport class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {\n constructor(detail: LapisLineageFilter) {\n super('gs-lineage-filter-changed', {\n detail,\n bubbles: true,\n composed: true,\n });\n }\n}\n"],"names":[],"mappings":"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"}
|