@genspectrum/dashboard-components 0.10.1 → 0.10.2

package/dist/{utilEntrypoint-g4DsyhU7.js → dateRangeOption-du8H7LWu.js}

@@ -1,7 +1,33 @@
+import z from "zod";
+const lapisFilterSchema = z.record(z.union([z.string(), z.number(), z.null(), z.boolean()]));
+const namedLapisFilterSchema = z.object({
+  lapisFilter: lapisFilterSchema,
+  displayName: z.string()
+});
+const sequenceTypeSchema = z.union([z.literal("nucleotide"), z.literal("amino acid")]);
+const views = {
+  table: "table",
+  venn: "venn"
+};
+const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
 const toYYYYMMDD = (date) => {
   const options = { year: "numeric", month: "2-digit", day: "2-digit" };
   return date.toLocaleDateString("en-CA", options);
 };
+const dateRangeOptionSchema = z.object({
+  /** The label of the date range option that will be shown to the user */
+  label: z.string(),
+  /**
+   * The start date of the date range in the format `YYYY-MM-DD`.
+   * If not set, the date range selector will default to the `earliestDate` property.
+   */
+  dateFrom: z.string().date().optional(),
+  /**
+   * The end date of the date range in the format `YYYY-MM-DD`.
+   * If not set, the date range selector will default to the current date.
+   */
+  dateTo: z.string().date().optional()
+});
 class DateRangeOptionChangedEvent extends CustomEvent {
   constructor(detail) {
     super("gs-date-range-option-changed", {
@@ -55,7 +81,12 @@ const dateRangeOptionPresets = {
 };
 export {
   DateRangeOptionChangedEvent as D,
+  dateRangeOptionSchema as a,
   dateRangeOptionPresets as d,
-  toYYYYMMDD as t
+  mutationComparisonViewSchema as m,
+  namedLapisFilterSchema as n,
+  sequenceTypeSchema as s,
+  toYYYYMMDD as t,
+  views as v
 };
-//# sourceMappingURL=utilEntrypoint-g4DsyhU7.js.map
+//# sourceMappingURL=dateRangeOption-du8H7LWu.js.map

package/dist/dateRangeOption-du8H7LWu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangeOption-du8H7LWu.js","sources":["../src/types.ts","../src/preact/dateRangeSelector/dateConversion.ts","../src/preact/dateRangeSelector/dateRangeOption.ts"],"sourcesContent":["import z from 'zod';\n\nimport {\n    type Deletion,\n    type DeletionClass,\n    type Insertion,\n    type InsertionClass,\n    type Substitution,\n    type SubstitutionClass,\n} from './utils/mutations';\n\nexport const lapisFilterSchema = z.record(z.union([z.string(), z.number(), z.null(), z.boolean()]));\nexport type LapisFilter = z.infer<typeof lapisFilterSchema>;\n\nexport const namedLapisFilterSchema = z.object({\n    lapisFilter: lapisFilterSchema,\n    displayName: z.string(),\n});\nexport type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;\n\nexport type TemporalGranularity = 'day' | 'week' | 'month' | 'year';\n\nexport const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);\nexport type SequenceType = z.infer<typeof sequenceTypeSchema>;\n\nexport type SubstitutionOrDeletion = 'substitution' | 'deletion';\n\nexport type MutationType = SubstitutionOrDeletion | 'insertion';\n\nexport type SubstitutionEntry<T extends Substitution = SubstitutionClass> = {\n    type: 'substitution';\n    mutation: T;\n    count: number;\n    proportion: number;\n};\n\nexport type DeletionEntry<T extends Deletion = DeletionClass> = {\n    type: 'deletion';\n    mutation: T;\n    count: number;\n    proportion: number;\n};\n\nexport type InsertionEntry<T extends Insertion = InsertionClass> = { type: 'insertion'; mutation: T; count: number };\n\nexport type SubstitutionOrDeletionEntry<\n    S extends Substitution = SubstitutionClass,\n    D extends Deletion = DeletionClass,\n> = SubstitutionEntry<S> | DeletionEntry<D>;\n\nexport type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;\n\nexport const views = {\n    table: 'table',\n    venn: 'venn',\n} as const;\n\nexport const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);\nexport type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema>;\n","export const toYYYYMMDD = (date: Date) => {\n    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return date.toLocaleDateString('en-CA', options);\n};\n","import z from 'zod';\n\nimport { toYYYYMMDD } from './dateConversion';\n\n/**\n * A date range option that can be used in the `gs-date-range-selector` component.\n */\nexport const dateRangeOptionSchema = z.object({\n    /** The label of the date range option that will be shown to the user */\n    label: z.string(),\n    /**\n     * The start date of the date range in the format `YYYY-MM-DD`.\n     * If not set, the date range selector will default to the `earliestDate` property.\n     */\n    dateFrom: z.string().date().optional(),\n    /**\n     * The end date of the date range in the format `YYYY-MM-DD`.\n     * If not set, the date range selector will default to the current date.\n     */\n    dateTo: z.string().date().optional(),\n});\n\nexport type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;\n\nexport type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };\n\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {\n    constructor(detail: DateRangeSelectOption) {\n        super('gs-date-range-option-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\nconst today = new Date();\n\nconst twoWeeksAgo = new Date();\ntwoWeeksAgo.setDate(today.getDate() - 14);\n\nconst lastMonth = new Date(today);\nlastMonth.setMonth(today.getMonth() - 1);\n\nconst last2Months = new Date(today);\nlast2Months.setMonth(today.getMonth() - 2);\n\nconst last3Months = new Date(today);\nlast3Months.setMonth(today.getMonth() - 3);\n\nconst last6Months = new Date(today);\nlast6Months.setMonth(today.getMonth() - 6);\n\nconst lastYear = new Date(today);\nlastYear.setFullYear(today.getFullYear() - 1);\n\n/**\n * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.\n */\nexport const dateRangeOptionPresets = {\n    last2Weeks: {\n        label: 'Last 2 weeks',\n        dateFrom: toYYYYMMDD(twoWeeksAgo),\n    },\n    lastMonth: {\n        label: 'Last month',\n        dateFrom: toYYYYMMDD(lastMonth),\n    },\n    last2Months: {\n        label: 'Last 2 months',\n        dateFrom: toYYYYMMDD(last2Months),\n    },\n    last3Months: {\n        label: 'Last 3 months',\n        dateFrom: toYYYYMMDD(last3Months),\n    },\n    last6Months: {\n        label: 'Last 6 months',\n        dateFrom: toYYYYMMDD(last6Months),\n    },\n    lastYear: {\n        label: 'Last year',\n        dateFrom: toYYYYMMDD(lastYear),\n    },\n    allTimes: {\n        label: 'All times',\n    },\n} satisfies Record<string, DateRangeOption>;\n"],"names":[],"mappings":";AAWO,MAAM,oBAAoB,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,EAAE,OAAO,GAAG,EAAE,KAAK,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AAGrF,MAAA,yBAAyB,EAAE,OAAO;AAAA,EAC3C,aAAa;AAAA,EACb,aAAa,EAAE,OAAO;AAC1B,CAAC;AAKM,MAAM,qBAAqB,EAAE,MAAM,CAAC,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,CAAC,CAAC;AA8BrF,MAAM,QAAQ;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AACV;AAEO,MAAM,+BAA+B,EAAE,MAAM,CAAC,EAAE,QAAQ,MAAM,KAAK,GAAG,EAAE,QAAQ,MAAM,IAAI,CAAC,CAAC;ACzDtF,MAAA,aAAa,CAAC,SAAe;AACtC,QAAM,UAAsC,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK;AAC/E,SAAA,KAAK,mBAAmB,SAAS,OAAO;AACnD;ACIa,MAAA,wBAAwB,EAAE,OAAO;AAAA;AAAA,EAE1C,OAAO,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhB,UAAU,EAAE,OAAS,EAAA,KAAA,EAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC,QAAQ,EAAE,OAAS,EAAA,KAAA,EAAO,SAAS;AACvC,CAAC;AAMM,MAAM,oCAAoC,YAAmC;AAAA,EAChF,YAAY,QAA+B;AACvC,UAAM,gCAAgC;AAAA,MAClC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AACJ;AAEA,MAAM,4BAAY;AAElB,MAAM,kCAAkB;AACxB,YAAY,QAAQ,MAAM,QAAQ,IAAI,EAAE;AAExC,MAAM,YAAY,IAAI,KAAK,KAAK;AAChC,UAAU,SAAS,MAAM,SAAS,IAAI,CAAC;AAEvC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,SAAS,YAAY,MAAM,YAAY,IAAI,CAAC;AAKrC,MAAM,yBAAyB;AAAA,EAClC,YAAY;AAAA,IACR,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,UAAU,WAAW,SAAS;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,IACP,UAAU,WAAW,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,EACX;AACJ;"}

package/dist/util.d.ts

@@ -1,20 +1,6 @@
-/**
- * A date range option that can be used in the `gs-date-range-selector` component.
- */
-export declare type DateRangeOption = {
-    /** The label of the date range option that will be shown to the user */
-    label: string;
-    /**
-     * The start date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the `earliestDate` property.
-     */
-    dateFrom?: string;
-    /**
-     * The end date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the current date.
-     */
-    dateTo?: string;
-};
+import { default as default_2 } from 'zod';
+
+export declare type DateRangeOption = default_2.infer<typeof dateRangeOptionSchema>;
 
 export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption);
@@ -53,11 +39,67 @@ export declare const dateRangeOptionPresets: {
     };
 };
 
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+declare const dateRangeOptionSchema: default_2.ZodObject<{
+    /** The label of the date range option that will be shown to the user */
+    label: default_2.ZodString;
+    /**
+     * The start date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the `earliestDate` property.
+     */
+    dateFrom: default_2.ZodOptional<default_2.ZodString>;
+    /**
+     * The end date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the current date.
+     */
+    dateTo: default_2.ZodOptional<default_2.ZodString>;
+}, "strip", default_2.ZodTypeAny, {
+    label: string;
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}, {
+    label: string;
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}>;
+
 export declare type DateRangeSelectOption = string | {
     dateFrom: string;
     dateTo: string;
 };
 
+export 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]>>;
+
+export declare type MutationComparisonView = default_2.infer<typeof mutationComparisonViewSchema>;
+
+declare const mutationComparisonViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"venn">]>;
+
+export declare type NamedLapisFilter = default_2.infer<typeof namedLapisFilterSchema>;
+
+declare const namedLapisFilterSchema: default_2.ZodObject<{
+    lapisFilter: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean]>>;
+    displayName: default_2.ZodString;
+}, "strip", default_2.ZodTypeAny, {
+    lapisFilter: Record<string, string | number | boolean | null>;
+    displayName: string;
+}, {
+    lapisFilter: Record<string, string | number | boolean | null>;
+    displayName: string;
+}>;
+
+export declare type SequenceType = default_2.infer<typeof sequenceTypeSchema>;
+
+declare const sequenceTypeSchema: default_2.ZodUnion<[default_2.ZodLiteral<"nucleotide">, default_2.ZodLiteral<"amino acid">]>;
+
+export declare const views: {
+    readonly table: "table";
+    readonly venn: "venn";
+};
+
 export { }
 
 
@@ -86,7 +128,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -94,7 +140,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -102,7 +148,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -110,7 +159,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -118,7 +167,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -126,7 +178,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -134,7 +186,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -142,7 +197,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -150,7 +205,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -158,7 +216,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -166,7 +224,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -174,7 +232,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -182,7 +240,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -190,7 +248,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -198,7 +256,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -206,7 +264,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -214,11 +272,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-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -226,7 +280,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -234,10 +288,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -245,7 +296,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -253,10 +304,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -264,7 +312,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -272,10 +320,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -283,7 +328,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -291,10 +336,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -302,7 +344,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,6 +1,7 @@
-import { D, d } from "./utilEntrypoint-g4DsyhU7.js";
+import { D, d, v } from "./dateRangeOption-du8H7LWu.js";
 export {
   D as DateRangeOptionChangedEvent,
-  d as dateRangeOptionPresets
+  d as dateRangeOptionPresets,
+  v as views
 };
 //# sourceMappingURL=util.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.10.1",
+    "version": "0.10.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/color-scale-selector.tsx

@@ -54,7 +54,11 @@ export const ColorScaleSelector: FunctionComponent<ColorScaleSelectorProps> = ({
     );
 };
 
-export const getColorWithingScale = (value: number, colorScale: ColorScale) => {
+export const getColorWithingScale = (value: number | undefined, colorScale: ColorScale) => {
+    if (value === undefined) {
+        return 'lightgrey';
+    }
+
     if (colorScale.min === colorScale.max) {
         return singleGraphColorRGBByName(colorScale.color, 0);
     }
@@ -66,8 +70,8 @@ export const getColorWithingScale = (value: number, colorScale: ColorScale) => {
     return singleGraphColorRGBByName(colorScale.color, alpha);
 };
 
-export const getTextColorForScale = (value: number, colorScale: ColorScale) => {
-    if (colorScale.min === colorScale.max) {
+export const getTextColorForScale = (value: number | undefined, colorScale: ColorScale) => {
+    if (value === undefined || colorScale.min === colorScale.max) {
         return 'black';
     }
 

package/src/preact/components/error-boundary.tsx

@@ -1,16 +1,26 @@
-import type { FunctionComponent } from 'preact';
-import { useErrorBoundary } from 'preact/hooks';
+import { type RenderableProps } from 'preact';
+import { useErrorBoundary, useMemo } from 'preact/hooks';
+import { type ZodSchema } from 'zod';
 
-import { ErrorDisplay, type ErrorDisplayProps } from './error-display';
+import { ErrorDisplay, type ErrorDisplayProps, InvalidPropsError } from './error-display';
 import { ResizeContainer, type Size } from './resize-container';
 
-type ErrorBoundaryProps = {
+type ErrorBoundaryProps<T> = {
     size: Size;
     layout?: ErrorDisplayProps['layout'];
+    componentProps?: T;
+    schema?: ZodSchema<T>;
 };
 
-export const ErrorBoundary: FunctionComponent<ErrorBoundaryProps> = ({ size, layout, children }) => {
+export const ErrorBoundary = <T extends Record<string, unknown>>({
+    size,
+    layout,
+    componentProps,
+    schema,
+    children,
+}: RenderableProps<ErrorBoundaryProps<T>>) => {
     const [internalError, resetError] = useErrorBoundary();
+    const componentPropsParseError = useCheckComponentProps(schema, componentProps);
 
     if (internalError) {
         return (
@@ -20,5 +30,29 @@ export const ErrorBoundary: FunctionComponent<ErrorBoundaryProps> = ({ size, lay
         );
     }
 
+    if (componentPropsParseError !== undefined) {
+        return (
+            <ResizeContainer size={size}>
+                <ErrorDisplay error={componentPropsParseError} layout={layout} />
+            </ResizeContainer>
+        );
+    }
+
     return <>{children}</>;
 };
+
+// TODO #554 - make both arguments required once all components validate their props
+function useCheckComponentProps<T extends Record<string, unknown>>(schema?: ZodSchema<T>, componentProps?: T) {
+    return useMemo(() => {
+        if (schema === undefined || componentProps === undefined) {
+            return undefined;
+        }
+
+        const parseResult = schema.safeParse(componentProps);
+        if (parseResult.success) {
+            return undefined;
+        }
+
+        return new InvalidPropsError(parseResult.error, componentProps);
+    }, [componentProps, schema]);
+}

package/src/preact/components/error-display.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
+import { type ZodError } from 'zod';
 
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
 
@@ -24,9 +25,19 @@ export class UserFacingError extends Error {
     }
 }
 
+export class InvalidPropsError extends Error {
+    constructor(
+        public readonly zodError: ZodError,
+        public readonly componentProps: Record<string, unknown>,
+    ) {
+        super(zodError.message);
+        this.name = 'InvalidPropsError';
+    }
+}
+
 export type ErrorDisplayProps = {
     error: Error;
-    resetError: () => void;
+    resetError?: () => void;
     layout?: 'horizontal' | 'vertical';
 };
 
@@ -76,10 +87,12 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                     )}
                 </div>
             </div>
-            <button onClick={resetError} className='btn btn-sm flex items-center m-4'>
-                <span className='iconify mdi--reload text-lg' />
-                Try again
-            </button>
+            {resetError !== undefined && (
+                <button onClick={resetError} className='btn btn-sm flex items-center m-4'>
+                    <span className='iconify mdi--reload text-lg' />
+                    Try again
+                </button>
+            )}
         </div>
     );
 };
@@ -115,5 +128,27 @@ function getDisplayedErrorMessage(error: Error) {
         };
     }
 
+    if (error instanceof InvalidPropsError) {
+        const firstError = error.zodError.errors[0];
+        let message = error.zodError.issues
+            .map((issue) => {
+                const actual =
+                    issue.path[0] in error.componentProps
+                        ? ` '${JSON.stringify(error.componentProps[issue.path[0]])}'`
+                        : '';
+                return `Unexpected value${actual} for "${issue.path.join('.')}": ${issue.message}`;
+            })
+            .join(' - ');
+
+        if (firstError.code === 'invalid_type' && firstError.received === 'null') {
+            message = `Is the "${firstError.path[0]}" attribute in the HTML of the correct type? ${message}`;
+        }
+
+        return {
+            headline: 'Error - Invalid component attributes',
+            details: { headline: 'Invalid component attributes', message },
+        };
+    }
+
     return { headline: 'Error', details: undefined };
 }

package/src/preact/dateRangeSelector/computeInitialValues.spec.ts

@@ -50,9 +50,15 @@ describe('computeInitialValues', () => {
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should fall back to default when initial value is unknown', () => {
+    it('should throw when initial value is unknown', () => {
+        expect(() =>
+            computeInitialValues('not a known value', undefined, undefined, earliestDate, dateRangeOptions),
+        ).toThrowError(/Invalid initialValue "not a known value", It must be one of/);
+    });
+
+    it('should throw when initial value is set but no options are provided', () => {
         expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
-            /Invalid initialValue "not a known value", It must be one of/,
+            /There are no selectable options/,
         );
     });
 

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -18,6 +18,12 @@ export function computeInitialValues(
         const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
         if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            if (selectableOptions.length === 0) {
+                throw new UserFacingError(
+                    'Invalid initialValue',
+                    'There are no selectable options, but initialValue is set.',
+                );
+            }
             throw new UserFacingError(
                 'Invalid initialValue',
                 `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -8,6 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const earliestDate = '1970-01-01';
 
@@ -55,8 +56,8 @@ const meta: Meta<DateRangeSelectorProps> = {
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
-        initialDateFrom: '',
-        initialDateTo: '',
+        initialDateFrom: undefined,
+        initialDateTo: undefined,
     },
 };
 
@@ -221,6 +222,19 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
+export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        dateColumn: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);