Merge pull request #33 from concord-consortium/click-handle-fix

do not depend on dataContext to define attribute visibility
concord-consortium · Aug 26, 2024 · 6a462ff · 6a462ff
2 parents 87d7c4d + 88919b9
commit 6a462ff
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
@@ -41,7 +41,7 @@ $about-tab-width: 60px;
     }
 
     &:hover:not(.active) {
-      background-color: #e0e0e0;
+      background-color: $codap-teal-lightest;
     }
 
     &.location {

diff --git a/src/assets/scss/location-tab.scss b/src/assets/scss/location-tab.scss
@@ -87,16 +87,19 @@
         &.on {
           background-color: $codap-teal-lightest;
           border: 1px solid $codap-teal;
+          &:hover {
+            background-color: rgba(114, 191, 202, 0.5);
+          }
         }
 
         &.off {
           background-color: white;
           border: 1px solid $codap-teal;
+          &:hover {
+            background-color: rgba(161, 161, 161, 0.25);
+          }
         }
       }
-      li.token:hover {
-        background-color: $codap-teal-lightest;
-      }
     }
   }
 

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -50,11 +50,13 @@ export const App: React.FC = () => {
   const [locationSearch, setLocationSearch] = useState<string>("");
   const [selectedAttrs, setSelectedAttributes] = useState<string[]>(kDefaultOnAttributes);
   const [simEnabled, setSimEnabled] = useState(false);
+  const [clearDataEnabled, setClearDataEnabled] = useState(false);
 
   const { getDayLengthData, dataContext, getUniqueLocationsInCodapData } = useCodapData();
 
   useEffect(() => {
     setSimEnabled(!!dataContext);
+    setClearDataEnabled(!!dataContext);
   }, [dataContext]);
 
   const currentDayLocationRef = useRef<ICurrentDayLocation>({
@@ -202,6 +204,7 @@ export const App: React.FC = () => {
           setSelectedAttributes={setSelectedAttributes}
           setLocations={setLocations}
           handleGetDataClick={handleGetDataClick}
+          clearDataEnabled={clearDataEnabled}
         />
       </div>
       <div className={clsx("tab-content", { active: activeTab === "simulation" })}>

diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx
@@ -19,6 +19,7 @@ interface LocationTabProps {
   setSelectedAttributes: (attrs: string[]) => void;
   setLocations: (locations: ILocation[]) => void;
   handleGetDataClick: (latitude: string, longitude: string) => void;
+  clearDataEnabled: boolean;
 }
 
 export const LocationTab: React.FC<LocationTabProps> = ({
@@ -31,7 +32,8 @@ export const LocationTab: React.FC<LocationTabProps> = ({
   setLocationSearch,
   setSelectedAttributes,
   setLocations,
-  handleGetDataClick
+  handleGetDataClick,
+  clearDataEnabled
 }) => {
 
   const enableGetData = latitude !== "" && longitude !== "";
@@ -139,7 +141,7 @@ export const LocationTab: React.FC<LocationTabProps> = ({
         <hr className="light"/>
       </div>
       <div className="plugin-row data-buttons">
-        <button onClick={handleClearDataClick} disabled={!dataContext}>
+        <button onClick={handleClearDataClick} disabled={!clearDataEnabled}>
           Clear Data
         </button>
         <button disabled={!enableGetData} onClick={() => handleGetDataClick(latitude, longitude)}>

diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts
@@ -81,8 +81,6 @@ export const useCodapData = () => {
   };
 
   const updateAttributeVisibility = useCallback((attributeName: string, hidden: boolean) => {
-    if (!dataContext) return;
-
     try {
       updateAttribute(
         kDataContextName,
@@ -94,7 +92,7 @@ export const useCodapData = () => {
     } catch (error) {
       console.error("Error updating attribute visibility:", error);
     }
-  }, [dataContext]);
+  }, []);
 
   const extractUniqueLocations = (allItems: any): ILocation[] => {
     const uniqueLocations: ILocation[] = [];