Time Graph doesn't display on first load, edited size

Author: rhansolo

src/App.svelte

@@ -200,7 +200,13 @@
 
   currentRegion.subscribe(r => {
     updateTimeSliceCache($currentSensor, $currentLevel, r);
-    r ? toggleGraphShowStatus(null, true) : toggleGraphShowStatus(null, false);
+    if (!$mounted) {
+      toggleGraphShowStatus(null, false);
+    } else if (r) {
+      toggleGraphShowStatus(null, true);
+    } else {
+      toggleGraphShowStatus(null, false);
+    }
   });
 
   onMount(_ => {
@@ -301,6 +307,7 @@
         signalType,
     );
   }
+
   // Keep the URL updated with the current state
   currentSensor.subscribe(s => updateURIParameters(s, $currentLevel, $currentRegion, $currentDate, $signalType));
   currentLevel.subscribe(l => updateURIParameters($currentSensor, l, $currentRegion, $currentDate, $signalType));
@@ -402,8 +409,8 @@
   }
 
   .graph-toggle-button {
-    width: 30px;
-    height: 30px;
+    width: 70px;
+    height: 35px;
     cursor: pointer;
     background-color: transparent;
     padding: 0;
@@ -416,12 +423,6 @@
     background-color: #eee;
   }
 
-  img.toggle-button-icon {
-    width: 24px;
-    height: 24px;
-    background: transparent;
-  }
-
   button.graph-toggle-button .button-tooltip {
     visibility: hidden;
     width: 120px;
@@ -512,7 +513,7 @@
       aria-label="show time series"
       on:click={event => toggleGraphShowStatus(false)}>
       <span class="button-tooltip">Show time series</span>
-      <img class="toggle-button-icon" src="./assets/imgs/line-graph-icon.png" alt="" />
+      <b>Time Graph</b>
     </button>
   </div>
 {/if}

src/Graph.svelte

@@ -279,8 +279,8 @@
 
 <style>
   .graph {
-    max-height: 351px;
-    max-width: 360px;
+    max-height: 390px;
+    max-width: 400px;
   }
 
   .graph-title {

src/MapBox.svelte

@@ -97,22 +97,6 @@
       if (sens.name === 'Deaths (JHU)') {
         const death_num = e.features[0].properties.value;
         const ratio = e.features[0].properties.value1;
-        /*
-        body = `
-          <div class="map-popup-region-value-container">
-            Population: ${Population} <br>
-            Deaths : ${death_num} <br>
-            ${sens.yAxis}:
-            <span class="map-popup-region-value" 
-                  style="background-color: ${fillColor}; 
-                        color: ${getTextColorBasedOnBackground(fillColor)};">
-              ${value.toFixed(2)}
-              ${sens.format === 'percent' ? '%' : ''}
-            </span>
-            
-          </div>
-        `;
-        */
         body = `
           <div class="map-popup-region-value-container">
             Population: ${Population} <br>
@@ -321,8 +305,8 @@
         if (geoIds.has(id + '000') && valueMappedMega.get(id) !== undefined) {
           d.properties.value = valueMappedMega.get(id)[0];
           if ($sensorMap.get($currentSensor).name === 'Deaths (JHU)') {
-            d.properties.value = valueMappedVals.get(id)[1];
-            d.properties.value1 = valueMappedVals.get(id)[0];
+            d.properties.value = valueMappedMega.get(id)[1];
+            d.properties.value1 = valueMappedMega.get(id)[0];
           }
         }
         if (geoIds.has(id + '000') && directionMappedMega.get(id) !== undefined) {