@genspectrum/dashboard-components 0.6.5 → 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"
           }
         }

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));
@@ -4589,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) => {
@@ -5892,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();
@@ -5960,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");
@@ -5982,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;
@@ -6004,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);
   }
 }
@@ -7917,13 +7966,38 @@ 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;
@@ -7947,23 +8021,37 @@ const MutationsOverTimeGrid = ({ data }) => {
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
           gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`
         },
-        children: shownMutations.map((mutation, i2) => {
+        children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
             /* @__PURE__ */ u$1(
               "div",
               {
-                style: { gridRowStart: i2 + 1, gridColumnStart: 1 },
+                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
                 children: /* @__PURE__ */ u$1(MutationCell, { mutation })
               },
               `mutation-${mutation.toString()}`
             ),
-            dates.map((date, j2) => {
+            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: i2 + 1, gridColumnStart: j2 + 2 },
-                  children: /* @__PURE__ */ u$1(ProportionCell, { value, date, mutation })
+                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
+                  children: /* @__PURE__ */ u$1(
+                    ProportionCell,
+                    {
+                      value,
+                      date,
+                      mutation,
+                      tooltipPosition
+                    }
+                  )
                 },
                 `${mutation.toString()}-${date.toString()}`
               );
@@ -7974,7 +8062,12 @@ const MutationsOverTimeGrid = ({ data }) => {
     )
   ] });
 };
-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() }),
@@ -7992,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: {
@@ -8241,7 +8334,8 @@ const MutationsOverTimeTabs = ({
       displayedMutationTypes,
       setDisplayedMutationTypes,
       proportionInterval,
-      setProportionInterval
+      setProportionInterval,
+      filteredData
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
@@ -8252,7 +8346,8 @@ const Toolbar = ({
   displayedMutationTypes,
   setDisplayedMutationTypes,
   proportionInterval,
-  setProportionInterval
+  setProportionInterval,
+  filteredData
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
@@ -8263,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) => {