@genspectrum/dashboard-components 0.4.5 → 0.5.1

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

@@ -1,8 +1,8 @@
-import denominator from './__mockData__/denominator.json';
-import denominatorOneVariant from './__mockData__/denominatorOneVariant.json';
-import numeratorEG from './__mockData__/numeratorEG.json';
-import numeratorJN1 from './__mockData__/numeratorJN1.json';
-import numeratorOneVariant from './__mockData__/numeratorOneVariant.json';
+import denominatorFilter from './__mockData__/denominatorFilter.json';
+import denominatorOneDataset from './__mockData__/denominatorFilterOneDataset.json';
+import numeratorFilterEG from './__mockData__/numeratorFilterEG.json';
+import numeratorFilterJN1 from './__mockData__/numeratorFilterJN1.json';
+import numeratorOneDataset from './__mockData__/numeratorFilterOneDataset.json';
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -33,6 +33,7 @@ export default {
         height: { control: 'text' },
         headline: { control: 'text' },
         pageSize: { control: 'object' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -40,8 +41,8 @@ const Template = {
     render: (args: PrevalenceOverTimeProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <PrevalenceOverTime
-                numerator={args.numerator}
-                denominator={args.denominator}
+                numeratorFilter={args.numeratorFilter}
+                denominatorFilter={args.denominatorFilter}
                 granularity={args.granularity}
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
@@ -51,6 +52,7 @@ const Template = {
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -59,11 +61,11 @@ const Template = {
 export const TwoVariants = {
     ...Template,
     args: {
-        numerator: [
+        numeratorFilter: [
             { 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' },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -73,6 +75,10 @@ export const TwoVariants = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -90,7 +96,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorEG,
+                        body: numeratorFilterEG,
                     },
                 },
                 {
@@ -106,7 +112,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorJN1,
+                        body: numeratorFilterJN1,
                     },
                 },
                 {
@@ -121,7 +127,7 @@ export const TwoVariants = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],
@@ -132,11 +138,11 @@ export const TwoVariants = {
 export const OneVariant = {
     ...Template,
     args: {
-        numerator: {
+        numeratorFilter: {
             displayName: 'EG',
             lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
         },
-        denominator: { country: 'USA', dateFrom: '2023-10-01' },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
@@ -146,6 +152,10 @@ export const OneVariant = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -163,7 +173,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: numeratorOneVariant,
+                        body: numeratorOneDataset,
                     },
                 },
                 {
@@ -178,7 +188,7 @@ export const OneVariant = {
                     },
                     response: {
                         status: 200,
-                        body: denominatorOneVariant,
+                        body: denominatorOneDataset,
                     },
                 },
             ],

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

@@ -21,6 +21,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
+import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -33,19 +34,20 @@ export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
 }
 
 export interface PrevalenceOverTimeInnerProps {
-    numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: LapisFilter;
+    numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
+    denominatorFilter: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
@@ -55,6 +57,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     headline = 'Prevalence over time',
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -63,14 +66,15 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <PrevalenceOverTimeInner
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         granularity={granularity}
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
                         pageSize={pageSize}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -79,20 +83,29 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
 };
 
 export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
     confidenceIntervalMethods,
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
-        [lapis, numerator, denominator, granularity, smoothingWindow],
+        () =>
+            queryPrevalenceOverTime(
+                numeratorFilter,
+                denominatorFilter,
+                granularity,
+                smoothingWindow,
+                lapis,
+                lapisDateField,
+            ),
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
     );
 
     if (isLoading) {
@@ -114,6 +127,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
             pageSize={pageSize}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -124,6 +138,7 @@ type PrevalenceOverTimeTabsProps = {
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -132,6 +147,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     granularity,
     confidenceIntervalMethods,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -148,6 +164,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
@@ -159,13 +176,20 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
             case 'bubble':
                 return {
                     title: 'Bubble',
-                    content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <PrevalenceOverTimeBubbleChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
+                        />
+                    ),
                 };
             case 'table':
                 return {
@@ -245,3 +269,6 @@ const PrevalenceOverTimeInfo: FunctionComponent = () => {
         </Info>
     );
 };
+
+export const maxInData = (data: PrevalenceOverTimeData) =>
+    Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));

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

@@ -5,7 +5,9 @@ import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { confidenceIntervalDataLabel } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+import { formatProportion } from '../shared/table/formatProportion';
 
 interface RelativeGrowthAdvantageChartData {
     t: YearMonthDay[];
@@ -25,11 +27,17 @@ interface RelativeGrowthAdvantageChartData {
 interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
@@ -39,8 +47,9 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
         options: {
             maintainAspectRatio: false,
             animation: false,
+
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -52,14 +61,37 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
     };
 
     return (
-        <div className='flex flex-col h-full'>
+        <div className='flex h-full flex-col'>
+            <RelativeGrowthAdvantageDisplay
+                relativeAdvantage={data.params.fd.value}
+                relativeAdvantageLowerBound={data.params.fd.ciLower}
+                relativeAdvantageUpperBound={data.params.fd.ciUpper}
+            />
             <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)}%)
-            </p>
+        </div>
+    );
+};
+
+const RelativeGrowthAdvantageDisplay = ({
+    relativeAdvantage,
+    relativeAdvantageLowerBound,
+    relativeAdvantageUpperBound,
+}: {
+    relativeAdvantage: number;
+    relativeAdvantageLowerBound: number;
+    relativeAdvantageUpperBound: number;
+}) => {
+    return (
+        <div class='mx-auto flex items-end flex-wrap'>
+            <span class='text-[#606060]'>Relative advantage:</span>
+            <div>
+                <span class='text-2xl ml-3'> {formatProportion(relativeAdvantage)} </span>
+                <span class='ml-2.5'>
+                    ({formatProportion(relativeAdvantageLowerBound)} - {formatProportion(relativeAdvantageUpperBound)})
+                </span>
+            </div>
         </div>
     );
 };

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

@@ -1,5 +1,5 @@
-import denominator from './__mockData__/denominator.json';
-import numerator from './__mockData__/numerator.json';
+import denominator from './__mockData__/denominatorFilter.json';
+import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -21,6 +21,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -28,14 +29,15 @@ export const Primary = {
     render: (args: RelativeGrowthAdvantageProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <RelativeGrowthAdvantage
-                numerator={args.numerator}
-                denominator={args.denominator}
+                numeratorFilter={args.numeratorFilter}
+                denominatorFilter={args.denominatorFilter}
                 generationTime={args.generationTime}
                 views={args.views}
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +50,10 @@ export const Primary = {
         height: '700px',
         headline: 'Relative growth advantage',
         lapisDateField: 'date',
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {

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

@@ -17,6 +17,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -29,22 +30,24 @@ export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePro
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
-    numerator: LapisFilter;
-    denominator: LapisFilter;
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
     generationTime: number;
     views: View[];
     lapisDateField: string;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     views,
     width,
     height,
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     headline = 'Relative growth advantage',
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -54,10 +57,11 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                 <Headline heading={headline}>
                     <RelativeGrowthAdvantageInner
                         views={views}
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         generationTime={generationTime}
                         lapisDateField={lapisDateField}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -66,18 +70,19 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
 };
 
 export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     views,
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
-        [lapis, numerator, denominator, generationTime, views],
+        () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
     );
 
     if (isLoading) {
@@ -99,6 +104,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             setYAxisScaleType={setYAxisScaleType}
             views={views}
             generationTime={generationTime}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -109,6 +115,7 @@ type RelativeGrowthAdvantageTabsProps = {
     setYAxisScaleType: (scaleType: ScaleType) => void;
     views: View[];
     generationTime: number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
@@ -117,6 +124,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     views,
     generationTime,
+    yAxisMaxConfig,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -131,6 +139,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };

package/src/preact/shared/charts/confideceInterval.ts

@@ -20,10 +20,15 @@ export function wilson95PercentConfidenceInterval(observed: number, sample: numb
     };
 }
 
-export const confidenceIntervalDataLabel = (value: number, lowerLimit: number, upperLimit: number, prefix?: string) => {
+export const confidenceIntervalDataLabel = (
+    value: number,
+    lowerLimit?: number,
+    upperLimit?: number,
+    prefix?: string,
+) => {
     const label = prefix ? `${prefix}: ` : '';
 
-    return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+    return `${label}${value.toFixed(3)} (${lowerLimit?.toFixed(3)} - ${upperLimit?.toFixed(3)})`;
 };
 
 export type ConfidenceIntervalMethod = 'wilson' | 'none';

package/src/preact/shared/charts/getYAxisMax.ts

@@ -0,0 +1,24 @@
+export interface YAxisMaxConfig {
+    linear?: AxisMax;
+    logarithmic?: AxisMax;
+}
+
+export type AxisMax = 'maxInData' | 'limitTo1' | number;
+
+export const getYAxisMax = (maxInData: number, axisMax?: AxisMax) => {
+    if (!axisMax) {
+        return 1;
+    }
+
+    switch (axisMax) {
+        case 'limitTo1': {
+            return maxInData > 1 ? 1 : maxInData;
+        }
+        case 'maxInData': {
+            return maxInData;
+        }
+        default: {
+            return axisMax;
+        }
+    }
+};

package/src/preact/shared/charts/getYAxisScale.ts

@@ -6,11 +6,9 @@ export function getYAxisScale(scaleType: ScaleType) {
             return { beginAtZero: true, type: 'linear' as const, min: 0, max: 1 };
         }
         case 'logarithmic': {
-            return { type: 'logarithmic' as const };
+            return { type: 'logarithmic' as const, max: 1 };
         }
         case 'logit':
             return { type: 'logit' as const };
-        default:
-            return { beginAtZero: true, type: 'linear' as const };
     }
 }

package/src/query/queryAggregateData.ts

@@ -8,7 +8,7 @@ export type AggregateData = (Record<string, string | null | number | boolean> &
     proportion: number;
 })[];
 
-const compareAscending = (a: string | null | number, b: string | null | number) => {
+export const compareAscending = (a: string | null | number, b: string | null | number) => {
     if (typeof a === 'number' && typeof b === 'number') {
         return a - b;
     }
@@ -20,7 +20,7 @@ const compareAscending = (a: string | null | number, b: string | null | number)
 };
 
 export async function queryAggregateData(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     fields: string[],
     lapis: string,
     initialSort: InitialSort = { field: 'count', direction: 'descending' },
@@ -31,7 +31,7 @@ export async function queryAggregateData(
         throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
     }
 
-    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(lapisFilter, fields);
     const sortData = new SortOperator(fetchData, (a, b) => {
         return initialSort.direction === 'ascending'
             ? compareAscending(a[initialSort.field], b[initialSort.field])

package/src/query/queryInsertions.ts

@@ -2,8 +2,13 @@ import { FetchInsertionsOperator } from '../operator/FetchInsertionsOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
-export function queryInsertions(variant: LapisFilter, sequenceType: SequenceType, lapis: string, signal?: AbortSignal) {
-    const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+export function queryInsertions(
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    const fetchData = new FetchInsertionsOperator(lapisFilter, sequenceType);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

package/src/query/querySubstitutionsOrDeletions.ts

@@ -3,12 +3,12 @@ import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
 export function querySubstitutionsOrDeletions(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     sequenceType: SequenceType,
     lapis: string,
     signal?: AbortSignal,
 ) {
-    const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
+    const fetchData = new FetchSubstitutionsOrDeletionsOperator(lapisFilter, sequenceType, 0);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

package/src/web-components/input/gs-date-range-selector.tsx

@@ -91,7 +91,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-location-filter.tsx

@@ -54,7 +54,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-mutation-filter.tsx

@@ -86,7 +86,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';