@genspectrum/dashboard-components 0.6.3 → 0.6.4

package/custom-elements.json

@@ -1823,7 +1823,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.",
+          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid will show at max 100 rows and 200 columns for browser performance reasons.\nMore data might make the browser unresponsive.\nIf the numbers are exceeded, an error message will be shown.\nIn both cases, the `lapisFilter` should be narrowed down to reduce the number of mutations or date ranges.\nThe number of date ranges can also be reduced by selecting a larger granularity (months instead of weeks).",
           "name": "MutationsOverTimeComponent",
           "members": [
             {

package/dist/dashboard-components.js

@@ -4585,6 +4585,9 @@ input.tab:checked + .tab-content,
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.peer:hover ~ .peer-hover\\:block {
+  display: block;
 }`;
 var __defProp$c = Object.defineProperty;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -5938,6 +5941,9 @@ class YearMonthDay {
   toString() {
     return this.text;
   }
+  englishName() {
+    return this.dayjs.format("dddd, MMMM D, YYYY");
+  }
   get firstDay() {
     return this;
   }
@@ -5978,12 +5984,16 @@ class YearWeek {
   toString() {
     return this.text;
   }
+  englishName() {
+    return `Week ${this.isoWeekNumber}, ${this.isoYearNumber}`;
+  }
   get firstDay() {
     const firstDay = dayjs().year(this.isoYearNumber).month(1).date(4).isoWeek(this.isoWeekNumber).startOf("isoWeek");
     return this.cache.getYearMonthDay(firstDay.format("YYYY-MM-DD"));
   }
   get lastDay() {
-    const lastDay = dayjs().year(this.isoYearNumber).month(12).date(31).isoWeek(this.isoWeekNumber).endOf("isoWeek");
+    const firstDay = dayjs().year(this.isoYearNumber).startOf("year").add((this.isoWeekNumber - 1) * 7, "day").startOf("week").add(1, "day");
+    const lastDay = firstDay.add(6, "day");
     return this.cache.getYearMonthDay(lastDay.format("YYYY-MM-DD"));
   }
   get year() {
@@ -6014,6 +6024,9 @@ class YearMonth {
   toString() {
     return this.text;
   }
+  englishName() {
+    return `${monthName(this.monthNumber)} ${this.yearNumber}`;
+  }
   get firstDay() {
     return this.cache.getYearMonthDay(dayjs(`${this.yearNumber}-${this.monthNumber}-01`).format("YYYY-MM-DD"));
   }
@@ -6049,6 +6062,9 @@ class Year {
   toString() {
     return this.text;
   }
+  englishName() {
+    return this.year.toString();
+  }
   get firstMonth() {
     return this.cache.getYearMonth(`${this.year}-01`);
   }
@@ -6074,6 +6090,9 @@ class Year {
     return new Year(year, cache);
   }
 }
+function monthName(month) {
+  return dayjs().month(month - 1).format("MMMM");
+}
 function generateAllDaysInRange(start, end) {
   const days = [];
   const daysInBetween = end.minus(start);
@@ -7887,14 +7906,32 @@ function filterMutationTypes(displayedMutationTypes, data) {
 }
 function filterProportion(data, proportionInterval) {
   data.getFirstAxisKeys().forEach((mutation) => {
-    const row = data.getRow(mutation, 0);
-    if (!row.some((value) => value >= proportionInterval.min && value <= proportionInterval.max)) {
+    const row = data.getRow(mutation, { count: 0, proportion: 0 });
+    if (!row.some(
+      (value) => value.proportion >= proportionInterval.min && value.proportion <= proportionInterval.max
+    )) {
       data.deleteRow(mutation);
     }
   });
 }
+const Tooltip = ({ children, content }) => {
+  const referenceRef = A(null);
+  const floatingRef = A(null);
+  useFloatingUi(referenceRef, floatingRef, [offset(5), shift(), flip()]);
+  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
+    /* @__PURE__ */ u$1("div", { className: "peer", ref: referenceRef, children }),
+    /* @__PURE__ */ u$1("div", { ref: floatingRef, className: `${dropdownClass} hidden peer-hover:block`, children: content })
+  ] });
+};
+const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MutationsOverTimeGrid = ({ data }) => {
   const mutations = data.getFirstAxisKeys();
+  if (mutations.length > MAX_NUMBER_OF_GRID_ROWS) {
+    throw new UserFacingError(
+      "Too many mutations",
+      `The dataset contains ${mutations.length} mutations. Please adapt the filters to reduce the number to below ${MAX_NUMBER_OF_GRID_ROWS}.`
+    );
+  }
   const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
   return /* @__PURE__ */ u$1(
     "div",
@@ -7915,7 +7952,7 @@ const MutationsOverTimeGrid = ({ data }) => {
             `mutation-${mutation.toString()}`
           ),
           dates.map((date, j2) => {
-            const value = data.get(mutation, date) ?? 0;
+            const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
             return /* @__PURE__ */ u$1(
               "div",
               {
@@ -7930,15 +7967,41 @@ const MutationsOverTimeGrid = ({ data }) => {
     }
   );
 };
-const ProportionCell = ({ value }) => {
-  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(
+const ProportionCell = ({ value, mutation, date }) => {
+  const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
+    /* @__PURE__ */ u$1("p", { children: [
+      /* @__PURE__ */ u$1("span", { className: "font-bold", children: date.englishName() }),
+      " (",
+      timeIntervalDisplay(date),
+      ")"
+    ] }),
+    /* @__PURE__ */ u$1("p", { children: mutation.code }),
+    /* @__PURE__ */ u$1("p", { children: [
+      "Proportion: ",
+      formatProportion(value.proportion)
+    ] }),
+    /* @__PURE__ */ u$1("p", { children: [
+      "Count: ",
+      value.count
+    ] })
+  ] });
+  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, children: /* @__PURE__ */ u$1(
     "div",
     {
-      style: { backgroundColor: backgroundColor(value), color: textColor(value) },
+      style: {
+        backgroundColor: backgroundColor(value.proportion),
+        color: textColor(value.proportion)
+      },
       className: "text-center hover:font-bold text-xs",
-      children: formatProportion(value, 0)
+      children: formatProportion(value.proportion, 0)
     }
-  ) }) });
+  ) }) }) });
+};
+const timeIntervalDisplay = (date) => {
+  if (date instanceof YearMonthDay) {
+    return date.toString();
+  }
+  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
 };
 const backgroundColor = (proportion) => {
   const minAlpha = 0;
@@ -8014,8 +8077,15 @@ class Map2d {
     return copy;
   }
 }
+const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 async function queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity, signal) {
   const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
+  if (allDates.length > MAX_NUMBER_OF_GRID_COLUMNS) {
+    throw new UserFacingError(
+      "Too many dates",
+      `The dataset would contain ${allDates.length} date intervals. Please reduce the number to below ${MAX_NUMBER_OF_GRID_COLUMNS} to display the data. You can achieve this by either narrowing the date range in the provided LAPIS filter or by selecting a larger granularity.`
+    );
+  }
   const subQueries = allDates.map(async (date) => {
     const dateFrom = date.firstDay.toString();
     const dateTo = date.lastDay.toString();
@@ -8081,7 +8151,10 @@ function groupByMutation(data) {
   );
   data.forEach((mutationData) => {
     mutationData.mutations.forEach((mutationEntry) => {
-      dataArray.set(mutationEntry.mutation, mutationData.date, mutationEntry.proportion);
+      dataArray.set(mutationEntry.mutation, mutationData.date, {
+        count: mutationEntry.count,
+        proportion: mutationEntry.proportion
+      });
     });
   });
   addZeroValuesForDatesWithNoMutationData(dataArray, data);
@@ -8092,7 +8165,7 @@ function addZeroValuesForDatesWithNoMutationData(dataArray, data) {
     const someMutation = dataArray.getFirstAxisKeys()[0];
     data.forEach((mutationData) => {
       if (mutationData.mutations.length === 0) {
-        dataArray.set(someMutation, mutationData.date, 0);
+        dataArray.set(someMutation, mutationData.date, { count: 0, proportion: 0 });
       }
     });
   }