@genspectrum/dashboard-components 0.1.1

package/src/preact/shared/charts/LogitScale.ts

@@ -0,0 +1,48 @@
+import { type Chart, type CoreScaleOptions, Scale } from 'chart.js';
+
+export class LogitScale extends Scale {
+    static id = 'logit';
+
+    constructor(cfg: { id: string; type: string; ctx: CanvasRenderingContext2D; chart: Chart }) {
+        super(cfg);
+        this.min = 0.001;
+        this.max = 0.999;
+    }
+
+    override buildTicks() {
+        const tickValues = [this.min, 0.01, 0.1, 0.5, 0.9, 0.99, this.max];
+
+        this.ticks = tickValues.map((value) => ({ value }));
+        return this.ticks;
+    }
+
+    getLogit(value: number): number {
+        if (value <= 0) {
+            return -Infinity;
+        }
+        if (value >= 1) {
+            return Infinity;
+        }
+
+        return Math.log(value / (1 - value));
+    }
+
+    override getPixelForValue(value: number): number {
+        const logitMin = this.getLogit(this.min);
+        const logitMax = this.getLogit(this.max);
+
+        const logitValue = this.getLogit(value);
+
+        const decimal = (logitValue - logitMin) / (logitMax - logitMin);
+
+        return this.getPixelForDecimal(decimal);
+    }
+}
+
+declare module 'chart.js' {
+    export interface CartesianScaleTypeRegistry {
+        logit: {
+            options: CoreScaleOptions;
+        };
+    }
+}

package/src/preact/shared/charts/colors.ts

@@ -0,0 +1,26 @@
+// colorblind friendly colors taken from https://personal.sron.nl/~pault/
+
+const ColorsRGB = {
+    indigo: [51, 34, 136],
+    green: [17, 119, 51],
+    cyan: [136, 204, 238],
+    teal: [68, 170, 153],
+    olive: [153, 153, 51],
+    sand: [221, 204, 119],
+    rose: [204, 102, 119],
+    wine: [136, 34, 85],
+    purple: [170, 68, 153],
+};
+
+type GraphColor = keyof typeof ColorsRGB;
+
+export const singleGraphColorRGBAById = (id: number, alpha = 1) => {
+    const keys = Object.keys(ColorsRGB) as GraphColor[];
+    const key = keys[id % keys.length];
+
+    return `rgba(${ColorsRGB[key].join(',')},${alpha})`;
+};
+
+export const singleGraphColorRGBByName = (name: GraphColor, alpha = 1) => {
+    return `rgba(${ColorsRGB[name].join(',')},${alpha})`;
+};

package/src/preact/shared/charts/confideceInterval.ts

@@ -0,0 +1,29 @@
+// calculateWilsonInterval calculates the Wilson score interval for 95% confidence.
+//
+// This function is based on https://github.com/erikfox/wilson-interval, but without
+// high precision math.
+//
+// observed - number of observed positive outcomes
+// sample - number of experiments or size of the sample
+export function wilson95PercentConfidenceInterval(observed: number, sample: number) {
+    const p = observed / sample;
+    const n = sample;
+    const z = 1.9599639715843482;
+
+    const numerator = p + (z * z) / (2 * n);
+    const w_plus_minus = z * Math.sqrt((p * (1 - p)) / n + (z * z) / (4 * (n * n)));
+    const denominator = 1 + (z * z) / n;
+
+    return {
+        lowerLimit: (numerator - w_plus_minus) / denominator,
+        upperLimit: (numerator + w_plus_minus) / denominator,
+    };
+}
+
+export const confidenceIntervalDataLabel = (value: number, lowerLimit: number, upperLimit: number, prefix?: string) => {
+    const label = prefix ? `${prefix}: ` : '';
+
+    return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+};
+
+export type ConfidenceIntervalMethod = 'wilson' | 'none';

package/src/preact/shared/charts/getYAxisScale.ts

@@ -0,0 +1,16 @@
+export type ScaleType = 'linear' | 'logarithmic' | 'logit';
+
+export function getYAxisScale(scaleType: ScaleType) {
+    switch (scaleType) {
+        case 'linear': {
+            return { beginAtZero: true, type: 'linear' as const, min: 0, max: 1 };
+        }
+        case 'logarithmic': {
+            return { type: 'logarithmic' as const };
+        }
+        case 'logit':
+            return { type: 'logit' as const };
+        default:
+            return { beginAtZero: true, type: 'linear' as const };
+    }
+}

package/src/preact/shared/charts/scales.ts

@@ -0,0 +1,16 @@
+export type ScaleType = 'linear' | 'logarithmic' | 'logit';
+
+export function getYAxisScale(scaleType: ScaleType) {
+    switch (scaleType) {
+        case 'linear': {
+            return { beginAtZero: true, type: 'linear' as const };
+        }
+        case 'logarithmic': {
+            return { type: 'logarithmic' as const };
+        }
+        case 'logit':
+            return { type: 'logit' as const };
+        default:
+            return { beginAtZero: true, type: 'linear' as const };
+    }
+}

package/src/preact/shared/icons/DeleteIcon.tsx

@@ -0,0 +1,17 @@
+import type { FunctionComponent } from 'preact';
+
+export const DeleteIcon: FunctionComponent = () => {
+    return (
+        <svg
+            fill='currentColor'
+            stroke-width='0'
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 16 16'
+            style='overflow: visible; color: currentcolor;'
+            height='1em'
+            width='1em'
+        >
+            <path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z' />
+        </svg>
+    );
+};

package/src/preact/shared/sort/sortInsertions.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'vitest';
+
+import { sortInsertions } from './sortInsertions';
+
+describe('sortInsertions with no segments', () => {
+    test('should sort for positions first', () => {
+        const a = 'ins_1:A';
+        const b = 'ins_2:A';
+
+        expect(sortInsertions(a, b)).toBeLessThan(0);
+        expect(sortInsertions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for symbols second', () => {
+        const a = 'ins_1:A';
+        const b = 'ins_1:B';
+
+        expect(sortInsertions(a, b)).toBeLessThan(0);
+        expect(sortInsertions(b, a)).toBeGreaterThan(0);
+    });
+});
+
+describe('sortInsertions with segments', () => {
+    test('should sort for segments first', () => {
+        const a = 'ins_AA1:1:A';
+        const b = 'ins_BB2:1:A';
+
+        expect(sortInsertions(a, b)).toBeLessThan(0);
+        expect(sortInsertions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for positions second', () => {
+        const a = 'ins_AA1:1:A';
+        const b = 'ins_AA1:2:A';
+
+        expect(sortInsertions(a, b)).toBeLessThan(0);
+        expect(sortInsertions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for symbols third', () => {
+        const a = 'ins_AA1:1:A';
+        const b = 'ins_AA1:1:B';
+
+        expect(sortInsertions(a, b)).toBeLessThan(0);
+        expect(sortInsertions(b, a)).toBeGreaterThan(0);
+    });
+});

package/src/preact/shared/sort/sortInsertions.ts

@@ -0,0 +1,21 @@
+import { Insertion } from '../../../utils/mutations';
+
+export const sortInsertions = (a: string, b: string) => {
+    const insertionA = Insertion.parse(a);
+    const insertionB = Insertion.parse(b);
+
+    if (insertionA && insertionB) {
+        const segmentA = insertionA.segment;
+        const segmentB = insertionB.segment;
+        if (segmentA !== undefined && segmentB !== undefined && segmentA !== segmentB) {
+            return segmentA.localeCompare(segmentB);
+        }
+        const positionA = insertionA.position;
+        const positionB = insertionB.position;
+        if (positionA !== positionB) {
+            return positionA - positionB;
+        }
+        return insertionA.insertedSymbols.localeCompare(insertionB.insertedSymbols);
+    }
+    throw new Error(`Invalid insertion: ${a} or ${b}`);
+};

package/src/preact/shared/sort/sortMutationPositions.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { sortMutationPositions } from './sortMutationPositions';
+
+describe('sortMutationPositions with no segments', () => {
+    test('should sort for positions', () => {
+        const a = '1';
+        const b = '2';
+
+        expect(sortMutationPositions(a, b)).toBeLessThan(0);
+        expect(sortMutationPositions(b, a)).toBeGreaterThan(0);
+    });
+});
+
+describe('sortMutationPositions with segments', () => {
+    test('should sort for segments first', () => {
+        const a = 'AA1:1';
+        const b = 'BB2:1';
+
+        expect(sortMutationPositions(a, b)).toBeLessThan(0);
+        expect(sortMutationPositions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for positions second', () => {
+        const a = 'ins_AA1:1';
+        const b = 'ins_AA1:2';
+
+        expect(sortMutationPositions(a, b)).toBeLessThan(0);
+        expect(sortMutationPositions(b, a)).toBeGreaterThan(0);
+    });
+});

package/src/preact/shared/sort/sortMutationPositions.ts

@@ -0,0 +1,14 @@
+const pattern = /(?:([A-Za-z0-9]+):)?(\d+)$/;
+
+export const sortMutationPositions = (a: string, b: string) => {
+    const aMatch = a.match(pattern);
+    const bMatch = b.match(pattern);
+
+    if (aMatch && bMatch) {
+        if (aMatch[1] !== bMatch[1]) {
+            return aMatch[1].localeCompare(bMatch[1]);
+        }
+        return parseInt(aMatch[2], 10) - parseInt(bMatch[2], 10);
+    }
+    throw new Error(`Invalid mutation position: ${a} or ${b}`);
+};

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'vitest';
+
+import { sortSubstitutionsAndDeletions } from './sortSubstitutionsAndDeletions';
+
+describe('sortSubstitutionsAndDeletions with no segments', () => {
+    test('should sort for positions first', () => {
+        const a = 'A123B';
+        const b = 'A234B';
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for substitutionValue second', () => {
+        const a = 'A123A';
+        const b = 'A123B';
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+});
+
+describe('sortSubstitutionsAndDeletions with segments', () => {
+    test('should sort for segment first', () => {
+        const a = 'AA1:A123B';
+        const b = 'BB1:A234B';
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for position second', () => {
+        const a = 'AA1:A123B';
+        const b = 'AA1:A234B';
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for substitutionValue third', () => {
+        const a = 'AA1:A123A';
+        const b = 'AA1:A123B';
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+});

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -0,0 +1,17 @@
+export const substitutionAndDeletionRegex = /(?:([A-Za-z0-9]+):)?([A-Za-z])(\d+)([A-Za-z]|-|\*)/;
+
+export const sortSubstitutionsAndDeletions = (a: string, b: string) => {
+    const aMatch = a.match(substitutionAndDeletionRegex);
+    const bMatch = b.match(substitutionAndDeletionRegex);
+
+    if (aMatch && bMatch) {
+        if (aMatch[1] !== bMatch[1]) {
+            return aMatch[1].localeCompare(bMatch[1]);
+        }
+        if (aMatch[3] !== bMatch[3]) {
+            return parseInt(aMatch[3], 10) - parseInt(bMatch[3], 10);
+        }
+        return aMatch[4].localeCompare(bMatch[4]);
+    }
+    throw new Error(`Invalid substitution or deletion: ${a} or ${b}`);
+};

package/src/preact/shared/table/formatProportion.ts

@@ -0,0 +1,3 @@
+export const formatProportion = (proportion: number) => {
+    return `${(proportion * 100).toFixed(2)}%`;
+};

package/src/preact/textInput/__mockData__/aggregated_hosts.json

@@ -0,0 +1,24 @@
+{
+    "errors": [],
+    "info": {
+        "apiVersion": 1,
+        "dataVersion": 1709685650,
+        "deprecationDate": null,
+        "deprecationInfo": null,
+        "acknowledgement": null
+    },
+    "data": [
+        {
+            "host": "Homo",
+            "count": 123
+        },
+        {
+            "host": "Homo sapiens",
+            "count": 234
+        },
+        {
+            "host": "Ape",
+            "count": 345
+        }
+    ]
+}

package/src/preact/textInput/fetchAutocompleteList.ts

@@ -0,0 +1,9 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+
+export async function fetchAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+
+    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+
+    return data.map((item) => item[field]);
+}

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

@@ -0,0 +1,49 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import data from './__mockData__/aggregated_hosts.json';
+import { TextInput, type TextInputProps } from './text-input';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+const meta: Meta<TextInputProps> = {
+    title: 'Input/TextInput',
+    component: TextInput,
+    parameters: {
+        actions: {
+            handles: ['gs-text-input-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'hosts',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['host'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                },
+            ],
+        },
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Default: StoryObj<TextInputProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <TextInput lapisField={args.lapisField} placeholderText={args.placeholderText} />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        lapisField: 'host',
+        placeholderText: 'Enter a host name',
+    },
+};

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

@@ -0,0 +1,73 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useRef } from 'preact/hooks';
+
+import { fetchAutocompleteList } from './fetchAutocompleteList';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorDisplay } from '../components/error-display';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { useQuery } from '../useQuery';
+
+export interface TextInputProps {
+    lapisField: string;
+    placeholderText?: string;
+}
+
+export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        return <ErrorDisplay error={error} />;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    const onInput = () => {
+        const value = inputRef.current?.value;
+
+        if (isValidValue(value)) {
+            inputRef.current?.dispatchEvent(
+                new CustomEvent('gs-text-input-changed', {
+                    detail: { [lapisField]: value },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        }
+    };
+
+    const isValidValue = (value: string | undefined) => {
+        if (value === undefined) {
+            return false;
+        }
+        return data.includes(value);
+    };
+
+    return (
+        <>
+            <input
+                type='text'
+                class='input input-bordered'
+                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
+                onInput={onInput}
+                ref={inputRef}
+                list={lapisField}
+            />
+            <datalist id={lapisField}>
+                {data.map((item) => (
+                    <option value={item} key={item} />
+                ))}
+            </datalist>
+        </>
+    );
+};

package/src/preact/useQuery.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependencies: unknown[] = []) {
+    const [data, setData] = useState<Data | null>(null);
+    const [error, setError] = useState<Error | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsLoading(true);
+            try {
+                const result = await fetchDataCallback();
+                setData(result);
+                setError(null);
+            } catch (error) {
+                setError(error as Error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(dependencies)]);
+
+    return { data, error, isLoading };
+}

package/src/query/queryInsertions.ts

@@ -0,0 +1,14 @@
+import { FetchInsertionsOperator } from '../operator/FetchInsertionsOperator';
+import { SortOperator } from '../operator/SortOperator';
+import { type LapisFilter, type SequenceType } from '../types';
+
+export function queryInsertions(variant: LapisFilter, sequenceType: SequenceType, lapis: string, signal?: AbortSignal) {
+    const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+    const sortData = new SortOperator(fetchData, (a, b) => {
+        if (a.mutation.segment !== b.mutation.segment) {
+            return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');
+        }
+        return a.mutation.position - b.mutation.position;
+    });
+    return sortData.evaluate(lapis, signal);
+}

package/src/query/queryPrevalenceOverTime.ts

@@ -0,0 +1,126 @@
+import { DivisionOperator } from '../operator/DivisionOperator';
+import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
+import { FillMissingOperator } from '../operator/FillMissingOperator';
+import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
+import { MapOperator } from '../operator/MapOperator';
+import { SlidingOperator } from '../operator/SlidingOperator';
+import { SortOperator } from '../operator/SortOperator';
+import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../types';
+import {
+    compareTemporal,
+    generateAllInRange,
+    getMinMaxTemporal,
+    type Temporal,
+    TemporalCache,
+} from '../utils/temporal';
+
+export type PrevalenceOverTimeData = PrevalenceOverTimeVariantData[];
+
+export type PrevalenceOverTimeVariantData = {
+    displayName: string;
+    content: { count: number; prevalence: number; total: number; dateRange: Temporal | null }[];
+};
+
+export function queryPrevalenceOverTime(
+    numeratorFilter: NamedLapisFilter | NamedLapisFilter[],
+    denominatorFilter: NamedLapisFilter,
+    granularity: TemporalGranularity,
+    smoothingWindow: number,
+    lapis: string,
+    signal?: AbortSignal,
+): Promise<PrevalenceOverTimeData> {
+    const numeratorFilters = makeArray(numeratorFilter);
+
+    const denominatorData = fetchAndPrepare(getFilter(denominatorFilter), granularity, smoothingWindow);
+    const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
+        const { displayName, ...filter } = namedLapisFilter;
+        const numeratorData = fetchAndPrepare(filter, granularity, smoothingWindow);
+        const divide = new DivisionOperator(
+            numeratorData,
+            denominatorData,
+            'dateRange',
+            'count',
+            'prevalence',
+            'count',
+            'total',
+        );
+        const dataset = await divide.evaluate(lapis, signal);
+        return {
+            displayName,
+            content: dataset.content,
+        };
+    });
+    return Promise.all(subQueries);
+}
+
+function getFilter(filter: NamedLapisFilter) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { displayName, ...filterWithoutDisplayName } = filter;
+    return filterWithoutDisplayName;
+}
+
+function makeArray<T>(arrayOrSingleItem: T | T[]) {
+    if (Array.isArray(arrayOrSingleItem)) {
+        return arrayOrSingleItem;
+    }
+    return [arrayOrSingleItem];
+}
+
+function fetchAndPrepare(filter: LapisFilter, granularity: TemporalGranularity, smoothingWindow: number) {
+    const fetchData = new FetchAggregatedOperator<{
+        date: string | null;
+    }>(filter, ['date']);
+    const mapData = new MapOperator(fetchData, (d) => mapDateToGranularityRange(d, granularity));
+    const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
+    const fillData = new FillMissingOperator(
+        groupByData,
+        'dateRange',
+        getMinMaxTemporal,
+        generateAllInRange,
+        (key) => ({ dateRange: key, count: 0 }),
+    );
+    const sortData = new SortOperator(fillData, dateRangeCompare);
+
+    return smoothingWindow >= 1 ? new SlidingOperator(sortData, smoothingWindow, averageSmoothing) : sortData;
+}
+
+function mapDateToGranularityRange(d: { date: string | null; count: number }, granularity: TemporalGranularity) {
+    let dateRange: Temporal | null = null;
+    if (d.date !== null) {
+        const date = TemporalCache.getInstance().getYearMonthDay(d.date);
+        switch (granularity) {
+            case 'day':
+                dateRange = date;
+                break;
+            case 'week':
+                dateRange = date.week;
+                break;
+            case 'month':
+                dateRange = date.month;
+                break;
+            case 'year':
+                dateRange = date.year;
+                break;
+        }
+    }
+    return {
+        dateRange,
+        count: d.count,
+    };
+}
+
+function dateRangeCompare(a: { dateRange: Temporal | null }, b: { dateRange: Temporal | null }) {
+    if (a.dateRange === null) {
+        return 1;
+    }
+    if (b.dateRange === null) {
+        return -1;
+    }
+    return compareTemporal(a.dateRange, b.dateRange);
+}
+
+function averageSmoothing(slidingWindow: { dateRange: Temporal | null; count: number }[]) {
+    const average = slidingWindow.reduce((acc, curr) => acc + curr.count, 0) / slidingWindow.length;
+    const centerIndex = Math.floor(slidingWindow.length / 2);
+    return { dateRange: slidingWindow[centerIndex].dateRange, count: average };
+}