@genspectrum/dashboard-components 0.8.2 → 0.8.3

package/dist/genspectrum-components.d.ts

@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1053,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -482,7 +482,7 @@ input[type="range"] {
   --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)
@@ -3194,35 +3194,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;
@@ -3301,23 +3301,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;
@@ -3347,6 +3347,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");
 }
@@ -3377,7 +3380,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;
@@ -3391,26 +3394,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;
@@ -3424,6 +3427,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 {

package/package.json

@@ -1,12 +1,17 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.8.2",
+    "version": "0.8.3",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
     "main": "dist/genspectrum-components.js",
     "module": "dist/genspectrum-components.js",
     "types": "dist/genspectrum-components.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/GenSpectrum/dashboard-components.git",
+        "directory": "components"
+    },
     "publishConfig": {
         "access": "public"
     },
@@ -101,6 +106,7 @@
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@types/node": "^22.0.0",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",

package/src/preact/components/chart.tsx

@@ -1,5 +1,5 @@
 import { Chart, type ChartConfiguration } from 'chart.js';
-import { type MutableRef, useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
 export interface GsChartProps {
     configuration: ChartConfiguration;
@@ -21,9 +21,14 @@ const GsChart = ({ configuration }: GsChartProps) => {
 
         chartRef.current = new Chart(ctx, configuration);
 
-        resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
+        const resizeChartAfterFullscreenChange = () => {
+            chartRef.current?.destroy();
+            chartRef.current = new Chart(ctx, configuration);
+        };
+        document.addEventListener('fullscreenchange', resizeChartAfterFullscreenChange);
 
         return () => {
+            document.removeEventListener('fullscreenchange', resizeChartAfterFullscreenChange);
             chartRef.current?.destroy();
         };
     }, [canvasRef, configuration]);
@@ -32,14 +37,3 @@ const GsChart = ({ configuration }: GsChartProps) => {
 };
 
 export default GsChart;
-
-const resizeChartAfterFullscreenChange = (
-    chartRef: MutableRef<Chart | null>,
-    ctx: CanvasRenderingContext2D,
-    configuration: ChartConfiguration,
-) => {
-    document.addEventListener('fullscreenchange', () => {
-        chartRef.current?.destroy();
-        chartRef.current = new Chart(ctx, configuration);
-    });
-};

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -1,5 +1,5 @@
-import { Fragment, type FunctionComponent, type RefObject } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { Fragment, type FunctionComponent } from 'preact';
+import { useRef } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
@@ -23,9 +23,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
 
     const dates = data.getSecondAxisKeys();
 
-    const [showProportionText, setShowProportionText] = useState(false);
     const gridRef = useRef<HTMLDivElement>(null);
-    useShowProportion(gridRef, dates.length, setShowProportionText);
 
     return (
         <>
@@ -45,6 +43,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
                     gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
                 }}
+                className='@container'
             >
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
@@ -73,7 +72,6 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                             date={date}
                                             mutation={mutation}
                                             tooltipPosition={tooltipPosition}
-                                            showProportionText={showProportionText}
                                             colorScale={colorScale}
                                         />
                                     </div>
@@ -87,33 +85,6 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     );
 };
 
-function useShowProportion(
-    gridRef: RefObject<HTMLDivElement>,
-    girdColumns: number,
-    setShowProportionText: (value: ((prevState: boolean) => boolean) | boolean) => void,
-) {
-    useEffect(() => {
-        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: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-
 function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
     const tooltipX = rowIndex < rows / 2 ? 'bottom' : 'top';
     const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
@@ -125,9 +96,8 @@ const ProportionCell: FunctionComponent<{
     date: Temporal;
     mutation: Substitution | Deletion;
     tooltipPosition: TooltipPosition;
-    showProportionText: boolean;
     colorScale: ColorScale;
-}> = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
+}> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
     const dateClass = toTemporalClass(date);
 
     const tooltipContent = (
@@ -154,7 +124,7 @@ const ProportionCell: FunctionComponent<{
                     }}
                     className={`w-full h-full text-center hover:font-bold text-xs group`}
                 >
-                    {showProportionText ? formatProportion(value.proportion, 0) : undefined}
+                    <span className='invisible @[30rem]:visible'>{formatProportion(value.proportion, 0)}</span>
                 </div>
             </Tooltip>
         </div>