@genspectrum/dashboard-components 0.6.4 → 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.\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).",
+          "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;
 }
@@ -7925,47 +7928,51 @@ const Tooltip = ({ 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 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) ?? { proportion: 0, count: 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, mutation, date }) => {
   const tooltipContent = /* @__PURE__ */ u$1("div", { children: [