@genspectrum/dashboard-components 0.1.4 → 0.2.0

package/src/web-components/visualization/gs-mutations.tsx

@@ -0,0 +1,94 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { Mutations, type View } from '../../preact/mutations/mutations';
+import { type LapisFilter, type SequenceType } from '../../types';
+import type { Equals, Expect } from '../../utils/typeAssertions';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+/**
+ * This component displays mutations (substitutions, deletions and insertions) for a given variant.
+ *
+ * ## Views
+ *
+ * ### Table View
+ *
+ * The table view shows all substitutions and deletions for the given variant.
+ * It shows the type (substitution or deletion), the total count of the mutation
+ * and the proportion of the mutation in the variant.
+ * The proportion is relative to the total number of sequences matching
+ * the specified sequence filters with non-ambiguous reads at that position.
+ *
+ * The proportion interval filter can be used to filter the displayed mutations on client side.
+ *
+ * ### Grid View
+ *
+ * The grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.
+ * Only positions with at least one mutation in the selected proportion interval are shown.
+ *
+ * ### Insertions View
+ *
+ * The insertions view shows the count of all insertions for the given variant.
+ *
+ */
+@customElement('gs-mutations')
+export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * The `variant` will be sent as is to LAPIS to filter the mutation data.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    variant: Record<string, string | number | null | boolean> = {};
+
+    /**
+     * The type of the sequence for which the mutations should be shown.
+     */
+    @property({ type: String })
+    sequenceType: 'nucleotide' | 'amino acid' = 'nucleotide';
+
+    /**
+     * A list of tabs with views that this component should provide.
+     */
+    @property({ type: Array })
+    views: ('table' | 'grid' | 'insertions')[] = ['table', 'grid'];
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Mutations';
+
+    override render() {
+        return (
+            <Mutations
+                variant={this.variant}
+                sequenceType={this.sequenceType}
+                views={this.views}
+                size={this.size}
+                headline={this.headline}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutations-component': MutationsComponent;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type VariantsMatches = Expect<Equals<typeof MutationsComponent.prototype.variant, LapisFilter>>;
+type SequenceTypeMatches = Expect<Equals<typeof MutationsComponent.prototype.sequenceType, SequenceType>>;
+type ViewsMatches = Expect<Equals<typeof MutationsComponent.prototype.views, View[]>>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/{display/prevalence-over-time-component.stories.ts → visualization/gs-prevalence-over-time.stories.ts}

@@ -3,7 +3,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import '../app';
-import './prevalence-over-time-component';
+import './gs-prevalence-over-time';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
 import denominatorOneVariant from '../../preact/prevalenceOverTime/__mockData__/denominatorOneVariant.json';
@@ -13,6 +14,16 @@ import numeratorOneVariant from '../../preact/prevalenceOverTime/__mockData__/nu
 import { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 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" }'
+    granularity="month"
+    smoothingWindow="0"
+    views='["bar", "line", "bubble", "table"]'
+    confidenceIntervalMethods='["wilson"]'
+></gs-prevalence-over-time>`;
+
 const meta: Meta<PrevalenceOverTimeProps> = {
     title: 'Visualization/Prevalence over time',
     component: 'gs-prevalence-over-time',
@@ -33,7 +44,16 @@ const meta: Meta<PrevalenceOverTimeProps> = {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
 };
 
 export default meta;
@@ -49,6 +69,7 @@ const Template: StoryObj<PrevalenceOverTimeProps> = {
                 .views=${args.views}
                 .confidenceIntervalMethods=${args.confidenceIntervalMethods}
                 .size=${args.size}
+                .headline=${args.headline}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -67,6 +88,7 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {
@@ -133,6 +155,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {

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

@@ -0,0 +1,148 @@
+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 { type Equals, type Expect } from '../../utils/typeAssertions';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+/**
+ * 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`.
+ *
+ * In the chart views,
+ * - the user can select whether to display a confidence interval (not available in the bubble chart).
+ *   The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),
+ *   with a confidence level of 95%.
+ * - the x-axis shows time steps in the selected `granularity`.
+ * - the user can select the y-axis scale (linear, logistic, logit).
+ *
+ * ## Views
+ *
+ * ### Bar View
+ *
+ * Displays the prevalence over time as a bar chart.
+ * Shows a bar for each variant in the `numerator` 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`.
+ *
+ * ### 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.
+ *
+ * ### Table View
+ *
+ * Displays the prevalence over time as a table with one row per time point.
+ */
+@customElement('gs-prevalence-over-time')
+export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    // prettier-ignore
+    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
+    /**
+     * 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:
+        (Record<string, string | number | null | boolean> & { displayName: string })
+        | (Record<string, string | number | null | boolean> & {
+              displayName: string;
+          })[] = { displayName: '' };
+
+    /**
+     * The variant that the variants in `numerator` are compared to.
+     */
+    @property({ type: Object })
+    denominator: Record<string, string | number | null | boolean> & { displayName: string } = { displayName: '' };
+
+    /**
+     * The granularity of the time axis.
+     */
+    @property({ type: String })
+    granularity: 'day' | 'week' | 'month' | 'year' = 'day';
+
+    /**
+     * The number of time steps to use for smoothing the data.
+     * `0` means no smoothing.
+     * Must be a non-negative integer.
+     *
+     * For a given time, the shown value is the mean of the neighbouring measured values.
+     * The `smoothingWindow` value provides the number of neighbouring values to take into account.
+     * The resulting time is computed via `Math.floor(smoothingWindow / 2)`.
+     */
+    @property({ type: Number })
+    smoothingWindow: number = 0;
+
+    /**
+     * A list of tabs with views that this component should provide.
+     */
+    @property({ type: Array })
+    views: ('bar' | 'line' | 'bubble' | 'table')[] = ['bar', 'line', 'bubble', 'table'];
+
+    /**
+     * A list of methods to calculate the confidence interval.
+     * The option `none` is always available and disables confidence intervals.
+     * Pass an empty array to disable the confidence interval selector.
+     */
+    @property({ type: Array })
+    confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Prevalence over time';
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
+    override render() {
+        return (
+            <PrevalenceOverTime
+                numerator={this.numerator}
+                denominator={this.denominator}
+                granularity={this.granularity}
+                smoothingWindow={this.smoothingWindow}
+                views={this.views}
+                confidenceIntervalMethods={this.confidenceIntervalMethods}
+                size={this.size}
+                headline={this.headline}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type NumeratorMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, NamedLapisFilter | NamedLapisFilter[]>
+>;
+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[]>
+>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/{display/relative-growth-advantage-component.stories.ts → visualization/gs-relative-growth-advantage.stories.ts}

@@ -1,13 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './relative-growth-advantage-component';
+import './gs-relative-growth-advantage';
 import '../app';
+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';
 
+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" }'
+    generationTime="7"
+    views='["line"]'
+></gs-relative-growth-advantage>`;
+
 const meta: Meta<RelativeGrowthAdvantageProps> = {
     title: 'Visualization/Relative growth advantage',
     component: 'gs-relative-growth-advantage',
@@ -20,7 +29,16 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
 };
 
 export default meta;
@@ -34,6 +52,7 @@ const Template: StoryObj<RelativeGrowthAdvantageProps> = {
                 .generationTime=${args.generationTime}
                 .views=${args.views}
                 .size=${args.size}
+                .headline=${args.headline}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
@@ -47,6 +66,7 @@ export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
         generationTime: 7,
         views: ['line'],
         size: { width: '100%', height: '700px' },
+        headline: 'Relative growth advantage',
     },
     parameters: {
         fetchMock: {

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

@@ -0,0 +1,100 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { RelativeGrowthAdvantage, type View } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+import type { LapisFilter } from '../../types';
+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.
+ * This is what we call a "generation".
+ *
+ * This component estimates the relative growth advantage of a variant 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:
+ * Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland." Epidemics (2021);
+ * doi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)
+ *
+ * This component fetches aggregated data from LAPIS.
+ * Then the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`
+ * which performs the logistic regression and calculates the relative growth advantage.
+ *
+ * ## Views
+ *
+ * ### 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
+ * for every day as observed in the data.
+ * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
+ */
+@customElement('gs-relative-growth-advantage')
+export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
+    /**
+     * The LAPIS filter for the focal variant.
+     */
+    @property({ type: Object })
+    numerator: Record<string, string | number | null | boolean> = {};
+
+    /**
+     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     */
+    @property({ type: Object })
+    denominator: Record<string, string | number | null | boolean> = {};
+
+    /**
+     * The generation time represents the number of days over which the variant's relative growth advantage is measured.
+     * For example, if we set a generation time of 7 days, then we estimate the growth advantage per week.
+     */
+    @property({ type: Number })
+    generationTime: number = 7;
+
+    /**
+     * A list of tabs with views that this component should provide.
+     */
+    @property({ type: Array })
+    views: 'line'[] = ['line'];
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Relative growth advantage';
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
+    override render() {
+        return (
+            <RelativeGrowthAdvantage
+                numerator={this.numerator}
+                denominator={this.denominator}
+                generationTime={this.generationTime}
+                views={this.views}
+                size={this.size}
+                headline={this.headline}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+    }
+}
+
+/* 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 ViewsMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.views, View[]>>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/visualization/index.ts

@@ -0,0 +1,5 @@
+export { MutationComparisonComponent } from './gs-mutation-comparison';
+export { MutationsComponent } from './gs-mutations';
+export { PrevalenceOverTimeComponent } from './gs-prevalence-over-time';
+export { RelativeGrowthAdvantageComponent } from './gs-relative-growth-advantage';
+export { AggregateComponent } from './gs-aggregate';

package/src/web-components/display/index.ts

@@ -1,5 +0,0 @@
-export { MutationComparisonComponent } from './mutation-comparison-component';
-export { MutationsComponent } from './mutations-component';
-export { PrevalenceOverTimeComponent } from './prevalence-over-time-component';
-export { RelativeGrowthAdvantageComponent } from './relative-growth-advantage-component';
-export { AggregateComponent } from './aggregate-component';

package/src/web-components/display/mutations-component.tsx

@@ -1,40 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-
-import { Mutations, type View } from '../../preact/mutations/mutations';
-import { type LapisFilter, type SequenceType } from '../../types';
-import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
-
-@customElement('gs-mutations-component')
-export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
-    @property({ type: Object })
-    variant: LapisFilter = { displayName: '' };
-
-    @property({ type: String })
-    sequenceType: SequenceType = 'nucleotide';
-
-    @property({ type: Array })
-    views: View[] = ['table', 'grid'];
-
-    /**
-     * The size of the component.
-     *
-     * If not set, the component will take the full width of its container with height 700px.
-     *
-     * 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.
-     */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
-
-    override render() {
-        return (
-            <Mutations variant={this.variant} sequenceType={this.sequenceType} views={this.views} size={this.size} />
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
-    }
-}

package/src/web-components/display/prevalence-over-time-component.tsx

@@ -1,58 +0,0 @@
-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 { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
-
-@customElement('gs-prevalence-over-time')
-export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
-    @property({ type: Object })
-    numerator: NamedLapisFilter | NamedLapisFilter[] = { displayName: '' };
-
-    @property({ type: Object })
-    denominator: NamedLapisFilter = { displayName: '' };
-
-    @property({ type: String })
-    granularity: TemporalGranularity = 'day';
-
-    @property({ type: Number })
-    smoothingWindow: number = 0;
-
-    @property({ type: Array })
-    views: View[] = ['bar', 'line', 'bubble', 'table'];
-
-    @property({ type: Array })
-    confidenceIntervalMethods: ConfidenceIntervalMethod[] = ['wilson'];
-
-    /**
-     * The size of the component.
-     *
-     * If not set, the component will take the full width of its container with height 700px.
-     *
-     * 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.
-     */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
-
-    override render() {
-        return (
-            <PrevalenceOverTime
-                numerator={this.numerator}
-                denominator={this.denominator}
-                granularity={this.granularity}
-                smoothingWindow={this.smoothingWindow}
-                views={this.views}
-                confidenceIntervalMethods={this.confidenceIntervalMethods}
-                size={this.size}
-            />
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
-    }
-}

package/src/web-components/display/relative-growth-advantage-component.tsx

@@ -1,49 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-
-import { RelativeGrowthAdvantage, type View } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
-import type { LapisFilter } from '../../types';
-import { PreactLitAdapter } from '../PreactLitAdapter';
-
-@customElement('gs-relative-growth-advantage')
-export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
-    @property({ type: Object })
-    numerator: LapisFilter = {};
-
-    @property({ type: Object })
-    denominator: LapisFilter = {};
-
-    @property({ type: Number })
-    generationTime: number = 7;
-
-    @property({ type: Array })
-    views: View[] = ['line'];
-
-    /**
-     * The size of the component.
-     *
-     * If not set, the component will take the full width of its container with height 700px.
-     *
-     * 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.
-     */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
-
-    override render() {
-        return (
-            <RelativeGrowthAdvantage
-                numerator={this.numerator}
-                denominator={this.denominator}
-                generationTime={this.generationTime}
-                views={this.views}
-                size={this.size}
-            />
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
-    }
-}

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

@@ -1,46 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-
-import {
-    type CustomSelectOption,
-    DateRangeSelector,
-    type PresetOptionValues,
-} from '../../preact/dateRangeSelector/date-range-selector';
-import { PreactLitAdapter } from '../PreactLitAdapter';
-
-/**
- * @fires {CustomEvent<{ dateFrom: string; dateTo: string; }>} gs-date-range-changed - When the date range has changed
- */
-@customElement('gs-date-range-selector')
-export class DateRangeSelectorComponent<CustomLabel extends string> extends PreactLitAdapter {
-    @property({ type: Array })
-    customSelectOptions: CustomSelectOption<CustomLabel>[] = [];
-
-    @property({ type: String })
-    earliestDate: string | undefined = '1900-01-01';
-
-    @property()
-    initialValue: PresetOptionValues | CustomLabel | string | undefined = '';
-
-    override render() {
-        return (
-            <DateRangeSelector
-                customSelectOptions={this.customSelectOptions}
-                earliestDate={this.earliestDate}
-                initialValue={this.initialValue}
-            />
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent<string>;
-    }
-
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<{
-            dateFrom: string;
-            dateTo: string;
-        }>;
-    }
-}