From cd7874064a58d14e8bf0ee3d3aa0f2802f0d5f57 Mon Sep 17 00:00:00 2001
From: Jakob Buverud <jbuverud@gmail.com>
Date: Fri, 29 Jun 2018 15:29:46 +0200
Subject: [PATCH] Firefox fixes (#1487)

* Added UI fixes for firefox (web and mobile). Re-added temporary storing of timestamp selected by time slider input (so that its value is not reset by accidental mouseover of the history graph). This temporary value is now stored in redux state instead of internally in the slider component.

* Variable rename
---
 web/src/components/timeslider.js |  4 ++--
 web/src/main.js                  | 10 +++++-----
 web/src/reducers/index.js        | 18 ++++++++++++++++++
 web/src/styles.css               |  8 ++++++--
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/web/src/components/timeslider.js b/web/src/components/timeslider.js
index dd69c5b9ee..4fb16db624 100644
--- a/web/src/components/timeslider.js
+++ b/web/src/components/timeslider.js
@@ -107,8 +107,8 @@ export default class TimeSlider {
     }
   }
 
-  selectedIndex(index) {
-    this._selectedIndex = index;
+  selectedIndex(index, previousIndex) {
+    this._selectedIndex = index || previousIndex;
     this.render();
     return this;
   }
diff --git a/web/src/main.js b/web/src/main.js
index c85df18d03..1c964f976b 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -805,12 +805,12 @@ if (typeof zoneMap !== 'undefined') {
   zoneMap
     .onSeaClick(() => {
       dispatchApplication('showPageState', 'map'); // TODO(olc): infer in reducer?
-      dispatchApplication('selectedZoneName', undefined);
+      dispatch({type: 'UPDATE_SELECTED_ZONE', payload: {selectedZoneName: undefined}});
     })
     .onCountryClick((d) => {
       dispatchApplication('isLeftPanelCollapsed', false);
       dispatchApplication('showPageState', 'country'); // TODO(olc): infer in reducer?
-      dispatchApplication('selectedZoneName', d.countryCode);
+      dispatch({type: 'UPDATE_SELECTED_ZONE', payload: {selectedZoneName: d.countryCode}});
     });
 }
 
@@ -1066,7 +1066,7 @@ function renderHistory(state) {
     .render();
 
 
-  zoneDetailsTimeSlider.onChange(selectedZoneTimeIndex => dispatchApplication('selectedZoneTimeIndex', selectedZoneTimeIndex)).render();
+  zoneDetailsTimeSlider.onChange(selectedZoneTimeIndex => dispatch({type: 'UPDATE_SLIDER_SELECTED_ZONE_TIME', payload: {selectedZoneTimeIndex: selectedZoneTimeIndex}})).render();
 
   const firstDatetime = history[0] && moment(history[0].stateDatetime).toDate();
   [countryHistoryCarbonGraph, countryHistoryPricesGraph, countryHistoryMixGraph].forEach((g) => {
@@ -1257,7 +1257,6 @@ observe(state => state.application.showPageState, (showPageState, state) => {
 // Observe for zone change (for example after map click)
 observe(state => state.application.selectedZoneName, (selectedZoneName, state) => {
   if (!selectedZoneName) { return; }
-
   // Analytics
   thirdPartyServices.track('countryClick', { countryCode: selectedZoneName });
 
@@ -1266,6 +1265,7 @@ observe(state => state.application.selectedZoneName, (selectedZoneName, state) =
   renderGauges(state);
   renderContributors(state);
   renderHistory(state);
+  zoneDetailsTimeSlider.selectedIndex(null, null);
 
   // Fetch history if needed
   tryFetchHistory(state);
@@ -1288,7 +1288,7 @@ observe(state => state.application.selectedZoneTimeIndex, (i, state) => {
   renderCountryTable(state);
   renderOpenTooltips(state);
   [countryHistoryCarbonGraph, countryHistoryMixGraph, countryHistoryPricesGraph, zoneDetailsTimeSlider].forEach((g) => {
-    g.selectedIndex(i);
+    g.selectedIndex(i, state.application.previousSelectedZoneTimeIndex);
   });
 });
 // Observe for color blind mode changes
diff --git a/web/src/reducers/index.js b/web/src/reducers/index.js
index 0dbb28a5b5..9a2746316a 100644
--- a/web/src/reducers/index.js
+++ b/web/src/reducers/index.js
@@ -28,6 +28,7 @@ const initialApplicationState = {
   searchQuery: null,
   selectedZoneName: null,
   selectedZoneTimeIndex: null,
+  previousSelectedZoneTimeIndex: null,
   solarEnabled: Cookies.get('solarEnabled') === 'true' || false,
   useRemoteEndpoint: document.domain === '' || isLocalhost,
   windEnabled: Cookies.get('windEnabled') === 'true' || false,
@@ -70,6 +71,23 @@ const applicationReducer = (state = initialApplicationState, action) => {
       return state;
     }
 
+    case 'UPDATE_SELECTED_ZONE': {
+      const { selectedZoneName } = action.payload;
+      return Object.assign(state, {
+        selectedZoneName,
+        selectedZoneTimeIndex: null,
+        previousSelectedZoneTimeIndex: null,
+      });
+    }
+
+    case 'UPDATE_SLIDER_SELECTED_ZONE_TIME': {
+      const { selectedZoneTimeIndex } = action.payload;
+      return Object.assign(state, {
+        selectedZoneTimeIndex,
+        previousSelectedZoneTimeIndex: selectedZoneTimeIndex,
+      });
+    }
+
     default:
       return state;
   }
diff --git a/web/src/styles.css b/web/src/styles.css
index 1fa166b983..744e05b2cb 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -428,7 +428,8 @@ body {
     display: flex;
     line-height: 1.2rem;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
+    overflow: hidden;
 }
 
 .mobile-info-tab {
@@ -1531,7 +1532,7 @@ sub {
     width: 100%;
     border-top: 1px solid lightgray;
     text-align: center;
-    overflow-y: hidden;
+    overflow-y: visible;
 }
 
 .zone-time-slider .time-slider-axis-container{
@@ -1557,6 +1558,7 @@ sub {
     background: transparent; 
     padding: 0;
     overflow: visible;
+    border: none;
   }
   
   .time-slider-input:focus {
@@ -1751,6 +1753,8 @@ sub {
     .country-panel {
        margin: 0;
        padding: 0 14px 0 20px;
+       -moz-user-select: none; /* Selection disabled on firefox to avoid android "select all" button popping up when pressing graphs */
+
     }
     .country-table-header {
         position: relative;