@genspectrum/dashboard-components 0.16.4 → 0.17.0

package/src/web-components/errorHandling.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title='Components/Error Handling' />
+<Meta title='Concepts/Error Handling' />
 
 # Error Handling
 

package/src/web-components/gs-app.ts

@@ -44,8 +44,8 @@ export class AppComponent extends LitElement {
 
     /**
      * Supply lists of mutations that are especially relevant for the current organism.
-     * Whenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.
-     * On hover, a tooltip with the `name` and `description` will be shown.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.
      */
     @provide({ context: mutationAnnotationsContext })
     @property({ type: Array })

package/src/web-components/input/gs-date-range-filter.stories.ts

@@ -19,6 +19,7 @@ const codeExample = String.raw`
     value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
+    placeholder="My date column"
 ></gs-date-range-filter>`;
 
 const customDateRange = { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' };
@@ -39,25 +40,20 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
     }),
     argTypes: {
         value: {
-            control: {
-                type: 'object',
-            },
+            control: { type: 'object' },
         },
         lapisDateField: { control: { type: 'text' } },
         dateRangeOptions: {
-            control: {
-                type: 'object',
-            },
+            control: { type: 'object' },
         },
         earliestDate: {
-            control: {
-                type: 'text',
-            },
+            control: { type: 'text' },
         },
         width: {
-            control: {
-                type: 'text',
-            },
+            control: { type: 'text' },
+        },
+        placeholder: {
+            control: { type: 'text' },
         },
     },
     args: {
@@ -72,6 +68,7 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
         value: dateRangeOptionPresets.lastMonth.label,
         lapisDateField: 'aDateColumn',
         width: '100%',
+        placeholder: 'Date range',
     },
     tags: ['autodocs'],
 };
@@ -88,6 +85,7 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
                     .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
+                    .placeholder=${args.placeholder}
                 ></gs-date-range-filter>
             </div>
         </gs-app>`,
@@ -103,14 +101,15 @@ export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryOb
                     value="${args.value}"
                     width="${args.width}"
                     lapisDateField="${args.lapisDateField}"
+                    placeholder="${args.placeholder}"
                 ></gs-date-range-filter>
             </div>
         </gs-app>`,
     play: async ({ canvasElement }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
-
         await waitFor(async () => {
-            await expect(selectField(canvas)).toHaveValue('Last month');
+            const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
+            const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked');
+            await expect(placeholderOption).toHaveTextContent('Last month');
         });
     },
     argTypes: {
@@ -150,7 +149,10 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
         });
 
         await step('Expect last 6 months to be selected', async () => {
-            await expect(selectField(canvas)).toHaveValue('Last month');
+            await waitFor(async () => {
+                const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked');
+                await expect(placeholderOption).toHaveTextContent('Last month');
+            });
             await waitFor(async () => {
                 await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
             });
@@ -158,22 +160,26 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
 
         await step('Expect event to be fired when selecting a different value', async () => {
             await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
-            await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo);
-
-            await expect(filterChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        aDateColumnFrom: customDateRange.dateFrom,
-                        aDateColumnTo: customDateRange.dateTo,
-                    },
-                }),
-            );
-
-            await expect(optionChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: customDateRange.label,
-                }),
-            );
+            await userEvent.click(canvas.getByText('CustomDateRange'));
+
+            await waitFor(async () => {
+                await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo);
+
+                await expect(filterChangedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            aDateColumnFrom: customDateRange.dateFrom,
+                            aDateColumnTo: customDateRange.dateTo,
+                        },
+                    }),
+                );
+
+                await expect(optionChangedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: customDateRange.label,
+                    }),
+                );
+            });
         });
     },
 };

package/src/web-components/input/gs-date-range-filter.tsx

@@ -73,7 +73,6 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
      * - If it is a string, then it must be a valid label from the `dateRangeOptions`.
      * - If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.
      *   Keys that are not set will default to the `earliestDate` or the current date respectively.
-     * - If the attribute is not set, the component will default to the range `earliestDate` until today.
      *
      * The `detail` of the `gs-date-range-option-changed` event can be used for this attribute,
      * if you want to control this component in your JS application.
@@ -99,11 +98,17 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * The placeholder to display on the select dropdown.
+     */
+    @property({ type: String })
+    placeholder: string | undefined = undefined;
+
     /**
      * The name of the metadata field in LAPIS that contains the date information.
      */
@@ -118,6 +123,7 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
                 value={this.value}
                 lapisDateField={this.lapisDateField}
                 width={this.width}
+                placeholder={this.placeholder}
             />
         );
     }

package/src/web-components/input/gs-lineage-filter.tsx

@@ -67,7 +67,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-location-filter.tsx

@@ -65,7 +65,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-mutation-filter.tsx

@@ -75,7 +75,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-text-filter.tsx

@@ -61,7 +61,7 @@ export class TextFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/visualization/gs-aggregate.tsx

@@ -64,7 +64,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -72,7 +72,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -16,6 +16,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  *
  * It only shows substitutions and deletions, it does not show insertions.
  *
+ * This component supports mutations annotations.
+ * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.
+ *
  * ## Views
  *
  * ### Table View
@@ -71,7 +74,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -79,7 +82,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -15,6 +15,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  * The shown date range is determined by the date field in the LAPIS filter.
  * If the date field is not set, the date range is determined by all available dates in the dataset.
  *
+ * This component supports mutations annotations.
+ * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.
+ *
  * ## Views
  *
  * ### Grid View
@@ -65,7 +68,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -73,7 +76,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-mutations.tsx

@@ -13,6 +13,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  *
  * This component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.
  *
+ * This component supports mutations annotations.
+ * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.
+ *
  * ## Views
  *
  * ### Table View
@@ -103,7 +106,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -111,7 +114,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -61,7 +61,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -69,7 +69,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -112,7 +112,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -120,7 +120,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -76,7 +76,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -84,7 +84,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-sequences-by-location.tsx

@@ -140,7 +140,7 @@ export class SequencesByLocationComponent extends PreactLitAdapterWithGridJsStyl
      * Not that the map in the map view is not responsive
      * (i.e. does not adjust its size when the component is resized).
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -148,7 +148,7 @@ export class SequencesByLocationComponent extends PreactLitAdapterWithGridJsStyl
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/visualization/gs-statistics.tsx

@@ -40,7 +40,7 @@ export class StatisticsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -48,7 +48,7 @@ export class StatisticsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;

package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx

@@ -55,7 +55,7 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';
@@ -63,7 +63,7 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
      */
     @property({ type: String })
     height: string | undefined = undefined;