@genspectrum/dashboard-components 0.6.4 → 0.6.6

package/custom-elements.json

@@ -1791,11 +1791,27 @@
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "ByMonth",
           "type": {
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
           "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_dates', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-15', dateTo: '2024-07-10', fields: ['date'], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_date, }, }, { matcher: { name: 'nucleotideMutations_01', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-01', dateTo: '2024-01-31', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_01, }, }, { matcher: { name: 'nucleotideMutations_02', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-02-01', dateTo: '2024-02-29', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_02, }, }, { matcher: { name: 'nucleotideMutations_03', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-03-01', dateTo: '2024-03-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_03, }, }, }, { matcher: { name: 'nucleotideMutations_04', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-04-01', dateTo: '2024-04-30', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_04, }, }, }, { matcher: { name: 'nucleotideMutations_05', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-05-01', dateTo: '2024-05-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_05, }, }, }, { matcher: { name: 'nucleotideMutations_06', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-06-01', dateTo: '2024-06-30', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_06, }, }, }, { matcher: { name: 'nucleotideMutations_07', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-07-01', dateTo: '2024-07-31', minProportion: 0.001, }, response: { status: 200, body: nucleotideMutation_07, }, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ByWeek",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' }, granularity: 'week', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_dates', url: AGGREGATED_ENDPOINT, body: { dateFrom: '2024-01-15', dateTo: '2024-02-11', fields: ['date'], pangoLineage: 'JN.1*', }, }, response: { status: 200, body: aggregated_byWeek, }, }, { matcher: { name: 'nucleotideMutation_week3', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-01-21', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week3, }, }, { matcher: { name: 'nucleotideMutation_week4', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-22', dateTo: '2024-01-28', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week4, }, }, { matcher: { name: 'nucleotideMutation_week5', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-29', dateTo: '2024-02-04', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week5, }, }, { matcher: { name: 'nucleotideMutation_week6', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-02-05', dateTo: '2024-02-11', minProportion: 0.001, }, }, response: { status: 200, body: nucleotideMutation_week6, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "AminoAcidMutationsByDay",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' }, granularity: 'day', sequenceType: 'amino acid', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregated_byDay', url: AGGREGATED_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', fields: ['date'] }, }, response: { status: 200, body: aggregated_byDay, }, }, { matcher: { name: 'aminoAcidMutations_20_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-20', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_20_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_21_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-21', dateTo: '2024-01-21', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_21_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_22_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-22', dateTo: '2024-01-22', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_22_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_23_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-23', dateTo: '2024-01-23', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_23_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_24_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-24', dateTo: '2024-01-24', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_24_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_25_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-25', dateTo: '2024-01-25', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_25_01_2024, }, }, { matcher: { name: 'aminoAcidMutations_26_01_2024', url: AMINO_ACID_MUTATIONS_ENDPOINT, body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-26', dateTo: '2024-01-26', minProportion: 0.001, }, }, response: { status: 200, body: aminoAcidMutations_26_01_2024, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1809,9 +1825,25 @@
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "ByMonth",
           "declaration": {
-            "name": "Default",
+            "name": "ByMonth",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ByWeek",
+          "declaration": {
+            "name": "ByWeek",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AminoAcidMutationsByDay",
+          "declaration": {
+            "name": "AminoAcidMutationsByDay",
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
         }
@@ -1823,7 +1855,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

@@ -4202,6 +4202,9 @@ input.tab:checked + .tab-content,
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -4217,18 +4220,39 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.bottom-full {
+  bottom: 100%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\\/2 {
+  left: 50%;
+}
+.left-full {
+  left: 100%;
+}
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.right-full {
+  right: 100%;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\\/2 {
+  top: 50%;
+}
 .top-2 {
   top: 0.5rem;
 }
+.top-full {
+  top: 100%;
+}
 .z-10 {
   z-index: 10;
 }
@@ -4257,18 +4281,30 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2\\.5 {
   margin-left: 0.625rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -4327,6 +4363,14 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.translate-x-\\[-50\\%\\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-\\[-50\\%\\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .resize {
   resize: both;
 }
@@ -4427,6 +4471,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -4464,6 +4512,9 @@ input.tab:checked + .tab-content,
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -4586,8 +4637,8 @@ input.tab:checked + .tab-content,
   --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;
+.peer:hover ~ .peer-hover\\:visible {
+  visibility: visible;
 }`;
 var __defProp$c = Object.defineProperty;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -5889,6 +5940,7 @@ const isoWeek = function(o2, c2, d2) {
 };
 dayjs.extend(isoWeek);
 dayjs.extend(advancedFormat);
+const FORMAT_ISO_WEEK_YEAR_WEEK = "GGGG-[W]WW";
 const _TemporalCache = class _TemporalCache {
   constructor() {
     this.yearMonthDayCache = /* @__PURE__ */ new Map();
@@ -5957,7 +6009,7 @@ class YearMonthDay {
     return this.cache.getYearMonth(this.dayjs.format("YYYY-MM"));
   }
   get week() {
-    return this.cache.getYearWeek(this.dayjs.format("GGGG-WW"));
+    return this.cache.getYearWeek(this.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK));
   }
   addDays(days) {
     const date = this.dayjs.add(days, "day");
@@ -5979,7 +6031,7 @@ class YearWeek {
     this.cache = cache;
   }
   get text() {
-    return this.firstDay.dayjs.format("YYYY-WW");
+    return this.firstDay.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK);
   }
   toString() {
     return this.text;
@@ -6001,14 +6053,14 @@ class YearWeek {
   }
   addWeeks(weeks) {
     const date = this.firstDay.dayjs.add(weeks, "week");
-    const s2 = date.format("YYYY-WW");
+    const s2 = date.format(FORMAT_ISO_WEEK_YEAR_WEEK);
     return this.cache.getYearWeek(s2);
   }
   minus(other) {
     return this.firstDay.dayjs.diff(other.firstDay.dayjs, "week");
   }
   static parse(s2, cache) {
-    const [year, week] = s2.split("-").map((s22) => parseInt(s22, 10));
+    const [year, week] = s2.split("-W").map((s22) => parseInt(s22, 10));
     return new YearWeek(year, week, cache);
   }
 }
@@ -7914,60 +7966,108 @@ function filterProportion(data, proportionInterval) {
     }
   });
 }
-const Tooltip = ({ children, content }) => {
-  const referenceRef = A(null);
-  const floatingRef = A(null);
-  useFloatingUi(referenceRef, floatingRef, [offset(5), shift(), flip()]);
+function getPositionCss(position) {
+  switch (position) {
+    case "top":
+      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
+    case "top-start":
+      return "bottom-full mr-1 mb-1";
+    case "top-end":
+      return "bottom-full right-0 ml-1 mb-1";
+    case "bottom":
+      return "top-full translate-x-[-50%] left-1/2 mt-1";
+    case "bottom-start":
+      return "mr-1 mt-1";
+    case "bottom-end":
+      return "right-0 ml-1 mt-1";
+    case "left":
+      return "right-full translate-y-[-50%] top-1/2 mr-1";
+    case "right":
+      return "left-full translate-y-[-50%] top-1/2 ml-1";
+    case void 0:
+      return "";
+  }
+}
+const Tooltip = ({ children, content, position = "bottom" }) => {
   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 })
+    /* @__PURE__ */ u$1("div", { className: "peer", children }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
+        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, rowIndex) => {
+          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: rowIndex + 1, gridColumnStart: 1 },
+                children: /* @__PURE__ */ u$1(MutationCell, { mutation })
               },
-              `${mutation.toString()}-${date.toString()}`
-            );
-          })
-        ] }, `fragment-${mutation.toString()}`);
-      })
-    }
-  );
+              `mutation-${mutation.toString()}`
+            ),
+            dates.map((date, columnIndex) => {
+              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+              const tooltipPosition = getTooltipPosition(
+                rowIndex,
+                shownMutations.length,
+                columnIndex,
+                dates.length
+              );
+              return /* @__PURE__ */ u$1(
+                "div",
+                {
+                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
+                  children: /* @__PURE__ */ u$1(
+                    ProportionCell,
+                    {
+                      value,
+                      date,
+                      mutation,
+                      tooltipPosition
+                    }
+                  )
+                },
+                `${mutation.toString()}-${date.toString()}`
+              );
+            })
+          ] }, `fragment-${mutation.toString()}`);
+        })
+      }
+    )
+  ] });
 };
-const ProportionCell = ({ value, mutation, date }) => {
+function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
+  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
+  const tooltipY = columnIndex < columns / 2 ? "start" : "end";
+  return `${tooltipX}-${tooltipY}`;
+}
+const ProportionCell = ({ value, mutation, date, tooltipPosition }) => {
   const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
     /* @__PURE__ */ u$1("p", { children: [
       /* @__PURE__ */ u$1("span", { className: "font-bold", children: date.englishName() }),
@@ -7985,7 +8085,7 @@ const ProportionCell = ({ value, mutation, date }) => {
       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(
+  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$1(
     "div",
     {
       style: {
@@ -8234,7 +8334,8 @@ const MutationsOverTimeTabs = ({
       displayedMutationTypes,
       setDisplayedMutationTypes,
       proportionInterval,
-      setProportionInterval
+      setProportionInterval,
+      filteredData
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
@@ -8245,7 +8346,8 @@ const Toolbar = ({
   displayedMutationTypes,
   setDisplayedMutationTypes,
   proportionInterval,
-  setProportionInterval
+  setProportionInterval,
+  filteredData
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
@@ -8256,17 +8358,41 @@ const Toolbar = ({
         displayedMutationTypes
       }
     ),
-    /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
+    /* @__PURE__ */ u$1(
       ProportionSelectorDropdown,
       {
         proportionInterval,
         setMinProportion: (min) => setProportionInterval((prev) => ({ ...prev, min })),
         setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max }))
       }
-    ) }),
+    ),
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => getDownloadData(filteredData),
+        filename: "mutations_over_time.csv"
+      }
+    ),
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations over time" })
   ] });
 };
+function getDownloadData(filteredData) {
+  const dates = filteredData.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
+  return filteredData.getFirstAxisKeys().map((mutation) => {
+    return dates.reduce(
+      (accumulated, date) => {
+        var _a;
+        const proportion = ((_a = filteredData.get(mutation, date)) == null ? void 0 : _a.proportion) ?? 0;
+        return {
+          ...accumulated,
+          [date.toString()]: proportion
+        };
+      },
+      { mutation: mutation.toString() }
+    );
+  });
+}
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {