Colormap editor refactor (#237)

* Changes how colormaps are loaded. Adds load and new buttons as well as a save button

* Adds a modal for creating a new colormap. Moves delete up in the comp tree. Fixes bug where the color picker would erroneously apply color to the map. Adds deselecting a cell

* Makes save work

* Apply now uses the selected cell

* Fixes #216. Save and apply update even if names do not change

* fixes tests that were broken when updating the colormap editor

* Starting colormap editor refactor. Lifts state from widget to editor

* Fixes typos, sets color on click again, remove eslint comments, fixes old refs

* Fixes tests.

* Adds some tests. Removes self=this workaround in favor of arrow function

* Adds some more tests to cm editor. Creates tests for new colormap modal

frontend/.eslintrc.json

@@ -18,7 +18,14 @@
     ],
     "rules": {
             "max-len": ["error", 150, 4],
-            "spaced-comment": ["error", "always"]
+            "spaced-comment": ["error", "always"],
+            "no-console": ["error", { 
+                "allow": ["warn", "error"]
+            }]
+    },
+    "globals": {
+        "vcs": true
     },
     "root": true
+
 }

frontend/src/js/components/Canvas.jsx

@@ -35,7 +35,8 @@ class Canvas extends Component{
     componentDidMount() {
         try{
             this.canvas = vcs.init(this.refs.div);
-            this.token = PubSub.subscribe(PubSubEvents.resize, this.resetCanvas.bind(this))
+            this.resize_token = PubSub.subscribe(PubSubEvents.resize, this.resetCanvas.bind(this))
+            this.colormap_token = PubSub.subscribe(PubSubEvents.colormap_update, this.handleColormapUpdate.bind(this))
         }
         catch(e){
             if(e instanceof ReferenceError && e.message == "vcs is not defined"){
@@ -137,6 +138,19 @@ class Canvas extends Component{
         this.forceUpdate()
     }
 
+    handleColormapUpdate(msg, name){
+        let needs_render = false
+        for(let plot of this.props.plotGMs){
+            if(plot.colormap === name){
+                needs_render = true
+                break
+            }
+        }
+        if(needs_render){
+            this.forceUpdate()
+        }
+    }
+
     render() {
         return (
             <div className={this.props.onTop ? "cell-stack-top" : "cell-stack-bottom"}>

frontend/src/js/components/PlotTools/PlotTools.jsx

@@ -61,7 +61,9 @@ class PlotTools extends Component{
                         <i className='glyphicon glyphicon-share-alt'></i>
                     </button>
                 </div>
-                <ColormapEditor show={this.state.showColormapEditor} close={() => this.setState({showColormapEditor: false})}/>
+                {this.state.showColormapEditor && 
+                    <ColormapEditor show={this.state.showColormapEditor} close={() => this.setState({showColormapEditor: false})}/>
+                }
             </div>
         )
     }