@genspectrum/dashboard-components 1.14.2 → 1.16.0

package/src/web-components/gs-app.ts

@@ -2,7 +2,6 @@ import { provide } from '@lit/context';
 import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import z from 'zod';
 
 import { lapisContext } from './lapis-context';
@@ -129,9 +128,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-app': AppComponent;
         }
     }
 }

package/src/web-components/input/gs-date-range-filter.tsx

@@ -1,7 +1,6 @@
 import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
@@ -144,9 +143,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DateRangeFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-lineage-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type LineageFilterChangedEvent,
@@ -146,9 +145,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': LineageFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-location-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
@@ -110,9 +109,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': LocationFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-mutation-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
@@ -67,7 +66,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
      * All values provided must be valid mutations or insertions.
      * Invalid values will be ignored.
      */
-    @property({type: Object})
+    @property({ type: Object })
     initialValue:
         {
             nucleotideMutations: string[];
@@ -125,9 +124,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': MutationFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-number-range-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type NumberRangeFilterChangedEvent,
@@ -140,9 +139,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': NumberRangeFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-text-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
 import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
@@ -100,9 +99,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': TextFilterComponent;
         }
     }
 }

package/src/web-components/mutation-annotations-context.ts

@@ -14,7 +14,9 @@ const mutationAnnotationSchema = z.object({
 });
 export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;
 
-export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema);
+export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema, {
+    errorMap: () => ({ message: 'invalid mutation annotations' }),
+});
 export type MutationAnnotations = z.infer<typeof mutationAnnotationsSchema>;
 
 export const mutationAnnotationsContext = createContext<MutationAnnotations>(Symbol('mutation-annotations-context'));

package/src/web-components/visualization/gs-aggregate.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -131,9 +130,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': AggregateComponent;
         }
     }
 }

package/src/web-components/visualization/gs-genome-data-viewer.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { GenomeDataViewer } from '../../preact/genomeViewer/genome-data-viewer';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -53,9 +52,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': GenomeDataViewerComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -137,9 +136,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': MutationComparisonComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -179,9 +178,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': MutationsOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutations.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -88,11 +87,11 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     baselineLapisFilter:
         (Record<string, string | string[] | number | null | boolean | undefined> & {
-              nucleotideMutations?: string[];
-              aminoAcidMutations?: string[];
-              nucleotideInsertions?: string[];
-              aminoAcidInsertions?: string[];
-          })
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        })
         | undefined = undefined;
 
     /**
@@ -169,9 +168,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': MutationsComponent;
         }
     }
 }

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -126,9 +125,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -193,9 +192,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': PrevalenceOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-queries-over-time.stories.ts

@@ -15,11 +15,13 @@ const codeExample = String.raw`
     queries='[
         {
             "displayLabel": "S:F456L (single mutation)",
+            "description": "This mutation is associated with increased transmissibility.",
             "countQuery": "S:456L",
             "coverageQuery": "!S:456N"
         },
         {
             "displayLabel": "R346T + F456L (combination)",
+            "description": "Common mutation combination found in the JN.1 lineage.",
             "countQuery": "S:346T & S:456L",
             "coverageQuery": "!S:346N & !S:456N"
         }
@@ -59,11 +61,13 @@ const meta: Meta<Required<QueriesOverTimeProps>> = {
         queries: [
             {
                 displayLabel: 'S:F456L (single mutation)',
+                description: 'This mutation is associated with increased transmissibility.',
                 countQuery: 'S:456L',
                 coverageQuery: '!S:456N',
             },
             {
                 displayLabel: 'R346T + F456L (combination)',
+                description: 'Common mutation combination found in the JN.1 lineage.',
                 countQuery: 'S:346T & S:456L',
                 coverageQuery: '!S:346N & !S:456N',
             },

package/src/web-components/visualization/gs-queries-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { QueriesOverTime } from '../../preact/queriesOverTime/queries-over-time';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
@@ -42,7 +41,8 @@ export class QueriesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
      * Required.
      *
      * Array of queries to display. Each query has:
-     * - displayLabel: string - The name to show in the grid row label
+     * - displayLabel: string - The name to show in the grid row label. Must be unique.
+     * - description: string (optional) - Optional description shown in tooltip
      * - countQuery: string - Query string to count matches
      * - coverageQuery: string - Query string to determine coverage/denominator
      *
@@ -51,6 +51,7 @@ export class QueriesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Array })
     queries: {
         displayLabel: string;
+        description?: string;
         countQuery: string;
         coverageQuery: string;
     }[] = [];
@@ -146,9 +147,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': QueriesOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     RelativeGrowthAdvantage,
@@ -147,9 +146,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
         }
     }
 }

package/src/web-components/visualization/gs-sequences-by-location.tsx

@@ -1,7 +1,6 @@
 import leafletStyle from 'leaflet/dist/leaflet.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import leafletStyleModifications from '../../preact/sequencesByLocation/leafletStyleModifications.css?inline';
 import {
@@ -219,9 +218,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': SequencesByLocationComponent;
         }
     }
 }

package/src/web-components/visualization/gs-statistics.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Statistics, type StatisticsProps } from '../../preact/statistic/statistics';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -76,9 +75,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': StatisticsComponent;
         }
     }
 }

package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -112,9 +111,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
         }
     }
 }