histomicsui 1.7.3.dev14__tar.gz → 1.7.3.dev38__tar.gz

{histomicsui-1.7.3.dev14/histomicsui.egg-info → histomicsui-1.7.3.dev38}/PKG-INFO

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

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/dialogs/saveAnnotation.js

@@ -8,6 +8,8 @@ import AccessWidget from '@girder/core/views/widgets/AccessWidget';
 // import MetadataWidget from '@girder/core/views/widgets/MetadataWidget';
 import View from '@girder/core/views/View';
 
+import AnnotationHistoryBrowserContainer from '../vue/components/AnnotationHistoryBrowserContainer.vue';
+
 import MetadataWidget from '../panels/MetadataWidget';
 import '../stylesheets/dialogs/saveAnnotation.styl';
 import saveAnnotation from '../templates/dialogs/saveAnnotation.pug';
@@ -332,6 +334,23 @@ var SaveAnnotation = View.extend({
 
         this.$el.find('.modal-dialog').addClass('hui-save-annotation-dialog');
         this._updateFuncValues();
+
+        // Mount Vue component for annotation history if editing an existing annotation
+        const historyBrowserElement = this.$('.vue-component-annotation-history').get(0);
+        if (historyBrowserElement) {
+            const historyBrowser = new AnnotationHistoryBrowserContainer({
+                historyBrowserElement,
+                propsData: {
+                    annotationId: this.annotation.id,
+                    parentView: this,
+                    defaultGroup: this.options.defaultGroup || 'default'
+                }
+            });
+            historyBrowser.$mount();
+            historyBrowserElement.appendChild(historyBrowser.$el);
+            this.historyBrowser = historyBrowser;
+        }
+
         return this;
     },
 
@@ -425,6 +444,15 @@ var SaveAnnotation = View.extend({
         return setValue;
     },
 
+    onRevert() {
+        if (this.annotation) {
+            delete this.annotation._meta;
+            delete this.annotation._styleFuncs;
+        }
+        this.annotation.trigger('h:revert:annotation', this.annotation, {});
+        this.$el.modal('hide');
+    },
+
     /**
      * Respond to form submission.  Triggers a `g:save` event on the
      * AnnotationModel.

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/panels/AnnotationSelector.js

@@ -57,6 +57,7 @@ var AnnotationSelector = Panel.extend({
         this.listenTo(eventStream, 'g:eventStream.start', this._refreshAnnotations);
         this.listenTo(eventStream, 'g:event.large_image_annotation.create', this._refreshAnnotations);
         this.listenTo(eventStream, 'g:event.large_image_annotation.remove', this._refreshAnnotations);
+        this.listenTo(this.collection, 'h:revert:annotation', this._refreshAnnotations);
         this.listenTo(this.collection, 'change:annotation change:groups', this._saveAnnotation);
         this.listenTo(girderEvents, 'g:login', () => {
             this.collection.reset();
@@ -238,8 +239,9 @@ var AnnotationSelector = Panel.extend({
     editAnnotationMetadata(evt) {
         const id = $(evt.currentTarget).parents('.h-annotation').data('id');
         const model = this.collection.get(id);
+        const defaultGroup = this.parentView._defaultGroup;
         this.listenToOnce(
-            showSaveAnnotationDialog(model, {title: 'Edit annotation', viewer: this.viewer}),
+            showSaveAnnotationDialog(model, {title: 'Edit annotation', viewer: this.viewer, defaultGroup}),
             'g:submit',
             () => {
                 if (model.get('displayed')) {

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/stylesheets/panels/annotationSelector.styl

@@ -53,12 +53,27 @@
   border-width 0
   white-space nowrap
   overflow hidden
+  display flex
+  gap 6px
 
   i
     margin-right 2px
     float left
     color #6b6b6b
 
+  .h-annotation-group-text
+    flex 1 1 auto
+    overflow hidden
+    white-space nowrap
+    min-width 0
+
+  .h-annotation-group-legend
+    width 18px
+    height 18px
+    border solid #0000
+    backrground #0000
+    flex-shrink 0
+
   &:hover
     background-color #eee
     cursor pointer

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/stylesheets/panels/drawWidget.styl

@@ -53,27 +53,49 @@
     border-width 1px 0
     border-style solid
     border-color #bababa
-    padding 5px 4px 0 3px
-    margin 5px 5px 0
-    width fit-content
-    max-width calc(100% - 10px)
+    padding 5px 0 0
+    margin 0
+    display flex
+    flex-direction row
 
     .h-group-count-label
-      display inline-block
       vertical-align top
+      flex-shrink 0
 
     .h-group-count-options
-      display inline-block
       padding-left 5px
-      max-width 200px
+      flex-shrink 1
+      flex-grow 1
+      display flex
+      flex-direction column
+      overflow hidden
 
       .h-group-count-option
         white-space nowrap
         overflow hidden
         text-overflow ellipsis
-
-    .h-group-count-select
-      padding-left 10px
+        flex-shrink 1
+        display flex
+
+        .h-group-count-value
+          flex-shrink 1
+          text-overflow ellipsis
+          overflow hidden
+          min-width 0
+
+        .h-group-count-legend
+          width 16px
+          height 16px
+          vertical-align middle
+          flex-shrink 0
+          padding-left 4px
+          border solid #0000
+          margin-top 2px
+          margin-left auto
+
+      .h-group-count-select
+        flex-shrink 0
+        padding-left 6px
 
   .btn-default.active
     background-color #5790ff

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/templates/dialogs/saveAnnotation.pug

@@ -91,6 +91,7 @@ mixin functional(name, key, title, color)
               = ' '
               i.icon-angle-circled-down
               | Global Version: #{model.get('_version')}
+          .vue-component-annotation-history
           .hui-annotation-metadata.hui-annotation-metadata-dialog
         if showStyleEditor
           hr

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/templates/panels/annotationSelector.pug

@@ -24,16 +24,40 @@ block content
   - var groups = _.keys(annotationGroups);
   - groups.sort();
   each groupName in groups
-    - var annotations = annotationGroups[groupName];
-    - var expanded = expandedGroups.has(groupName);
-    - var expandedClass = expanded ? 'h-group-expanded' : 'h-group-collapsed';
+    -
+      var annotations = annotationGroups[groupName];
+      var expanded = expandedGroups.has(groupName);
+      var expandedClass = expanded ? 'h-group-expanded' : 'h-group-collapsed';
+      var samplestyle={};
+      annotations.some((a) => {
+        var elems = (a.get('annotation') || {}).elements;
+        if (!elems) {
+          return false;
+        }
+        return elems.some((e) => {
+          if (e.group === groupName) {
+            if (e.fillColor) {
+              samplestyle.background = e.fillColor;
+            }
+            if (e.lineColor) {
+              samplestyle['border-color'] = e.lineColor;
+            }
+            if (e.lineWidth) {
+              samplestyle['border-width'] = e.lineWidth + 'px';
+            }
+            return samplestyle.background && samplestyle['border-color'] && samplestyle['border-width'];
+          }
+        });
+      })
     .h-annotation-group(class=[expandedClass], data-group-name=groupName)
-      .h-annotation-group-name.clearfix
+      .h-annotation-group-name
         if expanded
           i.icon-folder-open
         else
           i.icon-folder
-        = groupName
+        .h-annotation-group-text
+          = groupName
+        span.h-annotation-group-legend(style=samplestyle)
       if expanded
         each annotation in annotations
           - var name = annotation.get('annotation').name;

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui/web_client/templates/panels/drawWidgetElement.pug

@@ -1,13 +1,18 @@
-- var counts = {};
-- var displayIdOffset = 0;
-- var pixelmap = false;
-- var typeCounts = {};
+-
+  var counts = {};
+  var displayIdOffset = 0;
+  var pixelmap = false;
+  var typeCounts = {};
+  var groupStyles = {};
 if elements.length
   each element in elements
     -
       var classes = highlighted[element.id] ? ['h-highlight-element'] : [];
       element = element.toJSON();
       var groupName = element['group'] ? element['group'] : defaultGroup;
+      if (!groupStyles[groupName]) {
+        groupStyles[groupName] = {};
+      }
       var type = element.type === 'polyline' ? (element.closed ? 'polygon' : 'line') : element.type;
       var displayId = ++displayIdOffset + displayIdStart;
       var label = ((element.label || {}).value || type);
@@ -36,6 +41,15 @@ if elements.length
       if (element.type === 'pixelmap') {
         pixelmap = true;
       }
+      if (!groupStyles[groupName]['background-color'] && element['fillColor']) {
+        groupStyles[groupName]['background-color'] = element['fillColor'];
+      }
+      if (!groupStyles[groupName]['border-color'] && element['lineColor']) {
+        groupStyles[groupName]['border-color'] = element['lineColor'];
+      }
+      if (!groupStyles[groupName]['border-width'] && element['lineWidth']) {
+        groupStyles[groupName]['border-width'] = element['lineWidth'] + 'px';
+      }
     .h-element(data-id=element.id, class=classes)
       span.icon-cog.h-edit-element(title='Change style')
       span.h-element-label(title=label, display_id=displayId) #{label}
@@ -58,6 +72,7 @@ if firstRender
     .h-group-count-option(data-group=group[0], data-count=group[1])
       span.h-group-count-value #{group[1]} #{group[0]}
       span.icon-marquee.h-group-count-select(title="Select all elements in this group")
+      span.h-group-count-legend(style=groupStyles[group[0]])
 else
   - for (let group in counts)
     - updateCount(group, counts[group]);

histomicsui-1.7.3.dev38/histomicsui/web_client/vue/components/AnnotationHistoryBrowser.vue

@@ -0,0 +1,104 @@
+<script>
+import AnnotationHistoryGroup from './AnnotationHistoryGroup.vue';
+export default {
+    components: {
+        AnnotationHistoryGroup
+    },
+    props: ['annotationHistory', 'loading', 'userMap', 'defaultGroup'],
+    emits: ['revert'],
+    data() {
+        return {
+            collapsed: true
+        };
+    },
+    computed: {
+        annotationGroups() {
+            if (!this.annotationHistory.length) {
+                return [];
+            }
+            const annotationGroups = [];
+            let currentGroup = [this.annotationHistory[0]];
+            let lastTime = new Date(this.annotationHistory[0].updated);
+            this.annotationHistory.slice(1).forEach((annotation) => {
+                const updatedTime = new Date(annotation.updated);
+                const timeDiff = Math.abs(updatedTime - lastTime);
+                if (timeDiff >= 60 * 60 * 1000) {
+                    // Start a new group
+                    annotationGroups.push(currentGroup);
+                    currentGroup = [annotation];
+                } else {
+                    currentGroup.push(annotation);
+                }
+                lastTime = updatedTime;
+            });
+            annotationGroups.push(currentGroup);
+            return annotationGroups;
+        },
+        annotationHistoryEnabled() {
+            if (!this.annotationHistory || this.annotationHistory.length === 0) {
+                return undefined;
+            }
+            if (this.annotationHistory.length > 1) {
+                return true;
+            }
+            const firstVersion = this.annotationHistory[0];
+            return firstVersion.created === firstVersion.updated;
+        }
+    },
+    methods: {
+        handleRevert(version) {
+            this.$emit('revert', version);
+        }
+    }
+};
+</script>
+
+<template>
+  <div>
+    <div class="history-header">
+      <span
+        class="history-container-toggle"
+        @click="collapsed = !collapsed"
+      >
+        <i :class="collapsed ? 'icon-right-open' : 'icon-down-open'" />
+        Annotation Edit History
+      </span>
+    </div>
+    <div v-if="!collapsed">
+      <div v-if="!annotationHistoryEnabled">
+        <span>Ensure annotation history is turned on to track previous versions.</span>
+      </div>
+      <div v-else>
+        <div
+          class="history-body"
+        >
+          <div v-if="!annotationHistory || loading">
+            <i class="icon-spin4 animate-spin" />
+            Loading...
+          </div>
+          <div v-else>
+            <annotation-history-group
+              v-for="(group, index) in annotationGroups"
+              :key="index"
+              :history-group="group"
+              :user-id-map="userMap"
+              :allow-revert-initial="index !== 0"
+              :default-group="defaultGroup"
+              @revertToAnnotation="handleRevert"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.history-container-toggle:hover {
+  cursor: pointer;
+}
+
+.history-body {
+  margin-left: 20px;
+}
+</style>

histomicsui-1.7.3.dev38/histomicsui/web_client/vue/components/AnnotationHistoryBrowserContainer.vue

@@ -0,0 +1,162 @@
+<script>
+import _ from 'underscore';
+import Vue from 'vue';
+
+import UserModel from '@girder/core/models/UserModel';
+import {getCurrentUser} from '@girder/core/auth';
+import {restRequest} from '@girder/core/rest';
+
+import AnnotationHistoryBrowser from './AnnotationHistoryBrowser.vue';
+
+const Promise = require('bluebird');
+
+export default Vue.extend({
+    components: {
+        AnnotationHistoryBrowser
+    },
+    props: ['annotationId', 'parentView', 'defaultGroup'],
+    data() {
+        return {
+            annotationCopy: _.clone(this.annotation || {}),
+            history: null,
+            loading: false,
+            userIdToLogin: null,
+            waitingForRevert: false
+        };
+    },
+    mounted() {
+        this.positionShield();
+        this.updateAnnotationHistory();
+    },
+    methods: {
+        makeUserMap(shouldRefresh) {
+            this.loading = true;
+            const userMap = {};
+            // First, see if we can use the logged in user
+            const currentUser = getCurrentUser();
+            userMap[currentUser.id] = currentUser.get('login');
+            // Then, get all annotation editor IDs that aren't the logged in user
+            const userRequestPromises = [];
+            const uniqueUserIds = new Set([currentUser.id]);
+            this.history.forEach((annotation) => {
+                if (!uniqueUserIds.has(annotation.updatedId)) {
+                    uniqueUserIds.add(annotation.updatedId);
+                    const user = new UserModel();
+                    user.id = annotation.updatedId;
+                    userRequestPromises.push(user.fetch());
+                }
+            });
+            Promise.all(userRequestPromises).then((users) => {
+                users.forEach((user) => {
+                    userMap[user._id] = user.login;
+                });
+                this.userIdToLogin = userMap;
+                this.loading = false;
+                this.waitingForRevert = false;
+                if (shouldRefresh) {
+                    this.parentView.onRevert();
+                }
+                return true;
+            });
+        },
+        updateAnnotationHistory(shouldRefresh) {
+            if (!this.annotationId) {
+                return;
+            }
+            this.loading = true;
+            restRequest({
+                url: `annotation/${this.annotationId}/history`,
+                method: 'GET',
+                error: null
+            }).done((annotationHistory) => {
+                this.history = annotationHistory;
+                this.makeUserMap(shouldRefresh);
+            });
+        },
+        positionShield() {
+            const shield = this.$refs.shield;
+            if (shield && shield.parentNode !== document.body) {
+                document.body.appendChild(shield);
+            }
+        },
+        onRevert(version) {
+            this.loading = true;
+            // If an annotation takes > 1 second to be reverted, throw up a loading screen
+            setTimeout(() => {
+                if (this.loading) {
+                    this.waitingForRevert = true;
+                    this.$nextTick(() => {
+                        this.positionShield();
+                    });
+                }
+            }, 1000);
+            restRequest({
+                url: `annotation/${this.annotationId}/history/revert`,
+                method: 'PUT',
+                data: {version},
+                error: null
+            }).done(() => {
+                this.updateAnnotationHistory(true);
+            });
+        }
+    }
+});
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="waitingForRevert"
+      ref="shield"
+      class="loading-shield"
+    >
+      <div class="shield-content">
+        <i class="icon-spin3 animate-spin" />
+        Reverting to previous version. This may some time...
+      </div>
+    </div>
+    <annotation-history-browser
+      :annotation-history="history"
+      :loading="loading"
+      :user-map="userIdToLogin"
+      :default-group="defaultGroup"
+      @revert="onRevert"
+    />
+  </div>
+</template>
+
+<style scoped>
+.loading-shield {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+  pointer-events: all;
+  cursor: wait;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  animation: fadeIn 0.3s ease-out;
+}
+.shield-content {
+  padding: 24px;
+  background-color: white;
+}
+.loading-shield > i, span {
+  font-size: 24px;
+  z-index: 9999;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>

histomicsui-1.7.3.dev38/histomicsui/web_client/vue/components/AnnotationHistoryGroup.vue

@@ -0,0 +1,128 @@
+<script>
+import {formatDate, DATE_SECOND} from '@girder/core/misc';
+export default {
+    props: ['historyGroup', 'userIdMap', 'allowRevertInitial', 'defaultGroup'],
+    emits: ['revertToAnnotation'],
+    data() {
+        return {
+            collapsed: this.allowRevertInitial
+        };
+    },
+    computed: {
+        startingAnnotation() {
+            return this.historyGroup[0];
+        },
+        hiddenAnnotations() {
+            return this.historyGroup.slice(1);
+        },
+        iconClass() {
+            const classes = ['hidden-version-toggle'];
+            if (this.collapsed) {
+                classes.push('icon-right-open');
+            } else {
+                classes.push('icon-down-open');
+            }
+            if (!this.hiddenAnnotations.length) {
+                classes.push('display-none');
+            }
+            return classes;
+        }
+    },
+    methods: {
+        displayDate(dateString) {
+            return formatDate(dateString, DATE_SECOND);
+        },
+        displayGroups(annotationVersion) {
+            return annotationVersion.groups.map((group) => (
+                group === null ? this.defaultGroup : group
+            )).join(', ');
+        },
+        getUser(userId) {
+            return (this.userIdMap && this.userIdMap[userId]) ? this.userIdMap[userId] : userId;
+        }
+    }
+};
+</script>
+
+<template>
+  <div>
+    <span class="history-group-header attribute-block">
+      <i
+        v-if="hiddenAnnotations.length"
+        :class="iconClass"
+        @click="collapsed = !collapsed"
+      />
+      <span
+        v-else
+        class="hidden-version-toggle"
+      />
+      <span class="attribute-display">Edited: {{ displayDate(startingAnnotation.updated) }}</span>
+      <span class="attribute-display">Author: {{ getUser(startingAnnotation.updatedId) }}</span>
+      <span class="attribute-display">Version: {{ startingAnnotation._version }}</span>
+      <span
+        class="attribute-display"
+        :title="displayGroups(startingAnnotation)"
+      >
+        Groups: {{ displayGroups(startingAnnotation) }}
+      </span>
+      <i
+        v-if="allowRevertInitial"
+        class="revert-button icon-ccw"
+        @click="$emit('revertToAnnotation', startingAnnotation._version)"
+      />
+    </span>
+    <div
+      v-if="!collapsed && hiddenAnnotations.length"
+      class="hidden-version-container"
+    >
+      <div
+        v-for="entry in hiddenAnnotations"
+        :key="entry._version"
+        class="hidden-version-entry attribute-block"
+      >
+        <span class="hidden-version-toggle" />
+        <span class="attribute-display">Edited: {{ displayDate(entry.updated) }}</span>
+        <span class="attribute-display">Author: {{ getUser(entry.updatedId) }}</span>
+        <span class="attribute-display">Version: {{ entry._version }}</span>
+        <span
+          class="attribute-display"
+          :title="displayGroups(startingAnnotation)"
+        >
+          Groups: {{ displayGroups(entry) }}
+        </span>
+        <i
+          class="revert-button icon-ccw"
+          @click="$emit('revertToAnnotation', entry._version)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hidden-version-toggle {
+  display: inline-block;
+  min-width: 20px;
+}
+.hidden-version-toggle:hover {
+  cursor: pointer;
+}
+.revert-button:hover {
+  cursor:pointer;
+}
+.attribute-block > span, i {
+  max-width: 250px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipses;
+}
+.attribute-block {
+  display: flex;
+}
+.attribute-block > span {
+  padding-right: 8px;
+}
+.display-none {
+  display: none;
+}
+</style>

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38/histomicsui.egg-info}/PKG-INFO

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

{histomicsui-1.7.3.dev14 → histomicsui-1.7.3.dev38}/histomicsui.egg-info/SOURCES.txt

@@ -151,6 +151,9 @@ histomicsui/web_client/views/popover/AnnotationContextMenu.js
 histomicsui/web_client/views/popover/AnnotationPopover.js
 histomicsui/web_client/views/popover/PixelmapContextMenu.js
 histomicsui/web_client/views/popover/index.js
+histomicsui/web_client/vue/components/AnnotationHistoryBrowser.vue
+histomicsui/web_client/vue/components/AnnotationHistoryBrowserContainer.vue
+histomicsui/web_client/vue/components/AnnotationHistoryGroup.vue
 histomicsui/web_client/vue/components/ColorPickerInput.vue
 histomicsui/web_client/vue/components/EditHeatmapOrGridData.vue
 histomicsui/web_client/vue/components/EditHeatmapOrGridDataContainer.vue