toggle bar & remove the tooltip

episphere · Nov 15, 2023 · c20d22f · c20d22f
1 parent 726182d
commit c20d22f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/src/utils/helper.js b/src/utils/helper.js
@@ -293,7 +293,7 @@ export function colorRampLegendMeanDiverge(values, schemeName, label=null, size=
     return colorRampLegend(colorScale, extent, label, [extent[0], mean, extent[1]], size)
 }
 
-const reSizePlots = (id, large, scale = 1.5) => {
+// const reSizePlots = (id, large, scale = 1.5) => {
     // const element = document.getElementById(id)
     // const svgElements = element.querySelectorAll('svg')
 
@@ -307,33 +307,36 @@ const reSizePlots = (id, large, scale = 1.5) => {
     //         svg.setAttribute("width", `${width / scale}px`);
     //     }
     // })
-}
+// }
 
-export function toggleSidebar() {
+export function toggleSidebar(callback) {
     const button = document.getElementById('sidebar-toggle');
     if (!button) return;
 
-    button.addEventListener('click', () => {
+    const handleClick = () => {
         const child = Array.from(button.childNodes)[1];
         if(child.classList.contains('fa-caret-left')) {
-            // reSizePlots(graphId, true);
             child.classList.remove('fa-caret-left');
             child.classList.add('fa-caret-right');
             document.getElementById('sidebar').classList.remove('col-xl-2');
             document.getElementById('sidebar').classList.add('d-none');
             document.getElementById('main-content').classList.remove('col-xl-10');
             document.getElementById('main-content').classList.add('col-xl-12');
+            callback?.(false)
         }
         else {
-            // reSizePlots(graphId, false);
+
             child.classList.remove('fa-caret-right');
             child.classList.add('fa-caret-left');
             document.getElementById('sidebar').classList.add('col-xl-2');
             document.getElementById('sidebar').classList.remove('d-none');
             document.getElementById('main-content').classList.add('col-xl-10');
             document.getElementById('main-content').classList.remove('col-xl-12');
+            callback?.(true)
         }
-    })
+    }
+
+    button.addEventListener('click', handleClick)
 }
 
 export function sort(items, key) {

diff --git a/src/utils/map.js b/src/utils/map.js
@@ -128,6 +128,7 @@ export async function start() {
   state = new State();
   state.defineDynamicProperty("data", []);
   state.defineDynamicProperty("mapZoom", 1);
+  state.defineDynamicProperty("isOpenSidebar", true);
 
   hookInputs();
   await initialDataLoad();
@@ -299,7 +300,10 @@ export async function start() {
     state.comparePrimary = params.comparePrimary;
   }
 
-  toggleSidebar();
+  toggleSidebar((value) => {
+    state.isOpenSidebar = value
+    update()
+  })
   addGroupDownloadButton(
     document.getElementById("group-download-container"),
     { data: state.mapData },
@@ -328,7 +332,8 @@ function update() {
     plotMapGrid(
       state.mapData,
       state.comparePrimary != "none" ? state.comparePrimary : null,
-      state.compareSeconday != "none" ? state.compareSecondary : null
+      state.compareSeconday != "none" ? state.compareSecondary : null,
+      state.isOpenSidebar
     );
   if (state.plotMode == "map") {
     plotFunction();
@@ -394,7 +399,7 @@ function generateCombinations(arr1, arr2, varName1, varName2) {
   return combinations;
 }
 
-function plotMapGrid(data, rowField, columnField) {
+function plotMapGrid(data, rowField, columnField, isOpenSidebar) {
   // let currentData;
   // if (state.selectCounty != "All") {
   //   currentData = data.filter(d => d.county_fips == state.selectCounty)
@@ -471,7 +476,10 @@ function plotMapGrid(data, rowField, columnField) {
   }
 
   const bbox = mapsContainer.getBoundingClientRect();
-  const mapWidth = (0.9 * bbox.width) / nColumns;
+  const sidebar = document.getElementById('sidebar')
+  const sidebarBox = sidebar.getBoundingClientRect();
+  const sideBarWidth = isOpenSidebar ? 0 : sidebarBox.width
+  const mapWidth = ((0.9 * bbox.width) / nColumns ) + sideBarWidth
 
   const mean = d3.mean(data, (d) => d[state.measure]);
   const domain = d3.extent(data, (d) => d[state.measure]);
@@ -666,8 +674,11 @@ function addIndividualDownloadButton(element, config) {
   buttonElement
     .querySelector("#download-plot-png")
     .addEventListener("click", () => {
+      const clonedElement = element.cloneNode(true);
+      const tooltipElement =  clonedElement.querySelector('.custom-tooltip')
+      tooltipElement && tooltipElement.remove()
       const filename = baseFilename + ".png";
-      const downloadElement = prepareMapElementForDownload(element, config);
+      const downloadElement = prepareMapElementForDownload(clonedElement, config);
       const tempWrapper = document.createElement("div");
       tempWrapper.appendChild(downloadElement);
       state.mapsContainer.appendChild(tempWrapper);
@@ -716,6 +727,8 @@ function addGroupDownloadButton(element, config) {
     .addEventListener("click", () => {
       const filename = baseFilename + ".png";
       const maps = document.getElementById("maps-container").cloneNode(true);
+      const tooltipElement = maps.querySelector('.custom-tooltip')
+      tooltipElement && tooltipElement.remove()
       const downloadElement = prepareMapElementForDownload(maps, config);
       const tempWrapper = document.createElement("div");
       tempWrapper.appendChild(downloadElement);

diff --git a/static/css/epitracker.css b/static/css/epitracker.css
@@ -2440,10 +2440,6 @@ button.previous-btn {
   background-color: #fff;
 }
 
-/* #maps-container {
-
-} */
-
 .legend-wrapper {
   background: white;
   border-radius: 4px;
@@ -2498,9 +2494,6 @@ button.previous-btn {
   border-radius: 8px 0 0 8px;
 } */
 
-/* #maps-container {
-
-} */
 
 .legend-wrapper {
   background: white;