186719430 station selection list

src/components/App.scss

@@ -1,10 +1,6 @@
-.body {
-  width: 360px;
-}
-
 .App {
   padding: 12px;
-  box-sizing: border-box;
+  box-sizing: content-box;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/App.tsx

@@ -6,9 +6,8 @@ import { AttributesSelector } from "./attribute-selector";
 import { AttributeFilter } from "./attribute-filter";
 import { InfoModal } from "./info-modal";
 import { useStateContext } from "../hooks/use-state";
-import { adjustStationDataset } from "../utils/getWeatherStations";
+import { adjustStationDataset, getWeatherStations } from "../utils/getWeatherStations";
 import { createStationsDataset } from "../utils/codapHelpers";
-import weatherStations from "../assets/data/weather-stations.json";
 import InfoIcon from "../assets/images/icon-info.svg";
 import { useCODAPApi } from "../hooks/use-codap-api";
 import { dataTypeStore } from "../utils/noaaDataTypes";
@@ -30,12 +29,16 @@ export const App = () => {
   const [statusMessage, setStatusMessage] = useState("");
   const [isFetching, setIsFetching] = useState(false);
   const { showModal } = state;
+  const weatherStations = getWeatherStations();
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
+  }, []);
+
+  useEffect(() => {
     adjustStationDataset(weatherStations); //change max data to "present"
     createStationsDataset(weatherStations); //send weather station data to CODAP
-  }, []);
+  },[weatherStations]);
 
   const handleOpenInfo = () => {
     setState(draft => {

src/components/location-picker.scss

@@ -7,27 +7,96 @@
   .location-header {
     display: flex;
     flex-direction: row;
-    align-items: center;
     justify-content: space-between;
+    flex-wrap: nowrap;
     height: 16px;
     margin: 9px 12px 0 0;
 
     .location-title {
       font-weight: 600;
     }
 
-    .selected-weather-station {
-      padding: 2px 2px 2px 8px;
-      background-color: $teal-light-25;
-      color: $teal-dark;
-      font-size: 10px;
-      font-weight: 500;
-      .station-distance {
-        font-style: italic;
+    .weather-station-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      position: relative;
+      right: 40px;
+      max-width: 311px;
+
+      .selected-weather-station {
+        padding: 2px 2px 2px 8px;
+        background-color: $teal-light-25;
+        color: $teal-dark;
+        font-size: 10px;
+        font-weight: 500;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        max-width: 245px;
+
+        .station-distance {
+          font-style: italic;
+          margin-right: 4px;
+        }
+
+        .station-name {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: 175px;
+        }
+        svg {
+          height: 12px;
+          width: 12px;
+          margin-left: 6px;
+        }
       }
-      .location-edit-icon {
-        height: 12px;
-        width: 12px;
+
+      .station-selection-list {
+        height: 86px;
+        padding: 8px 13px;
+        box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5);
+        background-color: #fff;
+        list-style-type: none;
+        margin-top: 0;
+        visibility: hidden;
+        max-width: 311px;
+
+        &.show {
+          visibility: visible;
+          z-index: 5;
+        }
+
+        .station-selection {
+          font-family: "Montserrat", sans-serif;
+          font-size: 10px;
+          font-weight: 500;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          padding: 2px 0;
+          gap: 4px;
+
+          .station-name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #000;
+            max-width: 160px;
+          }
+          .station-distance {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: $teal-dark-75;
+            min-width: 120px;
+          }
+          &.selected-station {
+            background-color: $teal-medium;
+          }
+        }
       }
     }
   }