Merge pull request #26 from concord-consortium/188059331-get-data-but…

…ton-in-sim 188059331 get data button in sim
concord-consortium · Aug 20, 2024 · 28e5c70 · 28e5c70
2 parents fbae411 + c67a390
commit 28e5c70
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 36 deletions.
diff --git a/src/assets/scss/simulation-tab.scss b/src/assets/scss/simulation-tab.scss
@@ -1 +1,19 @@
 @import "./vars.scss";
+
+.simulation-tab {
+  .get-data-button {
+    position: relative;
+    top: -15px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 25px;
+    color: $codap-teal;
+    border-radius: 3px;
+    border: 1px solid $codap-teal;
+    background-color: white;
+    cursor: pointer;
+    margin-left: auto;
+  }
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -8,6 +8,7 @@ import { useCodapData } from "../hooks/useCodapData";
 import { LocationTab } from "./location-tab";
 import { SimulationTab } from "./simulation-tab";
 import { Header } from "./header";
+import { locationsEqual } from "../utils/daylight-utils";
 
 import "../assets/scss/App.scss";
 
@@ -98,32 +99,33 @@ export const App: React.FC = () => {
   }, []);
 
   const handleDataContextChange = useCallback(async (listenerRes: ClientNotification) => {
-    console.log("| dataContextChangeNotice: ", listenerRes);
     const { resource, values } = listenerRes;
     const isResource = resource === `dataContextChangeNotice[${kDataContextName}]`;
-    if (!isResource || !values.result.success) return;
+    if (!isResource || !values.result.success || !values.result.cases) return;
 
+    const caseType = values.result.cases[0].parent ? "child" : "parent";
     const casesDeleted = values.operation === "selectCases" && values.result.cases.length === 0
     const caseSelected = values.operation === "selectCases" && values.result.cases.length === 1;
+    const parentCaseUpdated = values.operation === "updateCases" && caseType === "parent" && values.result.cases.length === 1;
 
-    //TODO: there is an unhandled path when we edit the location name
-    // we can use this to update the location name in the UI
-
-    if (casesDeleted) {
+    if (casesDeleted || parentCaseUpdated) {
       const uniqueLocations = await getUniqueLocationsRef.current();
       if (uniqueLocations) setLocations(uniqueLocations);
     }
+
     else if (caseSelected) {
-      const parentCaseId = values.result.cases[0].parent;
-      const selectedDay = values.result.cases[0].values.dayOfYear;
-      const parentCase = await getCaseByID(kDataContextName, parentCaseId);
-      const selectedLatitude = parentCase.values.case.values.latitude;
-      const selectedLongitude = parentCase.values.case.values.longitude;
-      handleCaseSelectionInCodap(
-        selectedLatitude,
-        selectedLongitude,
-        selectedDay
-      );
+      if (caseType === "child") {
+        const parentCaseId = values.result.cases[0].parent;
+        const selectedDay = values.result.cases[0].values.dayOfYear;
+        const parentCase = await getCaseByID(kDataContextName, parentCaseId);
+        const selectedLatitude = parentCase.values.case.values.latitude;
+        const selectedLongitude = parentCase.values.case.values.longitude;
+        handleCaseSelectionInCodap(
+          selectedLatitude,
+          selectedLongitude,
+          selectedDay
+        );
+      }
     }
   }, [handleCaseSelectionInCodap]);
 
@@ -155,6 +157,23 @@ export const App: React.FC = () => {
     });
   };
 
+  const { getDayLengthData } = useCodapData();
+
+  const handleGetDataClick = async () => {
+    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(currentLocation);
+    if (tableCreated?.success) {
+      const uniqeLocations = await getUniqueLocationsInCodapData();
+      if (uniqeLocations) setLocations(uniqeLocations);
+    }
+  };
+
+
   return (
     <div className="App">
       <Header
@@ -175,6 +194,7 @@ export const App: React.FC = () => {
           setDataContext={setDataContext}
           locations={locations}
           setLocations={setLocations}
+          handleGetDataClick={handleGetDataClick}
         />
       </div>
       <div className={clsx("tab-content", { active: activeTab === "simulation" })}>
@@ -187,6 +207,8 @@ export const App: React.FC = () => {
           setLocationSearch={setLocationSearch}
           dayOfYear={dayOfYear}
           setDayOfYear={handleDayUpdateInTheSimTab}
+          setLocations={setLocations}
+          handleGetDataClick={handleGetDataClick}
         />
       </div>
     </div>

diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx
@@ -3,7 +3,6 @@ import { useCodapData } from "../hooks/useCodapData";
 import { kChildCollectionAttributes } from "../constants";
 import { ICodapDataContextInfo, ILocation } from "../types";
 import { LocationPicker } from "./location-picker";
-import { locationsEqual } from "../utils/daylight-utils";
 
 import "../assets/scss/location-tab.scss";
 
@@ -20,6 +19,7 @@ interface LocationTabProps {
   setSelectedAttributes: (attrs: string[]) => void;
   setDataContext: (context: any) => void;
   setLocations: (locations: ILocation[]) => void;
+  handleGetDataClick: (latitude: string, longitude: string) => void;
 }
 
 export const LocationTab: React.FC<LocationTabProps> = ({
@@ -32,15 +32,14 @@ export const LocationTab: React.FC<LocationTabProps> = ({
   setLongitude,
   setLocationSearch,
   setSelectedAttributes,
-  setLocations
+  setLocations,
+  handleGetDataClick
 }) => {
 
   const {
     dataContext,
     handleClearData,
-    getDayLengthData,
     updateAttributeVisibility,
-    getUniqueLocationsInCodapData
   } = useCodapData();
 
   useEffect(() => {
@@ -87,20 +86,6 @@ export const LocationTab: React.FC<LocationTabProps> = ({
     setLocations([]);
   };
 
-  const handleGetDataClick = async () => {
-    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(currentLocation);
-    if (tableCreated?.success) {
-      const uniqeLocations = await getUniqueLocationsInCodapData();
-      if (uniqeLocations) setLocations(uniqeLocations);
-    }
-  };
-
   return (
     <div className="location-tab">
       <LocationPicker
@@ -149,7 +134,7 @@ export const LocationTab: React.FC<LocationTabProps> = ({
         <button onClick={handleClearDataClick} disabled={!dataContext}>
           Clear Data
         </button>
-        <button onClick={handleGetDataClick}>
+        <button  onClick={() => handleGetDataClick(latitude, longitude)}>
           Get Data
         </button>
       </div>

diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx
@@ -13,6 +13,8 @@ interface SimulationTabProps {
   setLocationSearch: (search: string) => void;
   dayOfYear: number;
   setDayOfYear: (day: number) => void;
+  setLocations: (locations: ILocation[]) => void;
+  handleGetDataClick: (latitude: string, longitude: string) => void;
 }
 
 export const SimulationTab: React.FC<SimulationTabProps> = ({
@@ -24,6 +26,8 @@ export const SimulationTab: React.FC<SimulationTabProps> = ({
   setLocationSearch,
   dayOfYear,
   setDayOfYear,
+  setLocations,
+  handleGetDataClick
 }) => {
   return (
     <div className="simulation-tab">
@@ -39,6 +43,9 @@ export const SimulationTab: React.FC<SimulationTabProps> = ({
           locations={locations}
         />
       </div>
+      <button className="get-data-button" onClick={() => handleGetDataClick(latitude, longitude)}>
+        Get Data
+      </button>
     </div>
   );
 };
diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts
@@ -23,7 +23,6 @@ export const useCodapData = () => {
     if (result.success) {
       let dc = result.values;
       let lastCollection = dc.collections[dc.collections.length - 1];
-      console.trace();
       return await codapInterface.sendRequest({
         action: "delete",
         resource: `dataContext[${kDataContextName}].collection[${lastCollection.name}].allCases`