Merge pull request #474 from episphere/quantile-page-redesign

Quantile page redesign
episphere · Nov 4, 2024 · 381ca80 · 381ca80
2 parents 7d81ef9 + b019097
commit 381ca80
Show file tree

Hide file tree

Showing 17 changed files with 1,013 additions and 686 deletions.
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip
diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js
@@ -6,7 +6,7 @@ import choices from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
 
 import { EpiTrackerData } from "../utils/EpiTrackerData.js"
 import { State } from '../utils/State.js';
-import { addPopperTooltip, addTippys, colorRampLegendPivot, createOptionSorter, scaleGradient, popup, plotDataTable, createDropdownButton } from '../utils/helper.js';
+import { addPopperTooltip, addTippys, colorRampLegendPivot, createOptionSorter, scaleGradient, popup, plotDataTable, createDropdownButton, minorPopup } from '../utils/helper.js';
 import { hookCheckbox, hookSelectChoices } from '../utils/input2.js';
 import { createChoroplethPlot } from '../plots/mapPlots.js';
 import { toggleLoading } from '../utils/download.js';
@@ -301,18 +301,19 @@ 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;
-    })
+    // 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(
@@ -327,11 +328,6 @@ class MapApplication {
         return { value: k, label: div.outerHTML };
       });
 
-    this.elems.buttonColorSettingsClose.addEventListener("click", () => {
-      tooltipShown = false;
-      colorSettingsTooltip.hide()
-    });
-
     const outlierCutoffRange = document.getElementById("outlier-cutoff-range");
     const outlierCutoffRangeText = document.getElementById(
       "outlier-cutoff-range-text"
@@ -342,6 +338,9 @@ class MapApplication {
     });
     outlierCutoffRange.value = this.state.outlierCutoff;
     outlierCutoffRangeText.innerText = "±" + this.state.outlierCutoff + "σ";
+
+    minorPopup(this.elems.innerDashboard, this.elems.buttonColorSettings, this.elems.colorSettings, "Color Settings");
+
   }
 
   async createMapTooltip() {