@genspectrum/dashboard-components 1.8.2 → 1.9.0

package/custom-elements.json

@@ -638,7 +638,7 @@
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ ...LineageFilter, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a lineage'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: undefined, }); }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677146)' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
+          "default": "{ ...LineageFilter, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a lineage'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: undefined, }); }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677,146)' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -1530,7 +1530,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenLastCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [

package/dist/components.d.ts

@@ -1717,7 +1717,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1725,7 +1725,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1733,7 +1733,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1741,7 +1741,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1749,7 +1749,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1757,7 +1757,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1765,7 +1765,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1773,7 +1773,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1781,7 +1781,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1789,7 +1789,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1813,7 +1813,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1821,7 +1825,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1829,11 +1833,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1841,7 +1841,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -1585,6 +1585,20 @@ const MinMaxRangeSlider = ({
 function getGradientBoundary(x2, lowerBound, upperBound) {
   return (x2 - lowerBound) / (upperBound - lowerBound) * 100;
 }
+const TOOLTIP_BASE_STYLES = "z-10 w-max bg-white p-4 border border-gray-200 rounded-md";
+const Tooltip = ({ children, content, position = "bottom", tooltipStyle }) => {
+  return /* @__PURE__ */ u$1("div", { className: `relative group`, children: [
+    /* @__PURE__ */ u$1("div", { children }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: `absolute ${TOOLTIP_BASE_STYLES} invisible group-hover:visible ${getPositionCss(position)}`,
+        style: tooltipStyle,
+        children: content
+      }
+    )
+  ] });
+};
 function getPositionCss(position) {
   switch (position) {
     case "top":
@@ -1607,19 +1621,6 @@ function getPositionCss(position) {
       return "";
   }
 }
-const Tooltip = ({ children, content, position = "bottom", tooltipStyle }) => {
-  return /* @__PURE__ */ u$1("div", { className: `relative group`, children: [
-    /* @__PURE__ */ u$1("div", { children }),
-    /* @__PURE__ */ u$1(
-      "div",
-      {
-        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`,
-        style: tooltipStyle,
-        children: content
-      }
-    )
-  ] });
-};
 const ColorsRGB = {
   indigo: [51, 34, 136],
   green: [17, 119, 51],
@@ -7422,7 +7423,7 @@ const MutationsOverTimeGridTooltip = ({
   value
 }) => {
   const dateClass = toTemporalClass(date);
-  return /* @__PURE__ */ u$1("div", { children: [
+  return /* @__PURE__ */ u$1("div", { className: "text-center", children: [
     /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
     /* @__PURE__ */ u$1("p", { children: [
       "(",
@@ -7549,6 +7550,79 @@ const getTextColorForScale = (value, colorScale) => {
   const alpha = (value - colorScale.min) / colorRange;
   return alpha <= 0.5 ? "black" : "white";
 };
+const PortalTooltip = ({
+  children,
+  content,
+  position = "bottom",
+  tooltipStyle,
+  portalTarget
+}) => {
+  const [isHovered, setIsHovered] = d(false);
+  const [tooltipPosition, setTooltipPosition] = d({ top: 0, left: 0 });
+  const triggerRef = A$1(null);
+  const tooltipRef = A$1(null);
+  _(() => {
+    if (isHovered && triggerRef.current !== null && tooltipRef.current !== null) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const newPosition = calculateTooltipPosition(triggerRect, tooltipRect, position);
+      setTooltipPosition(newPosition);
+    }
+  }, [isHovered, position]);
+  const tooltipContent = /* @__PURE__ */ u$1(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `fixed ${TOOLTIP_BASE_STYLES} ${isHovered ? "visible" : "invisible"}`,
+      style: Object.assign({}, tooltipStyle, { top: tooltipPosition.top, left: tooltipPosition.left }),
+      children: content
+    }
+  );
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1("div", { ref: triggerRef, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children }),
+    portalTarget !== null && $(tooltipContent, portalTarget)
+  ] });
+};
+function calculateTooltipPosition(triggerRect, tooltipRect, position) {
+  const gap = 4;
+  let top;
+  let left;
+  switch (position) {
+    case "top":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "top-start":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.left;
+      break;
+    case "top-end":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case "bottom":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "bottom-start":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.left;
+      break;
+    case "bottom-end":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case "left":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - gap;
+      break;
+    case "right":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.right + gap;
+      break;
+  }
+  return { top, left };
+}
 const pageSizeContext = createContext$1({
   pageSize: -1,
   setPageSize: () => {
@@ -7731,7 +7805,8 @@ const MutationsOverTimeGrid = ({
   data,
   colorScale,
   sequenceType,
-  pageSizes
+  pageSizes,
+  tooltipPortalTarget
 }) => {
   const tableData = T$1(() => {
     const allMutations = data.getFirstAxisKeys();
@@ -7772,14 +7847,15 @@ const MutationsOverTimeGrid = ({
                 columnIndex,
                 numberOfColumns
               ),
-              colorScale
+              colorScale,
+              tooltipPortalTarget
             }
           ) });
         }
       });
     });
     return [mutationHeader, ...dateHeaders];
-  }, [colorScale, data, sequenceType]);
+  }, [colorScale, data, sequenceType, tooltipPortalTarget]);
   const { pageSize } = usePageSizeContext();
   const table = usePreactTable({
     data: tableData,
@@ -7818,13 +7894,14 @@ function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
   return `${tooltipX}-${tooltipY}`;
 }
-const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale }) => {
+const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
   const proportion = (value == null ? void 0 : value.type) === "belowThreshold" ? void 0 : value == null ? void 0 : value.proportion;
   return /* @__PURE__ */ u$1("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$1(
-    Tooltip,
+    PortalTooltip,
     {
       content: /* @__PURE__ */ u$1(MutationsOverTimeGridTooltip, { mutation, date, value }),
       position: tooltipPosition,
+      portalTarget: tooltipPortalTarget,
       children: /* @__PURE__ */ u$1(
         "div",
         {
@@ -8053,6 +8130,11 @@ const MutationsOverTimeTabs$1 = ({
   overallMutationData
 }) => {
   const tabsRef = useDispatchFinishedLoadingEvent();
+  const tooltipPortalTargetRef = A$1(null);
+  const [tooltipPortalTarget, setTooltipPortalTarget] = d(null);
+  _(() => {
+    setTooltipPortalTarget(tooltipPortalTargetRef.current);
+  }, []);
   const [mutationFilterValue, setMutationFilterValue] = d({
     textFilter: "",
     annotationNameFilter: /* @__PURE__ */ new Set()
@@ -8102,7 +8184,8 @@ const MutationsOverTimeTabs$1 = ({
               data: filteredData,
               colorScale,
               sequenceType: originalComponentProps.sequenceType,
-              pageSizes: originalComponentProps.pageSizes
+              pageSizes: originalComponentProps.pageSizes,
+              tooltipPortalTarget
             }
           )
         };
@@ -8129,7 +8212,7 @@ const MutationsOverTimeTabs$1 = ({
       mutationFilterValue
     }
   );
-  return /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) });
+  return /* @__PURE__ */ u$1("div", { ref: tooltipPortalTargetRef, children: /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) }) });
 };
 const Toolbar$2 = ({
   activeTab,
@@ -9718,6 +9801,7 @@ const MutationsOverTimeTabs = ({
   originalComponentProps
 }) => {
   const tabsRef = useDispatchFinishedLoadingEvent();
+  const tooltipPortalTargetRef = A$1(null);
   const [mutationFilterValue, setMutationFilterValue] = d({
     textFilter: "",
     annotationNameFilter: /* @__PURE__ */ new Set()
@@ -9740,7 +9824,8 @@ const MutationsOverTimeTabs = ({
           }),
           colorScale,
           pageSizes: originalComponentProps.pageSizes,
-          sequenceType: originalComponentProps.sequenceType
+          sequenceType: originalComponentProps.sequenceType,
+          tooltipPortalTarget: tooltipPortalTargetRef.current
         }
       )
     })),
@@ -9767,7 +9852,7 @@ const MutationsOverTimeTabs = ({
       mutationFilterValue
     }
   );
-  return /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) });
+  return /* @__PURE__ */ u$1("div", { ref: tooltipPortalTargetRef, children: /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) }) });
 };
 const Toolbar = ({
   colorScale,
@@ -14106,7 +14191,8 @@ function DownshiftCombobox({
     highlightedIndex,
     getItemProps,
     inputValue,
-    closeMenu
+    closeMenu,
+    reset
   } = useCombobox({
     onInputValueChange({ inputValue: inputValue2 }) {
       setInputIsInvalid(false);
@@ -14136,7 +14222,7 @@ function DownshiftCombobox({
     setInputIsInvalid(true);
   };
   const clearInput = () => {
-    selectItem(null);
+    reset();
   };
   const buttonRef = A$1(null);
   return /* @__PURE__ */ u$1("div", { ref: divRef, className: "relative w-full", children: [
@@ -14273,7 +14359,7 @@ const LocationSelector = ({
           /* @__PURE__ */ u$1("span", { children: item.label }),
           !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
             "(",
-            item.count,
+            item.count.toLocaleString("en-US"),
             ")"
           ] })
         ] }),
@@ -14445,7 +14531,7 @@ const TextSelector = ({
           /* @__PURE__ */ u$1("span", { children: item.value }),
           !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
             "(",
-            item.count,
+            item.count.toLocaleString("en-US"),
             ")"
           ] })
         ] });
@@ -15450,7 +15536,7 @@ const LineageSelector = ({
         /* @__PURE__ */ u$1("span", { children: item.lineage }),
         !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
           "(",
-          item.count,
+          item.count.toLocaleString("en-US"),
           ")"
         ] })
       ] })