From 7fa17d81acf86d18895ff22389faf0ecb5125af2 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 12 Oct 2019 10:10:33 +0100
Subject: [PATCH 1/4] Some perf improvements when updating the layers list,
 also throttled color picker.

---
 package.json                         |  1 +
 src/components/fields/ColorField.jsx | 12 +++++++-
 src/components/layers/LayerList.jsx  | 45 ++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b132a216..287bc973 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "detect-browser": "^4.5.0",
     "file-saver": "^1.3.8",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
+    "lodash": "^4.17.15",
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index f1f60776..7a974f1c 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
+import lodash from 'lodash';
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -23,6 +24,15 @@ class ColorField extends React.Component {
     pickerOpened: false
   }
 
+  constructor () {
+    super();
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
+  }
+
+  onChangeNoCheck (v) {
+    this.props.onChange(formatColor(v));
+  }
+
   //TODO: I much rather would do this with absolute positioning
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
@@ -82,7 +92,7 @@ class ColorField extends React.Component {
       }}>
       <ChromePicker
         color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
       />
       <div
         className="maputnik-color-picker-offset"
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 0b3af807..b99edc25 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import lodash from 'lodash';
 
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
@@ -116,6 +117,50 @@ class LayerListContainer extends React.Component {
     return collapsed === undefined ? true : collapsed
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    // Always update on state change
+    if (this.state !== nextState) {
+      return true;
+    }
+
+    // This component tree only requires id and visibility from the layers
+    // objects
+    function getRequiredProps (layer) {
+      const out = {
+        id: layer.id,
+      };
+
+      if (layer.layout) {
+        out.layout = {
+          visibility: layer.layout.visibility
+        };
+      }
+      return out;
+    }
+    const layersEqual = lodash.isEqual(
+      nextProps.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps),
+    );
+
+    function withoutLayers (props) {
+      const out = {
+        ...props
+      };
+      delete out['layers'];
+      return out;
+    }
+
+    // Compare the props without layers because we've already compared them
+    // efficiently above.
+    const propsEqual = lodash.isEqual(
+      withoutLayers(this.props),
+      withoutLayers(nextProps)
+    );
+
+    const propsChanged = !(layersEqual && propsEqual);
+    return propsChanged;
+  }
+
   render() {
 
     const listItems = []

From db56ad8b2ef45b8eb263c936bb16a4e1deda627c Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 12 Oct 2019 10:16:46 +0100
Subject: [PATCH 2/4] Remove duplicate formatColor call.

---
 src/components/fields/ColorField.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index 7a974f1c..9cb44f81 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -30,7 +30,7 @@ class ColorField extends React.Component {
   }
 
   onChangeNoCheck (v) {
-    this.props.onChange(formatColor(v));
+    this.props.onChange(v);
   }
 
   //TODO: I much rather would do this with absolute positioning

From 0af828543b1ddebf3b004b65220fb66773019802 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 12 Oct 2019 12:06:33 +0100
Subject: [PATCH 3/4] Disable minify

---
 config/webpack.production.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js
index f69a605e..e84fcb59 100644
--- a/config/webpack.production.config.js
+++ b/config/webpack.production.config.js
@@ -18,6 +18,9 @@ module.exports = {
     filename: '[name].[contenthash].js',
     chunkFilename: '[contenthash].js'
   },
+  optimization:{
+    minimize: false,
+  },
   resolve: {
     extensions: ['.js', '.jsx']
   },

From 6e0432ff5e98857593d64c6b563861dac267787f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 13 Oct 2019 11:43:23 +0100
Subject: [PATCH 4/4] Added back in minifcation.

---
 config/webpack.production.config.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js
index e84fcb59..f69a605e 100644
--- a/config/webpack.production.config.js
+++ b/config/webpack.production.config.js
@@ -18,9 +18,6 @@ module.exports = {
     filename: '[name].[contenthash].js',
     chunkFilename: '[contenthash].js'
   },
-  optimization:{
-    minimize: false,
-  },
   resolve: {
     extensions: ['.js', '.jsx']
   },