diff --git a/src/assets/scss/simulation-tab.scss b/src/assets/scss/simulation-tab.scss index 9da87cb..52cba15 100644 --- 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 index 22d06cd..2414d79 100755 --- 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 (
{ setDataContext={setDataContext} locations={locations} setLocations={setLocations} + handleGetDataClick={handleGetDataClick} />
@@ -187,6 +207,8 @@ export const App: React.FC = () => { setLocationSearch={setLocationSearch} dayOfYear={dayOfYear} setDayOfYear={handleDayUpdateInTheSimTab} + setLocations={setLocations} + handleGetDataClick={handleGetDataClick} />
diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx index 651d04e..297f27a 100644 --- 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 = ({ @@ -32,15 +32,14 @@ export const LocationTab: React.FC = ({ setLongitude, setLocationSearch, setSelectedAttributes, - setLocations + setLocations, + handleGetDataClick }) => { const { dataContext, handleClearData, - getDayLengthData, updateAttributeVisibility, - getUniqueLocationsInCodapData } = useCodapData(); useEffect(() => { @@ -87,20 +86,6 @@ export const LocationTab: React.FC = ({ 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 (
= ({ -
diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx index 8297b3d..a5bbb2d 100644 --- 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 = ({ @@ -24,6 +26,8 @@ export const SimulationTab: React.FC = ({ setLocationSearch, dayOfYear, setDayOfYear, + setLocations, + handleGetDataClick }) => { return (
@@ -39,6 +43,9 @@ export const SimulationTab: React.FC = ({ locations={locations} />
+ ); }; diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts index ebb5324..654fa92 100644 --- 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`