@genspectrum/dashboard-components 0.6.3 → 0.6.5

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 limits the number of rows columns for browser performance reasons.\nToo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.",
           "name": "MutationsOverTimeComponent",
           "members": [
             {

package/dist/dashboard-components.js

@@ -4464,6 +4464,9 @@ input.tab:checked + .tab-content,
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -4585,6 +4588,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 +5944,9 @@ class YearMonthDay {
   toString() {
     return this.text;
   }
+  englishName() {
+    return this.dayjs.format("dddd, MMMM D, YYYY");
+  }
   get firstDay() {
     return this;
   }
@@ -5978,12 +5987,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 +6027,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 +6065,9 @@ class Year {
   toString() {
     return this.text;
   }
+  englishName() {
+    return this.year.toString();
+  }
   get firstMonth() {
     return this.cache.getYearMonth(`${this.year}-01`);
   }
@@ -6074,6 +6093,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,58 +7909,106 @@ 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();
+  const allMutations = data.getFirstAxisKeys();
+  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
   const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
-  return /* @__PURE__ */ u$1(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateRows: `repeat(${mutations.length}, 24px)`,
-        gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`
-      },
-      children: mutations.map((mutation, i2) => {
-        return /* @__PURE__ */ u$1(Fragment, { children: [
-          /* @__PURE__ */ u$1(
-            "div",
-            {
-              style: { gridRowStart: i2 + 1, gridColumnStart: 1 },
-              children: /* @__PURE__ */ u$1(MutationCell, { mutation })
-            },
-            `mutation-${mutation.toString()}`
-          ),
-          dates.map((date, j2) => {
-            const value = data.get(mutation, date) ?? 0;
-            return /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
+      "Showing ",
+      MAX_NUMBER_OF_GRID_ROWS,
+      " of ",
+      allMutations.length,
+      " mutations. You can narrow the filter to reduce the number of mutations."
+    ] }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
+          gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`
+        },
+        children: shownMutations.map((mutation, i2) => {
+          return /* @__PURE__ */ u$1(Fragment, { children: [
+            /* @__PURE__ */ u$1(
               "div",
               {
-                style: { gridRowStart: i2 + 1, gridColumnStart: j2 + 2 },
-                children: /* @__PURE__ */ u$1(ProportionCell, { value, date, mutation })
+                style: { gridRowStart: i2 + 1, gridColumnStart: 1 },
+                children: /* @__PURE__ */ u$1(MutationCell, { mutation })
               },
-              `${mutation.toString()}-${date.toString()}`
-            );
-          })
-        ] }, `fragment-${mutation.toString()}`);
-      })
-    }
-  );
+              `mutation-${mutation.toString()}`
+            ),
+            dates.map((date, j2) => {
+              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+              return /* @__PURE__ */ u$1(
+                "div",
+                {
+                  style: { gridRowStart: i2 + 1, gridColumnStart: j2 + 2 },
+                  children: /* @__PURE__ */ u$1(ProportionCell, { value, date, mutation })
+                },
+                `${mutation.toString()}-${date.toString()}`
+              );
+            })
+          ] }, `fragment-${mutation.toString()}`);
+        })
+      }
+    )
+  ] });
 };
-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 +8084,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 +8158,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 +8172,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 });
       }
     });
   }