@genspectrum/dashboard-components 0.16.3 → 0.17.0

package/src/preact/shared/stories/expectMutationAnnotation.ts

@@ -0,0 +1,13 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+export async function expectMutationAnnotation(canvasElement: HTMLElement, mutation: string) {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+        const annotatedMutation = canvas.getAllByText(mutation)[0];
+        await expect(annotatedMutation).toBeVisible();
+        await userEvent.click(annotatedMutation);
+    });
+
+    await waitFor(() => expect(canvas.getByText(`Annotations for ${mutation}`)).toBeVisible());
+}

package/src/preact/shared/stories/expectOptionSelected.tsx

@@ -0,0 +1,7 @@
+import { expect, within } from '@storybook/test';
+
+export const expectOptionSelected = async (canvasElement: HTMLElement, option: string) => {
+    const canvas = within(canvasElement);
+    const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked');
+    await expect(placeholderOption).toHaveTextContent(option);
+};

package/src/utilEntrypoint.ts

@@ -1,6 +1,6 @@
 export {
     type DateRangeOption,
-    type DateRangeSelectOption,
+    type DateRangeValue,
     dateRangeOptionPresets,
     DateRangeOptionChangedEvent,
 } from './preact/dateRangeFilter/dateRangeOption';
@@ -36,3 +36,5 @@ export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
 export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
 export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';
+
+export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';

package/src/web-components/MutationAnnotations.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Concepts/Mutation Annotations' />
+
+# Mutation Annotations
+
+Organism data usually has a lot of mutations.
+It can be challenging for users to find out which mutations are relevant to investigate.
+To guide the user to the most interesting mutations, we provide a mutation annotation feature.
+
+The mutation annotations can be (optionally) supplied to `gs-app` as a JSON object:
+
+```html
+<gs-app
+    lapis="https://your.lapis.url"
+    mutationAnnotations="[
+        {
+            name: 'I am an annotation!',
+            description: 'This describes what is special about these mutations.',
+            symbol: '+',
+            nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+            aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+        },
+    ]"
+>
+    {/* children... */}
+</gs-app>
+```
+
+The mutation annotations are then distributed to child components.
+Whenever we display a mutation (e.g. in the `gs-mutations` table view)
+we will append the `symbol` of all matching annotations: <span>C44T<sup class='text-red-600'>+</sup></span>.
+Users can click on the mutation to open a modal that shows the `name` and `description` of the annotation.

package/src/web-components/ResizeContainer.mdx

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

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.stories.ts

@@ -50,9 +50,26 @@ const meta: Meta<Required<MutationComparisonProps>> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['G199-', 'C3037T'],
+        aminoAcidMutations: ['N:G204R'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'A23403G'],
+        aminoAcidMutations: ['ORF1a:I2230T'],
+    },
+];
+
 const Template: StoryObj<Required<MutationComparisonProps>> = {
     render: (args) => html`
-        <gs-app lapis="${LAPIS_URL}">
+        <gs-app lapis="${LAPIS_URL}" .mutationAnnotations=${mutationAnnotations}>
             <gs-mutation-comparison
                 .lapisFilters=${args.lapisFilters}
                 .sequenceType=${args.sequenceType}

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

@@ -1,9 +1,12 @@
+import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
 /**
  * ## Context
@@ -13,6 +16,9 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * 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
@@ -68,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%';
@@ -76,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;
@@ -88,16 +94,24 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * @internal
+     */
+    @consume({ context: mutationAnnotationsContext, subscribe: true })
+    mutationAnnotations: MutationAnnotations = [];
+
     override render() {
         return (
-            <MutationComparison
-                lapisFilters={this.lapisFilters}
-                sequenceType={this.sequenceType}
-                views={this.views}
-                width={this.width}
-                height={this.height}
-                pageSize={this.pageSize}
-            />
+            <MutationAnnotationsContextProvider value={this.mutationAnnotations}>
+                <MutationComparison
+                    lapisFilters={this.lapisFilters}
+                    sequenceType={this.sequenceType}
+                    views={this.views}
+                    width={this.width}
+                    height={this.height}
+                    pageSize={this.pageSize}
+                />
+            </MutationAnnotationsContextProvider>
         );
     }
 }

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

@@ -67,7 +67,8 @@ export default meta;
 const mutationAnnotations = [
     {
         name: 'I am a mutation annotation!',
-        description: 'This describes what is special about these mutations.',
+        description:
+            'This describes what is special about these mutations. <a class="link" href="/">And it has a link.</a>',
         symbol: '#',
         nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],

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.stories.ts

@@ -71,7 +71,8 @@ export default meta;
 const mutationAnnotations = [
     {
         name: 'I am a mutation annotation!',
-        description: 'This describes what is special about these mutations.',
+        description:
+            'This describes what is special about these mutations. <a class="link" href="/">And it has a link.</a>',
         symbol: '#',
         nucleotideMutations: ['C241T', 'C3037T'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],

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;