@genspectrum/dashboard-components 0.6.9 → 0.6.11

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

@@ -376,7 +376,7 @@ input[type="range"] {
     background-color: #C6C6C6;
     pointer-events: none;
 }/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.7 | 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)
@@ -1362,6 +1362,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -1858,6 +1862,14 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.link:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -2777,6 +2789,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;
 }
@@ -2872,6 +2896,9 @@ input.tab:checked + .tab-content,
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
 .ml-2\.5 {
   margin-left: 0.625rem;
 }
@@ -2884,6 +2911,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;
 }
@@ -2962,6 +2992,12 @@ input.tab:checked + .tab-content,
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -2992,6 +3028,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3001,6 +3040,9 @@ input.tab:checked + .tab-content,
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -3183,6 +3225,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 +3254,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));
@@ -3240,6 +3298,12 @@ input.tab:checked + .tab-content,
 }
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
+}
+@media (min-width: 640px) {
+
+  .sm\:max-w-5xl {
+    max-width: 64rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.9",
+    "version": "0.6.11",
     "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,7 +8,8 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Info from '../components/info';
+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';
 import { ResizeContainer } from '../components/resize-container';
@@ -93,18 +94,27 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
 
     const tabs = views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} />} />;
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} fields={fields} />} />;
 };
 
 type ToolbarProps = {
     data: AggregateData;
+    fields: string[];
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data, fields }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>Info for aggregate</Info>
+            <Info>
+                <InfoHeadline1>Aggregated data</InfoHeadline1>
+                <InfoParagraph>
+                    This table shows the number and proportion of sequences stratified by the following fields:{' '}
+                    {fields.join(', ')}. The proportion is calculated with respect to the total count within the
+                    filtered dataset.
+                </InfoParagraph>
+            </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/info.tsx

@@ -16,7 +16,7 @@ const Info: FunctionComponent<InfoProps> = ({ children }) => {
                 ?
             </button>
             <dialog ref={dialogRef} className={'modal modal-bottom sm:modal-middle'}>
-                <div className='modal-box'>
+                <div className='modal-box sm:max-w-5xl'>
                     <form method='dialog'>
                         <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
                     </form>
@@ -55,4 +55,91 @@ export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }
     );
 };
 
+export type InfoComponentCodeProps = {
+    componentName: string;
+    params: object;
+    lapisUrl: string;
+};
+
+export const InfoComponentCode: FunctionComponent<InfoComponentCodeProps> = ({ componentName, params, lapisUrl }) => {
+    const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+    const codePenData = {
+        title: 'GenSpectrum dashboard component',
+        html: generateFullExampleCode(componentCode, componentName),
+        layout: 'left',
+        editors: '100',
+    };
+    return (
+        <>
+            <InfoHeadline2>Use this component yourself</InfoHeadline2>
+            <InfoParagraph>
+                This component was created using the following parameters:
+                <div className='p-4 border border-gray-200 rounded-lg overflow-x-auto'>
+                    <pre>
+                        <code>{componentCode}</code>
+                    </pre>
+                </div>
+            </InfoParagraph>
+            <InfoParagraph>
+                You can add this component to your own website using the{' '}
+                <InfoLink href='https://github.com/GenSpectrum/dashboard-components'>
+                    GenSpectrum dashboard components library
+                </InfoLink>{' '}
+                and the code from above.
+            </InfoParagraph>
+            <InfoParagraph>
+                <form action='https://codepen.io/pen/define' method='POST' target='_blank'>
+                    <input
+                        type='hidden'
+                        name='data'
+                        value={JSON.stringify(codePenData).replace(/"/g, '&quot;').replace(/'/g, '&apos;')}
+                    />
+
+                    <button className='text-blue-600 hover:text-blue-800' type='submit'>
+                        Click here to try it out on CodePen.
+                    </button>
+                </form>
+            </InfoParagraph>
+        </>
+    );
+};
+
 export default Info;
+
+function componentParametersToCode(componentName: string, params: object, lapisUrl: string) {
+    const stringifyIfNeeded = (value: unknown) => {
+        return typeof value === 'object' ? JSON.stringify(value) : value;
+    };
+
+    const attributes = indentLines(
+        Object.entries(params)
+            .map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`)
+            .join('\n'),
+        4,
+    );
+    return `<gs-app lapis="${lapisUrl}">\n  <gs-${componentName}\n${attributes}\n  />\n</gs-app>`;
+}
+
+function generateFullExampleCode(componentCode: string, componentName: string) {
+    const storyBookPath = `/docs/visualization-${componentName}--docs`;
+    return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+
+function indentLines(text: string, numberSpaces: number) {
+    const spaces = ' '.repeat(numberSpaces);
+    return text
+        .split('\n')
+        .map((line) => spaces + line)
+        .join('\n');
+}

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,7 +18,8 @@ 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 Info from '../components/info';
+import { Fullscreen } from '../components/fullscreen';
+import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -207,7 +208,38 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info>Info for mutations</Info>
+            <MutationsInfo />
+            <Fullscreen />
         </>
     );
 };
+
+const MutationsInfo = () => (
+    <Info>
+        <InfoHeadline1>Mutations</InfoHeadline1>
+        <InfoParagraph>
+            This shows mutations of a variant. There are three types of mutations:{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
+        </InfoParagraph>
+        <InfoHeadline2>Proportion calculation</InfoHeadline2>
+        <InfoParagraph>
+            The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
+            total number of sequences with a non-ambiguous symbol at the position.
+        </InfoParagraph>
+        <InfoParagraph>
+            <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and assume
+            there are 10 sequences in total:
+            <ul className='list-disc list-inside ml-2'>
+                <li>3 sequences have a C,</li>
+                <li>2 sequences have a T,</li>
+                <li>1 sequence has a G,</li>
+                <li>3 sequences have an N,</li>
+                <li>1 sequence has a Y (which means T or C),</li>
+            </ul>
+            then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the
+            calculation.
+        </InfoParagraph>
+    </Info>
+);