Finished main functionality of map page image downloading

episphere · Jan 11, 2025 · cef0eb2 · cef0eb2
1 parent 5823a55
commit cef0eb2
Show file tree

Hide file tree

Showing 8 changed files with 332 additions and 496 deletions.
diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js
diff --git a/src/plots/mapPlots.js b/src/plots/mapPlots.js
@@ -121,7 +121,6 @@ export function createChoroplethPlot(
   if (options.width) plotOptions.width = options.width;
   if (options.height) plotOptions.height = options.height;
 
-
   const figure = document.createElement("figure");
   const plot = Plot.plot(plotOptions);
   const plotWrapper = document.createElement("svg");

diff --git a/src/utils/download.js b/src/utils/download.js
@@ -56,7 +56,7 @@ function downloadImage(image, fileName) {
   URL.revokeObjectURL(imageURL);
 }
 
-export function downloadElementAsImage(element, filename, format = "png") {
+export async function downloadElementAsImage(element, filename, format = "png") {
   const scale = 1.5;
 
   const toImage = format == "png" ? domToImage.toPng : domToImage.toSvg;
@@ -73,26 +73,24 @@ export function downloadElementAsImage(element, filename, format = "png") {
   //   newTab.document.write('<img src="' + dataUrl + '" alt="Image">');
   // })
 
-  toImage(element, {
+  const dataUrl = await toImage(element, {
     width: element.clientWidth * scale,
     height: element.clientHeight * scale,
     style: {
       transform: 'scale(' + scale + ')',
       transformOrigin: 'top left'
     }
-  }).then((dataUrl) => {
-    fetch(dataUrl)
-      .then(res => res.blob())
-      .then(blob => {
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${filename}.${format}`;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-      });
-  })
+  });
+
+  const result = await fetch(dataUrl);
+  const blob = await result.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${filename}.${format}`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
 }
 
 export function downloadGraph(graphId, fileName) {

diff --git a/src/utils/helper.js b/src/utils/helper.js
@@ -745,6 +745,20 @@ const reSizePlots = (id, large, scale = 1.5) => {
 //   })
 // }
 
+export function getCombinedBoundingBox(selection) {
+  const boxes = selection.nodes().map(node => node.getBBox());
+
+  const xExtent = d3.extent(boxes, d => d.x).concat(d3.extent(boxes, d => d.x + d.width));
+  const yExtent = d3.extent(boxes, d => d.y).concat(d3.extent(boxes, d => d.y + d.height));
+
+  return {
+    x: xExtent[0],
+    y: yExtent[0],
+    width: xExtent[1] - xExtent[0],
+    height: yExtent[1] - yExtent[0]
+  };
+}
+
 export function initSidebar() {
   // TODO: Remove 'ex' prefixes.
   const button = document.getElementById("sidebar-toggle");

diff --git a/static/css/epitracker-map.css b/static/css/epitracker-map.css
@@ -76,14 +76,17 @@ footer {
 .grid-card-topbar-buttons-lrg {
   display: flex;
   gap: 8px;
-  color: #848484;
-  opacity: .4;
+  /* opacity: .4; */
   font-size: 24px;
-  color: #848484;
   margin-left: 12px;
   margin-top: 8px;
 }
 
+.grid-card-topbar-buttons-lrg .highlightable-button {
+  opacity: .5
+
+}
+
 .grid-card-topbar-title {
   font-size: .8em;
   font-weight: bold;

diff --git a/static/css/epitracker-quantile.css b/static/css/epitracker-quantile.css
@@ -115,44 +115,7 @@
   position: relative;
 }
 
-#img-template {
-  z-index: 99999;
-  display: flex; 
-  flex-direction: column;
-  min-width: 640px;
-  width: fit-content;
-  height: fit-content;
-  background-color: white;
-  gap: 20px;
-  padding: 30px;
-}
 
-#img-title {
-  font-weight: bold;
-  font-size: .9em;
-  text-align: center;
-}
-
-#img-legend {
-  width: 100%;
-}
-
-#img-plot {
-  height: 800px;
-}
-
-#img-source {
-  font-size: .8em;
-  font-style: italic;
-}
-
-#img-legend .legend-check path {
-  visibility: hidden;
-}
-
-#img-legend .legend-check {
-  font-size: .9em;
-}
 
 #title {
   display: block;

diff --git a/static/css/epitracker.css b/static/css/epitracker.css
@@ -2635,10 +2635,6 @@ button.previous-btn {
   cursor: pointer;
 }
 
-.map-grid-cell .dropdown-toggle {
-  opacity: 0.4;
-}
-
 #color-legend { 
   /* opacity: .3; */
   background: white;
@@ -2716,10 +2712,6 @@ button.previous-btn {
   cursor: pointer;
 }
 
-.map-grid-cell .dropdown-toggle {
-  opacity: 0.4;
-}
-
 /* 
 .map-grid-cell:hover .dropdown {
   opacity: 1;
@@ -3209,6 +3201,72 @@ g[aria-label="geo"]:first-of-type > path:not(:first-of-type) {
   font-style: italic;
 }
 
+#img-template {
+  z-index: 99999;
+  display: flex; 
+  flex-direction: column;
+  min-width: 640px;
+  width: fit-content;
+  height: fit-content;
+  background-color: white;
+  gap: 20px;
+  padding: 30px;
+
+}
+
+#img-title {
+  font-weight: bold;
+  font-size: .9em;
+  text-align: center;
+}
+
+#img-legend {
+  width: 100%;
+}
+
+#img-plot {
+  height: 800px;
+}
+
+#img-source {
+  font-size: .8em;
+  font-style: italic;
+}
+
+#img-maps-container {
+  display: grid;
+  width: 1600px;
+  height: 900px;
+}
+
+.img-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-card-title {
+  font-weight: bold;
+  font-size: .8em;
+}
+
+.img-card-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#img-legend .legend-check path {
+  visibility: hidden;
+}
+
+#img-legend .legend-check {
+  font-size: .9em;
+}
+
 g[aria-label="x-axis label"] {
   font-weight: bold;
   font-size: 14px;

diff --git a/visualization/map.html b/visualization/map.html
@@ -31,8 +31,6 @@
       </div>
 
       <div id="ex-dashboard">
-
-
         <!-- <div id="ex-infobar">
           <div id="color-legend" >
           </div>
@@ -177,7 +175,7 @@ <h5><i class="bi bi-gear-fill me-2"></i>Color Scheme Settings</h5>
     </div>
   </div>
 
-  <div id="data-settings">
+  <div id="data-settings" style="display: none">
     <div class="plot-card-select">
       <label for="select-measure">Measure</label>
       <select id="select-measure" class="form-select mb-2" aria-label="Measure select" >
@@ -194,6 +192,15 @@ <h5><i class="bi bi-gear-fill me-2"></i>Color Scheme Settings</h5>
     <div id="map-tooltip-plot"></div>
   </div>
 
+  <div style="position: absolute; left: 0; top:0; opacity: 0; pointer-events:none;">
+    <div id="img-template">
+      <div id="img-title"></div>
+      <div id="img-maps-container"></div>
+      <div id="img-legend"></div>
+      <div id="img-source">Plot Generated by DCEG EpiTracker Cancer</div>
+    </div>
+  </div>
+
   <footer></footer>
 
   <script type="module">