@genspectrum/dashboard-components 0.8.1 → 0.8.3

package/dist/genspectrum-components.d.ts

@@ -547,8 +547,8 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
- * The grid limits the number of rows columns for browser performance reasons.
- * Too much data might make the browser unresponsive.
+ * The grid limits the number of rows and columns for browser performance reasons as
+ * too much data might make the browser unresponsive.
  *
  * The number of columns is limited to 200.
  * If this number are exceeded, an error message will be shown.
@@ -1029,10 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1040,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1048,10 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1059,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1067,10 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1078,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1086,10 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1097,7 +1085,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1105,10 +1093,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1116,7 +1101,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1124,7 +1109,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1132,7 +1117,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1140,7 +1125,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1148,7 +1133,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1156,7 +1141,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1164,7 +1152,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1172,7 +1160,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1180,7 +1171,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1188,7 +1179,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1196,7 +1190,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1204,7 +1198,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1212,7 +1209,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1220,7 +1217,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1228,7 +1228,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': 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.1",
+    "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/__mockData__/noDataWhenNoMutationsAreInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '1800-01-01',
+            dateTo: '1800-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/__mockData__/noDataWhenThereAreNoDatesInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '2345-01-01',
+            dateTo: '2020-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -5,6 +5,7 @@ import { workerFunction } from '../webWorkers/workerFunction';
 import { byWeek } from './__mockData__/byWeek';
 import { defaultMockData } from './__mockData__/defaultMockData';
 import { getMutationOverTimeMock } from './__mockData__/mockConversion';
+import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
@@ -12,6 +13,7 @@ const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWor
     getMutationOverTimeMock(showsMessageWhenTooManyMutations),
     getMutationOverTimeMock(byWeek),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
+    getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
 ];
 
 self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {

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 (
         <>
@@ -35,6 +33,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     reduce the number of mutations.
                 </div>
             )}
+            {allMutations.length === 0 && (
+                <div className={'flex justify-center'}>No data available for your filters.</div>
+            )}
             <div
                 ref={gridRef}
                 style={{
@@ -42,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 (
@@ -70,7 +72,6 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                             date={date}
                                             mutation={mutation}
                                             tooltipPosition={tooltipPosition}
-                                            showProportionText={showProportionText}
                                             colorScale={colorScale}
                                         />
                                     </div>
@@ -84,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';
@@ -122,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 = (
@@ -151,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>