Merge pull request #848 from cmu-delphi/sgratzl/fixes

fix: reset highlight region in line chart

Author: sgratzl

src/components/tooltipUtils.js

@@ -48,15 +48,33 @@ function getOrInitPopper() {
     ],
   });
 
-  const update = (x = 0, y = 0, width = 0, height = 0) => {
+  const update = (id, x = 0, y = 0) => {
     bb.x = x;
     bb.y = y;
-    bb.width = width;
-    bb.height = height;
+    bb.width = 0;
+    bb.height = 0;
     popper.style.display = '';
+    const currentlyActive = popper.dataset.active;
+    if (currentlyActive !== id) {
+      // hide the old content
+      const old = currentlyActive ? popper.querySelector(`[data-id="${currentlyActive}"]`) : null;
+      if (old) {
+        old.setAttribute('hidden', '');
+      }
+      popper.dataset.active = id;
+    }
     instance.update();
   };
   const hide = () => {
+    const currentlyActive = popper.dataset.active;
+    if (currentlyActive) {
+      // hide the old content
+      const old = popper.querySelector(`[data-id="${currentlyActive}"]`);
+      if (old) {
+        old.setAttribute('hidden', '');
+      }
+      popper.dataset.active = ''; // hide active one
+    }
     if (popper.style.display !== 'none') {
       popper.style.display = 'none';
       return true;
@@ -105,8 +123,17 @@ export function createVegaTooltipAdapter(svelteComponent, initialExtraProps = {}
     return undefined;
   }
   let destroyed = false;
+  /**
+   * @type {import('svelte').SvelteComponent | null}
+   */
   let tooltip = null;
+  /**
+   * @type {HTMLElement | null}
+   */
+  let tooltipElem = null;
   let extraProps = initialExtraProps;
+  // unique id for each tooltip content
+  const uniqueID = Math.random().toString().substr(2, 8);
 
   function tooltipHandler(_, event, item, value) {
     if (destroyed) {
@@ -122,24 +149,28 @@ export function createVegaTooltipAdapter(svelteComponent, initialExtraProps = {}
         // ignore
         return;
       }
-      if (hide() && tooltip) {
+      if (hide(uniqueID) && tooltip) {
         updateProps(tooltip, {
           hidden: true,
           view,
         });
       }
       return;
     }
-    update(event.clientX, event.clientY);
+    update(uniqueID, event.clientX, event.clientY);
     if (tooltip) {
+      tooltipElem.removeAttribute('hidden');
       updateProps(tooltip, {
         hidden: false,
         item: resolveDatum(item),
         view,
       });
     } else {
+      tooltipElem = popper.ownerDocument.createElement('div');
+      tooltipElem.dataset.id = uniqueID;
+      popper.appendChild(tooltipElem);
       tooltip = new svelteComponent({
-        target: popper,
+        target: tooltipElem,
         props: {
           ...extraProps,
           hidden: false,
@@ -155,6 +186,12 @@ export function createVegaTooltipAdapter(svelteComponent, initialExtraProps = {}
       tooltip.$destroy();
       tooltip = null;
     }
+    if (tooltipElem) {
+      tooltipElem.remove();
+      tooltipElem = null;
+    }
+    const { hide } = getOrInitPopper();
+    hide(uniqueID);
     destroyed = true;
   };
   tooltipHandler.update = (newExtraProps) => {

src/modes/mobile/HistoryLineChart.svelte

@@ -218,7 +218,7 @@
   let highlightRegion = null;
 
   function highlight(r) {
-    highlightRegion = r ? r.id : null;
+    highlightRegion = r ? r.id : region.value.id;
   }
 
   $: {

src/specs/mapSpec.js

@@ -404,8 +404,8 @@ export function generateStateSpec(options = {}) {
 
   // state, msa
   spec.layer.push(genLevelLayer(options));
-  spec.layer.push(genCreditsLayer());
   spec.layer.push(genLevelHoverLayer());
+  spec.layer.push(genCreditsLayer());
   return spec;
 }
 
@@ -434,8 +434,8 @@ export function generateNationSpec(options = {}) {
   });
 
   spec.layer.push(genLevelLayer(options));
-  spec.layer.push(genCreditsLayer());
   spec.layer.push(genLevelHoverLayer());
+  spec.layer.push(genCreditsLayer());
   return spec;
 }
 
@@ -453,10 +453,10 @@ export function generateStateMapWithCountyDataSpec(options = {}) {
   spec.datasets.state = stateJSON();
   spec.layer.push(genMegaLayer());
   spec.layer.push(genLevelLayer({ ...options, strokeWidth: 0 }));
-  spec.layer.push(genCreditsLayer());
   spec.layer.push(genStateBorderLayer());
   spec.layer.push(genMegaHoverLayer(true));
   spec.layer.push(genLevelHoverLayer({ strokeWidth: 1 }));
+  spec.layer.push(genCreditsLayer());
   return spec;
 }
 
@@ -502,11 +502,11 @@ export function generateCountiesOfStateSpec(state, { withStates = false, ...opti
     spec.layer[spec.layer.length - 1].transform.unshift(isState);
   }
   spec.layer.push(genLevelLayer(options));
-  spec.layer.push(genCreditsLayer());
   if (withStates) {
     spec.layer.push(genStateBorderLayer());
   }
   spec.layer.push(genLevelHoverLayer());
+  spec.layer.push(genCreditsLayer());
   return spec;
 }
 
@@ -540,7 +540,6 @@ export function generateRelatedCountySpec(county, options = {}) {
   spec.layer.push(genMegaLayer());
   spec.layer.push(genLevelLayer(options));
   spec.layer.push(genStateBorderLayer({ strokeWidth: 2 }));
-  spec.layer.push(genCreditsLayer());
   spec.layer.push(genMegaHoverLayer());
   spec.layer.push(genLevelHoverLayer());
   // highlight the selected one
@@ -556,6 +555,7 @@ export function generateRelatedCountySpec(county, options = {}) {
     },
     value: 1,
   };
+  spec.layer.push(genCreditsLayer());
   return spec;
 }