@genspectrum/dashboard-components 0.10.0 → 0.10.2

package/src/preact/components/min-max-range-slider.tsx

@@ -75,8 +75,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 type='range'
                 value={min}
                 onInput={onMinChange}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 style={{ background, zIndex: 1, height: 0 }}
             />
@@ -84,8 +84,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 id='toSlider'
                 type='range'
                 value={max}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 onInput={onMaxChange}
                 style={{ background, zIndex: zIndexTo }}

package/src/preact/components/percent-intput.tsx

@@ -44,8 +44,8 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({
             <input
                 type='number'
                 step={0.1}
-                min={0}
-                max={100}
+                min='0'
+                max='100'
                 value={internalPercentage}
                 onInput={handleInputChange}
                 lang='en'

package/src/preact/dateRangeSelector/computeInitialValues.spec.ts

@@ -50,9 +50,15 @@ describe('computeInitialValues', () => {
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should fall back to default when initial value is unknown', () => {
+    it('should throw when initial value is unknown', () => {
+        expect(() =>
+            computeInitialValues('not a known value', undefined, undefined, earliestDate, dateRangeOptions),
+        ).toThrowError(/Invalid initialValue "not a known value", It must be one of/);
+    });
+
+    it('should throw when initial value is set but no options are provided', () => {
         expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
-            /Invalid initialValue "not a known value", It must be one of/,
+            /There are no selectable options/,
         );
     });
 

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -18,6 +18,12 @@ export function computeInitialValues(
         const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
         if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            if (selectableOptions.length === 0) {
+                throw new UserFacingError(
+                    'Invalid initialValue',
+                    'There are no selectable options, but initialValue is set.',
+                );
+            }
             throw new UserFacingError(
                 'Invalid initialValue',
                 `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -8,6 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const earliestDate = '1970-01-01';
 
@@ -55,8 +56,8 @@ const meta: Meta<DateRangeSelectorProps> = {
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
-        initialDateFrom: '',
-        initialDateTo: '',
+        initialDateFrom: undefined,
+        initialDateTo: undefined,
     },
 };
 
@@ -221,6 +222,19 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
+export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        dateColumn: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,10 +1,11 @@
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import { type DateRangeOption, DateRangeOptionChangedEvent, type DateRangeSelectOption } from './dateRangeOption';
+import { DateRangeOptionChangedEvent, dateRangeOptionSchema, type DateRangeSelectOption } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
@@ -12,24 +13,28 @@ import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
-export interface DateRangeSelectorProps extends DateRangeSelectorPropsInner {
-    width: string;
-}
+const dateRangeSelectorInnerPropsSchema = z.object({
+    dateRangeOptions: z.array(dateRangeOptionSchema),
+    earliestDate: z.string().date(),
+    initialValue: z.string().optional(),
+    initialDateFrom: z.string().date().optional(),
+    initialDateTo: z.string().date().optional(),
+    dateColumn: z.string().min(1),
+});
 
-export interface DateRangeSelectorPropsInner {
-    dateRangeOptions: DateRangeOption[];
-    earliestDate: string;
-    initialValue: string | undefined;
-    initialDateFrom: string;
-    initialDateTo: string;
-    dateColumn: string;
-}
+const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorProps) => {
+export type DateRangeSelectorProps = z.infer<typeof dateRangeSelectorPropsSchema>;
+export type DateRangeSelectorInnerProps = z.infer<typeof dateRangeSelectorInnerPropsSchema>;
+
+export const DateRangeSelector = (props: DateRangeSelectorProps) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeSelectorPropsSchema}>
             <div style={{ width }}>
                 <DateRangeSelectorInner {...innerProps} />
             </div>
@@ -44,7 +49,7 @@ export const DateRangeSelectorInner = ({
     dateColumn,
     initialDateFrom,
     initialDateTo,
-}: DateRangeSelectorPropsInner) => {
+}: DateRangeSelectorInnerProps) => {
     const initialValues = computeInitialValues(
         initialValue,
         initialDateFrom,

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -1,24 +1,29 @@
+import z from 'zod';
+
 import { toYYYYMMDD } from './dateConversion';
 
 /**
  * A date range option that can be used in the `gs-date-range-selector` component.
  */
-export type DateRangeOption = {
+export const dateRangeOptionSchema = z.object({
     /** The label of the date range option that will be shown to the user */
-    label: string;
+    label: z.string(),
     /**
      * The start date of the date range in the format `YYYY-MM-DD`.
      * If not set, the date range selector will default to the `earliestDate` property.
      */
-    dateFrom?: string;
+    dateFrom: z.string().date().optional(),
     /**
      * The end date of the date range in the format `YYYY-MM-DD`.
      * If not set, the date range selector will default to the current date.
      */
-    dateTo?: string;
-};
+    dateTo: z.string().date().optional(),
+});
+
+export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
 export type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };
+
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption) {
         super('gs-date-range-option-changed', {

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -5,6 +5,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta = {
     title: 'Input/LineageFilter',
@@ -31,6 +32,12 @@ const meta: Meta = {
             ],
         },
     },
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: '',
+        width: '100%',
+    },
 };
 
 export default meta;
@@ -46,10 +53,17 @@ export const Default: StoryObj<LineageFilterProps> = {
             />
         </LapisUrlContext.Provider>
     ),
+};
+
+export const WithNoLapisField: StoryObj<LineageFilterProps> = {
+    ...Default,
     args: {
-        lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: '',
-        width: '100%',
+        ...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/lineageFilter/lineage-filter.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
+import z from 'zod';
 
 import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 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 LineageFilterInnerProps {
-    lapisField: string;
-    placeholderText: string;
-    initialValue: string;
-}
+const lineageFilterInnerPropsSchema = z.object({
+    lapisField: z.string().min(1),
+    placeholderText: z.string().optional(),
+    initialValue: z.string(),
+});
 
-export interface LineageFilterProps extends LineageFilterInnerProps {
-    width: string;
-}
+const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const LineageFilter: FunctionComponent<LineageFilterProps> = ({ width, ...innerProps }) => {
+export type LineageFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
+export type LineageFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+
+export const LineageFilter: FunctionComponent<LineageFilterProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={lineageFilterPropsSchema}>
             <ResizeContainer size={size}>
                 <LineageFilterInner {...innerProps} />
             </ResizeContainer>

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -5,6 +5,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 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<LocationFilterProps> = {
     title: 'Input/LocationFilter',
@@ -75,3 +76,16 @@ export const Primary: StoryObj<LocationFilterProps> = {
         </LapisUrlContext.Provider>
     ),
 };
+
+export const WithNoFields: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        fields: [],
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'Array must contain at least 1 element(s)');
+        });
+    },
+};

package/src/preact/locationFilter/location-filter.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
+import z from 'zod';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -9,21 +10,25 @@ import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export interface LocationFilterInnerProps {
-    initialValue: string;
-    placeholderText: string;
-    fields: string[];
-}
+const lineageFilterInnerPropsSchema = z.object({
+    initialValue: z.string().optional(),
+    placeholderText: z.string().optional(),
+    fields: z.array(z.string()).min(1),
+});
 
-export interface LocationFilterProps extends LocationFilterInnerProps {
-    width: string;
-}
+const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, ...innerProps }) => {
+export type LocationFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
+export type LocationFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+
+export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={lineageFilterPropsSchema}>
             <ResizeContainer size={size}>
                 <LocationFilterInner {...innerProps} />
             </ResizeContainer>

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -1,7 +1,7 @@
 import { type ActiveElement, Chart, type ChartConfiguration, type ChartEvent, registerables } from 'chart.js';
 import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
 import { type FunctionComponent } from 'preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
@@ -19,8 +19,6 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     data,
     proportionInterval,
 }) => {
-    const divRef = useRef<HTMLDivElement>(null);
-    const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
     const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
 
     const sets = useMemo(
@@ -45,20 +43,6 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
         [data, proportionInterval],
     );
 
-    useEffect(() => {
-        if (divRef.current === null) {
-            return;
-        }
-        if (selectedDatasetIndex === null) {
-            divRef.current.innerText = noElementSelectedMessage;
-            return;
-        }
-
-        const values = sets.datasets[0].data[selectedDatasetIndex].values;
-        const label = sets.datasets[0].data[selectedDatasetIndex].label;
-        divRef.current!.innerText = `${label}: ${values.join(', ')}` || '';
-    }, [divRef, selectedDatasetIndex, sets]);
-
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'venn',
@@ -119,7 +103,22 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <div class='flex flex-wrap break-words m-2' ref={divRef} />
+            <p class='flex flex-wrap break-words m-2'>{getSelectedMutationsDescription(selectedDatasetIndex, sets)}</p>
         </div>
     );
 };
+
+const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
+
+function getSelectedMutationsDescription(
+    selectedDatasetIndex: number | null,
+    sets: ReturnType<typeof extractSets<string>>,
+) {
+    if (selectedDatasetIndex === null) {
+        return noElementSelectedMessage;
+    }
+
+    const values = sets.datasets[0].data[selectedDatasetIndex].values;
+    const label = sets.datasets[0].data[selectedDatasetIndex].label;
+    return `${label}: ${values.join(', ')}` || '';
+}

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -1,11 +1,17 @@
 import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import { type NamedLapisFilter, type SequenceType } from '../../types';
+import {
+    type MutationComparisonView,
+    mutationComparisonViewSchema,
+    namedLapisFilterSchema,
+    sequenceTypeSchema,
+} from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -21,23 +27,23 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-export type View = 'table' | 'venn';
+const mutationComparisonPropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    lapisFilters: z.array(namedLapisFilterSchema).min(1),
+    sequenceType: sequenceTypeSchema,
+    views: z.array(mutationComparisonViewSchema),
+    pageSize: z.union([z.boolean(), z.number()]),
+});
 
-export interface MutationComparisonProps {
-    width: string;
-    height: string;
-    lapisFilters: NamedLapisFilter[];
-    sequenceType: SequenceType;
-    views: View[];
-    pageSize: boolean | number;
-}
+export type MutationComparisonProps = z.infer<typeof mutationComparisonPropsSchema>;
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} componentProps={componentProps} schema={mutationComparisonPropsSchema}>
             <ResizeContainer size={size}>
                 <MutationComparisonInner {...componentProps} />
             </ResizeContainer>
@@ -86,7 +92,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         [data, displayedSegments, displayedMutationTypes],
     );
 
-    const getTab = (view: View) => {
+    const getTab = (view: MutationComparisonView) => {
         switch (view) {
             case 'table':
                 return {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -303,7 +303,6 @@ const SelectedFilter = ({ handleRemoveValue, mutationFilter }: SelectedFilterPro
     return (
         <span
             key={mutationFilter.value.toString()}
-            name={mutationFilter.value.toString()}
             className='center p-2 m-1 inline-flex text-black rounded-md'
             style={{
                 backgroundColor: backgroundColorMap(mutationFilter),