@genspectrum/dashboard-components 0.1.2 → 0.1.4

package/src/web-components/display/mutations-component.tsx

@@ -15,8 +15,21 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Array })
     views: View[] = ['table', 'grid'];
 
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
     override render() {
-        return <Mutations variant={this.variant} sequenceType={this.sequenceType} views={this.views} />;
+        return (
+            <Mutations variant={this.variant} sequenceType={this.sequenceType} views={this.views} size={this.size} />
+        );
     }
 }
 

package/src/web-components/display/prevalence-over-time-component.stories.ts

@@ -32,6 +32,7 @@ const meta: Meta<PrevalenceOverTimeProps> = {
             options: ['wilson'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
 };
 
@@ -39,18 +40,17 @@ export default meta;
 
 const Template: StoryObj<PrevalenceOverTimeProps> = {
     render: (args) => html`
-        <div class="w-11/12 h-11/12">
-            <gs-app lapis="${LAPIS_URL}">
-                <gs-prevalence-over-time
-                    .numerator=${args.numerator}
-                    .denominator=${args.denominator}
-                    .granularity=${args.granularity}
-                    .smoothingWindow=${args.smoothingWindow}
-                    .views=${args.views}
-                    .confidenceIntervalMethods=${args.confidenceIntervalMethods}
-                ></gs-prevalence-over-time>
-            </gs-app>
-        </div>
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-prevalence-over-time
+                .numerator=${args.numerator}
+                .denominator=${args.denominator}
+                .granularity=${args.granularity}
+                .smoothingWindow=${args.smoothingWindow}
+                .views=${args.views}
+                .confidenceIntervalMethods=${args.confidenceIntervalMethods}
+                .size=${args.size}
+            ></gs-prevalence-over-time>
+        </gs-app>
     `,
 };
 
@@ -66,6 +66,7 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {
@@ -131,6 +132,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {
@@ -176,9 +178,9 @@ export const OneVariantOnLineTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Line', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Line', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));
     },
 };
 
@@ -187,9 +189,9 @@ export const OneVariantOnBubbleTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Bubble', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Bubble', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' }));
     },
 };
 
@@ -198,8 +200,8 @@ export const OneVariantOnTableTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
     },
 };

package/src/web-components/display/prevalence-over-time-component.tsx

@@ -25,6 +25,17 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: Array })
     confidenceIntervalMethods: ConfidenceIntervalMethod[] = ['wilson'];
 
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
     override render() {
         return (
             <PrevalenceOverTime
@@ -34,6 +45,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
                 confidenceIntervalMethods={this.confidenceIntervalMethods}
+                size={this.size}
             />
         );
     }

package/src/web-components/display/relative-growth-advantage-component.stories.ts

@@ -19,6 +19,7 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             options: ['line'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
 };
 
@@ -26,16 +27,15 @@ export default meta;
 
 const Template: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args) => html`
-        <div class="w-11/12 h-11/12">
-            <gs-app lapis="${LAPIS_URL}">
-                <gs-relative-growth-advantage
-                    .numerator=${args.numerator}
-                    .denominator=${args.denominator}
-                    .generationTime=${args.generationTime}
-                    .views=${args.views}
-                ></gs-relative-growth-advantage>
-            </gs-app>
-        </div>
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-relative-growth-advantage
+                .numerator=${args.numerator}
+                .denominator=${args.denominator}
+                .generationTime=${args.generationTime}
+                .views=${args.views}
+                .size=${args.size}
+            ></gs-relative-growth-advantage>
+        </gs-app>
     `,
 };
 
@@ -46,6 +46,7 @@ export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {

package/src/web-components/display/relative-growth-advantage-component.tsx

@@ -18,6 +18,17 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     @property({ type: Array })
     views: View[] = ['line'];
 
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
     override render() {
         return (
             <RelativeGrowthAdvantage
@@ -25,6 +36,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 denominator={this.denominator}
                 generationTime={this.generationTime}
                 views={this.views}
+                size={this.size}
             />
         );
     }

package/src/web-components/input/date-range-selector-component.stories.ts

@@ -4,13 +4,22 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { LAPIS_URL } from '../../constants';
-import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import {
+    type DateRangeSelectorProps,
+    PRESET_VALUE_ALL_TIMES,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_2_MONTHS,
+    PRESET_VALUE_LAST_2_WEEKS,
+    PRESET_VALUE_LAST_3_MONTHS,
+    PRESET_VALUE_LAST_6_MONTHS,
+    PRESET_VALUE_LAST_MONTH,
+} from '../../preact/dateRangeSelector/date-range-selector';
 import './date-range-selector-component';
 import '../app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
-const meta: Meta<DateRangeSelectorProps> = {
+const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
     parameters: {
@@ -19,22 +28,44 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                PRESET_VALUE_CUSTOM,
+                PRESET_VALUE_ALL_TIMES,
+                PRESET_VALUE_LAST_2_WEEKS,
+                PRESET_VALUE_LAST_MONTH,
+                PRESET_VALUE_LAST_2_MONTHS,
+                PRESET_VALUE_LAST_3_MONTHS,
+                PRESET_VALUE_LAST_6_MONTHS,
+                'CustomDateRange',
+            ],
+        },
+    },
+    args: {
+        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        earliestDate: '1970-01-01',
+        initialValue: PRESET_VALUE_LAST_6_MONTHS,
+    },
     decorators: [withActions],
 };
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
+export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-date-range-selector
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
+                    .initialValue=${args.initialValue}
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,
-
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
         const dateTo = () => canvas.getByPlaceholderText('Date to');
@@ -46,8 +77,4 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
             });
         });
     },
-    args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
-        earliestDate: '1970-01-01',
-    },
 };

package/src/web-components/input/date-range-selector-component.tsx

@@ -1,27 +1,40 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import { type CustomSelectOption, DateRangeSelector } from '../../preact/dateRangeSelector/date-range-selector';
+import {
+    type CustomSelectOption,
+    DateRangeSelector,
+    type PresetOptionValues,
+} from '../../preact/dateRangeSelector/date-range-selector';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
  * @fires {CustomEvent<{ dateFrom: string; dateTo: string; }>} gs-date-range-changed - When the date range has changed
  */
 @customElement('gs-date-range-selector')
-export class DateRangeSelectorComponent extends PreactLitAdapter {
+export class DateRangeSelectorComponent<CustomLabel extends string> extends PreactLitAdapter {
     @property({ type: Array })
-    customSelectOptions: CustomSelectOption[] = [];
+    customSelectOptions: CustomSelectOption<CustomLabel>[] = [];
 
     @property({ type: String })
     earliestDate: string | undefined = '1900-01-01';
 
+    @property()
+    initialValue: PresetOptionValues | CustomLabel | string | undefined = '';
+
     override render() {
-        return <DateRangeSelector customSelectOptions={this.customSelectOptions} earliestDate={this.earliestDate} />;
+        return (
+            <DateRangeSelector
+                customSelectOptions={this.customSelectOptions}
+                earliestDate={this.earliestDate}
+                initialValue={this.initialValue}
+            />
+        );
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent<string>;
     }
 
     interface HTMLElementEventMap {

package/src/web-components/input/location-filter-component.stories.ts

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './location-filter-component';
@@ -14,12 +15,19 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const meta: Meta = {
     title: 'Input/Location filter',
     component: 'gs-location-filter',
-    parameters: {
+    parameters: withComponentDocs({
         actions: {
             handles: ['gs-location-changed'],
         },
-    },
+        componentDocs: {
+            tag: 'gs-location-filter',
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample: `<gs-location-filter fields="['continent', 'country']" value='Europe / Switzerland'></gs-location-filter>`,
+        },
+    }),
     decorators: [withActions],
+    tags: ['autodocs'],
 };
 
 export default meta;
@@ -28,13 +36,16 @@ const Template: StoryObj<LocationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-location-filter .fields=${args.fields} value=${ifDefined(args.value)}></gs-location-filter>
+                <gs-location-filter
+                    .fields=${args.fields}
+                    initialValue=${ifDefined(args.initialValue)}
+                ></gs-location-filter>
             </div>
         </gs-app>`;
     },
     args: {
         fields: ['region', 'country', 'division', 'location'],
-        value: '',
+        initialValue: '',
     },
 };
 
@@ -97,7 +108,7 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
                 {
                     matcher: aggregatedEndpointMatcher,
                     response: {
-                        status: 500,
+                        status: 400,
                         body: { error: 'no data' },
                     },
                 },
@@ -108,9 +119,7 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
 
         await waitFor(() =>
-            expect(
-                canvas.getByText('Internal Server Error: {"error":"no data"} ', { exact: false }),
-            ).toBeInTheDocument(),
+            expect(canvas.getByText('Bad Request: {"error":"no data"} ', { exact: false })).toBeInTheDocument(),
         );
     },
 };

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

@@ -4,10 +4,6 @@ import { LocationFilter } from '../../preact/locationFilter/location-filter';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
- * ## Tag
- *
- * `gs-location-filter`
- *
  * ## Context
  *
  * This component provides an input field to specify filters for locations.
@@ -41,7 +37,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
      */
     @property()
-    value = '';
+    initialValue = '';
 
     /**
      * The fields to display in the location filter, in hierarchical order.
@@ -53,7 +49,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
     fields: string[] = [];
 
     override render() {
-        return <LocationFilter value={this.value} fields={this.fields} />;
+        return <LocationFilter initialValue={this.initialValue} fields={this.fields} />;
     }
 }
 

package/src/web-components/input/mutation-filter-component.stories.ts

@@ -5,6 +5,7 @@ import { html } from 'lit';
 
 import { LAPIS_URL } from '../../constants';
 import '../app';
+import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './mutation-filter-component';
 
@@ -22,22 +23,32 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<{ lapisField: string; placeholderText: string }> = {
-    render: () => {
+const Template: StoryObj<MutationFilterProps> = {
+    render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-mutation-filter></gs-mutation-filter>
+                <gs-mutation-filter .initialValue=${args.initialValue}></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
+    args: {
+        initialValue: [],
+    },
+};
+
+export const Default: StoryObj<MutationFilterProps> = {
+    ...Template,
+    args: {
+        initialValue: ['A123T'],
+    },
 };
 
-export const FiresFilterChangedEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
-    ...Default,
+export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
+    ...Template,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
 
-        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const submitButton = () => canvas.getByRole('button', { name: '+' });
         const listenerMock = fn();
         await step('Setup event listener mock', async () => {
@@ -70,12 +81,12 @@ export const FiresFilterChangedEvent: StoryObj<{ lapisField: string; placeholder
     },
 };
 
-export const FiresFilterOnBlurEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
-    ...Default,
+export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
+    ...Template,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
 
-        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
         await step('Setup event listener mock', async () => {
             canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);

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

@@ -1,6 +1,7 @@
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 import { type TextInputComponent } from './text-input-component';
+import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type SelectedMutationFilterStrings } from '../../preact/mutationFilter/mutation-filter';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -10,8 +11,15 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  */
 @customElement('gs-mutation-filter')
 export class MutationFilterComponent extends PreactLitAdapter {
+    @property()
+    initialValue: SelectedMutationFilterStrings | string[] | undefined = undefined;
+
     override render() {
-        return <MutationFilter />;
+        return (
+            <ReferenceGenomesAwaiter>
+                <MutationFilter initialValue={this.initialValue} />
+            </ReferenceGenomesAwaiter>
+        );
     }
 }
 

package/src/web-components/input/text-input-component.stories.ts

@@ -7,6 +7,7 @@ import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './text-input-component';
 import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
+import type { TextInputProps } from '../../preact/textInput/text-input';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const meta: Meta = {
@@ -35,26 +36,30 @@ const meta: Meta = {
         },
     },
     decorators: [withActions],
-    tags: ['autodocs'],
 };
 
 export default meta;
 
-export const Default: StoryObj<{ lapisField: string; placeholderText: string }> = {
+export const Default: StoryObj<TextInputProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-text-input .lapisField=${args.lapisField} .placeholderText=${args.placeholderText}></gs-text-input>
+                <gs-text-input
+                    .lapisField=${args.lapisField}
+                    .placeholderText=${args.placeholderText}
+                    .initialValue=${args.initialValue}
+                ></gs-text-input>
             </div>
         </gs-app>`;
     },
     args: {
         lapisField: 'host',
         placeholderText: 'Enter host name',
+        initialValue: 'Homo sapiens',
     },
 };
 
-export const FiresEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
+export const FiresEvent: StoryObj<TextInputProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
@@ -89,4 +94,8 @@ export const FiresEvent: StoryObj<{ lapisField: string; placeholderText: string
             );
         });
     },
+    args: {
+        ...Default.args,
+        initialValue: '',
+    },
 };

package/src/web-components/input/text-input-component.tsx

@@ -8,14 +8,23 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  */
 @customElement('gs-text-input')
 export class TextInputComponent extends PreactLitAdapter {
+    @property()
+    initialValue: string | undefined = '';
+
     @property()
     lapisField = '';
 
     @property()
-    placeholderText = '';
+    placeholderText: string | undefined = '';
 
     override render() {
-        return <TextInput lapisField={this.lapisField} placeholderText={this.placeholderText} />;
+        return (
+            <TextInput
+                lapisField={this.lapisField}
+                placeholderText={this.placeholderText}
+                initialValue={this.initialValue}
+            />
+        );
     }
 }
 

package/src/web-components/input/location-filter.mdx

@@ -1,25 +0,0 @@
-import { ArgTypes, Description, Meta, Story, Title, Source } from '@storybook/blocks';
-
-import * as LocationFilterStories from './location-filter-component.stories.ts';
-
-<Meta of={LocationFilterStories} name='Docs' />
-
-<Title of={LocationFilterStories} />
-
-<Description of={LocationFilterStories} />
-
-## Specification
-
-<ArgTypes of={LocationFilterStories} />
-
-## Example
-
-<Source
-    code={`<gs-location-filter fields="['continent', 'country']" value='Europe / Switzerland'></gs-location-filter>`}
-/>
-
-### Live Example
-
-[See here](?path=/story/input-location-filter--location-filter)
-
-<Story of={LocationFilterStories.LocationFilter} />