feat(components): add button to show a component in fullscreen #405

components/.depcheckrc.json

@@ -12,7 +12,9 @@
         "@typescript-eslint/parser",
         "eslint-config-preact",
         "eslint-plugin-import",
-        "eslint-plugin-storybook"
+        "eslint-plugin-storybook",
+        "@iconify-json/mdi",
+        "@iconify-json/mdi-light"
     ],
     "ignore-patterns": [".eslintrc.json"]
 }

components/package.json

@@ -67,6 +67,9 @@
         "dayjs": "^1.11.10",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
+        "@iconify-json/mdi": "^1.1.67",
+        "@iconify-json/mdi-light": "^1.1.10",
+        "@iconify/tailwind": "^1.1.1",
         "lit": "^3.1.3",
         "object-hash": "^3.0.0",
         "preact": "^10.20.1",

components/src/preact/aggregatedData/aggregate.tsx

@@ -8,6 +8,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -105,6 +106,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
             <Info>Info for aggregate</Info>
+            <Fullscreen />
         </div>
     );
 };

components/src/preact/components/chart.tsx

@@ -1,5 +1,5 @@
 import { Chart, type ChartConfiguration } from 'chart.js';
-import { useEffect, useRef } from 'preact/hooks';
+import { type MutableRef, useEffect, useRef } from 'preact/hooks';
 
 export interface GsChartProps {
     configuration: ChartConfiguration;
@@ -21,6 +21,8 @@ const GsChart = ({ configuration }: GsChartProps) => {
 
         chartRef.current = new Chart(ctx, configuration);
 
+        resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
+
         return () => {
             chartRef.current?.destroy();
         };
@@ -30,3 +32,14 @@ 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);
+    });
+};

components/src/preact/components/fullscreen.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+export const Fullscreen = () => {
+    const element = useRef<HTMLButtonElement>(null);
+    const isFullscreen = useFullscreenStatus();
+    return (
+        <button
+            ref={element}
+            onClick={async () => {
+                if (element.current) {
+                    if (isFullscreen) {
+                        await document.exitFullscreen();
+                    } else {
+                        const componentRoot = findComponentRoot(element.current);
+                        if (componentRoot) {
+                            await componentRoot.requestFullscreen();
+                        }
+                    }
+                }
+            }}
+            className={`mt-0.5 iconify text-2xl ${isFullscreen ? 'mdi--fullscreen-exit hover:scale-90' : 'mdi--fullscreen hover:scale-110'}`}
+            title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+        />
+    );
+};
+
+function findComponentRoot(element: HTMLElement) {
+    return findShadowRoot(element)?.children[0];
+}
+
+function findShadowRoot(element: HTMLElement) {
+    let current: Node = element;
+    while (current) {
+        if (current instanceof ShadowRoot) {
+            return current;
+        }
+        if (current.parentNode === null) {
+            return null;
+        }
+        current = current.parentNode;
+    }
+    return null;
+}
+
+function useFullscreenStatus(): boolean {
+    const [isFullscreen, setIsFullscreen] = useState<boolean>(document.fullscreenElement !== null);
+    useEffect(() => {
+        const handleFullscreenChange = () => {
+            setIsFullscreen(document.fullscreenElement !== null);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    return isFullscreen;
+}

components/src/preact/components/resize-container.tsx

@@ -10,5 +10,9 @@ export interface ResizeContainerProps {
 }
 
 export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size }) => {
-    return <div style={size}>{children}</div>;
+    return (
+        <div style={size} className='bg-white'>
+            {children}
+        </div>
+    );
 };

components/src/preact/mutationComparison/mutation-comparison.tsx

@@ -11,6 +11,7 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -189,6 +190,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='mutation_comparison.csv'
             />
             <Info>Info for mutation comparison</Info>
+            <Fullscreen />
         </>
     );
 };

components/src/preact/mutations/mutations.tsx

@@ -18,6 +18,7 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -208,6 +209,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 />
             )}
             <Info>Info for mutations</Info>
+            <Fullscreen />
         </>
     );
 };

components/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -16,6 +16,7 @@ import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-d
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -188,6 +189,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='mutations_over_time.csv'
             />
             <Info>Info for mutations over time</Info>
+            <Fullscreen />
         </>
     );
 };

components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -13,6 +13,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -151,6 +152,7 @@ const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleTy
                 filename='number_of_sequences_over_time.csv'
             />
             <NumberSequencesOverTimeInfo />
+            <Fullscreen />
         </>
     );
 };

components/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -13,6 +13,7 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -230,6 +231,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             />
 
             <PrevalenceOverTimeInfo />
+            <Fullscreen />
         </>
     );
 };

components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -10,6 +10,7 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -156,6 +157,7 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <Fullscreen />
         </>
     );
 };

components/tailwind.config.cjs

@@ -1,10 +1,12 @@
+const { addIconSelectors } = require('@iconify/tailwind');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ['src/**/*.{ts,tsx,html}', 'index.html'],
     theme: {
         extend: {},
     },
-    plugins: [require('daisyui')],
+    plugins: [require('daisyui'), addIconSelectors(['mdi', 'mdi-light'])],
     daisyui: {
         themes: ['light'],
     },

components/tests/fullScreen.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+test('component with fullscreen button exits full screen after full screen', async ({ page }) => {
+    await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=visualization-relative-growth-advantage--default&viewMode=story',
+    );
+
+    const fullScreenButton = page.getByRole('button', { name: 'Enter fullscreen' });
+    await fullScreenButton.click();
+
+    const exitFullScreenButton = page.getByRole('button', { name: 'Exit fullscreen' });
+    await exitFullScreenButton.click();
+
+    await expect(page.getByText('Relative advantage', { exact: false })).toBeVisible();
+});