@genspectrum/dashboard-components 1.3.1 → 1.5.0

package/dist/util.d.ts

@@ -965,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -973,7 +973,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>;
         }
     }
 }
@@ -981,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -989,7 +989,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>;
         }
     }
 }
@@ -1013,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1021,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1029,7 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1037,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1053,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,11 +1077,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1089,7 +1088,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1113,10 +1112,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1124,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1132,10 +1132,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1143,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1151,10 +1151,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1162,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -74,6 +74,11 @@ const meta: Meta = {
                 type: 'object',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 
     args: {
@@ -84,6 +89,7 @@ const meta: Meta = {
         placeholderText: 'Enter a lineage',
         value: 'A.1',
         width: '100%',
+        hideCounts: false,
     },
 };
 
@@ -163,6 +169,24 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const WithHideCountsTrue: StoryObj<LineageFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        hideCounts: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas } = await prepare(canvasElement, step);
+
+        await step('visible without counts', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'B.1');
+            await expect(canvas.getByRole('option', { name: 'B.1' })).toBeVisible();
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -16,6 +16,7 @@ const lineageSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
     value: z.string(),
+    hideCounts: z.boolean().optional(),
 });
 const lineageFilterInnerPropsSchema = lineageSelectorPropsSchema.extend({
     lapisFilter: lapisFilterSchema,
@@ -46,6 +47,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     placeholderText,
     value,
     lapisFilter,
+    hideCounts,
 }) => {
     const lapisUrl = useLapisUrl();
 
@@ -62,7 +64,15 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
         throw error;
     }
 
-    return <LineageSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
+    return (
+        <LineageSelector
+            lapisField={lapisField}
+            value={value}
+            placeholderText={placeholderText}
+            data={data}
+            hideCounts={hideCounts}
+        />
+    );
 };
 
 const LineageSelector = ({
@@ -70,6 +80,7 @@ const LineageSelector = ({
     value,
     placeholderText,
     data,
+    hideCounts = false,
 }: LineageSelectorProps & {
     data: LineageItem[];
 }) => {
@@ -88,7 +99,7 @@ const LineageSelector = ({
             formatItemInList={(item: LineageItem) => (
                 <p>
                     <span>{item.lineage}</span>
-                    <span className='ml-2 text-gray-500'>({item.count})</span>
+                    {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
                 </p>
             )}
         />

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -44,6 +44,7 @@ const meta: Meta<LocationFilterProps> = {
         lapisFilter: {
             age: 18,
         },
+        hideCounts: false,
     },
     argTypes: {
         fields: {
@@ -66,6 +67,11 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'text',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
         lapisFilter: {
             control: {
                 type: 'object',
@@ -146,6 +152,24 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
     },
 };
 
+export const WithHideCountsTrue: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        hideCounts: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas } = await prepare(canvasElement, step);
+
+        await step('visible without counts', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'Adajan');
+            await expect(canvas.getByRole('option', { name: 'Adajan Asia / India / Gujarat / Adajan' })).toBeVisible();
+        });
+    },
+};
+
 const inputField = (canvas: ReturnType<typeof within>) => canvas.findByPlaceholderText('Enter a location');
 
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {

package/src/preact/locationFilter/location-filter.tsx

@@ -16,6 +16,7 @@ const locationSelectorPropsSchema = z.object({
     value: lapisLocationFilterSchema.optional(),
     placeholderText: z.string().optional(),
     fields: z.array(z.string()).min(1),
+    hideCounts: z.boolean().optional(),
 });
 const locationFilterInnerPropsSchema = locationSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const locationFilterPropsSchema = locationFilterInnerPropsSchema.extend({
@@ -39,7 +40,13 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
     );
 };
 
-export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({
+    value,
+    fields,
+    placeholderText,
+    lapisFilter,
+    hideCounts,
+}: LocationFilterInnerProps) => {
     const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
@@ -54,7 +61,15 @@ export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilte
         throw error;
     }
 
-    return <LocationSelector fields={fields} value={value} placeholderText={placeholderText} locationData={data} />;
+    return (
+        <LocationSelector
+            fields={fields}
+            value={value}
+            placeholderText={placeholderText}
+            locationData={data}
+            hideCounts={hideCounts}
+        />
+    );
 };
 
 type SelectItem = {
@@ -69,6 +84,7 @@ const LocationSelector = ({
     value,
     placeholderText,
     locationData,
+    hideCounts = false,
 }: LocationSelectorProps & {
     locationData: LocationEntry[];
 }) => {
@@ -96,7 +112,7 @@ const LocationSelector = ({
                 <>
                     <p>
                         <span>{item.label}</span>
-                        <span className='ml-2 text-gray-500'>({item.count})</span>
+                        {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
                     </p>
                     <span className='text-sm text-gray-500'>{item.description}</span>
                 </>