From 67c04b678ff1c90b11f4431f892bf41fea139cb0 Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Sun, 18 Aug 2024 11:14:41 -0400 Subject: [PATCH 1/6] adds get data button to sim side, but locations sync could be refactored to not depend on a "second click" --- src/components/App.tsx | 7 +++++-- src/components/simulation-tab.tsx | 25 +++++++++++++++++++++++++ src/hooks/useCodapData.ts | 1 + 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 6b7b03d..a876ce2 100755 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -66,10 +66,12 @@ export const App: React.FC = () => { } const casesDeletedFromCodapListener = async (listenerRes: ClientNotification) => { + console.log("|| listenerRes: ", listenerRes); const { resource, values } = listenerRes; const isResource = resource === `dataContextChangeNotice[${kDataContextName}]`; - if (!isResource) return; - + if (!isResource && !values.result.cases) return; + const hasCasesDefined = values.result.cases !== undefined; + if (!hasCasesDefined) return const casesDeleted = values.operation === "selectCases" && values.result.cases.length === 0 && values.result.success; if ( casesDeleted ) { @@ -127,6 +129,7 @@ export const App: React.FC = () => { setLocationSearch={setLocationSearch} dayOfYear={dayOfYear} setDayOfYear={handleDayUpdateInTheSimTab} + setLocations={setLocations} /> diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx index 8297b3d..ab12476 100644 --- a/src/components/simulation-tab.tsx +++ b/src/components/simulation-tab.tsx @@ -1,6 +1,8 @@ import React from "react"; import { ILocation } from "../types"; +import { useCodapData } from "../hooks/useCodapData"; import Seasons from "../grasp-seasons/components/seasons"; +import { locationsEqual } from "../utils/daylight-utils"; import "../assets/scss/simulation-tab.scss"; @@ -13,6 +15,7 @@ interface SimulationTabProps { setLocationSearch: (search: string) => void; dayOfYear: number; setDayOfYear: (day: number) => void; + setLocations: (locations: ILocation[]) => void; } export const SimulationTab: React.FC = ({ @@ -24,7 +27,26 @@ export const SimulationTab: React.FC = ({ setLocationSearch, dayOfYear, setDayOfYear, + setLocations }) => { + + const { getDayLengthData, getUniqueLocationsInCodapData } = useCodapData(); + + const handleGetDataClick = async () => { + // console.log("| sim says to go ahead an get data with local lat, long: ", latitude, longitude); + // console.log("| also, if location is novel, we need to save it to the locations array"); + const name = `(${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; + + const tableCreated = await getDayLengthData(currentLocation); + if (tableCreated?.success) { + const uniqueLocations = await getUniqueLocationsInCodapData(); + if (uniqueLocations) setLocations(uniqueLocations); + } + } + return (
@@ -39,6 +61,9 @@ export const SimulationTab: React.FC = ({ locations={locations} />
+
); }; diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts index 8892c2e..59f3f13 100644 --- a/src/hooks/useCodapData.ts +++ b/src/hooks/useCodapData.ts @@ -123,6 +123,7 @@ export const useCodapData = () => { const locationAttr = await getAttribute(kDataContextName, kParentCollectionName, "location"); if (locationAttr.success){ const allItems = await getAllItems(kDataContextName); + console.log("|| sync opportunity? ", allItems); if (allItems.success){ const uniqeLocations: ILocation[] = extractUniqueLocations(allItems.values); return uniqeLocations; From d862d3b0445b67b9c699058e399b785673260853 Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Sun, 18 Aug 2024 17:14:20 -0400 Subject: [PATCH 2/6] Get Data button styling --- src/assets/scss/simulation-tab.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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; + } +} From 6efc8c8c17425d5bedd6979bad2eb25d1ba82ef3 Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Sun, 18 Aug 2024 17:14:47 -0400 Subject: [PATCH 3/6] lgging --- src/components/simulation-tab.tsx | 5 ++--- src/hooks/useCodapData.ts | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx index ab12476..3c73eb5 100644 --- a/src/components/simulation-tab.tsx +++ b/src/components/simulation-tab.tsx @@ -33,8 +33,7 @@ export const SimulationTab: React.FC = ({ const { getDayLengthData, getUniqueLocationsInCodapData } = useCodapData(); const handleGetDataClick = async () => { - // console.log("| sim says to go ahead an get data with local lat, long: ", latitude, longitude); - // console.log("| also, if location is novel, we need to save it to the locations array"); + console.log("||| SIM tab click"); const name = `(${latitude}, ${longitude})`; const currentLocation: ILocation = { name, latitude: Number(latitude), longitude: Number(longitude) }; const locationExists = locations.some(item => locationsEqual(item, currentLocation)); @@ -61,7 +60,7 @@ export const SimulationTab: React.FC = ({ locations={locations} /> - diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts index 59f3f13..86c850f 100644 --- a/src/hooks/useCodapData.ts +++ b/src/hooks/useCodapData.ts @@ -123,7 +123,7 @@ export const useCodapData = () => { const locationAttr = await getAttribute(kDataContextName, kParentCollectionName, "location"); if (locationAttr.success){ const allItems = await getAllItems(kDataContextName); - console.log("|| sync opportunity? ", allItems); + console.log("||| getting locations in CODAP data... sync opportunity ", allItems); if (allItems.success){ const uniqeLocations: ILocation[] = extractUniqueLocations(allItems.values); return uniqeLocations; From be3e4afcca918ee702f8f50014e7e122c41ec9ef Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Mon, 19 Aug 2024 16:00:16 -0400 Subject: [PATCH 4/6] update locations array when location is edited in codap --- src/components/App.tsx | 33 ++++++++++++++++--------------- src/components/simulation-tab.tsx | 1 - src/hooks/useCodapData.ts | 1 - 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index cfc48ec..d9b5b71 100755 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -98,32 +98,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]); diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx index 3c73eb5..6924601 100644 --- a/src/components/simulation-tab.tsx +++ b/src/components/simulation-tab.tsx @@ -33,7 +33,6 @@ export const SimulationTab: React.FC = ({ const { getDayLengthData, getUniqueLocationsInCodapData } = useCodapData(); const handleGetDataClick = async () => { - console.log("||| SIM tab click"); const name = `(${latitude}, ${longitude})`; const currentLocation: ILocation = { name, latitude: Number(latitude), longitude: Number(longitude) }; const locationExists = locations.some(item => locationsEqual(item, currentLocation)); diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts index b8a85eb..ebb5324 100644 --- a/src/hooks/useCodapData.ts +++ b/src/hooks/useCodapData.ts @@ -123,7 +123,6 @@ export const useCodapData = () => { const locationAttr = await getAttribute(kDataContextName, kParentCollectionName, "location"); if (locationAttr.success){ const allItems = await getAllItems(kDataContextName); - console.log("||| getting locations in CODAP data... sync opportunity ", allItems); if (allItems.success){ const uniqeLocations: ILocation[] = extractUniqueLocations(allItems.values); return uniqeLocations; From 916a432aa0e7924525a9da6ec18fa232bb74bad2 Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Mon, 19 Aug 2024 19:21:22 -0400 Subject: [PATCH 5/6] move handleGetDataClick up to app so both tabs can use it --- src/components/App.tsx | 20 ++++++++++++++++++++ src/components/location-tab.tsx | 22 ++++------------------ src/components/simulation-tab.tsx | 22 ++++------------------ 3 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index d9b5b71..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"; @@ -156,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} />
@@ -189,6 +208,7 @@ export const App: React.FC = () => { dayOfYear={dayOfYear} setDayOfYear={handleDayUpdateInTheSimTab} setLocations={setLocations} + handleGetDataClick={handleGetDataClick} />
diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx index 651d04e..2e24e11 100644 --- a/src/components/location-tab.tsx +++ b/src/components/location-tab.tsx @@ -20,6 +20,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 +33,14 @@ export const LocationTab: React.FC = ({ setLongitude, setLocationSearch, setSelectedAttributes, - setLocations + setLocations, + handleGetDataClick }) => { const { dataContext, handleClearData, - getDayLengthData, updateAttributeVisibility, - getUniqueLocationsInCodapData } = useCodapData(); useEffect(() => { @@ -87,20 +87,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 6924601..b4bfa00 100644 --- a/src/components/simulation-tab.tsx +++ b/src/components/simulation-tab.tsx @@ -16,6 +16,7 @@ interface SimulationTabProps { dayOfYear: number; setDayOfYear: (day: number) => void; setLocations: (locations: ILocation[]) => void; + handleGetDataClick: (latitude: string, longitude: string) => void; } export const SimulationTab: React.FC = ({ @@ -27,24 +28,9 @@ export const SimulationTab: React.FC = ({ setLocationSearch, dayOfYear, setDayOfYear, - setLocations + setLocations, + handleGetDataClick }) => { - - const { getDayLengthData, getUniqueLocationsInCodapData } = useCodapData(); - - const handleGetDataClick = async () => { - const name = `(${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; - - const tableCreated = await getDayLengthData(currentLocation); - if (tableCreated?.success) { - const uniqueLocations = await getUniqueLocationsInCodapData(); - if (uniqueLocations) setLocations(uniqueLocations); - } - } - return (
@@ -59,7 +45,7 @@ export const SimulationTab: React.FC = ({ locations={locations} />
-
From c67a390afd586194750698af026233196d818373 Mon Sep 17 00:00:00 2001 From: Joe Bacal Date: Mon, 19 Aug 2024 19:24:15 -0400 Subject: [PATCH 6/6] cleanup --- src/components/location-tab.tsx | 1 - src/components/simulation-tab.tsx | 2 -- src/hooks/useCodapData.ts | 1 - 3 files changed, 4 deletions(-) diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx index 2e24e11..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"; diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx index b4bfa00..a5bbb2d 100644 --- a/src/components/simulation-tab.tsx +++ b/src/components/simulation-tab.tsx @@ -1,8 +1,6 @@ import React from "react"; import { ILocation } from "../types"; -import { useCodapData } from "../hooks/useCodapData"; import Seasons from "../grasp-seasons/components/seasons"; -import { locationsEqual } from "../utils/daylight-utils"; import "../assets/scss/simulation-tab.scss"; 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`