@genspectrum/dashboard-components 0.2.0 → 0.3.0

package/dist/dashboard-components.js

@@ -400,6 +400,31 @@ function makeLapisResponse(data) {
     data
   });
 }
+const problemDetail = z$1.object({
+  title: z$1.string().optional(),
+  status: z$1.number(),
+  detail: z$1.string().optional(),
+  type: z$1.string(),
+  instance: z$1.string().optional()
+});
+const lapisError = z$1.object({
+  error: problemDetail
+});
+class UnknownLapisError extends Error {
+  constructor(message, status) {
+    super(message);
+    this.status = status;
+    this.name = "UnknownLapisError";
+  }
+}
+class LapisError extends Error {
+  constructor(message, status, problemDetail2) {
+    super(message);
+    this.status = status;
+    this.problemDetail = problemDetail2;
+    this.name = "LapisError";
+  }
+}
 async function fetchAggregated(lapisUrl, body, signal) {
   const response = await fetch(aggregatedEndpoint(lapisUrl), {
     method: "POST",
@@ -450,9 +475,26 @@ async function fetchReferenceGenome(lapisUrl, signal) {
 const handleErrors = async (response) => {
   if (!response.ok) {
     if (response.status >= 400 && response.status < 500) {
-      throw new Error(`${response.statusText}: ${JSON.stringify(await response.json())}`);
+      const json = await response.json();
+      const lapisErrorResult = lapisError.safeParse(json);
+      if (lapisErrorResult.success) {
+        throw new LapisError(
+          response.statusText + lapisErrorResult.data.error.detail,
+          response.status,
+          lapisErrorResult.data.error
+        );
+      }
+      const problemDetailResult = problemDetail.safeParse(json);
+      if (problemDetailResult.success) {
+        throw new LapisError(
+          response.statusText + problemDetailResult.data.detail,
+          response.status,
+          problemDetailResult.data
+        );
+      }
+      throw new UnknownLapisError(`${response.statusText}: ${JSON.stringify(json)}`, response.status);
     }
-    throw new Error(`${response.statusText}: ${response.status}`);
+    throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status);
   }
 };
 const aggregatedEndpoint = (lapisUrl) => `${lapisUrl}/sample/aggregated`;
@@ -491,7 +533,8 @@ let App = class extends LitElement {
   }
   render() {
     return this.updateReferenceGenome.render({
-      complete: () => html` <slot></slot>`,
+      complete: () => html``,
+      // Children will be rendered in the light DOM anyway. We can't use slots without a shadow DOM.
       error: () => html` <div class="m-2 w-full alert alert-error">
                     Error: Cannot fetch reference genome. Is LAPIS available?
                 </div>`
@@ -1227,26 +1270,46 @@ const CsvDownloadButton = ({
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
 class UserFacingError extends Error {
-  constructor(message) {
+  constructor(headline, message) {
     super(message);
+    this.headline = headline;
     this.name = "UserFacingError";
   }
 }
 const ErrorDisplay = ({ error }) => {
+  console.error(error);
+  const ref = F(null);
   return /* @__PURE__ */ u$1("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
     /* @__PURE__ */ u$1("div", { className: "text-red-700 font-bold", children: "Error" }),
-    /* @__PURE__ */ u$1("div", { children: "Oops! Something went wrong." }),
-    error instanceof UserFacingError && /* @__PURE__ */ u$1("div", { className: "text-sm text-gray-600", children: error.message })
+    /* @__PURE__ */ u$1("div", { children: [
+      "Oops! Something went wrong.",
+      error instanceof UserFacingError && /* @__PURE__ */ u$1(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ u$1(
+          "button",
+          {
+            className: "text-sm text-gray-600 hover:text-gray-300",
+            onClick: () => {
+              var _a;
+              return (_a = ref.current) == null ? void 0 : _a.showModal();
+            },
+            children: "Show details."
+          }
+        ),
+        /* @__PURE__ */ u$1("dialog", { ref, class: "modal", children: [
+          /* @__PURE__ */ u$1("div", { class: "modal-box", children: [
+            /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+            /* @__PURE__ */ u$1("h1", { class: "text-lg", children: error.headline }),
+            /* @__PURE__ */ u$1("p", { class: "py-4", children: error.message })
+          ] }),
+          /* @__PURE__ */ u$1("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "close" }) })
+        ] })
+      ] })
+    ] })
   ] });
 };
-const ResizeContainer = ({ children, size, defaultSize }) => {
-  return /* @__PURE__ */ u$1("div", { style: extendByDefault(size, defaultSize), children });
-};
-const extendByDefault = (size, defaultSize) => {
-  if (size === void 0) {
-    return defaultSize;
-  }
-  return { ...defaultSize, ...size };
+const ResizeContainer = ({ children, size }) => {
+  return /* @__PURE__ */ u$1("div", { style: size, children });
 };
 const Headline = ({ heading, children }) => {
   if (!heading) {
@@ -1268,18 +1331,10 @@ const ResizingHeadline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
-const ErrorBoundary = ({
-  size,
-  defaultSize,
-  headline,
-  children
-}) => {
+const ErrorBoundary = ({ size, headline, children }) => {
   const [internalError] = b2();
   if (internalError) {
-    console.error(internalError);
-  }
-  if (internalError) {
-    return /* @__PURE__ */ u$1(ResizeContainer, { defaultSize, size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
+    return /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
@@ -1568,11 +1623,12 @@ const MutationComparison = ({
   variants,
   sequenceType,
   views,
-  size,
+  width,
+  height,
   headline = "Mutation comparison"
 }) => {
-  const defaultSize = { height: "600px", width: "100%" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
 };
 const MutationComparisonInner = ({
   variants,
@@ -2290,39 +2346,6 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.container {
-  width: 100%;
-}
-@media (min-width: 640px) {
-
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
-
-  .container {
-    max-width: 1536px;
-  }
-}
 .alert {
   display: grid;
   width: 100%;
@@ -2425,6 +2448,12 @@ html {
   .btn:disabled {
   pointer-events: none;
 }
+.btn-circle {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
 :where(.btn:is(input[type="checkbox"])),
 :where(.btn:is(input[type="radio"])) {
   width: auto;
@@ -2577,6 +2606,17 @@ html {
     --glass-border-opacity: 15%;
   }
 
+  .btn-ghost:hover {
+    border-color: transparent;
+  }
+
+  @supports (color: oklch(0% 0 0)) {
+
+    .btn-ghost:hover {
+      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+    }
+  }
+
   .btn-outline.btn-primary:hover {
     --tw-text-opacity: 1;
     color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
@@ -2799,6 +2839,69 @@ html {
 :where(.menu li) .badge {
   justify-self: end;
 }
+.modal {
+  pointer-events: none;
+  position: fixed;
+  inset: 0px;
+  margin: 0px;
+  display: grid;
+  height: 100%;
+  max-height: none;
+  width: 100%;
+  max-width: none;
+  justify-items: center;
+  padding: 0px;
+  opacity: 0;
+  overscroll-behavior: contain;
+  z-index: 999;
+  background-color: transparent;
+  color: inherit;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: transform, opacity, visibility;
+  overflow-y: hidden;
+}
+:where(.modal) {
+  align-items: center;
+}
+.modal-box {
+  max-height: calc(100vh - 5em);
+  grid-column-start: 1;
+  grid-row-start: 1;
+  width: 91.666667%;
+  max-width: 32rem;
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+  padding: 1.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 200ms;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.modal-open,
+.modal:target,
+.modal-toggle:checked + .modal,
+.modal[open] {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+}
+:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
 .radio {
   flex-shrink: 0;
   --chkbg: var(--bc);
@@ -3034,6 +3137,20 @@ input.tab:checked + .tab-content,
   --glass-opacity: 25%;
   --glass-border-opacity: 15%;
 }
+.btn-ghost {
+  border-width: 1px;
+  border-color: transparent;
+  background-color: transparent;
+  color: currentColor;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
+}
+.btn-ghost.btn-active {
+  border-color: transparent;
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
 .btn-outline.btn-primary {
   --tw-text-opacity: 1;
   color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
@@ -3355,6 +3472,29 @@ input.tab:checked + .tab-content,
   border-color: currentColor;
   opacity: 0.6;
 }
+.modal:not(dialog:not(.modal-open)),
+  .modal::backdrop {
+  background-color: #0006;
+  animation: modal-pop 0.2s ease-out;
+}
+.modal-backdrop {
+  z-index: -1;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  display: grid;
+  align-self: stretch;
+  justify-self: stretch;
+  color: transparent;
+}
+.modal-open .modal-box,
+.modal-toggle:checked + .modal .modal-box,
+.modal:target .modal-box,
+.modal[open] .modal-box {
+  --tw-translate-y: 0px;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes modal-pop {
 
   0% {
@@ -3840,6 +3980,18 @@ input.tab:checked + .tab-content,
   border-radius: 9999px;
   padding: 0px;
 }
+.btn-circle:where(.btn-md) {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
+.btn-circle:where(.btn-lg) {
+  height: 4rem;
+  width: 4rem;
+  border-radius: 9999px;
+  padding: 0px;
+}
 .join.join-vertical {
   flex-direction: column;
 }
@@ -3954,6 +4106,42 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.modal-top :where(.modal-box) {
+  width: 100%;
+  max-width: none;
+  --tw-translate-y: -2.5rem;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.modal-middle :where(.modal-box) {
+  width: 91.666667%;
+  max-width: 32rem;
+  --tw-translate-y: 0px;
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+}
+.modal-bottom :where(.modal-box) {
+  width: 100%;
+  max-width: none;
+  --tw-translate-y: 2.5rem;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .steps-horizontal .step {
   grid-template-rows: 40px 1fr;
   grid-template-columns: auto;
@@ -4079,9 +4267,15 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.right-2 {
+  right: 0.5rem;
+}
 .right-6 {
   right: 1.5rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-8 {
   top: 2rem;
 }
@@ -4318,6 +4512,10 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .text-justify {
   text-align: justify;
 }
@@ -4398,6 +4596,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
+.hover\\:text-gray-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -4460,7 +4662,8 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.variants = [];
     this.sequenceType = "nucleotide";
     this.views = ["table"];
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
     this.headline = "Mutation comparison";
   }
   render() {
@@ -4470,7 +4673,8 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         variants: this.variants,
         sequenceType: this.sequenceType,
         views: this.views,
-        size: this.size,
+        width: this.width,
+        height: this.height,
         headline: this.headline
       }
     );
@@ -4486,8 +4690,11 @@ __decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
 __decorateClass$8([
-  n2({ type: Object })
-], MutationComparisonComponent.prototype, "size", 2);
+  n2({ type: String })
+], MutationComparisonComponent.prototype, "width", 2);
+__decorateClass$8([
+  n2({ type: String })
+], MutationComparisonComponent.prototype, "height", 2);
 __decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "headline", 2);
@@ -4756,11 +4963,12 @@ const Mutations = ({
   variant,
   sequenceType,
   views,
-  size,
+  width,
+  height,
   headline = "Mutations"
 }) => {
-  const defaultSize = { height: "600px", width: "100%" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
 };
 const MutationsInner = ({ variant, sequenceType, views }) => {
   const lapis = P(LapisUrlContext);
@@ -4899,7 +5107,8 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.variant = {};
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
     this.headline = "Mutations";
   }
   render() {
@@ -4909,7 +5118,8 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
         variant: this.variant,
         sequenceType: this.sequenceType,
         views: this.views,
-        size: this.size,
+        width: this.width,
+        height: this.height,
         headline: this.headline
       }
     );
@@ -4925,8 +5135,11 @@ __decorateClass$7([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
 __decorateClass$7([
-  n2({ type: Object })
-], MutationsComponent.prototype, "size", 2);
+  n2({ type: String })
+], MutationsComponent.prototype, "width", 2);
+__decorateClass$7([
+  n2({ type: String })
+], MutationsComponent.prototype, "height", 2);
 __decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "headline", 2);
@@ -6321,10 +6534,10 @@ class SlidingOperator {
 }
 function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapis, signal) {
   const numeratorFilters = makeArray(numeratorFilter);
-  const denominatorData = fetchAndPrepare(getFilter(denominatorFilter), granularity, smoothingWindow);
+  const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
   const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
-    const { displayName, ...filter } = namedLapisFilter;
-    const numeratorData = fetchAndPrepare(filter, granularity, smoothingWindow);
+    const { displayName, lapisFilter } = namedLapisFilter;
+    const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
     const divide = new DivisionOperator(
       numeratorData,
       denominatorData,
@@ -6342,10 +6555,6 @@ function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity
   });
   return Promise.all(subQueries);
 }
-function getFilter(filter) {
-  const { displayName, ...filterWithoutDisplayName } = filter;
-  return filterWithoutDisplayName;
-}
 function makeArray(arrayOrSingleItem) {
   if (Array.isArray(arrayOrSingleItem)) {
     return arrayOrSingleItem;
@@ -6472,11 +6681,12 @@ const PrevalenceOverTime = ({
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  size,
+  width,
+  height,
   headline = "Prevalence over time"
 }) => {
-  const defaultSize = { height: "600px", width: "100%" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     PrevalenceOverTimeInner,
     {
       numerator,
@@ -6635,14 +6845,15 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.numerator = { displayName: "" };
-    this.denominator = { displayName: "" };
+    this.numerator = { displayName: "", lapisFilter: {} };
+    this.denominator = {};
     this.granularity = "day";
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
     this.headline = "Prevalence over time";
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6654,7 +6865,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         smoothingWindow: this.smoothingWindow,
         views: this.views,
         confidenceIntervalMethods: this.confidenceIntervalMethods,
-        size: this.size,
+        width: this.width,
+        height: this.height,
         headline: this.headline
       }
     );
@@ -6682,8 +6894,11 @@ __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "headline", 2);
 __decorateClass$6([
-  n2({ type: Object })
-], PrevalenceOverTimeComponent.prototype, "size", 2);
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "width", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "height", 2);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
@@ -6874,14 +7089,15 @@ function toYearMonthDay(d2) {
 }
 const RelativeGrowthAdvantage = ({
   views,
-  size,
+  width,
+  height,
   numerator,
   denominator,
   generationTime,
   headline = "Relative growth advantage"
 }) => {
-  const defaultSize = { height: "600px", width: "100%" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageInner,
     {
       views,
@@ -7010,7 +7226,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.generationTime = 7;
     this.views = ["line"];
     this.headline = "Relative growth advantage";
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7020,7 +7237,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         denominator: this.denominator,
         generationTime: this.generationTime,
         views: this.views,
-        size: this.size,
+        width: this.width,
+        height: this.height,
         headline: this.headline
       }
     );
@@ -7042,8 +7260,11 @@ __decorateClass$5([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
 __decorateClass$5([
-  n2({ type: Object })
-], RelativeGrowthAdvantageComponent.prototype, "size", 2);
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "width", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "height", 2);
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
@@ -7080,13 +7301,14 @@ async function queryAggregateData(variant, fields, lapis, signal) {
 }
 const Aggregate = ({
   views,
-  size,
+  width,
+  height,
   headline = "Mutations",
   filter,
   fields
 }) => {
-  const defaultSize = { height: "600px", width: "100%" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
 };
 const AggregateInner = ({ fields, views, filter }) => {
   const lapis = P(LapisUrlContext);
@@ -7140,7 +7362,8 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.fields = [];
     this.views = ["table"];
     this.filter = {};
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
     this.headline = "Aggregate";
   }
   render() {
@@ -7150,7 +7373,8 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         fields: this.fields,
         views: this.views,
         filter: this.filter,
-        size: this.size,
+        width: this.width,
+        height: this.height,
         headline: this.headline
       }
     );
@@ -7166,8 +7390,11 @@ __decorateClass$4([
   n2({ type: Object })
 ], AggregateComponent.prototype, "filter", 2);
 __decorateClass$4([
-  n2({ type: Object })
-], AggregateComponent.prototype, "size", 2);
+  n2({ type: String })
+], AggregateComponent.prototype, "width", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "height", 2);
 __decorateClass$4([
   n2({ type: String })
 ], AggregateComponent.prototype, "headline", 2);
@@ -7201,23 +7428,25 @@ const DateRangeSelector = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
   initialValue,
-  width
+  width,
+  dateColumn
 }) => {
-  const defaultSize = { width: "100%", height: "3rem" };
-  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { defaultSize, size, children: /* @__PURE__ */ u$1(
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(
     DateRangeSelectorInner,
     {
       customSelectOptions,
       earliestDate,
-      initialValue
+      initialValue,
+      dateColumn
     }
   ) }) });
 };
 const DateRangeSelectorInner = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
-  initialValue
+  initialValue,
+  dateColumn
 }) => {
   const fromDatePickerRef = F(null);
   const toDatePickerRef = F(null);
@@ -7294,8 +7523,8 @@ const DateRangeSelectorInner = ({
     const dateFrom = toYYYYMMDD(dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0]);
     const dateTo = toYYYYMMDD(dateToPicker == null ? void 0 : dateToPicker.selectedDates[0]);
     const detail = {
-      ...dateFrom !== void 0 && { dateFrom },
-      ...dateTo !== void 0 && { dateTo }
+      ...dateFrom !== void 0 && { [`${dateColumn}From`]: dateFrom },
+      ...dateTo !== void 0 && { [`${dateColumn}To`]: dateTo }
     };
     (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
       new CustomEvent("gs-date-range-changed", {
@@ -7409,7 +7638,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
     this.initialValue = "last6Months";
-    this.width = void 0;
+    this.width = "100%";
+    this.dateColumn = "date";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7418,6 +7648,7 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
         customSelectOptions: this.customSelectOptions,
         earliestDate: this.earliestDate,
         initialValue: this.initialValue,
+        dateColumn: this.dateColumn,
         width: this.width
       }
     );
@@ -7433,15 +7664,29 @@ __decorateClass$3([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
 __decorateClass$3([
-  n2({ type: Object })
+  n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "width", 2);
+__decorateClass$3([
+  n2({ type: String })
+], DateRangeSelectorComponent.prototype, "dateColumn", 2);
 DateRangeSelectorComponent = __decorateClass$3([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
 async function fetchAutocompletionList(fields, lapis, signal) {
   const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
   const fetchAggregatedOperator = new FetchAggregatedOperator({}, fields);
-  const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+  let data;
+  try {
+    data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+  } catch (error) {
+    if (error instanceof LapisError) {
+      throw new UserFacingError(
+        `Failed to fetch autocomplete list from LAPIS: ${error.problemDetail.status} ${error.problemDetail.title ?? ""}`,
+        error.problemDetail.detail ?? error.message
+      );
+    }
+    throw error;
+  }
   const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
     setOfAllHierarchies.add(JSON.stringify(entry));
     toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
@@ -7471,9 +7716,8 @@ function compareLocationEntries(fields) {
   };
 }
 const LocationFilter = ({ width, initialValue, fields }) => {
-  const defaultSize = { width: "100%", height: "3rem" };
-  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
@@ -7561,7 +7805,7 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.initialValue = "";
     this.fields = [];
-    this.width = void 0;
+    this.width = "100%";
   }
   render() {
     return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields, width: this.width });
@@ -7574,7 +7818,7 @@ __decorateClass$2([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
 __decorateClass$2([
-  n2({ type: Object })
+  n2({ type: String })
 ], LocationFilterComponent.prototype, "width", 2);
 LocationFilterComponent = __decorateClass$2([
   t$2("gs-location-filter")
@@ -7585,9 +7829,8 @@ async function fetchAutocompleteList(lapis, field, signal) {
   return data.map((item) => item[field]);
 }
 const TextInput = ({ width, lapisField, placeholderText, initialValue }) => {
-  const defaultSize = { width: "100%", height: "3rem" };
-  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
 };
 const TextInputInner = ({
   lapisField,
@@ -7658,7 +7901,7 @@ let TextInputComponent = class extends PreactLitAdapter {
     this.initialValue = "";
     this.lapisField = "";
     this.placeholderText = "";
-    this.width = void 0;
+    this.width = "100%";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7682,7 +7925,7 @@ __decorateClass$1([
   n2()
 ], TextInputComponent.prototype, "placeholderText", 2);
 __decorateClass$1([
-  n2({ type: Object })
+  n2({ type: String })
 ], TextInputComponent.prototype, "width", 2);
 TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
@@ -7763,9 +8006,9 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = ({ initialValue, size }) => {
-  const defaultSize = { width: "100%", height: "6.5rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
+const MutationFilter = ({ initialValue, width, height }) => {
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
 };
 const MutationFilterInner = ({ initialValue }) => {
   const referenceGenome = P(ReferenceGenomeContext);
@@ -8011,18 +8254,22 @@ let MutationFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
     this.initialValue = void 0;
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "6.5rem";
   }
   render() {
-    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, size: this.size }) });
+    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, width: this.width, height: this.height }) });
   }
 };
 __decorateClass([
   n2()
 ], MutationFilterComponent.prototype, "initialValue", 2);
 __decorateClass([
-  n2({ type: Object })
-], MutationFilterComponent.prototype, "size", 2);
+  n2({ type: String })
+], MutationFilterComponent.prototype, "width", 2);
+__decorateClass([
+  n2({ type: String })
+], MutationFilterComponent.prototype, "height", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);