@genspectrum/dashboard-components 0.6.5 → 0.6.7

package/src/preact/components/tooltip.tsx

@@ -1,27 +1,51 @@
-import { flip, offset, shift } from '@floating-ui/dom';
 import { type FunctionComponent } from 'preact';
-import { useRef } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
-import { dropdownClass } from './dropdown';
-import { useFloatingUi } from '../shared/floating-ui/hooks';
+export type TooltipPosition =
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'right';
 
 export type TooltipProps = {
     content: string | JSXInternal.Element;
+    position?: TooltipPosition;
 };
 
-const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
-    const referenceRef = useRef<HTMLDivElement>(null);
-    const floatingRef = useRef<HTMLDivElement>(null);
-
-    useFloatingUi(referenceRef, floatingRef, [offset(5), shift(), flip()]);
+function getPositionCss(position?: TooltipPosition) {
+    switch (position) {
+        case 'top':
+            return 'bottom-full translate-x-[-50%] left-1/2 mb-1';
+        case 'top-start':
+            return 'bottom-full mr-1 mb-1';
+        case 'top-end':
+            return 'bottom-full right-0 ml-1 mb-1';
+        case 'bottom':
+            return 'top-full translate-x-[-50%] left-1/2 mt-1';
+        case 'bottom-start':
+            return 'mr-1 mt-1';
+        case 'bottom-end':
+            return 'right-0 ml-1 mt-1';
+        case 'left':
+            return 'right-full translate-y-[-50%] top-1/2 mr-1';
+        case 'right':
+            return 'left-full translate-y-[-50%] top-1/2 ml-1';
+        case undefined:
+            return '';
+    }
+}
 
+const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom' }) => {
     return (
-        <div className='relative'>
-            <div className='peer' ref={referenceRef}>
-                {children}
-            </div>
-            <div ref={floatingRef} className={`${dropdownClass} hidden peer-hover:block`}>
+        <div className='relative w-full h-full'>
+            <div className='peer w-full h-full'>{children}</div>
+            <div
+                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`}
+            >
                 {content}
             </div>
         </div>

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

@@ -188,7 +188,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info height={'100px'}>Info for mutation comparison</Info>
+            <Info>Info for mutation comparison</Info>
         </>
     );
 };

package/src/preact/mutationFilter/mutation-filter-info.tsx

@@ -9,7 +9,7 @@ export const MutationFilterInfo = () => {
 
     const firstGene = referenceGenome.genes[0].name;
     return (
-        <Info height={'80vh'}>
+        <Info>
             <InfoHeadline1> Mutation Filter</InfoHeadline1>
             <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
 

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -104,7 +104,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Remove the first mutation', async () => {
-            const firstMutationDeleteButton = canvas.getAllByRole('button')[1];
+            const firstMutationDeleteButton = canvas.getAllByRole('button', { name: '✕' })[1];
             await waitFor(() => fireEvent.click(firstMutationDeleteButton));
 
             await expect(changedListenerMock).toHaveBeenCalledWith(

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -8,7 +8,6 @@ import { type Deletion, type Insertion, type Mutation, type Substitution } from
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
-import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
 export interface MutationFilterInnerProps {
     initialValue?: SelectedMutationFilterStrings | string[] | undefined;
@@ -312,8 +311,8 @@ const SelectedFilter = <MutationType extends Mutation>({
             style={{ backgroundColor, color: textColor }}
         >
             {mutation.toString()}
-            <button type='button' onClick={() => onDelete(mutation)}>
-                <DeleteIcon />
+            <button className='ml-1' type='button' onClick={() => onDelete(mutation)}>
+                ✕
             </button>
         </span>
     );

package/src/preact/mutations/mutations.tsx

@@ -207,7 +207,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info height={'100px'}>Info for mutations</Info>
+            <Info>Info for mutations</Info>
         </>
     );
 };

package/src/preact/mutationsOverTime/__mockData__/aggregated_byDay.json

@@ -0,0 +1,38 @@
+{
+    "data": [
+        {
+            "count": 447,
+            "date": "2024-01-20"
+        },
+        {
+            "count": 1096,
+            "date": "2024-01-22"
+        },
+        {
+            "count": 1008,
+            "date": "2024-01-23"
+        },
+        {
+            "count": 526,
+            "date": "2024-01-21"
+        },
+        {
+            "count": 866,
+            "date": "2024-01-24"
+        },
+        {
+            "count": 819,
+            "date": "2024-01-25"
+        },
+        {
+            "count": 622,
+            "date": "2024-01-26"
+        }
+    ],
+    "info": {
+        "dataVersion": "1721588457",
+        "requestId": "4181b443-024d-4520-a68b-a4f0e2249d3a",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-07-22T16:24:29.959383752",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

package/src/preact/mutationsOverTime/__mockData__/aggregated_byWeek.json

@@ -0,0 +1,122 @@
+{
+    "data": [
+        {
+            "count": 622,
+            "date": "2024-01-26"
+        },
+        {
+            "count": 819,
+            "date": "2024-01-25"
+        },
+        {
+            "count": 683,
+            "date": "2024-02-02"
+        },
+        {
+            "count": 526,
+            "date": "2024-01-21"
+        },
+        {
+            "count": 580,
+            "date": "2024-01-19"
+        },
+        {
+            "count": 434,
+            "date": "2024-01-27"
+        },
+        {
+            "count": 947,
+            "date": "2024-01-30"
+        },
+        {
+            "count": 831,
+            "date": "2024-01-18"
+        },
+        {
+            "count": 447,
+            "date": "2024-01-20"
+        },
+        {
+            "count": 803,
+            "date": "2024-02-01"
+        },
+        {
+            "count": 332,
+            "date": "2024-02-11"
+        },
+        {
+            "count": 967,
+            "date": "2024-01-17"
+        },
+        {
+            "count": 993,
+            "date": "2024-02-06"
+        },
+        {
+            "count": 714,
+            "date": "2024-02-08"
+        },
+        {
+            "count": 1008,
+            "date": "2024-01-23"
+        },
+        {
+            "count": 381,
+            "date": "2024-02-10"
+        },
+        {
+            "count": 914,
+            "date": "2024-01-31"
+        },
+        {
+            "count": 1071,
+            "date": "2024-01-29"
+        },
+        {
+            "count": 402,
+            "date": "2024-01-28"
+        },
+        {
+            "count": 408,
+            "date": "2024-02-04"
+        },
+        {
+            "count": 966,
+            "date": "2024-02-05"
+        },
+        {
+            "count": 901,
+            "date": "2024-01-15"
+        },
+        {
+            "count": 866,
+            "date": "2024-01-24"
+        },
+        {
+            "count": 936,
+            "date": "2024-01-16"
+        },
+        {
+            "count": 836,
+            "date": "2024-02-07"
+        },
+        {
+            "count": 1096,
+            "date": "2024-01-22"
+        },
+        {
+            "count": 636,
+            "date": "2024-02-09"
+        },
+        {
+            "count": 438,
+            "date": "2024-02-03"
+        }
+    ],
+    "info": {
+        "dataVersion": "1721588457",
+        "requestId": "52863f95-fe58-427e-8010-b11ffa5600ce",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-07-22T16:17:18.523742468",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}