@genspectrum/dashboard-components 0.6.4 → 0.6.6

package/dist/genspectrum-components.d.ts

@@ -501,11 +501,17 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
- * The grid will show at max 100 rows and 200 columns for browser performance reasons.
- * More data might make the browser unresponsive.
- * If the numbers are exceeded, an error message will be shown.
- * In both cases, the `lapisFilter` should be narrowed down to reduce the number of mutations or date ranges.
- * The number of date ranges can also be reduced by selecting a larger granularity (months instead of weeks).
+ * The grid limits the number of rows columns for browser performance reasons.
+ * 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.
+ * It is your responsibility to make sure that this does not happen.
+ * Depending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly
+ * (e.g. use months instead of days).
+ *
+ * The number of rows is limited to 100.
+ * If there are more, the component will only show 100 mutations and notify the user.
  */
 export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
@@ -963,14 +969,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 

package/dist/style.css

@@ -2767,6 +2767,9 @@ input.tab:checked + .tab-content,
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -2782,18 +2785,39 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.bottom-full {
+  bottom: 100%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\/2 {
+  left: 50%;
+}
+.left-full {
+  left: 100%;
+}
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.right-full {
+  right: 100%;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-2 {
   top: 0.5rem;
 }
+.top-full {
+  top: 100%;
+}
 .z-10 {
   z-index: 10;
 }
@@ -2822,18 +2846,30 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2\.5 {
   margin-left: 0.625rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -2892,6 +2928,14 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  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));
+}
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  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));
+}
 .resize {
   resize: both;
 }
@@ -2992,6 +3036,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3029,6 +3077,9 @@ input.tab:checked + .tab-content,
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -3151,8 +3202,8 @@ input.tab:checked + .tab-content,
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.peer:hover ~ .peer-hover\:block {
-  display: block;
+.peer:hover ~ .peer-hover\:visible {
+  visibility: visible;
 }.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.4",
+    "version": "0.6.6",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/constants.ts

@@ -2,5 +2,6 @@ export const LAPIS_URL = 'https://lapis.cov-spectrum.org/open/v2';
 
 export const AGGREGATED_ENDPOINT = `${LAPIS_URL}/sample/aggregated`;
 export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMutations`;
+export const AMINO_ACID_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/aminoAcidMutations`;
 export const NUCLEOTIDE_INSERTIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideInsertions`;
 export const REFERENCE_GENOME_ENDPOINT = `${LAPIS_URL}/sample/referenceGenome`;

package/src/preact/components/tooltip.stories.tsx

@@ -7,6 +7,15 @@ const meta: Meta<TooltipProps> = {
     title: 'Component/Tooltip',
     component: Tooltip,
     parameters: { fetchMock: {} },
+    argTypes: {
+        content: { control: 'text' },
+        position: {
+            control: {
+                type: 'radio',
+            },
+            options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'],
+        },
+    },
 };
 
 export default meta;
@@ -17,12 +26,13 @@ export const TooltipStory: StoryObj<TooltipProps> = {
     render: (args) => (
         <div class='flex justify-center px-4 py-16'>
             <Tooltip {...args}>
-                <div>Hover me</div>
+                <div className='bg-red-200'>Hover me</div>
             </Tooltip>
         </div>
     ),
     args: {
         content: tooltipContent,
+        position: 'bottom',
     },
 };
 
@@ -38,7 +48,7 @@ export const RendersStringContent: StoryObj<TooltipProps> = {
     },
 };
 
-export const RendersComponentConent: StoryObj<TooltipProps> = {
+export const RendersComponentContent: StoryObj<TooltipProps> = {
     ...TooltipStory,
     args: {
         content: <div>{tooltipContent}</div>,

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='peer'>{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/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."
+    }
+}