@genspectrum/dashboard-components 0.1.3 → 0.1.5

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

@@ -13,9 +13,10 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
-import Info from '../components/info';
+import Info, { InfoHeadline1, InfoParagraph } 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,8 @@ export interface PrevalenceOverTimeProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    size?: Size;
+    headline?: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -40,6 +43,8 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    size,
+    headline = 'Prevalence over time',
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -48,8 +53,6 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
         [lapis, numerator, denominator, granularity, smoothingWindow],
     );
 
-    const headline = 'Prevalence over time';
-
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -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} />,
+                };
         }
     };
 
@@ -194,9 +202,19 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getPrevalenceOverTimeTableData(data, granularity)}
                 filename='prevalence-over-time.csv'
             />
-            <Info className='ml-1' content='Info for prevalence over time' />
+
+            <PrevalenceOverTimeInfo />
         </div>
     );
 };
 
+const PrevalenceOverTimeInfo: FunctionComponent = () => {
+    return (
+        <Info size={{ width: '600px', height: '30vh' }}>
+            <InfoHeadline1>Prevalence over time</InfoHeadline1>
+            <InfoParagraph>Prevalence over time info.</InfoParagraph>
+        </Info>
+    );
+};
+
 export default PrevalenceOverTime;

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,17 @@ export default {
     parameters: {
         fetchMock: {},
     },
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        generationTime: { control: 'number' },
+        views: {
+            options: ['line'],
+            control: { type: 'check' },
+        },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
+    },
 };
 
 export const Primary = {
@@ -20,6 +31,8 @@ export const Primary = {
                 denominator={args.denominator}
                 generationTime={args.generationTime}
                 views={args.views}
+                size={args.size}
+                headline={args.headline}
             />
         </LapisUrlContext.Provider>
     ),
@@ -28,6 +41,8 @@ export const Primary = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Relative growth advantage',
     },
     parameters: {
         fetchMock: {

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

@@ -10,9 +10,10 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
-import Info from '../components/info';
+import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } 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,8 @@ export interface RelativeGrowthAdvantageProps {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    size?: Size;
+    headline?: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -32,6 +35,8 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     views,
+    size,
+    headline = 'Relative growth advantage',
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -41,7 +46,6 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
         [lapis, numerator, denominator, generationTime, views],
     );
 
-    const headline = 'Relative growth advantage';
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -67,14 +71,17 @@ 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}
+                    generationTime={generationTime}
+                />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -83,6 +90,7 @@ type RelativeGrowthAdvantageTabsProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     views: View[];
+    generationTime: number;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
@@ -90,6 +98,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     yAxisScaleType,
     setYAxisScaleType,
     views,
+    generationTime,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -112,7 +121,11 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 
     const tabs = views.map((view) => getTab(view));
     const toolbar = () => (
-        <RelativeGrowthAdvantageToolbar yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
+        <RelativeGrowthAdvantageToolbar
+            generationTime={generationTime}
+            yAxisScaleType={yAxisScaleType}
+            setYAxisScaleType={setYAxisScaleType}
+        />
     );
 
     return <Tabs tabs={tabs} toolbar={toolbar} />;
@@ -121,16 +134,53 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 type RelativeGrowthAdvantageToolbarProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
+    generationTime: number;
 };
 
 const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
+    generationTime,
 }) => {
     return (
         <div class='flex'>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
-            <Info className='ml-1' content='Line chart' />
+            <RelativeGrowthAdvantageInfo generationTime={generationTime} />
         </div>
     );
 };
+
+const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
+    return (
+        <Info size={{ width: '600px', height: '30vh' }}>
+            <InfoHeadline1>Relative growth advantage</InfoHeadline1>
+            <InfoParagraph>
+                If variants spread pre-dominantly by local transmission across demographic groups, this estimate
+                reflects the relative viral intrinsic growth advantage of the focal variant in the selected country and
+                time frame. We report the relative growth advantage per {generationTime} days (in percentage; 0% means
+                equal growth). Importantly, the relative growth advantage estimate reflects the advantage compared to
+                the co-circulating variants. Thus, as new variants spread, the advantage of the focal variant may
+                decrease. Different mechanisms can alter the intrinsic growth rate, including an intrinsic transmission
+                advantage, immune evasion, and a prolonged infectious period. When absolute numbers of a variant are
+                low, the growth advantage may merely reflect the current importance of introductions from abroad or the
+                variant spreading in a particular demographic group. In this case, the estimate does not provide
+                information on any intrinsic fitness advantages.
+            </InfoParagraph>
+            <InfoParagraph>
+                Example: Assume that 10 infections from the focal variant and 100 infections from the co-circulating
+                variants occur today and that the focal variant has a relative growth advantage of 50%. Then, if the
+                number of new infections from the co-circulating variants remains at 100 in {generationTime} days from
+                today, we expect the number of new infections from the focal variant to be 15.
+            </InfoParagraph>
+
+            <InfoHeadline2>Reference</InfoHeadline2>
+            <InfoParagraph>
+                Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland."
+                Epidemics (2021); doi:{' '}
+                <InfoLink href='https://www.sciencedirect.com/science/article/pii/S1755436521000335?via=ihub'>
+                    10.1016/j.epidem.2021.100480
+                </InfoLink>
+            </InfoParagraph>
+        </Info>
+    );
+};

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}>