@genspectrum/dashboard-components 0.19.3 → 0.19.4

package/dist/util.d.ts

@@ -157,6 +157,8 @@ export declare const gsEventNames: {
     readonly lineageFilterChanged: "gs-lineage-filter-changed";
     readonly locationChanged: "gs-location-changed";
     readonly textFilterChanged: "gs-text-filter-changed";
+    readonly numberRangeFilterChanged: "gs-number-range-filter-changed";
+    readonly numberRangeValueChanged: "gs-number-range-value-changed";
 };
 
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
@@ -960,7 +962,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -968,7 +970,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,7 +978,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -984,7 +986,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,7 +994,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1000,7 +1002,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1008,7 +1010,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1016,7 +1018,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1040,7 +1042,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1048,7 +1050,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,7 +1058,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1064,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1072,7 +1078,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1080,7 +1089,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1088,11 +1097,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1100,7 +1105,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1108,10 +1113,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1119,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1127,10 +1132,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1138,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1165,10 +1170,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1176,7 +1182,23 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-b0iuroUL.js";
+import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-GgkxoF3X.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.19.3",
+    "version": "0.19.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/min-max-range-slider.tsx

@@ -6,6 +6,7 @@ export interface MinMaxPercentSliderProps {
     max: number;
     setMin: (min: number) => void;
     setMax: (max: number) => void;
+    onDrop?: () => void;
     rangeMin?: number;
     rangeMax?: number;
     step?: number;
@@ -16,6 +17,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
     max,
     setMin,
     setMax,
+    onDrop,
     rangeMin = 0,
     rangeMax = 100,
     step = 0.1,
@@ -55,14 +57,16 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
         }
     };
 
+    const lowerBoundary = getGradientBoundary(min, rangeMin, rangeMax);
+    const upperBoundary = getGradientBoundary(max, rangeMin, rangeMax);
     const background = `
         linear-gradient(
             to right,
             ${sliderColor} 0%,
-            ${sliderColor} ${min}%,
-            ${rangeColor} ${min}%,
-            ${rangeColor} ${max}%,
-            ${sliderColor} ${max}%,
+            ${sliderColor} ${lowerBoundary}%,
+            ${rangeColor} ${lowerBoundary}%,
+            ${rangeColor} ${upperBoundary}%,
+            ${sliderColor} ${upperBoundary}%,
             ${sliderColor} 100%)
     `;
 
@@ -73,6 +77,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 type='range'
                 value={min}
                 onInput={onMinChange}
+                onMouseUp={() => onDrop?.()}
+                onTouchEnd={() => onDrop?.()}
                 min={`${rangeMin}`}
                 max={`${rangeMax}`}
                 step={step}
@@ -86,8 +92,17 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 max={`${rangeMax}`}
                 step={step}
                 onInput={onMaxChange}
+                onMouseUp={() => onDrop?.()}
+                onTouchEnd={() => onDrop?.()}
                 style={{ background, zIndex: zIndexTo }}
             />
         </div>
     );
 };
+
+/**
+ * This is a linear function that returns 0 for x = lowerBound and 100 for x = upperBound.
+ */
+function getGradientBoundary(x: number, lowerBound: number, upperBound: number) {
+    return ((x - lowerBound) / (upperBound - lowerBound)) * 100;
+}

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -256,7 +256,10 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
 
         await step('Clearing the value from within the component is still possible', async () => {
             await waitFor(async () => {
-                await userEvent.click(canvas.getByRole('button', { name: '×' }));
+                await expect(canvas.getByRole('button', { name: '×' })).toBeVisible();
+            });
+            await userEvent.click(canvas.getByRole('button', { name: '×' }));
+            await waitFor(async () => {
                 await expectOptionSelected(canvasElement, placeholder);
             });
             await waitFor(async () => {

package/src/preact/genomeViewer/loadGff3.spec.ts

@@ -10,7 +10,7 @@ const SplicedGeneData = `
 ##species https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=641809
 NC_026431.1	RefSeq	region	1	982	.	+	.	ID=NC_026431.1:1..982;Dbxref=taxon:641809;Name=7;collection-date=09-Apr-2009;country=USA: California state;gbkey=Src;genome=genomic;mol_type=viral cRNA;nat-host=Homo sapiens%3B gender M%3B age 54;segment=7;serotype=H1N1;strain=A/California/07/2009
 NC_026431.1	RefSeq	CDS	1	26	.	+	0	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
-NC_026431.1	RefSeq	CDS	715	982	.	+	1	Name=M2;gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
+NC_026431.1	RefSeq	CDS	715	982	.	+	1	Name="M2";gene=M2;gbkey=CDS;locus_tag=UJ99_s7gp1;protein_id=YP_009118622.1;product=matrix protein 2;ID=cds-YP_009118622.1;Dbxref=GenBank:YP_009118622.1,GeneID:23308108
 NC_026431.1	RefSeq	CDS	1	759	.	+	0	Name=M1;gene=M1;gbkey=CDS;locus_tag=UJ99_s7gp2;protein_id=YP_009118623.1;product=matrix protein 1;ID=cds-YP_009118623.1;Dbxref=GenBank:YP_009118623.1,GeneID:23308107
 NC_026431.1	RefSeq	CDS	760	790	.	+	0	Name=fakeGene;gene=fakeGene;gbkey=CDS;locus_tag=UJ99_s7fake;protein_id=YP_009118624.1;product=None;ID=cds-YP_009118624.1;Dbxref=GenBank:YP_009118624.1,GeneID:23308109
 `;

package/src/preact/genomeViewer/loadGff3.ts

@@ -60,6 +60,10 @@ function getAttributes(attributes: string): Map<string, string> {
     return attrMap;
 }
 
+function removeQuotes(input: string) {
+    return input.replace(/^['"](.*)['"]$/, '$1');
+}
+
 function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMap {
     for (const line of lines) {
         if (line.startsWith('#') || line.trim() === '') {
@@ -73,7 +77,7 @@ function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMa
 
         const [, , type, startStr, endStr, , , , attributes] = fields;
 
-        if (type.toLowerCase() !== genome_type.toLowerCase()) {
+        if (removeQuotes(type.toLowerCase()) !== genome_type.toLowerCase()) {
             continue;
         }
 
@@ -85,16 +89,18 @@ function getCDSMap(lines: string[], genome_type: string, geneMap: CDSMap): CDSMa
         }
 
         const attrPairs = getAttributes(attributes);
-        const label = attrPairs.get('Name') || attrPairs.get('gene') || attrPairs.get('gene_name');
-        if (!label) {
+        const labelAttribute = attrPairs.get('Name') || attrPairs.get('gene') || attrPairs.get('gene_name');
+        if (!labelAttribute) {
             throw new UserFacingError(
                 'Invalid gff3 source',
                 `No label found for feature: "${line}", must contain label in Name, gene, or gene_name attribute`,
             );
         }
-        const id = attrPairs.get('ID') || label;
-        if (attrPairs.get('Parent')) {
-            const parent = attrPairs.get('Parent');
+        const label = removeQuotes(labelAttribute);
+        const id = removeQuotes(attrPairs.get('ID') || labelAttribute);
+        const parentAttribute = attrPairs.get('Parent');
+        if (parentAttribute) {
+            const parent = removeQuotes(parentAttribute);
             if (parent && parent in geneMap) {
                 delete geneMap[parent];
             }

package/src/preact/numberRangeFilter/NumberRangeFilterChangedEvent.ts

@@ -0,0 +1,31 @@
+import z from 'zod';
+
+import { gsEventNames } from '../../utils/gsEventNames';
+
+type LapisNumberFilter = Record<string, number | undefined>;
+
+export const numberRangeSchema = z.object({
+    min: z.number().optional(),
+    max: z.number().optional(),
+});
+export type NumberRange = z.infer<typeof numberRangeSchema>;
+
+export class NumberRangeValueChangedEvent extends CustomEvent<NumberRange> {
+    constructor(detail: NumberRange) {
+        super(gsEventNames.numberRangeValueChanged, {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}
+
+export class NumberRangeFilterChangedEvent extends CustomEvent<LapisNumberFilter> {
+    constructor(detail: LapisNumberFilter) {
+        super(gsEventNames.numberRangeFilterChanged, {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}