@genspectrum/dashboard-components 0.2.0 → 0.3.1

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

@@ -1,12 +1,12 @@
 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';
 
 /**
+ * ## 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`.
@@ -46,23 +46,31 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
+     *   Required.
+     *
      * 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 })
+    @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.
@@ -100,18 +108,23 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Prevalence over time';
+    headline: string = 'Prevalence over time';
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     override render() {
         return (
@@ -122,7 +135,8 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
                 confidenceIntervalMethods={this.confidenceIntervalMethods}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );
@@ -137,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 */

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

@@ -15,6 +15,9 @@ const codeExample = String.raw`
     denominator='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
     generationTime="7"
     views='["line"]'
+    width='100%'
+    height='700px'
+    headline="Relative growth advantage"
 ></gs-relative-growth-advantage>`;
 
 const meta: Meta<RelativeGrowthAdvantageProps> = {
@@ -28,7 +31,8 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             options: ['line'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: withComponentDocs({
@@ -43,7 +47,7 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
 
 export default meta;
 
-const Template: StoryObj<RelativeGrowthAdvantageProps> = {
+const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-relative-growth-advantage
@@ -51,21 +55,23 @@ const Template: StoryObj<RelativeGrowthAdvantageProps> = {
                 .denominator=${args.denominator}
                 .generationTime=${args.generationTime}
                 .views=${args.views}
-                .size=${args.size}
+                .width=${args.width}
+                .height=${args.height}
                 .headline=${args.headline}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
 };
 
-export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
+export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     ...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' },
         generationTime: 7,
         views: ['line'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Relative growth advantage',
     },
     parameters: {

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

@@ -6,7 +6,9 @@ import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
- * We assume a discrete time model, where new infections happen exactly every `generationTime` days.
+ * ## Context
+ *
+ * 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.
@@ -32,12 +34,16 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
+     * Required.
+     *
      * The LAPIS filter for the focal variant.
      */
     @property({ type: Object })
     numerator: Record<string, string | number | null | boolean> = {};
 
     /**
+     * Required.
+     *
      * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
      */
     @property({ type: Object })
@@ -60,18 +66,23 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Relative growth advantage';
+    headline: string = 'Relative growth advantage';
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     override render() {
         return (
@@ -80,7 +91,8 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 denominator={this.denominator}
                 generationTime={this.generationTime}
                 views={this.views}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );