From 3dc3a889c0967ba9a30f70832ba06d2a0410670b Mon Sep 17 00:00:00 2001
From: LKMason <leekmason@gmail.com>
Date: Wed, 27 Nov 2024 09:54:13 -0500
Subject: [PATCH] Added global measure selection to map page

---
 src/pages/mapPage.js   | 43 ++++++++++++++++++++++--------------------
 visualization/map.html | 15 +++++++++------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js
index 410d0b9..a0addf9 100644
--- a/src/pages/mapPage.js
+++ b/src/pages/mapPage.js
@@ -76,6 +76,7 @@ class MapApplication {
       grid: document.getElementById("grid-stack"),
       buttonUndo: document.getElementById("button-undo"),
       buttonColorSettings: document.getElementById("button-color-settings"),
+      buttonDataSettings: document.getElementById("button-data-settings"),
       buttonTable: document.getElementById("button-table"),            // Table button
       buttonDownload: document.getElementById("button-download"),      // Data download button
       buttonDownloadImage: document.getElementById("button-download-image"), // Image download button
@@ -87,6 +88,8 @@ class MapApplication {
       colorSettings: document.getElementById("color-settings"),
       buttonColorSettingsClose: document.getElementById("color-settings-close"),
 
+      dataSettings: document.getElementById("data-settings"),
+
       // Map tooltip
       mapTooltipContent: document.getElementById("map-tooltip"),
       mapTooltipName: document.getElementById("map-tooltip-name"),
@@ -249,10 +252,6 @@ class MapApplication {
     this.state.defineProperty("yearOptions", CONSTANTS.DATA_YEARS);
     this.state.defineProperty("cause", initialState.cause);
     this.state.defineProperty("causeOptions", optionValues.cause);
-    this.state.defineProperty("measure", initialState.measure);
-    this.state.defineProperty("measureOptions", CONSTANTS.NUMERIC_MEASURES.map(d => ({
-      value: d, label: formatName("measures", d)
-    })));
     this.state.defineProperty("spatialLevel", initialState.spatialLevel);
     this.state.defineProperty("spatialLevelOptions", CONSTANTS.SPATIAL_LEVELS.map(d => ({
       value: d, label: formatName("levels", d)
@@ -280,12 +279,27 @@ class MapApplication {
       this.updateUrl();
     });
 
+    this.state.defineProperty("measure", initialState.measure);
+    this.state.defineProperty("measureOptions", CONSTANTS.NUMERIC_MEASURES.map(d => ({
+      value: d, label: formatName("measures", d)
+    })));
 
     this.state.subscribe("spatialLevel", () => {
       if (this.state.spatialLevel == "state") {
         this.state.areaCounty = "All";
       }
     })
+
+    this.state.subscribe("measure", () => this.updateMeasure());
+  }
+
+  updateMeasure() {
+    if (this.cardStates) {
+      for (const cardState of this.cardStates) {
+        cardState.measure = this.state.measure;
+      }
+      this.updateGrid();
+    }
   }
 
   showInitialHints() {
@@ -302,19 +316,6 @@ class MapApplication {
 
   addColorSettingsPopup() {
 
-    // const colorSettingsTooltip = addPopperTooltip(this.elems.innerDashboard);
-
-    // let tooltipShown = false;
-    // this.elems.buttonColorSettings.addEventListener("click", () => {
-    //   this.elems.colorSettings.style.display = "flex";
-    //   if (tooltipShown) {
-    //     colorSettingsTooltip.hide();
-    //   } else {
-    //     colorSettingsTooltip.show(this.elems.buttonColorSettings, this.elems.colorSettings);
-    //   }
-    //   tooltipShown = !tooltipShown;
-    // })
-
     // Add color scheme gradients
     this.state.schemeOptions = Object.entries(formatName("colorSchemes")).map(
       ([k, name]) => {
@@ -340,7 +341,7 @@ class MapApplication {
     outlierCutoffRangeText.innerText = "±" + this.state.outlierCutoff + "σ";
 
     minorPopup(this.elems.innerDashboard, this.elems.buttonColorSettings, this.elems.colorSettings, "Color Settings");
-
+    minorPopup(this.elems.innerDashboard, this.elems.buttonDataSettings, this.elems.dataSettings, "Data Settings");
   }
 
   async createMapTooltip() {
@@ -486,9 +487,9 @@ class MapApplication {
    */
   parseUrl() {
     for (const field of [...CONSTANTS.CARD_STATE_FIELDS, ...CONSTANTS.STATE_URL_FIELDS]) {
-      const value = this.url.searchParams.get(field);
+      let value = this.url.searchParams.get(field);
       if (value != null) {
-        this.state[field] = value;
+        this.state[field] = JSON.parse(value);
       } else {
         this.state[field] = CONSTANTS.DEFAULT_STATE[field];
       }
@@ -694,6 +695,8 @@ class MapApplication {
     this.elems.colorLegend.innerHTML = '';
     this.elems.colorLegend.appendChild(sharedColorLegend);
 
+    this.updateTooltipHistogram();
+
     this.plotGrid.renderCards();
   }
 
diff --git a/visualization/map.html b/visualization/map.html
index 4443fbb..0fc2e2d 100644
--- a/visualization/map.html
+++ b/visualization/map.html
@@ -69,6 +69,7 @@
               <i id="button-edit-grid" class="settings-button fa-solid fa-plus" ></i>
               <i id="button-undo" class="settings-button fa-solid fa-rotate-left" tip="Undo"></i>
               <i id="button-color-settings" class="settings-button fas fa-palette" tip="Color settings"></i>
+              <i id="button-data-settings" class="settings-button fas fa-database" tip="Data Settings"></i>
             <!-- Table download button -->
               <i id="button-table" class="settings-button fa-solid fa-table" tip="Show data table"></i>
               <!-- Image download button -->
@@ -126,12 +127,6 @@
         <select id="select-select-county" class="form-select mb-2"  aria-label="US County select">
         </select>
       </div>
-          
-      <div class="plot-card-select">
-        <label for="select-measure">Measure</label>
-        <select id="select-measure" class="form-select mb-2" aria-label="Measure select" >
-        </select>
-      </div>
       
       <div class="plot-card-select">
         <label for="select-level">Spatial Level</label>
@@ -182,6 +177,14 @@ <h5><i class="bi bi-gear-fill me-2"></i>Color Scheme Settings</h5>
     </div>
   </div>
 
+  <div id="data-settings">
+    <div class="plot-card-select">
+      <label for="select-measure">Measure</label>
+      <select id="select-measure" class="form-select mb-2" aria-label="Measure select" >
+      </select>
+    </div>
+  </div>
+
   <!-- The map tooltip element, initially hidden -->
   <div id="map-tooltip">
     <div id="map-tooltip-topbar">