Add color legend support to ktile raster layer

web_external/templates/widgets/kTileConfigWidget.pug

@@ -19,8 +19,8 @@
             .form-group
               label Band
               select.form-control.m-band(disabled=!custom)
-                each band in bands
-                  option(value=band, selected=band==selectedBand) band #{band}
+                each band, key in bands
+                  option(value=key, selected=key==selectedBand) band #{key}
           .col-md-6
             .form-group
               label Colors

web_external/views/adapters/Adapters.js

@@ -7,6 +7,7 @@ import { getApiRoot } from 'girder/rest';
 
 import ClickInfoWidget from '../widgets/ClickInfoWidget';
 import ClickInfoModel from '../../models/ClickInfoModel';
+import palettableColorbrewerMapper from '../util/palettableColorbrewerMapper';
 
 import geojsonUtil from '../../geojsonUtil';
 
@@ -600,21 +601,34 @@ rendering.geo.WmsRepresentation = rendering.geo.defineMapLayer('wms', function (
 }, rendering.geo.MapRepresentation);
 
 rendering.geo.KtileRepresentation = rendering.geo.defineMapLayer('ktile', function () {
-    this.init = function (container, dataset) {
+    this.init = function (container, dataset, visProperties) {
         var layer = container.createLayer('osm', {
             attribution: null,
             keepLower: false
         });
         var fileId = dataset.get('meta').minerva.original_files[0]._id;
-        var visProperties = dataset.getMinervaMetadata().visProperties;
         var url = getApiRoot() + '/ktile/' + fileId;
-        if (visProperties) {
-            layer.url((x, y, z) => `${url}/${z}/${x}/${y}?palette=${visProperties.colorbrewer}&band=${visProperties.band}&minimum=${visProperties.min}&maximum=${visProperties.max}`);
-        } else {
+        if (_.isEmpty(visProperties)) {
             layer.url((x, y, z) => `${url}/${z}/${x}/${y}`);
+        } else {
+            layer.url((x, y, z) => `${url}/${z}/${x}/${y}?palette=${visProperties.palettable}&band=${visProperties.band}&minimum=${visProperties.min}&maximum=${visProperties.max}`);
+            var colorLegendCategory = {
+                type: 'discrete',
+                scale: 'linear',
+                colors: palettableColorbrewerMapper.toRampColors(visProperties.palettable),
+                domain: [visProperties.min, visProperties.max]
+            };
+            this.colorLegendCategory = colorLegendCategory;
+            container.addColorLegendCategories([colorLegendCategory]);
         }
         this.geoJsLayer = layer;
 
         this.trigger('m:map_layer_renderable', this);
     };
+
+    var existingDelete = this.delete;
+    this.delete = function (container) {
+        existingDelete.call(this, container);
+        container.removeColorLegendCategories([this.colorLegendCategory]);
+    };
 }, rendering.geo.MapRepresentation);

web_external/views/widgets/palettableColorbrewerMapper.js → web_external/views/util/palettableColorbrewerMapper.js

@@ -1,19 +1,28 @@
 import _ from 'underscore';
+import colorbrewer from 'colorbrewer';
 
 const colorbrewerCategories = {
     sequential: ['Blues_9', 'BuGn_9', 'BuPu_9', 'GnBu_9', 'Greens_9', 'Greys_9', 'OrRd_9', 'Oranges_9', 'PuBu_9', 'PuBuGn_9', 'PuRd_9', 'Purples_9', 'RdPu_9', 'Reds_9', 'YlGn_9', 'YlGnBu_9', 'YlOrBr_9', 'YlOrRd_9'],
     diverging: ['BrBG_11', 'PRGn_11', 'PiYG_11', 'PuOr_11', 'RdBu_11', 'RdGy_11', 'RdYlBu_11', 'RdYlGn_11', 'Spectral_11'],
     qualitative: ['Accent_8', 'Dark2_8', 'Paired_12', 'Pastel1_9', 'Pastel2_8', 'Set1_9', 'Set2_8', 'Set3_12']
 };
 
-const colorbrewerMapper = {
+const palettableColorbrewerMapper = {
     toRamp(palettable) {
         if (!palettable) {
             return null;
         }
         return palettable.split('.').slice(-1)[0].split('_')[0];
     },
 
+    toRampColors(palettable) {
+        if (!palettable) {
+            return null;
+        }
+        var [ramp, number] = palettable.split('.').slice(-1)[0].split('_');
+        return colorbrewer[ramp][number];
+    },
+
     toPalettable(rampName) {
         if (!rampName) {
             return null;
@@ -31,6 +40,6 @@ const colorbrewerMapper = {
     }
 };
 
-export default colorbrewerMapper;
+export default palettableColorbrewerMapper;
 
 export { colorbrewerCategories };

web_external/views/widgets/ColorbrewerPicker.js

@@ -1,9 +1,8 @@
 import _ from 'underscore';
-import colorbrewer from 'colorbrewer';
 import 'bootstrap-select';
 import 'bootstrap-select/dist/css/bootstrap-select.css';
 
-import { colorbrewerCategories } from './palettableColorbrewerMapper';
+import palettableColorbrewerMapper, { colorbrewerCategories } from '../util/palettableColorbrewerMapper';
 import View from '../view';
 import template from '../../templates/widgets/colorbrewerPicker.pug';
 import '../../stylesheets/widgets/colorBrewerPicker.styl';
@@ -26,8 +25,8 @@ const ColorbrewerPicker = View.extend({
         this.categorizedRamps =
             _.mapObject(colorbrewerCategories, (val, key) => {
                 return val.map((ramp) => {
-                    var [rampName, number] = ramp.split('_');
-                    var colors = colorbrewer[rampName][number];
+                    var [rampName] = ramp.split('_');
+                    var colors = palettableColorbrewerMapper.toRampColors(ramp);
                     var html = "<ul class='m-colorbrewer-ramp'>";
                     _.each(colors, function (color, i) {
                         html += "<li style='background-color: " + color + "'/>";

web_external/views/widgets/KTileConfigWidget.js

@@ -3,7 +3,7 @@ import { restRequest } from 'girder/rest';
 
 import View from '../view';
 import ColorbrewerPicker from './ColorbrewerPicker';
-import palettableColorbrewerMapper from './palettableColorbrewerMapper';
+import palettableColorbrewerMapper from '../util/palettableColorbrewerMapper';
 import template from '../../templates/widgets/kTileConfigWidget.pug';
 import '../../stylesheets/widgets/kTileConfigWidget.styl';
 /**
@@ -14,10 +14,10 @@ const KTileConfigWidget = View.extend({
         'submit #m-json-geo-render-form': function (e) {
             e.preventDefault();
             var mm = this.dataset.getMinervaMetadata();
-            if (this.custom && this.selectedBand && this.selectedColorbrewer) {
+            if (this.custom && this.selectedBand && this.selectedPalettable) {
                 mm.visProperties = {
                     band: this.selectedBand,
-                    colorbrewer: this.selectedColorbrewer,
+                    palettable: this.selectedPalettable,
                     min: this.min,
                     max: this.max
                 };
@@ -41,6 +41,9 @@ const KTileConfigWidget = View.extend({
         },
         'change select.m-band': function (e) {
             this.selectedBand = e.currentTarget.value;
+            this.max = this.bands[this.selectedBand].max;
+            this.min = this.bands[this.selectedBand].min;
+            this.render();
         },
         'change input.min': function (e) {
             this.min = e.target.value;
@@ -58,15 +61,15 @@ const KTileConfigWidget = View.extend({
         this.modalOpened = false;
         this.bands = [];
         this.selectedBand = null;
-        this.selectedColorbrewer = null;
+        this.selectedPalettable = null;
         this.max = 255;
         this.min = 0;
         this.custom = false;
         var minervaMeta = this.dataset.getMinervaMetadata();
-        if (minervaMeta && minervaMeta.visProperties && minervaMeta.visProperties.band && minervaMeta.visProperties.colorbrewer) {
+        if (minervaMeta && minervaMeta.visProperties && minervaMeta.visProperties.band && minervaMeta.visProperties.palettable) {
             this.custom = true;
             this.selectedBand = minervaMeta.visProperties.band;
-            this.selectedColorbrewer = minervaMeta.visProperties.colorbrewer;
+            this.selectedPalettable = minervaMeta.visProperties.palettable;
             this.min = minervaMeta.visProperties.min;
             this.max = minervaMeta.visProperties.max;
         }
@@ -82,9 +85,9 @@ const KTileConfigWidget = View.extend({
                 parentView: this,
                 el: this.$('.colorbrewer-picker-container'),
                 disabled: !this.custom,
-                ramp: palettableColorbrewerMapper.toRamp(this.selectedColorbrewer),
+                ramp: palettableColorbrewerMapper.toRamp(this.selectedPalettable),
                 onChange: (ramp) => {
-                    this.selectedColorbrewer = palettableColorbrewerMapper.toPalettable(ramp);
+                    this.selectedPalettable = palettableColorbrewerMapper.toPalettable(ramp);
                 }
             }).render();
             this._loadMeta();
@@ -98,8 +101,12 @@ const KTileConfigWidget = View.extend({
             url: `/ktile/${this.dataset.get('meta').minerva.original_files[0]._id}/info`,
             type: 'GET'
         }).done((resp) => {
-            this.bands = _.range(1, resp.bands + 1);
-            this.selectedBand = this.selectedBand || this.bands[0];
+            this.bands = resp.bands;
+            if (!this.selectedBand) {
+                this.selectedBand = _.keys(this.bands)[0];
+                this.max = this.bands[this.selectedBand].max;
+                this.min = this.bands[this.selectedBand].min;
+            }
             this.render();
         });
     }