@genspectrum/dashboard-components 0.1.3 → 0.1.4

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: '',
     },
 };
 

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/display/aggregate-component.mdx

@@ -1,25 +0,0 @@
-import { ArgTypes, Description, Meta, Story, Title, Source } from '@storybook/blocks';
-
-import * as AggregateComponentStories from './aggregate-component.stories.ts';
-
-<Meta of={AggregateComponentStories} name='Docs' />
-
-<Title of={AggregateComponentStories} />
-
-<Description of={AggregateComponentStories} />
-
-## Specification
-
-<ArgTypes of={AggregateComponentStories} />
-
-## Example
-
-<Source
-    code={`<gs-aggregate-component fields="['division', 'host']" filter='{"country": "USA"}'></gs-aggregate-component>`}
-/>
-
-### Live Example
-
-[See here](?path=/story/visualization-aggregate--template)
-
-<Story of={AggregateComponentStories.Table} />

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} />