@genspectrum/dashboard-components 0.12.1 → 0.13.1

package/dist/style.css

@@ -3199,6 +3199,9 @@ input.tab:checked + .tab-content,
 .grid {
   display: grid;
 }
+.contents {
+  display: contents;
+}
 .hidden {
   display: none;
 }

package/dist/util.d.ts

@@ -160,7 +160,17 @@ declare const lapisFilterSchema: default_2.ZodIntersection<default_2.ZodRecord<d
     aminoAcidInsertions?: string[] | undefined;
 }>>;
 
-declare type LapisLocationFilter = Record<string, string | null | undefined>;
+declare type LapisLineageFilter = Record<string, string | undefined>;
+
+declare type LapisLocationFilter = default_2.infer<typeof lapisLocationFilterSchema>;
+
+declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined]>>;
+
+declare type LapisTextFilter = Record<string, string | undefined>;
+
+export declare class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter);
+}
 
 export declare class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter);
@@ -772,6 +782,10 @@ export declare type TemporalGranularity = default_2.infer<typeof temporalGranula
 
 declare const temporalGranularitySchema: default_2.ZodUnion<[default_2.ZodLiteral<"day">, default_2.ZodLiteral<"week">, default_2.ZodLiteral<"month">, default_2.ZodLiteral<"year">]>;
 
+export declare class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+    constructor(detail: LapisTextFilter);
+}
+
 export declare const views: {
     readonly table: "table";
     readonly venn: "venn";
@@ -822,6 +836,22 @@ declare global {
 }
 
 
+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>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -888,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -896,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -904,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -912,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -920,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -928,7 +958,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>;
         }
     }
 }
@@ -936,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -944,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1007,10 +1037,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1018,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1026,10 +1056,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1037,7 +1067,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,10 +1075,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1056,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,7 +1,9 @@
-import { D, L, d, v } from "./LocationChangedEvent-CORvQvXv.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-GedKNGFI.js";
 export {
   D as DateRangeOptionChangedEvent,
+  a as LineageFilterChangedEvent,
   L as LocationChangedEvent,
+  T as TextInputChangedEvent,
   d as dateRangeOptionPresets,
   v as views
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.12.1",
+    "version": "0.13.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -142,6 +142,6 @@
         "typescript": "~5.7.2",
         "vite": "^6.0.3",
         "vite-plugin-dts": "^4.0.3",
-        "vitest": "^2.0.1"
+        "vitest": "^3.0.2"
     }
 }

package/src/constants.ts

@@ -5,3 +5,9 @@ export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMuta
 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`;
+
+// WISE Wastewater
+// This is a special instance for storing Swiss wastewater data generated by the WISE consortium
+export const WISE_LAPIS_URL = 'https://api.wise-loculus.genspectrum.org/rsv';
+export const WISE_DETAILS_ENDPOINT = `${WISE_LAPIS_URL}/sample/details`;
+export const WISE_REFERENCE_GENOME_ENDPOINT = `${WISE_LAPIS_URL}/sample/referenceGenome`;

package/src/lapisApi/__mockData__/wiseReferenceGenome.json

@@ -0,0 +1,9 @@
+{
+    "nucleotideSequences": [
+        {
+            "name": "main",
+            "sequence": "NNN"
+        }
+    ],
+    "genes": []
+}

package/src/lapisApi/lapisApi.ts

@@ -1,6 +1,7 @@
 import { referenceGenomeResponse } from './ReferenceGenome';
 import {
     aggregatedResponse,
+    detailsResponse,
     insertionsResponse,
     type LapisBaseRequest,
     lapisError,
@@ -51,6 +52,21 @@ export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest,
     return aggregatedResponse.parse(await response.json());
 }
 
+export async function fetchDetails(lapisUrl: string, body: LapisBaseRequest, signal?: AbortSignal) {
+    const response = await fetch(detailsEndpoint(lapisUrl), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+        signal,
+    });
+
+    await handleErrors(response, 'aggregated data');
+
+    return detailsResponse.parse(await response.json());
+}
+
 export async function fetchInsertions(
     lapisUrl: string,
     body: LapisBaseRequest,
@@ -163,6 +179,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
 };
 
 export const aggregatedEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/aggregated`;
+export const detailsEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/details`;
 export const insertionsEndpoint = (lapisUrl: string, sequenceType: SequenceType) => {
     return sequenceType === 'amino acid'
         ? `${lapisUrl}/sample/aminoAcidInsertions`

package/src/lapisApi/lapisTypes.ts

@@ -41,10 +41,16 @@ const insertionCount = z.object({
 });
 export const insertionsResponse = makeLapisResponse(z.array(insertionCount));
 
-export const aggregatedItem = z.object({ count: z.number() }).catchall(z.union([z.string(), z.number(), z.null()]));
+const baseResponseValueSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
+
+export const aggregatedItem = z.object({ count: z.number() }).catchall(baseResponseValueSchema);
 export const aggregatedResponse = makeLapisResponse(z.array(aggregatedItem));
 export type AggregatedItem = z.infer<typeof aggregatedItem>;
 
+export const detailsItem = z.object({}).catchall(baseResponseValueSchema);
+export const detailsResponse = makeLapisResponse(z.array(detailsItem));
+export type DetailsItem = z.infer<typeof detailsItem>;
+
 function makeLapisResponse<T extends ZodTypeAny>(data: T) {
     return z.object({
         data,

package/src/operator/FetchDetailsOperator.ts

@@ -0,0 +1,28 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+import { fetchDetails } from '../lapisApi/lapisApi';
+import { type LapisFilter } from '../types';
+
+type Details<Fields extends string> = { [field in Fields]: string | number | boolean | null };
+
+export class FetchDetailsOperator<Fields extends string> implements Operator<Details<Fields>> {
+    constructor(
+        private filter: LapisFilter,
+        private fields: Fields[] = [],
+    ) {}
+
+    async evaluate(lapisUrl: string, signal?: AbortSignal): Promise<Dataset<Details<Fields>>> {
+        const detailsResponse = (
+            await fetchDetails(
+                lapisUrl,
+                {
+                    ...this.filter,
+                    fields: this.fields,
+                },
+                signal,
+            )
+        ).data;
+
+        return { content: detailsResponse as Details<Fields>[] };
+    }
+}

package/src/preact/components/downshift-combobox.tsx

@@ -0,0 +1,145 @@
+import { useCombobox } from 'downshift/preact';
+import { type ComponentChild } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+export function DownshiftCombobox<Item>({
+    allItems,
+    value,
+    filterItemsByInputValue,
+    createEvent,
+    itemToString,
+    placeholderText,
+    formatItemInList,
+}: {
+    allItems: Item[];
+    value?: Item;
+    filterItemsByInputValue: (item: Item, value: string) => boolean;
+    createEvent: (item: Item | null) => CustomEvent;
+    itemToString: (item: Item | undefined | null) => string;
+    placeholderText?: string;
+    formatItemInList: (item: Item) => ComponentChild;
+}) {
+    const initialSelectedItem = value ?? null;
+
+    const [items, setItems] = useState(
+        allItems.filter((item) => filterItemsByInputValue(item, itemToString(initialSelectedItem))),
+    );
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const shadowRoot = divRef.current?.shadowRoot ?? undefined;
+
+    const environment =
+        shadowRoot !== undefined
+            ? {
+                  addEventListener: window.addEventListener.bind(window),
+                  removeEventListener: window.removeEventListener.bind(window),
+                  document: shadowRoot.ownerDocument,
+                  Node: window.Node,
+              }
+            : undefined;
+
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        selectedItem,
+        inputValue,
+        selectItem,
+        setInputValue,
+        closeMenu,
+    } = useCombobox({
+        onInputValueChange({ inputValue }) {
+            setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue)));
+        },
+        onSelectedItemChange({ selectedItem }) {
+            if (selectedItem !== null) {
+                divRef.current?.dispatchEvent(createEvent(selectedItem));
+            }
+        },
+        items,
+        itemToString(item) {
+            return itemToString(item);
+        },
+        initialSelectedItem,
+        environment,
+    });
+
+    const onInputBlur = () => {
+        if (inputValue === '') {
+            divRef.current?.dispatchEvent(createEvent(null));
+            selectItem(null);
+        } else if (inputValue !== itemToString(selectedItem)) {
+            setInputValue(itemToString(selectedItem) || '');
+        }
+    };
+
+    const clearInput = () => {
+        divRef.current?.dispatchEvent(createEvent(null));
+        selectItem(null);
+    };
+
+    const buttonRef = useRef(null);
+
+    return (
+        <div ref={divRef} className={'relative w-full'}>
+            <div className='w-full flex flex-col gap-1'>
+                <div
+                    className='flex gap-0.5 input input-bordered min-w-32'
+                    onBlur={(event) => {
+                        if (event.relatedTarget != buttonRef.current) {
+                            closeMenu();
+                        }
+                    }}
+                >
+                    <input
+                        placeholder={placeholderText}
+                        className='w-full p-1.5'
+                        {...getInputProps()}
+                        onBlur={onInputBlur}
+                    />
+                    <button
+                        aria-label='clear selection'
+                        className={`px-2 ${inputValue === '' && 'hidden'}`}
+                        type='button'
+                        onClick={clearInput}
+                        tabIndex={-1}
+                    >
+                        ×
+                    </button>
+                    <button
+                        aria-label='toggle menu'
+                        className='px-2'
+                        type='button'
+                        {...getToggleButtonProps()}
+                        ref={buttonRef}
+                    >
+                        {isOpen ? <>↑</> : <>↓</>}
+                    </button>
+                </div>
+            </div>
+            {isOpen && (
+                <ul
+                    className='absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32'
+                    {...getMenuProps()}
+                >
+                    {items.length > 0 ? (
+                        items.map((item, index) => (
+                            <li
+                                className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
+                                key={itemToString(item)}
+                                {...getItemProps({ item, index })}
+                            >
+                                {formatItemInList(item)}
+                            </li>
+                        ))
+                    ) : (
+                        <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                    )}
+                </ul>
+            )}
+        </div>
+    );
+}

package/src/preact/components/tabs.tsx

@@ -16,7 +16,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
 
     const tabElements = (
-        <div className='flex flex-row'>
+        <div className='flex flex-row flex-wrap'>
             {tabs.map((tab) => {
                 return (
                     <button

package/src/preact/lineageFilter/LineageFilterChangedEvent.ts

@@ -0,0 +1,11 @@
+type LapisLineageFilter = Record<string, string | undefined>;
+
+export class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {
+    constructor(detail: LapisLineageFilter) {
+        super('gs-lineage-filter-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/lineageFilter/fetchLineageAutocompleteList.spec.ts

@@ -5,9 +5,23 @@ import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
 
 describe('fetchLineageAutocompleteList', () => {
     test('should add sublineage values', async () => {
-        lapisRequestMocks.aggregated({ fields: ['lineageField'] }, { data: [{ lineageField: 'B.1.1.7', count: 1 }] });
+        lapisRequestMocks.aggregated(
+            { fields: ['lineageField'], country: 'Germany' },
+            {
+                data: [
+                    {
+                        lineageField: 'B.1.1.7',
+                        count: 1,
+                    },
+                ],
+            },
+        );
 
-        const result = await fetchLineageAutocompleteList(DUMMY_LAPIS_URL, 'lineageField');
+        const result = await fetchLineageAutocompleteList({
+            lapis: DUMMY_LAPIS_URL,
+            field: 'lineageField',
+            lapisFilter: { country: 'Germany' },
+        });
 
         expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
     });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -1,7 +1,18 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import type { LapisFilter } from '../../types';
 
-export async function fetchLineageAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+export async function fetchLineageAutocompleteList({
+    lapis,
+    field,
+    signal,
+    lapisFilter,
+}: {
+    lapis: string;
+    field: string;
+    lapisFilter?: LapisFilter;
+    signal?: AbortSignal;
+}) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter ?? {}, [field]);
 
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;