@genspectrum/dashboard-components 0.10.2 → 0.10.3

package/src/preact/statistic/statistics.tsx

@@ -1,8 +1,9 @@
 import { type FunctionComponent } from 'preact';
 import { useContext } from 'preact/hooks';
+import z from 'zod';
 
 import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
-import { type LapisFilter } from '../../types';
+import { lapisFilterSchema } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
@@ -11,19 +12,20 @@ import { ResizeContainer } from '../components/resize-container';
 import { formatProportion } from '../shared/table/formatProportion';
 import { useQuery } from '../useQuery';
 
-export type StatisticsProps = {
-    width: string;
-    height: string;
-    numeratorFilter: LapisFilter;
-    denominatorFilter: LapisFilter;
-};
+const statisticsPropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    numeratorFilter: lapisFilterSchema,
+    denominatorFilter: lapisFilterSchema,
+});
+export type StatisticsProps = z.infer<typeof statisticsPropsSchema>;
 
 export const Statistics: FunctionComponent<StatisticsProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={statisticsPropsSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <StatisticsInner {...componentProps} />
             </ResizeContainer>

package/src/preact/textInput/text-input.stories.tsx

@@ -6,6 +6,7 @@ import { TextInput, type TextInputProps } from './text-input';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta<TextInputProps> = {
     title: 'Input/TextInput',
@@ -93,3 +94,16 @@ export const WithInitialValue: StoryObj<TextInputProps> = {
         });
     },
 };
+
+export const WithNoLapisField: StoryObj<TextInputProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapisField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/textInput/text-input.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
+import z from 'zod';
 
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -9,21 +10,25 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export interface TextInputInnerProps {
-    lapisField: string;
-    placeholderText: string;
-    initialValue: string;
-}
+const textInputInnerPropsSchema = z.object({
+    lapisField: z.string().min(1),
+    placeholderText: z.string().optional(),
+    initialValue: z.string().optional(),
+});
 
-export interface TextInputProps extends TextInputInnerProps {
-    width: string;
-}
+const textInputPropsSchema = textInputInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerProps }) => {
+export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
+export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+
+export const TextInput: FunctionComponent<TextInputProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textInputPropsSchema}>
             <ResizeContainer size={size}>
                 <TextInputInner {...innerProps} />
             </ResizeContainer>
@@ -76,7 +81,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
             <input
                 type='text'
                 class='input input-bordered w-full'
-                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
+                placeholder={placeholderText ?? lapisField}
                 onInput={onInput}
                 ref={inputRef}
                 list={lapisField}

package/src/query/queryAggregateData.ts

@@ -1,8 +1,9 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { SortOperator } from '../operator/SortOperator';
-import { type InitialSort } from '../preact/aggregatedData/aggregate';
 import { type LapisFilter } from '../types';
 
+export type InitialSort = { field: string; direction: 'ascending' | 'descending' };
+
 export type AggregateData = (Record<string, string | null | number | boolean> & {
     count: number;
     proportion: number;

package/src/types.ts

@@ -18,7 +18,13 @@ export const namedLapisFilterSchema = z.object({
 });
 export type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;
 
-export type TemporalGranularity = 'day' | 'week' | 'month' | 'year';
+export const temporalGranularitySchema = z.union([
+    z.literal('day'),
+    z.literal('week'),
+    z.literal('month'),
+    z.literal('year'),
+]);
+export type TemporalGranularity = z.infer<typeof temporalGranularitySchema>;
 
 export const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);
 export type SequenceType = z.infer<typeof sequenceTypeSchema>;
@@ -53,6 +59,11 @@ export type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;
 export const views = {
     table: 'table',
     venn: 'venn',
+    grid: 'grid',
+    insertions: 'insertions',
+    bar: 'bar',
+    line: 'line',
+    bubble: 'bubble',
 } as const;
 
 export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);

package/src/utilEntrypoint.ts

@@ -11,4 +11,11 @@ export {
     type SequenceType,
     views,
     type MutationComparisonView,
+    type TemporalGranularity,
 } from './types';
+
+export { type SelectedMutationFilterStrings } from './preact/mutationFilter/mutation-filter';
+
+export { type ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
+
+export { type AxisMax, type YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';

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

@@ -57,6 +57,21 @@ export const Default: StoryObj<{ lapis: string }> = {
     },
 };
 
+export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapis: 'notAValidUrl',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        });
+    },
+};
+
 export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     parameters: {
@@ -83,13 +98,13 @@ export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
 export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     args: {
-        lapis: 'definitely-not-a-valid-url',
+        lapis: 'https://url.to.lapis-definitely-not-a-valid-url',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
         await waitFor(() => {
-            expect(canvas.getByText('Error', { exact: false })).toBeVisible();
+            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

package/src/web-components/app.ts

@@ -3,12 +3,15 @@ import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import z from 'zod';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
 
+const lapisUrlSchema = z.string().url();
+
 /**
  * ## Context
  *
@@ -50,7 +53,9 @@ export class App extends LitElement {
      */
     private updateReferenceGenome = new Task(this, {
         task: async () => {
-            this.referenceGenome = await fetchReferenceGenome(this.lapis);
+            const lapisUrl = lapisUrlSchema.parse(this.lapis);
+
+            this.referenceGenome = await fetchReferenceGenome(lapisUrl);
         },
         args: () => [this.lapis],
     });
@@ -58,10 +63,13 @@ export class App extends LitElement {
     override render() {
         return this.updateReferenceGenome.render({
             complete: () => html``, // Children will be rendered in the light DOM anyway. We can't use slots without a shadow DOM.
-            error: () =>
-                html` <div class="m-2 w-full alert alert-error">
-                    Error: Cannot fetch reference genome. Is LAPIS available?
-                </div>`,
+            error: (error) => {
+                if (error instanceof z.ZodError) {
+                    return GsAppError(`Invalid LAPIS URL: '${this.lapis}'`);
+                }
+
+                return GsAppError('Cannot fetch reference genome. Is LAPIS available?');
+            },
         });
     }
 
@@ -70,6 +78,10 @@ export class App extends LitElement {
     }
 }
 
+function GsAppError(error: string) {
+    return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-app': App;

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

@@ -60,6 +60,7 @@ const Template: StoryObj<MutationFilterProps> = {
 export const Default: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
+        ...Template.args,
         initialValue: ['A123T'],
     },
 };
@@ -105,6 +106,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
+        ...Template.args,
         initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'],
     },
     parameters: {

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

@@ -27,7 +27,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The initial value to use for this text input.
      */
     @property()
-    initialValue: string = '';
+    initialValue: string | undefined = undefined;
 
     /**
      * Required.
@@ -42,7 +42,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     /**
      * The width of the component.

package/src/web-components/introduction.mdx

@@ -24,10 +24,10 @@ data of a specific instance of [LAPIS](https://github.com/GenSpectrum/LAPIS).
 
 We primarily provide two kinds of components:
 
--   Visualization components (charts, tables, etc.).
-    Those components fetch data from the LAPIS instance and visualize it.
--   Input components that let you specify sequence filters for the LAPIS requests.
-    Input changes will fire events that can be listened to by the visualization components. It is the responsibility of the dashbaord maintainer to listen to those events and to wire the data correctly into the visualization components.
+- Visualization components (charts, tables, etc.).
+  Those components fetch data from the LAPIS instance and visualize it.
+- Input components that let you specify sequence filters for the LAPIS requests.
+  Input changes will fire events that can be listened to by the visualization components. It is the responsibility of the dashbaord maintainer to listen to those events and to wire the data correctly into the visualization components.
 
 ## Installation
 

package/src/web-components/visualization/data_visualization_statistical_analysis.mdx

@@ -12,9 +12,9 @@ By default, it is set to a linear scale.
 
 In general, for each scale the displayed height of a value is calculated by applying the corresponding scale function.
 
--   Linear: `value`
--   Logarithmic: `ln(value)`
--   Logistic: `ln(value / (1 - value))`
+- Linear: `value`
+- Logarithmic: `ln(value)`
+- Logistic: `ln(value / (1 - value))`
 
 ## Confidence Intervals
 

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

@@ -33,9 +33,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
-     * LAPIS filter to select the displayed data.
+     * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     @property({ type: Object })
     lapisFilter: Record<string, string | number | null | boolean> = {};

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

@@ -35,9 +35,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 @customElement('gs-mutations')
 export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
-     * LAPIS filter to select the displayed data.
+     * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     @property({ type: Object })
     lapisFilter: Record<string, string | number | null | boolean> = {};

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

@@ -25,8 +25,6 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
-     * Required.
-     *
      * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
@@ -54,7 +52,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * A list of tabs with views that this component should provide.

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

@@ -47,7 +47,6 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
-     *   Required.
      * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
@@ -57,7 +56,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * It should be human-readable.
      *
      */
-    @property({type: Object})
+    @property({ type: Object })
     numeratorFilter:
         {
             lapisFilter: Record<string, string | number | null | boolean>;
@@ -66,11 +65,9 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
         | {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
-    }[] = {displayName: '', lapisFilter: {}};
+    }[] = { displayName: '', lapisFilter: {} };
 
     /**
-     * Required.
-     *
      * The LAPIS filter, to select the data of the reference.
      * It must be a valid LAPIS filter object.
      */
@@ -133,7 +130,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * The maximum number of rows to display in the table view.

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

@@ -38,8 +38,6 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
-     * Required.
-     *
      * LAPIS filter to select the data of the focal variant.
      * It must be a valid LAPIS filter object.
      */
@@ -47,8 +45,6 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     numeratorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
-     * Required.
-     *
      * LAPIS filter to select the data of the baseline variant.
      * It must be a valid LAPIS filter object.
      */
@@ -92,7 +88,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * The maximum value for the y-axis on all graphs in linear view.