@genspectrum/dashboard-components 0.5.0 → 0.5.2

package/dist/dashboard-components.js

@@ -546,17 +546,17 @@ function u$1(e2, t2, n3, o2, i2, u2) {
   if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
   return options.vnode && options.vnode(l2), l2;
 }
-var t, r, u, i, o = 0, f = [], c = [], e = options, a = e.__b, v = e.__r, l = e.diffed, m = e.__c, s = e.unmount, d = e.__;
-function h(n3, t2) {
-  e.__h && e.__h(r, n3, o || t2), o = 0;
+var t, r, u, i, o = 0, f = [], c = options, e = c.__b, a = c.__r, v = c.diffed, l = c.__c, m = c.unmount, s = c.__;
+function d(n3, t2) {
+  c.__h && c.__h(r, n3, o || t2), o = 0;
   var u2 = r.__H || (r.__H = { __: [], __h: [] });
-  return n3 >= u2.__.length && u2.__.push({ __V: c }), u2.__[n3];
+  return n3 >= u2.__.length && u2.__.push({}), u2.__[n3];
 }
-function p(n3) {
-  return o = 1, y(D$1, n3);
+function h(n3) {
+  return o = 1, p(D$1, n3);
 }
-function y(n3, u2, i2) {
-  var o2 = h(t++, 2);
+function p(n3, u2, i2) {
+  var o2 = d(t++, 2);
   if (o2.t = n3, !o2.__c && (o2.__ = [i2 ? i2(u2) : D$1(void 0, u2), function(n4) {
     var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n4);
     t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
@@ -589,25 +589,25 @@ function y(n3, u2, i2) {
   }
   return o2.__N || o2.__;
 }
-function _(n3, u2) {
-  var i2 = h(t++, 3);
-  !e.__s && C(i2.__H, u2) && (i2.__ = n3, i2.i = u2, r.__H.__h.push(i2));
+function y(n3, u2) {
+  var i2 = d(t++, 3);
+  !c.__s && C(i2.__H, u2) && (i2.__ = n3, i2.i = u2, r.__H.__h.push(i2));
 }
-function F(n3) {
-  return o = 5, q(function() {
+function A(n3) {
+  return o = 5, T(function() {
     return { current: n3 };
   }, []);
 }
-function q(n3, r2) {
-  var u2 = h(t++, 7);
-  return C(u2.__H, r2) ? (u2.__V = n3(), u2.i = r2, u2.__h = n3, u2.__V) : u2.__;
+function T(n3, r2) {
+  var u2 = d(t++, 7);
+  return C(u2.__H, r2) && (u2.__ = n3(), u2.__H = r2, u2.__h = n3), u2.__;
 }
-function P(n3) {
-  var u2 = r.context[n3.__c], i2 = h(t++, 9);
+function x(n3) {
+  var u2 = r.context[n3.__c], i2 = d(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();
+  var u2 = d(t++, 10), i2 = h();
   return u2.__ = n3, r.componentDidCatch || (r.componentDidCatch = function(n4, t2) {
     u2.__ && u2.__(n4, t2), i2[1](n4);
   }), [i2[0], function() {
@@ -618,26 +618,26 @@ function j() {
   for (var n3; n3 = f.shift(); ) if (n3.__P && n3.__H) try {
     n3.__H.__h.forEach(z), n3.__H.__h.forEach(B), n3.__H.__h = [];
   } catch (t2) {
-    n3.__H.__h = [], e.__e(t2, n3.__v);
+    n3.__H.__h = [], c.__e(t2, n3.__v);
   }
 }
-e.__b = function(n3) {
-  r = null, a && a(n3);
-}, e.__ = function(n3, t2) {
-  n3 && t2.__k && t2.__k.__m && (n3.__m = t2.__k.__m), d && d(n3, t2);
-}, e.__r = function(n3) {
-  v && v(n3), t = 0;
+c.__b = function(n3) {
+  r = null, e && e(n3);
+}, c.__ = function(n3, t2) {
+  n3 && t2.__k && t2.__k.__m && (n3.__m = t2.__k.__m), s && s(n3, t2);
+}, c.__r = function(n3) {
+  a && a(n3), t = 0;
   var i2 = (r = n3.__c).__H;
   i2 && (u === r ? (i2.__h = [], r.__h = [], i2.__.forEach(function(n4) {
-    n4.__N && (n4.__ = n4.__N), n4.__V = c, n4.__N = n4.i = void 0;
+    n4.__N && (n4.__ = n4.__N), n4.i = n4.__N = void 0;
   })) : (i2.__h.forEach(z), i2.__h.forEach(B), i2.__h = [], t = 0)), u = r;
-}, e.diffed = function(n3) {
-  l && l(n3);
+}, c.diffed = function(n3) {
+  v && v(n3);
   var t2 = n3.__c;
-  t2 && t2.__H && (t2.__H.__h.length && (1 !== f.push(t2) && i === e.requestAnimationFrame || ((i = e.requestAnimationFrame) || w)(j)), t2.__H.__.forEach(function(n4) {
-    n4.i && (n4.__H = n4.i), n4.__V !== c && (n4.__ = n4.__V), n4.i = void 0, n4.__V = c;
+  t2 && t2.__H && (t2.__H.__h.length && (1 !== f.push(t2) && i === c.requestAnimationFrame || ((i = c.requestAnimationFrame) || w)(j)), t2.__H.__.forEach(function(n4) {
+    n4.i && (n4.__H = n4.i), n4.i = void 0;
   })), u = r = null;
-}, e.__c = function(n3, t2) {
+}, c.__c = function(n3, t2) {
   t2.some(function(n4) {
     try {
       n4.__h.forEach(z), n4.__h = n4.__h.filter(function(n5) {
@@ -646,11 +646,11 @@ e.__b = function(n3) {
     } catch (r2) {
       t2.some(function(n5) {
         n5.__h && (n5.__h = []);
-      }), t2 = [], e.__e(r2, n4.__v);
+      }), t2 = [], c.__e(r2, n4.__v);
     }
-  }), m && m(n3, t2);
-}, e.unmount = function(n3) {
-  s && s(n3);
+  }), l && l(n3, t2);
+}, c.unmount = function(n3) {
+  m && m(n3);
   var t2, r2 = n3.__c;
   r2 && r2.__H && (r2.__H.__.forEach(function(n4) {
     try {
@@ -658,7 +658,7 @@ e.__b = function(n3) {
     } catch (n5) {
       t2 = n5;
     }
-  }), r2.__H = void 0, t2 && e.__e(t2, r2.__v));
+  }), r2.__H = void 0, t2 && c.__e(t2, r2.__v));
 };
 var k = "function" == typeof requestAnimationFrame;
 function w(n3) {
@@ -748,8 +748,8 @@ const tableStyle = {
 };
 const Table = ({ data, columns, pageSize }) => {
   const pagination = typeof pageSize === "number" ? { limit: pageSize } : pageSize;
-  const wrapper3 = F(null);
-  _(() => {
+  const wrapper3 = A(null);
+  y(() => {
     if (wrapper3.current === null) {
       return;
     }
@@ -948,9 +948,9 @@ const MutationComparisonTable = ({
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
 };
 const GsChart = ({ configuration }) => {
-  const canvasRef = F(null);
-  const chartRef = F(null);
-  _(() => {
+  const canvasRef = A(null);
+  const chartRef = A(null);
+  y(() => {
     if (canvasRef.current === null) {
       return;
     }
@@ -971,10 +971,10 @@ const MutationComparisonVenn = ({
   data,
   proportionInterval
 }) => {
-  const divRef = F(null);
+  const divRef = A(null);
   const noElementSelectedMessage = "You have no elements selected. Click in the venn diagram to select.";
-  const [selectedDatasetIndex, setSelectedDatasetIndex] = p(null);
-  const sets = q(
+  const [selectedDatasetIndex, setSelectedDatasetIndex] = h(null);
+  const sets = T(
     () => extractSets(
       data.content.map((mutationData) => ({
         displayName: mutationData.displayName,
@@ -990,7 +990,7 @@ const MutationComparisonVenn = ({
     ),
     [data, proportionInterval]
   );
-  _(() => {
+  y(() => {
     if (divRef.current === null) {
       return;
     }
@@ -1002,7 +1002,7 @@ const MutationComparisonVenn = ({
     const label = sets.datasets[0].data[selectedDatasetIndex].label;
     divRef.current.innerText = `${label}: ${values.join(", ")}` || "";
   }, [divRef, selectedDatasetIndex, sets]);
-  const config = q(
+  const config = T(
     () => ({
       type: "venn",
       data: sets,
@@ -1027,7 +1027,7 @@ const MutationComparisonVenn = ({
           }
         },
         events: ["click"],
-        onClick(_2, elements) {
+        onClick(_, elements) {
           if (elements.length === 0) {
             setSelectedDatasetIndex(null);
           }
@@ -1152,8 +1152,8 @@ function filterMutationData(data, displayedSegments, displayedMutationTypes) {
 }
 const LapisUrlContext = createContext$1("");
 function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
-  const cleanupRef = F(null);
-  _(() => {
+  const cleanupRef = A(null);
+  y(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -1163,8 +1163,8 @@ function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
       computePosition(reference, floating, {
         placement,
         middleware
-      }).then(({ x, y: y2 }) => {
-        floating.style.left = `${x}px`;
+      }).then(({ x: x2, y: y2 }) => {
+        floating.style.left = `${x2}px`;
         floating.style.top = `${y2}px`;
       });
     };
@@ -1178,7 +1178,7 @@ function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
   }, [placement, middleware, referenceRef, floatingRef]);
 }
 function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
-  _(() => {
+  y(() => {
     const handleClickOutside = (event) => {
       const path = event.composedPath();
       if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
@@ -1192,7 +1192,7 @@ function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
   }, [floatingRef, referenceRef, setShowContent]);
 }
 function useCloseOnEsc(setShowHelp) {
-  _(() => {
+  y(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         setShowHelp(false);
@@ -1206,9 +1206,9 @@ function useCloseOnEsc(setShowHelp) {
 }
 const dropdownClass = "z-10 absolute w-max top-0 left-0 bg-white p-4 border border-gray-200 shadow-lg rounded-md";
 const Dropdown = ({ children, buttonTitle, placement }) => {
-  const [showContent, setShowContent] = p(false);
-  const referenceRef = F(null);
-  const floatingRef = F(null);
+  const [showContent, setShowContent] = h(false);
+  const referenceRef = A(null);
+  const floatingRef = A(null);
   useFloatingUi(referenceRef, floatingRef, [offset(4), shift(), flip()], placement);
   useCloseOnClickOutside(floatingRef, referenceRef, setShowContent);
   useCloseOnEsc(setShowContent);
@@ -1273,13 +1273,13 @@ const SegmentSelector = ({
   );
 };
 function useDisplayedSegments(sequenceType) {
-  const referenceGenome = P(ReferenceGenomeContext);
+  const referenceGenome = x(ReferenceGenomeContext);
   const displayedSegments = getSegmentNames(referenceGenome, sequenceType).map((segment) => ({
     segment,
     label: segment,
     checked: true
   }));
-  return p(displayedSegments);
+  return h(displayedSegments);
 }
 const CsvDownloadButton = ({
   label = "Download",
@@ -1323,7 +1323,7 @@ class UserFacingError extends Error {
 }
 const ErrorDisplay = ({ error }) => {
   console.error(error);
-  const ref = F(null);
+  const ref = A(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: [
@@ -1363,9 +1363,9 @@ const Headline = ({ heading, children }) => {
   return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
 };
 const ResizingHeadline = ({ heading, children }) => {
-  const ref = F(null);
-  const [h1Height, setH1Height] = p("2rem");
-  _(() => {
+  const ref = A(null);
+  const [h1Height, setH1Height] = h("2rem");
+  y(() => {
     if (ref.current) {
       const h1Height2 = ref.current.getBoundingClientRect().height;
       setH1Height(`${h1Height2}px`);
@@ -1384,9 +1384,9 @@ const ErrorBoundary = ({ size: size2, headline, children }) => {
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
 const Info = ({ children, height }) => {
-  const [showHelp, setShowHelp] = p(false);
-  const referenceRef = F(null);
-  const floatingRef = F(null);
+  const [showHelp, setShowHelp] = h(false);
+  const referenceRef = A(null);
+  const floatingRef = A(null);
   useFloatingUi(referenceRef, floatingRef, [
     offset(10),
     shift(),
@@ -1471,7 +1471,7 @@ const MinMaxRangeSlider = ({
 }) => {
   const sliderColor = "#C6C6C6";
   const rangeColor = "#387bbe";
-  const [zIndexTo, setZIndexTo] = p(0);
+  const [zIndexTo, setZIndexTo] = h(0);
   const onMinChange = (event) => {
     const input = event.target;
     const minValue = Number(input.value);
@@ -1540,8 +1540,8 @@ const percentageInRange = (percentage) => {
   return percentage <= 100 && percentage >= 0;
 };
 const PercentInput = ({ percentage, setPercentage }) => {
-  const [internalPercentage, setInternalPercentage] = p(percentage);
-  _(() => {
+  const [internalPercentage, setInternalPercentage] = h(percentage);
+  y(() => {
     setInternalPercentage(percentage);
   }, [percentage]);
   const handleInputChange = (event) => {
@@ -1622,16 +1622,16 @@ const ProportionSelectorDropdown = ({
   ) });
 };
 const Tabs = ({ tabs, toolbar }) => {
-  const [activeTab, setActiveTab] = p(tabs[0].title);
-  const [heightOfTabs, setHeightOfTabs] = p("3rem");
-  const tabRef = F(null);
+  const [activeTab, setActiveTab] = h(tabs[0].title);
+  const [heightOfTabs, setHeightOfTabs] = h("3rem");
+  const tabRef = A(null);
   const updateHeightOfTabs = () => {
     if (tabRef.current) {
       const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
       setHeightOfTabs(`${heightOfTabs2}px`);
     }
   };
-  _(() => {
+  y(() => {
     updateHeightOfTabs();
     window.addEventListener("resize", updateHeightOfTabs);
     return () => {
@@ -1667,10 +1667,10 @@ const Tabs = ({ tabs, toolbar }) => {
   ] });
 };
 function useQuery(fetchDataCallback, dependencies = []) {
-  const [data, setData] = p(null);
-  const [error, setError] = p(null);
-  const [isLoading, setIsLoading] = p(true);
-  _(() => {
+  const [data, setData] = h(null);
+  const [error, setError] = h(null);
+  const [isLoading, setIsLoading] = h(true);
+  y(() => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
@@ -1713,7 +1713,7 @@ const MutationComparisonInner = ({
   views,
   pageSize
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(lapisFilters, sequenceType, lapis);
   }, [lapisFilters, sequenceType, lapis]);
@@ -1742,13 +1742,13 @@ const MutationComparisonTabs = ({
   sequenceType,
   pageSize
 }) => {
-  const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
-  const [displayedMutationTypes, setDisplayedMutationTypes] = p([
+  const [proportionInterval, setProportionInterval] = h({ min: 0.5, max: 1 });
+  const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
-  const filteredData = q(
+  const filteredData = T(
     () => filterMutationData(data, displayedSegments, displayedMutationTypes),
     [data, displayedSegments, displayedMutationTypes]
   );
@@ -2299,7 +2299,11 @@ html {
 }
 
 * {
-  scrollbar-color: currentColor transparent;
+  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
+}
+
+*:hover {
+  scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
 }
 
 :root {
@@ -3309,6 +3313,9 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -4059,11 +4066,17 @@ input.tab:checked + .tab-content,
   margin-right: 0px;
   margin-top: -1px;
 }
+.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
+  margin-top: calc(var(--border-btn) * -1);
+}
 .join.join-horizontal > :where(*:not(:first-child)) {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .modal-top :where(.modal-box) {
   width: 100%;
   max-width: none;
@@ -4317,12 +4330,12 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-40 {
-  width: 10rem;
-}
 .w-64 {
   width: 16rem;
 }
+.w-\\[7\\.5rem\\] {
+  width: 7.5rem;
+}
 .w-full {
   width: 100%;
 }
@@ -4330,8 +4343,8 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
-.min-w-40 {
-  min-width: 10rem;
+.min-w-\\[7\\.5rem\\] {
+  min-width: 7.5rem;
 }
 .max-w-screen-lg {
   max-width: 1024px;
@@ -4991,7 +5004,7 @@ const MutationsInner = ({
   views,
   pageSize
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(lapisFilter, sequenceType, lapis);
   }, [lapisFilter, sequenceType, lapis]);
@@ -5007,9 +5020,9 @@ const MutationsInner = ({
   return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views, pageSize });
 };
 const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
-  const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
+  const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 1 });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
-  const [displayedMutationTypes, setDisplayedMutationTypes] = p([
+  const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
@@ -5323,34 +5336,33 @@ function sortNullToBeginningThenByDate(a2, b3) {
   return a2.dateRange === null ? -1 : b3.dateRange === null ? 1 : a2.dateRange.toString().localeCompare(b3.dateRange.toString());
 }
 const getDataset$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
-  const generalConfig = {
+  return {
     borderWidth: 1,
     pointRadius: 0,
     label: prevalenceOverTimeVariant.displayName,
     backgroundColor: singleGraphColorRGBAById(index, 0.3),
-    borderColor: singleGraphColorRGBAById(index)
+    borderColor: singleGraphColorRGBAById(index),
+    data: prevalenceOverTimeVariant.content.map(mapDataPoint(confidenceIntervalMethod))
   };
+};
+const mapDataPoint = (confidenceIntervalMethod) => {
+  return (dataPoint) => {
+    var _a;
+    const confidenceInterval = getConfidenceInterval(dataPoint, confidenceIntervalMethod);
+    return {
+      y: dataPoint.prevalence,
+      yMin: confidenceInterval.lowerLimit,
+      yMax: confidenceInterval.upperLimit,
+      x: ((_a = dataPoint.dateRange) == null ? void 0 : _a.toString()) ?? "Unknown"
+    };
+  };
+};
+const getConfidenceInterval = (dataPoint, confidenceIntervalMethod) => {
   switch (confidenceIntervalMethod) {
     case "wilson":
-      return {
-        ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
-          var _a;
-          return {
-            y: dataPoint.prevalence,
-            yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
-            yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
-            x: ((_a = dataPoint.dateRange) == null ? void 0 : _a.toString()) ?? "Unknown"
-          };
-        })
-      };
+      return wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total);
     default:
-      return {
-        ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
-          return { y: dataPoint.prevalence, x: dataPoint.dateRange };
-        })
-      };
+      return { lowerLimit: void 0, upperLimit: void 0 };
   }
 };
 const tooltip$2 = (confidenceIntervalMethod) => {
@@ -6803,7 +6815,7 @@ const PrevalenceOverTimeInner = ({
   pageSize,
   yAxisMaxConfig
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
     () => queryPrevalenceOverTime(
       numeratorFilter,
@@ -6844,8 +6856,8 @@ const PrevalenceOverTimeTabs = ({
   pageSize,
   yAxisMaxConfig
 }) => {
-  const [yAxisScaleType, setYAxisScaleType] = p("linear");
-  const [confidenceIntervalMethod, setConfidenceIntervalMethod] = p(
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
+  const [confidenceIntervalMethod, setConfidenceIntervalMethod] = h(
     confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : "none"
   );
   const getTab = (view) => {
@@ -7282,8 +7294,8 @@ const RelativeGrowthAdvantageInner = ({
   lapisDateField,
   yAxisMaxConfig
 }) => {
-  const lapis = P(LapisUrlContext);
-  const [yAxisScaleType, setYAxisScaleType] = p("linear");
+  const lapis = x(LapisUrlContext);
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const { data, error, isLoading } = useQuery(
     () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
     [lapis, numeratorFilter, denominatorFilter, generationTime, views]
@@ -7456,26 +7468,6 @@ __decorateClass$5([
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
-const AggregateTable = ({ data, fields, pageSize }) => {
-  const headers = [
-    ...fields.map((field) => {
-      return {
-        name: field,
-        sort: true
-      };
-    }),
-    {
-      name: "count",
-      sort: true
-    },
-    {
-      name: "proportion",
-      sort: true,
-      formatter: (cell) => formatProportion(cell)
-    }
-  ];
-  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
-};
 const compareAscending = (a2, b3) => {
   if (typeof a2 === "number" && typeof b3 === "number") {
     return a2 - b3;
@@ -7502,6 +7494,28 @@ async function queryAggregateData(lapisFilter, fields, lapis, initialSort = { fi
     })
   );
 }
+const AggregateTable = ({ data, fields, pageSize }) => {
+  const headers = [
+    ...fields.map((field) => {
+      return {
+        name: field,
+        sort: {
+          compare: compareAscending
+        }
+      };
+    }),
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    }
+  ];
+  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
+};
 const Aggregate = ({
   views,
   width,
@@ -7534,7 +7548,7 @@ const AggregateInner = ({
   initialSortDirection,
   pageSize
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
   }, [filter, fields, lapis]);
@@ -7787,19 +7801,19 @@ const DateRangeSelectorInner = ({
     earliestDate,
     customSelectOptions
   );
-  const fromDatePickerRef = F(null);
-  const toDatePickerRef = F(null);
-  const divRef = F(null);
-  const [dateFromPicker, setDateFromPicker] = p(null);
-  const [dateToPicker, setDateToPicker] = p(null);
-  const [selectedDateRange, setSelectedDateRange] = p(
+  const fromDatePickerRef = A(null);
+  const toDatePickerRef = A(null);
+  const divRef = A(null);
+  const [dateFromPicker, setDateFromPicker] = h(null);
+  const [dateToPicker, setDateToPicker] = h(null);
+  const [selectedDateRange, setSelectedDateRange] = h(
     initialValues.initialSelectedDateRange
   );
-  const [selectedDates, setSelectedDates] = p({
+  const [selectedDates, setSelectedDates] = h({
     dateFrom: initialValues.initialSelectedDateFrom,
     dateTo: initialValues.initialSelectedDateTo
   });
-  _(() => {
+  y(() => {
     const commonConfig = {
       allowInput: true,
       dateFormat: "Y-m-d"
@@ -7878,7 +7892,7 @@ const DateRangeSelectorInner = ({
       {
         items: getSelectableOptions(customSelectOptions),
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none flex-grow w-40",
+        selectStyle: "select-bordered rounded-none flex-grow min-w-[7.5rem]",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -7891,9 +7905,8 @@ const DateRangeSelectorInner = ({
       /* @__PURE__ */ u$1(
         "input",
         {
-          class: "input input-bordered rounded-none flex-grow min-w-40",
+          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
           type: "text",
-          size: 10,
           placeholder: "Date from",
           ref: fromDatePickerRef,
           onChange: onChangeDateFrom,
@@ -7903,9 +7916,8 @@ const DateRangeSelectorInner = ({
       /* @__PURE__ */ u$1(
         "input",
         {
-          class: "input input-bordered rounded-none flex-grow min-w-40",
+          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
           type: "text",
-          size: 10,
           placeholder: "Date to",
           ref: toDatePickerRef,
           onChange: onChangeDateTo,
@@ -7976,7 +7988,7 @@ 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 toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
   const fetchAggregatedOperator = new FetchAggregatedOperator({}, fields);
   let data;
   try {
@@ -8028,10 +8040,10 @@ const LocationFilter = ({
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields, placeholderText }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields, placeholderText }) => {
-  const lapis = P(LapisUrlContext);
-  const [value, setValue] = p(initialValue ?? "");
-  const [unknownLocation, setUnknownLocation] = p(false);
-  const divRef = F(null);
+  const lapis = x(LapisUrlContext);
+  const [value, setValue] = h(initialValue ?? "");
+  const [unknownLocation, setUnknownLocation] = h(false);
+  const divRef = A(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -8152,8 +8164,8 @@ const TextInputInner = ({
   placeholderText,
   initialValue
 }) => {
-  const lapis = P(LapisUrlContext);
-  const inputRef = F(null);
+  const lapis = x(LapisUrlContext);
+  const inputRef = A(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -8245,7 +8257,7 @@ TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
 const ReferenceGenomesAwaiter = ({ children }) => {
-  const referenceGenome = P(ReferenceGenomeContext);
+  const referenceGenome = x(ReferenceGenomeContext);
   if (isNotInitialized(referenceGenome)) {
     return /* @__PURE__ */ u$1("div", { className: "laoding loading-spinner loading-md", children: "Loading..." });
   }
@@ -8324,13 +8336,13 @@ const MutationFilter = ({ initialValue, width }) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: { height: "3.375rem", width }, children: /* @__PURE__ */ u$1("div", { style: width, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
 };
 const MutationFilterInner = ({ initialValue }) => {
-  const referenceGenome = P(ReferenceGenomeContext);
-  const [selectedFilters, setSelectedFilters] = p(
+  const referenceGenome = x(ReferenceGenomeContext);
+  const [selectedFilters, setSelectedFilters] = h(
     getInitialState(initialValue, referenceGenome)
   );
-  const [inputValue, setInputValue] = p("");
-  const [isError, setIsError] = p(false);
-  const formRef = F(null);
+  const [inputValue, setInputValue] = h("");
+  const [isError, setIsError] = h(false);
+  const formRef = A(null);
   const handleSubmit = (event) => {
     event.preventDefault();
     if (inputValue === "") {