feat(components): make NamedLapisFilter a nested type #209

* to prevent accidentally sending the `displayName` as a field to LAPIS
* to make the interface of prevalence over time and mutation comparison similar.

BREAKING CHANGE: the `numerator` attribute of `gs-prevalence-over-time` is now a nested object with separate keys for the `displayName` and the `lapisFilter`

components/src/preact/mutationComparison/mutation-comparison.tsx

@@ -5,7 +5,7 @@ import { getMutationComparisonTableData } from './getMutationComparisonTableData
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import { type LapisFilter, type SequenceType } from '../../types';
+import { type NamedLapisFilter, type SequenceType } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -24,19 +24,14 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonVariant {
-    lapisFilter: LapisFilter;
-    displayName: string;
-}
-
 export interface MutationComparisonProps extends MutationComparisonInnerProps {
     width: string;
     height: string;
     headline?: string;
 }
 
 export interface MutationComparisonInnerProps {
-    variants: MutationComparisonVariant[];
+    variants: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
 }

components/src/preact/mutationComparison/queryMutationData.ts

@@ -1,6 +1,5 @@
-import { type MutationComparisonVariant } from './mutation-comparison';
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
-import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type NamedLapisFilter, type SubstitutionOrDeletionEntry } from '../../types';
 import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
 
@@ -10,7 +9,7 @@ export type MutationData = {
 };
 
 export async function queryMutationData(
-    variants: MutationComparisonVariant[],
+    variants: NamedLapisFilter[],
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {

components/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -57,8 +57,8 @@ export const TwoVariants = {
     ...Template,
     args: {
         numerator: [
-            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
-            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
         denominator: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
@@ -127,7 +127,10 @@ export const TwoVariants = {
 export const OneVariant = {
     ...Template,
     args: {
-        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        numerator: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
         denominator: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,

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

@@ -7,7 +7,7 @@ import PrevalenceOverTimeBubbleChart from './prevalence-over-time-bubble-chart';
 import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
-import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -34,7 +34,7 @@ export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
 
 export interface PrevalenceOverTimeInnerProps {
     numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: NamedLapisFilter;
+    denominator: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];

components/src/query/queryPrevalenceOverTime.ts

@@ -23,18 +23,18 @@ export type PrevalenceOverTimeVariantData = {
 
 export function queryPrevalenceOverTime(
     numeratorFilter: NamedLapisFilter | NamedLapisFilter[],
-    denominatorFilter: NamedLapisFilter,
+    denominatorFilter: LapisFilter,
     granularity: TemporalGranularity,
     smoothingWindow: number,
     lapis: string,
     signal?: AbortSignal,
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(getFilter(denominatorFilter), granularity, smoothingWindow);
+    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
-        const { displayName, ...filter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(filter, granularity, smoothingWindow);
+        const { displayName, lapisFilter } = namedLapisFilter;
+        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -53,12 +53,6 @@ export function queryPrevalenceOverTime(
     return Promise.all(subQueries);
 }
 
-function getFilter(filter: NamedLapisFilter) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { displayName, ...filterWithoutDisplayName } = filter;
-    return filterWithoutDisplayName;
-}
-
 function makeArray<T>(arrayOrSingleItem: T | T[]) {
     if (Array.isArray(arrayOrSingleItem)) {
         return arrayOrSingleItem;

components/src/types.ts

@@ -2,7 +2,10 @@ import { type Deletion, type Insertion, type Substitution } from './utils/mutati
 
 export type LapisFilter = Record<string, string | number | null | boolean>;
 
-export type NamedLapisFilter = LapisFilter & { displayName: string };
+export type NamedLapisFilter = {
+    lapisFilter: LapisFilter;
+    displayName: string;
+};
 
 export type TemporalGranularity = 'day' | 'week' | 'month' | 'year';
 

components/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -1,11 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-    MutationComparison,
-    type MutationComparisonVariant,
-    type View,
-} from '../../preact/mutationComparison/mutation-comparison';
-import { type SequenceType } from '../../types';
+import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -109,8 +104,12 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type VariantsMatches = Expect<
-    Equals<typeof MutationComparisonComponent.prototype.variants, MutationComparisonVariant[]>
+    Equals<typeof MutationComparisonComponent.prototype.variants, MutationComparisonProps['variants']>
+>;
+type SequenceTypeMatches = Expect<
+    Equals<typeof MutationComparisonComponent.prototype.sequenceType, MutationComparisonProps['sequenceType']>
+>;
+type ViewsMatches = Expect<
+    Equals<typeof MutationComparisonComponent.prototype.views, MutationComparisonProps['views']>
 >;
-type SequenceTypeMatches = Expect<Equals<typeof MutationComparisonComponent.prototype.sequenceType, SequenceType>>;
-type ViewsMatches = Expect<Equals<typeof MutationComparisonComponent.prototype.views, View[]>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

components/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -16,8 +16,8 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-prevalence-over-time
-    numerator='[{ "displayName": "EG", "country": "USA", "pangoLineage": "EG*" }, { "displayName": "JN.1", "country": "USA", "pangoLineage": "JN.1*" }]'
-    denominator='{ "country": "USA", "displayName": "All" }'
+    numerator='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    denominator='{ "country": "USA"}'
     granularity="month"
     smoothingWindow="0"
     views='["bar", "line", "bubble", "table"]'
@@ -84,10 +84,10 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
         numerator: [
-            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
-            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
-        denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' },
+        denominator: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -154,8 +154,11 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
 export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
-        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
-        denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' },
+        numerator: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
+        denominator: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],

components/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -1,8 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import PrevalenceOverTime, { type View } from '../../preact/prevalenceOverTime/prevalence-over-time';
-import { type ConfidenceIntervalMethod } from '../../preact/shared/charts/confideceInterval';
-import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import PrevalenceOverTime, { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -55,19 +53,24 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * which will be used as the label for the variant in the views,
      * or an array of such objects.
      */
-    @property({ type: Object })
+    @property({type: Object})
     numerator:
-        (Record<string, string | number | null | boolean> & { displayName: string })
-        | (Record<string, string | number | null | boolean> & { displayName: string; })[]
-        = { displayName: '' };
+        {
+            lapisFilter: Record<string, string | number | null | boolean>;
+            displayName: string;
+        }
+        | {
+            lapisFilter: Record<string, string | number | null | boolean>;
+            displayName: string;
+        }[] = { displayName: '', lapisFilter: {} };
 
     /**
      * Required.
      *
      * The variant that the variants in `numerator` are compared to.
      */
     @property({ type: Object })
-    denominator: Record<string, string | number | null | boolean> & { displayName: string } = { displayName: '' };
+    denominator: Record<string, string | number | null | boolean> = {};
 
     /**
      * The granularity of the time axis.
@@ -148,12 +151,21 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, NamedLapisFilter | NamedLapisFilter[]>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, PrevalenceOverTimeProps['numerator']>
+>;
+type DenominatorMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, PrevalenceOverTimeProps['denominator']>
+>;
+type GranularityMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, PrevalenceOverTimeProps['granularity']>
+>;
+type ViewsMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.views, PrevalenceOverTimeProps['views']>
 >;
-type DenominatorMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, NamedLapisFilter>>;
-type GranularityMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, TemporalGranularity>>;
-type ViewsMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.views, View[]>>;
 type ConfidenceIntervalMethodsMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.confidenceIntervalMethods, ConfidenceIntervalMethod[]>
+    Equals<
+        typeof PrevalenceOverTimeComponent.prototype.confidenceIntervalMethods,
+        PrevalenceOverTimeProps['confidenceIntervalMethods']
+    >
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

examples/React/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 import '@genspectrum/dashboard-components';
 import '@genspectrum/dashboard-components/style.css';
 
@@ -47,9 +47,11 @@ function App() {
     };
 
     const numerator = {
-        ...denominator,
         displayName: 'My variant',
-        pangoLineage: 'B.1.1.7',
+        lapisFilter: {
+            ...denominator,
+            pangoLineage: 'B.1.1.7',
+        }
     };
 
     return (
@@ -59,7 +61,7 @@ function App() {
                 fields='["region", "country", "division", "location"]'
             ></gs-location-filter>
             <gs-date-range-selector initialValue='last6Months'></gs-date-range-selector>
-            <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <div style={{display: 'flex', flexDirection: 'row'}}>
                 <gs-prevalence-over-time
                     numerator={JSON.stringify(numerator)}
                     denominator={JSON.stringify(denominator)}
@@ -69,7 +71,7 @@ function App() {
                     width='800px'
                     height='300px'
                 ></gs-prevalence-over-time>
-                <div style={{ height: '300px', width: '1000px' }}>
+                <div style={{height: '300px', width: '1000px'}}>
                     <gs-prevalence-over-time
                         numerator={JSON.stringify(numerator)}
                         denominator={JSON.stringify(denominator)}

examples/plainJavascript/index.html

@@ -16,21 +16,21 @@
     <body>
         <gs-app lapis="https://s1.int.genspectrum.org/open">
             <gs-location-filter
-                value="Europe / Switzerland"
+                initialValue="Europe / Switzerland"
                 fields='["region", "country", "division", "location"]'
             ></gs-location-filter>
             <gs-date-range-selector
-                selectedValue="last6Months"
+                initialValue="last6Months"
             ></gs-date-range-selector>
             <gs-prevalence-over-time
-                numerator='{"displayName": "My variant","country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
+                numerator='{"displayName": "My variant","lapisFilter":{"country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}}'
                 denominator='{"country":"Switzerland", "dateTo":"2022-01-01"}'
                 granularity="day"
                 smoothingWindow="7"
                 views='["line", "table"]'
             ></gs-prevalence-over-time>
             <gs-prevalence-over-time
-                numerator='{"displayName": "My variant","country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
+                numerator='{"displayName": "My variant","lapisFilter":{"country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}}'
                 denominator='{"country":"Switzerland", "dateTo":"2022-01-01"}'
                 granularity="month"
                 smoothingWindow="0"

examples/plainJavascript/package.json

@@ -5,10 +5,10 @@
     "scripts": {
         "dev": "vite dev",
         "start": "vite dev",
-        "import-components": "npm --prefix ../../components/ run build-and-pack && npm install ../../components/genspectrum-dashboard-components-0.0.1.tgz"
+        "import-components": "npm --prefix ../../components/ run build-and-pack && npm install ../../components/genspectrum-dashboard-components.tgz"
     },
     "dependencies": {
-        "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components-0.0.1.tgz",
+        "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components.tgz",
         "vite": "^5.2.8"
     }
 }