@genspectrum/dashboard-components 0.10.1 → 0.10.3

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

@@ -1,7 +1,44 @@
+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 temporalGranularitySchema = z.union([
+  z.literal("day"),
+  z.literal("week"),
+  z.literal("month"),
+  z.literal("year")
+]);
+const sequenceTypeSchema = z.union([z.literal("nucleotide"), z.literal("amino acid")]);
+const views = {
+  table: "table",
+  venn: "venn",
+  grid: "grid",
+  insertions: "insertions",
+  bar: "bar",
+  line: "line",
+  bubble: "bubble"
+};
+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 +92,14 @@ const dateRangeOptionPresets = {
 };
 export {
   DateRangeOptionChangedEvent as D,
+  dateRangeOptionSchema as a,
+  toYYYYMMDD as b,
   dateRangeOptionPresets as d,
-  toYYYYMMDD as t
+  lapisFilterSchema as l,
+  mutationComparisonViewSchema as m,
+  namedLapisFilterSchema as n,
+  sequenceTypeSchema as s,
+  temporalGranularitySchema as t,
+  views as v
 };
-//# sourceMappingURL=utilEntrypoint-g4DsyhU7.js.map
+//# sourceMappingURL=dateRangeOption-DjtcAEWq.js.map

package/dist/dateRangeOption-DjtcAEWq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangeOption-DjtcAEWq.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 const temporalGranularitySchema = z.union([\n    z.literal('day'),\n    z.literal('week'),\n    z.literal('month'),\n    z.literal('year'),\n]);\nexport type TemporalGranularity = z.infer<typeof temporalGranularitySchema>;\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    grid: 'grid',\n    insertions: 'insertions',\n    bar: 'bar',\n    line: 'line',\n    bubble: 'bubble',\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,QAAS,CAAA,CAAC,CAAC;AAGrF,MAAA,yBAAyB,EAAE,OAAO;AAAA,EAC3C,aAAa;AAAA,EACb,aAAa,EAAE,OAAO;AAC1B,CAAC;AAGY,MAAA,4BAA4B,EAAE,MAAM;AAAA,EAC7C,EAAE,QAAQ,KAAK;AAAA,EACf,EAAE,QAAQ,MAAM;AAAA,EAChB,EAAE,QAAQ,OAAO;AAAA,EACjB,EAAE,QAAQ,MAAM;AACpB,CAAC;AAGM,MAAM,qBAAqB,EAAE,MAAM,CAAC,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,CAAC,CAAC;AA8BrF,MAAM,QAAQ;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AACZ;AAEO,MAAM,+BAA+B,EAAE,MAAM,CAAC,EAAE,QAAQ,MAAM,KAAK,GAAG,EAAE,QAAQ,MAAM,IAAI,CAAC,CAAC;ACpEtF,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

@@ -482,7 +482,7 @@ input[type="range"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -1981,12 +1981,12 @@ input.tab:checked + .tab-content,
           mask-repeat: no-repeat;
   -webkit-mask-position: center;
           mask-position: center;
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
 }
 .loading-spinner {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
 }
 .loading-md {
   width: 1.5rem;
@@ -2083,6 +2083,9 @@ input.tab:checked + .tab-content,
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.modal-action:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
 @keyframes modal-pop {
 
   0% {
@@ -3148,6 +3151,9 @@ input.tab:checked + .tab-content,
 .list-inside {
   list-style-position: inside;
 }
+.list-outside {
+  list-style-position: outside;
+}
 .list-disc {
   list-style-type: disc;
 }

package/dist/util.d.ts

@@ -1,20 +1,14 @@
-/**
- * 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 AxisMax = default_2.infer<typeof axisMaxSchema>;
+
+declare const axisMaxSchema: default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>;
+
+export declare type ConfidenceIntervalMethod = default_2.infer<typeof confidenceIntervalMethodSchema>;
+
+declare const confidenceIntervalMethodSchema: default_2.ZodUnion<[default_2.ZodLiteral<"wilson">, default_2.ZodLiteral<"none">]>;
+
+export declare type DateRangeOption = default_2.infer<typeof dateRangeOptionSchema>;
 
 export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption);
@@ -53,11 +47,108 @@ 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 SelectedMutationFilterStrings = default_2.infer<typeof selectedMutationFilterStringsSchema>;
+
+declare const selectedMutationFilterStringsSchema: default_2.ZodObject<{
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    nucleotideInsertions: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidInsertions: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+    nucleotideInsertions: string[];
+    aminoAcidInsertions: string[];
+}, {
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+    nucleotideInsertions: string[];
+    aminoAcidInsertions: 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 type TemporalGranularity = default_2.infer<typeof temporalGranularitySchema>;
+
+declare const temporalGranularitySchema: default_2.ZodUnion<[default_2.ZodLiteral<"day">, default_2.ZodLiteral<"week">, default_2.ZodLiteral<"month">, default_2.ZodLiteral<"year">]>;
+
+export declare const views: {
+    readonly table: "table";
+    readonly venn: "venn";
+    readonly grid: "grid";
+    readonly insertions: "insertions";
+    readonly bar: "bar";
+    readonly line: "line";
+    readonly bubble: "bubble";
+};
+
+export declare type YAxisMaxConfig = default_2.infer<typeof yAxisMaxConfigSchema>;
+
+declare const yAxisMaxConfigSchema: default_2.ZodObject<{
+    linear: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>>;
+    logarithmic: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>>;
+}, "strip", default_2.ZodTypeAny, {
+    linear?: number | "maxInData" | "limitTo1" | undefined;
+    logarithmic?: number | "maxInData" | "limitTo1" | undefined;
+}, {
+    linear?: number | "maxInData" | "limitTo1" | undefined;
+    logarithmic?: number | "maxInData" | "limitTo1" | undefined;
+}>;
+
 export { }
 
 
@@ -150,7 +241,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -158,7 +249,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -166,7 +257,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -174,7 +265,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': 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-DjtcAEWq.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.3",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -107,7 +107,7 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.19.0",
+        "@storybook/test-runner": "^0.20.1",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -5,6 +5,7 @@ import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',
@@ -94,3 +95,16 @@ export const FailsLoadingData: StoryObj<AggregateProps> = {
         });
     },
 };
+
+export const WithEmptyFieldString: StoryObj<AggregateProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        fields: [''],
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/aggregatedData/aggregate.tsx

@@ -1,9 +1,10 @@
 import { type FunctionComponent } from 'preact';
 import { useContext } from 'preact/hooks';
+import z from 'zod';
 
 import { AggregateTable } from './aggregate-table';
 import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
-import { type LapisFilter } from '../../types';
+import { lapisFilterSchema, views } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -15,26 +16,27 @@ import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-export type View = 'table';
-export type InitialSort = { field: string; direction: 'ascending' | 'descending' };
-
-export type AggregateProps = {
-    width: string;
-    height: string;
-    filter: LapisFilter;
-    fields: string[];
-    views: View[];
-    initialSortField: string;
-    initialSortDirection: 'ascending' | 'descending';
-    pageSize: boolean | number;
-};
+const viewSchema = z.literal(views.table);
+export type View = z.infer<typeof viewSchema>;
+
+const aggregatePropsSchema = z.object({
+    filter: lapisFilterSchema,
+    fields: z.array(z.string().min(1)),
+    views: z.array(viewSchema),
+    initialSortField: z.string(),
+    initialSortDirection: z.union([z.literal('ascending'), z.literal('descending')]),
+    pageSize: z.union([z.boolean(), z.number()]),
+    width: z.string(),
+    height: z.string(),
+});
+export type AggregateProps = z.infer<typeof aggregatePropsSchema>;
 
 export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={aggregatePropsSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <AggregateInner {...componentProps} />
             </ResizeContainer>

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.stories.tsx

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
+import z from 'zod';
 
 import { ErrorBoundary } from './error-boundary';
 import { UserFacingError } from './error-display';
@@ -21,9 +22,15 @@ const meta: Meta = {
 
 export default meta;
 
+const someSchema = z.object({
+    test: z.string().min(1),
+});
+const someValidProps = { test: 'someValue' };
+const someInvalidProps = { test: '' };
+
 export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <div>Some content</div>
         </ErrorBoundary>
     ),
@@ -36,7 +43,7 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
 
 export const ErrorBoundaryWithErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new Error('Some error')} />
         </ErrorBoundary>
     ),
@@ -48,9 +55,23 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
     },
 };
 
+export const ErrorBoundaryWithParsingErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someInvalidProps}>
+            <ContentThatThrowsError error={() => new Error('Some error')} />
+        </ErrorBoundary>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.queryByText('Some content.', { exact: false });
+        await waitFor(() => expect(content).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Error - Invalid component attributes')).toBeInTheDocument());
+    },
+};
+
 export const ErrorBoundaryWithUserFacingErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new UserFacingError('Error Headline', 'Some error')} />
         </ErrorBoundary>
     ),

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;
+    componentProps: T;
+    schema: ZodSchema<T>;
     layout?: ErrorDisplayProps['layout'];
 };
 
-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,28 @@ export const ErrorBoundary: FunctionComponent<ErrorBoundaryProps> = ({ size, lay
         );
     }
 
+    if (componentPropsParseError !== undefined) {
+        return (
+            <ResizeContainer size={size}>
+                <ErrorDisplay error={componentPropsParseError} layout={layout} />
+            </ResizeContainer>
+        );
+    }
+
     return <>{children}</>;
 };
+
+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]);
+}