added tutorial tool, still need to integrate with metadatatool

1 files changed, 21 insertions, 24 deletions

diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 8079d96ea..fc5377ba4 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -1,7 +1,8 @@
+import { IconButton } from '@dash/components';
 import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
-import { IconButton } from '@dash/components';
+import { LngLatLike } from 'mapbox-gl';
 import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -14,12 +15,10 @@ import { CalendarManager } from '../../../util/CalendarManager';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 import { DocumentView } from '../DocumentView';
+import { Position } from './AnimationUtility';
 import './MapAnchorMenu.scss';
 import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
 import { MarkerIcons } from './MarkerIcons';
-import { LngLatLike } from 'mapbox-gl';
-import { Position } from './AnimationUtility';
-// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
 
 type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
 
@@ -46,7 +45,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public IsTargetToggler: () => boolean = returnFalse;
     public DisplayRoute: (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => void = unimplementedFunction;
     public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => void = unimplementedFunction;
-    public CreatePin: (feature: { place_name: string; center: LngLatLike; properties: { wikiData: unknown } }) => void = unimplementedFunction;
+    public CreatePin: (feature: { place_name: string; center: LngLatLike; properties?: { wikiData: string } }) => void = unimplementedFunction;
 
     public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
     public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
@@ -293,7 +292,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         return undefined;
     };
 
-    getDirectionsButton: JSX.Element = (<IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />);
+    getDirectionsButton = () => <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />;
 
     getAddToCalendarButton = (docType: string): JSX.Element => (
         <IconButton
@@ -305,9 +304,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             color={SettingsManager.userColor}
         />
     );
-    addToCalendarButton: JSX.Element = (
-        <IconButton tooltip="Add to calendar" onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
-    );
+    addToCalendarButton = () => <IconButton tooltip="Add to calendar" onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />;
 
     getLinkNoteToDocButton = (docType: string): JSX.Element => (
         <div ref={this._commentRef}>
@@ -320,7 +317,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         </div>
     );
 
-    linkNoteToPinOrRoutenButton: JSX.Element = (
+    linkNoteToPinOrRoutenButton = () => (
         <div ref={this._commentRef}>
             <IconButton
                 tooltip="Link Note to Pin" //
@@ -331,9 +328,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         </div>
     );
 
-    customizePinButton: JSX.Element = (<IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />);
+    customizePinButton = () => <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />;
 
-    centerOnPinButton: JSX.Element = (
+    centerOnPinButton = () => (
         <IconButton
             tooltip="Center on pin" //
             onPointerDown={this.Center}
@@ -342,7 +339,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    backButton: JSX.Element = (
+    backButton = () => (
         <IconButton
             tooltip="Go back" //
             onPointerDown={this.BackClick}
@@ -351,7 +348,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    addRouteButton: JSX.Element = (
+    addRouteButton = () => (
         <IconButton
             tooltip="Add route" //
             onPointerDown={this.HandleAddRouteClick}
@@ -369,9 +366,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    animateRouteButton: JSX.Element = (<IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />);
+    animateRouteButton = () => <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />;
 
-    revertToOriginalMarkerButton = (
+    revertToOriginalMarkerButton = () => (
         <IconButton
             tooltip="Revert to original" //
             onPointerDown={() => this.revertToOriginalMarker()}
@@ -386,31 +383,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                 {this.menuType === 'standard' && (
                     <>
                         {this.getDeleteButton('pin')}
-                        {this.getDirectionsButton}
+                        {this.getDirectionsButton()}
                         {this.getAddToCalendarButton('pin')}
                         {this.getLinkNoteToDocButton('pin')}
-                        {this.customizePinButton}
-                        {this.centerOnPinButton}
+                        {this.customizePinButton()}
+                        {this.centerOnPinButton()}
                     </>
                 )}
                 {this.menuType === 'routeCreation' && (
                     <>
-                        {this.backButton}
-                        {this.addRouteButton}
+                        {this.backButton()}
+                        {this.addRouteButton()}
                     </>
                 )}
                 {this.menuType === 'route' && (
                     <>
                         {this.getDeleteButton('route')}
-                        {this.animateRouteButton}
+                        {this.animateRouteButton()}
                         {this.getAddToCalendarButton('route')}
                         {this.getLinkNoteToDocButton('route')}
                     </>
                 )}
                 {this.menuType === 'customize' && (
                     <>
-                        {this.backButton}
-                        {this.revertToOriginalMarkerButton}
+                        {this.backButton()}
+                        {this.revertToOriginalMarkerButton()}
                     </>
                 )}