@genspectrum/dashboard-components 0.8.2 → 0.8.3

package/dist/dashboard-components.js

@@ -1001,21 +1001,20 @@ const GsChart = ({ configuration }) => {
       return;
     }
     chartRef.current = new Chart(ctx, configuration);
-    resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
+    const resizeChartAfterFullscreenChange = () => {
+      var _a;
+      (_a = chartRef.current) == null ? void 0 : _a.destroy();
+      chartRef.current = new Chart(ctx, configuration);
+    };
+    document.addEventListener("fullscreenchange", resizeChartAfterFullscreenChange);
     return () => {
       var _a;
+      document.removeEventListener("fullscreenchange", resizeChartAfterFullscreenChange);
       (_a = chartRef.current) == null ? void 0 : _a.destroy();
     };
   }, [canvasRef, configuration]);
   return /* @__PURE__ */ u$1("canvas", { ref: canvasRef });
 };
-const resizeChartAfterFullscreenChange = (chartRef, ctx, configuration) => {
-  document.addEventListener("fullscreenchange", () => {
-    var _a;
-    (_a = chartRef.current) == null ? void 0 : _a.destroy();
-    chartRef.current = new Chart(ctx, configuration);
-  });
-};
 Chart.register(...registerables, VennDiagramController, ArcSlice);
 const MutationComparisonVenn = ({
   data,
@@ -2195,7 +2194,7 @@ const tailwindStyle = `*, ::before, ::after {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -4907,35 +4906,35 @@ input.tab:checked + .tab-content,
 }
 .border-error {
   --tw-border-opacity: 1;
-  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)));
 }
 .border-gray-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
 }
 .border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 .border-gray-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 .border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 .border-red-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
 .bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 .p-1 {
   padding: 0.25rem;
@@ -5014,23 +5013,23 @@ input.tab:checked + .tab-content,
 }
 .text-\\[\\#606060\\] {
   --tw-text-opacity: 1;
-  color: rgb(96 96 96 / var(--tw-text-opacity));
+  color: rgb(96 96 96 / var(--tw-text-opacity, 1));
 }
 .text-blue-600 {
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 .text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-neutral-500 {
   --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
 .underline {
   text-decoration-line: underline;
@@ -5060,6 +5059,9 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.\\@container {
+  container-type: inline-size;
+}
 .mdi--fullscreen {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
 }
@@ -5090,7 +5092,7 @@ input.tab:checked + .tab-content,
 }
 .focus-within\\:border-gray-400:focus-within {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 .hover\\:scale-110:hover {
   --tw-scale-x: 1.1;
@@ -5104,26 +5106,26 @@ input.tab:checked + .tab-content,
 }
 .hover\\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 .hover\\:font-bold:hover {
   font-weight: 700;
 }
 .hover\\:text-blue-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-blue-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-gray-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 .focus\\:outline-none:focus {
   outline: 2px solid transparent;
@@ -5137,6 +5139,12 @@ input.tab:checked + .tab-content,
 .peer:hover ~ .peer-hover\\:visible {
   visibility: visible;
 }
+@container (min-width: 30rem) {
+
+  .\\@\\[30rem\\]\\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -8801,9 +8809,7 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
   const allMutations = data.getFirstAxisKeys();
   const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
   const dates = data.getSecondAxisKeys();
-  const [showProportionText, setShowProportionText] = h(false);
   const gridRef = A(null);
-  useShowProportion(gridRef, dates.length, setShowProportionText);
   return /* @__PURE__ */ u$1(Fragment, { children: [
     allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
       "Showing ",
@@ -8822,6 +8828,7 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
           gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
         },
+        className: "@container",
         children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
             /* @__PURE__ */ u$1(
@@ -8851,7 +8858,6 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
                       date,
                       mutation,
                       tooltipPosition,
-                      showProportionText,
                       colorScale
                     }
                   )
@@ -8865,30 +8871,12 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
     )
   ] });
 };
-function useShowProportion(gridRef, girdColumns, setShowProportionText) {
-  y(() => {
-    const checkWidth = () => {
-      if (gridRef.current) {
-        const width = gridRef.current.getBoundingClientRect().width;
-        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
-        const maxWidthProportionText = 28;
-        setShowProportionText(widthPerDate > maxWidthProportionText);
-      }
-    };
-    checkWidth();
-    window.addEventListener("resize", checkWidth);
-    return () => {
-      window.removeEventListener("resize", checkWidth);
-    };
-  }, [girdColumns, gridRef, setShowProportionText]);
-}
-const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 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, showProportionText, colorScale }) => {
+const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale }) => {
   const dateClass = toTemporalClass(date);
   const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
     /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
@@ -8918,7 +8906,7 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportion
         color: getTextColorForScale(value.proportion, colorScale)
       },
       className: `w-full h-full text-center hover:font-bold text-xs group`,
-      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
+      children: /* @__PURE__ */ u$1("span", { className: "invisible @[30rem]:visible", children: formatProportion(value.proportion, 0) })
     }
   ) }) });
 };