@genspectrum/dashboard-components 0.10.3 → 0.11.0

package/dist/components.d.ts

@@ -35,12 +35,17 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * A list of tabs with views that this component should provide.
      */
-    views: View[];
+    views: AggregateView[];
     /**
      * The filter to apply to the data.
      * It must be a valid LAPIS filter object.
      */
-    filter: LapisFilter;
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The width of the component.
      *
@@ -70,6 +75,10 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
     render(): JSX_2.Element;
 }
 
+declare type AggregateView = default_2.infer<typeof aggregateViewSchema>;
+
+declare const aggregateViewSchema: default_2.ZodLiteral<"table">;
+
 /**
  * ## Context
  *
@@ -187,9 +196,9 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
      */
     width: string;
     /**
-     * The name of the column in LAPIS that contains the date information.
+     * The name of the metadata field in LAPIS that contains the date information.
      */
-    dateColumn: string;
+    lapisDateField: string;
     render(): JSX_2.Element;
 }
 
@@ -199,10 +208,6 @@ declare class ErrorEvent_2 extends Event {
 }
 export { ErrorEvent_2 as ErrorEvent }
 
-declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
-
-declare const lapisFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean]>>;
-
 /**
  *
  * ## Context
@@ -343,7 +348,12 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
      * It should be human-readable.
      */
     lapisFilters: {
-        lapisFilter: Record<string, string | number | null | boolean>;
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
         displayName: string;
     }[];
     /**
@@ -471,7 +481,12 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
-    lapisFilter: Record<string, string | number | null | boolean>;
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The type of the sequence for which the mutations should be shown.
      */
@@ -529,7 +544,12 @@ export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGrid
     /**
      * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
-    lapisFilter: Record<string, string | number | null | boolean>;
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The type of the sequence for which the mutations should be shown.
      */
@@ -587,11 +607,13 @@ export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWi
      * The `displayName` will be used to label the component views.
      * It should be human-readable.
      *
-     */ lapisFilter: {
-        lapisFilter: Record<string, string | number | null | boolean>;
-        displayName: string;
-    } | {
-        lapisFilter: Record<string, string | number | null | boolean>;
+     */ lapisFilters: {
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
         displayName: string;
     }[];
     /**
@@ -700,18 +722,25 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * It should be human-readable.
      *
      */
-    numeratorFilter: {
-        lapisFilter: Record<string, string | number | null | boolean>;
-        displayName: string;
-    } | {
-        lapisFilter: Record<string, string | number | null | boolean>;
+    numeratorFilters: {
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
         displayName: string;
     }[];
     /**
      * The LAPIS filter, to select the data of the reference.
      * It must be a valid LAPIS filter object.
      */
-    denominatorFilter: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The granularity of the time axis.
      */
@@ -854,12 +883,22 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * LAPIS filter to select the data of the focal variant.
      * It must be a valid LAPIS filter object.
      */
-    numeratorFilter: Record<string, string | number | null | boolean>;
+    numeratorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * LAPIS filter to select the data of the baseline variant.
      * It must be a valid LAPIS filter object.
      */
-    denominatorFilter: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * 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.
@@ -908,6 +947,164 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     render(): JSX_2.Element;
 }
 
+/**
+ * ## Context
+ *
+ * This component shows the geographic distribution of sequence data from LAPIS.
+ * It displays the count and proportion (number of sample per `lapisLocationField` / number of samples matching the `lapisFilter`)
+ * of the data by location.
+ *
+ * ## Views
+ *
+ * ### Map View
+ *
+ * This view displays a chloropleth map based on [Leaflet](https://leafletjs.com/).
+ * The component expects a `mapSource` object that specifies where the map data can be downloaded from.
+ * We can imagine that we add other map source types later (for example, GeoJSON).
+ *
+ * #### TopoJSON
+ *
+ * Suppose you provide this example object as `mapSource`:
+ *
+ * ```json
+ * {
+ *    "type": "topojson",
+ *    "url": "https://example.com/map.topojson",
+ *    "topologyObjectsKey": "myObjectKey"
+ * }
+ * ```
+ *
+ * The URL must point to a [TopoJSON file](https://github.com/topojson/topojson) that contains the map data.
+ * The TopoJSON file must schematically look like this,
+ * where `objects[topologyObjectsKey]` must be a valid GeometryCollection (`objects.myObjectKey` in this example):
+ *
+ * ```json
+ * {
+ *   "type": "Topology",
+ *   "objects": {
+ *     "myObjectKey": {
+ *       "type": "GeometryCollection",
+ *       "geometries": [
+ *         {
+ *           "type": "Polygon",
+ *           "properties": {
+ *             "name": "North Rhine Westphalia"
+ *           },
+ *           "id": "DE.NW",
+ *           "arcs": [...]
+ *         },
+ *         ...
+ *       ]
+ *     }
+ *   },
+ *   "arcs": [...],
+ *   "transform": {...}
+ * }
+ * ```
+ *
+ * You can use any valid TopoJSON file.
+ * https://github.com/markmarkoh/datamaps/tree/master/src/js/data contains TopoJSON files for many countries.
+ *
+ * The `lapisFilter` is used to select the data to display, and it is aggregated by the `lapisLocationField`.
+ * This component assumes that every geometry object in the TopoJSON file has a `properties.name` field.
+ *
+ * The values that LAPIS returns for `lapisLocationField` must match the `properties.name` in the map data.
+ * LAPIS entries where `lapisLocationField` is `null` are ignored on the map.
+ *
+ * The names of the locations in the TopoJSON map and in LAPIS should match.
+ * However, there are two cases of misalignment:
+ * - If there is a LAPIS location that does not match any location in the TopoJSON map,
+ *   the component will log a console warning to assist in creating map data that aligns with the LAPIS data.
+ * - If a TopoJSON location does not match any LAPIS location for the given filter,
+ *   no data will be displayed for this location.
+ *   This is expected, as LAPIS will only return locations where sequences have been collected for that filter.
+ *
+ * ### Table View
+ *
+ * This view displays the data in a table format.
+ * It is similar to the table view of the `gs-aggregate` component.
+ * The table has three columns:
+ * - `lapisLocationField`,
+ * - `count` (the number of samples in this location matching the `lapisFilter`),
+ * - `proportion` (`count` / sum of the `count` of all locations).
+ */
+export declare class SequencesByLocationComponent extends PreactLitAdapterWithGridJsStyles {
+    static styles: CSSResult[];
+    /**
+     * LAPIS filter to select the displayed data.
+     * If you want to display the distribution over the states of a certain country,
+     * you should usually filter by that country here (e.g. { country: 'USA' }).
+     */
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
+    /**
+     * Required.
+     *
+     * The location field to aggregate the data by.
+     * This should match the selected map location granularity.
+     */
+    lapisLocationField: string;
+    /**
+     * Required when using the map view.
+     *
+     * The source of the map data. See component level docs for more information.
+     */
+    mapSource: {
+        type: 'topojson';
+        url: string;
+        topologyObjectsKey: string;
+    } | undefined;
+    /**
+     * Enable map navigation (dragging, keyboard navigation, zooming).
+     */
+    enableMapNavigation: boolean;
+    /**
+     * The width of the component.
+     * Not that the map in the map view is not responsive
+     * (i.e. does not adjust its size when the component is resized).
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    width: string;
+    /**
+     * The height of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    height: string;
+    /**
+     A list of tabs with views that this component should provide.
+     */
+    views: ('map' | 'table')[];
+    /**
+     * The initial zoom level of the map.
+     */
+    zoom: number;
+    /**
+     * Initially shift the center of the map in x direction (longitude).
+     *
+     * `-180` is the International Date Line with the map shifted to the right, `0` is the prime meridian,
+     * `180` is the International Date Line with the map shifted to the left.
+     */
+    offsetX: number;
+    /**
+     * Initially shift the center of the map in y direction (latitude).
+     *
+     * `-90` is the South Pole, `0` is the equator, `90` is the North Pole.
+     */
+    offsetY: number;
+    /**
+     * 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).
+     */
+    pageSize: boolean | number;
+    render(): JSX_2.Element;
+}
+
 /**
  * ## Context
  *
@@ -919,12 +1116,22 @@ export declare class StatisticsComponent extends PreactLitAdapterWithGridJsStyle
      * The filter to apply to the data for the overall number of sequences and as the numerator for the proportion.
      * It must be a valid LAPIS filter object.
      */
-    numeratorFilter: LapisFilter;
+    numeratorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The filter to apply to the data for the denominator of the proportion.
      * It must be a valid LAPIS filter object.
      */
-    denominatorFilter: LapisFilter;
+    denominatorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    };
     /**
      * The width of the component.
      *
@@ -986,10 +1193,6 @@ export declare class UserFacingError extends Error {
     constructor(headline: string, message: string);
 }
 
-declare type View = default_2.infer<typeof viewSchema>;
-
-declare const viewSchema: default_2.ZodLiteral<"table">;
-
 export { }
 
 
@@ -1128,6 +1331,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-sequences-by-location': SequencesByLocationComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-statistics': StatisticsComponent;
@@ -1207,7 +1426,7 @@ declare global {
         'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }