@genspectrum/dashboard-components 1.0.1 → 1.2.0

package/dist/util.d.ts

@@ -164,7 +164,7 @@ declare type LapisLineageFilter = Record<string, string | undefined>;
 
 declare type LapisLocationFilter = default_2.infer<typeof lapisLocationFilterSchema>;
 
-declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined]>>;
+declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined, default_2.ZodNull]>>;
 
 export declare type LapisNumberFilter = Record<string, number | undefined>;
 
@@ -917,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -925,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -979,6 +979,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-comparison-component': MutationComparisonComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-aggregate': AggregateComponent;
@@ -1029,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1037,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1053,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1135,10 +1151,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1146,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1154,10 +1170,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1165,7 +1181,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1191,22 +1207,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-B64OQZjX.js";
+import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-CQ32Qy8D.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -99,6 +99,7 @@
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.2",
+        "@eslint/js": "^9.31.0",
         "@iconify-json/mdi": "^1.1.67",
         "@iconify-json/mdi-light": "^1.1.10",
         "@iconify/tailwind4": "^1.0.6",
@@ -127,11 +128,13 @@
         "autoprefixer": "^10.4.19",
         "daisyui": "^5.0.0",
         "depcheck": "^1.4.7",
-        "eslint": "^8.57.0",
-        "eslint-config-preact": "^1.3.0",
+        "eslint": "^9.31.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-storybook": "^0.12.0",
+        "globals": "^16.3.0",
         "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
@@ -143,6 +146,7 @@
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^4.0.9",
         "typescript": "^5.8.2",
+        "typescript-eslint": "^8.36.0",
         "vite": "^6.0.3",
         "vite-plugin-dts": "4.5.0",
         "vitest": "^3.0.2"

package/src/lapisApi/lapisApi.ts

@@ -176,7 +176,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
             const lapisErrorResult = lapisError.safeParse(json);
             if (lapisErrorResult.success) {
                 throw new LapisError(
-                    response.statusText + lapisErrorResult.data.error.detail,
+                    response.statusText + (lapisErrorResult.data.error.detail ?? ''),
                     response.status,
                     lapisErrorResult.data.error,
                     requestedData,
@@ -186,7 +186,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
             const problemDetailResult = problemDetail.safeParse(json);
             if (problemDetailResult.success) {
                 throw new LapisError(
-                    response.statusText + problemDetailResult.data.detail,
+                    response.statusText + (problemDetailResult.data.detail ?? ''),
                     response.status,
                     problemDetailResult.data,
                     requestedData,

package/src/operator/DivisionOperator.ts

@@ -8,7 +8,8 @@ export type DivisionOperatorResult<
     ResultField extends string,
     NumeratorField extends string,
     DenominatorField extends string,
-> = { [P in KeyField]: ValueObject[KeyField] } & MappedNumber<ResultField> &
+> = Record<KeyField, ValueObject[KeyField]> &
+    MappedNumber<ResultField> &
     MappedNumber<NumeratorField> &
     MappedNumber<DenominatorField>;
 
@@ -50,7 +51,8 @@ export class DivisionOperator<
                 [this.numeratorField]: numeratorValue as number,
                 [this.denominatorField]: row[this.valueField] as number,
                 [this.resultField]: (numeratorValue as number) / (row[this.valueField] as number),
-            } as { [P in KeyField]: ValueObject[KeyField] } & MappedNumber<ResultField> &
+            } as Record<KeyField, ValueObject[KeyField]> &
+                MappedNumber<ResultField> &
                 MappedNumber<NumeratorField> &
                 MappedNumber<DenominatorField>;
         });

package/src/operator/FetchDetailsOperator.ts

@@ -3,7 +3,7 @@ import { type Operator } from './Operator';
 import { fetchDetails } from '../lapisApi/lapisApi';
 import { type LapisFilter } from '../types';
 
-type Details<Fields extends string> = { [field in Fields]: string | number | boolean | null };
+type Details<Fields extends string> = Record<Fields, string | number | boolean | null>;
 
 export class FetchDetailsOperator<Fields extends string> implements Operator<Details<Fields>> {
     constructor(

package/src/operator/RenameFieldOperator.ts

@@ -4,8 +4,8 @@ import type { Operator } from './Operator';
 export class RenameFieldOperator<
     OldFieldName extends string,
     NewFieldName extends string,
-    Data extends { [key in OldFieldName]: unknown },
-> extends MapOperator<Data, Data & { [key in NewFieldName]: Data[OldFieldName] }> {
+    Data extends Record<OldFieldName, unknown>,
+> extends MapOperator<Data, Data & Record<NewFieldName, Data[OldFieldName]>> {
     constructor(child: Operator<Data>, oldFieldName: OldFieldName, newFieldName: NewFieldName) {
         super(
             child,
@@ -13,7 +13,7 @@ export class RenameFieldOperator<
                 ({
                     ...value,
                     [newFieldName]: value[oldFieldName],
-                }) as Data & { [key in NewFieldName]: Data[OldFieldName] },
+                }) as Data & Record<NewFieldName, Data[OldFieldName]>,
         );
     }
 }

package/src/preact/MutationAnnotationsContext.tsx

@@ -16,7 +16,12 @@ type MutationAnnotationPerSequenceType = {
     position: Map<string, MutationAnnotations>;
 };
 
-const MutationAnnotationsContext = createContext<Record<SequenceType, MutationAnnotationPerSequenceType>>({
+type MutationAnnotationsContextValue = Record<SequenceType, MutationAnnotationPerSequenceType> & {
+    rawAnnotations: MutationAnnotations;
+};
+
+const MutationAnnotationsContext = createContext<MutationAnnotationsContextValue>({
+    rawAnnotations: [],
     nucleotide: {
         mutation: new Map(),
         position: new Map(),
@@ -75,6 +80,7 @@ export function getMutationAnnotationsContext(value: MutationAnnotations) {
     });
 
     return {
+        rawAnnotations: value,
         nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
         'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
     };
@@ -85,15 +91,17 @@ function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string,
     map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
 }
 
+export function useRawMutationAnnotations() {
+    return useContext(MutationAnnotationsContext).rawAnnotations;
+}
+
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
     return getMutationAnnotationsProvider(mutationAnnotations);
 }
 
-export function getMutationAnnotationsProvider(
-    mutationAnnotations: Record<SequenceType, MutationAnnotationPerSequenceType>,
-) {
+export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnnotationsContextValue) {
     return (mutation: Mutation, sequenceType: SequenceType) => {
         const position =
             mutation.segment === undefined
@@ -110,11 +118,11 @@ export function getMutationAnnotationsProvider(
 
         const uniqueNames = new Set<string>();
 
-        return annotations?.filter((item) => {
-            if (uniqueNames.has(item.name)) {
+        return annotations?.filter((annotation) => {
+            if (uniqueNames.has(annotation.name)) {
                 return false;
             }
-            uniqueNames.add(item.name);
+            uniqueNames.add(annotation.name);
             return true;
         });
     };

package/src/preact/aggregatedData/aggregate.tsx

@@ -11,7 +11,6 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
@@ -63,10 +62,6 @@ export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <AggregatedDataTabs data={data} originalComponentProps={componentProps} />;
 };
 

package/src/preact/components/annotated-mutation.tsx

@@ -58,7 +58,6 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
                 <Fragment key={annotation.name}>
                     <InfoHeadline2>{annotation.name}</InfoHeadline2>
                     <InfoParagraph>
-                        {/* eslint-disable-next-line react/no-danger */}
                         <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
                     </InfoParagraph>
                 </Fragment>

package/src/preact/components/clearable-select.stories.tsx

@@ -14,7 +14,7 @@ export default meta;
 
 export const Default: StoryObj<ClearableSelectProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <ClearableSelect {...args} />
         </div>
     ),

package/src/preact/components/confidence-interval-selector.tsx

@@ -33,7 +33,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
     return (
         <Select
             items={items}
-            selected={confidenceIntervalMethod === undefined ? 'none' : confidenceIntervalMethod}
+            selected={confidenceIntervalMethod}
             onChange={(event: Event) => {
                 const select = event.target as HTMLSelectElement;
                 const value = select.value as ConfidenceIntervalMethod;

package/src/preact/components/error-boundary.tsx

@@ -19,7 +19,7 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
     schema,
     children,
 }: RenderableProps<ErrorBoundaryProps<T>>) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- useErrorBoundary unfortunately return `[any, ...]`
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- useErrorBoundary unfortunately returns `[any, ...]`
     const [internalError, resetError] = useErrorBoundary();
     const componentPropsParseError = useCheckComponentProps(schema, componentProps);
 
@@ -54,10 +54,6 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
 
 function useCheckComponentProps<T extends Record<string, unknown>>(schema: ZodSchema<T>, componentProps: T) {
     return useMemo(() => {
-        if (schema === undefined || componentProps === undefined) {
-            return undefined;
-        }
-
         const parseResult = schema.safeParse(componentProps);
         if (parseResult.success) {
             return undefined;

package/src/preact/components/error-display.tsx

@@ -151,7 +151,7 @@ function ZodErrorDetails({ error }: { error: InvalidPropsError }) {
                 </p>
             )}
             <p>This is a summary of the unexpected attribute values:</p>
-            <ul class='m-4 list-outside list-disc '>
+            <ul className='m-4 list-outside list-disc '>
                 {error.zodError.issues.map((issue, index) => {
                     const actual =
                         issue.path[0] in error.componentProps

package/src/preact/components/fullscreen.tsx

@@ -33,14 +33,11 @@ function findComponentRoot(element: HTMLElement) {
 }
 
 function findShadowRoot(element: HTMLElement) {
-    let current: Node = element;
-    while (current) {
+    let current: Node | null = element;
+    while (current !== null) {
         if (current instanceof ShadowRoot) {
             return current;
         }
-        if (current.parentNode === null) {
-            return null;
-        }
         current = current.parentNode;
     }
     return null;

package/src/preact/components/info.stories.tsx

@@ -15,7 +15,7 @@ const tooltipText = 'This is a tooltip which shows some information.';
 
 export const InfoStory: StoryObj = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <Info {...args}>{tooltipText}</Info>
         </div>
     ),

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

@@ -71,7 +71,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
     `;
 
     return (
-        <div class='my-4 relative w-full h-full'>
+        <div className='my-4 relative w-full h-full'>
             <input
                 id='fromSlider'
                 type='range'

package/src/preact/components/mutations-over-time-mutations-filter.stories.tsx

@@ -0,0 +1,109 @@
+import { type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type Meta } from '@storybook/web-components';
+import { useState, type Dispatch, type StateUpdater } from 'preact/hooks';
+
+import {
+    MutationsOverTimeMutationsFilter,
+    type MutationsOverTimeMutationsFilterProps,
+} from './mutations-over-time-mutations-filter';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+
+const meta: Meta = {
+    title: 'Component/Mutations over time mutations filter',
+    component: 'MutationsOverTimeTextFilter',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState = ({
+    setFilterValue,
+    value,
+}: {
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
+    value: MutationFilter;
+}) => {
+    const [state, setState] = useState(value);
+
+    return (
+        <MutationAnnotationsContextProvider
+            value={[
+                {
+                    name: 'Test Annotation 1',
+                    description: 'Test Annotation 1',
+                    symbol: '#',
+                },
+                {
+                    name: 'Test Annotation 2',
+                    description: 'Test Annotation 2',
+                    symbol: '+',
+                },
+            ]}
+        >
+            <MutationsOverTimeMutationsFilter
+                setFilterValue={(value) => {
+                    setFilterValue(value);
+                    setState(value);
+                }}
+                value={state}
+            />
+        </MutationAnnotationsContextProvider>
+    );
+};
+
+export const FilterByText: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    render: (args) => {
+        return <WrapperWithState setFilterValue={args.setFilterValue} value={args.value} />;
+    },
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: 'Test', annotationNameFilter: new Set([]) },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial value to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Test');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('textbox');
+            await userEvent.clear(inputField);
+            await userEvent.type(inputField, 'OtherText');
+
+            await waitFor(() => expect(button).toHaveTextContent('OtherText'));
+        });
+    },
+};
+
+export const FilterByAnnotation: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    ...FilterByText,
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: '', annotationNameFilter: new Set() },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect default text to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Filter mutations');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('checkbox', { name: /Test Annotation 1/ });
+            await userEvent.click(inputField);
+
+            await waitFor(() => expect(button).toHaveTextContent('Test Annotation 1'));
+        });
+    },
+};