Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 80 insertions, 71 deletions

diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
index 3eb051dbf..bfd40692b 100644
--- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
+++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
@@ -4,28 +4,28 @@ import { IReactionDisposer, ObservableMap, action, computed, makeObservable, obs
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { MapProvider, Map as MapboxMap } from 'react-map-gl';
-import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils';
+import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
 import { DocCss, Highlight } from '../../../../fields/DocSymbols';
-import { DocCast, NumCast, StrCast } from '../../../../fields/Types';
+import { Id } from '../../../../fields/FieldSymbols';
+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 { Transform } from '../../../util/Transform';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 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 { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { FocusViewOptions } from '../FocusViewOptions';
 import { MapAnchorMenu } from '../MapBox/MapAnchorMenu';
-import { FormattedTextBox } from '../formattedText/FormattedTextBox';
-import { PinProps, PresBox } from '../trails';
-import './MapBox.scss';
+import '../MapBox/MapBox.scss';
 
 /**
  * MapBox architecture:
@@ -41,7 +41,6 @@ import './MapBox.scss';
  */
 
 const mapboxApiKey = 'pk.eyJ1IjoiemF1bHRhdmFuZ2FyIiwiYSI6ImNsbnc2eHJpbTA1ZTUyam85aGx4Z2FhbGwifQ.2Kqw9mk-9wAAg9kmHmKzcg';
-const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing Maps api key here: https://www.bingmapsportal.com/  and then add it to the .env file in the Dash-Web root directory as: _CLIENT_BING_MAPS=<your apikey>
 
 /**
  * Consider integrating later: allows for drawing, circling, making shapes on map
@@ -87,7 +86,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN);
     }
     @computed get SidebarShown() {
-        return this.layoutDoc._layout_showSidebar ? true : false;
+        return !!this.layoutDoc._layout_showSidebar;
     }
     @computed get sidebarWidthPercent() {
         return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
@@ -118,9 +117,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
      * @param sidebarKey
      * @returns
      */
-    sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
+    sidebarAddDocument = (docsIn: Doc | Doc[], sidebarKey?: string) => {
         if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
-        const docs = doc instanceof Doc ? [doc] : doc;
+        const docs = toList(docsIn);
         docs.forEach(doc => {
             let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin;
             if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) {
@@ -129,7 +128,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
             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;
@@ -137,15 +136,19 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                     }
                 });
             }
-        }); //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));
-        return this.removeDocument(doc, annotationKey, undefined);
+    removeMapDocument = (docsIn: Doc | Doc[], annotationKey?: string) => {
+        const docs = toList(docsIn);
+        this.allAnnotations
+            .filter(anno => docs.includes(DocCast(anno.mapPin)))
+            .forEach(anno => {
+                anno.mapPin = undefined;
+            });
+        return this.removeDocument(docsIn, annotationKey, undefined);
     };
 
     /**
@@ -164,7 +167,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         setupMoveUpEvents(
             this,
             e,
-            (e, down, delta) =>
+            (moveEv, down, delta) =>
                 runInAction(() => {
                     const localDelta = this._props
                         .ScreenToLocalTransform()
@@ -204,7 +207,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                     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>
         );
     }
@@ -233,16 +236,16 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
 
         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;
                     }
                 },
             });
@@ -268,7 +271,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     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%';
@@ -276,7 +279,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         return false;
     };
 
-    setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func);
+    setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => {
+        this._setPreviewCursor = func;
+    };
 
     addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey);
 
@@ -285,8 +290,8 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     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;
@@ -306,11 +311,11 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     //        center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude),
     //     });
     //
-    bingGeocode = (map: any, query: string) => {
-        return new Promise<{ latitude: number; longitude: number }>((res, reject) => {
-            //If search manager is not defined, load the search module.
+    bingGeocode = (map: any, query: string) =>
+        new Promise<{ latitude: number; longitude: number }>((res, reject) => {
+            // If search manager is not defined, load the search module.
             if (!this._bingSearchManager) {
-                //Create an instance of the search manager and call the geocodeQuery function again.
+                // Create an instance of the search manager and call the geocodeQuery function again.
                 this.MicrosoftMaps.loadModule('Microsoft.Maps.Search', () => {
                     this._bingSearchManager = new this.MicrosoftMaps.Search.SearchManager(map.current);
                     res(this.bingGeocode(map, query));
@@ -319,11 +324,10 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                 this._bingSearchManager.geocode({
                     where: query,
                     callback: action((r: any) => res(r.results[0].location)),
-                    errorCallback: (e: any) => reject(),
+                    errorCallback: () => reject(),
                 });
             }
         });
-    };
 
     @observable
     bingSearchBarContents: any = this.Document.map; // For Bing Maps: The contents of the Bing search bar (string)
@@ -368,7 +372,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                 this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
             }
             const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude));
-            this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc));
+            this.MicrosoftMaps.Events.addHandler(newpin, 'click', () => this.pushpinClicked(temp as Doc));
             if (!this._unmounting) {
                 this._bingMap.current.entities.push(newpin);
             }
@@ -383,7 +387,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
             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));
+        });
     };
     /*
      * Pushpin onclick
@@ -418,7 +424,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
      * Map OnClick
      */
     @action
-    mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
+    mapOnClick = (/* e: { location: { latitude: any; longitude: any } } */) => {
         this._props.select(false);
         this.deselectPin();
     };
@@ -442,22 +448,23 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
      * Updates maptype
      */
     @action
-    updateMapType = () => (this.dataDoc.map_type = this._bingMap.current.getMapTypeId());
+    updateMapType = () => {
+        this.dataDoc.map_type = this._bingMap.current.getMapTypeId();
+    };
 
     /*
      * For Bing Maps
      * Called by search button's onClick
      * Finds the geocode of the searched contents and sets location to that location
-     **/
+     * */
     @action
-    bingSearch = () => {
-        return this.bingGeocode(this._bingMap, this.bingSearchBarContents).then(location => {
+    bingSearch = () =>
+        this.bingGeocode(this._bingMap, this.bingSearchBarContents).then(location => {
             this.dataDoc.latitude = location.latitude;
             this.dataDoc.longitude = location.longitude;
             this.dataDoc.map_zoom = this._bingMap.current.getZoom();
             this.dataDoc.map = this.bingSearchBarContents;
         });
-    };
 
     /*
      * Returns doc w/ relevant info
@@ -479,7 +486,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         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;
@@ -502,7 +509,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
 
         this._bingMap.current.entities.push(pushPin);
 
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', () => this.pushpinClicked(pin));
         // this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin));
         this.map_docToPinMap.set(pin, pushPin);
     };
@@ -591,13 +598,15 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
     };
 
     @action
-    searchbarOnEdit = (newText: string) => (this.bingSearchBarContents = newText);
+    searchbarOnEdit = (newText: string) => {
+        this.bingSearchBarContents = newText;
+    };
 
     recolorPin = (pin: Doc, color?: string) => {
         this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin));
         this.map_docToPinMap.delete(pin);
         const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), color ? { color } : {});
-        this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin));
+        this.MicrosoftMaps.Events.addHandler(newpin, 'click', () => this.pushpinClicked(pin));
         this._bingMap.current.entities.push(newpin);
         this.map_docToPinMap.set(pin, newpin);
     };
@@ -620,14 +629,16 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
 
         this._disposers.mapLocation = reaction(
             () => this.Document.map,
-            mapLoc => (this.bingSearchBarContents = mapLoc),
+            mapLoc => {
+                this.bingSearchBarContents = mapLoc;
+            },
             { fireImmediately: true }
         );
         this._disposers.highlight = reaction(
             () => this.allAnnotations.map(doc => doc[Highlight]),
             () => {
                 const allConfigPins = this.allAnnotations.map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })).filter(pair => pair.pushpin);
-                allConfigPins.forEach(({ doc, pushpin }) => {
+                allConfigPins.forEach(({ pushpin }) => {
                     if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) {
                         this.recolorPin(pushpin);
                         this.map_pinHighlighted.delete(pushpin);
@@ -668,23 +679,23 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
         setupMoveUpEvents(
             e,
             e,
-            e => {
+            moveEv => {
                 if (!dragClone) {
                     dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement;
                     dragClone.style.position = 'absolute';
                     dragClone.style.zIndex = '10000';
                     DragManager.Root().appendChild(dragClone);
                 }
-                dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
+                dragClone.style.transform = `translate(${moveEv.clientX - 15}px, ${moveEv.clientY - 15}px)`;
                 return false;
             },
-            e => {
+            upEv => {
                 if (!dragClone) return;
                 DragManager.Root().removeChild(dragClone);
-                let target = document.elementFromPoint(e.x, e.y);
+                let target = document.elementFromPoint(upEv.x, upEv.y);
                 while (target) {
                     if (target === this._ref.current) {
-                        const cpt = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY);
+                        const cpt = this.ScreenToLocalBoxXf().transformPoint(upEv.clientX, upEv.clientY);
                         const x = cpt[0] - (this._props.PanelWidth() - this.sidebarWidth()) / 2;
                         const y = cpt[1] - 32 /* height of search bar */ - this._props.PanelHeight() / 2;
                         const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y));
@@ -694,7 +705,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                     target = target.parentElement;
                 }
             },
-            e => {
+            () => {
                 const createPin = () => this.createPushpin(this.Document.latitude, this.Document.longitude, this.Document.map);
                 if (this.bingSearchBarContents) {
                     this.bingSearch().then(createPin);
@@ -720,12 +731,12 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                         MapBoxContainer._rerenderDelay = 0;
                     }
                     this._rerenderTimeout = undefined;
+                    // eslint-disable-next-line operator-assignment
                     this.Document[DocCss] = this.Document[DocCss] + 1;
                 }), MapBoxContainer._rerenderDelay);
             return null;
         }
 
-        const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
             <div className="mapBox" ref={this._ref}>
                 <div
@@ -735,15 +746,11 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
                     }}
                     style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
-                    <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
-                    {renderAnnotations(this.opaqueFilter)}
-                    {SnappingManager.IsDragging ? null : renderAnnotations()}
-
                     <div className="mapBox-searchbar">
                         <EditableText
                             // editing
                             setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)}
-                            onEnter={e => this.bingSearch()}
+                            onEnter={() => this.bingSearch()}
                             placeholder={this.bingSearchBarContents || 'enter city/zip/...'}
                             textAlign="center"
                         />
@@ -752,18 +759,19 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                                 <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF">
                                     <path
                                         fill="currentColor"
-                                        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
+                                        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
+                                    />
                                 </svg>
                             }
                             onClick={this.bingSearch}
                             type={Type.TERT}
                         />
                         <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}>
-                            <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} />
+                            <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size="lg" icon="bullseye" />} />
                         </div>
                     </div>
                     <MapProvider>
-                        <MapboxMap id="mabox-map" mapStyle={`mapbox://styles/mapbox/streets-v9`} mapboxAccessToken={mapboxApiKey} />
+                        <MapboxMap id="mabox-map" mapStyle="mapbox://styles/mapbox/streets-v9" mapboxAccessToken={mapboxApiKey} />
                     </MapProvider>
 
                     {/* 
@@ -780,9 +788,10 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                             ? null
                             : this.allAnnotations
                                   .filter(anno => !anno.layout_unrendered)
-                                  .map((pushpin, i) => (
+                                  .map(pushpin => (
                                       <DocumentView
-                                          key={i}
+                                          key={pushpin[Id]}
+                                          // eslint-disable-next-line react/jsx-props-no-spreading
                                           {...this._props}
                                           renderDepth={this._props.renderDepth + 1}
                                           Document={pushpin}
@@ -792,7 +801,6 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                                           NativeHeight={returnOne}
                                           onKey={undefined}
                                           onDoubleClickScript={undefined}
-                                          onBrowseClickScript={undefined}
                                           childFilters={returnEmptyFilter}
                                           childFiltersByRanges={returnEmptyFilter}
                                           searchFilterDocs={returnEmptyDoclist}
@@ -821,12 +829,13 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                 <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}