more eslint

1 files changed, 148 insertions, 145 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 7009977d0..6495cf440 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,11 +1,14 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, FormControlLabel, TextField } from '@mui/material';
 import * as turf from '@turf/turf';
 import { IconButton, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson';
-import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
+import mapboxgl, { LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
 import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -21,7 +24,6 @@ import { DocUtils, Docs } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { LinkManager } from '../../../util/LinkManager';
-import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { PinProps, ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent';
 import { SidebarAnnos } from '../../SidebarAnnos';
@@ -54,8 +56,6 @@ import { MarkerIcons } from './MarkerIcons';
  */
 
 const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiemF1bHRhdmFuZ2FyIiwiYSI6ImNscHgwNDd1MDA3MXIydm92ODdianp6cGYifQ.WFAqbhwxtMHOWSPtu0l2uQ';
-const MAPBOX_FORWARD_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
-const MAPBOX_REVERSE_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
 
 type PopupInfo = {
     longitude: number;
@@ -287,7 +287,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         setupMoveUpEvents(
             this,
             e,
-            (e, down, delta) =>
+            (moveEv, down, delta) =>
                 runInAction(() => {
                     const localDelta = this._props
                         .ScreenToLocalTransform()
@@ -362,10 +362,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         const docView = this.DocumentView?.();
         docView &&
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
-                dragComplete: e => {
-                    if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                        e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.Document;
-                        e.annoDragData.linkSourceDoc.followLinkZoom = false;
+                dragComplete: dragEv => {
+                    if (!dragEv.aborted && dragEv.annoDragData && dragEv.annoDragData.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) {
+                        dragEv.annoDragData.linkSourceDoc.followLinkToggle = dragEv.annoDragData.dropDocument.annotationOn === this.Document;
+                        dragEv.annoDragData.linkSourceDoc.followLinkZoom = false;
                     }
                 },
             });
@@ -437,7 +437,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
             this.toggleSidebar();
             options.didMove = true;
         }
-        return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
+        return new Promise<Opt<DocumentView>>(res => {
+            DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv));
+        });
     };
 
     /*
@@ -528,6 +530,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu);
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     recolorPin = (pin: Doc, color?: string) => {
         // this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin));
         // this.map_docToPinMap.delete(pin);
@@ -582,6 +585,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
             MapAnchorMenu.Instance.fadeOut(true);
             return mapRoute;
         }
+        return undefined;
         // TODO: Display error that can't create route to same location
     }, 'createmaproute');
 
@@ -654,9 +658,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
 
             console.error(features);
             if (features && features.length > 0 && features[0].properties && features[0].geometry) {
-                const geometry = features[0].geometry as LineString;
                 const { routeTitle } = features[0].properties;
-                const routeDoc: Doc | undefined = this.allRoutes.find(routeDoc => routeDoc.title === routeTitle);
+                const routeDoc: Doc | undefined = this.allRoutes.find(rtDoc => rtDoc.title === routeTitle);
                 this.deselectPinOrRoute(); // TODO: Also deselect route if selected
                 if (routeDoc) {
                     this._selectedPinOrRoute = routeDoc;
@@ -700,7 +703,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
      */
     handleMapDblClick = async (e: MapLayerMouseEvent) => {
         e.preventDefault();
-        const { lngLat }: LngLat = e;
+        const { lngLat } = e;
         const longitude: number = lngLat.lng;
         const latitude: number = lngLat.lat;
 
@@ -836,6 +839,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         if (!this._isAnimating) {
             return this.mapboxMapViewState;
         }
+        return undefined;
     }
 
     @action
@@ -919,69 +923,73 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         this.path = path;
         this._isAnimating = true;
 
-        runInAction(() => {
-            return new Promise<void>(async resolve => {
-                const targetLngLat = {
-                    lng: this.selectedRouteCoordinates[0][0],
-                    lat: this.selectedRouteCoordinates[0][1],
-                };
-
-                const animationUtil = new AnimationUtility(targetLngLat, this.selectedRouteCoordinates, this._isStreetViewAnimation, this._animationSpeed, this._showTerrain, this._mapRef.current);
-                runInAction(() => this.setAnimationUtility(animationUtil));
+        runInAction(
+            () =>
+                // eslint-disable-next-line no-async-promise-executor
+                new Promise<void>(async resolve => {
+                    const targetLngLat = {
+                        lng: this.selectedRouteCoordinates[0][0],
+                        lat: this.selectedRouteCoordinates[0][1],
+                    };
+
+                    const animationUtil = new AnimationUtility(targetLngLat, this.selectedRouteCoordinates, this._isStreetViewAnimation, this._animationSpeed, this._showTerrain, this._mapRef.current);
+                    runInAction(() => this.setAnimationUtility(animationUtil));
+
+                    const updateFrameId = (newFrameId: number) => this.setFrameId(newFrameId);
+                    const updateAnimationPhase = (newAnimationPhase: number) => this.setAnimationPhase(newAnimationPhase);
+
+                    if (status !== AnimationStatus.RESUME) {
+                        const result = await animationUtil.flyInAndRotate({
+                            map: this._mapRef.current!,
+                            // targetLngLat,
+                            // duration 3000
+                            // startAltitude: 3000000,
+                            // endAltitude: this.isStreetViewAnimation ? 80 : 12000,
+                            // startBearing: 0,
+                            // endBearing: -20,
+                            // startPitch: 40,
+                            // endPitch: this.isStreetViewAnimation ? 80 : 50,
+                            updateFrameId,
+                        });
+
+                        console.log('Bearing: ', result.bearing);
+                        console.log('Altitude: ', result.altitude);
+                    }
 
-                const updateFrameId = (newFrameId: number) => this.setFrameId(newFrameId);
-                const updateAnimationPhase = (newAnimationPhase: number) => this.setAnimationPhase(newAnimationPhase);
+                    runInAction(() => {
+                        this._finishedFlyTo = true;
+                    });
 
-                if (status !== AnimationStatus.RESUME) {
-                    const result = await animationUtil.flyInAndRotate({
+                    // follow the path while slowly rotating the camera, passing in the camera bearing and altitude from the previous animation
+                    await animationUtil.animatePath({
                         map: this._mapRef.current!,
-                        // targetLngLat,
-                        // duration 3000
-                        // startAltitude: 3000000,
-                        // endAltitude: this.isStreetViewAnimation ? 80 : 12000,
-                        // startBearing: 0,
-                        // endBearing: -20,
-                        // startPitch: 40,
-                        // endPitch: this.isStreetViewAnimation ? 80 : 50,
+                        // path: this.path,
+                        // startBearing: -20,
+                        // startAltitude: this.isStreetViewAnimation ? 80 : 12000,
+                        // pitch: this.isStreetViewAnimation ? 80: 50,
+                        currentAnimationPhase: this._animationPhase,
+                        updateAnimationPhase,
                         updateFrameId,
                     });
 
-                    console.log('Bearing: ', result.bearing);
-                    console.log('Altitude: ', result.altitude);
-                }
+                    // get the bounds of the linestring, use fitBounds() to animate to a final view
+                    const bbox3d = turf.bbox(this.path);
 
-                runInAction(() => (this._finishedFlyTo = true));
-
-                // follow the path while slowly rotating the camera, passing in the camera bearing and altitude from the previous animation
-                await animationUtil.animatePath({
-                    map: this._mapRef.current!,
-                    // path: this.path,
-                    // startBearing: -20,
-                    // startAltitude: this.isStreetViewAnimation ? 80 : 12000,
-                    // pitch: this.isStreetViewAnimation ? 80: 50,
-                    currentAnimationPhase: this._animationPhase,
-                    updateAnimationPhase,
-                    updateFrameId,
-                });
+                    const bbox2d: LngLatBoundsLike = [bbox3d[0], bbox3d[1], bbox3d[2], bbox3d[3]];
 
-                // get the bounds of the linestring, use fitBounds() to animate to a final view
-                const bbox3d = turf.bbox(this.path);
-
-                const bbox2d: LngLatBoundsLike = [bbox3d[0], bbox3d[1], bbox3d[2], bbox3d[3]];
-
-                this._mapRef.current!.fitBounds(bbox2d, {
-                    duration: 3000,
-                    pitch: 30,
-                    bearing: 0,
-                    padding: 120,
-                });
+                    this._mapRef.current!.fitBounds(bbox2d, {
+                        duration: 3000,
+                        pitch: 30,
+                        bearing: 0,
+                        padding: 120,
+                    });
 
-                setTimeout(() => {
-                    this._isStreetViewAnimation = false;
-                    resolve();
-                }, 10000);
-            });
-        });
+                    setTimeout(() => {
+                        this._isStreetViewAnimation = false;
+                        resolve();
+                    }, 10000);
+                })
+        );
     };
 
     @action
@@ -1010,53 +1018,49 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         }
     };
 
-    getRouteAnimationOptions = (): JSX.Element => {
-        return (
-            <>
+    getRouteAnimationOptions = (): JSX.Element => (
+        <>
+            <IconButton
+                tooltip={this._isAnimating && this._finishedFlyTo ? 'Pause Animation' : 'Play Animation'}
+                onPointerDown={() => {
+                    if (this._isAnimating && this._finishedFlyTo) {
+                        this.pauseAnimation();
+                    } else if (this._animationPhase > 0) {
+                        this.playAnimation(AnimationStatus.RESUME); // Resume from the current phase
+                    } else {
+                        this.playAnimation(AnimationStatus.START); // Play from the beginning
+                    }
+                }}
+                icon={this._isAnimating && this._finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />}
+                color="black"
+                size={Size.MEDIUM}
+            />
+            {this._isAnimating && this._finishedFlyTo && (
                 <IconButton
-                    tooltip={this._isAnimating && this._finishedFlyTo ? 'Pause Animation' : 'Play Animation'}
+                    tooltip="Restart animation"
                     onPointerDown={() => {
-                        if (this._isAnimating && this._finishedFlyTo) {
-                            this.pauseAnimation();
-                        } else if (this._animationPhase > 0) {
-                            this.playAnimation(AnimationStatus.RESUME); // Resume from the current phase
-                        } else {
-                            this.playAnimation(AnimationStatus.START); // Play from the beginning
-                        }
+                        this.stopAnimation(false);
+                        this.playAnimation(AnimationStatus.START);
                     }}
-                    icon={this._isAnimating && this._finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />}
+                    icon={<FontAwesomeIcon icon={faRotate as IconLookup} />}
                     color="black"
                     size={Size.MEDIUM}
                 />
-                {this._isAnimating && this._finishedFlyTo && (
-                    <IconButton
-                        tooltip="Restart animation"
-                        onPointerDown={() => {
-                            this.stopAnimation(false);
-                            this.playAnimation(AnimationStatus.START);
-                        }}
-                        icon={<FontAwesomeIcon icon={faRotate as IconLookup} />}
-                        color="black"
-                        size={Size.MEDIUM}
-                    />
-                )}
-                <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup} />} color="black" size={Size.MEDIUM} />
-                <>
-                    <div className="animation-suboptions">
-                        <div>|</div>
-                        <FormControlLabel className="first-person-label" label="1st person animation:" labelPlacement="start" control={<Checkbox color="success" checked={this._isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />} />
-                        <div id="divider">|</div>
-                        <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
-                        <div id="divider">|</div>
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
-                            <div>Select Line Color: </div>
-                            <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} />
-                        </div>
-                    </div>
-                </>
-            </>
-        );
-    };
+            )}
+            <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup} />} color="black" size={Size.MEDIUM} />
+            <div className="animation-suboptions">
+                <div>|</div>
+                <FormControlLabel className="first-person-label" label="1st person animation:" labelPlacement="start" control={<Checkbox color="success" checked={this._isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />} />
+                <div id="divider">|</div>
+                <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
+                <div id="divider">|</div>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <div>Select Line Color: </div>
+                    <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} />
+                </div>
+            </div>
+        </>
+    );
 
     @action
     hideRoute = () => {
@@ -1068,7 +1072,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
 
     @action
     toggleSettings = () => {
-        if (!this._isAnimating && this._animationPhase == 0) {
+        if (!this._isAnimating && this._animationPhase === 0) {
             this._featuresFromGeocodeResults = [];
             this._settingsOpen = !this._settingsOpen;
         }
@@ -1125,7 +1129,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
     };
 
     @action
-    onMapZoom = (e: ViewStateChangeEvent) => (this.dataDoc.map_zoom = e.viewState.zoom);
+    onMapZoom = (e: ViewStateChangeEvent) => {
+        this.dataDoc.map_zoom = e.viewState.zoom;
+    };
 
     @action
     onMapMove = (e: ViewStateChangeEvent) => {
@@ -1134,7 +1140,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
     };
 
     @action
-    toggleShowTerrain = () => (this._showTerrain = !this._showTerrain);
+    toggleShowTerrain = () => {
+        this._showTerrain = !this._showTerrain;
+    };
 
     getMarkerIcon = (pinDoc: Doc): JSX.Element | null => {
         const markerType = StrCast(pinDoc.markerType);
@@ -1148,7 +1156,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         const scale = this._props.NativeDimScaling?.() || 1;
         const parscale = scale === 1 ? 1 : this.ScreenToLocalBoxXf().Scale ?? 1;
 
-        const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
             <div className="mapBox" ref={this._ref}>
                 <div
@@ -1156,15 +1163,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                     onWheel={e => e.stopPropagation()}
                     onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()}
                     style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
-                    <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
-                    {renderAnnotations(this.opaqueFilter)}
-                    {SnappingManager.IsDragging ? null : renderAnnotations()}
                     {!this._routeToAnimate && (
                         <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}>
                             <TextField ref={this._textRef} fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={(e: any) => this.handleSearchChange(e.target.value)} />
-                            <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} />
+                            <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
                             <div style={{ opacity: 0 }}>
-                                <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} />
+                                <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
                             </div>
                         </div>
                     )}
@@ -1212,22 +1216,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                     )}
                     {this._featuresFromGeocodeResults.length > 0 && (
                         <div className="mapbox-geocoding-search-results">
-                            <>
-                                <h4>Choose a location for your pin: </h4>
-                                {this._featuresFromGeocodeResults
-                                    .filter(feature => feature.place_name)
-                                    .map((feature, idx) => (
-                                        <div
-                                            key={idx}
-                                            className="search-result-container"
-                                            onClick={() => {
-                                                this.handleSearchChange('');
-                                                this.addMarkerForFeature(feature);
-                                            }}>
-                                            <div className="search-result-place-name">{feature.place_name}</div>
-                                        </div>
-                                    ))}
-                            </>
+                            <h4>Choose a location for your pin: </h4>
+                            {this._featuresFromGeocodeResults
+                                .filter(feature => feature.place_name)
+                                .map((feature, idx) => (
+                                    <div
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={idx}
+                                        className="search-result-container"
+                                        onClick={() => {
+                                            this.handleSearchChange('');
+                                            this.addMarkerForFeature(feature);
+                                        }}>
+                                        <div className="search-result-place-name">{feature.place_name}</div>
+                                    </div>
+                                ))}
                         </div>
                     )}
                     <MapProvider>
@@ -1254,7 +1257,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                             <Source id="temporary-route" type="geojson" data={this._temporaryRouteSource} />
                             <Source id="map-routes" type="geojson" data={this.allRoutesGeoJson} />
                             <Layer id="temporary-route-layer" type="line" source="temporary-route" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#36454F', 'line-width': 4, 'line-dasharray': [1, 1] }} />
-                            {!this._isAnimating && this._animationPhase == 0 && (
+                            {!this._isAnimating && this._animationPhase === 0 && (
                                 <Layer id="map-routes-layer" type="line" source="map-routes" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#FF0000', 'line-width': 4 }} />
                             )}
                             {this._routeToAnimate && (this._isAnimating || this._animationPhase > 0) && (
@@ -1318,16 +1321,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                                 </>
                             )}
 
-                            <>
-                                {!this._isAnimating &&
-                                    this._animationPhase == 0 &&
-                                    this.allPushpins // .filter(anno => !anno.layout_unrendered)
-                                        .map((pushpin, idx) => (
-                                            <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}>
-                                                {this.getMarkerIcon(pushpin)}
-                                            </Marker>
-                                        ))}
-                            </>
+                            {!this._isAnimating &&
+                                this._animationPhase === 0 &&
+                                this.allPushpins // .filter(anno => !anno.layout_unrendered)
+                                    .map((pushpin, idx) => (
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}>
+                                            {this.getMarkerIcon(pushpin)}
+                                        </Marker>
+                                    ))}
 
                             {/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => (
                                 <Marker key={idx} longitude={marker.longitude} latitude={marker.latitude}/>
@@ -1338,12 +1340,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                 <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
                         {...this._props}
                         fieldKey={this.fieldKey}
                         Document={this.Document}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
-                        usePanelWidth={true}
+                        usePanelWidth
                         showSidebar={this.SidebarShown}
                         nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}