@genspectrum/dashboard-components 0.11.3 → 0.11.5

package/dist/style.css

@@ -482,7 +482,7 @@ input[type="range"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -1154,6 +1154,7 @@ html {
   display: grid;
   width: 100%;
   overflow: hidden;
+  direction: ltr;
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
@@ -3154,9 +3155,6 @@ input.tab:checked + .tab-content,
 .cursor-pointer {
   cursor: pointer;
 }
-.resize {
-  resize: both;
-}
 .list-inside {
   list-style-position: inside;
 }
@@ -3193,8 +3191,8 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
-.overflow-auto {
-  overflow: auto;
+.overflow-scroll {
+  overflow: scroll;
 }
 .overflow-x-auto {
   overflow-x: auto;

package/dist/util.d.ts

@@ -787,10 +787,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -798,7 +795,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -806,11 +803,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -818,7 +811,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -826,10 +819,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -837,7 +827,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -845,10 +835,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -856,7 +843,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -864,10 +851,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -875,7 +859,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -883,7 +867,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -891,7 +875,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -899,7 +883,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -907,7 +891,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -915,7 +899,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -923,7 +907,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -931,7 +915,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -939,7 +923,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -947,7 +931,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -955,7 +943,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -963,7 +951,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -971,7 +962,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -979,7 +970,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -987,7 +981,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -995,7 +989,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1003,7 +1000,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1011,7 +1008,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1019,7 +1019,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.11.3",
+    "version": "0.11.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -109,7 +109,7 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.20.1",
+        "@storybook/test-runner": "^0.21.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",

package/src/preact/aggregatedData/aggregate.tsx

@@ -53,7 +53,7 @@ export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps
             field: initialSortField,
             direction: initialSortDirection,
         });
-    }, [lapisFilter, fields, lapis]);
+    }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
 
     if (isLoading) {
         return <LoadingDisplay />;

package/src/preact/components/tabs.tsx

@@ -1,5 +1,5 @@
-import { Fragment, type FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
 type Tab = {
@@ -14,43 +14,24 @@ interface ComponentTabsProps {
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
-    const [heightOfTabs, setHeightOfTabs] = useState('3rem');
-    const tabRef = useRef<HTMLDivElement>(null);
-
-    const updateHeightOfTabs = () => {
-        if (tabRef.current) {
-            const heightOfTabs = tabRef.current.getBoundingClientRect().height;
-            setHeightOfTabs(`${heightOfTabs}px`);
-        }
-    };
-
-    useEffect(() => {
-        updateHeightOfTabs();
-
-        window.addEventListener('resize', updateHeightOfTabs);
-        return () => {
-            window.removeEventListener('resize', updateHeightOfTabs);
-        };
-    }, []);
 
     const tabElements = (
         <div className='flex flex-row'>
             {tabs.map((tab) => {
                 return (
-                    <Fragment key={tab.title}>
-                        <button
-                            className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
-                                activeTab === tab.title
-                                    ? 'border-b-2 border-gray-400'
-                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
-                            }`}
-                            onClick={() => {
-                                setActiveTab(tab.title);
-                            }}
-                        >
-                            {tab.title}
-                        </button>
-                    </Fragment>
+                    <button
+                        key={tab.title}
+                        className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
+                            activeTab === tab.title
+                                ? 'border-b-2 border-gray-400'
+                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                        }`}
+                        onClick={() => {
+                            setActiveTab(tab.title);
+                        }}
+                    >
+                        {tab.title}
+                    </button>
                 );
             })}
         </div>
@@ -59,17 +40,16 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div className='h-full w-full'>
-            <div ref={tabRef} className='flex flex-row justify-between flex-wrap'>
+        <div className='h-full w-full flex flex-col'>
+            <div className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
-                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
-                style={{ height: `calc(100% - ${heightOfTabs})` }}
+                className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
             >
                 {tabs.map((tab) => (
-                    <div className='h-full overflow-auto' key={tab.title} hidden={activeTab !== tab.title}>
+                    <div className='h-full' key={tab.title} hidden={activeTab !== tab.title}>
                         {tab.content}
                     </div>
                 ))}

package/src/preact/map/__mockData__/aggregatedGermany.json

@@ -45,7 +45,7 @@
             "division": "Saxony-Anhalt"
         },
         {
-            "count": 109800,
+            "count": 109799,
             "division": null
         },
         {
@@ -56,6 +56,10 @@
             "count": 50650,
             "division": "Baden-Wuerttemberg"
         },
+        {
+            "count": 1,
+            "division": "Baden-Württemberg"
+        },
         {
             "count": 50102,
             "division": "North Rhine Westphalia"

package/src/preact/map/{useGeoJsonMap.tsx → loadMapSource.tsx}

@@ -4,7 +4,6 @@ import type { GeometryCollection, Topology } from 'topojson-specification';
 import z from 'zod';
 
 import { UserFacingError } from '../components/error-display';
-import { useQuery } from '../useQuery';
 
 export const mapSourceSchema = z.object({
     type: z.literal('topojson'),
@@ -13,33 +12,17 @@ export const mapSourceSchema = z.object({
 });
 export type MapSource = z.infer<typeof mapSourceSchema>;
 
-export function useGeoJsonMap(mapSource: MapSource) {
-    const {
-        data: geojsonData,
-        error,
-        isLoading,
-    } = useQuery(async () => {
-        switch (mapSource.type) {
-            case 'topojson':
-                return await loadTopojsonMap(mapSource);
-        }
-    }, [mapSource]);
-
-    if (isLoading) {
-        return { isLoading };
-    }
-
-    if (error) {
-        throw error;
-    }
-
-    return { geojsonData, isLoading: false as const };
-}
-
 export type GeoJsonFeatureProperties = {
     name: string;
 };
 
+export async function loadMapSource(mapSource: MapSource) {
+    switch (mapSource.type) {
+        case 'topojson':
+            return await loadTopojsonMap(mapSource);
+    }
+}
+
 async function loadTopojsonMap(
     mapSource: MapSource,
 ): Promise<FeatureCollection<GeometryObject, GeoJsonFeatureProperties>> {

package/src/preact/map/sequences-by-location-map.tsx

@@ -1,24 +1,19 @@
-import type { Feature, FeatureCollection, GeometryObject } from 'geojson';
+import type { Feature, Geometry, GeometryObject } from 'geojson';
 import Leaflet, { type Layer, type LayerGroup } from 'leaflet';
 import type { FunctionComponent } from 'preact';
-import { useEffect, useMemo, useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
-import { type GeoJsonFeatureProperties, type MapSource, useGeoJsonMap } from './useGeoJsonMap';
-import { type AggregateData } from '../../query/queryAggregateData';
+import type { EnhancedGeoJsonFeatureProperties } from '../../query/computeMapLocationData';
 import { InfoHeadline1, InfoParagraph } from '../components/info';
-import { LoadingDisplay } from '../components/loading-display';
 import { Modal, useModalRef } from '../components/modal';
 import { formatProportion } from '../shared/table/formatProportion';
 
-type FeatureData = { proportion: number; count: number };
-
-type EnhancedGeoJsonFeatureProperties = GeoJsonFeatureProperties & {
-    data: FeatureData | null;
-};
-
 type SequencesByLocationMapProps = {
-    mapSource: MapSource;
-    locationData: AggregateData;
+    locations: Feature<Geometry, EnhancedGeoJsonFeatureProperties>[];
+    totalCount: number;
+    countOfMatchedLocationData: number;
+    nullCount: number;
+    unmatchedLocations: string[];
     enableMapNavigation: boolean;
     lapisLocationField: string;
     zoom: number;
@@ -28,25 +23,11 @@ type SequencesByLocationMapProps = {
 };
 
 export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapProps> = ({
-    mapSource,
-    ...otherProps
-}) => {
-    const { isLoading: isLoadingMap, geojsonData } = useGeoJsonMap(mapSource);
-
-    if (isLoadingMap) {
-        return <LoadingDisplay />;
-    }
-
-    return <SequencesByLocationMapInner geojsonData={geojsonData} {...otherProps} />;
-};
-
-type SequencesByLocationMapInnerProps = Omit<SequencesByLocationMapProps, 'mapSource'> & {
-    geojsonData: FeatureCollection<GeometryObject, GeoJsonFeatureProperties>;
-};
-
-export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationMapInnerProps> = ({
-    geojsonData,
-    locationData,
+    locations,
+    totalCount,
+    countOfMatchedLocationData,
+    nullCount,
+    unmatchedLocations,
     enableMapNavigation,
     lapisLocationField,
     zoom,
@@ -56,22 +37,6 @@ export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationM
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
-    const { locations, totalCount, countOfMatchedLocationData, unmatchedLocations } = useMemo(() => {
-        const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
-        const { locations, unmatchedLocations } = matchLocationDataAndGeoJsonFeatures(
-            geojsonData,
-            countAndProportionByCountry,
-            lapisLocationField,
-        );
-
-        const totalCount = locationData.map((value) => value.count).reduce((sum, b) => sum + b, 0);
-        const countOfMatchedLocationData = locations
-            .map((location) => location.properties.data?.count ?? 0)
-            .reduce((sum, b) => sum + b, 0);
-
-        return { locations, totalCount, countOfMatchedLocationData, unmatchedLocations };
-    }, [geojsonData, locationData, lapisLocationField]);
-
     useEffect(() => {
         if (!ref.current) {
             return;
@@ -103,8 +68,6 @@ export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationM
         };
     }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
 
-    const nullCount = locationData.find((row) => row[lapisLocationField] === null)?.count ?? 0;
-
     return (
         <div className='h-full'>
             <div ref={ref} className='h-full' />
@@ -172,55 +135,6 @@ const DataMatchInformation: FunctionComponent<DataMatchInformationProps> = ({
     );
 };
 
-function buildLookupByLocationField(locationData: AggregateData, lapisLocationField: string) {
-    return new Map<string, FeatureData>(
-        locationData
-            .filter((row) => typeof row[lapisLocationField] === 'string')
-            .map((row) => [row[lapisLocationField] as string, row]),
-    );
-}
-
-function matchLocationDataAndGeoJsonFeatures(
-    geojsonData: FeatureCollection<GeometryObject, GeoJsonFeatureProperties>,
-    countAndProportionByCountry: Map<string, FeatureData>,
-    lapisLocationField: string,
-) {
-    const matchedLocations: string[] = [];
-
-    const locations: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties>[] = geojsonData.features.map(
-        (feature) => {
-            const name = feature?.properties?.name;
-            if (typeof name !== 'string') {
-                throw new Error(
-                    `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`,
-                );
-            }
-
-            const data = countAndProportionByCountry.get(name) ?? null;
-            if (data !== null) {
-                matchedLocations.push(name);
-            }
-            return {
-                ...feature,
-                properties: {
-                    ...feature.properties,
-                    data,
-                },
-            };
-        },
-    );
-
-    const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
-        (name) => !matchedLocations.includes(name),
-    );
-    if (unmatchedLocations.length > 0) {
-        const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(', ')}`;
-        console.warn(unmatchedLocationsWarning); // eslint-disable-line no-console -- We should give some feedback about unmatched location data.
-    }
-
-    return { locations, unmatchedLocations };
-}
-
 function getColor(value: number | undefined): string {
     if (value === undefined) {
         return '#DDDDDD';