@genspectrum/dashboard-components 0.18.0 → 0.18.2

package/dist/util.d.ts

@@ -138,7 +138,7 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
 
 export declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
 
-declare const dateRangeValueSchema: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
+declare const dateRangeValueSchema: default_2.ZodNullable<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
     dateFrom: default_2.ZodOptional<default_2.ZodString>;
     dateTo: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
@@ -906,7 +906,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -914,7 +914,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -922,7 +922,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -930,7 +930,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -938,7 +938,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -946,7 +946,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1002,7 +1002,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1010,7 +1010,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,7 +1018,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1026,7 +1026,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1034,7 +1034,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1042,7 +1046,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1069,11 +1073,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1081,7 +1084,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1089,10 +1092,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1100,7 +1103,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1108,10 +1111,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1119,7 +1122,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1127,10 +1130,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1138,7 +1138,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

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

package/package.json

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

package/src/preact/components/color-scale-selector.tsx

@@ -54,7 +54,7 @@ export const ColorScaleSelector: FunctionComponent<ColorScaleSelectorProps> = ({
     );
 };
 
-export const getColorWithingScale = (value: number | undefined, colorScale: ColorScale) => {
+export const getColorWithinScale = (value: number | undefined, colorScale: ColorScale) => {
     if (value === undefined) {
         return 'lightgrey';
     }

package/src/preact/dateRangeFilter/computeInitialValues.spec.ts

@@ -18,8 +18,8 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
-    it('should return undefined for unedfined value', () => {
-        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
+    it('should return undefined for null value', () => {
+        const result = computeInitialValues(null, earliestDate, dateRangeOptions);
 
         expect(result).toBeUndefined();
     });

package/src/preact/dateRangeFilter/computeInitialValues.ts

@@ -3,7 +3,7 @@ import { getDatesForSelectorValue, getSelectableOptions } from './selectableOpti
 import { UserFacingError } from '../components/error-display';
 
 export function computeInitialValues(value: DateRangeValue, earliestDate: string, dateRangeOptions: DateRangeOption[]) {
-    if (value === undefined) {
+    if (value === null) {
         return undefined;
     }
 

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

@@ -56,7 +56,7 @@ const meta: Meta<DateRangeFilterProps> = {
     args: {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
-        value: undefined,
+        value: null,
         lapisDateField: 'aDateColumn',
         width: '100%',
         placeholder,
@@ -194,16 +194,14 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
-            const [value, setValue] = useState<DateRangeValue | undefined>('Last month');
+            const [value, setValue] = useState<DateRangeValue>('Last month');
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
                 ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
-                    const newValue = (event as CustomEvent).detail;
-                    setValue(newValue ?? undefined);
+                    setValue(event.detail);
                 });
             }, []);
-
             return (
                 <div ref={ref}>
                     <LapisUrlContextProvider value={LAPIS_URL}>

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

@@ -179,13 +179,18 @@ export const DateRangeFilterInner = ({
     };
 
     const fireOptionChangedEvent = (state: DateRangeFilterState) => {
-        const eventDetail =
-            state?.label === customOption
-                ? {
-                      dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
-                      dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
-                  }
-                : state?.label;
+        const eventDetail = (() => {
+            if (state === null) {
+                return null;
+            }
+            if (state.label === customOption) {
+                return {
+                    dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
+                    dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
+                };
+            }
+            return state.label;
+        })();
 
         divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
     };

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -30,7 +30,7 @@ export const dateRangeValueSchema = z
             dateTo: z.string().date().optional(),
         }),
     ])
-    .optional();
+    .nullable();
 
 export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 

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

@@ -326,7 +326,7 @@ const SelectedFilter = ({ handleRemoveValue, mutationFilter }: SelectedFilterPro
             }}
         >
             {mutationFilter.value.toString()}
-            <button className='ml-1' onClick={() => handleRemoveValue(mutationFilter)}>
+            <button className='ml-1 cursor-pointer' onClick={() => handleRemoveValue(mutationFilter)}>
                 ×
             </button>
         </span>