@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/dist/dashboard-components.js

@@ -93,7 +93,7 @@ const { is: i$1, defineProperty: e$1, getOwnPropertyDescriptor: r$2, getOwnPrope
   return i2;
 } }, f$2 = (t2, s2) => !i$1(t2, s2), y$1 = { attribute: true, type: String, converter: u$2, reflect: false, hasChanged: f$2 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class b extends HTMLElement {
+let b$1 = class b extends HTMLElement {
   static addInitializer(t2) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t2);
   }
@@ -303,8 +303,8 @@ class b extends HTMLElement {
   }
   firstUpdated(t2) {
   }
-}
-b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: b }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.4");
+};
+b$1.elementStyles = [], b$1.shadowRootOptions = { mode: "open" }, b$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: b$1 }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -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,10 +533,11 @@ let App = class extends LitElement {
   }
   render() {
     return this.updateReferenceGenome.render({
-      complete: () => html` <slot></slot>`,
-      error: () => html`<p>Error</p>`,
-      // TODO(#143): Add more advanced error handling
-      pending: () => html` <p>Loading reference genomes...</p> `
+      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>`
     });
   }
   createRenderRoot() {
@@ -586,6 +629,14 @@ function P(n3) {
   var u2 = r.context[n3.__c], i2 = h(t++, 9);
   return i2.c = n3, u2 ? (null == i2.__ && (i2.__ = true, u2.sub(r)), u2.props.value) : n3.__;
 }
+function b2(n3) {
+  var u2 = h(t++, 10), i2 = p();
+  return u2.__ = n3, r.componentDidCatch || (r.componentDidCatch = function(n4, t2) {
+    u2.__ && u2.__(n4, t2), i2[1](n4);
+  }), [i2[0], function() {
+    i2[1](void 0);
+  }];
+}
 function j() {
   for (var n3; n3 = f.shift(); )
     if (n3.__P && n3.__H)
@@ -850,45 +901,45 @@ const bases = {
     "-"
   ]
 };
-const sortSubstitutionsAndDeletions = (a2, b2) => {
-  if (a2.segment !== b2.segment) {
-    compareSegments(a2.segment, b2.segment);
+const sortSubstitutionsAndDeletions = (a2, b3) => {
+  if (a2.segment !== b3.segment) {
+    compareSegments(a2.segment, b3.segment);
   }
-  if (a2.position !== b2.position) {
-    return comparePositions(a2.position, b2.position);
+  if (a2.position !== b3.position) {
+    return comparePositions(a2.position, b3.position);
   }
   const aIsDeletion = a2 instanceof Deletion;
-  const bIsDeletion = b2 instanceof Deletion;
+  const bIsDeletion = b3 instanceof Deletion;
   if (aIsDeletion !== bIsDeletion) {
     return aIsDeletion ? 1 : -1;
   }
   if (!aIsDeletion && !bIsDeletion) {
-    if (a2.substitutionValue !== b2.substitutionValue) {
-      return compareSubstitutionValues(a2.substitutionValue, b2.substitutionValue);
+    if (a2.substitutionValue !== b3.substitutionValue) {
+      return compareSubstitutionValues(a2.substitutionValue, b3.substitutionValue);
     }
   }
   return 0;
 };
-const compareSegments = (a2, b2) => {
+const compareSegments = (a2, b3) => {
   if (a2 === void 0) {
     return -1;
   }
-  if (b2 === void 0) {
+  if (b3 === void 0) {
     return 1;
   }
-  return a2.localeCompare(b2);
+  return a2.localeCompare(b3);
 };
-const comparePositions = (a2, b2) => {
-  return a2 - b2;
+const comparePositions = (a2, b3) => {
+  return a2 - b3;
 };
-const compareSubstitutionValues = (a2, b2) => {
+const compareSubstitutionValues = (a2, b3) => {
   if (a2 === void 0) {
     return -1;
   }
-  if (b2 === void 0) {
+  if (b3 === void 0) {
     return 1;
   }
-  return a2.localeCompare(b2);
+  return a2.localeCompare(b3);
 };
 const formatProportion = (proportion) => {
   return `${(proportion * 100).toFixed(2)}%`;
@@ -1081,11 +1132,11 @@ class SortOperator {
 }
 function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
   const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
-  const sortData = new SortOperator(fetchData, (a2, b2) => {
-    if (a2.mutation.segment !== b2.mutation.segment) {
-      return (a2.mutation.segment ?? "").localeCompare(b2.mutation.segment ?? "");
+  const sortData = new SortOperator(fetchData, (a2, b3) => {
+    if (a2.mutation.segment !== b3.mutation.segment) {
+      return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
     }
-    return a2.mutation.position - b2.mutation.position;
+    return a2.mutation.position - b3.mutation.position;
   });
   return sortData.evaluate(lapis, signal);
 }
@@ -1218,12 +1269,48 @@ const CsvDownloadButton = ({
   };
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
+class UserFacingError extends Error {
+  constructor(headline, message) {
+    super(message);
+    this.headline = headline;
+    this.name = "UserFacingError";
+  }
+}
 const ErrorDisplay = ({ error }) => {
-  return /* @__PURE__ */ u$1("div", { children: [
-    "Error: ",
-    error.message
+  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(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 }) => {
+  return /* @__PURE__ */ u$1("div", { style: size, children });
+};
 const Headline = ({ heading, children }) => {
   if (!heading) {
     return /* @__PURE__ */ u$1(Fragment, { children });
@@ -1244,6 +1331,13 @@ const ResizingHeadline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
+const ErrorBoundary = ({ size, headline, children }) => {
+  const [internalError] = b2();
+  if (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 });
+};
 const Info = ({ children, size }) => {
   const [showHelp, setShowHelp] = p(false);
   const toggleHelp = () => {
@@ -1277,7 +1371,7 @@ const InfoLink = ({ children, href }) => {
   return /* @__PURE__ */ u$1("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
 };
 const LoadingDisplay = () => {
-  return /* @__PURE__ */ u$1("div", { children: "Loading..." });
+  return /* @__PURE__ */ u$1("div", { "aria-label": "Loading", className: "h-full w-full skeleton" });
 };
 const MutationTypeSelector = ({
   displayedMutationTypes,
@@ -1296,7 +1390,7 @@ const MutationTypeSelector = ({
   );
 };
 const NoDataDisplay = () => {
-  return /* @__PURE__ */ u$1("div", { children: "No data available." });
+  return /* @__PURE__ */ u$1("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center", children: /* @__PURE__ */ u$1("div", { children: "No data available." }) });
 };
 const MinMaxRangeSlider = ({
   min,
@@ -1466,15 +1560,6 @@ const ProportionSelectorDropdown = ({
     ) }) })
   ] });
 };
-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 Tabs = ({ tabs, toolbar }) => {
   const [activeTab, setActiveTab] = p(tabs[0].title);
   const [heightOfTabs, setHeightOfTabs] = p("3rem");
@@ -1538,23 +1623,32 @@ const MutationComparison = ({
   variants,
   sequenceType,
   views,
-  size,
+  width,
+  height,
   headline = "Mutation comparison"
+}) => {
+  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,
+  sequenceType,
+  views
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(variants, sequenceType, lapis);
   }, [variants, sequenceType, lapis]);
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views }) }) });
+  return /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views });
 };
 const MutationComparisonTabs = ({ data, views, sequenceType }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
@@ -2252,37 +2346,33 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.container {
+.alert {
+  display: grid;
   width: 100%;
+  grid-auto-flow: row;
+  align-content: flex-start;
+  align-items: center;
+  justify-items: center;
+  gap: 1rem;
+  text-align: center;
+  border-radius: var(--rounded-box, 1rem);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  padding: 1rem;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+  background-color: var(--alert-bg);
 }
 @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 {
+    grid-auto-flow: column;
+    grid-template-columns: auto minmax(auto,1fr);
+    justify-items: start;
+    text-align: start;
   }
 }
 .avatar.placeholder > div {
@@ -2358,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;
@@ -2510,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)));
@@ -2732,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);
@@ -2793,29 +2963,6 @@ html {
 .select[multiple] {
   height: auto;
 }
-.stack {
-  display: inline-grid;
-  place-items: center;
-  align-items: flex-end;
-}
-.stack > * {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  transform: translateY(10%) scale(0.9);
-  z-index: 1;
-  width: 100%;
-  opacity: 0.6;
-}
-.stack > *:nth-child(2) {
-  transform: translateY(5%) scale(0.95);
-  z-index: 2;
-  opacity: 0.8;
-}
-.stack > *:nth-child(1) {
-  transform: translateY(0) scale(1);
-  z-index: 3;
-  opacity: 1;
-}
 .steps {
   display: inline-grid;
   grid-auto-flow: column;
@@ -2915,6 +3062,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.alert-error {
+  border-color: var(--fallback-er,oklch(var(--er)/0.2));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-er,oklch(var(--er)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -2983,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)));
@@ -3304,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% {
@@ -3463,6 +3654,30 @@ input.tab:checked + .tab-content,
   background-position: calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
+.skeleton {
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  will-change: background-position;
+  animation: skeleton 1.8s ease-in-out infinite;
+  background-image: linear-gradient(
+    105deg,
+    transparent 0%,
+    transparent 40%,
+    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-size: 200% auto;
+  background-repeat: no-repeat;
+  background-position-x: -50%;
+}
+@media (prefers-reduced-motion) {
+
+  .skeleton {
+    animation-duration: 15s;
+  }
+}
 @keyframes skeleton {
 
   from {
@@ -3765,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;
 }
@@ -3879,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;
@@ -4004,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;
 }
@@ -4088,6 +4357,10 @@ input.tab:checked + .tab-content,
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -4130,6 +4403,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4148,6 +4424,9 @@ input.tab:checked + .tab-content,
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -4233,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;
 }
@@ -4273,6 +4556,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
 .underline {
   text-decoration-line: underline;
 }
@@ -4309,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));
@@ -4371,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() {
@@ -4381,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
       }
     );
@@ -4397,13 +4690,16 @@ __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);
 MutationComparisonComponent = __decorateClass$8([
-  t$2("gs-mutation-comparison-component")
+  t$2("gs-mutation-comparison")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
   return data.map((mutationEntry) => {
@@ -4427,16 +4723,16 @@ function getMutationsTableData(data, proportionInterval) {
   });
 }
 const pattern = /(?:([A-Za-z0-9]+):)?(\d+)$/;
-const sortMutationPositions = (a2, b2) => {
+const sortMutationPositions = (a2, b3) => {
   const aMatch = a2.match(pattern);
-  const bMatch = b2.match(pattern);
+  const bMatch = b3.match(pattern);
   if (aMatch && bMatch) {
     if (aMatch[1] !== bMatch[1]) {
       return aMatch[1].localeCompare(bMatch[1]);
     }
     return parseInt(aMatch[2], 10) - parseInt(bMatch[2], 10);
   }
-  throw new Error(`Invalid mutation position: ${a2} or ${b2}`);
+  throw new Error(`Invalid mutation position: ${a2} or ${b3}`);
 };
 const getMutationsGridData = (data, sequenceType, proportionInterval) => {
   return accumulateByPosition(data, sequenceType).filter((row) => byProportion(row, proportionInterval));
@@ -4468,8 +4764,8 @@ const accumulateByPosition = (data, sequenceType) => {
     };
     subtractSubstitutionValue();
   }
-  const orderedPositionsToProportionAtBase = [...positionsToProportionAtBase.entries()].map(([position, proportionsAtBase]) => ({ position, proportions: proportionsAtBase })).sort((a2, b2) => {
-    return sortMutationPositions(a2.position, b2.position);
+  const orderedPositionsToProportionAtBase = [...positionsToProportionAtBase.entries()].map(([position, proportionsAtBase]) => ({ position, proportions: proportionsAtBase })).sort((a2, b3) => {
+    return sortMutationPositions(a2.position, b3.position);
   });
   return orderedPositionsToProportionAtBase.map((proportionsForBaseAtPosition) => {
     const proportions = bases[sequenceType].map((base) => {
@@ -4500,8 +4796,8 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
       {
         name: "Position",
         sort: {
-          compare: (a2, b2) => {
-            return sortMutationPositions(a2, b2);
+          compare: (a2, b3) => {
+            return sortMutationPositions(a2, b3);
           }
         }
       },
@@ -4513,9 +4809,9 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
       return {
         name: base,
         sort: {
-          compare: (a2, b2) => {
+          compare: (a2, b3) => {
             const aProportion = a2.proportion;
-            const bProportion = b2.proportion;
+            const bProportion = b3.proportion;
             if (aProportion < bProportion) {
               return -1;
             }
@@ -4549,14 +4845,14 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
   const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
 };
-const sortInsertions = (a2, b2) => {
-  if (a2.segment !== b2.segment) {
-    return compareSegments(a2.segment, b2.segment);
+const sortInsertions = (a2, b3) => {
+  if (a2.segment !== b3.segment) {
+    return compareSegments(a2.segment, b3.segment);
   }
-  if (a2.position !== b2.position) {
-    return comparePositions(a2.position, b2.position);
+  if (a2.position !== b3.position) {
+    return comparePositions(a2.position, b3.position);
   }
-  return a2.insertedSymbols.localeCompare(b2.insertedSymbols);
+  return a2.insertedSymbols.localeCompare(b3.insertedSymbols);
 };
 const InsertionsTable = ({ data }) => {
   const getHeaders = () => {
@@ -4564,8 +4860,8 @@ const InsertionsTable = ({ data }) => {
       {
         name: "Insertion",
         sort: {
-          compare: (a2, b2) => {
-            return sortInsertions(a2, b2);
+          compare: (a2, b3) => {
+            return sortInsertions(a2, b3);
           }
         },
         formatter: (cell) => cell.toString()
@@ -4585,8 +4881,8 @@ const MutationsTable = ({ data, proportionInterval }) => {
       {
         name: "Mutation",
         sort: {
-          compare: (a2, b2) => {
-            return sortSubstitutionsAndDeletions(a2, b2);
+          compare: (a2, b3) => {
+            return sortSubstitutionsAndDeletions(a2, b3);
           }
         },
         formatter: (cell) => cell.toString()
@@ -4626,11 +4922,11 @@ class FetchInsertionsOperator {
 }
 function queryInsertions(variant, sequenceType, lapis, signal) {
   const fetchData = new FetchInsertionsOperator(variant, sequenceType);
-  const sortData = new SortOperator(fetchData, (a2, b2) => {
-    if (a2.mutation.segment !== b2.mutation.segment) {
-      return (a2.mutation.segment ?? "").localeCompare(b2.mutation.segment ?? "");
+  const sortData = new SortOperator(fetchData, (a2, b3) => {
+    if (a2.mutation.segment !== b3.mutation.segment) {
+      return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
     }
-    return a2.mutation.position - b2.mutation.position;
+    return a2.mutation.position - b3.mutation.position;
   });
   return sortData.evaluate(lapis, signal);
 }
@@ -4667,23 +4963,28 @@ const Mutations = ({
   variant,
   sequenceType,
   views,
-  size,
+  width,
+  height,
   headline = "Mutations"
 }) => {
+  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);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(variant, sequenceType, lapis);
   }, [variant, sequenceType, lapis]);
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views }) }) });
+  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views });
 };
 const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
@@ -4803,10 +5104,11 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variant = { displayName: "" };
+    this.variant = {};
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
-    this.size = void 0;
+    this.width = "100%";
+    this.height = "700px";
     this.headline = "Mutations";
   }
   render() {
@@ -4816,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
       }
     );
@@ -4832,13 +5135,16 @@ __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);
 MutationsComponent = __decorateClass$7([
-  t$2("gs-mutations-component")
+  t$2("gs-mutations")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
   return data[0].content.map((row, rowNumber) => {
@@ -5055,14 +5361,14 @@ var padZoneStr = function padZoneStr2(instance) {
   var minuteOffset = minutes % 60;
   return (negMinutes <= 0 ? "+" : "-") + padStart(hourOffset, 2, "0") + ":" + padStart(minuteOffset, 2, "0");
 };
-var monthDiff = function monthDiff2(a2, b2) {
-  if (a2.date() < b2.date())
-    return -monthDiff2(b2, a2);
-  var wholeMonthDiff = (b2.year() - a2.year()) * 12 + (b2.month() - a2.month());
+var monthDiff = function monthDiff2(a2, b3) {
+  if (a2.date() < b3.date())
+    return -monthDiff2(b3, a2);
+  var wholeMonthDiff = (b3.year() - a2.year()) * 12 + (b3.month() - a2.month());
   var anchor = a2.clone().add(wholeMonthDiff, M);
-  var c2 = b2 - anchor < 0;
+  var c2 = b3 - anchor < 0;
   var anchor2 = a2.clone().add(wholeMonthDiff + (c2 ? -1 : 1), M);
-  return +(-(wholeMonthDiff + (b2 - anchor) / (c2 ? anchor - anchor2 : anchor2 - anchor)) || 0);
+  return +(-(wholeMonthDiff + (b3 - anchor) / (c2 ? anchor - anchor2 : anchor2 - anchor)) || 0);
 };
 var absFloor = function absFloor2(n3) {
   return n3 < 0 ? Math.ceil(n3) || 0 : Math.floor(n3);
@@ -5796,29 +6102,29 @@ function generateAllInRange(start, end) {
   }
   throw new Error(`Invalid arguments: start and end must be of the same type: ${start}, ${end}`);
 }
-function minusTemporal(a2, b2) {
-  if (a2 instanceof YearMonthDay && b2 instanceof YearMonthDay) {
-    return a2.minus(b2);
+function minusTemporal(a2, b3) {
+  if (a2 instanceof YearMonthDay && b3 instanceof YearMonthDay) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof YearWeek && b2 instanceof YearWeek) {
-    return a2.minus(b2);
+  if (a2 instanceof YearWeek && b3 instanceof YearWeek) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof YearMonth && b2 instanceof YearMonth) {
-    return a2.minus(b2);
+  if (a2 instanceof YearMonth && b3 instanceof YearMonth) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof Year && b2 instanceof Year) {
-    return a2.minus(b2);
+  if (a2 instanceof Year && b3 instanceof Year) {
+    return a2.minus(b3);
   }
-  throw new Error(`Cannot compare ${a2} and ${b2}`);
+  throw new Error(`Cannot compare ${a2} and ${b3}`);
 }
-function compareTemporal(a2, b2) {
+function compareTemporal(a2, b3) {
   if (a2 === null) {
     return 1;
   }
-  if (b2 === null) {
+  if (b3 === null) {
     return -1;
   }
-  const diff = minusTemporal(a2, b2);
+  const diff = minusTemporal(a2, b3);
   if (diff < 0) {
     return -1;
   }
@@ -6228,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,
@@ -6249,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;
@@ -6297,14 +6599,14 @@ function mapDateToGranularityRange(d2, granularity) {
     count: d2.count
   };
 }
-function dateRangeCompare(a2, b2) {
+function dateRangeCompare(a2, b3) {
   if (a2.dateRange === null) {
     return 1;
   }
-  if (b2.dateRange === null) {
+  if (b3.dateRange === null) {
     return -1;
   }
-  return compareTemporal(a2.dateRange, b2.dateRange);
+  return compareTemporal(a2.dateRange, b3.dateRange);
 }
 function averageSmoothing(slidingWindow) {
   const average = slidingWindow.reduce((acc, curr) => acc + curr.count, 0) / slidingWindow.length;
@@ -6379,8 +6681,30 @@ const PrevalenceOverTime = ({
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  size,
+  width,
+  height,
   headline = "Prevalence over time"
+}) => {
+  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,
+      denominator,
+      granularity,
+      smoothingWindow,
+      views,
+      confidenceIntervalMethods
+    }
+  ) }) }) });
+};
+const PrevalenceOverTimeInner = ({
+  numerator,
+  denominator,
+  granularity,
+  smoothingWindow,
+  views,
+  confidenceIntervalMethods
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
@@ -6388,15 +6712,15 @@ const PrevalenceOverTime = ({
     [lapis, numerator, denominator, granularity, smoothingWindow]
   );
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "600px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(
     PrevalenceOverTimeTabs,
     {
       views,
@@ -6404,7 +6728,7 @@ const PrevalenceOverTime = ({
       granularity,
       confidenceIntervalMethods
     }
-  ) }) });
+  );
 };
 const PrevalenceOverTimeTabs = ({
   views,
@@ -6521,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(
@@ -6540,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
       }
     );
@@ -6568,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);
@@ -6759,12 +7088,30 @@ function toYearMonthDay(d2) {
   };
 }
 const RelativeGrowthAdvantage = ({
+  views,
+  width,
+  height,
   numerator,
   denominator,
   generationTime,
-  views,
-  size,
   headline = "Relative growth advantage"
+}) => {
+  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,
+      numerator,
+      denominator,
+      generationTime
+    }
+  ) }) }) });
+};
+const RelativeGrowthAdvantageInner = ({
+  numerator,
+  denominator,
+  generationTime,
+  views
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6773,15 +7120,15 @@ const RelativeGrowthAdvantage = ({
     [lapis, numerator, denominator, generationTime, views]
   );
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageTabs,
     {
       data,
@@ -6790,7 +7137,7 @@ const RelativeGrowthAdvantage = ({
       views,
       generationTime
     }
-  ) }) });
+  );
 };
 const RelativeGrowthAdvantageTabs = ({
   data,
@@ -6879,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(
@@ -6889,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
       }
     );
@@ -6911,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);
@@ -6948,26 +7300,31 @@ async function queryAggregateData(variant, fields, lapis, signal) {
   );
 }
 const Aggregate = ({
-  fields,
   views,
+  width,
+  height,
+  headline = "Mutations",
   filter,
-  size,
-  headline = "Aggregate"
+  fields
 }) => {
+  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);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis);
   }, [filter, fields, lapis]);
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields }) }) });
+  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields });
 };
 const AggregatedDataTabs = ({ data, views, fields }) => {
   const getTab = (view) => {
@@ -7005,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() {
@@ -7015,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
       }
     );
@@ -7031,13 +7390,16 @@ __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);
 AggregateComponent = __decorateClass$4([
-  t$2("gs-aggregate-component")
+  t$2("gs-aggregate")
 ], AggregateComponent);
 const toYYYYMMDD = (date) => {
   if (!date) {
@@ -7065,7 +7427,26 @@ const presets = {
 const DateRangeSelector = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
-  initialValue
+  initialValue,
+  width,
+  dateColumn
+}) => {
+  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,
+      dateColumn
+    }
+  ) }) });
+};
+const DateRangeSelectorInner = ({
+  customSelectOptions,
+  earliestDate = "1900-01-01",
+  initialValue,
+  dateColumn
 }) => {
   const fromDatePickerRef = F(null);
   const toDatePickerRef = F(null);
@@ -7142,8 +7523,8 @@ const DateRangeSelector = ({
     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", {
@@ -7153,13 +7534,13 @@ const DateRangeSelector = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "join", ref: divRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "join w-full", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       Select,
       {
         items: selectableOptions,
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none join-item",
+        selectStyle: "select-bordered rounded-none join-item grow",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -7171,7 +7552,7 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       "input",
       {
-        class: "input input-bordered rounded-none join-item",
+        class: "input input-bordered rounded-none join-item grow",
         type: "text",
         placeholder: "Date from",
         ref: fromDatePickerRef,
@@ -7182,7 +7563,7 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       "input",
       {
-        class: "input input-bordered rounded-none join-item",
+        class: "input input-bordered rounded-none join-item grow",
         type: "text",
         placeholder: "Date to",
         ref: toDatePickerRef,
@@ -7257,6 +7638,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
     this.initialValue = "last6Months";
+    this.width = "100%";
+    this.dateColumn = "date";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7264,7 +7647,9 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
       {
         customSelectOptions: this.customSelectOptions,
         earliestDate: this.earliestDate,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        dateColumn: this.dateColumn,
+        width: this.width
       }
     );
   }
@@ -7278,13 +7663,30 @@ __decorateClass$3([
 __decorateClass$3([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
+__decorateClass$3([
+  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) => {
@@ -7295,10 +7697,10 @@ async function fetchAutocompletionList(fields, lapis, signal) {
   return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields));
 }
 function compareLocationEntries(fields) {
-  return (a2, b2) => {
+  return (a2, b3) => {
     for (const field of fields) {
       const valueA = a2[field];
-      const valueB = b2[field];
+      const valueB = b3[field];
       if (valueA === valueB) {
         continue;
       }
@@ -7313,26 +7715,21 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({ initialValue, fields }) => {
+const LocationFilter = ({ width, 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);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
   const formRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
-  if (isLoading)
-    return /* @__PURE__ */ u$1("form", { class: "flex", children: [
-      /* @__PURE__ */ u$1("input", { type: "text", class: "input input-bordered grow", value, disabled: true }),
-      /* @__PURE__ */ u$1("button", { class: "btn ml-1", disabled: true, type: "submit", children: "Loading..." })
-    ] });
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
   if (error) {
-    return /* @__PURE__ */ u$1("p", { children: [
-      "Error: ",
-      error.name,
-      " ",
-      error.message,
-      " ",
-      error.stack
-    ] });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   const onInput = (event) => {
     if (event.target instanceof HTMLInputElement) {
@@ -7363,7 +7760,7 @@ const LocationFilter = ({ initialValue, fields }) => {
       setUnknownLocation(true);
     }
   };
-  return /* @__PURE__ */ u$1("form", { class: "flex", onSubmit: submit, ref: formRef, children: [
+  return /* @__PURE__ */ u$1("form", { class: "flex w-full", onSubmit: submit, ref: formRef, children: [
     /* @__PURE__ */ u$1(
       "input",
       {
@@ -7408,9 +7805,10 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.initialValue = "";
     this.fields = [];
+    this.width = "100%";
   }
   render() {
-    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields });
+    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields, width: this.width });
   }
 };
 __decorateClass$2([
@@ -7419,6 +7817,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
+__decorateClass$2([
+  n2({ type: String })
+], LocationFilterComponent.prototype, "width", 2);
 LocationFilterComponent = __decorateClass$2([
   t$2("gs-location-filter")
 ], LocationFilterComponent);
@@ -7427,7 +7828,15 @@ async function fetchAutocompleteList(lapis, field, signal) {
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   return data.map((item) => item[field]);
 }
-const TextInput = ({ lapisField, placeholderText, initialValue }) => {
+const TextInput = ({ width, 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,
+  placeholderText,
+  initialValue
+}) => {
   const lapis = P(LapisUrlContext);
   const inputRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
@@ -7464,7 +7873,7 @@ const TextInput = ({ lapisField, placeholderText, initialValue }) => {
       "input",
       {
         type: "text",
-        class: "input input-bordered",
+        class: "input input-bordered w-full",
         placeholder: placeholderText !== void 0 ? placeholderText : lapisField,
         onInput,
         ref: inputRef,
@@ -7492,6 +7901,7 @@ let TextInputComponent = class extends PreactLitAdapter {
     this.initialValue = "";
     this.lapisField = "";
     this.placeholderText = "";
+    this.width = "100%";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7499,7 +7909,8 @@ let TextInputComponent = class extends PreactLitAdapter {
       {
         lapisField: this.lapisField,
         placeholderText: this.placeholderText,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        width: this.width
       }
     );
   }
@@ -7513,6 +7924,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2()
 ], TextInputComponent.prototype, "placeholderText", 2);
+__decorateClass$1([
+  n2({ type: String })
+], TextInputComponent.prototype, "width", 2);
 TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
@@ -7592,7 +8006,11 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = ({ 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);
   const [selectedFilters, setSelectedFilters] = p(
     getInitialState(initialValue, referenceGenome)
@@ -7641,7 +8059,7 @@ const MutationFilter = ({ initialValue }) => {
     setInputValue(event.target.value);
     setIsError(false);
   };
-  return /* @__PURE__ */ u$1("div", { class: `rounded-lg border border-gray-300 bg-white p-2`, children: [
+  return /* @__PURE__ */ u$1("div", { class: `h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`, children: [
     /* @__PURE__ */ u$1("div", { class: "flex justify-between", children: [
       /* @__PURE__ */ u$1(
         SelectedMutationDisplay,
@@ -7804,11 +8222,11 @@ const SelectedFilter = ({
   return /* @__PURE__ */ u$1(
     "div",
     {
-      class: "flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1",
+      class: "flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max",
       style: { backgroundColor, color: textColor },
       children: [
-        /* @__PURE__ */ u$1("div", { children: mutation.toString() }),
-        /* @__PURE__ */ u$1("button", { onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
+        /* @__PURE__ */ u$1("div", { className: "whitespace-nowrap min-w-max", children: mutation.toString() }),
+        /* @__PURE__ */ u$1("button", { type: "button", onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
       ]
     }
   );
@@ -7836,14 +8254,22 @@ let MutationFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
     this.initialValue = void 0;
+    this.width = "100%";
+    this.height = "6.5rem";
   }
   render() {
-    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue }) });
+    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: String })
+], MutationFilterComponent.prototype, "width", 2);
+__decorateClass([
+  n2({ type: String })
+], MutationFilterComponent.prototype, "height", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);