@genspectrum/dashboard-components 0.10.2 → 0.10.4

package/dist/components.d.ts

@@ -469,9 +469,7 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
  */
 export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
-     * LAPIS filter to select the displayed data.
+     * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     lapisFilter: Record<string, string | number | null | boolean>;
     /**
@@ -529,9 +527,7 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  */
 export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
-     * LAPIS filter to select the displayed data.
+     * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     lapisFilter: Record<string, string | number | null | boolean>;
     /**
@@ -583,8 +579,6 @@ export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGrid
  */
 export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
      * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
@@ -697,7 +691,6 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
  */
 export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     *   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.
@@ -715,8 +708,6 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
         displayName: string;
     }[];
     /**
-     * Required.
-     *
      * The LAPIS filter, to select the data of the reference.
      * It must be a valid LAPIS filter object.
      */
@@ -860,15 +851,11 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  */
 export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
-     * Required.
-     *
      * 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>;
     /**
-     * Required.
-     *
      * LAPIS filter to select the data of the baseline variant.
      * It must be a valid LAPIS filter object.
      */
@@ -921,6 +908,159 @@ 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 | number | null | boolean>;
+    /**
+     * 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
  *
@@ -973,7 +1113,7 @@ export declare class TextInputComponent extends PreactLitAdapter {
     /**
      * The initial value to use for this text input.
      */
-    initialValue: string;
+    initialValue: string | undefined;
     /**
      * Required.
      *
@@ -984,7 +1124,7 @@ export declare class TextInputComponent extends PreactLitAdapter {
     /**
      * The placeholder text to display in the input field.
      */
-    placeholderText: string;
+    placeholderText: string | undefined;
     /**
      * The width of the component.
      *
@@ -999,7 +1139,9 @@ export declare class UserFacingError extends Error {
     constructor(headline: string, message: string);
 }
 
-declare type View = 'table';
+declare type View = default_2.infer<typeof viewSchema>;
+
+declare const viewSchema: default_2.ZodLiteral<"table">;
 
 export { }
 
@@ -1029,11 +1171,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1041,7 +1179,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1049,10 +1187,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1060,7 +1195,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1068,10 +1203,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1079,7 +1211,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1087,10 +1219,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1098,7 +1227,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1106,10 +1235,23 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-aggregate': AggregateComponent;
     }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1117,7 +1259,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1125,7 +1267,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1133,7 +1275,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1141,7 +1283,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1149,7 +1291,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1157,7 +1299,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1165,7 +1307,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1173,7 +1315,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1181,7 +1326,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1189,7 +1334,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1197,7 +1346,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1205,7 +1354,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1213,7 +1365,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1221,7 +1373,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1229,7 +1384,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1237,7 +1392,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1245,7 +1403,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }