histomicsui 1.8.1.dev16__tar.gz → 1.8.1.dev41__tar.gz

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: histomicsui
-Version: 1.8.1.dev16
+Version: 1.8.1.dev41
 Summary: Organize, visualize, and analyze histology images.
 Home-page: https://github.com/DigitalSlideArchive/histomicsui
 Author: Kitware, Inc.

histomicsui-1.8.1.dev41/docs/annotation_group_restrictions.rst

@@ -0,0 +1,41 @@
+Restricting Annotations to Allowed Groups
+==========================================
+
+An annotation document can restrict which style groups its elements may be assigned to by setting an ``allowed_groups`` key in the annotation's ``attributes``:
+
+::
+
+    {
+      "name": "restricted annotation",
+      "attributes": {
+        "allowed_groups": ["groupA", "groupB"]
+      },
+      "elements": [...]
+    }
+
+``allowed_groups`` may also be given as a JSON-stringified array for convenience when setting it through the UI metadata editor:
+
+::
+
+    {
+      "attributes": {
+        "allowed_groups": "[\"groupA\", \"groupB\"]"
+      }
+    }
+
+When this restriction is present, the Draw panel and the annotation element context menu will only offer the listed groups instead of every style group that exists.
+
+Validation
+----------
+
+``allowed_groups`` is only honored when it is a non-empty array of non-empty strings, or a string that parses as JSON into such an array. Any other value - a missing key, a non-array/non-JSON-array value, an unparseable string, an empty array, or an array containing no valid strings - is treated as *unrestricted*, and every existing style group is offered as usual. Duplicate entries are ignored.
+
+Auto-creation of missing groups
+--------------------------------
+
+If ``allowed_groups`` names a style group that does not yet exist, it is automatically created the first time the restriction is encountered, by copying the style (fill color, line color, line width, pattern) of the default group. The newly created groups are persisted immediately. This can happen from either the Draw panel or the annotation context menu, whichever sees the restricted annotation first.
+
+Effect on the current selection
+--------------------------------
+
+- **Draw panel**: If the currently active style group is not one of the annotation's allowed groups, the Draw panel automatically switches to the first allowed group that exists.

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/docs/config_options.rst

@@ -79,6 +79,15 @@ If a hotkey is specified for a group, it will only be active if the group was lo
         action: group
         param: Red
 
+Unselected Annotation Capacity
+______________________________
+When annotation elements are selected, the annotations not included in the user's selection have their opacity decreased to 0.33 times their specified opacity. This can be modified:
+::
+    ---
+    # A lower value will make unselected annotations more transparent.
+    unselectedOpacityMultiplier: 0.33
+
+
 UI Settings
 ___________
 

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui/web_client/panels/DrawWidget.js

@@ -15,6 +15,7 @@ import StyleCollection from '../collections/StyleCollection';
 import StyleModel from '../models/StyleModel';
 import editElement from '../dialogs/editElement';
 import editStyleGroups from '../dialogs/editStyleGroups';
+import getAllowedGroups, {ensureAllowedGroupsExist} from '../utilities/allowedGroups';
 import drawWidget from '../templates/panels/drawWidget.pug';
 import drawWidgetElement from '../templates/panels/drawWidgetElement.pug';
 import '../stylesheets/panels/drawWidget.styl';
@@ -31,6 +32,8 @@ var DrawWidget = Panel.extend({
         'click .h-draw': 'drawElement',
         'click .h-group-count-option .h-group-count-select': 'selectElementsInGroup',
         'change .h-style-group': '_setToSelectedStyleGroup',
+        'change .h-sort-mode': '_changeSortMode',
+        'click .h-sort-order': '_toggleSortOrder',
         'change .h-brush-shape,.h-brush-size,.h-brush-screen': '_changeBrush',
         'change .h-fixed-shape,.h-fixed-height,.h-fixed-width': '_changeShapeConstraint',
         'click .h-configure-style-group': '_styleGroupEditor',
@@ -64,9 +67,12 @@ var DrawWidget = Panel.extend({
         this._groups = new StyleCollection();
         this._style = new StyleModel({id: this.parentView._defaultGroup});
         this.listenTo(this._groups, 'add change', this._handleStyleGroupsUpdate);
-        this.listenTo(this._groups, 'remove', this.render);
+        this.listenTo(this._groups, 'remove', this._handleStyleGroupsRemoved);
         this.listenTo(this.collection, 'add remove reset', this._recalculateGroupAggregation);
         this.listenTo(this.collection, 'change update reset', this.render);
+        // if the annotation's metadata is edited while it is active, react immediately
+        this._lastAllowedGroupsKey = this._allowedGroupsKey();
+        this.listenTo(this.annotation, 'change:annotation', this._handleAnnotationAttributesChange);
         this._groups.fetch().done(() => {
             // ensure the default style exists
             if (this._groups.has(this.parentView._defaultGroup)) {
@@ -75,9 +81,12 @@ var DrawWidget = Panel.extend({
                 this._groups.add(this._style.toJSON());
                 this._groups.get(this._style.id).save();
             }
+            this._ensureAllowedGroupsExist();
             if (this._editOptions.style && this._groups.get(this._editOptions.style)) {
                 this._setStyleGroup(this._groups.get(this._editOptions.style).toJSON());
             }
+            this._restrictStyleToAllowedGroups();
+            this._debounceRender();
         });
         this.on('h:mouseon', (model) => {
             if (model && model.id) {
@@ -110,10 +119,11 @@ var DrawWidget = Panel.extend({
                 delete this._skipRenderHTML;
             }
         } else {
+            this._sortElements();
             this.$el.html(drawWidget({
                 title: 'Draw',
                 elements: this.collection.models,
-                groups: this._groups,
+                groups: this._groupsForDisplay(),
                 style: this._style.id,
                 defaultGroup: this.parentView._defaultGroup,
                 highlighted: this._highlighted,
@@ -123,6 +133,8 @@ var DrawWidget = Panel.extend({
                 collapsed: this.$('.s-panel-content.collapse').length && !this.$('.s-panel-content').hasClass('in'),
                 firstRender: true,
                 displayIdStart: 0,
+                sortMode: this._editOptions.sort_mode || 'label',
+                sortOrder: this._editOptions.sort_order || 'asc',
                 partialCount: this.annotation && this.annotation._pageElements
             }));
             this.$('.h-dropdown-content').collapse({toggle: false});
@@ -372,6 +384,7 @@ var DrawWidget = Panel.extend({
                 }
             }
         }
+        this._reorderElementDom();
     },
 
     /**
@@ -818,6 +831,17 @@ var DrawWidget = Panel.extend({
         if (!opts.size_mode) {
             opts.size_mode = 'unconstrained';
         }
+        if (opts.sort_mode === 'label-reverse') {
+            // migrate the legacy combined mode/order value
+            opts.sort_mode = 'label';
+            opts.sort_order = 'desc';
+        }
+        if (!opts.sort_mode || !['label', 'group', 'shape', 'count'].includes(opts.sort_mode)) {
+            opts.sort_mode = 'label';
+        }
+        if (!opts.sort_order || !['asc', 'desc'].includes(opts.sort_order)) {
+            opts.sort_order = 'asc';
+        }
     },
 
     updateCount(groupName, change) {
@@ -1071,10 +1095,99 @@ var DrawWidget = Panel.extend({
     },
 
     _handleStyleGroupsUpdate() {
+        this._restrictStyleToAllowedGroups();
         this._debounceRender();
         this.trigger('h:styleGroupsUpdated', this._groups);
     },
 
+    _handleStyleGroupsRemoved() {
+        this._restrictStyleToAllowedGroups();
+        this.render();
+    },
+
+    /**
+     * Get the current annotation's `allowed_groups` metadata, if any.
+     *
+     * @returns {string[]|null} The list of allowed group names, or null if the current annotation
+     *                          has no valid restriction.
+     */
+    _getAllowedGroups() {
+        return getAllowedGroups(this.annotation);
+    },
+
+    /**
+     * Compute a stable, order-independent key for the current `allowed_groups` restriction, used
+     * to detect whether it actually changed. Returns an empty string for "unrestricted".
+     *
+     * @returns {string} The restriction key.
+     */
+    _allowedGroupsKey() {
+        const allowed = this._getAllowedGroups();
+        return allowed ? allowed.slice().sort().join('\u0000') : '';
+    },
+
+    /**
+     * Respond to the active annotation's metadata being edited, which may have changed its
+     * `allowed_groups` restriction. The annotation's `change:annotation` event also fires on
+     * every autosave refetch, regardless of whether `allowed_groups` changed, so this bails out
+     * early when the restriction is unchanged to avoid re-rendering on unrelated edits.
+     */
+    _handleAnnotationAttributesChange() {
+        const key = this._allowedGroupsKey();
+        if (key === this._lastAllowedGroupsKey) {
+            return;
+        }
+        this._lastAllowedGroupsKey = key;
+        this._ensureAllowedGroupsExist();
+        this._restrictStyleToAllowedGroups();
+        this._debounceRender();
+    },
+
+    /**
+     * If the current annotation restricts its elements to a set of allowed_groups, create any of
+     * those groups that don't already exist, copying the current default group's style.
+     */
+    _ensureAllowedGroupsExist() {
+        const saves = ensureAllowedGroupsExist(
+            this._groups, this._getAllowedGroups(), this.parentView._defaultGroup);
+        if (!saves.length) {
+            return;
+        }
+        // Let other views know new groups exist after they're persisted so that a page refresh is
+        // not needed.
+        $.when(...saves).done(() => {
+            this.parentView.trigger('h:styleGroupsEdited', this._groups);
+        });
+    },
+
+    /**
+     * Return the style groups that should be offered to the user given the current annotation's
+     * `allowed_groups` restriction, if any, sorted alphabetically by id.
+     *
+     * @returns {object[]} A list of plain style group attribute objects.
+     */
+    _groupsForDisplay() {
+        const allowed = this._getAllowedGroups();
+        const groups = allowed ? this._groups.filter((group) => allowed.includes(group.id)) : this._groups.models;
+        return _.sortBy(groups, 'id').map((group) => group.toJSON());
+    },
+
+    /**
+     * If the current annotation restricts its elements to a set of `allowed_groups` and the
+     * currently selected style is not one of them, switch to the first allowed group that exists.
+     */
+    _restrictStyleToAllowedGroups() {
+        const allowed = this._getAllowedGroups();
+        if (!allowed || allowed.includes(this._style.id)) return;
+
+        const candidates = this._groups.filter((group) => allowed.includes(group.id))
+            .map((group) => group.id)
+            .sort();
+        if (candidates.length) {
+            this._setStyleGroup(this._groups.get(candidates[0]).toJSON());
+        }
+    },
+
     _highlightElement(evt) {
         const id = $(evt.currentTarget).data('id');
         const annotType = this.collection._byId[id].get('type');
@@ -1089,6 +1202,128 @@ var DrawWidget = Panel.extend({
         this.parentView.trigger('h:highlightAnnotation');
     },
 
+    /**
+     * Resolve the displayed shape name of an element, matching the label logic in
+     * drawWidgetElement.pug (closed polylines are polygons, open ones are lines).
+     *
+     * @param {ElementModel} model The element to inspect.
+     * @returns {string} The shape name.
+     */
+    _elementShape(model) {
+        const element = model.attributes;
+        return element.type === 'polyline'
+            ? (element.closed ? 'polygon' : 'line')
+            : element.type;
+    },
+
+    /**
+     * Resolve the group name of an element, falling back to the default group.
+     *
+     * @param {ElementModel} model The element to inspect.
+     * @returns {string} The group name.
+     */
+    _elementGroupName(model) {
+        return model.attributes.group || this.parentView._defaultGroup;
+    },
+
+    /**
+     * Compute a lexical sort key for an element that matches its displayed label. The number is
+     * intentionally omitted so that elements sort by their base label before enumeration.
+     *
+     * @param {ElementModel} model The element to compute a key for.
+     * @returns {string} A lower-case sort key.
+     */
+    _elementSortKey(model) {
+        const element = model.attributes;
+        const userLabel = (element.label || {}).value;
+        if (userLabel) {
+            return ('' + userLabel).toLowerCase();
+        }
+        const shape = this._elementShape(model);
+        if (['point', 'polyline', 'rectangle', 'ellipse', 'circle'].includes(element.type)) {
+            return `${this._elementGroupName(model)} ${shape}`.toLowerCase();
+        }
+        return ('' + shape).toLowerCase();
+    },
+
+    /**
+     * Count how many elements in the current collection belong to each group.
+     *
+     * @returns {Object} A map of group name to element count.
+     */
+    _elementGroupCounts() {
+        const counts = {};
+        this.collection.models.forEach((model) => {
+            const group = this._elementGroupName(model);
+            counts[group] = (counts[group] || 0) + 1;
+        });
+        return counts;
+    },
+
+    /**
+     * Sort the element collection's models in place according to the current sort mode.
+     */
+    _sortElements() {
+        const groupCounts = this._elementGroupCounts();
+        const comparators = {
+            label: (elementA, elementB) => this._elementSortKey(elementA).localeCompare(this._elementSortKey(elementB)),
+            group: (elementA, elementB) => this._elementGroupName(elementA).toLowerCase().localeCompare(this._elementGroupName(elementB).toLowerCase()),
+            shape: (elementA, elementB) => this._elementShape(elementA).toLowerCase().localeCompare(this._elementShape(elementB).toLowerCase()),
+            count: (elementA, elementB) => {
+                const groupA = this._elementGroupName(elementA);
+                const groupB = this._elementGroupName(elementB);
+                const countDiff = groupCounts[groupA] - groupCounts[groupB];
+                if (countDiff !== 0) {
+                    return countDiff;
+                }
+                return groupA.toLowerCase().localeCompare(groupB.toLowerCase());
+            }
+        };
+        const comparator = comparators[this._editOptions.sort_mode] || comparators.label;
+        const ordered = this._editOptions.sort_order === 'desc'
+            ? (elementA, elementB) => -comparator(elementA, elementB)
+            : comparator;
+        this.collection.models.sort(ordered);
+    },
+
+    /**
+     * Reorder the already-rendered element rows to match the current sort without rebuilding the
+     * list. Auto-assigned enumeration numbers are left as-is here and are recomputed on the next
+     * full render.
+     */
+    _reorderElementDom() {
+        const container = this.$el.find('.h-elements-container');
+        if (!container.length) {
+            return;
+        }
+        this._sortElements();
+        const rowsById = {};
+        container.children('.h-element').each((index, node) => {
+            rowsById[$(node).attr('data-id')] = node;
+        });
+        this.collection.models.forEach((model) => {
+            const node = rowsById[model.id];
+            if (node) {
+                container.append(node);
+            }
+        });
+    },
+
+    _changeSortMode() {
+        this._saveEditOptions({sort_mode: this.$('.h-sort-mode').val()});
+        this.render();
+    },
+
+    /**
+     * Toggle between ascending and descending order for the current sort
+     * mode, persist the choice, and re-render.
+     */
+    _toggleSortOrder() {
+        const order = this._editOptions.sort_order === 'desc' ? 'asc' : 'desc';
+        this._saveEditOptions({sort_order: order});
+        this.render();
+    },
+
     _recalculateGroupAggregation() {
         const groups = [];
         const used = {};

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui/web_client/stylesheets/panels/drawWidget.styl

@@ -97,6 +97,28 @@
         flex-shrink 0
         padding-left 6px
 
+  .h-sort-row
+    display flex
+    flex-direction row
+    align-items center
+    width 100%
+    margin 10px 0
+
+    .h-sort-label
+      flex-shrink 0
+      margin 0 6px 0 0
+      font-weight bold
+
+    .h-sort-mode
+      flex-grow 1
+      flex-shrink 1
+      width auto
+
+    .h-sort-order
+      flex-shrink 0
+      margin-left 6px
+      cursor pointer
+
   .btn-default.active
     background-color #5790ff
 

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui/web_client/templates/panels/drawWidget.pug

@@ -6,7 +6,7 @@ block title
 block content
   .input-group.input-group-sm.h-style-group-row
     select.form-control.h-style-group
-      each group in groups.sortBy('id')
+      each group in groups
         option(value=group.id, selected=group.id === style)
           = group.id
     .input-group-btn
@@ -103,6 +103,17 @@ block content
           label(title="If checked, the size is in screen pixels.  If unchecked, the size is in base image pixels")
             input.h-brush-screen(type="checkbox", checked=opts.brush_screen ? 'checked' : undefined)
             | Screen
+  .h-sort-row
+    label.h-sort-label(for='h-sort-mode') Sort By
+    select#h-sort-mode.h-sort-mode.form-control.input-sm(title='Sort annotation elements')
+      option(value='label', selected=sortMode === 'label') Label
+      option(value='group', selected=sortMode === 'group') Group
+      option(value='shape', selected=sortMode === 'shape') Shape
+      option(value='count', selected=sortMode === 'count') Count
+    a.h-sort-order(
+        href='javascript:void(0)',
+        title=sortOrder === 'desc' ? 'Sort descending (click to sort ascending)' : 'Sort ascending (click to sort descending)')
+      i(class=sortOrder === 'desc' ? 'icon-sort-alt-down' : 'icon-sort-alt-up')
   .h-group-count
     if partialCount
       b.h-group-count-label(title='* These counts only apply to loaded elements') Count*:

histomicsui-1.8.1.dev41/histomicsui/web_client/utilities/allowedGroups.js

@@ -0,0 +1,67 @@
+import _ from 'underscore';
+
+/**
+ * Read and validate the `allowed_groups` metadata on an annotation.
+ *
+ * The value is expected to live at `annotation.get('annotation').attributes.allowed_groups`
+ * and be an array of strings. As a convenience for the UI metadata editor, a JSON-stringified
+ * array (e.g. `'["groupA", "groupB"]'`) is also accepted and parsed. Any other value (missing,
+ * not an array or JSON array string, empty array, unparseable string, etc.) is treated as
+ * "unrestricted" and returns `null`.
+ *
+ * @param {AnnotationModel} annotation The annotation to check.
+ * @returns {string[]|null} The list of allowed group names, or null if there are no restrictions.
+ */
+function getAllowedGroups(annotation) {
+    if (!annotation) return null;
+
+    const attributes = (annotation.get('annotation') || {}).attributes || {};
+    let allowedGroups = attributes.allowed_groups;
+
+    if (_.isString(allowedGroups)) {
+        try {
+            allowedGroups = JSON.parse(allowedGroups);
+        } catch (err) {
+            return null;
+        }
+    }
+
+    if (!_.isArray(allowedGroups)) return null;
+
+    const filtered = _.uniq(allowedGroups.filter((group) => _.isString(group) && group.length));
+    return filtered.length ? filtered : null;
+}
+
+/**
+ * Ensure that every group in an `allowed_groups` restriction exists as a persisted style group.
+ * Create any that are missing by copying the style of the default group.
+ *
+ * Newly created groups are added to the collection synchronously and each is persisted
+ * asynchronously. The caller is responsible for reacting to the returned save promises.
+ *
+ * @param {StyleCollection} styles The style-group collection to populate.
+ * @param {string[]|null} allowed The validated `allowed_groups` restriction, or `null` for
+ *                                "unrestricted" (in which case nothing is created).
+ * @param {string} defaultGroupId The id of the default style group to copy.
+ * @returns {Array} The list of save promises for the newly created groups.
+ */
+function ensureAllowedGroupsExist(styles, allowed, defaultGroupId) {
+    if (!allowed) {
+        return [];
+    }
+    const missing = allowed.filter((groupId) => !styles.get(groupId));
+    if (!missing.length) {
+        return [];
+    }
+    // we assume the default group always exists; if it somehow does not, new groups are created
+    // with no inherited style rather than failing
+    const defaultGroup = styles.get(defaultGroupId);
+    const baseAttributes = defaultGroup ? _.omit(defaultGroup.toJSON(), 'id', 'group') : {};
+    return missing.map((groupId) => {
+        styles.add(Object.assign({}, baseAttributes, {id: groupId}));
+        return styles.get(groupId).save();
+    });
+}
+
+export default getAllowedGroups;
+export {ensureAllowedGroupsExist};

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui/web_client/views/body/ImageView.js

@@ -205,13 +205,17 @@ var ImageView = View.extend({
                 // it is very confusing if this value is smaller than the
                 // AnnotationSelector MAX_ELEMENTS_LIST_LENGTH
                 highlightFeatureSizeLimit: 5000,
-                scale: {position: {bottom: 20, right: 10}}
+                scale: {position: {bottom: 20, right: 10}},
+                unselectedOpacityMultiplier: typeof this._unselectedOpacityMultiplier !== 'number'
+                    ? 0.33
+                    : this._unselectedOpacityMultiplier
             });
             // Don't unclamp bounds for the image even if image overlays are present.
             if (this.viewerWidget.setUnclampBoundsForOverlay) {
                 this.viewerWidget.setUnclampBoundsForOverlay(false);
             }
             this.trigger('h:viewerWidgetCreated', this.viewerWidget);
+            this.viewerWidget.setUnselectedOpacityMultiplier(this._unselectedOpacityMultiplier);
 
             // handle annotation mouse events
             this.listenTo(this.viewerWidget, 'g:mouseOverAnnotation', this.mouseOverAnnotation);
@@ -1553,8 +1557,12 @@ var ImageView = View.extend({
             return;
         }
 
-        var elementModel = this.selectedElements.add(element.attributes, options);
+        // Assign `originalAnnotation` before the element enters the collection. Setting it after
+        // `add` would leave that first render seeing an undefined reference and falling back to
+        // the panel's active annotation instead of the clicked one.
+        var elementModel = new this.selectedElements.model(element.attributes);
         elementModel.originalAnnotation = annotation;
+        this.selectedElements.add(elementModel, options);
         this.viewerWidget.highlightAnnotation(this.selectedAnnotation.id);
     },
 
@@ -1784,6 +1792,14 @@ var ImageView = View.extend({
                     }
                 });
             }
+            if (val.unselectedOpacityMultiplier !== undefined) {
+                this._unselectedOpacityMultiplier = typeof val.unselectedOpacityMultiplier !== 'number'
+                    ? 0.33
+                    : val.unselectedOpacityMultiplier;
+                if (this.viewerWidget) {
+                    this.viewerWidget.setUnselectedOpacityMultiplier(val.unselectedOpacityMultiplier);
+                }
+            }
         });
     },
 

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui/web_client/views/popover/AnnotationContextMenu.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 
 import StyleCollection from '../../collections/StyleCollection';
+import getAllowedGroups, {ensureAllowedGroupsExist} from '../../utilities/allowedGroups';
 import View from '../View';
 
 import template from '../../templates/popover/annotationContextMenu.pug';
@@ -19,6 +20,8 @@ const AnnotationContextMenu = View.extend({
         this.styles = new StyleCollection();
         this.styles.fetch().done(() => this.render());
         this.listenTo(this.collection, 'add remove reset', this.render);
+        // react immediately if any annotation's metadata is edited
+        this.listenTo(this.parentView.annotations, 'change:annotation', this.render);
     },
     render() {
         this.$el.html(template({
@@ -28,7 +31,16 @@ const AnnotationContextMenu = View.extend({
         return this;
     },
     refetchStyles() {
-        this.styles.fetch().done(() => this.render());
+        // Prevent race conditions when multiple fetches happen in quick succession.
+        const requestId = (this._styleFetchRequestId = (this._styleFetchRequestId || 0) + 1);
+        this.styles.fetch({
+            success: (collection, resp, options) => {
+                if (requestId === this._styleFetchRequestId) {
+                    collection.set(resp, options);
+                    this.render();
+                }
+            }
+        });
     },
     setGroupCount(groupCount) {
         this._cachedGroupCount = groupCount;
@@ -96,7 +108,16 @@ const AnnotationContextMenu = View.extend({
         }
     },
     _getAnnotationGroups() {
-        const groups = this.styles.map((style) => style.id);
+        // restrict to the allowed groups of the annotation that owns the selected/right-clicked
+        // element, not whichever annotation happens to be active in the Annotations panel
+        const referenceElement = this.collection.at(0);
+        const referenceAnnotation = (referenceElement && referenceElement.originalAnnotation) || this.parentView.activeAnnotation;
+        const allowed = getAllowedGroups(referenceAnnotation);
+        this._ensureAllowedGroupsExist(allowed);
+        let groups = this.styles.map((style) => style.id);
+        if (allowed) {
+            groups = groups.filter((groupId) => allowed.includes(groupId));
+        }
         groups.sort((a, b) => {
             const countA = this._cachedGroupCount[a] || 0;
             const countB = this._cachedGroupCount[b] || 0;
@@ -113,6 +134,24 @@ const AnnotationContextMenu = View.extend({
         });
         return groups;
     },
+    /**
+     * Create any style groups required by the given `allowed_groups` restriction that don't
+     * already exist. Once the new groups are persisted, notify the other views so their style
+     * collections stay in sync.
+     *
+     * @param {string[]|null} allowed The validated `allowed_groups` restriction, or `null` when
+     *                                unrestricted.
+     */
+    _ensureAllowedGroupsExist(allowed) {
+        const saves = ensureAllowedGroupsExist(
+            this.styles, allowed, this.parentView._defaultGroup);
+        if (!saves.length) {
+            return;
+        }
+        $.when(...saves).done(() => {
+            this.parentView.trigger('h:styleGroupsEdited', this.styles);
+        });
+    },
     _setGroup(evt) {
         evt.preventDefault();
         evt.stopPropagation();

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: histomicsui
-Version: 1.8.1.dev16
+Version: 1.8.1.dev41
 Summary: Organize, visualize, and analyze histology images.
 Home-page: https://github.com/DigitalSlideArchive/histomicsui
 Author: Kitware, Inc.

{histomicsui-1.8.1.dev16 → histomicsui-1.8.1.dev41}/histomicsui.egg-info/SOURCES.txt

@@ -14,6 +14,7 @@ setup.cfg
 setup.py
 tox.ini
 .circleci/config.yml
+docs/annotation_group_restrictions.rst
 docs/config_options.rst
 docs/controls.rst
 docs/slicer_cli_plugins.rst
@@ -134,6 +135,7 @@ histomicsui/web_client/templates/popover/annotationContextMenu.pug
 histomicsui/web_client/templates/popover/annotationPopover.pug
 histomicsui/web_client/templates/popover/annotationPopoverMetadata.pug
 histomicsui/web_client/templates/popover/pixelmapContextMenu.pug
+histomicsui/web_client/utilities/allowedGroups.js
 histomicsui/web_client/views/HierarchyWidget.js
 histomicsui/web_client/views/JobDetailsWidget.js
 histomicsui/web_client/views/View.js
@@ -177,6 +179,7 @@ tests/test_files/sample_girder_id.anot
 tests/test_files/test_analysis_detection.xml
 tests/test_files/test_analysis_features.xml
 tests/web_client_specs/.eslintrc
+tests/web_client_specs/allowedGroupsSpec.js
 tests/web_client_specs/analysisSpec.js
 tests/web_client_specs/annotationSpec.js
 tests/web_client_specs/girderUISpec.js