@genspectrum/dashboard-components 0.10.3 → 0.11.0

package/src/preact/map/leafletStyleModifications.css

@@ -0,0 +1,3 @@
+.leaflet-container {
+    background: transparent;
+}

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

@@ -0,0 +1,202 @@
+import type { Feature, FeatureCollection, GeometryObject } from 'geojson';
+import Leaflet, { type Layer, type LayerGroup } from 'leaflet';
+import type { FunctionComponent } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+
+import { type GeoJsonFeatureProperties, type MapSource, useGeoJsonMap } from './useGeoJsonMap';
+import { type AggregateData } from '../../query/queryAggregateData';
+import { LoadingDisplay } from '../components/loading-display';
+import { formatProportion } from '../shared/table/formatProportion';
+
+type FeatureData = { proportion: number; count: number };
+
+type EnhancedGeoJsonFeatureProperties = GeoJsonFeatureProperties & {
+    data: FeatureData | null;
+};
+
+type SequencesByLocationMapProps = {
+    mapSource: MapSource;
+    locationData: AggregateData;
+    enableMapNavigation: boolean;
+    lapisLocationField: string;
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+};
+
+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,
+    enableMapNavigation,
+    lapisLocationField,
+    zoom,
+    offsetX,
+    offsetY,
+}) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!ref.current || geojsonData === undefined || locationData === undefined) {
+            return;
+        }
+
+        const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
+        const locations = matchLocationDataAndGeoJsonFeatures(
+            geojsonData,
+            countAndProportionByCountry,
+            lapisLocationField,
+        );
+
+        const leafletMap = Leaflet.map(ref.current, {
+            scrollWheelZoom: enableMapNavigation,
+            zoomControl: enableMapNavigation,
+            keyboard: enableMapNavigation,
+            dragging: enableMapNavigation,
+            zoomSnap: 0,
+            zoom,
+            center: [offsetY, offsetX],
+        });
+
+        Leaflet.geoJson(locations, {
+            style: (feature: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties> | undefined) => ({
+                fillColor: getColor(feature?.properties.data?.proportion),
+                fillOpacity: 1,
+                color: 'grey',
+                weight: 1,
+            }),
+        })
+            .bindTooltip(createTooltip)
+            .addTo(leafletMap);
+
+        return () => {
+            leafletMap.remove();
+        };
+    }, [ref, locationData, geojsonData, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
+
+    return <div ref={ref} className='h-full' />;
+};
+
+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;
+}
+
+function getColor(value: number | undefined): string {
+    if (value === undefined) {
+        return '#888888';
+    }
+
+    const thresholds = [
+        { limit: 0.4, color: '#662506' },
+        { limit: 0.3, color: '#993404' },
+        { limit: 0.2, color: '#CC4C02' },
+        { limit: 0.1, color: '#EC7014' },
+        { limit: 0.05, color: '#FB9A29' },
+        { limit: 0.02, color: '#FEC44F' },
+        { limit: 0.01, color: '#FEE391' },
+        { limit: 0.005, color: '#FFF7BC' },
+        { limit: 0.002, color: '#FFFFE5' },
+    ];
+
+    for (const { limit, color } of thresholds) {
+        if (value > limit) {
+            return color;
+        }
+    }
+
+    return '#FFFFE5';
+}
+
+function createTooltip(layer: Layer) {
+    const feature = (layer as LayerGroup<EnhancedGeoJsonFeatureProperties>).feature;
+    if (feature === undefined || feature.type !== 'Feature') {
+        return '';
+    }
+    const properties = feature.properties;
+
+    const div = document.createElement('div');
+    div.appendChild(p({ innerText: properties.name, className: 'font-bold' }));
+    if (properties.data !== null) {
+        div.appendChild(
+            p({
+                innerText: `Count: ${properties.data.count.toLocaleString('en-us')}`,
+            }),
+        );
+        div.appendChild(
+            p({
+                innerText: `Proportion: ${formatProportion(properties.data.proportion)}`,
+            }),
+        );
+    } else {
+        div.appendChild(p({ innerText: 'No data' }));
+    }
+    return div;
+}
+
+function p({ innerText, className = '' }: { innerText: string; className?: string }) {
+    const headline = document.createElement('p');
+    headline.innerText = innerText;
+    headline.className = className;
+    return headline;
+}

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

@@ -0,0 +1,18 @@
+import { type FunctionComponent } from 'preact';
+
+import type { AggregateData } from '../../query/queryAggregateData';
+import { AggregateTable } from '../aggregatedData/aggregate-table';
+
+type SequencesByLocationTableProps = {
+    locationData: AggregateData;
+    lapisLocationField: string;
+    pageSize: boolean | number;
+};
+
+export const SequencesByLocationTable: FunctionComponent<SequencesByLocationTableProps> = ({
+    locationData,
+    lapisLocationField,
+    pageSize,
+}) => {
+    return <AggregateTable data={locationData} fields={[lapisLocationField]} pageSize={pageSize} />;
+};

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

@@ -0,0 +1,144 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import worldAtlas from './__mockData__/worldAtlas.json';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+import aggregatedWorld from './__mockData__/aggregatedWorld.json';
+import { SequencesByLocation, type SequencesByLocationProps } from './sequences-by-location';
+import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
+
+import 'leaflet/dist/leaflet.css';
+import './leafletStyleModifications.css';
+
+const meta: Meta<SequencesByLocationProps> = {
+    title: 'Visualization/SequencesByLocation',
+    component: SequencesByLocation,
+};
+
+export default meta;
+
+const worldMapUrl = 'https://mock.map.data/world.topo.json';
+
+const aggregatedWorldMatcher = {
+    matcher: {
+        name: 'aggregatedData',
+        url: AGGREGATED_ENDPOINT,
+        body: {
+            fields: ['country'],
+            dateFrom: '2022-01-01',
+            dateTo: '2022-04-01',
+        },
+    },
+    response: {
+        status: 200,
+        body: aggregatedWorld,
+    },
+};
+
+export const Default: StoryObj<SequencesByLocationProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <SequencesByLocation {...args} />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01' },
+        lapisLocationField: 'country',
+        mapSource: {
+            type: 'topojson',
+            url: worldMapUrl,
+            topologyObjectsKey: 'countries',
+        },
+        enableMapNavigation: false,
+        width: '1100px',
+        height: '800px',
+        views: ['map', 'table'],
+        zoom: 2,
+        offsetX: 0,
+        offsetY: 10,
+        pageSize: 10,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'worldMap',
+                        url: worldMapUrl,
+                    },
+                    response: {
+                        status: 200,
+                        body: worldAtlas,
+                    },
+                },
+                aggregatedWorldMatcher,
+            ],
+        },
+    },
+};
+
+export const InvalidTopoJsonTopology: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'worldMap',
+                        url: worldMapUrl,
+                    },
+                    response: {
+                        status: 200,
+                        body: { type: 'not a topology' },
+                    },
+                },
+                aggregatedWorldMatcher,
+            ],
+        },
+    },
+    play: playThatExpectsErrorMessage(
+        'Error - Invalid map source',
+        `does not look like a topojson Topology definition: missing 'type: "Topology"'`,
+    ),
+};
+
+export const InvalidTopoJsonObjects: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'worldMap',
+                        url: worldMapUrl,
+                    },
+                    response: {
+                        status: 200,
+                        body: { type: 'Topology', objects: 'invalid topology objects' },
+                    },
+                },
+                aggregatedWorldMatcher,
+            ],
+        },
+    },
+    play: playThatExpectsErrorMessage(
+        'Error - Invalid map source',
+        `does not have a GeometryCollection at key objects.countries`,
+    ),
+};
+
+export const InvalidProps: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapisLocationField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(
+                canvasElement,
+                '"lapisLocationField": String must contain at least 1 character(s)',
+            );
+        });
+    },
+};

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

@@ -0,0 +1,151 @@
+import type { FunctionComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+import z from 'zod';
+
+import { SequencesByLocationMap } from './sequences-by-location-map';
+import { SequencesByLocationTable } from './sequences-by-location-table';
+import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { Fullscreen } from '../components/fullscreen';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { ResizeContainer } from '../components/resize-container';
+import { useQuery } from '../useQuery';
+import { mapSourceSchema } from './useGeoJsonMap';
+import { lapisFilterSchema, views } from '../../types';
+import Tabs from '../components/tabs';
+
+export const sequencesByLocationViewSchema = z.union([z.literal(views.map), z.literal(views.table)]);
+export type SequencesByLocationMapView = z.infer<typeof sequencesByLocationViewSchema>;
+
+const sequencesByLocationPropsSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    lapisLocationField: z.string().min(1),
+    mapSource: mapSourceSchema.optional(),
+    enableMapNavigation: z.boolean(),
+    width: z.string(),
+    height: z.string(),
+    views: z.array(sequencesByLocationViewSchema),
+    zoom: z.number(),
+    offsetX: z.number(),
+    offsetY: z.number(),
+    pageSize: z.union([z.boolean(), z.number()]),
+});
+
+export type SequencesByLocationProps = z.infer<typeof sequencesByLocationPropsSchema>;
+
+export const SequencesByLocation: FunctionComponent<SequencesByLocationProps> = (componentProps) => {
+    const { width, height } = componentProps;
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} componentProps={componentProps} schema={sequencesByLocationPropsSchema}>
+            <ResizeContainer size={size}>
+                <SequencesByLocationMapInner {...componentProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> = (props) => {
+    const { lapisFilter, lapisLocationField } = props;
+
+    const lapis = useContext(LapisUrlContext);
+    const {
+        data,
+        error,
+        isLoading: isLoadingLapisData,
+    } = useQuery(
+        async () => queryAggregateData(lapisFilter, [lapisLocationField], lapis),
+        [lapisFilter, lapisLocationField, lapis],
+    );
+
+    if (isLoadingLapisData) {
+        return <LoadingDisplay />;
+    }
+
+    if (error) {
+        throw error;
+    }
+
+    return <SequencesByLocationMapTabs data={data} originalComponentProps={props} />;
+};
+
+type SequencesByLocationMapTabsProps = {
+    originalComponentProps: SequencesByLocationProps;
+    data: AggregateData;
+};
+
+const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsProps> = ({
+    originalComponentProps,
+    data,
+}) => {
+    const getTab = (view: SequencesByLocationMapView) => {
+        switch (view) {
+            case views.map:
+                if (originalComponentProps.mapSource === undefined) {
+                    throw new Error('mapSource is required when using the map view');
+                }
+                return {
+                    title: 'Map',
+                    content: (
+                        <SequencesByLocationMap
+                            locationData={data}
+                            mapSource={originalComponentProps.mapSource}
+                            enableMapNavigation={originalComponentProps.enableMapNavigation}
+                            lapisLocationField={originalComponentProps.lapisLocationField}
+                            zoom={originalComponentProps.zoom}
+                            offsetX={originalComponentProps.offsetX}
+                            offsetY={originalComponentProps.offsetY}
+                        />
+                    ),
+                };
+            case views.table:
+                return {
+                    title: 'Table',
+                    content: (
+                        <SequencesByLocationTable
+                            locationData={data}
+                            lapisLocationField={originalComponentProps.lapisLocationField}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
+                };
+        }
+    };
+
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
+
+    return <Tabs tabs={tabs} toolbar={<Toolbar originalComponentProps={originalComponentProps} />} />;
+};
+
+type ToolbarProps = {
+    originalComponentProps: SequencesByLocationProps;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({ originalComponentProps }) => {
+    return (
+        <div class='flex flex-row'>
+            <SequencesByLocationMapInfo originalComponentProps={originalComponentProps} />
+            <Fullscreen />
+        </div>
+    );
+};
+
+type SequencesByLocationMapInfoProps = {
+    originalComponentProps: SequencesByLocationProps;
+};
+
+const SequencesByLocationMapInfo: FunctionComponent<SequencesByLocationMapInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Prevalence by location</InfoHeadline1>
+            <InfoParagraph>
+                TODO: Add description https://github.com/GenSpectrum/dashboard-components/issues/598
+            </InfoParagraph>
+            <InfoComponentCode componentName='sequences-by-location' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

package/src/preact/map/useGeoJsonMap.tsx

@@ -0,0 +1,62 @@
+import type { FeatureCollection, GeometryObject } from 'geojson';
+import * as topojson from 'topojson-client';
+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'),
+    url: z.string().min(1),
+    topologyObjectsKey: z.string().min(1),
+});
+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;
+};
+
+async function loadTopojsonMap(
+    mapSource: MapSource,
+): Promise<FeatureCollection<GeometryObject, GeoJsonFeatureProperties>> {
+    const response = await fetch(mapSource.url);
+    const topology = (await response.json()) as Topology;
+    if (topology?.type !== 'Topology') {
+        throw new UserFacingError(
+            'Invalid map source',
+            `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`,
+        );
+    }
+    const object = topology?.objects[mapSource.topologyObjectsKey] as GeometryCollection<GeoJsonFeatureProperties>;
+    if (object?.type !== 'GeometryCollection') {
+        throw new UserFacingError(
+            'Invalid map source',
+            `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${JSON.stringify(topology)?.substring(0, 100)}'`,
+        );
+    }
+    return topojson.feature(topology, object);
+}

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -6,12 +6,7 @@ import { getMutationComparisonTableData } from './getMutationComparisonTableData
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import {
-    type MutationComparisonView,
-    mutationComparisonViewSchema,
-    namedLapisFilterSchema,
-    sequenceTypeSchema,
-} from '../../types';
+import { namedLapisFilterSchema, sequenceTypeSchema, views } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -27,6 +22,9 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
+export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
+export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema>;
+
 const mutationComparisonPropsSchema = z.object({
     width: z.string(),
     height: z.string(),
@@ -51,7 +49,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = (c
     );
 };
 
-export const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
     const { lapisFilters, sequenceType } = componentProps;
     const lapis = useContext(LapisUrlContext);
 

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

@@ -5,20 +5,14 @@ import z from 'zod';
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation, type ParsedMutationFilter } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import { type MutationsFilter, mutationsFilterSchema } from '../../types';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
-const selectedMutationFilterStringsSchema = z.object({
-    nucleotideMutations: z.array(z.string()),
-    aminoAcidMutations: z.array(z.string()),
-    nucleotideInsertions: z.array(z.string()),
-    aminoAcidInsertions: z.array(z.string()),
-});
-export type SelectedMutationFilterStrings = z.infer<typeof selectedMutationFilterStringsSchema>;
 const mutationFilterInnerPropsSchema = z.object({
-    initialValue: z.union([selectedMutationFilterStringsSchema.optional(), z.array(z.string()), z.undefined()]),
+    initialValue: z.union([mutationsFilterSchema.optional(), z.array(z.string()), z.undefined()]),
 });
 
 const mutationFilterPropsSchema = mutationFilterInnerPropsSchema.extend({
@@ -73,7 +67,7 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
         const detail = mapToMutationFilterStrings(selectedFilters);
 
         filterRef.current?.dispatchEvent(
-            new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-changed', {
+            new CustomEvent<MutationsFilter>('gs-mutation-filter-changed', {
                 detail,
                 bubbles: true,
                 composed: true,
@@ -105,10 +99,7 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
     );
 };
 
-function getInitialState(
-    initialValue: SelectedMutationFilterStrings | string[] | undefined,
-    referenceGenome: ReferenceGenome,
-) {
+function getInitialState(initialValue: MutationsFilter | string[] | undefined, referenceGenome: ReferenceGenome) {
     if (initialValue === undefined) {
         return {
             nucleotideMutations: [],

package/src/preact/mutations/mutations.tsx

@@ -30,13 +30,13 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-const viewSchema = z.union([z.literal(views.table), z.literal(views.grid), z.literal(views.insertions)]);
-export type View = z.infer<typeof viewSchema>;
+const mutationsViewSchema = z.union([z.literal(views.table), z.literal(views.grid), z.literal(views.insertions)]);
+export type MutationsView = z.infer<typeof mutationsViewSchema>;
 
 const mutationsPropsSchema = z.object({
     lapisFilter: lapisFilterSchema,
     sequenceType: sequenceTypeSchema,
-    views: viewSchema.array(),
+    views: mutationsViewSchema.array(),
     pageSize: z.union([z.boolean(), z.number()]),
     width: z.string(),
     height: z.string(),
@@ -95,7 +95,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, or
 
     const filteredData = filterMutationsData(mutationsData, displayedSegments, displayedMutationTypes);
 
-    const getTab = (view: View) => {
+    const getTab = (view: MutationsView) => {
         switch (view) {
             case 'table':
                 return {