@genspectrum/dashboard-components 0.3.1 → 0.3.2

package/dist/genspectrum-components.d.ts

@@ -529,6 +529,14 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    lapisDateField: string;
     render(): JSX_2.Element;
 }
 
@@ -639,6 +647,14 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    lapisDateField: string;
     render(): JSX_2.Element;
 }
 
@@ -732,20 +748,20 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/operator/RenameFieldOperator.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import { MockOperator } from './MockOperator';
+import { RenameFieldOperator } from './RenameFieldOperator';
+
+const mockOperator = new MockOperator([
+    { id: 1, value: 1 },
+    { id: 2, value: 2 },
+    { id: 3, value: 3 },
+    { id: 4, value: 4 },
+    { id: 5, value: 5 },
+]);
+
+describe('RenameFieldOperator', () => {
+    it('should map the keys', async () => {
+        const underTest = new RenameFieldOperator(mockOperator, 'value', 'mappedValue');
+
+        const result = await underTest.evaluate('lapis');
+
+        expect(result.content).deep.equal([
+            { id: 1, value: 1, mappedValue: 1 },
+            { id: 2, value: 2, mappedValue: 2 },
+            { id: 3, value: 3, mappedValue: 3 },
+            { id: 4, value: 4, mappedValue: 4 },
+            { id: 5, value: 5, mappedValue: 5 },
+        ]);
+    });
+});

package/src/operator/RenameFieldOperator.ts

@@ -0,0 +1,19 @@
+import { MapOperator } from './MapOperator';
+import type { Operator } from './Operator';
+
+export class RenameFieldOperator<
+    OldFieldName extends string,
+    NewFieldName extends string,
+    Data extends { [key in OldFieldName]: unknown },
+> extends MapOperator<Data, Data & { [key in NewFieldName]: Data[OldFieldName] }> {
+    constructor(child: Operator<Data>, oldFieldName: OldFieldName, newFieldName: NewFieldName) {
+        super(
+            child,
+            (value) =>
+                ({
+                    ...value,
+                    [newFieldName]: value[oldFieldName],
+                }) as Data & { [key in NewFieldName]: Data[OldFieldName] },
+        );
+    }
+}

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

@@ -48,6 +48,7 @@ const Template = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -68,6 +69,7 @@ export const TwoVariants = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -139,6 +141,7 @@ export const OneVariant = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

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

@@ -39,6 +39,7 @@ export interface PrevalenceOverTimeInnerProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    lapisDateField: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -51,6 +52,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     width,
     height,
     headline = 'Prevalence over time',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -65,6 +67,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -79,11 +82,12 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
+        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
         [lapis, numerator, denominator, granularity, smoothingWindow],
     );
 

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

@@ -35,6 +35,7 @@ export const Primary = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -46,6 +47,7 @@ export const Primary = {
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

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

@@ -33,6 +33,7 @@ export interface RelativeGrowthAdvantagePropsInner {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    lapisDateField: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -43,6 +44,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     headline = 'Relative growth advantage',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -55,6 +57,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                         numerator={numerator}
                         denominator={denominator}
                         generationTime={generationTime}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -67,12 +70,13 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     denominator,
     generationTime,
     views,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
+        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
         [lapis, numerator, denominator, generationTime, views],
     );
 

package/src/query/queryPrevalenceOverTime.ts

@@ -3,6 +3,7 @@ import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { FillMissingOperator } from '../operator/FillMissingOperator';
 import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { SlidingOperator } from '../operator/SlidingOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../types';
@@ -27,14 +28,15 @@ export function queryPrevalenceOverTime(
     granularity: TemporalGranularity,
     smoothingWindow: number,
     lapis: string,
+    lapisDateField: string,
     signal?: AbortSignal,
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
+    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
         const { displayName, lapisFilter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
+        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -60,11 +62,15 @@ function makeArray<T>(arrayOrSingleItem: T | T[]) {
     return [arrayOrSingleItem];
 }
 
-function fetchAndPrepare(filter: LapisFilter, granularity: TemporalGranularity, smoothingWindow: number) {
-    const fetchData = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(filter, ['date']);
-    const mapData = new MapOperator(fetchData, (d) => mapDateToGranularityRange(d, granularity));
+function fetchAndPrepare<LapisDateField extends string>(
+    filter: LapisFilter,
+    granularity: TemporalGranularity,
+    smoothingWindow: number,
+    lapisDateField: LapisDateField,
+) {
+    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+    const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
+    const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
     const fillData = new FillMissingOperator(
         groupByData,

package/src/query/queryRelativeGrowthAdvantage.ts

@@ -1,25 +1,29 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { type LapisFilter } from '../types';
 import { getMinMaxTemporal, TemporalCache, type YearMonthDay } from '../utils/temporal';
 
 export type RelativeGrowthAdvantageData = Awaited<ReturnType<typeof queryRelativeGrowthAdvantage>>;
 
-export async function queryRelativeGrowthAdvantage(
+export async function queryRelativeGrowthAdvantage<LapisDateField extends string>(
     numerator: LapisFilter,
     denominator: LapisFilter,
     generationTime: number,
     lapis: string,
+    lapisDateField: LapisDateField,
     signal?: AbortSignal,
 ) {
     const fetchNumerator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(numerator, ['date']);
+        [key in LapisDateField]: string | null;
+    }>(numerator, [lapisDateField]);
     const fetchDenominator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(denominator, ['date']);
-    const mapNumerator = new MapOperator(fetchNumerator, toYearMonthDay);
-    const mapDenominator = new MapOperator(fetchDenominator, toYearMonthDay);
+        [key in LapisDateField]: string | null;
+    }>(denominator, [lapisDateField]);
+    const mapToFixedDateKeyNumerator = new RenameFieldOperator(fetchNumerator, lapisDateField, 'date');
+    const mapToFixedDateKeyDenominator = new RenameFieldOperator(fetchDenominator, lapisDateField, 'date');
+    const mapNumerator = new MapOperator(mapToFixedDateKeyNumerator, toYearMonthDay);
+    const mapDenominator = new MapOperator(mapToFixedDateKeyDenominator, toYearMonthDay);
     const [numeratorData, denominatorData] = await Promise.all([
         mapNumerator.evaluate(lapis, signal),
         mapDenominator.evaluate(lapis, signal),

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

@@ -23,8 +23,9 @@ const codeExample = String.raw`
     views='["bar", "line", "bubble", "table"]'
     confidenceIntervalMethods='["wilson"]'
     headline="Prevalence over time"
-    width='100%'
-    height='700px'
+    width="100%"
+    height="700px"
+    lapisDateField="date"
 ></gs-prevalence-over-time>`;
 
 const meta: Meta<Required<PrevalenceOverTimeProps>> = {
@@ -75,6 +76,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .lapisDateField=${args.lapisDateField}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -95,6 +97,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -166,6 +169,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

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

@@ -126,6 +126,16 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     height: string = '700px';
 
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    @property({ type: String })
+    lapisDateField: string = 'date';
+
     override render() {
         return (
             <PrevalenceOverTime
@@ -138,6 +148,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                lapisDateField={this.lapisDateField}
             />
         );
     }

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -18,6 +18,7 @@ const codeExample = String.raw`
     width='100%'
     height='700px'
     headline="Relative growth advantage"
+    lapisDateField="date"
 ></gs-relative-growth-advantage>`;
 
 const meta: Meta<RelativeGrowthAdvantageProps> = {
@@ -58,6 +59,7 @@ const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .lapisDateField=${args.lapisDateField}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
@@ -73,6 +75,7 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -84,6 +84,16 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     @property({ type: String })
     height: string = '700px';
 
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    @property({ type: String })
+    lapisDateField: string = 'date';
+
     override render() {
         return (
             <RelativeGrowthAdvantage
@@ -94,6 +104,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                lapisDateField={this.lapisDateField}
             />
         );
     }