@genspectrum/dashboard-components 0.1.1

package/src/operator/FillMissingOperator.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it } from 'vitest';
+
+import { FillMissingOperator } from './FillMissingOperator';
+import { MockOperator } from './MockOperator';
+import { expectEqualAfterSorting } from '../utils/test-utils';
+
+describe('FillMissingOperator', () => {
+    it('should fill in missing values', async () => {
+        const child = new MockOperator([{ id: 1 }, { id: 3 }]);
+        const query = new FillMissingOperator(
+            child,
+            'id',
+            (ids) => [Math.min(...ids), Math.max(...ids)],
+            (min, max) => {
+                const result = [];
+                for (let i = min; i <= max; i++) {
+                    result.push(i);
+                }
+                return result;
+            },
+            (id) => ({ id }),
+        );
+        const result = await query.evaluate('lapis');
+        await expectEqualAfterSorting(result.content, [{ id: 1 }, { id: 2 }, { id: 3 }], (a, b) => a.id - b.id);
+    });
+});

package/src/operator/FillMissingOperator.ts

@@ -0,0 +1,30 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+
+export class FillMissingOperator<Data, KeyToFill extends keyof Data> implements Operator<Data> {
+    constructor(
+        private child: Operator<Data>,
+        private keyField: KeyToFill,
+        private getMinMaxFn: (values: Iterable<Data[KeyToFill]>) => [Data[KeyToFill], Data[KeyToFill]] | null,
+        private getAllRequiredKeysFn: (min: Data[KeyToFill], max: Data[KeyToFill]) => Data[KeyToFill][],
+        private defaultValueFn: (key: Data[KeyToFill]) => Data,
+    ) {}
+
+    async evaluate(lapis: string, signal?: AbortSignal): Promise<Dataset<Data>> {
+        const childEvaluated = await this.child.evaluate(lapis, signal);
+        const existingKeys = new Set(childEvaluated.content.map((row) => row[this.keyField]));
+        const minMax = this.getMinMaxFn(existingKeys);
+        if (minMax === null) {
+            return childEvaluated;
+        }
+        const [min, max] = minMax;
+        const requiredKeys = this.getAllRequiredKeysFn(min, max);
+        const content = childEvaluated.content;
+        for (const key of requiredKeys) {
+            if (!existingKeys.has(key)) {
+                content.push(this.defaultValueFn(key));
+            }
+        }
+        return { content };
+    }
+}

package/src/operator/GroupByAndSumOperator.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it } from 'vitest';
+
+import { GroupByAndSumOperator } from './GroupByAndSumOperator';
+import { MockOperator } from './MockOperator';
+import { expectEqualAfterSorting } from '../utils/test-utils';
+
+describe('GroupByAndSumOperator', () => {
+    it('should group the content of the child operator and calculate the sum if a field', async () => {
+        const child = new MockOperator([
+            { lineage: 'A', n: 1 },
+            { lineage: 'A', n: 2 },
+            { lineage: 'B', n: 3 },
+        ]);
+
+        const query = new GroupByAndSumOperator(child, 'lineage', 'n');
+        const result = await query.evaluate('lapis');
+        await expectEqualAfterSorting(
+            result.content,
+            [
+                { lineage: 'A', n: 3 },
+                { lineage: 'B', n: 3 },
+            ],
+            (a, b) => a.lineage.localeCompare(b.lineage),
+        );
+    });
+});

package/src/operator/GroupByAndSumOperator.ts

@@ -0,0 +1,26 @@
+import { GroupByOperator } from './GroupByOperator';
+import { type Operator } from './Operator';
+import { type NumberFields } from '../utils/type-utils';
+
+type Result<Data, KeyToGroupBy extends keyof Data, KeyToSumBy extends keyof Data> = {
+    [P in KeyToGroupBy | KeyToSumBy]: P extends KeyToGroupBy ? Data[KeyToGroupBy] : number;
+};
+
+export class GroupByAndSumOperator<
+    Data,
+    KeyToGroupBy extends keyof Data,
+    KeySoSumBy extends NumberFields<Data>,
+> extends GroupByOperator<Data, Result<Data, KeyToGroupBy, KeySoSumBy>, KeyToGroupBy> {
+    constructor(child: Operator<Data>, groupByField: KeyToGroupBy, sumField: KeySoSumBy) {
+        super(child, groupByField, (values: Data[]) => {
+            let n = 0;
+            for (const value of values) {
+                n += value[sumField] as number;
+            }
+            return {
+                [groupByField]: values[0][groupByField],
+                [sumField]: n,
+            } as Result<Data, KeyToGroupBy, KeySoSumBy>;
+        });
+    }
+}

package/src/operator/GroupByOperator.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it } from 'vitest';
+
+import { GroupByOperator } from './GroupByOperator';
+import { MockOperator } from './MockOperator';
+import { expectEqualAfterSorting } from '../utils/test-utils';
+
+describe('GroupByOperator', () => {
+    it('should group the content of the child operator', async () => {
+        const child = new MockOperator([
+            { lineage: 'A', n: 1 },
+            { lineage: 'A', n: 2 },
+            { lineage: 'B', n: 3 },
+        ]);
+
+        const queryCount = new GroupByOperator(child, 'lineage', (values) => ({
+            lineage: values[0].lineage,
+            n: values.length,
+        }));
+        const resultCount = await queryCount.evaluate('lapis');
+        await expectEqualAfterSorting(
+            resultCount.content,
+            [
+                { lineage: 'A', n: 2 },
+                { lineage: 'B', n: 1 },
+            ],
+            (a, b) => a.lineage.localeCompare(b.lineage),
+        );
+
+        const querySum = new GroupByOperator(child, 'lineage', (values) => ({
+            lineage: values[0].lineage,
+            n: values.reduce((a, b) => a + b.n, 0),
+        }));
+        const resultSum = await querySum.evaluate('lapis');
+        await expectEqualAfterSorting(
+            resultSum.content,
+            [
+                { lineage: 'A', n: 3 },
+                { lineage: 'B', n: 3 },
+            ],
+            (a, b) => a.lineage.localeCompare(b.lineage),
+        );
+    });
+});

package/src/operator/GroupByOperator.ts

@@ -0,0 +1,32 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+
+export class GroupByOperator<Data, AggregationResult, KeyToGroupBy extends keyof Data>
+    implements Operator<AggregationResult>
+{
+    constructor(
+        private child: Operator<Data>,
+        private field: KeyToGroupBy,
+        private aggregate: (values: Data[]) => AggregationResult,
+    ) {}
+
+    async evaluate(lapis: string, signal?: AbortSignal): Promise<Dataset<AggregationResult>> {
+        const childEvaluated = await this.child.evaluate(lapis, signal);
+        const grouped = new Map<Data[KeyToGroupBy], Data[]>();
+        for (const row of childEvaluated.content) {
+            const key = row[this.field];
+            if (!grouped.has(key)) {
+                grouped.set(key, []);
+            }
+            grouped.get(key)!.push(row);
+        }
+        const result = new Array<AggregationResult>();
+        for (const [, values] of grouped) {
+            result.push(this.aggregate(values));
+        }
+
+        return {
+            content: result,
+        };
+    }
+}

package/src/operator/MapOperator.spec.ts

@@ -0,0 +1,13 @@
+import { expect, describe, it } from 'vitest';
+
+import { MapOperator } from './MapOperator';
+import { MockOperator } from './MockOperator';
+
+describe('MapOperator', () => {
+    it('should map the content of the child operator', async () => {
+        const child = new MockOperator([1, 2, 3]);
+        const query = new MapOperator(child, (x) => x * 2);
+        const result = await query.evaluate('lapis');
+        await expect(result.content).deep.equal([2, 4, 6]);
+    });
+});

package/src/operator/MapOperator.ts

@@ -0,0 +1,16 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+
+export class MapOperator<S, T> implements Operator<T> {
+    constructor(
+        private child: Operator<S>,
+        private func: (value: S) => T,
+    ) {}
+
+    async evaluate(lapis: string, signal?: AbortSignal): Promise<Dataset<T>> {
+        const childEvaluated = await this.child.evaluate(lapis, signal);
+        return {
+            content: childEvaluated.content.map(this.func),
+        };
+    }
+}

package/src/operator/MockOperator.spec.ts

@@ -0,0 +1,11 @@
+import { expect, describe, it } from 'vitest';
+
+import { MockOperator } from './MockOperator';
+
+describe('MockOperator', () => {
+    it('should be a mock', async () => {
+        const query = new MockOperator([1, 2, 3]);
+        const result = await query.evaluate();
+        await expect(result.content).to.deep.equal([1, 2, 3]);
+    });
+});

package/src/operator/MockOperator.ts

@@ -0,0 +1,12 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+
+export class MockOperator<T> implements Operator<T> {
+    constructor(private content: T[]) {}
+
+    async evaluate(): Promise<Dataset<T>> {
+        return {
+            content: this.content,
+        };
+    }
+}

package/src/operator/Operator.ts

@@ -0,0 +1,5 @@
+import { type Dataset } from './Dataset';
+
+export interface Operator<T> {
+    evaluate(lapis: string, signal?: AbortSignal): Promise<Dataset<T>>;
+}

package/src/operator/SlidingOperator.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it } from 'vitest';
+
+import { MockOperator } from './MockOperator';
+import { SlidingOperator } from './SlidingOperator';
+import { expectEqualAfterSorting } from '../utils/test-utils';
+
+const mockOperator = new MockOperator([
+    { id: 1, value: 1 },
+    { id: 2, value: 2 },
+    { id: 3, value: 3 },
+    { id: 4, value: 4 },
+    { id: 5, value: 5 },
+]);
+describe('SlidingOperator', () => {
+    it('should slide the values', async () => {
+        const underTest = getSlidingOperatorWithWindowSize(3);
+
+        const result = await underTest.evaluate('lapis');
+
+        expectEqualAfterSorting(
+            result.content,
+            [
+                { id: 2, sum: 6 },
+                { id: 3, sum: 9 },
+                { id: 4, sum: 12 },
+            ],
+            sortById,
+        );
+    });
+
+    it('should return single value when window size is greater than number of entries', async () => {
+        const underTest = getSlidingOperatorWithWindowSize(999);
+
+        const result = await underTest.evaluate('lapis');
+
+        expectEqualAfterSorting(result.content, [{ id: 2, sum: 15 }], sortById);
+    });
+
+    function getSlidingOperatorWithWindowSize(windowSize: number) {
+        return new SlidingOperator(mockOperator, windowSize, (values) => {
+            let sum = 0;
+            for (const { value } of values) {
+                sum += value;
+            }
+            return { id: values[1].id, sum };
+        });
+    }
+
+    function sortById(a: { id: number }, b: { id: number }) {
+        return a.id - b.id;
+    }
+});

package/src/operator/SlidingOperator.ts

@@ -0,0 +1,23 @@
+import { type Operator } from './Operator';
+
+export class SlidingOperator<Data, AggregationResult> implements Operator<AggregationResult> {
+    constructor(
+        private child: Operator<Data>,
+        private windowSize: number,
+        private aggregate: (values: Data[]) => AggregationResult,
+    ) {
+        if (windowSize < 1) {
+            throw new Error('Window size must be at least 1');
+        }
+    }
+
+    async evaluate(lapis: string, signal?: AbortSignal) {
+        const childEvaluated = await this.child.evaluate(lapis, signal);
+        const content = new Array<AggregationResult>();
+        const numberOfWindows = Math.max(childEvaluated.content.length - this.windowSize, 0) + 1;
+        for (let i = 0; i < numberOfWindows; i++) {
+            content.push(this.aggregate(childEvaluated.content.slice(i, i + this.windowSize)));
+        }
+        return { content };
+    }
+}

package/src/operator/SortOperator.spec.ts

@@ -0,0 +1,13 @@
+import { expect, describe, it } from 'vitest';
+
+import { MockOperator } from './MockOperator';
+import { SortOperator } from './SortOperator';
+
+describe('SortOperator', () => {
+    it('should sort the content of the child operator', async () => {
+        const child = new MockOperator([3, 1, 2]);
+        const query = new SortOperator(child, (a, b) => a - b);
+        const result = await query.evaluate('lapis');
+        await expect(result.content).deep.equal([1, 2, 3]);
+    });
+});

package/src/operator/SortOperator.ts

@@ -0,0 +1,16 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+
+export class SortOperator<S> implements Operator<S> {
+    constructor(
+        private child: Operator<S>,
+        private compareFn: (a: S, b: S) => number,
+    ) {}
+
+    async evaluate(lapis: string, signal?: AbortSignal): Promise<Dataset<S>> {
+        const childEvaluated = await this.child.evaluate(lapis, signal);
+        return {
+            content: childEvaluated.content.sort(this.compareFn),
+        };
+    }
+}

package/src/preact/LapisUrlContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'preact';
+
+export const LapisUrlContext = createContext('');

package/src/preact/ReferenceGenomeContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'preact';
+
+import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
+
+export const ReferenceGenomeContext = createContext<ReferenceGenome>({ nucleotideSequences: [], genes: [] });

package/src/preact/components/SegmentSelector.tsx

@@ -0,0 +1,62 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+
+import { type CheckboxItem, CheckboxSelector } from './checkbox-selector';
+import { getSegmentNames } from '../../lapisApi/ReferenceGenome';
+import { type SequenceType } from '../../types';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+export type DisplayedSegment = CheckboxItem & {
+    segment: string;
+};
+
+export type SegmentSelectorProps = {
+    displayedSegments: DisplayedSegment[];
+    setDisplayedSegments: (items: DisplayedSegment[]) => void;
+    prefix?: string;
+};
+
+const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[], prefix: string) => {
+    const allSelectedSelected = displayedSegments
+        .filter((segment) => segment.checked)
+        .map((segment) => segment.segment);
+
+    if (allSelectedSelected.length === 0) {
+        return `${prefix}none`;
+    }
+    if (displayedSegments.length === allSelectedSelected.length) {
+        return `${prefix}all`;
+    }
+    return prefix + allSelectedSelected.join(', ');
+};
+
+export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
+    displayedSegments,
+    setDisplayedSegments,
+    prefix,
+}) => {
+    if (displayedSegments.length <= 1) {
+        return null;
+    }
+
+    return (
+        <CheckboxSelector
+            className='mx-1'
+            items={displayedSegments}
+            label={getSegmentSelectorLabel(displayedSegments, prefix || 'Segments: ')}
+            setItems={(items) => setDisplayedSegments(items)}
+        />
+    );
+};
+
+export function useDisplayedSegments(sequenceType: SequenceType) {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    const displayedSegments = getSegmentNames(referenceGenome, sequenceType).map((segment) => ({
+        segment,
+        label: segment,
+        checked: true,
+    }));
+
+    return useState<DisplayedSegment[]>(displayedSegments);
+}

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

@@ -0,0 +1,42 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { Chart, registerables } from 'chart.js';
+
+import GsChart, { type GsChartProps } from './chart';
+import { LogitScale } from '../shared/charts/LogitScale';
+import { getYAxisScale } from '../shared/charts/getYAxisScale';
+
+const meta: Meta<GsChartProps> = {
+    title: 'Component/Chart',
+    component: GsChart,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+Chart.register(...registerables, LogitScale);
+
+export const ChartStory: StoryObj<GsChartProps> = {
+    render: (args) => {
+        return <GsChart configuration={args.configuration} />;
+    },
+    args: {
+        configuration: {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        label: 'Dataset 1',
+                        data: [1, 2, 3, 4, 5],
+                    },
+                ],
+                labels: ['A', 'B', 'C', 'D', 'E'],
+            },
+            options: {
+                animation: false,
+                scales: {
+                    y: getYAxisScale('logarithmic'),
+                },
+            },
+        },
+    },
+};

package/src/preact/components/chart.tsx

@@ -0,0 +1,32 @@
+import { Chart, type ChartConfiguration } from 'chart.js';
+import { useEffect, useRef } from 'preact/hooks';
+
+export interface GsChartProps {
+    configuration: ChartConfiguration;
+}
+
+const GsChart = ({ configuration }: GsChartProps) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const chartRef = useRef<Chart | null>(null);
+
+    useEffect(() => {
+        if (canvasRef.current === null) {
+            return;
+        }
+
+        const ctx = canvasRef.current.getContext('2d');
+        if (ctx === null) {
+            return;
+        }
+
+        chartRef.current = new Chart(ctx, configuration);
+
+        return () => {
+            chartRef.current?.destroy();
+        };
+    }, [canvasRef, configuration]);
+
+    return <canvas ref={canvasRef} />;
+};
+
+export default GsChart;

package/src/preact/components/checkbox-selector.stories.tsx

@@ -0,0 +1,56 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, waitFor, within } from '@storybook/test';
+
+import { type CheckboxItem, CheckboxSelector, type CheckboxSelectorProps } from './checkbox-selector';
+
+const meta: Meta<CheckboxSelectorProps> = {
+    title: 'Component/Checkbox Selector',
+    component: CheckboxSelector,
+    argTypes: {
+        setItems: { action: true },
+    },
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const CheckboxSelectorStory: StoryObj<CheckboxSelectorProps> = {
+    render: (args) => {
+        let wrapperStateItems = args.items;
+
+        return (
+            <CheckboxSelector
+                items={wrapperStateItems}
+                label={args.label}
+                setItems={(items: CheckboxItem[]) => {
+                    args.setItems(items);
+                    wrapperStateItems = items;
+                }}
+            />
+        );
+    },
+    args: {
+        items: [
+            { checked: false, label: 'item1' },
+            { checked: false, label: 'item2' },
+        ],
+        label: 'Some label',
+        setItems: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+
+        const open = () => canvas.getByText('Some label', { exact: false });
+        open().click();
+
+        const item1 = canvas.getByLabelText('item1', { exact: false });
+        item1.click();
+
+        await waitFor(() =>
+            expect(args.setItems).toHaveBeenCalledWith([
+                { checked: true, label: 'item1' },
+                { checked: false, label: 'item2' },
+            ]),
+        );
+    },
+};

package/src/preact/components/checkbox-selector.tsx

@@ -0,0 +1,46 @@
+export type CheckboxItem = {
+    label: string;
+    checked: boolean;
+};
+
+export interface CheckboxSelectorProps<Item extends CheckboxItem = CheckboxItem> {
+    className?: string;
+    items: Item[];
+    label: string;
+    setItems: (items: Item[]) => void;
+}
+
+export const CheckboxSelector = <Item extends CheckboxItem>({
+    className,
+    items,
+    label,
+    setItems,
+}: CheckboxSelectorProps<Item>) => {
+    return (
+        <div class={`dropdown ${className}`}>
+            <div tabIndex={0} role='button' class='btn btn-xs text-nowrap'>
+                {label}
+            </div>
+            <ul tabIndex={0} class='p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box'>
+                {items.map((item, index) => (
+                    <li class='flex flex-row items-center' key={item.label}>
+                        <label>
+                            <input
+                                type='checkbox'
+                                id={`item-${index}`}
+                                checked={item.checked}
+                                onChange={() => {
+                                    const newItems = items.map((item, i) =>
+                                        i === index ? { ...item, checked: !item.checked } : item,
+                                    );
+                                    setItems(newItems);
+                                }}
+                            />
+                            {item.label}
+                        </label>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

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

@@ -0,0 +1,45 @@
+import { type FunctionComponent } from 'preact';
+
+import { Select } from './select';
+import type { ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
+
+type ConfidenceIntervalSelectorProps = {
+    confidenceIntervalMethod: ConfidenceIntervalMethod;
+    setConfidenceIntervalMethod: (method: ConfidenceIntervalMethod) => void;
+    confidenceIntervalMethods: ConfidenceIntervalMethod[];
+};
+
+export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSelectorProps> = ({
+    confidenceIntervalMethod,
+    setConfidenceIntervalMethod,
+    confidenceIntervalMethods,
+}) => {
+    if (confidenceIntervalMethods.length === 0) {
+        return null;
+    }
+
+    const items = [
+        { label: 'Confidence interval method', value: 'none', disabled: true },
+        ...confidenceIntervalMethods.concat('none').map((method) => {
+            switch (method) {
+                case 'wilson':
+                    return { label: 'Wilson, 95% CI', value: 'wilson' };
+                case 'none':
+                    return { label: 'None', value: 'none' };
+            }
+        }),
+    ];
+
+    return (
+        <Select
+            items={items}
+            selected={confidenceIntervalMethod === undefined ? 'none' : confidenceIntervalMethod}
+            onChange={(event: Event) => {
+                const select = event.target as HTMLSelectElement;
+                const value = select.value as ConfidenceIntervalMethod;
+                setConfidenceIntervalMethod(value);
+            }}
+            selectStyle={'select-xs select-bordered'}
+        />
+    );
+};