@genspectrum/dashboard-components 0.10.1 → 0.10.2

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -54,7 +54,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 <MutationCell mutation={mutation} />
                             </div>
                             {dates.map((date, columnIndex) => {
-                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0, totalCount: 0 };
+                                const value = data.get(mutation, date) ?? null;
                                 const tooltipPosition = getTooltipPosition(
                                     rowIndex,
                                     shownMutations.length,
@@ -106,10 +106,16 @@ const ProportionCell: FunctionComponent<{
             </p>
             <p>({timeIntervalDisplay(dateClass)})</p>
             <p>{mutation.code}</p>
-            <p>Proportion: {formatProportion(value.proportion)}</p>
-            <p>
-                Count: {value.count} / {value.totalCount} total
-            </p>
+            {value === null ? (
+                <p>No data</p>
+            ) : (
+                <>
+                    <p>Proportion: {formatProportion(value.proportion)}</p>
+                    <p>
+                        Count: {value.count} / {value.totalCount} total
+                    </p>
+                </>
+            )}
         </div>
     );
 
@@ -118,12 +124,14 @@ const ProportionCell: FunctionComponent<{
             <Tooltip content={tooltipContent} position={tooltipPosition}>
                 <div
                     style={{
-                        backgroundColor: getColorWithingScale(value.proportion, colorScale),
-                        color: getTextColorForScale(value.proportion, colorScale),
+                        backgroundColor: getColorWithingScale(value?.proportion, colorScale),
+                        color: getTextColorForScale(value?.proportion, colorScale),
                     }}
                     className={`w-full h-full text-center hover:font-bold text-xs group @container`}
                 >
-                    <span className='invisible @[2rem]:visible'>{formatProportion(value.proportion, 0)}</span>
+                    <span className='invisible @[2rem]:visible'>
+                        {value === null ? '' : formatProportion(value.proportion, 0)}
+                    </span>
                 </div>
             </Tooltip>
         </div>

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -72,11 +72,9 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
         };
     }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
 
-    const worker = useMemo(() => new MutationOverTimeWorker(), []);
-
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         messageToWorker,
-        worker,
+        MutationOverTimeWorker,
     );
 
     if (isLoading) {

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

@@ -0,0 +1,13 @@
+import { expect, waitFor, within } from '@storybook/test';
+
+export async function expectInvalidAttributesErrorMessage(canvasElement: HTMLElement, errorMessage: string) {
+    const canvas = within(canvasElement);
+
+    await waitFor(() =>
+        expect(canvas.getByText('Error - Invalid component attributes', { exact: false })).toBeInTheDocument(),
+    );
+
+    canvas.getByRole('button', { name: 'Show details.' }).click();
+
+    await waitFor(() => expect(canvas.getByText(errorMessage, { exact: false })).toBeVisible());
+}

package/src/preact/webWorkers/useWebWorker.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useMemo, useState } from 'preact/hooks';
 
 import { UserFacingError } from '../components/error-display';
 
@@ -23,12 +23,14 @@ export type ErrorWorkerStatus =
       };
 export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
 
-export function useWebWorker<Request, Response>(messageToWorker: Request, worker: Worker) {
+export function useWebWorker<Request, Response>(messageToWorker: Request, WorkerConstructor: new () => Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);
 
-    useEffect(() => {
+    const worker = useMemo(() => {
+        const worker = new WorkerConstructor();
+
         worker.onmessage = (event: MessageEvent<WorkerStatus<Response>>) => {
             const eventData = event.data;
             const status = eventData.status;
@@ -59,7 +61,9 @@ export function useWebWorker<Request, Response>(messageToWorker: Request, worker
             setError(new Error(`Worker received a message that it cannot deserialize: ${event.data}`));
             setIsLoading(false);
         };
-    }, [worker]);
+
+        return worker;
+    }, [WorkerConstructor]);
 
     useEffect(() => {
         worker.postMessage(messageToWorker);

package/src/query/queryMutationsOverTime.spec.ts

@@ -99,12 +99,8 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -250,17 +246,9 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
-            [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0.3, count: 3, totalCount: 13 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
+            [{ proportion: 0.1, count: 1, totalCount: 11 }, null, { proportion: 0.3, count: 3, totalCount: 13 }],
         ]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
@@ -368,7 +356,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([]);
         expect(mutationOverTimeData.getFirstAxisKeys()).to.deep.equal([]);
         expect(mutationOverTimeData.getSecondAxisKeys()).to.deep.equal([]);
     });
@@ -450,7 +438,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { proportion: 0.2, count: 2, totalCount: 11 },
                 { proportion: 0.3, count: 3, totalCount: 12 },
@@ -542,7 +530,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -605,7 +593,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 {
                     proportion: 0.2,
@@ -699,11 +687,8 @@ describe('queryMutationsOverTime', () => {
             granularity: 'month',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -740,7 +725,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'month',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
         expect(sequences.length).toBe(0);

package/src/query/queryMutationsOverTime.ts

@@ -41,7 +41,7 @@ export type MutationOverTimeData = {
     totalCount: number;
 };
 
-export type MutationOverTimeMutationValue = { proportion: number; count: number; totalCount: number };
+export type MutationOverTimeMutationValue = { proportion: number; count: number; totalCount: number } | null;
 export type MutationOverTimeDataGroupedByMutation = Map2d<
     SubstitutionClass | DeletionClass,
     TemporalClass,
@@ -239,11 +239,7 @@ export function groupByMutation(
 
     sortedOverallMutationData.forEach((mutationData) => {
         sortedDates.forEach((date) => {
-            dataArray.set(mutationData, date, {
-                count: 0,
-                proportion: 0,
-                totalCount: 0,
-            });
+            dataArray.set(mutationData, date, null);
         });
     });
 

package/src/types.ts

@@ -1,3 +1,5 @@
+import z from 'zod';
+
 import {
     type Deletion,
     type DeletionClass,
@@ -7,16 +9,19 @@ import {
     type SubstitutionClass,
 } from './utils/mutations';
 
-export type LapisFilter = Record<string, string | number | null | boolean>;
+export const lapisFilterSchema = z.record(z.union([z.string(), z.number(), z.null(), z.boolean()]));
+export type LapisFilter = z.infer<typeof lapisFilterSchema>;
 
-export type NamedLapisFilter = {
-    lapisFilter: LapisFilter;
-    displayName: string;
-};
+export const namedLapisFilterSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    displayName: z.string(),
+});
+export type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;
 
 export type TemporalGranularity = 'day' | 'week' | 'month' | 'year';
 
-export type SequenceType = 'nucleotide' | 'amino acid';
+export const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);
+export type SequenceType = z.infer<typeof sequenceTypeSchema>;
 
 export type SubstitutionOrDeletion = 'substitution' | 'deletion';
 
@@ -44,3 +49,11 @@ export type SubstitutionOrDeletionEntry<
 > = SubstitutionEntry<S> | DeletionEntry<D>;
 
 export type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;
+
+export const views = {
+    table: 'table',
+    venn: 'venn',
+} as const;
+
+export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
+export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema>;

package/src/utilEntrypoint.ts

@@ -4,3 +4,11 @@ export {
     dateRangeOptionPresets,
     DateRangeOptionChangedEvent,
 } from './preact/dateRangeSelector/dateRangeOption';
+
+export {
+    type NamedLapisFilter,
+    type LapisFilter,
+    type SequenceType,
+    views,
+    type MutationComparisonView,
+} from './types';

package/src/utils/map2d.spec.ts

@@ -32,7 +32,7 @@ describe('Map2dBase', () => {
         map2d.set('c', 'b', 3);
         map2d.set('c', 'd', 4);
 
-        expect(map2d.getAsArray(0)).toEqual([
+        expect(map2d.getAsArray()).toEqual([
             [1, 2],
             [3, 4],
         ]);
@@ -45,9 +45,9 @@ describe('Map2dBase', () => {
         );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
-        expect(map2d.getAsArray(0)).toEqual([
-            [2, 0],
-            [0, 4],
+        expect(map2d.getAsArray()).toEqual([
+            [2, undefined],
+            [undefined, 4],
         ]);
     });
 
@@ -103,8 +103,8 @@ describe('Map2dBase', () => {
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
-        expect(map2d.getRow('a', 0)).toEqual([2, 0]);
-        expect(map2d.getRow('c', 0)).toEqual([0, 4]);
+        expect(map2d.getRow('a')).toEqual([2, undefined]);
+        expect(map2d.getRow('c')).toEqual([undefined, 4]);
     });
 
     it('should return an empty array when the row does not exist', () => {
@@ -114,7 +114,7 @@ describe('Map2dBase', () => {
         );
         map2d.set('a', 'b', 2);
 
-        expect(map2d.getRow('c', 0)).toEqual([]);
+        expect(map2d.getRow('c')).toEqual([]);
     });
 
     it('should return content as object', () => {
@@ -185,7 +185,7 @@ describe('Map2dView', () => {
         const view = new Map2dView<string, string, number>(container);
         view.deleteRow('c');
 
-        expect(view.getAsArray(0)).toEqual([[1, 0]]);
+        expect(view.getAsArray()).toEqual([[1, undefined]]);
     });
 
     it('should throw an error when trying to set a value', () => {
@@ -198,7 +198,7 @@ describe('Map2dView', () => {
         const container = createBaseContainer();
         const view = new Map2dView<string, string, number>(container);
 
-        expect(view.getRow('a', 0)).toEqual([1, 0]);
+        expect(view.getRow('a')).toEqual([1, undefined]);
     });
 
     it('should return an empty array when the row does not exist', () => {
@@ -206,7 +206,7 @@ describe('Map2dView', () => {
         const view = new Map2dView<string, string, number>(container);
         view.deleteRow('c');
 
-        expect(view.getRow('c', 0)).toEqual([]);
+        expect(view.getRow('c')).toEqual([]);
     });
 
     function createBaseContainer() {

package/src/utils/map2d.ts

@@ -3,7 +3,7 @@ export interface Map2d<Key1, Key2, Value> {
 
     set(keyFirstAxis: Key1, keySecondAxis: Key2, value: Value): void;
 
-    getRow(key: Key1, fillEmptyWith: Value): Value[];
+    getRow(key: Key1): (Value | undefined)[];
 
     deleteRow(key: Key1): void;
 
@@ -11,7 +11,7 @@ export interface Map2d<Key1, Key2, Value> {
 
     getSecondAxisKeys(): Key2[];
 
-    getAsArray(fillEmptyWith: Value): Value[][];
+    getAsArray(): (Value | undefined)[][];
 
     serializeFirstAxis(key: Key1): string;
 
@@ -52,13 +52,13 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
         return this.data.get(serializedKeyFirstAxis)?.get(serializedKeySecondAxis);
     }
 
-    getRow(key: Key1, fillEmptyWith: Value) {
+    getRow(key: Key1) {
         const serializedKeyFirstAxis = this.serializeFirstAxis(key);
         const row = this.data.get(serializedKeyFirstAxis);
         if (row === undefined) {
             return [];
         }
-        return Array.from(this.keysSecondAxis.keys()).map((key) => row.get(key) ?? fillEmptyWith);
+        return Array.from(this.keysSecondAxis.keys()).map((key) => row.get(key));
     }
 
     set(keyFirstAxis: Key1, keySecondAxis: Key2, value: Value) {
@@ -89,10 +89,10 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
         return Array.from(this.keysSecondAxis.values());
     }
 
-    getAsArray(fillEmptyWith: Value) {
+    getAsArray() {
         return this.getFirstAxisKeys().map((firstAxisKey) => {
             return this.getSecondAxisKeys().map((secondAxisKey) => {
-                return this.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
+                return this.get(firstAxisKey, secondAxisKey);
             });
         });
     }
@@ -159,20 +159,20 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         return Array.from(this.keysSecondAxis.values());
     }
 
-    getAsArray(fillEmptyWith: Value) {
+    getAsArray() {
         return this.getFirstAxisKeys().map((firstAxisKey) => {
             return this.getSecondAxisKeys().map((secondAxisKey) => {
-                return this.baseMap.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
+                return this.baseMap.get(firstAxisKey, secondAxisKey);
             });
         });
     }
 
-    getRow(key: Key1, fillEmptyWith: Value) {
+    getRow(key: Key1) {
         const serializedKeyFirstAxis = this.serializeFirstAxis(key);
         if (!this.keysFirstAxis.has(serializedKeyFirstAxis)) {
             return [];
         }
 
-        return this.baseMap.getRow(key, fillEmptyWith);
+        return this.baseMap.getRow(key);
     }
 }

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

@@ -74,8 +74,8 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
-        initialDateFrom: '',
-        initialDateTo: '',
+        initialDateFrom: undefined,
+        initialDateTo: undefined,
     },
     tags: ['autodocs'],
 };

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

@@ -84,7 +84,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * If `initialDateTo` is set, but this is unset, it will default to `earliestDate`.
      */
     @property()
-    initialDateFrom: string = '';
+    initialDateFrom: string | undefined = undefined;
 
     /**
      * A date string in the format `YYYY-MM-DD`.
@@ -92,7 +92,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * If `initialDateFrom` is set, but this is unset, it will default to the current date.
      */
     @property()
-    initialDateTo: string = '';
+    initialDateTo: string | undefined = undefined;
 
     /**
      * The width of the component.
@@ -106,7 +106,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * The name of the column in LAPIS that contains the date information.
      */
     @property({ type: String })
-    dateColumn: string = 'date';
+    dateColumn: string = '';
 
     override render() {
         return (

package/src/web-components/input/gs-lineage-filter.tsx

@@ -48,7 +48,7 @@ export class LineageFilterComponent 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/input/gs-location-filter.tsx

@@ -40,7 +40,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
      */
     @property()
-    initialValue = '';
+    initialValue: string | undefined = undefined;
 
     /**
      * Required.
@@ -65,7 +65,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field, if it is empty.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     override render() {
         return (

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

@@ -101,7 +101,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -109,7 +109,7 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }