@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/src/web-components/{display/relative-growth-advantage-component.tsx → 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}
             />
         );

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/aggregate-component.tsx

@@ -1,72 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-
-import { Aggregate, type View } from '../../preact/aggregatedData/aggregate';
-import { type LapisFilter } from '../../types';
-import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
-
-/**
- * ## Context
- *
- * This component displays aggregated data, which can provide an overview of the underlying data.
- *
- * It expects a list of fields to aggregate by and a filter to apply to the data.
- */
-@customElement('gs-aggregate-component')
-export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
-    /**
-     * The fields to aggregate by.
-     */
-    @property({ type: Array })
-    fields: string[] = [];
-
-    /**
-     * The views are used to display the aggregated data.
-     * In the table view, the data is presented in a table format where each field is a column,
-     * along with the aggregated value and its proportion.
-     * The proportion represents the ratio of the aggregated value to the total count of the data
-     * (considering the applied filter).
-     */
-    @property({ type: Array })
-    views: View[] = ['table'];
-
-    /**
-     * The filter to apply to the data.
-     */
-    @property({ type: Object })
-    filter: LapisFilter = {};
-
-    /**
-     * 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 = 'Aggregate';
-
-    override render() {
-        return (
-            <Aggregate
-                fields={this.fields}
-                views={this.views}
-                filter={this.filter}
-                size={this.size}
-                headline={this.headline}
-            />
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
-    }
-}

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/input/mutation-filter-component.tsx

@@ -1,83 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-
-import { type TextInputComponent } from './text-input-component';
-import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
-import { MutationFilter, type SelectedMutationFilterStrings } from '../../preact/mutationFilter/mutation-filter';
-import { PreactLitAdapter } from '../PreactLitAdapter';
-
-/**
- * ## Context
- * This component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.
- *
- * Input values have to be provided one at a time and submitted by pressing the Enter key or by clicking the '+' button.
- * After submission, the component validates the input and fires an event with the selected mutations.
- * All previously selected mutations are displayed at the input field and added to the event.
- * Users can remove a mutation by clicking the 'x' button next to the mutation.
- *
- * Validation of the input is performed according to the following rules:
- *
- * Mutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`
- *     - Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome
- *       (Optional for elements with only one gene/segment)
- *     - Symbol at reference: The symbol at the reference position. (Optional)
- *     - Position: The position of the mutation. (Required)
- *     - Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)
- *     Example: S:614G, 614G, 614- or 614G
- *
- * Insertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`
- *     - Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome
- *       (Optional for elements with only one gene/segment)
- *     - Position: The position of the insertion. (Required)
- *     - Inserted symbols: The symbols that are inserted. (Required)
- *     Example: ins_S:614:G, ins_614:G
- *
- * @fires {CustomEvent<{
- *      nucleotideMutations: string[],
- *      aminoAcidMutations: string[],
- *      nucleotideInsertions: string[],
- *      aminoAcidInsertions: string[]
- *  }>} gs-mutation-filter-changed
- * Fired when:
- * - The user has submitted a valid mutation or insertion
- * - The user has removed a mutation or insertion
- *
- * @fires {CustomEvent<{
- *      nucleotideMutations: string[],
- *      aminoAcidMutations: string[],
- *      nucleotideInsertions: string[],
- *      aminoAcidInsertions: string[]
- *  }>} gs-mutation-filter-on-blur
- * Fired when:
- * - the mutation filter has lost focus
- * Contains the selected mutations in the format
- */
-@customElement('gs-mutation-filter')
-export class MutationFilterComponent extends PreactLitAdapter {
-    /**
-     * The initial value to use for this mutation filter.
-     * Must be either
-     * - an array of strings of valid mutations.
-     * - an object with the keys `nucleotideMutations`, `aminoAcidMutations`, `nucleotideInsertions` and `aminoAcidInsertions` and corresponding string arrays.
-     */
-    @property()
-    initialValue: SelectedMutationFilterStrings | string[] | undefined = undefined;
-
-    override render() {
-        return (
-            <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} />
-            </ReferenceGenomesAwaiter>
-        );
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-mutation-filter': TextInputComponent;
-    }
-
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
-    }
-}