location tab improvements, prep

- enable get data button conditionally - styling and layout - setup to disambiguate various local dataContext vars - set up to enable simulation tab conditionally
concord-consortium · Aug 21, 2024 · b2a1b33 · b2a1b33
1 parent 515d776
commit b2a1b33
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 55 deletions.
diff --git a/src/assets/scss/App.scss b/src/assets/scss/App.scss
@@ -21,20 +21,26 @@
     align-items: center;
     margin-bottom: 7px;
     margin-top: 7px;
+    &.location-picker-label {
+      margin-top: 12px;
+    }
+    &.latitude {
+      margin-bottom:12px;
+    }
   }
 
   .tab-content {
-    // note each .tab-content is a wrapper for tab.location, tab.simulation, tab.about
-    // eahc of which maintain their own static layout widths
-    // this is 100% wide to cover the space affored by CODAP window whose width can change
     // display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly
     // when display: none; is used.
     visibility: hidden;
     width: 0;
     height: 0;
     position: absolute;
-    padding: 9px $edge-padding $edge-padding $edge-padding;
+    padding-left: 9px $edge-padding $edge-padding $edge-padding;
 
+    // note each .tab-content is a wrapper for tab.location, tab.simulation, tab.about
+    // eahc of which maintain their own static layout widths
+    // this is 100% wide to cover the space affored by CODAP window whose width can change
     &.active {
       background-color: white;
       visibility: visible;

diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
@@ -22,16 +22,15 @@ $about-tab-width: 60px;
   .tab {
     position: absolute;
     text-align: center;
-    padding: 5px 10px;
+    padding: 4px $tab-padding;
     cursor: pointer;
     color: #222;
     border: 1px solid #222;
     margin-right: -1px;
-    border-radius: 6px 6px 0 0;
-    background-color: white;
+    border-radius: 4px 4px 0 0;
     display:inline-block;
     bottom:-1px;
-    background-color: #e0e0e0;
+    background-color: #f0f0f0;
 
     &.active {
       background-color: white;
@@ -51,6 +50,9 @@ $about-tab-width: 60px;
 
     &.simulation {
       left: $edge-padding + $location-tab-width;
+      &.disabled {
+        color: silver;
+      }
     }
 
     &.about {

diff --git a/src/assets/scss/location-picker.scss b/src/assets/scss/location-picker.scss
@@ -2,26 +2,27 @@
 
 .location-picker-label {
   position: relative;
+  margin-top:6px;
   .location-icon {
     position: absolute;
     left: 4px;
-    top: 26px;
+    top: 27px;
     z-index: 1;
   }
 }
 
 .location-picker {
   display:flex;
   position: relative;
-  margin-bottom: 12px;
   justify-content: space-between;
 
   input {
     padding: 5px;
+    height: $input-height;
     width: 100%;
-    border-radius: 4px;
+    border-radius: $input-border-radius;
     box-sizing: border-box;
-    border: 1.5px solid rgba($codap-teal, 0.3);
+    border: $input-border;
     padding-left: 25px;
     outline: none;
     &:active, &:focus {

diff --git a/src/assets/scss/location-tab.scss b/src/assets/scss/location-tab.scss
@@ -1,41 +1,64 @@
 @import "./vars";
 
 .location-tab {
-  width: 350px;
-  padding:10px;
+  box-sizing: border-box;
+  width: $location-tab-width;
+  height: $location-tab-height;
+  padding: $tab-padding;
+
+  .intro {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
 
   hr {
     width: 100%;
-    margin: 10px 0;
-    border: none;
-    border-top: 1.5px solid rgba($codap-teal, 0.3);
+    border-top: 1px solid #aaa;
+    &.light {
+      border-top: 1px solid $codap-teal-light;
+    }
+    &.above-attrs {
+      margin-top:22px;
+      margin-bottom:20px;
+    }
   }
 
   .latitude,
   .longitude {
-    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    label {
+      margin-left: auto;
+      text-align: right;
+      margin-right: 10px;
+    }
     input {
-      width: 250px;
-      padding: 5px;
-      border-radius: 4px;
+      width: 236px;
+      padding: 7px 8px;
+      border-radius: $input-border-radius;
       box-sizing: border-box;
-      border: 1.5px solid rgba($codap-teal, 0.3);
+      border: $input-border;
     }
   }
 
+  .or-container {
+    box-sizing: border-box;
+    position: relative;
+    text-align: left;
+    padding: $tab-padding 0px;
+  }
+
   .or {
-    display: none; // TODO: bring this or element back
+    display: inline-block;
+    position: absolute;
+    top: 11px;
     background-color: white;
-    width: 40px;
-    padding:0px 10px;
+    width: 30px;
+    padding:0px $tab-padding + 4px;
     color: $codap-teal;
     font-weight: bold;
   }
 
-  .latitude {
-    margin-top: 12px;
-  }
-
   .attributes-selection {
     display: flex;
     flex-direction: column;
@@ -49,11 +72,11 @@
       display: flex;
       flex-wrap: wrap;
       width: 100%;
-      margin-top: 10px;
+      margin-top: $tab-padding;
       gap: 3px;
 
       li.token {
-        padding: 6px 12px;
+        padding: 8px $tab-padding;
         border-radius: 20px;
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
@@ -63,16 +86,17 @@
 
         &.on {
           background-color: $codap-teal-lightest;
-          color: $codap-teal;
           border: 1px solid $codap-teal;
         }
 
         &.off {
           background-color: white;
-          color: #aaa;
           border: 1px solid $codap-teal;
         }
       }
+      li.token:hover {
+        background-color: $codap-teal-lightest;
+      }
     }
   }
 
@@ -81,10 +105,11 @@
 
     button {
       background-color: white;
-      padding: 6px 12px;
+      font-family: "Montserrat", sans-serif;
+      font-weight: medium;
+      padding: 9px 12px;
       border-radius: 4px;
       margin-left: 10px;
-      cursor: pointer;
       border: 1px solid $codap-teal;
       color: $codap-teal;
       transition: background-color 0.3s, color 0.3s;
@@ -98,6 +123,7 @@
       &:hover:not(:disabled) {
         background-color: $codap-teal-light;
         color: white;
+        cursor: pointer;
       }
     }
   }

diff --git a/src/assets/scss/simulation-tab.scss b/src/assets/scss/simulation-tab.scss
@@ -1,6 +1,9 @@
 @import "./vars.scss";
 
 .simulation-tab {
+  padding: $tab-padding;
+  width: $sim-tab-width;
+  height: $sim-tab-height;
   .get-data-button {
     position: relative;
     top: -15px;

diff --git a/src/assets/scss/vars.scss b/src/assets/scss/vars.scss
@@ -1,4 +1,20 @@
 $codap-teal: #177991;
 $codap-teal-light: #72bfca;
 $codap-teal-lightest: rgba(114, 191, 202, 0.25);
-$edge-padding: 4px;
+$edge-padding: 4px;
+
+$location-tab-width: 340px;
+$location-tab-height: 630px;
+
+$sim-tab-width: 690px;
+$sim-tab-height: $location-tab-height;
+
+$about-tab-width: $location-tab-width;
+$about-tab-height: $location-tab-height;
+
+$tab-padding: 10px;
+$input-height: 32px;
+$input-margin: 0 0 12px 8px;
+$input-border-radius: 3px;
+$input-border: solid 1px rgba(23, 121, 145, 0.75);
+
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -60,6 +60,12 @@ export const App: React.FC = () => {
   const { getUniqueLocationsInCodapData } = useCodapData();
   const getUniqueLocationsRef = useRef(getUniqueLocationsInCodapData);
 
+  // TODO handle click on the body to show the thing (30)
+
+  // TODO: get this working
+  const enableSimTab = dataContext !== null;
+  console.log("|| App render: dataContext", dataContext);
+
   const handleDayUpdateInTheSimTab = (day: number) => {
     currentDayLocationRef.current._dayOfYear = day;
     debouncedUpdateRowSelectionInCodap(
@@ -128,6 +134,7 @@ export const App: React.FC = () => {
         );
       }
     }
+    console.log("|| App: dataContextChange", values);
   }, [handleCaseSelectionInCodap]);
 
   useEffect(() => {
@@ -143,6 +150,8 @@ export const App: React.FC = () => {
   }, [latitude, longitude, dayOfYear]);
 
   const handleTabClick = (tab: TabName) => {
+    // comment out next line during development
+    if (tab === "simulation" && !enableSimTab) return;
     setActiveTab(tab);
     codapInterface.sendRequest({
       action: "update",
@@ -180,6 +189,7 @@ export const App: React.FC = () => {
       <Header
         activeTab={activeTab}
         onTabClick={handleTabClick}
+        showEnabled={enableSimTab}
       />
       <div className={clsx("tab-content", { active: activeTab === "location" })}>
         <LocationTab

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,14 +1,15 @@
 import React from "react";
+import { TabName } from "../types";
 
 import "../assets/scss/header.scss";
-import { TabName } from "../types";
 
 interface IHeaderProps {
   activeTab: TabName;
   onTabClick: (tab: TabName) => void;
+  showEnabled: boolean;
 }
 
-export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
+export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick, showEnabled }) => {
   return (
     <div className="tab-container">
       <div
@@ -18,7 +19,7 @@ export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
         Location
       </div>
       <div
-        className={`tab simulation ${activeTab === "simulation" ? "active" : ""}`}
+        className={`tab simulation ${activeTab === "simulation" ? "active" : ""} ${showEnabled ? "" : "disabled"}`}
         onClick={() => onTabClick("simulation")}
       >
         Simulation

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -95,7 +95,7 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
       <div className="plugin-row location-picker">
         <input
           type="text"
-          placeholder="Enter location"
+          placeholder="City, State or Country"
           value={searchValue}
           onChange={handleLocationChange}
           onKeyDown={handleKeyDown}