histomicsui 1.4.2.dev30__py2.py3-none-any.whl → 1.4.2.dev32__py2.py3-none-any.whl

histomicsui/web_client/dialogs/saveAnnotation.js

@@ -11,6 +11,201 @@ import View from '@girder/core/views/View';
 import MetadataWidget from '../panels/MetadataWidget';
 import '../stylesheets/dialogs/saveAnnotation.styl';
 import saveAnnotation from '../templates/dialogs/saveAnnotation.pug';
+import { elementAreaAndEdgeLength } from '../views/utils';
+
+/**
+ * Collect styleable properties from user parameters in elements.
+ *
+ * @param {object} styleableFuncs An object with distinct keys for functions.
+ *      Modified.
+ * @param {array} elements A list of elements which might contain metadata
+ *      properties in the user key.
+ * @param {array} [root] A list of keys within objects in an element.
+ */
+function collectStyleableProps(styleableFuncs, elements, root) {
+    const maxCategories = 20;
+
+    let children = {};
+    root = root || [];
+    let key = 'user';
+    for (let j = 0; j < root.length; j += 1) {
+        key += '.' + root[j];
+    }
+    for (let i = 0; i < elements.length; i += 1) {
+        let proplist = elements[i].user;
+        for (let j = 0; j < root.length; j += 1) {
+            if (proplist) {
+                proplist = proplist[root[j]];
+            }
+        }
+        if (proplist !== undefined && proplist !== null) {
+            if (proplist.substring || (proplist.toFixed && _.isFinite(proplist))) {
+                if (styleableFuncs[key] === undefined) {
+                    styleableFuncs[key] = {
+                        root: root,
+                        key: key,
+                        name: root.map((k) => k.replace('_', ' ')).join(' - '),
+                        categoric: !proplist.toFixed
+                    };
+                    styleableFuncs[key].values = [proplist];
+                    if (!styleableFuncs[key].categoric) {
+                        styleableFuncs[key].min = styleableFuncs[key].max = +proplist;
+                    }
+                } else {
+                    if (styleableFuncs[key].values.length <= maxCategories) {
+                        if (styleableFuncs[key].values.indexOf(proplist) < 0) {
+                            if (styleableFuncs[key].values.length >= maxCategories) {
+                                styleableFuncs[key].manyValues = true;
+                            } else {
+                                styleableFuncs[key].values.push(proplist);
+                            }
+                        }
+                    }
+                    if (!styleableFuncs[key].categoric) {
+                        const val = +proplist;
+                        if (val < styleableFuncs[key].min) {
+                            styleableFuncs[key].min = val;
+                        }
+                        if (val > styleableFuncs[key].max) {
+                            styleableFuncs[key].max = val;
+                        }
+                    }
+                }
+            } else {
+                Object.keys(proplist).forEach((subkey) => {
+                    children[subkey] = true;
+                });
+            }
+        }
+    }
+    Object.keys(children).forEach((subkey) => {
+        let subroot = root.slice();
+        subroot.push(subkey);
+        collectStyleableProps(styleableFuncs, elements, subroot);
+    });
+}
+
+/**
+ * Calculate the min/max values for calculated properties.
+ *
+ * @param {object} styleableFuncs An object with distinct keys for functions.
+ *      Modified.
+ * @param {array} elements A list of elements which might contain metadata
+ *      properties in the user key.
+ */
+function rangeStyleableProps(styleableFuncs, elements) {
+    let needsArea = true;
+    Object.entries(styleableFuncs).forEach(([key, func]) => {
+        if (['perimeter', 'area', 'length'].indexOf(key) >= 0) {
+            needsArea = true;
+            return;
+        }
+        if (!func.calc) {
+            return;
+        }
+        for (let i = 0; i < elements.length; i += 1) {
+            let d = elements[i];
+            if (d[key] !== undefined) {
+                if (func.min === undefined) {
+                    func.min = func.max = d[key];
+                }
+                if (d[key] < func.min) {
+                    func.min = d[key];
+                }
+                if (d[key] > func.max) {
+                    func.max = d[key];
+                }
+            }
+        }
+    });
+    if (needsArea) {
+        for (let i = 0; i < elements.length; i += 1) {
+            let element = elements[i];
+            const { area, edge } = elementAreaAndEdgeLength({el: element});
+            if (styleableFuncs.area && area) {
+                if (styleableFuncs.area.min === undefined) {
+                    styleableFuncs.area.min = styleableFuncs.area.max = area;
+                    styleableFuncs.area.values = new Array(elements.length);
+                }
+                styleableFuncs.area.values[i] = area;
+                if (area < styleableFuncs.area.min) {
+                    styleableFuncs.area.min = area;
+                }
+                if (area > styleableFuncs.area.max) {
+                    styleableFuncs.area.max = area;
+                }
+            }
+            if (styleableFuncs.length && edge) {
+                if (styleableFuncs.length.min === undefined) {
+                    styleableFuncs.length.min = styleableFuncs.length.max = edge;
+                    styleableFuncs.length.values = new Array(elements.length);
+                }
+                styleableFuncs.length.values[i] = edge;
+                if (edge < styleableFuncs.length.min) {
+                    styleableFuncs.length.min = edge;
+                }
+                if (edge > styleableFuncs.length.max) {
+                    styleableFuncs.length.max = edge;
+                }
+            }
+            if (styleableFuncs.perimeter && edge) {
+                if (styleableFuncs.perimeter.min === undefined) {
+                    styleableFuncs.perimeter.min = styleableFuncs.perimeter.max = edge;
+                    styleableFuncs.perimeter.values = new Array(elements.perimeter);
+                }
+                styleableFuncs.perimeter.values[i] = edge;
+                if (edge < styleableFuncs.perimeter.min) {
+                    styleableFuncs.perimeter.min = edge;
+                }
+                if (edge > styleableFuncs.perimeter.max) {
+                    styleableFuncs.perimeter.max = edge;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Given an element and a color function, compute the color needed.
+ *
+ * @param {elementModel} element The element for which to compute a color
+ * @param {number} idx The index in the element collection
+ * @param {object} colorParam A functioon record with prepared min, max,
+ *      range, minColor, and maxColor values.
+ * @param {object} funcInfo Information about the function.  If calc is true,
+ *      values is an array of precomputed values.  Otherwise, root is an
+ *      attribute path in the element user object.
+ * @returns {string} A color string.
+ */
+function colorFromFunc(element, idx, colorParam, funcInfo) {
+    const geo = window.geo;
+    let val;
+    if (funcInfo.calc) {
+        val = funcInfo.values[idx];
+    } else {
+        val = element.get('user');
+        for (let i = 0; i < funcInfo.root.length; i += 1) {
+            val = (val || {})[funcInfo.root[i]];
+        }
+    }
+    if (!_.isFinite(val)) {
+        return 'rgba(0,0,0,0)';
+    }
+    val = Math.max(Math.min((val - colorParam.min) / colorParam.range, 1), 0);
+    if (colorParam.minColor.a === undefined) {
+        colorParam.minColor.a = 1;
+    }
+    if (colorParam.maxColor.a === undefined) {
+        colorParam.maxColor.a = 1;
+    }
+    let clr = {
+        r: val * (colorParam.maxColor.r - colorParam.minColor.r) + colorParam.minColor.r,
+        g: val * (colorParam.maxColor.g - colorParam.minColor.g) + colorParam.minColor.g,
+        b: val * (colorParam.maxColor.b - colorParam.minColor.b) + colorParam.minColor.b,
+        a: val * (colorParam.maxColor.a - colorParam.minColor.a) + colorParam.minColor.a
+    };
+    return geo.util.convertColorToRGBA(clr);
+}
 
 /**
  * Create a modal dialog with fields to edit the properties of
@@ -20,6 +215,19 @@ var SaveAnnotation = View.extend({
     events: {
         'click .h-access': 'access',
         'click .h-cancel': 'cancel',
+
+        'input #h-annotation-fill-color': () => $('.h-functional-value #h-annotation-fill-color-fixed').prop('checked', true),
+        'changeColor #h-annotation-colorpicker-fill-color': () => $('.h-functional-value #h-annotation-fill-color-fixed').prop('checked', true),
+        'change #h-annotation-fill-color-func-list': 'changeFillColorFunc',
+        'input #h-annotation-fill-color-min-val': () => $('.h-functional-value #h-annotation-fill-color-min-setval').prop('checked', true),
+        'input #h-annotation-fill-color-max-val': () => $('.h-functional-value #h-annotation-fill-color-max-setval').prop('checked', true),
+
+        'input #h-annotation-line-color': () => $('.h-functional-value #h-annotation-line-color-fixed').prop('checked', true),
+        'changeColor #h-annotation-colorpicker-line-color': () => $('.h-functional-value #h-annotation-line-color-fixed').prop('checked', true),
+        'change #h-annotation-line-color-func-list': 'changeLineColorFunc',
+        'input #h-annotation-line-color-min-val': () => $('.h-functional-value #h-annotation-line-color-min-setval').prop('checked', true),
+        'input #h-annotation-line-color-max-val': () => $('.h-functional-value #h-annotation-line-color-max-setval').prop('checked', true),
+
         'submit form': 'save'
     },
 
@@ -30,18 +238,38 @@ var SaveAnnotation = View.extend({
         let elementTypes = [];
         if (this.annotation.get('annotation').elements) {
             elementTypes = this.annotation.get('annotation').elements
-                .map((element) => element.type)
+                .map((element) => element.type === 'polyline' ? (element.closed ? 'polygon' : 'line') : element.type)
                 .filter((type, index, types) => types.indexOf(type) === index);
         }
         // should be updated when additional shape elements are supported
-        const styleEditableElementTypes = ['point', 'polyline', 'rectangle', 'arrow', 'circle', 'ellipse'];
-        const annotationHasEditableElements = _.filter(elementTypes, (type) => styleEditableElementTypes.includes(type)).length > 0;
+        const elementTypeProps = {
+            point: [],
+            polygon: ['perimeter', 'area'],
+            line: ['length'],
+            rectangle: ['perimeter', 'area', 'width', 'height', 'rotation'],
+            arrow: ['length'],
+            circle: ['perimeter', 'area', 'radius'],
+            ellipse: ['perimeter', 'area', 'width', 'height', 'rotation']
+        };
+        const annotationHasEditableElements = _.filter(elementTypes, (type) => elementTypeProps[type] !== undefined).length > 0;
         const showStyleEditor = this.annotation.get('annotation').elements && !this.annotation._pageElements && annotationHasEditableElements;
 
         const defaultStyles = {};
 
+        const styleableFuncs = {};
         if (showStyleEditor) {
+            let scale;
+            if (this.options.viewer && this.options.viewer._scale) {
+                scale = this.options.viewer._scale.scale;
+            }
+            elementTypes.forEach((type) => {
+                (elementTypeProps[type] || []).forEach((key) => {
+                    styleableFuncs[key] = {calc: true, key: key, scale: scale, name: key};
+                });
+            });
             const elements = this.annotation.get('annotation').elements;
+            rangeStyleableProps(styleableFuncs, elements);
+            collectStyleableProps(styleableFuncs, elements.filter((d) => d.user));
             const firstElement = elements[0];
             if (elements.every((d) => d.lineWidth === firstElement.lineWidth)) {
                 defaultStyles.lineWidth = firstElement.lineWidth;
@@ -53,6 +281,17 @@ var SaveAnnotation = View.extend({
                 defaultStyles.fillColor = firstElement.fillColor;
             }
         }
+        this._showStyleEditor = showStyleEditor;
+        this._styleableFuncs = styleableFuncs;
+
+        let _styleFuncs;
+        if (this.annotation.attributes.annotation.attributes) {
+            _styleFuncs = this.annotation.attributes.annotation.attributes._styleFuncs;
+        }
+        if (!_styleFuncs || !_styleFuncs.lineColor || !_styleFuncs.fillColor || !_styleFuncs.lineWidth) {
+            _styleFuncs = {lineColor: {}, lineWidth: {}, fillColor: {}};
+        }
+        this.annotation._styleFuncs = _styleFuncs;
 
         this.$el.html(
             saveAnnotation({
@@ -63,6 +302,8 @@ var SaveAnnotation = View.extend({
                 formatDate: formatDate,
                 DATE_SECOND: DATE_SECOND,
                 showStyleEditor,
+                styleableFuncs,
+                styleFuncs: this.annotation._styleFuncs,
                 defaultStyles
             })
         ).girderModal(this);
@@ -71,6 +312,7 @@ var SaveAnnotation = View.extend({
         if (this.annotation.id) {
             if (!this.annotation.meta) {
                 this.annotation._meta = Object.assign({}, (this.annotation.get('annotation') || {}).attributes || {});
+                delete this.annotation._meta._styleFuncs;
             }
             // copy the metadata to a place that is expected for the widget
             if (!this.metadataWidget) {
@@ -89,6 +331,7 @@ var SaveAnnotation = View.extend({
         }
 
         this.$el.find('.modal-dialog').addClass('hui-save-annotation-dialog');
+        this._updateFuncValues();
         return this;
     },
 
@@ -110,11 +353,71 @@ var SaveAnnotation = View.extend({
     cancel(evt) {
         if (this.annotation) {
             delete this.annotation._meta;
+            delete this.annotation._styleFuncs;
         }
         evt.preventDefault();
         this.$el.modal('hide');
     },
 
+    changeFillColorFunc() {
+        $('.h-functional-value #h-annotation-fill-color-func').prop('checked', true);
+        this._updateFuncValues();
+    },
+
+    changeLineColorFunc() {
+        $('.h-functional-value #h-annotation-line-color-func').prop('checked', true);
+        this._updateFuncValues();
+    },
+
+    _updateFuncValues() {
+        var names = ['fill-color', 'line-color'];
+        names.forEach((name) => {
+            let curfunc = this.$el.find('#h-annotation-' + name + '-func-list').val();
+            let mintext = '';
+            let maxtext = '';
+            if (this._styleableFuncs[curfunc]) {
+                if (!this._styleableFuncs[curfunc].categoric) {
+                    mintext = 'Minimum value: ' + this._styleableFuncs[curfunc].min;
+                    maxtext = 'Maximum value: ' + this._styleableFuncs[curfunc].max;
+                }
+            }
+            this.$el.find('#h-annotation-' + name + '-min-auto').parent().attr('title', mintext);
+            this.$el.find('#h-annotation-' + name + '-min-setval').parent().attr('title', mintext);
+            this.$el.find('#h-annotation-' + name + '-max-auto').parent().attr('title', maxtext);
+            this.$el.find('#h-annotation-' + name + '-max-setval').parent().attr('title', maxtext);
+        });
+    },
+
+    _getFunctionalProps(name, key, valueParam, setValue, color) {
+        var geo = window.geo;
+
+        let valueFunc = this.annotation._styleFuncs[key];
+        valueFunc.useFunc = this.$('#h-annotation-' + name + '-func').prop('checked');
+        valueFunc.key = this.$('#h-annotation-' + name + '-func-list').val();
+        valueFunc.minColor = tinycolor(this.$('#h-annotation-' + name + '-min').val()).toRgbString();
+        valueFunc.minSet = this.$('#h-annotation-' + name + '-min-setval').prop('checked');
+        valueFunc.minValue = parseFloat(this.$('#h-annotation-' + name + '-min-val').val());
+        valueFunc.minValue = _.isFinite(valueFunc.minValue) ? valueFunc.minValue : undefined;
+        valueFunc.maxColor = tinycolor(this.$('#h-annotation-' + name + '-max').val()).toRgbString();
+        valueFunc.maxSet = this.$('#h-annotation-' + name + '-max-setval').prop('checked');
+        valueFunc.maxValue = parseFloat(this.$('#h-annotation-' + name + '-max-val').val());
+        valueFunc.maxValue = _.isFinite(valueFunc.maxValue) ? valueFunc.maxValue : undefined;
+        if (valueFunc.useFunc) {
+            setValue = 'func';
+        }
+        valueParam.key = valueFunc.key;
+        if (this._styleableFuncs[valueFunc.key]) {
+            valueParam.min = valueFunc.minSet && _.isFinite(valueFunc.minValue) ? valueFunc.minValue : this._styleableFuncs[valueFunc.key].min;
+            valueParam.max = valueFunc.maxSet && _.isFinite(valueFunc.maxValue) ? valueFunc.maxValue : this._styleableFuncs[valueFunc.key].max;
+            valueParam.range = (valueParam.max - valueParam.min) || 1;
+            valueParam.minColor = geo.util.convertColor(valueFunc.minColor);
+            valueParam.maxColor = geo.util.convertColor(valueFunc.maxColor);
+        } else if (setValue === 'func') {
+            setValue = false;
+        }
+        return setValue;
+    },
+
     /**
      * Respond to form submission.  Triggers a `g:save` event on the
      * AnnotationModel.
@@ -129,10 +432,10 @@ var SaveAnnotation = View.extend({
             validation += 'Please enter a name. ';
         }
 
-        const setFillColor = !!this.$('#h-annotation-fill-color').val();
-        const fillColor = tinycolor(this.$('#h-annotation-fill-color').val()).toRgbString();
-        const setLineColor = !!this.$('#h-annotation-line-color').val();
-        const lineColor = tinycolor(this.$('#h-annotation-line-color').val()).toRgbString();
+        let setFillColor = !!this.$('#h-annotation-fill-color').val();
+        let fillColor = tinycolor(this.$('#h-annotation-fill-color').val()).toRgbString();
+        let setLineColor = !!this.$('#h-annotation-line-color').val();
+        let lineColor = tinycolor(this.$('#h-annotation-line-color').val()).toRgbString();
         const setLineWidth = !!this.$('#h-annotation-line-width').val();
         const lineWidth = parseFloat(this.$('#h-annotation-line-width').val());
 
@@ -141,6 +444,14 @@ var SaveAnnotation = View.extend({
             this.$('#h-annotation-line-width').parent().addClass('has-error');
         }
 
+        let fillColorParam = {};
+        let lineColorParam = {};
+        if (this._showStyleEditor && Object.keys(this._styleableFuncs || {}).length) {
+            // get functional values
+            setFillColor = this._getFunctionalProps('fill-color', 'fillColor', fillColorParam, fillColor, setFillColor, true);
+            setLineColor = this._getFunctionalProps('line-color', 'lineColor', lineColorParam, lineColor, setLineColor, true);
+        }
+
         if (validation) {
             this.$('.g-validation-failed-message').text(validation.trim())
                 .removeClass('hidden');
@@ -148,13 +459,18 @@ var SaveAnnotation = View.extend({
         }
 
         // all valid
-
         if (setFillColor || setLineColor || setLineWidth) {
-            this.annotation.elements().each((element) => { /* eslint-disable backbone/no-silent */
+            this.annotation.elements().each((element, idx) => { /* eslint-disable backbone/no-silent */
                 if (setFillColor) {
+                    if (setFillColor === 'func') {
+                        fillColor = colorFromFunc(element, idx, fillColorParam, this._styleableFuncs[fillColorParam.key]);
+                    }
                     element.set('fillColor', fillColor, {silent: true});
                 }
                 if (setLineColor) {
+                    if (setLineColor === 'func') {
+                        lineColor = colorFromFunc(element, idx, lineColorParam, this._styleableFuncs[lineColorParam.key]);
+                    }
                     element.set('lineColor', lineColor, {silent: true});
                 }
                 if (setLineWidth) {
@@ -163,15 +479,18 @@ var SaveAnnotation = View.extend({
             });
             const annotationData = _.extend({}, this.annotation.get('annotation'));
             annotationData.elements = this.annotation.elements().toJSON();
-            this.annotation.set('annotation', annotationData);
+            this.annotation.set('annotation', annotationData, {silent: true});
         }
 
         _.extend(this.annotation.get('annotation'), {
             name: this.$('#h-annotation-name').val(),
             description: this.$('#h-annotation-description').val()
         });
-        this.annotation.attributes.annotation.attributes = this.annotation._meta;
+        this.annotation.attributes.annotation.attributes = Object.assign({}, this.annotation._meta);
+        this.annotation.attributes.annotation.attributes._styleFuncs = this.annotation._styleFuncs;
         delete this.annotation._meta;
+        delete this.annotation._styleFuncs;
+        this.annotation.trigger('change:annotation', this.annotation, {});
         this.trigger('g:submit');
         this.$el.modal('hide');
     },

histomicsui/web_client/panels/AnnotationSelector.js

@@ -199,14 +199,12 @@ var AnnotationSelector = Panel.extend({
         const id = $(evt.currentTarget).parents('.h-annotation').data('id');
         const model = this.collection.get(id);
         this.listenToOnce(
-            showSaveAnnotationDialog(model, {title: 'Edit annotation'}),
+            showSaveAnnotationDialog(model, {title: 'Edit annotation', viewer: this.viewer}),
             'g:submit',
             () => {
-                model.save().done(() => {
-                    if (model.get('displayed')) {
-                        this.trigger('h:redraw', model);
-                    }
-                });
+                if (model.get('displayed')) {
+                    this.trigger('h:redraw', model);
+                }
             }
         );
     },

histomicsui/web_client/panels/DrawWidget.js

@@ -973,7 +973,6 @@ var DrawWidget = Panel.extend({
     },
 
     _styleGroupEditor() {
-        console.log(this);
         var dlg = editStyleGroups(this._style, this._groups, this.parentView._defaultGroup);
         dlg.$el.on('hidden.bs.modal', () => {
             this.render();

histomicsui/web_client/stylesheets/dialogs/saveAnnotation.styl

@@ -23,3 +23,11 @@
   .modal-dialog.hui-save-annotation-dialog
     width 70%
     max-width 900px
+label.unstyled
+  margin-bottom unset
+  font-weight normal
+  margin-left 4px
+.h-functional-value
+  input[type="number"]
+    width 100px
+    margin-left 5px

histomicsui/web_client/templates/dialogs/saveAnnotation.pug

@@ -1,3 +1,62 @@
+mixin functional(name, key, title, color)
+  .form-group.h-functional-value
+    label(for='h-annotation-' + name) #{title}
+    - console.log(styleableFuncs);
+    - let anyFuncs = !!Object.keys(styleableFuncs || {}).length;
+    - console.log(anyFuncs);
+    if !anyFuncs
+      .input-group.h-colorpicker(id="h-annotation-colorpicker-" + name)
+        input.input-sm.form-control(id="h-annotation-" + name, type='text', value=defaultStyles[key])
+        span.input-group-addon
+          i
+    else
+      .row
+        .col-sm-2
+          input(id="h-annotation-" + name + "-fixed", type="radio", name=name + "-set", checked=styleFuncs[key].useFunc ? undefined : 'checked')
+          label.unstyled(for='h-annotation-' + name + '-fixed') Constant
+        .col-sm-10
+          .input-group.h-colorpicker(id="h-annotation-colorpicker-" + name)
+            input.input-sm.form-control(id="h-annotation-" + name, type='text', value=defaultStyles[key])
+            span.input-group-addon
+              i
+      .row
+        .col-sm-2
+          input(id="h-annotation-" + name + "-func", type="radio", name=name + "-set", checked=styleFuncs[key].useFunc ? 'checked' : undefined)
+          label.unstyled(for='h-annotation-' + name + '-func') From
+        .col-sm-10
+          select.format-control.input-sm(id="h-annotation-" + name + "-func-list")
+            each sfunc in styleableFuncs
+              if !sfunc.categoric
+                option(value=sfunc.key, selected=styleFuncs[key].key === sfunc.key) #{sfunc.name}
+      .row
+        .col-sm-2
+        .col-sm-3
+          | minimum
+          .input-group.h-colorpicker
+            input.input-sm.form-control(id="h-annotation-" + name + "-min", type='text', value=styleFuncs[key].minColor || defaultStyles[key])
+            span.input-group-addon
+              i
+        .col-sm-2
+          div
+            input(id="h-annotation-" + name + "-min-auto", type="radio", name=name + "-min-set", checked=styleFuncs[key].minSet ? undefined : 'checked')
+            label.unstyled(for='h-annotation-' + name + '-min-auto') auto
+          div
+            input(id="h-annotation-" + name + "-min-setval", type="radio", name=name + "-min-set", checked=styleFuncs[key].minSet ? 'checked' : undefined)
+            input(id="h-annotation-" + name + "-min-val", type="number", step="any", value=styleFuncs[key].minValue)
+        .col-sm-3
+          | maximum
+          .input-group.h-colorpicker
+            input.input-sm.form-control(id="h-annotation-" + name + "-max", type='text', value=styleFuncs[key].maxColor || defaultStyles[key])
+            span.input-group-addon
+              i
+        .col-sm-2
+          div
+            input(id="h-annotation-" + name + "-max-auto", type="radio", name=name + "-max-set", checked=styleFuncs[key].maxSet ? undefined : 'checked')
+            label.unstyled(for='h-annotation-' + name + '-max-auto') auto
+          div
+            input(id="h-annotation-" + name + "-max-setval", type="radio", name=name + "-max-set", checked=styleFuncs[key].maxSet ? 'checked' : undefined)
+            input(id="h-annotation-" + name + "-max-val", type="number", step="any", value=styleFuncs[key].maxValue)
+
 - var timestamp = moment().format('YYYY-MM-DD HH:mm')
 - var defaultName = 'Annotation '+ timestamp
 .modal-dialog(role='document')
@@ -15,7 +74,7 @@
         .form-group
           label(for='h-annotation-description') Description
           textarea#h-annotation-description.form-control.input-sm(
-            rows='6', placeholder='Enter an optional description')
+            rows='4', placeholder='Enter an optional description')
             | #{annotation.description}
         if model && model.id
           .g-item-created.hui-info-list-entry
@@ -34,25 +93,13 @@
           .hui-annotation-metadata.hui-annotation-metadata-dialog
         if showStyleEditor
           hr
-          h4 Reset the style for all point, line, and polygon elements in this annotation
+          h4 Set the style for all point, line, and polygon elements in this annotation
           .form-group
             label(for='h-annotation-line-width') Line Width
             input#h-annotation-line-width.input-sm.form-control(
               type='number', min=0, step=0.1, value=defaultStyles.lineWidth)
-          .form-group
-            label(for='h-annotation-line-color') Line color
-            .input-group.h-colorpicker
-              input#h-annotation-line-color.input-sm.form-control(
-                type='text', value=defaultStyles.lineColor)
-              span.input-group-addon
-                i
-          .form-group
-            label(for='h-annotation-fill-color') Fill color
-            .input-group.h-colorpicker
-              input#h-annotation-fill-color.input-sm.form-control(
-                type='text', value=defaultStyles.fillColor)
-              span.input-group-addon
-                i
+          +functional('line-color', 'lineColor', 'Line color', true)
+          +functional('fill-color', 'fillColor', 'Fill color', true)
         .g-validation-failed-message.hidden
       .modal-footer
         if hasAdmin

{histomicsui-1.4.2.dev30.dist-info → histomicsui-1.4.2.dev32.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: histomicsui
-Version: 1.4.2.dev30
+Version: 1.4.2.dev32
 Summary: Organize, visualize, and analyze histology images.
 Home-page: https://github.com/DigitalSlideArchive/histomicsui
 Author: Kitware, Inc.

{histomicsui-1.4.2.dev30.dist-info → histomicsui-1.4.2.dev32.dist-info}/RECORD

@@ -34,11 +34,11 @@ histomicsui/web_client/dialogs/index.js,sha256=PzVsFClPf29-a5w2FiPGUCFBnAmNRBu_P
 histomicsui/web_client/dialogs/metadataPlot.js,sha256=TpMjA1vGfH-qOAoPbLlUlejZDZ0nLRQVvjliHaDJp3Q,1151
 histomicsui/web_client/dialogs/openAnnotatedImage.js,sha256=E4Vm8KUX6gkXQpzTmFeYY8iPQw88R5EVnDMeuJUQhC8,4938
 histomicsui/web_client/dialogs/openImage.js,sha256=hY_jn9P_70hBBKF4V-FwXuxjRMqDXmHYf-59XZDn2Vg,2596
-histomicsui/web_client/dialogs/saveAnnotation.js,sha256=GwNFDRzPX2yGnfb7HvU93F95Q847MH-Qh280DEJrotg,7825
+histomicsui/web_client/dialogs/saveAnnotation.js,sha256=dQwZXXkKH8k4YwYEQk31dE-pwIbuEfSeHuDch-wIkfo,22761
 histomicsui/web_client/models/StyleModel.js,sha256=g7BbrR9T7eIEdfmCOeHy3F9u70lPBvlgJszV-P6Qk4g,221
 histomicsui/web_client/models/index.js,sha256=5dtuUll1D1u1bKFh1bzsNeNsiRPEqDCb-aLN_GeFaTU,67
-histomicsui/web_client/panels/AnnotationSelector.js,sha256=c6pvKxUUSFLRfqTWSNoi55t8Xg0v5b6Iht3pXmDRZsQ,22381
-histomicsui/web_client/panels/DrawWidget.js,sha256=EgSsEazVMpJgCchn5LACpZFLdYmA29kZ8y0i-qJhNCQ,43115
+histomicsui/web_client/panels/AnnotationSelector.js,sha256=6ouJSV4lABWHuOADlqBqBr5xQN8gbggs5MOj6dmaAKo,22328
+histomicsui/web_client/panels/DrawWidget.js,sha256=D3GRqR6npBc8HVKDkfz-MZHQBLe0R1_705Gzis1fwCg,43088
 histomicsui/web_client/panels/MetadataPlot.js,sha256=DJqjIeKe3SPhfoHWeWyIDBB4iVu-JIUACpdytZYTAaI,14099
 histomicsui/web_client/panels/MetadataWidget.js,sha256=9xLUb0B1ytD-8kFBlSrWvL5bCp58mEeH3Em47Hstmjg,22113
 histomicsui/web_client/panels/OverviewWidget.js,sha256=BB1d-CmfDOu4i40QBN3IB6KDAe3ZBKgLU081ldmNgPs,8027
@@ -51,7 +51,7 @@ histomicsui/web_client/stylesheets/body/frontPage.styl,sha256=j1SwYQyqMkzWxTomLV
 histomicsui/web_client/stylesheets/body/image.styl,sha256=6oodPCcLKiE6e2jmBLuRl6tOeVEqCj_KG2EAN7PDXLg,1018
 histomicsui/web_client/stylesheets/dialogs/editStyleGroups.styl,sha256=wmlQdm3UyPb-bI7WI_0PJFOn9Tpctk4PB16UjkU1gNQ,191
 histomicsui/web_client/stylesheets/dialogs/openAnnotatedImage.styl,sha256=C04OiJAVJlx8PVxRcfYD65QTtKPHFC8u1iI612EXYVk,238
-histomicsui/web_client/stylesheets/dialogs/saveAnnotation.styl,sha256=aGi9nrBHRMhgtcBTivtUyb3WEYqUkeQr2KoAEs5Vv9M,614
+histomicsui/web_client/stylesheets/dialogs/saveAnnotation.styl,sha256=WqALpP2VdA19a1_T5IfIkTCgSEvZMh_aGTXtYLZ3uus,769
 histomicsui/web_client/stylesheets/layout/header.styl,sha256=9rDj4R-MyFYI0BNEcn3BS5qDHWMZa1DtVxnPWes5uA8,976
 histomicsui/web_client/stylesheets/layout/headerAnalyses.styl,sha256=X3N2MnjPjoUTLybAA1PfjBOUakhRlTuKB3X8w1ae6N8,53
 histomicsui/web_client/stylesheets/layout/headerImage.styl,sha256=t5drLC5uiPyRHWPQzac8cV-QjI7yqowT5kY4xN994_M,150
@@ -77,7 +77,7 @@ histomicsui/web_client/templates/dialogs/editStyleGroups.pug,sha256=3cTwOH0_wBUV
 histomicsui/web_client/templates/dialogs/metadataPlot.pug,sha256=SmJ5aX5wuOR7OVws-rxl9RK-0PPOEUcJ8-I8pSmzPx8,1541
 histomicsui/web_client/templates/dialogs/openAnnotatedImage.pug,sha256=yxE6lc9lMu_XvhvGE-iIAO2TgzJJQYFiASRwSyF9mHc,838
 histomicsui/web_client/templates/dialogs/openImage.pug,sha256=EG077EI4Iavr5RPhgSCvif0yy2XUVX_VKNxzZ0cRbV4,353
-histomicsui/web_client/templates/dialogs/saveAnnotation.pug,sha256=SCe5K7CSRBwJ_x3_hv607jZbYahyhzZCq2qCrIclVIU,2759
+histomicsui/web_client/templates/dialogs/saveAnnotation.pug,sha256=vGaSvQZY2OZSEDo6OwPmx3__-DAR2qRjNsqlNtJ51aA,5456
 histomicsui/web_client/templates/layout/header.pug,sha256=ZP2TW4cmoDUdnE4QbKgYTy_NjrD3Jf3WLpif5MMWxrA,925
 histomicsui/web_client/templates/layout/headerAnalyses.pug,sha256=-L60RJqU3_IVKvlxHgautxum122DLAAvR_wUXThx6BY,865
 histomicsui/web_client/templates/layout/headerImage.pug,sha256=YJXVbOoU05OF5YPYBmnbpri4NRrIAukTIoQO2O44dPk,1467
@@ -144,10 +144,10 @@ tests/web_client_specs/metadataPlotSpec.js,sha256=RPskJXJmKMR1sUseNDPMn1vEdq31qW
 tests/web_client_specs/overviewPanelSpec.js,sha256=-gz7fKgADN_jhZpiSFrsRZ-xHyi2v0OC3oz-5sv201U,6175
 tests/web_client_specs/panelLayoutSpec.js,sha256=C2PHkOHkENp3k2DXndxsiVeo0dALyQ1ygmUQUuP0Xu0,2917
 tests/web_client_specs/pixelmapCategorySpec.js,sha256=HSKhStf5UVef3j5HrEIxhdNqg6xc_QdvgE59VV3GUxc,13890
-histomicsui-1.4.2.dev30.dist-info/LICENSE,sha256=psuoW8kuDP96RQsdhzwOqi6fyWv0ct8CR6Jr7He_P_k,10173
-histomicsui-1.4.2.dev30.dist-info/METADATA,sha256=TuvdVxXWBc5s_RQ21w399sfz8XvZ8IECl3tf0mIBOi0,7267
-histomicsui-1.4.2.dev30.dist-info/NOTICE,sha256=Fb_KGPk6UyEsqbF5nJj2J_ux2IaIqze5ljBGfTE_auE,585
-histomicsui-1.4.2.dev30.dist-info/WHEEL,sha256=a-zpFRIJzOq5QfuhBzbhiA1eHTzNCJn8OdRvhdNX0Rk,110
-histomicsui-1.4.2.dev30.dist-info/entry_points.txt,sha256=SZB5fiWiKFOr_SsVOi94gDeNlJkMDI22AFcdKqoDVfs,55
-histomicsui-1.4.2.dev30.dist-info/top_level.txt,sha256=X2MiOqcwTp_HroIOfkJ78GumCBLy5RxeiWkYKTdQaHc,18
-histomicsui-1.4.2.dev30.dist-info/RECORD,,
+histomicsui-1.4.2.dev32.dist-info/LICENSE,sha256=psuoW8kuDP96RQsdhzwOqi6fyWv0ct8CR6Jr7He_P_k,10173
+histomicsui-1.4.2.dev32.dist-info/METADATA,sha256=jbpwCOs2VpKMU50jTtBZ0AlWGDT9yu-YCsmBWlqKOWw,7267
+histomicsui-1.4.2.dev32.dist-info/NOTICE,sha256=Fb_KGPk6UyEsqbF5nJj2J_ux2IaIqze5ljBGfTE_auE,585
+histomicsui-1.4.2.dev32.dist-info/WHEEL,sha256=a-zpFRIJzOq5QfuhBzbhiA1eHTzNCJn8OdRvhdNX0Rk,110
+histomicsui-1.4.2.dev32.dist-info/entry_points.txt,sha256=SZB5fiWiKFOr_SsVOi94gDeNlJkMDI22AFcdKqoDVfs,55
+histomicsui-1.4.2.dev32.dist-info/top_level.txt,sha256=X2MiOqcwTp_HroIOfkJ78GumCBLy5RxeiWkYKTdQaHc,18
+histomicsui-1.4.2.dev32.dist-info/RECORD,,