@genspectrum/dashboard-components 0.1.1

package/src/preact/locationFilter/fetchAutocompletionList.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest';
+
+import { fetchAutocompletionList } from './fetchAutocompletionList';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
+
+describe('fetchAutocompletionList', () => {
+    test('should fetch autocompletion list', async () => {
+        const fields = ['region', 'country', 'division'];
+
+        lapisRequestMocks.aggregated(
+            { fields },
+            {
+                data: [
+                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
+                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_2' },
+                    { count: 0, region: 'region1', country: 'country1_1', division: null },
+                    { count: 0, region: 'region1', country: 'country1_2', division: 'division1_2_1' },
+                    { count: 0, region: 'region2', country: 'country2_1', division: null },
+                ],
+            },
+        );
+
+        const result = await fetchAutocompletionList(fields, DUMMY_LAPIS_URL);
+
+        expect(result).to.deep.equal([
+            { region: 'region1', country: null, division: null },
+            { region: 'region1', country: 'country1_1', division: null },
+            { region: 'region1', country: 'country1_1', division: 'division1_1_1' },
+            { region: 'region1', country: 'country1_1', division: 'division1_1_2' },
+            { region: 'region1', country: 'country1_2', division: null },
+            { region: 'region1', country: 'country1_2', division: 'division1_2_1' },
+            { region: 'region2', country: null, division: null },
+            { region: 'region2', country: 'country2_1', division: null },
+        ]);
+    });
+});

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -0,0 +1,43 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+
+export async function fetchAutocompletionList(fields: string[], lapis: string, signal?: AbortSignal) {
+    const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
+        .fill(0)
+        .map((_, i) => i + 1)
+        .map((i) => fields.slice(i).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>({}, fields);
+
+    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    const locationValues = data
+        .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
+        .reduce<Set<string>>((setOfAllHierarchies, entry) => {
+            setOfAllHierarchies.add(JSON.stringify(entry));
+            toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
+                setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
+            });
+            return setOfAllHierarchies;
+        }, new Set());
+
+    return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields));
+}
+
+function compareLocationEntries(fields: string[]) {
+    return (a: Record<string, string | null>, b: Record<string, string | null>) => {
+        for (const field of fields) {
+            const valueA = a[field];
+            const valueB = b[field];
+            if (valueA === valueB) {
+                continue;
+            }
+            if (valueA === null) {
+                return -1;
+            }
+            if (valueB === null) {
+                return 1;
+            }
+            return valueA < valueB ? -1 : 1;
+        }
+        return 0;
+    };
+}

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

@@ -0,0 +1,50 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import data from './__mockData__/aggregated.json';
+import { LocationFilter, type LocationFilterProps } from './location-filter';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+const meta: Meta<typeof LocationFilter> = {
+    title: 'Input/LocationFilter',
+    component: LocationFilter,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['region', 'country', 'division', 'location'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                },
+            ],
+        },
+        actions: {
+            handles: ['gs-location-changed'],
+        },
+    },
+    args: {
+        fields: ['region', 'country', 'division', 'location'],
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Primary: StoryObj<LocationFilterProps> = {
+    render: (args) => (
+        <div class='max-w-screen-lg'>
+            <LapisUrlContext.Provider value={LAPIS_URL}>
+                <LocationFilter fields={args.fields} />
+            </LapisUrlContext.Provider>
+        </div>
+    ),
+};

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

@@ -0,0 +1,112 @@
+import { useContext, useRef, useState } from 'preact/hooks';
+
+import { fetchAutocompletionList } from './fetchAutocompletionList';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { useQuery } from '../useQuery';
+
+export type LocationFilterProps = {
+    value?: string;
+    fields: string[];
+};
+
+export const LocationFilter = ({ value: initialValue, fields }: LocationFilterProps) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const [value, setValue] = useState(initialValue ?? '');
+    const [unknownLocation, setUnknownLocation] = useState(false);
+
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
+
+    if (isLoading)
+        return (
+            <form class='flex'>
+                <input type='text' class='input input-bordered grow' value={value} disabled />
+                <button class='btn ml-1' disabled type='submit'>
+                    Loading...
+                </button>
+            </form>
+        );
+
+    if (error) {
+        return (
+            <p>
+                Error: {error.name} {error.message} {error.stack}
+            </p>
+        );
+    }
+
+    const onInput = (event: InputEvent) => {
+        if (event.target instanceof HTMLInputElement) {
+            const inputValue = event.target.value;
+            setValue(inputValue);
+            if (unknownLocation) {
+                const eventDetail = parseLocation(inputValue, fields);
+                if (hasMatchingEntry(data, eventDetail)) {
+                    setUnknownLocation(false);
+                }
+            }
+        }
+    };
+
+    const submit = (event: SubmitEvent) => {
+        event.preventDefault();
+        const eventDetail = parseLocation(value, fields);
+
+        if (hasMatchingEntry(data, eventDetail)) {
+            setUnknownLocation(false);
+
+            formRef.current?.dispatchEvent(
+                new CustomEvent('gs-location-changed', {
+                    detail: eventDetail,
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        } else {
+            setUnknownLocation(true);
+        }
+    };
+
+    return (
+        <form class='flex' onSubmit={submit} ref={formRef}>
+            <input
+                type='text'
+                class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}
+                value={value}
+                onInput={onInput}
+                list='countries'
+            />
+            <datalist id='countries'>
+                {data?.map((v) => {
+                    const value = fields
+                        .map((field) => v[field])
+                        .filter((value) => value !== null)
+                        .join(' / ');
+                    return <option key={value} value={value} />;
+                })}
+            </datalist>
+            <button class='btn btn-primary ml-1' type='submit'>
+                Submit
+            </button>
+        </form>
+    );
+};
+
+const parseLocation = (location: string, fields: string[]) => {
+    const fieldValues = location.split('/').map((part) => part.trim());
+    return fieldValues.reduce((acc, fieldValue, i) => ({ ...acc, [fields[i]]: fieldValue }), {});
+};
+
+const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {
+    if (data === null) {
+        return false;
+    }
+
+    const matchingEntries = Object.entries(eventDetail)
+        .filter(([, value]) => value !== undefined)
+        .reduce((filteredData, [key, value]) => filteredData.filter((it) => it[key] === value), data);
+
+    return matchingEntries.length > 0;
+};

package/src/preact/mutationComparison/__mockData__/nucleotideMutationsOtherVariant.json

@@ -0,0 +1,295 @@
+{
+    "info": {
+        "dataVersion": 1709685650
+    },
+    "data": [
+        {
+            "mutation": "C29400T",
+            "proportion": 3.1102264244837026e-4,
+            "count": 5,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 29400
+        },
+        {
+            "mutation": "G210T",
+            "proportion": 0.01464640274543449,
+            "count": 239,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 210
+        },
+        {
+            "mutation": "C241T",
+            "proportion": 0.9940534575772437,
+            "count": 16215,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 241
+        },
+        {
+            "mutation": "C3037T",
+            "proportion": 0.9993303707311134,
+            "count": 16416,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 3037
+        },
+        {
+            "mutation": "C12876T",
+            "proportion": 1.8254837531945966e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 12876
+        },
+        {
+            "mutation": "G4181T",
+            "proportion": 4.876264781177618e-4,
+            "count": 8,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 4181
+        },
+        {
+            "mutation": "C15495T",
+            "proportion": 6.0642813826561554e-5,
+            "count": 1,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 15495
+        },
+        {
+            "mutation": "C6402T",
+            "proportion": 0.005851161089778753,
+            "count": 96,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 6402
+        },
+        {
+            "mutation": "C18664T",
+            "proportion": 1.2142553579017667e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 18664
+        },
+        {
+            "mutation": "C7124T",
+            "proportion": 4.334096959940561e-4,
+            "count": 7,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 7124
+        },
+        {
+            "mutation": "T8654C",
+            "proportion": 1.231527093596059e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "C",
+            "position": 8654
+        },
+        {
+            "mutation": "C8986T",
+            "proportion": 7.306380905991232e-4,
+            "count": 12,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 8986
+        },
+        {
+            "mutation": "G9053T",
+            "proportion": 4.868252905738453e-4,
+            "count": 8,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 9053
+        },
+        {
+            "mutation": "A28030G",
+            "proportion": 3.6861829575474597e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 28030
+        },
+        {
+            "mutation": "C10029T",
+            "proportion": 1.2178784557301182e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 10029
+        },
+        {
+            "mutation": "A11201G",
+            "proportion": 1.8250395425234214e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 11201
+        },
+        {
+            "mutation": "A11332G",
+            "proportion": 1.826595226497808e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 11332
+        },
+        {
+            "mutation": "C14408T",
+            "proportion": 0.9990265863600414,
+            "count": 16421,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 14408
+        },
+        {
+            "mutation": "G15451A",
+            "proportion": 9.109127345600292e-4,
+            "count": 15,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "A",
+            "position": 15451
+        },
+        {
+            "mutation": "C16466T",
+            "proportion": 3.641660597232338e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 16466
+        },
+        {
+            "mutation": "C21618G",
+            "proportion": 3.0807147258163895e-4,
+            "count": 5,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "G",
+            "position": 21618
+        },
+        {
+            "mutation": "T22917G",
+            "proportion": 6.934375590997919e-4,
+            "count": 11,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "G",
+            "position": 22917
+        },
+        {
+            "mutation": "C22995A",
+            "proportion": 3.7591629597143037e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "A",
+            "position": 22995
+        },
+        {
+            "mutation": "A23403G",
+            "proportion": 0.9993927617196988,
+            "count": 16458,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 23403
+        },
+        {
+            "mutation": "C23604G",
+            "proportion": 0.0010364589684184855,
+            "count": 17,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "G",
+            "position": 23604
+        },
+        {
+            "mutation": "A25983T",
+            "proportion": 6.0782883539995136e-5,
+            "count": 1,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "T",
+            "position": 25983
+        },
+        {
+            "mutation": "A17725C",
+            "proportion": 2.4251242876197404e-4,
+            "count": 4,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "C",
+            "position": 17725
+        },
+        {
+            "mutation": "G24410A",
+            "proportion": 6.067961165048543e-4,
+            "count": 10,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "A",
+            "position": 24410
+        },
+        {
+            "mutation": "C25469T",
+            "proportion": 0.0010943579766536965,
+            "count": 18,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 25469
+        },
+        {
+            "mutation": "C14214T",
+            "proportion": 2.4310198128114745e-4,
+            "count": 4,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 14214
+        },
+        {
+            "mutation": "T26767C",
+            "proportion": 0.0013351945135643625,
+            "count": 22,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "C",
+            "position": 26767
+        },
+        {
+            "mutation": "G199-",
+            "proportion": 0.55,
+            "count": 10,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "-",
+            "position": 199
+        }
+    ]
+}