feat: sync My Location dropdown with CODAP state, sync Lat/Long betwe…

…en tabs, refactor app state related to location and lat/long [PT-188059223] [PT-188071551]

src/components/App.tsx

@@ -12,10 +12,9 @@ import "../assets/scss/App.scss";
 
 export const App: React.FC = () => {
   const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
-  const [latitude, setLatitude] = useState<string>("");
-  const [longitude, setLongitude] = useState<string>("");
+  const [latitude, setLatitude] = useState("");
+  const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState<string>("280");
-  const [location, setLocation] = useState<ILocation | null>(null);
   const [locations, setLocations] = useState<ILocation[]>([]);
   const [locationSearch, setLocationSearch] = useState<string>("");
   const [selectedAttrs, setSelectedAttributes] = useState<string[]>(kDefaultOnAttributes);
@@ -75,13 +74,11 @@ export const App: React.FC = () => {
         <LocationTab
           latitude={latitude}
           longitude={longitude}
-          location={location}
           locationSearch={locationSearch}
           selectedAttrs={selectedAttrs}
           dataContext={dataContext}
           setLatitude={setLatitude}
           setLongitude={setLongitude}
-          setLocation={setLocation}
           setLocationSearch={setLocationSearch}
           setSelectedAttributes={setSelectedAttributes}
           setDataContext={setDataContext}
@@ -93,8 +90,10 @@ export const App: React.FC = () => {
         <SimulationTab
           latitude={latitude}
           longitude={longitude}
+          setLatitude={setLatitude}
+          setLongitude={setLongitude}
+          setLocationSearch={setLocationSearch}
           dayOfYear={dayOfYear}
-          location={location}
           setDayOfYear={setDayOfYear}
           locations={locations}
         />

src/components/location-tab.tsx

@@ -3,20 +3,19 @@ import { useCodapData } from "../hooks/useCodapData";
 import { kChildCollectionAttributes } from "../constants";
 import { ILocation } from "../types";
 import { LocationPicker } from "./location-picker";
+import { locationsEqual } from "../utils/daylight-utils";
 
 import "../assets/scss/location-tab.scss";
 
 interface LocationTabProps {
   latitude: string;
   longitude: string;
-  location: ILocation | null;
   locations: ILocation[];
   locationSearch: string;
   selectedAttrs: string[];
   dataContext: any; // TODO the type
   setLatitude: (latitude: string) => void;
   setLongitude: (longitude: string) => void;
-  setLocation: (location: ILocation | null) => void;
   setLocationSearch: (search: string) => void;
   setSelectedAttributes: (attrs: string[]) => void;
   setDataContext: (context: any) => void; // TODO the type
@@ -26,13 +25,11 @@ interface LocationTabProps {
 export const LocationTab: React.FC<LocationTabProps> = ({
   latitude,
   longitude,
-  location,
   locationSearch,
   selectedAttrs,
   locations,
   setLatitude,
   setLongitude,
-  setLocation,
   setLocationSearch,
   setSelectedAttributes,
   setLocations
@@ -58,28 +55,22 @@ export const LocationTab: React.FC<LocationTabProps> = ({
 
   const handleLatChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setLatitude(event.target.value);
-    setLocation(null);
     setLocationSearch("");
   };
 
   const handleLongChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setLongitude(event.target.value);
-    setLocation(null);
     setLocationSearch("");
   };
 
   const handleLocationSelect = (selectedLocation: ILocation) => {
-    setLocation(selectedLocation);
     setLatitude(selectedLocation.latitude.toString());
     setLongitude(selectedLocation.longitude.toString());
     setLocationSearch(selectedLocation.name);
   };
 
   const handleLocationSearchChange = (searchString: string) => {
     setLocationSearch(searchString);
-    if (searchString === "") {
-      setLocation(null);
-    }
   };
 
   const handleTokenClick = (attribute: string) => {
@@ -96,13 +87,13 @@ export const LocationTab: React.FC<LocationTabProps> = ({
   };
 
   const handleGetDataClick = async () => {
-    const locationExists = locations.some(item =>
-      item.latitude === location?.latitude && item.longitude === location.longitude
-    );
+    const name = locationSearch || `(${latitude}, ${longitude})`;
+    const currentLocation: ILocation = { name, latitude: Number(latitude), longitude: Number(longitude) };
+    const locationExists = locations.some(item => locationsEqual(item, currentLocation));
     if (locationExists || !latitude || !longitude) return;
 
     // if the location does not already exist, and we have params, get the data
-    const tableCreated = await getDayLengthData(Number(latitude), Number(longitude), location);
+    const tableCreated = await getDayLengthData(currentLocation);
     if (tableCreated?.success) {
       const uniqeLocations = await getUniqueLocationsInCodapData();
       if (uniqeLocations) setLocations(uniqeLocations);

src/components/simulation-tab.tsx

@@ -8,24 +8,34 @@ interface SimulationTabProps {
   latitude: string;
   longitude: string;
   dayOfYear: string;
-  location: ILocation | null;
   locations: ILocation[];
+  setLatitude: (latitude: string) => void;
+  setLongitude: (longitude: string) => void;
+  setLocationSearch: (search: string) => void;
   setDayOfYear: (day: string) => void;
 }
 
 export const SimulationTab: React.FC<SimulationTabProps> = ({
   latitude,
   longitude,
+  locations,
   dayOfYear,
   setDayOfYear,
-  location,
-  locations
+  setLatitude,
+  setLongitude,
+  setLocationSearch
 }) => {
-
   return (
     <div className="simulation-tab">
       <div className="seasons-container">
-        <Seasons />
+        <Seasons
+          latitude={latitude}
+          longitude={longitude}
+          setLatitude={setLatitude}
+          setLongitude={setLongitude}
+          setLocationSearch={setLocationSearch}
+          locations={locations}
+        />
       </div>
     </div>
   );

src/grasp-seasons/3d-views/orbit-view.ts

@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import BaseView from "./base-view";
 import EarthDraggingInteraction from "./orbit-view-interaction";
+import LatLongMarkerDraggingInteraction from "./earth-view-interaction";
 import LatitudeLine from "../3d-models/latitude-line";
 import LatLongMarker from "../3d-models/lat-long-marker";
 import models from "../3d-models/common-models";
@@ -36,6 +37,7 @@ export default class OrbitView extends BaseView {
   latLongMarker!: LatLongMarker;
   monthLabels!: THREE.Object3D[];
   earthDraggingInteraction: EarthDraggingInteraction = new EarthDraggingInteraction(this);
+  latLogDraggingInteraction: LatLongMarkerDraggingInteraction = new LatLongMarkerDraggingInteraction(this);
 
   startingCameraPos?: THREE.Vector3;
   desiredCameraPos?: THREE.Vector3;
@@ -86,7 +88,7 @@ export default class OrbitView extends BaseView {
   }
 
   setupEarthCloseUpView() {
-    this.registerInteractionHandler(null); // disable dragging interaction in close-up view
+    this.registerInteractionHandler(this.latLogDraggingInteraction);
     this.sunEarthLine.rootObject.visible = false;
     this.monthLabels.forEach((label) => label.visible = false);
   }

src/grasp-seasons/components/city-select.scss → src/grasp-seasons/components/my-locations.scss

@@ -1,4 +1,4 @@
-.city-select {
+.my-locations {
   display: flex;
   flex-direction: column;
 }

src/grasp-seasons/components/my-locations.tsx

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import t, { Language } from "../translation/translate";
+import { ILocation } from "../../types";
+import { locationsEqual } from "../../utils/daylight-utils";
+
+import "./my-locations.scss";
+
+interface IProps {
+  lang: Language;
+  lat: number;
+  long: number;
+  onLocationChange: (lat: number, long: number, name: string) => void;
+  locations: ILocation[];
+}
+
+export default class MyLocations extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+    this.selectChange = this.selectChange.bind(this);
+  }
+
+  selectChange(event: any) {
+    const { onLocationChange, locations } = this.props;
+    const location = locations[event.target.value];
+    if (location.latitude && location.longitude) {
+      onLocationChange(location.latitude, location.longitude, location.name);
+    }
+  }
+
+  getOptions() {
+    const { locations } = this.props;
+    const options = this.selectedCity === "" ? [
+      <option key="unsaved" value="" disabled={true}>Custom Location (unsaved)</option>
+    ] : [];
+    for (let i = 0; i < locations.length; i++) {
+      const loc = locations[i];
+      options.push(<option key={i} value={i}>{ loc.name }</option>);
+    }
+    return options;
+  }
+
+  get selectedCity() {
+    const { lat, long, locations } = this.props;
+    const currentLocation: ILocation = { latitude: lat, longitude: long, name: "" };
+    for (let i = 0; i < locations.length; i++) {
+      if (locationsEqual(currentLocation, locations[i])) {
+        return i;
+      }
+    }
+    return ""; // custom location
+  }
+
+  render() {
+    return (
+      <div className="my-locations">
+        <label>{ t("~MY_LOCATIONS", this.props.lang) }</label>
+        <select className="form-control" value={this.selectedCity} onChange={this.selectChange}>
+          { this.getOptions() }
+        </select>
+      </div>
+    );
+  }
+}