@genspectrum/dashboard-components 0.9.0 → 0.9.1

package/dist/components.js

@@ -1649,8 +1649,8 @@ const getMutationTypesSelectorLabel = (displayedMutationTypes) => {
     return type.label;
   }).join(", ");
 };
-const NoDataDisplay = () => {
-  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 NoDataDisplay = ({ message = "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: message }) });
 };
 const MinMaxRangeSlider = ({
   min,
@@ -5129,9 +5129,9 @@ input.tab:checked + .tab-content,
 .peer:hover ~ .peer-hover\\:visible {
   visibility: visible;
 }
-@container (min-width: 30rem) {
+@container (min-width: 2rem) {
 
-  .\\@\\[30rem\\]\\:visible {
+  .\\@\\[2rem\\]\\:visible {
     visibility: visible;
   }
 }
@@ -7760,6 +7760,11 @@ const tooltip = () => {
     }
   };
 };
+class NotEnoughDataToComputeFitError extends Error {
+  constructor() {
+    super("Not enough data to compute computeFit");
+  }
+}
 async function queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField, signal) {
   const fetchNumerator = new FetchAggregatedOperator(numerator, [lapisDateField]);
   const fetchDenominator = new FetchAggregatedOperator(denominator, [lapisDateField]);
@@ -7796,27 +7801,7 @@ async function queryRelativeGrowthAdvantage(numerator, denominator, generationTi
       requestData.k.push(numeratorCounts.get(d2.date) ?? 0);
     }
   });
-  const requestPayload = {
-    config: {
-      alpha: 0.95,
-      generationTime,
-      initialCasesVariant: 1,
-      initialCasesWildtype: 1,
-      reproductionNumberWildtype: 1,
-      tStart: 0,
-      tEnd: maxDate.minus(minDate)
-    },
-    data: requestData
-  };
-  const response = await fetch("https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(requestPayload),
-    signal
-  });
-  const responseData = await response.json();
+  const responseData = await computeFit(generationTime, maxDate, minDate, requestData, signal);
   const transformed = {
     ...responseData,
     estimatedProportions: {
@@ -7832,6 +7817,40 @@ async function queryRelativeGrowthAdvantage(numerator, denominator, generationTi
     observedProportions
   };
 }
+async function computeFit(generationTime, maxDate, minDate, requestData, signal) {
+  const requestPayload = {
+    config: {
+      alpha: 0.95,
+      generationTime,
+      initialCasesVariant: 1,
+      initialCasesWildtype: 1,
+      reproductionNumberWildtype: 1,
+      tStart: 0,
+      tEnd: maxDate.minus(minDate)
+    },
+    data: requestData
+  };
+  let response;
+  try {
+    response = await fetch("https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(requestPayload),
+      signal
+    });
+  } catch {
+    throw new UserFacingError(
+      "Failed to compute relative growth advantage",
+      "Could not connect to the server that computes the relative growth advantage. Please try again later."
+    );
+  }
+  if (!response.ok) {
+    throw new NotEnoughDataToComputeFitError();
+  }
+  return await response.json();
+}
 function toYearMonthDay(d2) {
   const temporalCache = TemporalCache.getInstance();
   return {
@@ -7856,6 +7875,9 @@ const RelativeGrowthAdvantageInner = (componentProps) => {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
+    if (error instanceof NotEnoughDataToComputeFitError) {
+      return /* @__PURE__ */ u$1(NoDataDisplay, { message: "It was not possible to estimate the relative growth advantage due to insufficient data in the specified filter." });
+    }
     throw error;
   }
   if (data === null) {
@@ -8818,7 +8840,6 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
           gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
         },
-        className: "@container",
         children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
             /* @__PURE__ */ u$1(
@@ -8895,8 +8916,8 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale })
         backgroundColor: getColorWithingScale(value.proportion, colorScale),
         color: getTextColorForScale(value.proportion, colorScale)
       },
-      className: `w-full h-full text-center hover:font-bold text-xs group`,
-      children: /* @__PURE__ */ u$1("span", { className: "invisible @[30rem]:visible", children: formatProportion(value.proportion, 0) })
+      className: `w-full h-full text-center hover:font-bold text-xs group @container`,
+      children: /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: formatProportion(value.proportion, 0) })
     }
   ) }) });
 };