@genspectrum/dashboard-components 0.1.5 → 0.2.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
@@ -492,9 +492,9 @@ 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> `
+      error: () => html` <div class="m-2 w-full alert alert-error">
+                    Error: Cannot fetch reference genome. Is LAPIS available?
+                </div>`
     });
   }
   createRenderRoot() {
@@ -586,6 +586,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 +858,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 +1089,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 +1226,28 @@ const CsvDownloadButton = ({
   };
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
+class UserFacingError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "UserFacingError";
+  }
+}
 const ErrorDisplay = ({ error }) => {
-  return /* @__PURE__ */ u$1("div", { children: [
-    "Error: ",
-    error.message
+  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 })
   ] });
 };
+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 Headline = ({ heading, children }) => {
   if (!heading) {
     return /* @__PURE__ */ u$1(Fragment, { children });
@@ -1244,6 +1268,21 @@ const ResizingHeadline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
+const ErrorBoundary = ({
+  size,
+  defaultSize,
+  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(Fragment, { children });
+};
 const Info = ({ children, size }) => {
   const [showHelp, setShowHelp] = p(false);
   const toggleHelp = () => {
@@ -1277,7 +1316,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 +1335,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 +1505,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");
@@ -1540,21 +1570,29 @@ const MutationComparison = ({
   views,
   size,
   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 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 });
@@ -2285,6 +2323,35 @@ html {
     max-width: 1536px;
   }
 }
+.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) {
+
+  .alert {
+    grid-auto-flow: column;
+    grid-template-columns: auto minmax(auto,1fr);
+    justify-items: start;
+    text-align: start;
+  }
+}
 .avatar.placeholder > div {
   display: flex;
   align-items: center;
@@ -2793,29 +2860,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 +2959,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;
@@ -3463,6 +3514,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 {
@@ -4088,6 +4163,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 +4209,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4148,6 +4230,9 @@ input.tab:checked + .tab-content,
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -4273,6 +4358,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;
 }
@@ -4403,7 +4492,7 @@ __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 +4516,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 +4557,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 +4589,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 +4602,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 +4638,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 +4653,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 +4674,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 +4715,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);
 }
@@ -4670,20 +4759,24 @@ const Mutations = ({
   size,
   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 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,7 +4896,7 @@ 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;
@@ -4838,7 +4931,7 @@ __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 +5148,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 +5889,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;
   }
@@ -6297,14 +6390,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;
@@ -6381,6 +6474,27 @@ const PrevalenceOverTime = ({
   confidenceIntervalMethods,
   size,
   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(
+    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 +6502,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 +6518,7 @@ const PrevalenceOverTime = ({
       granularity,
       confidenceIntervalMethods
     }
-  ) }) });
+  );
 };
 const PrevalenceOverTimeTabs = ({
   views,
@@ -6759,12 +6873,29 @@ function toYearMonthDay(d2) {
   };
 }
 const RelativeGrowthAdvantage = ({
+  views,
+  size,
   numerator,
   denominator,
   generationTime,
-  views,
-  size,
   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(
+    RelativeGrowthAdvantageInner,
+    {
+      views,
+      numerator,
+      denominator,
+      generationTime
+    }
+  ) }) }) });
+};
+const RelativeGrowthAdvantageInner = ({
+  numerator,
+  denominator,
+  generationTime,
+  views
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6773,15 +6904,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 +6921,7 @@ const RelativeGrowthAdvantage = ({
       views,
       generationTime
     }
-  ) }) });
+  );
 };
 const RelativeGrowthAdvantageTabs = ({
   data,
@@ -6948,26 +7079,30 @@ async function queryAggregateData(variant, fields, lapis, signal) {
   );
 }
 const Aggregate = ({
-  fields,
   views,
-  filter,
   size,
-  headline = "Aggregate"
+  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 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) => {
@@ -7037,7 +7172,7 @@ __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) {
@@ -7063,6 +7198,23 @@ const presets = {
   [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
 };
 const DateRangeSelector = ({
+  customSelectOptions,
+  earliestDate = "1900-01-01",
+  initialValue,
+  width
+}) => {
+  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(
+    DateRangeSelectorInner,
+    {
+      customSelectOptions,
+      earliestDate,
+      initialValue
+    }
+  ) }) });
+};
+const DateRangeSelectorInner = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
   initialValue
@@ -7153,13 +7305,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 +7323,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 +7334,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 +7409,7 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
     this.initialValue = "last6Months";
+    this.width = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7264,7 +7417,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
       {
         customSelectOptions: this.customSelectOptions,
         earliestDate: this.earliestDate,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        width: this.width
       }
     );
   }
@@ -7278,6 +7432,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
+__decorateClass$3([
+  n2({ type: Object })
+], DateRangeSelectorComponent.prototype, "width", 2);
 DateRangeSelectorComponent = __decorateClass$3([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
@@ -7295,10 +7452,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 +7470,22 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({ initialValue, 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 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 +7516,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 +7561,10 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.initialValue = "";
     this.fields = [];
+    this.width = void 0;
   }
   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 +7573,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], LocationFilterComponent.prototype, "width", 2);
 LocationFilterComponent = __decorateClass$2([
   t$2("gs-location-filter")
 ], LocationFilterComponent);
@@ -7427,7 +7584,16 @@ 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 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 TextInputInner = ({
+  lapisField,
+  placeholderText,
+  initialValue
+}) => {
   const lapis = P(LapisUrlContext);
   const inputRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
@@ -7464,7 +7630,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 +7658,7 @@ let TextInputComponent = class extends PreactLitAdapter {
     this.initialValue = "";
     this.lapisField = "";
     this.placeholderText = "";
+    this.width = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7499,7 +7666,8 @@ let TextInputComponent = class extends PreactLitAdapter {
       {
         lapisField: this.lapisField,
         placeholderText: this.placeholderText,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        width: this.width
       }
     );
   }
@@ -7513,6 +7681,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2()
 ], TextInputComponent.prototype, "placeholderText", 2);
+__decorateClass$1([
+  n2({ type: Object })
+], TextInputComponent.prototype, "width", 2);
 TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
@@ -7592,7 +7763,11 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = ({ initialValue }) => {
+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 MutationFilterInner = ({ initialValue }) => {
   const referenceGenome = P(ReferenceGenomeContext);
   const [selectedFilters, setSelectedFilters] = p(
     getInitialState(initialValue, referenceGenome)
@@ -7641,7 +7816,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 +7979,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 +8011,18 @@ let MutationFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
     this.initialValue = void 0;
+    this.size = void 0;
   }
   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, size: this.size }) });
   }
 };
 __decorateClass([
   n2()
 ], MutationFilterComponent.prototype, "initialValue", 2);
+__decorateClass([
+  n2({ type: Object })
+], MutationFilterComponent.prototype, "size", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);