@genspectrum/dashboard-components 0.1.1

package/src/utils/temporal.ts

@@ -0,0 +1,348 @@
+import dayjs from 'dayjs/esm';
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat';
+import isoWeek from 'dayjs/esm/plugin/isoWeek';
+
+dayjs.extend(isoWeek);
+dayjs.extend(advancedFormat);
+
+export class TemporalCache {
+    private yearMonthDayCache = new Map<string, YearMonthDay>();
+    private yearWeekCache = new Map<string, YearWeek>();
+    private yearMonthCache = new Map<string, YearMonth>();
+    private yearCache = new Map<string, Year>();
+
+    private constructor() {}
+
+    getYearMonthDay(s: string): YearMonthDay {
+        if (!this.yearMonthDayCache.has(s)) {
+            this.yearMonthDayCache.set(s, YearMonthDay.parse(s, this));
+        }
+        return this.yearMonthDayCache.get(s)!;
+    }
+
+    getYearMonth(s: string): YearMonth {
+        if (!this.yearMonthCache.has(s)) {
+            this.yearMonthCache.set(s, YearMonth.parse(s, this));
+        }
+        return this.yearMonthCache.get(s)!;
+    }
+
+    getYearWeek(s: string): YearWeek {
+        if (!this.yearWeekCache.has(s)) {
+            this.yearWeekCache.set(s, YearWeek.parse(s, this));
+        }
+        return this.yearWeekCache.get(s)!;
+    }
+
+    getYear(s: string): Year {
+        if (!this.yearCache.has(s)) {
+            this.yearCache.set(s, Year.parse(s, this));
+        }
+        return this.yearCache.get(s)!;
+    }
+
+    private static instance = new TemporalCache();
+
+    static getInstance(): TemporalCache {
+        return this.instance;
+    }
+}
+
+export class YearMonthDay {
+    readonly date;
+    readonly dayjs;
+
+    constructor(
+        readonly yearNumber: number,
+        readonly monthNumber: number,
+        readonly dayNumber: number,
+        readonly cache: TemporalCache,
+    ) {
+        this.date = new Date(this.yearNumber, this.monthNumber - 1, this.dayNumber);
+        this.dayjs = dayjs(this.date);
+    }
+
+    get text(): string {
+        return this.dayjs.format('YYYY-MM-DD');
+    }
+
+    toString(): string {
+        return this.text;
+    }
+
+    get year(): Year {
+        return this.cache.getYear(`${this.yearNumber}`);
+    }
+
+    get month(): YearMonth {
+        return this.cache.getYearMonth(this.dayjs.format('YYYY-MM'));
+    }
+
+    get week(): YearWeek {
+        return this.cache.getYearWeek(this.dayjs.format('GGGG-WW'));
+    }
+
+    addDays(days: number): YearMonthDay {
+        const date = this.dayjs.add(days, 'day');
+        const s = date.format('YYYY-MM-DD');
+        return this.cache.getYearMonthDay(s);
+    }
+
+    minus(other: YearMonthDay): number {
+        return this.dayjs.diff(other.dayjs, 'day');
+    }
+
+    static parse(s: string, cache: TemporalCache): YearMonthDay {
+        const [year, month, day] = s.split('-').map((s) => parseInt(s, 10));
+        return new YearMonthDay(year, month, day, cache);
+    }
+}
+
+export class YearWeek {
+    constructor(
+        readonly isoYearNumber: number,
+        readonly isoWeekNumber: number,
+        readonly cache: TemporalCache,
+    ) {}
+
+    get text(): string {
+        return this.firstDay.dayjs.format('YYYY-WW');
+    }
+
+    toString(): string {
+        return this.text;
+    }
+
+    get firstDay(): YearMonthDay {
+        // "The first week of the year, hence, always contains 4 January." https://en.wikipedia.org/wiki/ISO_week_date
+        const firstDay = dayjs()
+            .year(this.isoYearNumber)
+            .month(1)
+            .date(4)
+            .isoWeek(this.isoWeekNumber)
+            .startOf('isoWeek');
+        return this.cache.getYearMonthDay(firstDay.format('YYYY-MM-DD'));
+    }
+
+    get year(): Year {
+        return this.cache.getYear(`${this.isoYearNumber}`);
+    }
+
+    addWeeks(weeks: number): YearWeek {
+        const date = this.firstDay.dayjs.add(weeks, 'week');
+        const s = date.format('YYYY-WW');
+        return this.cache.getYearWeek(s);
+    }
+
+    minus(other: YearWeek): number {
+        return this.firstDay.dayjs.diff(other.firstDay.dayjs, 'week');
+    }
+
+    static parse(s: string, cache: TemporalCache): YearWeek {
+        const [year, week] = s.split('-').map((s) => parseInt(s, 10));
+        return new YearWeek(year, week, cache);
+    }
+}
+
+export class YearMonth {
+    constructor(
+        readonly yearNumber: number,
+        readonly monthNumber: number,
+        readonly cache: TemporalCache,
+    ) {}
+
+    get text(): string {
+        return this.firstDay.dayjs.format('YYYY-MM');
+    }
+
+    toString(): string {
+        return this.text;
+    }
+
+    get firstDay(): YearMonthDay {
+        return this.cache.getYearMonthDay(dayjs(`${this.yearNumber}-${this.monthNumber}-01`).format('YYYY-MM-DD'));
+    }
+
+    get year(): Year {
+        return this.cache.getYear(`${this.yearNumber}`);
+    }
+
+    addMonths(months: number): YearMonth {
+        const date = this.firstDay.dayjs.add(months, 'month');
+        const s = date.format('YYYY-MM');
+        return this.cache.getYearMonth(s);
+    }
+
+    minus(other: YearMonth): number {
+        return this.firstDay.dayjs.diff(other.firstDay.dayjs, 'month');
+    }
+
+    static parse(s: string, cache: TemporalCache): YearMonth {
+        const [year, month] = s.split('-').map((s) => parseInt(s, 10));
+        return new YearMonth(year, month, cache);
+    }
+}
+
+export class Year {
+    constructor(
+        readonly year: number,
+        readonly cache: TemporalCache,
+    ) {}
+
+    get text(): string {
+        return this.firstDay.dayjs.format('YYYY');
+    }
+
+    toString(): string {
+        return this.text;
+    }
+
+    get firstMonth(): YearMonth {
+        return this.cache.getYearMonth(`${this.year}-01`);
+    }
+
+    get firstDay(): YearMonthDay {
+        return this.firstMonth.firstDay;
+    }
+
+    addYears(years: number): Year {
+        const date = this.firstDay.dayjs.add(years, 'year');
+        const s = date.format('YYYY');
+        return this.cache.getYear(s);
+    }
+
+    minus(other: Year): number {
+        return this.firstDay.dayjs.diff(other.firstDay.dayjs, 'year');
+    }
+
+    static parse(s: string, cache: TemporalCache): Year {
+        const year = parseInt(s, 10);
+        return new Year(year, cache);
+    }
+}
+
+export type Temporal = YearMonthDay | YearWeek | YearMonth | Year;
+
+export function generateAllDaysInRange(start: YearMonthDay, end: YearMonthDay): YearMonthDay[] {
+    const days = [];
+    const daysInBetween = end.minus(start);
+    for (let i = 0; i <= daysInBetween; i++) {
+        days.push(start.addDays(i));
+    }
+    return days;
+}
+
+export function generateAllWeeksInRange(start: YearWeek, end: YearWeek): YearWeek[] {
+    const weeks = [];
+    const weeksInBetween = end.minus(start);
+    for (let i = 0; i <= weeksInBetween; i++) {
+        weeks.push(start.addWeeks(i));
+    }
+    return weeks;
+}
+
+export function generateAllMonthsInRange(start: YearMonth, end: YearMonth): YearMonth[] {
+    const months = [];
+    const monthsInBetween = end.minus(start);
+    for (let i = 0; i <= monthsInBetween; i++) {
+        months.push(start.addMonths(i));
+    }
+    return months;
+}
+
+export function generateAllYearsInRange(start: Year, end: Year): Year[] {
+    const years = [];
+    const yearsInBetween = end.minus(start);
+    for (let i = 0; i <= yearsInBetween; i++) {
+        years.push(start.addYears(i));
+    }
+    return years;
+}
+
+export function generateAllInRange(start: Temporal | null, end: Temporal | null): Temporal[] {
+    if (start === null || end === null) {
+        return [];
+    }
+    if (start instanceof YearMonthDay && end instanceof YearMonthDay) {
+        return generateAllDaysInRange(start, end);
+    }
+    if (start instanceof YearWeek && end instanceof YearWeek) {
+        return generateAllWeeksInRange(start, end);
+    }
+    if (start instanceof YearMonth && end instanceof YearMonth) {
+        return generateAllMonthsInRange(start, end);
+    }
+    if (start instanceof Year && end instanceof Year) {
+        return generateAllYearsInRange(start, end);
+    }
+    throw new Error(`Invalid arguments: start and end must be of the same type: ${start}, ${end}`);
+}
+
+export function minusTemporal(a: Temporal, b: Temporal): number {
+    if (a instanceof YearMonthDay && b instanceof YearMonthDay) {
+        return a.minus(b);
+    }
+    if (a instanceof YearWeek && b instanceof YearWeek) {
+        return a.minus(b);
+    }
+    if (a instanceof YearMonth && b instanceof YearMonth) {
+        return a.minus(b);
+    }
+    if (a instanceof Year && b instanceof Year) {
+        return a.minus(b);
+    }
+    throw new Error(`Cannot compare ${a} and ${b}`);
+}
+
+export function compareTemporal(a: Temporal | null, b: Temporal | null): number {
+    if (a === null) {
+        return 1;
+    }
+    if (b === null) {
+        return -1;
+    }
+    const diff = minusTemporal(a, b);
+    if (diff < 0) {
+        return -1;
+    }
+    if (diff > 0) {
+        return 1;
+    }
+    return 0;
+}
+
+export function getMinMaxTemporal(values: Iterable<Temporal | null>): [Temporal, Temporal] | null {
+    let min = null;
+    let max = null;
+    for (const value of values) {
+        if (value === null) {
+            continue;
+        }
+        if (min === null || compareTemporal(value, min) < 0) {
+            min = value;
+        }
+        if (max === null || compareTemporal(value, max) > 0) {
+            max = value;
+        }
+    }
+    if (min === null || max === null) {
+        return null;
+    }
+    return [min, max];
+}
+
+export function addUnit(temporal: Temporal, amount: number): Temporal {
+    if (temporal instanceof YearMonthDay) {
+        return temporal.addDays(amount);
+    }
+    if (temporal instanceof YearWeek) {
+        return temporal.addWeeks(amount);
+    }
+    if (temporal instanceof YearMonth) {
+        return temporal.addMonths(amount);
+    }
+    if (temporal instanceof Year) {
+        return temporal.addYears(amount);
+    }
+    throw new Error(`Invalid argument: ${temporal}`);
+}

package/src/utils/test-utils.ts

@@ -0,0 +1,5 @@
+import { expect } from 'vitest';
+
+export function expectEqualAfterSorting<T>(actual: T[], expected: T[], compareFn?: (a: T, b: T) => number) {
+    return expect(actual.sort(compareFn)).deep.equal(expected.sort(compareFn));
+}

package/src/utils/type-utils.ts

@@ -0,0 +1,15 @@
+/**
+ * NumberFields<S> is a type that represents the keys of an object S that have a number value.
+ * For example, given `type Person = { age: number }`, it holds `'age' extends NumberFields<Person>`.
+ */
+export type NumberFields<S> = keyof S & { [P in keyof S]: S[P] extends number ? P : never }[keyof S];
+
+/**
+ * MappedType<K, T> is a type that represents an object with keys of type K and values of type T.
+ */
+export type MappedType<K extends string | number | symbol, T> = { [P in K]: T };
+
+/**
+ * MappedNumber<K> is a type that represents an object with keys of type K and values of type number.
+ */
+export type MappedNumber<K extends string | number | symbol> = MappedType<K, number>;

package/src/utils/utils.spec.ts

@@ -0,0 +1,16 @@
+import { expect, describe, it } from 'vitest';
+
+import { mapLapisFilterToUrlParams } from './utils';
+
+describe('mapLapisFilterToUrlParams', () => {
+    it('should produce correct url params', () => {
+        const urlSearchParams = mapLapisFilterToUrlParams({
+            string: 'stringValue',
+            number: 42,
+            boolean: true,
+            null: null,
+        });
+
+        expect(urlSearchParams.toString()).equals('string=stringValue&number=42&boolean=true&null=null');
+    });
+});

package/src/utils/utils.ts

@@ -0,0 +1,38 @@
+import { type LapisFilter } from '../types';
+
+export function getMinMaxNumber(values: Iterable<number>): [number, number] | null {
+    let min = null;
+    let max = null;
+    for (const value of values) {
+        if (min === null || value < min) {
+            min = value;
+        }
+        if (max === null || value > max) {
+            max = value;
+        }
+    }
+    if (min === null || max === null) {
+        return null;
+    }
+    return [min, max];
+}
+
+export function mapLapisFilterToUrlParams(filter: LapisFilter): URLSearchParams {
+    const params = Object.entries(filter).map(([key, value]) => [key, stringifyLapisFilterValue(value)]);
+
+    return new URLSearchParams(params);
+}
+
+function stringifyLapisFilterValue(value: LapisFilter[string]) {
+    if (value === null) {
+        return 'null';
+    }
+    switch (typeof value) {
+        case 'boolean':
+            return value ? 'true' : 'false';
+        case 'number':
+            return value.toString();
+        case 'string':
+            return value;
+    }
+}

package/src/web-components/PreactLitAdapter.tsx

@@ -0,0 +1,62 @@
+import { consume } from '@lit/context';
+import { type PropertyValues, ReactiveElement } from '@lit/reactive-element';
+import { unsafeCSS } from 'lit';
+import { render } from 'preact';
+import { type JSXInternal } from 'preact/src/jsx';
+
+import { lapisContext } from './lapis-context';
+import { referenceGenomeContext } from './reference-genome-context';
+import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
+import { LapisUrlContext } from '../preact/LapisUrlContext';
+import { ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
+import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
+import tailwindStyle from '../styles/tailwind.css?inline';
+
+import '../styles/tailwind.css';
+import '../preact/components/min-max-percent-slider.css';
+
+const tailwindElementCss = unsafeCSS(tailwindStyle);
+const minMaxPercentSliderElementCss = unsafeCSS(minMaxPercentSliderCss);
+
+export abstract class PreactLitAdapter extends ReactiveElement {
+    static override styles = [tailwindElementCss, minMaxPercentSliderElementCss];
+
+    /**
+     * @internal
+     * The URL of the Lapis instance.
+     *
+     * This component must be a child of a `gs-app` component.
+     * This value will automatically be injected by the parent `gs-app` component.
+     */
+    @consume({ context: lapisContext })
+    lapis: string = '';
+
+    /**
+     * @internal
+     * The reference genomes of the underlying organism.
+     * These will be fetched from the Lapis instance.
+     *
+     * This component must be a child of a `gs-app` component.
+     * This value will automatically be injected by the parent `gs-app` component.
+     */
+    @consume({ context: referenceGenomeContext, subscribe: true })
+    referenceGenome: ReferenceGenome = {
+        nucleotideSequences: [],
+        genes: [],
+    };
+
+    override update(changedProperties: PropertyValues) {
+        console.log('this.lapis', this.lapis);
+        const vdom = (
+            <LapisUrlContext.Provider value={this.lapis}>
+                <ReferenceGenomeContext.Provider value={this.referenceGenome}>
+                    {this.render()}
+                </ReferenceGenomeContext.Provider>
+            </LapisUrlContext.Provider>
+        );
+        super.update(changedProperties);
+        render(vdom, this.renderRoot);
+    }
+
+    protected abstract render(): JSXInternal.Element;
+}

package/src/web-components/PreactLitAdapterWithGridJsStyles.tsx

@@ -0,0 +1,12 @@
+import gridJsStyle from 'gridjs/dist/theme/mermaid.css?inline';
+import { unsafeCSS } from 'lit';
+
+import { PreactLitAdapter } from './PreactLitAdapter';
+
+import 'gridjs/dist/theme/mermaid.css';
+
+const gridJsElementCss = unsafeCSS(gridJsStyle);
+
+export abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter {
+    static override styles = [...PreactLitAdapter.styles, gridJsElementCss];
+}

package/src/web-components/app.ts

@@ -0,0 +1,51 @@
+import { provide } from '@lit/context';
+import { Task } from '@lit/task';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { lapisContext } from './lapis-context';
+import { referenceGenomeContext } from './reference-genome-context';
+import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
+import { fetchReferenceGenome } from '../lapisApi/lapisApi';
+
+@customElement('gs-app')
+export class App extends LitElement {
+    @provide({ context: lapisContext })
+    @property()
+    lapis: string = '';
+
+    @provide({ context: referenceGenomeContext })
+    referenceGenome: ReferenceGenome = {
+        nucleotideSequences: [],
+        genes: [],
+    };
+
+    private updateReferenceGenome = new Task(this, {
+        task: async () => {
+            this.referenceGenome = await fetchReferenceGenome(this.lapis);
+        },
+        args: () => [this.lapis],
+    });
+
+    override render() {
+        return this.updateReferenceGenome.render({
+            complete: () => {
+                return html` <slot></slot>`;
+            },
+            error: () => html`<p>Error</p>`, // TODO(#143): Add more advanced error handling
+            pending: () => {
+                return html`<p>Loading...</p>`;
+            },
+        });
+    }
+
+    override createRenderRoot() {
+        return this;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-app': App;
+    }
+}

package/src/web-components/display/index.ts

@@ -0,0 +1,4 @@
+export { MutationComparisonComponent } from './mutation-comparison-component';
+export { MutationsComponent } from './mutations-component';
+export { PrevalenceOverTimeComponent } from './prevalence-over-time-component';
+export { RelativeGrowthAdvantageComponent } from './relative-growth-advantage-component';

package/src/web-components/display/mutation-comparison-component.stories.ts

@@ -0,0 +1,138 @@
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './mutation-comparison-component';
+import '../app';
+import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import nucleotideMutationsOtherVariant from '../../preact/mutationComparison/__mockData__/nucleotideMutationsOtherVariant.json';
+import nucleotideMutationsSomeVariant from '../../preact/mutationComparison/__mockData__/nucleotideMutationsSomeVariant.json';
+import { type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta<MutationComparisonProps> = {
+    title: 'Visualization/Mutation comparison',
+    component: 'gs-mutation-comparison-component',
+    argTypes: {
+        variants: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['table', 'venn'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<MutationComparisonProps> = {
+    render: (args) => html`
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-mutation-comparison-component
+                    .variants=${args.variants}
+                    .sequenceType=${args.sequenceType}
+                    .views=${args.views}
+                ></gs-mutation-comparison-component>
+            </gs-app>
+        </div>
+    `,
+};
+
+const dateTo = '2022-01-01';
+const dateFrom = '2021-01-01';
+
+export const Default: StoryObj<MutationComparisonProps> = {
+    ...Template,
+    args: {
+        variants: [
+            {
+                displayName: 'Some variant',
+                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo },
+            },
+            {
+                displayName: 'Other variant',
+                lapisFilter: {
+                    country: 'Switzerland',
+                    pangoLineage: 'B.1.1.7',
+                    dateFrom,
+                    dateTo,
+                },
+            },
+        ],
+        sequenceType: 'nucleotide',
+        views: ['table', 'venn'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'nucleotideMutationsSomeVariant',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateTo,
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutationsSomeVariant,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutationsOtherVariant',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateFrom,
+                            dateTo,
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutationsOtherVariant,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
+
+        await step('Min and max proportions should be 50% and 100%', async () => {
+            const minInput = () => canvas.getAllByLabelText('%')[0];
+            const maxInput = () => canvas.getAllByLabelText('%')[1];
+
+            await waitFor(() => expect(minInput()).toHaveValue(50));
+            await waitFor(() => expect(maxInput()).toHaveValue(100));
+        });
+    },
+};
+
+export const VennDiagram: StoryObj<MutationComparisonProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
+
+        await step('Switch to Venn diagram view', async () => {
+            await waitFor(() => expect(canvas.getByLabelText('Venn', { selector: 'input' })).toBeInTheDocument());
+
+            await fireEvent.click(canvas.getByLabelText('Venn', { selector: 'input' }));
+
+            await waitFor(() =>
+                expect(
+                    canvas.getByText('You have no elements selected. Click in the venn diagram to select.'),
+                ).toBeVisible(),
+            );
+        });
+    },
+};