@genspectrum/dashboard-components 0.6.9 → 0.6.10

package/dist/genspectrum-components.d.ts

@@ -976,14 +976,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 

package/dist/style.css

@@ -2777,6 +2777,18 @@ input.tab:checked + .tab-content,
   right: auto;
   bottom: var(--tooltip-tail-offset);
 }
+.iconify {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
 .visible {
   visibility: visible;
 }
@@ -2884,6 +2896,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -3183,6 +3198,12 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.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");
+}
+.mdi--fullscreen-exit {
+  --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='M14 14h5v2h-3v3h-2zm-9 0h5v5H8v-3H5zm3-9h2v5H5V8h3zm11 3v2h-5V5h2v3z'/%3E%3C/svg%3E");
+}
 @media (min-width: 640px) {
 
   .sm\:modal-middle {
@@ -3206,6 +3227,16 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.hover\:scale-90:hover {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.9",
+    "version": "0.6.10",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -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",

package/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>
     );
 };

package/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);
+    });
+};

package/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;
+}

package/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>
+    );
 };

package/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 />
         </>
     );
 };

package/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 />
         </>
     );
 };