@genspectrum/dashboard-components 0.10.0 → 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/style.css

@@ -1561,6 +1561,38 @@ html {
 .select[multiple] {
   height: auto;
 }
+.stat {
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.1;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.stat-title {
+  grid-column-start: 1;
+  white-space: nowrap;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
+.stat-value {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 800;
+}
+.stat-desc {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
 .steps {
   display: inline-grid;
   grid-auto-flow: column;
@@ -3427,6 +3459,15 @@ input.tab:checked + .tab-content,
   .sm\:max-w-5xl {
     max-width: 64rem;
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

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,11 +256,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-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -210,7 +264,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -218,10 +272,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -229,7 +280,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -237,10 +288,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -248,7 +296,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -256,10 +304,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -267,7 +312,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -275,10 +320,23 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -286,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.0",
+    "version": "0.10.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -132,7 +132,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.6.2",
+        "typescript": "~5.7.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^4.0.3",
         "vitest": "^2.0.1"

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 };
 }