@genspectrum/dashboard-components 0.1.3 → 0.1.4

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -16,6 +16,7 @@ import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
@@ -31,6 +32,7 @@ export interface PrevalenceOverTimeProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    size?: Size;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -40,6 +42,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    size,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -75,14 +78,16 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     }
 
     return (
-        <Headline heading={headline}>
-            <PrevalenceOverTimeTabs
-                views={views}
-                data={data}
-                granularity={granularity}
-                confidenceIntervalMethods={confidenceIntervalMethods}
-            />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '600px', width: '100%' }}>
+            <Headline heading={headline}>
+                <PrevalenceOverTimeTabs
+                    views={views}
+                    data={data}
+                    granularity={granularity}
+                    confidenceIntervalMethods={confidenceIntervalMethods}
+                />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -134,7 +139,10 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                     content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
                 };
             case 'table':
-                return { title: 'Table', content: <PrevalenceOverTimeTable data={data} granularity={granularity} /> };
+                return {
+                    title: 'Table',
+                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} />,
+                };
         }
     };
 

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx

@@ -37,6 +37,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
             datasets: datasets(data),
         },
         options: {
+            maintainAspectRatio: false,
             animation: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),
@@ -51,13 +52,15 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
     };
 
     return (
-        <>
-            <GsChart configuration={config} />
-            <div>
+        <div className='flex flex-col h-full'>
+            <div className='flex-1'>
+                <GsChart configuration={config} />
+            </div>
+            <p>
                 Advantage: {(data.params.fd.value * 100).toFixed(2)}% ({(data.params.fd.ciLower * 100).toFixed(2)}% -{' '}
                 {(data.params.fd.ciUpper * 100).toFixed(2)}%)
-            </div>
-        </>
+            </p>
+        </div>
     );
 };
 

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -10,6 +10,16 @@ export default {
     parameters: {
         fetchMock: {},
     },
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        generationTime: { control: 'number' },
+        views: {
+            options: ['line'],
+            control: { type: 'check' },
+        },
+        size: [{ control: 'object' }],
+    },
 };
 
 export const Primary = {
@@ -20,6 +30,7 @@ export const Primary = {
                 denominator={args.denominator}
                 generationTime={args.generationTime}
                 views={args.views}
+                size={args.size}
             />
         </LapisUrlContext.Provider>
     ),
@@ -28,6 +39,7 @@ export const Primary = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -13,6 +13,7 @@ import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
@@ -25,6 +26,7 @@ export interface RelativeGrowthAdvantageProps {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    size?: Size;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -32,6 +34,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     views,
+    size,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -67,14 +70,16 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     }
 
     return (
-        <Headline heading={headline}>
-            <RelativeGrowthAdvantageTabs
-                data={data}
-                yAxisScaleType={yAxisScaleType}
-                setYAxisScaleType={setYAxisScaleType}
-                views={views}
-            />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <RelativeGrowthAdvantageTabs
+                    data={data}
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                    views={views}
+                />
+            </Headline>
+        </ResizeContainer>
     );
 };
 

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

@@ -1,19 +1,20 @@
 import { describe, expect, test } from 'vitest';
 
 import { sortInsertions } from './sortInsertions';
+import { Insertion } from '../../../utils/mutations';
 
 describe('sortInsertions with no segments', () => {
     test('should sort for positions first', () => {
-        const a = 'ins_1:A';
-        const b = 'ins_2:A';
+        const a = new Insertion(undefined, 1, 'A');
+        const b = new Insertion(undefined, 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';
+        const a = new Insertion(undefined, 1, 'A');
+        const b = new Insertion(undefined, 1, 'B');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);
@@ -22,24 +23,24 @@ describe('sortInsertions with no segments', () => {
 
 describe('sortInsertions with segments', () => {
     test('should sort for segments first', () => {
-        const a = 'ins_AA1:1:A';
-        const b = 'ins_BB2:1:A';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('BB1', 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';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('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';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('AA1', 1, 'B');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);

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

@@ -1,21 +1,14 @@
-import { Insertion } from '../../../utils/mutations';
+import { comparePositions, compareSegments } from './sortSubstitutionsAndDeletions';
+import { type Insertion } from '../../../utils/mutations';
 
-export const sortInsertions = (a: string, b: string) => {
-    const insertionA = Insertion.parse(a);
-    const insertionB = Insertion.parse(b);
+export const sortInsertions = (a: Insertion, b: Insertion) => {
+    if (a.segment !== b.segment) {
+        return compareSegments(a.segment, b.segment);
+    }
 
-    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);
+    if (a.position !== b.position) {
+        return comparePositions(a.position, b.position);
     }
-    throw new Error(`Invalid insertion: ${a} or ${b}`);
+
+    return a.insertedSymbols.localeCompare(b.insertedSymbols);
 };

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

@@ -1,19 +1,28 @@
 import { describe, expect, test } from 'vitest';
 
 import { sortSubstitutionsAndDeletions } from './sortSubstitutionsAndDeletions';
+import { Deletion, Substitution } from '../../../utils/mutations';
 
 describe('sortSubstitutionsAndDeletions with no segments', () => {
     test('should sort for positions first', () => {
-        const a = 'A123B';
-        const b = 'A234B';
+        const a = new Substitution(undefined, 'A', 'B', 123);
+        const b = new Substitution(undefined, 'A', 'B', 234);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for substitutionValue second', () => {
-        const a = 'A123A';
-        const b = 'A123B';
+        const a = new Substitution(undefined, 'A', 'A', 123);
+        const b = new Substitution(undefined, 'A', 'B', 123);
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for substitutionValue over deletion', () => {
+        const a = new Substitution(undefined, 'A', 'A', 123);
+        const b = new Deletion(undefined, 'A', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
@@ -22,24 +31,24 @@ describe('sortSubstitutionsAndDeletions with no segments', () => {
 
 describe('sortSubstitutionsAndDeletions with segments', () => {
     test('should sort for segment first', () => {
-        const a = 'AA1:A123B';
-        const b = 'BB1:A234B';
+        const a = new Substitution('AA1', 'A', 'B', 123);
+        const b = new Substitution('BB1', 'A', 'B', 234);
 
         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';
+        const a = new Substitution('AA1', 'A', 'B', 123);
+        const b = new Substitution('AA1', 'A', 'B', 234);
 
         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';
+        const a = new Substitution('AA1', 'A', 'A', 123);
+        const b = new Substitution('AA1', 'A', 'B', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);

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

@@ -1,17 +1,50 @@
-export const substitutionAndDeletionRegex = /(?:([A-Za-z0-9]+):)?([A-Za-z])(\d+)([A-Za-z]|-|\*)/;
+import { Deletion, type Substitution } from '../../../utils/mutations';
 
-export const sortSubstitutionsAndDeletions = (a: string, b: string) => {
-    const aMatch = a.match(substitutionAndDeletionRegex);
-    const bMatch = b.match(substitutionAndDeletionRegex);
+export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
+    if (a.segment !== b.segment) {
+        compareSegments(a.segment, b.segment);
+    }
 
-    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);
+    if (a.position !== b.position) {
+        return comparePositions(a.position, b.position);
+    }
+
+    const aIsDeletion = a instanceof Deletion;
+    const bIsDeletion = b instanceof Deletion;
+
+    if (aIsDeletion !== bIsDeletion) {
+        return aIsDeletion ? 1 : -1;
+    }
+
+    if (!aIsDeletion && !bIsDeletion) {
+        if (a.substitutionValue !== b.substitutionValue) {
+            return compareSubstitutionValues(a.substitutionValue, b.substitutionValue);
         }
-        return aMatch[4].localeCompare(bMatch[4]);
     }
-    throw new Error(`Invalid substitution or deletion: ${a} or ${b}`);
+
+    return 0;
+};
+
+export const compareSegments = (a: string | undefined, b: string | undefined) => {
+    if (a === undefined) {
+        return -1;
+    }
+    if (b === undefined) {
+        return 1;
+    }
+    return a.localeCompare(b);
+};
+
+export const comparePositions = (a: number, b: number) => {
+    return a - b;
+};
+
+const compareSubstitutionValues = (a: string | undefined, b: string | undefined) => {
+    if (a === undefined) {
+        return -1;
+    }
+    if (b === undefined) {
+        return 1;
+    }
+    return a.localeCompare(b);
 };

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

@@ -1,5 +1,6 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
@@ -39,7 +40,11 @@ export default meta;
 export const Default: StoryObj<TextInputProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <TextInput lapisField={args.lapisField} placeholderText={args.placeholderText} />
+            <TextInput
+                lapisField={args.lapisField}
+                placeholderText={args.placeholderText}
+                initialValue={args.initialValue}
+            />
         </LapisUrlContext.Provider>
     ),
     args: {
@@ -47,3 +52,19 @@ export const Default: StoryObj<TextInputProps> = {
         placeholderText: 'Enter a host name',
     },
 };
+
+export const WithInitialValue: StoryObj<TextInputProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initialValue: 'Homo sapiens',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
+            expect(input).toHaveValue('Homo sapiens');
+        });
+    },
+};

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

@@ -11,9 +11,10 @@ import { useQuery } from '../useQuery';
 export interface TextInputProps {
     lapisField: string;
     placeholderText?: string;
+    initialValue?: string;
 }
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText }) => {
+export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText, initialValue }) => {
     const lapis = useContext(LapisUrlContext);
 
     const inputRef = useRef<HTMLInputElement>(null);
@@ -62,6 +63,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, place
                 onInput={onInput}
                 ref={inputRef}
                 list={lapisField}
+                value={initialValue}
             />
             <datalist id={lapisField}>
                 {data.map((item) => (

package/src/utils/typeAssertions.spec.ts

@@ -0,0 +1,31 @@
+import { describe, it } from 'vitest';
+
+import { type Equals, type Expect } from './typeAssertions';
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+describe('Expect', () => {
+    it('should only accept true', () => {
+        type ShouldBeTrue = Expect<true>;
+        // @ts-expect-error Expect should only accept true
+        type ShouldFail = Expect<false>;
+    });
+});
+
+describe('Equals', () => {
+    it('should accept equal types', () => {
+        type Equals1 = Expect<Equals<1, 1>>;
+        type Equals1Or2 = Expect<Equals<1 | 2, 1 | 2>>;
+        type EqualsWithObject = Expect<Equals<{ key: string }, { key: string }>>;
+    });
+
+    it('should reject unequal types', () => {
+        // @ts-expect-error 1 is not 2
+        type Equals1Vs2 = Expect<Equals<1, 2>>;
+        // @ts-expect-error disjoint union types
+        type EqualsDisjointUnion = Expect<Equals<1 | 2, 1 | 999>>;
+        // @ts-expect-error object with different keys
+        type EqualsObjectWithDifferentKey = Expect<Equals<{ key: string }, { otherKey: string }>>;
+        // @ts-expect-error object with different value types
+        type EqualsObjectWithDifferentValue = Expect<Equals<{ key: string }, { key: number }>>;
+    });
+});

package/src/utils/typeAssertions.ts

@@ -0,0 +1,16 @@
+/**
+ * Those are helpers to make sure that types are equal.
+ *
+ * #### Why do we need this?
+ *
+ * The custom element manifest does not fully resolve the types of properties,
+ * so Storybook will only show non-resolved types (such as `View[]`).
+ * To give users full type information, we have to inline the types in the web component definitions.
+ * These assertions help us to make sure that the inlined type is equal to the type
+ * that is defined in the Preact components.
+ */
+
+export type Expect<T extends true> = T;
+export type IsAssignable<X, Y> = X extends Y ? true : false;
+export type And<X, Y> = X extends true ? (Y extends true ? true : false) : false;
+export type Equals<X, Y> = And<IsAssignable<X, Y>, IsAssignable<Y, X>>;

package/src/web-components/PreactLitAdapter.tsx

@@ -46,7 +46,6 @@ export abstract class PreactLitAdapter extends ReactiveElement {
     };
 
     override update(changedProperties: PropertyValues) {
-        console.log('this.lapis', this.lapis);
         const vdom = (
             <LapisUrlContext.Provider value={this.lapis}>
                 <ReferenceGenomeContext.Provider value={this.referenceGenome}>

package/src/web-components/app.stories.ts

@@ -0,0 +1,129 @@
+import { consume } from '@lit/context';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { expect, waitFor, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import './app';
+
+import { lapisContext } from './lapis-context';
+import { referenceGenomeContext } from './reference-genome-context';
+import { withComponentDocs } from '../../.storybook/ComponentDocsBlock';
+import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../constants';
+import type { ReferenceGenome } from '../lapisApi/ReferenceGenome';
+import referenceGenome from '../lapisApi/__mockData__/referenceGenome.json';
+
+const codeExample = String.raw`
+<gs-app lapis="https://url.to.lapis">
+    <p>Your application code goes here.</p> 
+</gs-app>`;
+
+const meta: Meta = {
+    title: 'Wrapper/App',
+    component: 'gs-app',
+    parameters: withComponentDocs({
+        fetchMock: {},
+        componentDocs: {
+            tag: 'gs-app',
+            opensShadowDom: false,
+            expectsChildren: true,
+            codeExample,
+        },
+    }),
+    decorators: [withActions],
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryObj<{ lapis: string }> = {
+    render: (args) => {
+        return html` <gs-app lapis="${args.lapis}">
+            <gs-app-display></gs-app-display>
+        </gs-app>`;
+    },
+    args: {
+        lapis: LAPIS_URL,
+    },
+};
+
+export const Default: StoryObj<{ lapis: string }> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText(LAPIS_URL)).toBeVisible();
+            expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
+        });
+    },
+};
+
+export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'referenceGenome',
+                        url: REFERENCE_GENOME_ENDPOINT,
+                    },
+                    response: {
+                        status: 200,
+                        body: referenceGenome,
+                    },
+                    options: {
+                        delay: 5000,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
+    ...Template,
+    args: {
+        lapis: 'definitely-not-a-valid-url',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText('Error')).toBeVisible();
+        });
+    },
+};
+
+@customElement('gs-app-display')
+// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars -- it is used in the story above
+class AppDisplay extends LitElement {
+    @consume({ context: lapisContext })
+    lapis: string = '';
+
+    @consume({ context: referenceGenomeContext, subscribe: true })
+    referenceGenome: ReferenceGenome = {
+        nucleotideSequences: [],
+        genes: [],
+    };
+
+    override render() {
+        return html`
+            <h1 class="text-xl font-bold">Dummy component</h1>
+            <p>
+                What you can see here is a dummy component that displays the values of the wrapping "gs-app". Actually
+                "gs-app" doesn't display anything.
+            </p>
+            <h2 class="text-lg font-bold">LAPIS URL</h2>
+            <p>${this.lapis}</p>
+            <h2 class="text-lg font-bold">Reference genomes</h2>
+            <pre><code>${JSON.stringify(this.referenceGenome, null, 2)}</code></pre>
+        `;
+    }
+
+    override createRenderRoot() {
+        return this;
+    }
+}