@genspectrum/dashboard-components 0.11.1 → 0.11.3

package/dist/style.css

@@ -2957,6 +2957,9 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.bottom-0 {
+  bottom: 0px;
+}
 .bottom-full {
   bottom: 100%;
 }
@@ -2993,6 +2996,9 @@ input.tab:checked + .tab-content,
 .z-10 {
   z-index: 10;
 }
+.z-\[1001\] {
+  z-index: 1001;
+}
 .float-right {
   float: right;
 }
@@ -3199,6 +3205,9 @@ input.tab:checked + .tab-content,
 .break-words {
   overflow-wrap: break-word;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -3272,6 +3281,10 @@ input.tab:checked + .tab-content,
 .p-4 {
   padding: 1rem;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -3288,10 +3301,6 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }

package/dist/util.d.ts

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

package/package.json

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

package/src/preact/components/error-display.tsx

@@ -2,6 +2,8 @@ import { type FunctionComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 import { type ZodError } from 'zod';
 
+import { InfoHeadline1, InfoParagraph } from './info';
+import { Modal, useModalRef } from './modal';
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
 
 export const GS_ERROR_EVENT_TYPE = 'gs-error';
@@ -46,7 +48,7 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);
-    const ref = useRef<HTMLDialogElement>(null);
+    const modalRef = useModalRef();
 
     useEffect(() => {
         containerRef.current?.dispatchEvent(new ErrorEvent(error));
@@ -66,23 +68,16 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                     {details !== undefined && (
                         <>
                             {' '}
-                            <button className='underline hover:text-gray-400' onClick={() => ref.current?.showModal()}>
+                            <button
+                                className='underline hover:text-gray-400'
+                                onClick={() => modalRef.current?.showModal()}
+                            >
                                 Show details.
                             </button>
-                            <dialog ref={ref} class='modal'>
-                                <div class='modal-box'>
-                                    <form method='dialog'>
-                                        <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>
-                                            ✕
-                                        </button>
-                                    </form>
-                                    <h1 class='text-lg'>{details.headline}</h1>
-                                    <div class='py-4'>{details.message}</div>
-                                </div>
-                                <form method='dialog' class='modal-backdrop'>
-                                    <button>close</button>
-                                </form>
-                            </dialog>
+                            <Modal modalRef={modalRef}>
+                                <InfoHeadline1>{details.headline}</InfoHeadline1>
+                                <InfoParagraph>{details.message}</InfoParagraph>
+                            </Modal>
                         </>
                     )}
                 </div>

package/src/preact/components/info.tsx

@@ -1,11 +1,12 @@
 import { type FunctionComponent } from 'preact';
-import { useRef } from 'preact/hooks';
+
+import { Modal, useModalRef } from './modal';
 
 const Info: FunctionComponent = ({ children }) => {
-    const dialogRef = useRef<HTMLDialogElement>(null);
+    const modalRef = useModalRef();
 
     const toggleHelp = () => {
-        dialogRef.current?.showModal();
+        modalRef.current?.showModal();
     };
 
     return (
@@ -13,22 +14,7 @@ const Info: FunctionComponent = ({ children }) => {
             <button type='button' className='btn btn-xs' onClick={toggleHelp}>
                 ?
             </button>
-            <dialog ref={dialogRef} className={'modal modal-bottom sm:modal-middle'}>
-                <div className='modal-box sm:max-w-5xl'>
-                    <form method='dialog'>
-                        <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
-                    </form>
-                    <div className={'flex flex-col'}>{children}</div>
-                    <div className='modal-action'>
-                        <form method='dialog'>
-                            <button className={'float-right underline text-sm hover:text-blue-700 mr-2'}>Close</button>
-                        </form>
-                    </div>
-                </div>
-                <form method='dialog' className='modal-backdrop'>
-                    <button>Helper to close when clicked outside</button>
-                </form>
-            </dialog>
+            <Modal modalRef={modalRef}>{children}</Modal>
         </div>
     );
 };

package/src/preact/components/modal.stories.tsx

@@ -0,0 +1,44 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+
+import { Modal, type ModalProps, useModalRef } from './modal';
+
+const meta: Meta<ModalProps> = {
+    title: 'Component/Modal',
+    component: Modal,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithButtonThatOpensTheModal: FunctionComponent = () => {
+    const modalRef = useModalRef();
+
+    return (
+        <div>
+            <button className='btn' onClick={() => modalRef.current?.showModal()}>
+                Open modal
+            </button>
+            <Modal modalRef={modalRef}>
+                <h1>Modal content</h1>
+            </Modal>
+        </div>
+    );
+};
+
+export const ModalStory: StoryObj<ModalProps> = {
+    render: () => {
+        return <WrapperWithButtonThatOpensTheModal />;
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Open the modal', async () => {
+            const button = canvas.getByText('Open modal');
+            button.click();
+
+            await waitFor(() => expect(canvas.getByText('Modal content')).toBeVisible());
+        });
+    },
+};

package/src/preact/components/modal.tsx

@@ -0,0 +1,31 @@
+import { type FunctionComponent, type Ref } from 'preact';
+import { useRef } from 'preact/hooks';
+
+export type ModalProps = {
+    modalRef: Ref<HTMLDialogElement>;
+};
+
+export function useModalRef() {
+    return useRef<HTMLDialogElement>(null);
+}
+
+export const Modal: FunctionComponent<ModalProps> = ({ children, modalRef }) => {
+    return (
+        <dialog ref={modalRef} className={'modal modal-bottom sm:modal-middle'}>
+            <div className='modal-box sm:max-w-5xl'>
+                <form method='dialog'>
+                    <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
+                </form>
+                <div className={'flex flex-col'}>{children}</div>
+                <div className='modal-action'>
+                    <form method='dialog'>
+                        <button className={'float-right underline text-sm hover:text-blue-700 mr-2'}>Close</button>
+                    </form>
+                </div>
+            </div>
+            <form method='dialog' className='modal-backdrop'>
+                <button>Helper to close when clicked outside</button>
+            </form>
+        </dialog>
+    );
+};

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

@@ -1,11 +1,13 @@
 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 { useEffect, useMemo, useRef } from 'preact/hooks';
 
 import { type GeoJsonFeatureProperties, type MapSource, useGeoJsonMap } from './useGeoJsonMap';
 import { type AggregateData } from '../../query/queryAggregateData';
+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 };
@@ -22,6 +24,7 @@ type SequencesByLocationMapProps = {
     zoom: number;
     offsetX: number;
     offsetY: number;
+    hasTableView: boolean;
 };
 
 export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapProps> = ({
@@ -49,21 +52,31 @@ export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationM
     zoom,
     offsetX,
     offsetY,
+    hasTableView,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (!ref.current || geojsonData === undefined || locationData === undefined) {
-            return;
-        }
-
+    const { locations, totalCount, countOfMatchedLocationData, unmatchedLocations } = useMemo(() => {
         const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
-        const locations = matchLocationDataAndGeoJsonFeatures(
+        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;
+        }
+
         const leafletMap = Leaflet.map(ref.current, {
             scrollWheelZoom: enableMapNavigation,
             zoomControl: enableMapNavigation,
@@ -78,7 +91,7 @@ export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationM
             style: (feature: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties> | undefined) => ({
                 fillColor: getColor(feature?.properties.data?.proportion),
                 fillOpacity: 1,
-                color: 'grey',
+                color: '#666666',
                 weight: 1,
             }),
         })
@@ -88,9 +101,75 @@ export const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationM
         return () => {
             leafletMap.remove();
         };
-    }, [ref, locationData, geojsonData, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
+    }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
 
-    return <div ref={ref} className='h-full' />;
+    const nullCount = locationData.find((row) => row[lapisLocationField] === null)?.count ?? 0;
+
+    return (
+        <div className='h-full'>
+            <div ref={ref} className='h-full' />
+            <div className='relative'>
+                <DataMatchInformation
+                    totalCount={totalCount}
+                    countOfMatchedLocationData={countOfMatchedLocationData}
+                    unmatchedLocations={unmatchedLocations}
+                    nullCount={nullCount}
+                    hasTableView={hasTableView}
+                />
+            </div>
+        </div>
+    );
+};
+
+type DataMatchInformationProps = {
+    totalCount: number;
+    countOfMatchedLocationData: number;
+    unmatchedLocations: string[];
+    nullCount: number;
+    hasTableView: boolean;
+};
+
+const DataMatchInformation: FunctionComponent<DataMatchInformationProps> = ({
+    totalCount,
+    countOfMatchedLocationData,
+    unmatchedLocations,
+    nullCount,
+    hasTableView,
+}) => {
+    const modalRef = useModalRef();
+
+    const proportion = formatProportion(countOfMatchedLocationData / totalCount);
+
+    return (
+        <>
+            <button
+                onClick={() => modalRef.current?.showModal()}
+                className='text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border cursor-pointer tooltip'
+                data-tip='Click for detailed information'
+            >
+                This map shows {proportion} of the data.
+            </button>
+            <Modal modalRef={modalRef}>
+                <InfoHeadline1>Sequences By Location - Map View</InfoHeadline1>
+                <InfoParagraph>
+                    The current filter has matched {totalCount.toLocaleString('en-us')} sequences. From these sequences,
+                    we were able to match {countOfMatchedLocationData.toLocaleString('en-us')} ({proportion}) on
+                    locations on the map.
+                </InfoParagraph>
+                <InfoParagraph>
+                    {unmatchedLocations.length > 0 && (
+                        <>
+                            The following locations from the data could not be matched on the map:{' '}
+                            {unmatchedLocations.map((it) => `"${it}"`).join(', ')}.{' '}
+                        </>
+                    )}
+                    {nullCount > 0 &&
+                        `${nullCount.toLocaleString('en-us')} matching sequences have no location information. `}
+                    {hasTableView && 'You can check the table view for more detailed information.'}
+                </InfoParagraph>
+            </Modal>
+        </>
+    );
 };
 
 function buildLookupByLocationField(locationData: AggregateData, lapisLocationField: string) {
@@ -139,12 +218,12 @@ function matchLocationDataAndGeoJsonFeatures(
         console.warn(unmatchedLocationsWarning); // eslint-disable-line no-console -- We should give some feedback about unmatched location data.
     }
 
-    return locations;
+    return { locations, unmatchedLocations };
 }
 
 function getColor(value: number | undefined): string {
     if (value === undefined) {
-        return '#888888';
+        return '#DDDDDD';
     }
 
     const thresholds = [

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

@@ -98,6 +98,7 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
                             zoom={originalComponentProps.zoom}
                             offsetX={originalComponentProps.offsetX}
                             offsetY={originalComponentProps.offsetY}
+                            hasTableView={originalComponentProps.views.includes(views.table)}
                         />
                     ),
                 };