@genspectrum/dashboard-components 0.4.4 → 0.5.0

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

@@ -1,15 +1,16 @@
 import { customElement, property } from 'lit/decorators.js';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import { type AxisMax } from '../../preact/shared/charts/getYAxisMax';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
  * ## Context
  *
- * This component displays the prevalence over time of one or more variants.
- * The prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`
- * to the number of cases of the variant given as `denominator`.
+ * This component displays the prevalence over time of one or more datasets, selected by LAPIS filters.
+ * The prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.
+ * The reference dataset is also selected by a LAPIS filter.
  *
  * In the chart views,
  * - the user can select whether to display a confidence interval (not available in the bubble chart).
@@ -23,19 +24,19 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * ### Bar View
  *
  * Displays the prevalence over time as a bar chart.
- * Shows a bar for each variant in the `numerator` on every time step.
+ * Shows a bar for each dataset of the `numeratorFilter` on every time step.
  *
  * ### Line View
  *
  * Displays the prevalence over time as a line chart.
  * Each data point is connected for better visibility.
- * Shows a line for each variant in the `numerator`.
+ * Shows a line for each dataset of the `numeratorFilter`.
  *
  * ### Bubble View
  *
  * Displays the prevalence over time as a bubble chart.
- * The size of the bubbles represents the number of cases of the `denominator` variant.
- * The height of the bubbles represents the prevalence of the `numerator` variants.
+ * The size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.
+ * The height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.
  *
  * ### Table View
  *
@@ -47,30 +48,34 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      *   Required.
+     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     *
+     * The `lapisFilter` will be sent as is to LAPIS to select the data.
+     * It must be a valid LAPIS filter object.
+     *
+     * The `displayName` will be used as the label the prevalence in the views.
+     * It should be human-readable.
      *
-     * Either a single variant or an array of variants to compare.
-     * This must be a valid LAPIS filter object with an additional `displayName` property
-     * which will be used as the label for the variant in the views,
-     * or an array of such objects.
      */
-    @property({type: Object})
-    numerator:
+    @property({ type: Object })
+    numeratorFilter:
         {
             lapisFilter: Record<string, string | number | null | boolean>;
             displayName: string;
         }
         | {
-            lapisFilter: Record<string, string | number | null | boolean>;
-            displayName: string;
-        }[] = { displayName: '', lapisFilter: {} };
+        lapisFilter: Record<string, string | number | null | boolean>;
+        displayName: string;
+    }[] = { displayName: '', lapisFilter: {} };
 
     /**
      * Required.
      *
-     * The variant that the variants in `numerator` are compared to.
+     * The LAPIS filter, to select the data of the reference.
+     * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    denominator: Record<string, string | number | null | boolean> = {};
+    denominatorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
      * The granularity of the time axis.
@@ -113,7 +118,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * 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%';
@@ -121,7 +126,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     /**
      * The height 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 })
     height: string = '700px';
@@ -136,11 +141,38 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     lapisDateField: string = 'date';
 
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number = 1;
+
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number = 1;
+
     override render() {
         return (
             <PrevalenceOverTime
-                numerator={this.numerator}
-                denominator={this.denominator}
+                numeratorFilter={this.numeratorFilter}
+                denominatorFilter={this.denominatorFilter}
                 granularity={this.granularity}
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
@@ -149,11 +181,21 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 height={this.height}
                 headline={this.headline}
                 lapisDateField={this.lapisDateField}
+                pageSize={this.pageSize}
+                yAxisMaxConfig={{
+                    linear: this.yAxisMaxLinear,
+                    logarithmic: this.yAxisMaxLogarithmic,
+                }}
             />
         );
     }
 }
 
+export interface PrevalenceOverTimeComponentProps extends Omit<PrevalenceOverTimeProps, 'yAxisMaxConfig'> {
+    yAxisMaxLinear?: AxisMax;
+    yAxisMaxLogarithmic?: AxisMax;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-prevalence-over-time': PrevalenceOverTimeComponent;
@@ -162,10 +204,10 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, PrevalenceOverTimeProps['numerator']>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numeratorFilter, PrevalenceOverTimeProps['numeratorFilter']>
 >;
 type DenominatorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, PrevalenceOverTimeProps['denominator']>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.denominatorFilter, PrevalenceOverTimeProps['denominatorFilter']>
 >;
 type GranularityMatches = Expect<
     Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, PrevalenceOverTimeProps['granularity']>

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

@@ -3,30 +3,33 @@ import { html } from 'lit';
 
 import './gs-relative-growth-advantage';
 import '../app';
+// eslint-disable-next-line no-duplicate-imports
+import { type RelativeGrowthAdvantageComponentProps } from './gs-relative-growth-advantage';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import denominator from '../../preact/relativeGrowthAdvantage/__mockData__/denominator.json';
-import numerator from '../../preact/relativeGrowthAdvantage/__mockData__/numerator.json';
-import { type RelativeGrowthAdvantageProps } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+import denominatorFilter from '../../preact/relativeGrowthAdvantage/__mockData__/denominatorFilter.json';
+import numeratorFilter from '../../preact/relativeGrowthAdvantage/__mockData__/numeratorFilter.json';
 
 const codeExample = String.raw`
 <gs-relative-growth-advantage
-    numerator='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateFrom": "2020-12-01" }'
-    denominator='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
+    numeratorFilter='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateFrom": "2020-12-01" }'
+    denominatorFilter='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
     generationTime="7"
     views='["line"]'
     width='100%'
     height='700px'
     headline="Relative growth advantage"
     lapisDateField="date"
+    yAxisMaxLinear="1"
+    yAxisMaxLogarithmic="limitTo1"    
 ></gs-relative-growth-advantage>`;
 
-const meta: Meta<RelativeGrowthAdvantageProps> = {
+const meta: Meta<RelativeGrowthAdvantageComponentProps> = {
     title: 'Visualization/Relative growth advantage',
     component: 'gs-relative-growth-advantage',
     argTypes: {
-        numerator: { control: 'object' },
-        denominator: { control: 'object' },
+        numeratorFilter: { control: 'object' },
+        denominatorFilter: { control: 'object' },
         generationTime: { control: 'number' },
         views: {
             options: ['line'],
@@ -35,6 +38,8 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        yAxisMaxLinear: { control: 'object' },
+        yAxisMaxLogarithmic: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -48,41 +53,50 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
 
 export default meta;
 
-const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
+const Template: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-relative-growth-advantage
-                .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}
+                .yAxisMaxLinear=${args.yAxisMaxLinear}
+                .yAxisMaxLogarithmic=${args.yAxisMaxLogarithmic}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
 };
 
-export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
+export const Default: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
     ...Template,
     args: {
-        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
-        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        numeratorFilter: {
+            country: 'Switzerland',
+            pangoLineage: 'B.1.1.7',
+            dateFrom: '2020-12-01',
+            dateTo: '2021-03-01',
+        },
+        denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
         lapisDateField: 'date',
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 'limitTo1',
     },
     parameters: {
         fetchMock: {
             mocks: [
                 {
                     matcher: {
-                        name: 'numerator',
+                        name: 'numeratorFilter',
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             country: 'Switzerland',
@@ -94,12 +108,12 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: numerator,
+                        body: numeratorFilter,
                     },
                 },
                 {
                     matcher: {
-                        name: 'denominator',
+                        name: 'denominatorFilter',
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             country: 'Switzerland',
@@ -110,7 +124,7 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
                     },
                     response: {
                         status: 200,
-                        body: denominator,
+                        body: denominatorFilter,
                     },
                 },
             ],

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

@@ -1,6 +1,11 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import { RelativeGrowthAdvantage, type View } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+import {
+    RelativeGrowthAdvantage,
+    type RelativeGrowthAdvantageProps,
+    type View,
+} from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+import { type AxisMax } from '../../preact/shared/charts/getYAxisMax';
 import type { LapisFilter } from '../../types';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -11,7 +16,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * For this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.
  * This is what we call a "generation".
  *
- * This component estimates the relative growth advantage of a variant by performing a logistic regression.
+ * This component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.
  * Based on the inferred logistic growth rate, we derive the relative growth advantage (per generation).
  *
  * For details on the scientific method, see:
@@ -27,7 +32,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * ### Line View
  *
  * The line view shows the relative growth advantage over time in a line chart.
- * The dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant
+ * The dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)
  * for every day as observed in the data.
  * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
  */
@@ -36,18 +41,20 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS filter for the focal variant.
+     * LAPIS filter to select the data of the focal variant.
+     * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    numerator: Record<string, string | number | null | boolean> = {};
+    numeratorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
      * Required.
      *
-     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     * LAPIS filter to select the data of the baseline variant.
+     * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    denominator: Record<string, string | number | null | boolean> = {};
+    denominatorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
      * The generation time represents the number of days over which the variant's relative growth advantage is measured.
@@ -71,7 +78,7 @@ export class RelativeGrowthAdvantageComponent 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%';
@@ -79,7 +86,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * The height 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 })
     height: string = '700px';
@@ -94,22 +101,51 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     @property({ type: String })
     lapisDateField: string = 'date';
 
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number = 1;
+
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    @property({ type: String })
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number = 1;
+
     override render() {
         return (
             <RelativeGrowthAdvantage
-                numerator={this.numerator}
-                denominator={this.denominator}
+                numeratorFilter={this.numeratorFilter}
+                denominatorFilter={this.denominatorFilter}
                 generationTime={this.generationTime}
                 views={this.views}
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
                 lapisDateField={this.lapisDateField}
+                yAxisMaxConfig={{
+                    linear: this.yAxisMaxLinear,
+                    logarithmic: this.yAxisMaxLogarithmic,
+                }}
             />
         );
     }
 }
 
+export interface RelativeGrowthAdvantageComponentProps extends Omit<RelativeGrowthAdvantageProps, 'yAxisMaxConfig'> {
+    yAxisMaxLinear?: AxisMax;
+    yAxisMaxLogarithmic?: AxisMax;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
@@ -117,7 +153,9 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type NumeratorMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.numerator, LapisFilter>>;
-type DenominatorMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.denominator, LapisFilter>>;
+type NumeratorMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.numeratorFilter, LapisFilter>>;
+type DenominatorMatches = Expect<
+    Equals<typeof RelativeGrowthAdvantageComponent.prototype.denominatorFilter, LapisFilter>
+>;
 type ViewsMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.views, View[]>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */