Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 187 insertions, 179 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index b73898f59..d7687e03e 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,3 +1,5 @@
+/* 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';
@@ -5,31 +7,30 @@ import * as turf from '@turf/turf';
 import { IconButton, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
 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';
 import { CirclePicker, ColorResult } from 'react-color';
 import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl';
 import { MarkerEvent } from 'react-map-gl/dist/esm/types';
-import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
-import { DocCast, NumCast, StrCast } from '../../../../fields/Types';
+import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types';
+import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
-import { DocUtils, Docs } from '../../../documents/Documents';
-import { DocumentManager } from '../../../util/DocumentManager';
+import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
-import { LinkManager } from '../../../util/LinkManager';
-import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
-import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { PinDocView, PinProps } from '../../PinFuncs';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm';
 import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../DocumentView';
-import { FieldView, FieldViewProps, FocusViewOptions } from '../FieldView';
-import { FormattedTextBox } from '../formattedText/FormattedTextBox';
-import { PinProps, PresBox } from '../trails';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { FocusViewOptions } from '../FocusViewOptions';
 import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
 import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility';
 import { MapAnchorMenu } from './MapAnchorMenu';
@@ -53,9 +54,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;
@@ -65,7 +63,7 @@ type PopupInfo = {
 };
 
 @observer
-export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(MapBox, fieldKey);
     }
@@ -111,13 +109,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
     };
 
     // this list contains pushpins and configs
-    @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); } //prettier-ignore
-    @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } //prettier-ignore
-    @computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } //prettier-ignore
-    @computed get allRoutes() { return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); } //prettier-ignore
-    @computed get SidebarShown() { return this.layoutDoc._layout_showSidebar ? true : false; } //prettier-ignore
-    @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } //prettier-ignore
-    @computed get SidebarKey() {  return this.fieldKey + '_sidebar'; } //prettier-ignore
+    @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); } // prettier-ignore
+    @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore
+    @computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } // prettier-ignore
+    @computed get allRoutes() { return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); } // prettier-ignore
+    @computed get SidebarShown() { return !!this.layoutDoc._layout_showSidebar; } // prettier-ignore
+    @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore
+    @computed get SidebarKey() {  return this.fieldKey + '_sidebar'; } // prettier-ignore
     @computed get sidebarColor() {
         return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
@@ -235,14 +233,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
 
     /**
      * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
-     * @param doc
+     * @param docs
      * @param sidebarKey
      * @returns
      */
-    sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
+    sidebarAddDocument = (docs: Doc | Doc[], sidebarKey?: string) => {
         if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
-        const docs = doc instanceof Doc ? [doc] : doc;
-        docs.forEach(doc => {
+        toList(docs).forEach(doc => {
             let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this._selectedPinOrRoute;
             if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) {
                 existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map));
@@ -250,7 +247,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
             if (existingPin) {
                 setTimeout(() => {
                     // we use a timeout in case this is called from the sidebar which may have just added a link that hasn't made its way into th elink manager yet
-                    if (!LinkManager.Instance.getAllRelatedLinks(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) {
+                    if (!Doc.Links(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) {
                         const anchor = this.getAnchor(true, undefined, existingPin);
                         anchor && DocUtils.MakeLink(anchor, doc, { link_relationship: 'link to map location' });
                         doc.latitude = existingPin?.latitude;
@@ -258,14 +255,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                     }
                 });
             }
-        }); //add to annotation list
+        }); // add to annotation list
 
-        return this.addDocument(doc, sidebarKey); // add to sidebar list
+        return this.addDocument(docs, sidebarKey); // add to sidebar list
     };
 
     removeMapDocument = (doc: Doc | Doc[], annotationKey?: string) => {
-        const docs = doc instanceof Doc ? [doc] : doc;
-        this.allAnnotations.filter(anno => docs.includes(DocCast(anno.mapPin))).forEach(anno => (anno.mapPin = undefined));
+        this.allAnnotations
+            .filter(anno => toList(doc).includes(DocCast(anno.mapPin)))
+            .forEach(anno => {
+                anno.mapPin = undefined;
+            });
         return this.removeDocument(doc, annotationKey, undefined);
     };
 
@@ -285,7 +285,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         setupMoveUpEvents(
             this,
             e,
-            (e, down, delta) =>
+            (moveEv, down, delta) =>
                 runInAction(() => {
                     const localDelta = this._props
                         .ScreenToLocalTransform()
@@ -325,7 +325,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={this.sidebarBtnDown}>
-                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon="comment-alt" size="sm" />
             </div>
         );
     }
@@ -354,16 +354,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
 
         const targetCreator = (annotationOn: Doc | undefined) => {
             const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
-            FormattedTextBox.SetSelectOnLoad(target);
+            Doc.SetSelectOnLoad(target);
             return target;
         };
         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;
                     }
                 },
             });
@@ -389,7 +389,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
     sidebarDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true);
     };
-    sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
+    sidebarMove = (e: PointerEvent) => {
         const bounds = this._ref.current!.getBoundingClientRect();
         this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%';
         this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%';
@@ -401,8 +401,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
     panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth();
     panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1);
     scrollXf = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
-    transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter];
-    opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter];
+    transparentFilter = () => [...this._props.childFilters(), ClientUtils.TransparentBackgroundFilter];
+    opaqueFilter = () => [...this._props.childFilters(), ClientUtils.OpaqueBackgroundFilter];
     infoWidth = () => this._props.PanelWidth() / 5;
     infoHeight = () => this._props.PanelHeight() / 5;
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
@@ -435,7 +435,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 => {
+            DocumentView.addViewRenderedCb(doc, dv => res(dv));
+        });
     };
 
     /*
@@ -458,7 +460,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         if (anchor) {
             if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
             addAsAnnotation && this.addDocument(anchor);
-            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.Document);
+            PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.Document);
             return anchor;
         }
         return this.Document;
@@ -526,6 +528,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);
@@ -580,6 +583,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');
 
@@ -652,9 +656,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: string = features[0].properties['routeTitle'];
-                const routeDoc: Doc | undefined = this.allRoutes.find(routeDoc => routeDoc.title === routeTitle);
+                const { routeTitle } = features[0].properties;
+                const routeDoc: Doc | undefined = this.allRoutes.find(rtDoc => rtDoc.title === routeTitle);
                 this.deselectPinOrRoute(); // TODO: Also deselect route if selected
                 if (routeDoc) {
                     this._selectedPinOrRoute = routeDoc;
@@ -698,7 +701,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
      */
     handleMapDblClick = async (e: MapLayerMouseEvent) => {
         e.preventDefault();
-        const lngLat: LngLat = e.lngLat;
+        const { lngLat } = e;
         const longitude: number = lngLat.lng;
         const latitude: number = lngLat.lat;
 
@@ -834,6 +837,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         if (!this._isAnimating) {
             return this.mapboxMapViewState;
         }
+        return undefined;
     }
 
     @action
@@ -917,69 +921,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);
-                }
-
-                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,
-                });
-
-                // get the bounds of the linestring, use fitBounds() to animate to a final view
-                const bbox3d = turf.bbox(this.path);
+                    // 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]];
+                    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
@@ -1008,53 +1016,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 = () => {
@@ -1066,7 +1070,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;
         }
@@ -1123,7 +1127,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) => {
@@ -1132,7 +1138,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);
@@ -1146,7 +1154,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
@@ -1154,15 +1161,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>
                     )}
@@ -1210,22 +1214,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>
@@ -1252,7 +1255,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) && (
@@ -1316,16 +1319,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}/>
@@ -1336,12 +1338,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}
@@ -1356,3 +1359,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implem
         );
     }
 }
+
+Docs.Prototypes.TemplateMap.set(DocumentType.MAP, {
+    layout: { view: MapBox, dataField: 'data' },
+    options: { acl: '', map: '', _height: 600, _width: 800, _layout_reflowHorizontal: true, _layout_reflowVertical: true, _layout_nativeDimEditable: true, systemIcon: 'BsFillPinMapFill' },
+});