@genspectrum/dashboard-components 0.18.1 → 0.18.2

package/dist/components.js

@@ -7,7 +7,7 @@ import DOMPurify from "dompurify";
 import { useRef, Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-DkvWdq_G.js";
+import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-ixHQkq8y.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
@@ -6407,6 +6407,80 @@ function getFilteredMutationOverTimeData({
   });
   return filteredData;
 }
+const MutationsOverTimeGridTooltip = ({
+  mutation,
+  date,
+  value
+}) => {
+  const dateClass = toTemporalClass(date);
+  return /* @__PURE__ */ u$1("div", { children: [
+    /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
+    /* @__PURE__ */ u$1("p", { children: [
+      "(",
+      timeIntervalDisplay(dateClass),
+      ")"
+    ] }),
+    /* @__PURE__ */ u$1("p", { children: mutation.code }),
+    /* @__PURE__ */ u$1(TooltipValueDescription, { value })
+  ] });
+};
+const TooltipValueDescription = ({ value }) => {
+  if (value === null) {
+    return /* @__PURE__ */ u$1("p", { children: "No data" });
+  }
+  const proportion = value.type === "belowThreshold" ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}` : formatProportion(value.proportion);
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1("p", { children: [
+      "Proportion: ",
+      proportion
+    ] }),
+    /* @__PURE__ */ u$1(TooltipValueCountsDescription, { value })
+  ] });
+};
+const TooltipValueCountsDescription = ({ value }) => {
+  switch (value.type) {
+    case "wastewaterValue":
+      return;
+    case "belowThreshold":
+      return /* @__PURE__ */ u$1(Fragment, { children: [
+        /* @__PURE__ */ u$1("p", { children: [
+          value.totalCount,
+          " samples are in the timeframe"
+        ] }),
+        /* @__PURE__ */ u$1("p", { children: [
+          "none or less than ",
+          formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION),
+          " have the mutation"
+        ] })
+      ] });
+    case "value":
+      return /* @__PURE__ */ u$1(Fragment, { children: [
+        /* @__PURE__ */ u$1("p", { children: [
+          value.totalCount,
+          " samples are in the timeframe"
+        ] }),
+        /* @__PURE__ */ u$1("p", { children: [
+          totalCountWithCoverage(value.count, value.proportion),
+          " have coverage, of those ",
+          value.count,
+          " ",
+          "have the mutation"
+        ] })
+      ] });
+  }
+};
+function totalCountWithCoverage(count, proportion) {
+  if (count === 0) {
+    return 0;
+  }
+  return Math.round(count / proportion);
+}
+const timeIntervalDisplay = (date) => {
+  if (date instanceof YearMonthDayClass) {
+    return date.toString();
+  }
+  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};
 const ColorScaleSelector = ({ colorScale, setColorScale }) => {
   const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
   return /* @__PURE__ */ u$1("div", { className: "flex items-center", children: [
@@ -6740,86 +6814,25 @@ function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   return `${tooltipX}-${tooltipY}`;
 }
 const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale }) => {
-  const dateClass = toTemporalClass(date);
-  const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
-    /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
-    /* @__PURE__ */ u$1("p", { children: [
-      "(",
-      timeIntervalDisplay(dateClass),
-      ")"
-    ] }),
-    /* @__PURE__ */ u$1("p", { children: mutation.code }),
-    /* @__PURE__ */ u$1(TooltipValueDescription, { value })
-  ] });
   const proportion = (value == null ? void 0 : value.type) === "belowThreshold" ? 0 : value == null ? void 0 : value.proportion;
-  return /* @__PURE__ */ u$1("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$1(
-    "div",
+  return /* @__PURE__ */ u$1("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$1(
+    Tooltip,
     {
-      style: {
-        backgroundColor: getColorWithinScale(proportion, colorScale),
-        color: getTextColorForScale(proportion, colorScale)
-      },
-      className: `w-full h-full hover:font-bold text-xs group @container`,
-      children: value === null ? /* @__PURE__ */ u$1("span", { className: "invisible", children: "No data" }) : /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: formatProportion(proportion ?? 0, 0) })
+      content: /* @__PURE__ */ u$1(MutationsOverTimeGridTooltip, { mutation, date, value }),
+      position: tooltipPosition,
+      children: /* @__PURE__ */ u$1(
+        "div",
+        {
+          style: {
+            backgroundColor: getColorWithinScale(proportion, colorScale),
+            color: getTextColorForScale(proportion, colorScale)
+          },
+          className: `w-full h-full hover:font-bold text-xs group @container`,
+          children: value === null ? /* @__PURE__ */ u$1("span", { className: "invisible", children: "No data" }) : /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: formatProportion(proportion ?? 0, 0) })
+        }
+      )
     }
-  ) }) });
-};
-const TooltipValueDescription = ({ value }) => {
-  if (value === null) {
-    return /* @__PURE__ */ u$1("p", { children: "No data" });
-  }
-  const proportion = value.type === "belowThreshold" ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}` : formatProportion(value.proportion);
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1("p", { children: [
-      "Proportion: ",
-      proportion
-    ] }),
-    /* @__PURE__ */ u$1(TooltipValueCountsDescription, { value })
-  ] });
-};
-const TooltipValueCountsDescription = ({ value }) => {
-  switch (value.type) {
-    case "wastewaterValue":
-      return;
-    case "belowThreshold":
-      return /* @__PURE__ */ u$1(Fragment, { children: [
-        /* @__PURE__ */ u$1("p", { children: [
-          value.totalCount,
-          " samples are in the timeframe"
-        ] }),
-        /* @__PURE__ */ u$1("p", { children: [
-          "none or less than ",
-          formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION),
-          " have the mutation"
-        ] })
-      ] });
-    case "value":
-      return /* @__PURE__ */ u$1(Fragment, { children: [
-        /* @__PURE__ */ u$1("p", { children: [
-          value.totalCount,
-          " samples are in the timeframe"
-        ] }),
-        /* @__PURE__ */ u$1("p", { children: [
-          totalCountWithCoverage(value.count, value.proportion),
-          " have coverage, of those ",
-          value.count,
-          " ",
-          "have the mutation"
-        ] })
-      ] });
-  }
-};
-function totalCountWithCoverage(count, proportion) {
-  if (count === 0) {
-    return 0;
-  }
-  return Math.round(count / proportion);
-}
-const timeIntervalDisplay = (date) => {
-  if (date instanceof YearMonthDayClass) {
-    return date.toString();
-  }
-  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+  ) });
 };
 const ColorScaleSelectorDropdown = ({
   colorScale,
@@ -8642,7 +8655,7 @@ const getDatesForSelectorValue = (initialSelectedDateRange, dateRangeOptions, ea
 };
 function computeInitialValues(value, earliestDate, dateRangeOptions) {
   var _a;
-  if (value === void 0) {
+  if (value === null) {
     return void 0;
   }
   if (typeof value === "string") {
@@ -8920,10 +8933,18 @@ const DateRangeFilterInner = ({
   };
   const fireOptionChangedEvent = (state2) => {
     var _a2;
-    const eventDetail = (state2 == null ? void 0 : state2.label) === customOption ? {
-      dateFrom: state2.dateFrom !== void 0 ? toYYYYMMDD(state2.dateFrom) : void 0,
-      dateTo: state2.dateTo !== void 0 ? toYYYYMMDD(state2.dateTo) : void 0
-    } : state2 == null ? void 0 : state2.label;
+    const eventDetail = (() => {
+      if (state2 === null) {
+        return null;
+      }
+      if (state2.label === customOption) {
+        return {
+          dateFrom: state2.dateFrom !== void 0 ? toYYYYMMDD(state2.dateFrom) : void 0,
+          dateTo: state2.dateTo !== void 0 ? toYYYYMMDD(state2.dateTo) : void 0
+        };
+      }
+      return state2.label;
+    })();
     (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
   };
   return /* @__PURE__ */ u$1("div", { className: "@container", ref: divRef, children: /* @__PURE__ */ u$1("div", { className: "flex min-w-[7.5rem] flex-col @md:flex-row", children: [
@@ -8979,7 +9000,7 @@ let DateRangeFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.dateRangeOptions = [];
     this.earliestDate = "1900-01-01";
-    this.value = void 0;
+    this.value = null;
     this.width = "100%";
     this.placeholder = void 0;
     this.lapisDateField = "";
@@ -9008,7 +9029,7 @@ __decorateClass$4([
   n$1({
     converter: (value) => {
       if (value === null) {
-        return void 0;
+        return null;
       }
       try {
         const result = JSON.parse(value);