Adding new color scales to CCA. Closes #59.

web-server/js/color-mapper.js

@@ -6,6 +6,7 @@ rights in this software.
 
 function color_mapper() {
 
+  var selectedColorMapName = "nightcolormap";
   // Definition of our color maps
   var colorMaps = {
     // This is meant to be used against a black background
@@ -98,6 +99,10 @@ this.setUpColorMapsForAllColumns = function(colorMapName, columns) {
   }
 }
 
+this.createSelectedColorMap = function(min, max) {
+  return createColorMap(min, max, colorMaps[selectedColorMapName].scalar, colorMaps[selectedColorMapName].RGBs);
+}
+
 function createColorMap(min, max, scalar, rgb) {
   var range = max - min;
   var domain = [];
@@ -112,6 +117,14 @@ this.getClassName = function(color_map_name) {
   return colorMaps[color_map_name].className;
 }
 
+this.getAllClassNames = function() {
+  var allClassNames = '';
+  $.each(colorMaps, function(k,v){
+    allClassNames += (v.className + ' ');
+  });
+  return allClassNames;
+}
+
 this.addSwitcher = function(container, bookmark, callback) {
   // No need to switch if there's only a single color map
   if(Object.keys(colorMaps).length > 1) {
@@ -129,20 +142,22 @@ this.addSwitcher = function(container, bookmark, callback) {
     var selected;
     if( bookmark["colormap"] != null) {
       selected = colors.filter("[data-colormap='" + bookmark["colormap"] + "']");
+      selectedColorMapName = bookmark["colormap"];
     } else {
       selected = colors.first();
     }
     selected.addClass("selected");
 
     // Setting up color scale switcher interaction
     colors.click(function(){
-      var colorMapName = this.getAttribute("data-colormap");
+      // Do nothing if click was on already selected item
       if(!$(this).hasClass("selected")) {
+        selectedColorMapName = this.getAttribute("data-colormap");
         colors.removeClass("selected");
         $(this).addClass("selected");
-      }
-      if(callback) {
-        callback(colorMapName);
+        if(callback) {
+          callback(this.getAttribute("data-colormap"));
+        }
       }
     });
 

web-server/js/table-cca-simulation.js

@@ -11,33 +11,7 @@ function cca2_simulation_table(parameters, server_root, workerId)
   this.variable_callbacks = [];
   this.sort_order_callbacks = [];
   this.index_column = parameters.index_column;
-
-  // Setup color maps ...
-  this.colors = {};
-  this.colors["simulation"] = [];
-  this.colors["simulation"].push(d3.scale.linear().domain([ parameters.min[parameters.index_column], parameters.max[parameters.index_column] ]).range(["blue", "red"]));
-
-  this.colors["input"] = [];
-  for(var j = 0; j != parameters.input_columns.length; ++j)
-    this.colors["input"].push(
-                              d3.scale.linear().domain(
-                                                       [
-                                                        parameters.min[ parameters.input_columns[j] ],
-                                                        parameters.max[ parameters.input_columns[j] ]
-                                                       ]
-                                                      ).range(["blue", "red"])
-                             );
-
-  this.colors["output"] = [];
-  for(var j = 0; j != parameters.output_columns.length; ++j)
-    this.colors["output"].push(
-                               d3.scale.linear().domain(
-                                                        [
-                                                         parameters.min[ parameters.output_columns[j] ],
-                                                         parameters.max[ parameters.output_columns[j] ]
-                                                        ]
-                                                       ).range(["blue", "red"])
-                              );
+  var colorMapper = parameters.colorMapper;
 
   // Setup SlickGrid columns
   var columns = [];
@@ -50,7 +24,8 @@ function cca2_simulation_table(parameters, server_root, workerId)
     sortable: false,
     headerCssClass: "headerSimId",
     cssClass: "rowSimId",
-    colorMap: d3.scale.linear().domain([ parameters.min[parameters.index_column], parameters.max[parameters.index_column] ]).range(["blue", "red"]),
+    columnMin: parameters.min[parameters.index_column],
+    columnMax: parameters.max[parameters.index_column],
   });
 
   // Now add the input variables.
@@ -67,7 +42,8 @@ function cca2_simulation_table(parameters, server_root, workerId)
       sortable: false,
       headerCssClass: "headerInput",
       cssClass: "rowInput",
-      colorMap: d3.scale.linear().domain([ parameters.min[ parameters.input_columns[j] ], parameters.max[ parameters.input_columns[j] ] ]).range(["blue", "red"]),
+      columnMin: parameters.min[ parameters.input_columns[j] ],
+      columnMax: parameters.max[ parameters.input_columns[j] ],
     });
   }
 
@@ -85,7 +61,8 @@ function cca2_simulation_table(parameters, server_root, workerId)
       sortable: false,
       headerCssClass: "headerOutput",
       cssClass: "rowOutput",
-      colorMap: d3.scale.linear().domain([ parameters.min[ parameters.output_columns[j] ], parameters.max[ parameters.output_columns[j] ] ]).range(["blue", "red"]),
+      columnMin: parameters.min[ parameters.output_columns[j] ],
+      columnMax: parameters.max[ parameters.output_columns[j] ],
     });
   }
 
@@ -103,10 +80,21 @@ function cca2_simulation_table(parameters, server_root, workerId)
       sortable: false,
       headerCssClass: "headerOther",
       cssClass: "rowOther",
-      colorMap: d3.scale.linear().domain([ parameters.min[ parameters.other_columns[j] ], parameters.max[ parameters.other_columns[j] ] ]).range(["blue", "red"]),
+      columnMin: parameters.min[ parameters.other_columns[j] ],
+      columnMax: parameters.max[ parameters.other_columns[j] ],
     });
   }
 
+  // Set the default color map based on parameters during init, or use night if not initialized
+  var default_color_map = "nightcolormap";
+  if (parameters.colormap != null) {
+    default_color_map = parameters.colormap;
+  }
+  // Set up the background class for the scatterplot viewer
+  $('#scatterplot-pane').removeClass(colorMapper.getAllClassNames()).addClass(colorMapper.getClassName(default_color_map));
+
+  colorMapper.setUpColorMapsForAllColumns(default_color_map, columns);
+
   // Add sort button to each column
   for(var j = 0; j < columns.length; ++j)
   {
@@ -380,6 +368,34 @@ function cca2_simulation_table(parameters, server_root, workerId)
 
   }
 
+  this.updateColorMap = function(colorMapName) {
+    // Swap in the new color map
+    colorMapper.setUpColorMapsForAllColumns(colorMapName, columns);
+    // Update grid with new color map and make it show the new colors
+    if( grid ) {
+      grid.setColumns(columns);
+      // Calling .setData() forces the grid to re-render everything, including currently visible rows. Other methods are more efficient but don't update the currently visible rows.
+      grid.setData(loader.data);
+      grid.render();
+    }
+    // Set up the background class for the scatterplot viewer
+    $('#scatterplot-pane').removeClass(colorMapper.getAllClassNames()).addClass(colorMapper.getClassName(colorMapName));
+    // // Change the colors of waveforms in the viewer and dendrogram
+    // self.setWaveformColorsPerSelectedColumn();
+  }
+
+  this.getSelectedColumn = function() {
+    // get the currently selected column
+    var currentlySelectedColumn = -1;
+    for(var i = 0, len = columns.length; i < len; i++) {
+      if (columns[i].headerCssClass.indexOf(" selected") > -1) {
+          currentlySelectedColumn = columns[i];
+          break;
+      }
+    }
+    return currentlySelectedColumn;
+  }
+
   this.update = function(parameters)
   {
     if(parameters.highlight)

web-server/js/table-timeseries-simulation.js

@@ -76,9 +76,9 @@ function timeseries_simulation_table(parameters, server_root, workerId)
   var default_color_map = "nightcolormap";
   if (parameters.colormap != null) {
     default_color_map = parameters.colormap;
-    // Set up the background class for the waveform viewer
-    parameters.waveform_viewer.container.attr("class", colorMapper.getClassName(default_color_map));
   }
+  // Set up the background class for the waveform viewer
+  parameters.waveform_viewer.container.attr("class", colorMapper.getClassName(default_color_map));
 
   colorMapper.setUpColorMapsForAllColumns(default_color_map, columns);
 

web-server/style/desktop.css

@@ -940,4 +940,33 @@ select
 }
 #status-messages .technical-details {
 
+}
+
+
+#color-switcher {
+  float: right;
+  font-weight: bold;
+  margin: 9px;
+}
+.cca #color-switcher {
+  position: absolute;
+  right: 0px;
+  bottom: 5px;
+}
+#color-switcher .color {
+  background-color: #DBD9EB;
+  padding: 4px;
+}
+.cca #color-switcher .color {
+  background-color: white;
+}
+#color-switcher .color:hover {
+  cursor: pointer;
+}
+#color-switcher .selected:hover {
+  cursor: default;
+}
+#color-switcher .selected {
+  background-color: #7767B0 !important;
+  color: white;
 }

web-server/style/model-cca.css

@@ -216,3 +216,15 @@ rights in this software.
   color: white;
 }
 
+#scatterplot-pane.nightMode {
+  background-color: #333333;
+}
+#scatterplot-pane.nightMode text {
+  fill: white;
+}
+#scatterplot-pane.dayMode {
+  background-color: white;
+}
+#scatterplot-pane.dayMode text {
+  fill: black;
+}

web-server/style/model-xyce-time-series.css

@@ -123,22 +123,3 @@ rights in this software.
   fill-opacity: 0.7;
 }
 
-#color-switcher {
-  float: right;
-  font-weight: bold;
-  margin: 9px;
-}
-#color-switcher .color {
-  background-color: #DBD9EB;
-  padding: 4px;
-}
-#color-switcher .color:hover {
-  cursor: pointer;
-}
-#color-switcher .selected:hover {
-  cursor: default;
-}
-#color-switcher .selected {
-  background-color: #7767B0;
-  color: white;
-}

web-server/templates/model-cca3.html

@@ -19,6 +19,7 @@
     <script type="text/javascript" src="{{server-root}}js/sort-table.js"></script>
     <script type="text/javascript" src="{{server-root}}js/modernizr.js"></script>
     <script type="text/javascript" src="{{server-root}}js/bookmarker.js"></script>
+    <script type="text/javascript" src="{{server-root}}js/color-mapper.js"></script>
 
     <!-- SlickGrid sources -->
     <script type="text/javascript" src="{{server-root}}js/slickGrid/jquery.event.drag-2.0.min.js"></script>
@@ -41,7 +42,7 @@
 
   </head>
 
-  <body>
+  <body class="cca">
     <div class="ui-layout-north">
 {{> header}}
 
@@ -56,6 +57,7 @@
           </div>
           <h2>{{name}}</h2>
           <div id="model-desc">{{description}}</div>
+          <div id="color-switcher-container"></div>
           <div id="status-messages" style="display: none;">
             <div class='error-heading'>Oops, this model is not ready yet.</div>
             <div class='error-description'>We are probabably building it for your right now. We'll load it for you automatically once it's ready. Look up at the status bar for progress information and more details.</div>
@@ -146,6 +148,21 @@ <h2>Errors</h2>
       {
         // Start up a bookmark manager
         var bookmarker = new bookmark_manager("{{server-root}}", "{{#full-project}}{{_id}}{{/full-project}}", "{{_id}}");
+        var bookmark = bookmarker.getState();
+
+        // Start up a color mapper
+        var colorMapper = new color_mapper();
+        // Add controls for switching between different color maps
+        colorMapper.addSwitcher($('#color-switcher-container'), bookmark, updateColorMap);
+        // Callback function called by colorMapper when user clicks on a different color map choice
+        function updateColorMap(colorMapName){
+          if(cca_simulation_table_instance != null && colorMapName != null) {
+            cca_simulation_table_instance.updateColorMap(colorMapName);
+            cca_scatterplot.update_color();
+            bookmarker.updateState( {"colormap" : colorMapName} );
+          }
+        }
+
         // Setup the model edit form ...
         $("#edit-model-form").dialog(
         {
@@ -868,7 +885,8 @@ <h2>Errors</h2>
           width: $("#scatterplot-pane").width(),
           height: $("#scatterplot-pane").height(),
           render: true,
-          add_simulation_callback: selected_simulations_changed
+          add_simulation_callback: selected_simulations_changed,
+          colorMapper: colorMapper,
           });
 
         var cca_simulation_table_instance = null;
@@ -893,6 +911,8 @@ <h2>Errors</h2>
             other_columns: other_columns,
             add_simulation_callback: selected_simulations_changed,
             add_sort_order_callback: variable_sort_order_changed,
+            colormap: bookmark["colormap"],
+            colorMapper: colorMapper,
             }, "{{server-root}}", workerId);
           cca_simulation_table_instance.update({highlight: ["simulation", 0]});
         }
@@ -923,7 +943,7 @@ <h2>Errors</h2>
         // Other state contained in the URL query string is restored in the 
         // window.initial_update_scatterplot_value function, since it needs to wait
         // until we have access to a table chunker and an initialized grid with data.
-        bookmark = bookmarker.getState();
+
         // Updates selected cca component in the table and scatterplot, or selects the first one
         // if none have been selected.
         if("cca-component" in bookmark)
@@ -1246,7 +1266,8 @@ <h2>Errors</h2>
         this.color = d3.scale.linear();
         this.simulation_callbacks = [];
         this.value_label = null;
-        this.data = []
+        this.data = [];
+        this.colorMapper = parameters.colorMapper;
 
         this.panel = d3.select(parameters.container).append("svg:svg")
           .attr("width", parameters.width)
@@ -1309,6 +1330,20 @@ <h2>Errors</h2>
           }
         }
 
+        this.update_color = function(){
+          var self = this;
+          var v_min = d3.min(this.data, function(d) { return d[2]; });
+          var v_max = d3.max(this.data, function(d) { return d[2]; });
+          this.color = this.colorMapper.createSelectedColorMap(v_min, v_max);
+          var color = this.color;
+
+          var dots = this.panel.select("#data-points").selectAll("circle");
+          dots.style("fill", function(d) { return color(self.data[d][2]); });
+
+          var data_selection = this.panel.select("#data-selection").selectAll("circle");
+          data_selection.style("fill", function(d) { return color(self.data[d][2]); });
+        }
+
         this.update = function(parameters)
         {
           function title_callback(context)
@@ -1357,7 +1392,8 @@ <h2>Errors</h2>
 
             this.x.domain([x_min, x_max]).range([this.padding, this.panel.attr("width") - this.padding]);
             this.y.domain([y_min, y_max]).range([this.panel.attr("height") - this.padding, this.padding]);
-            this.color.domain([v_min, v_max]).range(["blue", "red"]);
+
+            this.color = this.colorMapper.createSelectedColorMap(v_min, v_max);
 
             var x = this.x;
             var y = this.y;