Merge pull request #241 from DigitalSlideArchive/annotation-metadata

manthey · web-flow · commit 79cf68904817 · 2022-09-15T17:08:49.000-04:00
Support annotation metadata
diff --git a/histomicsui/web_client/dialogs/saveAnnotation.js b/histomicsui/web_client/dialogs/saveAnnotation.js
@@ -2,13 +2,15 @@ import _ from 'underscore';
 import $ from 'jquery';
 import tinycolor from 'tinycolor2';
 
-import AccessWidget from '@girder/core/views/widgets/AccessWidget';
-import View from '@girder/core/views/View';
 import { AccessType } from '@girder/core/constants';
 import { formatDate, DATE_SECOND } from '@girder/core/misc';
+import AccessWidget from '@girder/core/views/widgets/AccessWidget';
+// import MetadataWidget from '@girder/core/views/widgets/MetadataWidget';
+import View from '@girder/core/views/View';
 
-import saveAnnotation from '../templates/dialogs/saveAnnotation.pug';
+import MetadataWidget from '../panels/MetadataWidget';
 import '../stylesheets/dialogs/saveAnnotation.styl';
+import saveAnnotation from '../templates/dialogs/saveAnnotation.pug';
 
 /**
  * Create a modal dialog with fields to edit the properties of
@@ -40,7 +42,6 @@ var SaveAnnotation = View.extend({
 
         if (showStyleEditor) {
             const elements = this.annotation.get('annotation').elements;
-            console.assert(elements.length > 0); // otherwise we wouldn't show the style editor
             const firstElement = elements[0];
             if (elements.every((d) => d.lineWidth === firstElement.lineWidth)) {
                 defaultStyles.lineWidth = firstElement.lineWidth;
@@ -66,6 +67,28 @@ var SaveAnnotation = View.extend({
             })
         ).girderModal(this);
         this.$('.h-colorpicker').colorpicker();
+
+        if (this.annotation.id) {
+            if (!this.annotation.meta) {
+                this.annotation._meta = Object.assign({}, (this.annotation.get('annotation') || {}).attributes || {});
+            }
+            // copy the metadata to a place that is expected for the widget
+            if (!this.metadataWidget) {
+                this.metadataWidget = new MetadataWidget({
+                    item: this.annotation,
+                    parentView: this,
+                    fieldName: '_meta',
+                    accessLevel: this.annotation.get('_accessLevel'),
+                    panel: false,
+                    noSave: true
+                });
+            }
+            this.metadataWidget.setItem(this.annotation);
+            this.metadataWidget.accessLevel = this.annotation.get('_accessLevel');
+            this.metadataWidget.setElement(this.$('.hui-annotation-metadata')).render();
+        }
+
+        this.$el.find('.modal-dialog').addClass('hui-save-annotation-dialog');
         return this;
     },
 
@@ -85,6 +108,9 @@ var SaveAnnotation = View.extend({
     },
 
     cancel(evt) {
+        if (this.annotation) {
+            delete this.annotation._meta;
+        }
         evt.preventDefault();
         this.$el.modal('hide');
     },
@@ -144,6 +170,8 @@ var SaveAnnotation = View.extend({
             name: this.$('#h-annotation-name').val(),
             description: this.$('#h-annotation-description').val()
         });
+        this.annotation.attributes.annotation.attributes = this.annotation._meta;
+        delete this.annotation._meta;
         this.trigger('g:submit');
         this.$el.modal('hide');
     },
@@ -171,6 +199,7 @@ var dialog = new SaveAnnotation({
  */
 function show(annotation, options) {
     _.defaults(options, { title: 'Create annotation' });
+    delete annotation._meta;
     dialog.annotation = annotation;
     dialog.options = options;
     dialog.setElement('#g-dialog-container').render();
diff --git a/histomicsui/web_client/panels/MetadataPlot.js b/histomicsui/web_client/panels/MetadataPlot.js
@@ -29,7 +29,7 @@ var MetadataPlot = Panel.extend({
         },
         'click .h-panel-maximize': function (event) {
             this.$el.html('');
-            this.expand();
+            this.expand(event);
             this.$('.s-panel-content').addClass('in');
             let panelElem = this.$el.closest('.s-panel');
             let maximize = !panelElem.hasClass('h-panel-maximized');
diff --git a/histomicsui/web_client/panels/MetadataWidget.js b/histomicsui/web_client/panels/MetadataWidget.js
@@ -6,6 +6,7 @@ import { AccessType } from '@girder/core/constants';
 import { confirm } from '@girder/core/dialog';
 import events from '@girder/core/events';
 import { localeSort } from '@girder/core/misc';
+import View from '@girder/core/views/View';
 
 import JsonMetadatumEditWidgetTemplate from '@girder/core/templates/widgets/jsonMetadatumEditWidget.pug';
 import JsonMetadatumViewTemplate from '@girder/core/templates/widgets/jsonMetadatumView.pug';
@@ -20,7 +21,21 @@ import 'bootstrap/js/dropdown';
 import metadataWidgetTemplate from '../templates/panels/metadataWidget.pug';
 import '../stylesheets/panels/metadataWidget.styl';
 
-var MetadatumWidget = Panel.extend({
+function getMetadataRecord(item, fieldName) {
+    if (item[fieldName]) {
+        return item[fieldName];
+    }
+    let meta = item.attributes;
+    fieldName.split('.').forEach((part) => {
+        if (!meta[part]) {
+            meta[part] = {};
+        }
+        meta = meta[part];
+    });
+    return meta;
+}
+
+var MetadatumWidget = View.extend({
     className: 'g-widget-metadata-row',
 
     events: {
@@ -38,6 +53,7 @@ var MetadatumWidget = Panel.extend({
         this.parentView = settings.parentView;
         this.fieldName = settings.fieldName;
         this.apiPath = settings.apiPath;
+        this.noSave = settings.noSave;
         this.onMetadataEdited = settings.onMetadataEdited;
         this.onMetadataAdded = settings.onMetadataAdded;
     },
@@ -46,8 +62,8 @@ var MetadatumWidget = Panel.extend({
         var newMode = this.parentView.modes[to];
 
         if (_.has(newMode, 'validation') &&
-            _.has(newMode.validation, 'from') &&
-            _.has(newMode.validation.from, from)) {
+                _.has(newMode.validation, 'from') &&
+                _.has(newMode.validation.from, from)) {
             var validate = newMode.validation.from[from][0];
             var msg = newMode.validation.from[from][1];
 
@@ -85,6 +101,7 @@ var MetadatumWidget = Panel.extend({
             parentView: this,
             fieldName: this.fieldName,
             apiPath: this.apiPath,
+            noSave: this.noSave,
             onMetadataEdited: this.onMetadataEdited,
             onMetadataAdded: this.onMetadataAdded
         }, overrides || {});
@@ -105,6 +122,7 @@ var MetadatumWidget = Panel.extend({
             parentView: this,
             fieldName: this.fieldName,
             apiPath: this.apiPath,
+            noSave: this.noSave,
             onMetadataEdited: this.onMetadataEdited,
             onMetadataAdded: this.onMetadataAdded
         };
@@ -142,7 +160,7 @@ var MetadatumWidget = Panel.extend({
     }
 });
 
-var MetadatumEditWidget = Panel.extend({
+var MetadatumEditWidget = View.extend({
     events: {
         'click .g-widget-metadata-cancel-button': 'cancelEdit',
         'click .g-widget-metadata-save-button': 'save',
@@ -161,6 +179,7 @@ var MetadatumEditWidget = Panel.extend({
                 key: this.$el.find('.g-widget-metadata-key-input').val(),
                 value: this.getCurrentValue()
             });
+            return false;
         }
     },
 
@@ -173,6 +192,7 @@ var MetadatumEditWidget = Panel.extend({
         this.newDatum = settings.newDatum;
         this.fieldName = settings.fieldName;
         this.apiPath = settings.apiPath;
+        this.noSave = settings.noSave;
         this.onMetadataEdited = settings.onMetadataEdited;
         this.onMetadataAdded = settings.onMetadataAdded;
     },
@@ -187,6 +207,11 @@ var MetadatumEditWidget = Panel.extend({
         event.stopImmediatePropagation();
         const target = $(event.currentTarget);
         var metadataList = target.parent().parent();
+        if (this.noSave) {
+            delete getMetadataRecord(this.item, this.fieldName)[this.key];
+            metadataList.remove();
+            return;
+        }
         var params = {
             text: 'Are you sure you want to delete the metadatum <b>' +
                 _.escape(this.key) + '</b>?',
@@ -222,14 +247,14 @@ var MetadatumEditWidget = Panel.extend({
         event.stopImmediatePropagation();
         const target = $(event.currentTarget);
         var curRow = target.parent(),
-            tempKey = curRow.find('.g-widget-metadata-key-input').val(),
+            tempKey = curRow.find('.g-widget-metadata-key-input').val().trim(),
             tempValue = (value !== undefined) ? value : curRow.find('.g-widget-metadata-value-input').val();
         if (this.newDatum && tempKey === '') {
             events.trigger('g:alert', {
                 text: 'A key is required for all metadata.',
                 type: 'warning'
             });
-            return;
+            return false;
         }
         var saveCallback = () => {
             this.key = tempKey;
@@ -260,6 +285,18 @@ var MetadatumEditWidget = Panel.extend({
             if (this.onMetadataAdded) {
                 this.onMetadataAdded(tempKey, tempValue, saveCallback, errorCallback);
             } else {
+                if (this.noSave) {
+                    if (getMetadataRecord(this.item, this.fieldName)[tempKey] !== undefined) {
+                        events.trigger('g:alert', {
+                            text: tempKey + ' is already a metadata key',
+                            type: 'warning'
+                        });
+                        return false;
+                    }
+                    getMetadataRecord(this.item, this.fieldName)[tempKey] = tempValue;
+                    this.parentView.parentView.render();
+                    return;
+                }
                 this.item.addMetadata(tempKey, tempValue, saveCallback, errorCallback, {
                     field: this.fieldName,
                     path: this.apiPath
@@ -269,6 +306,20 @@ var MetadatumEditWidget = Panel.extend({
             if (this.onMetadataEdited) {
                 this.onMetadataEdited(tempKey, this.key, tempValue, saveCallback, errorCallback);
             } else {
+                if (this.noSave) {
+                    tempKey = tempKey === '' ? this.key : tempKey;
+                    if (tempKey !== this.key && getMetadataRecord(this.item, this.fieldName)[tempKey] !== undefined) {
+                        events.trigger('g:alert', {
+                            text: tempKey + ' is already a metadata key',
+                            type: 'warning'
+                        });
+                        return false;
+                    }
+                    delete getMetadataRecord(this.item, this.fieldName)[this.key];
+                    getMetadataRecord(this.item, this.fieldName)[tempKey] = tempValue;
+                    this.parentView.parentView.render();
+                    return;
+                }
                 this.item.editMetadata(tempKey, this.key, tempValue, saveCallback, errorCallback, {
                     field: this.fieldName,
                     path: this.apiPath
@@ -307,6 +358,7 @@ var JsonMetadatumEditWidget = MetadatumEditWidget.extend({
                 text: 'The field contains invalid JSON and can not be saved.',
                 type: 'warning'
             });
+            return false;
         }
     },
 
@@ -345,7 +397,7 @@ var MetadataWidget = Panel.extend({
             this.addMetadata(event, 'simple');
         },
         'click .h-panel-maximize': function (event) {
-            this.expand();
+            this.expand(event);
             this.$('.s-panel-content').addClass('in');
             let panelElem = this.$el.closest('.s-panel');
             let maximize = !panelElem.hasClass('h-panel-maximized');
@@ -382,6 +434,8 @@ var MetadataWidget = Panel.extend({
         this.apiPath = settings.apiPath;
         this.accessLevel = settings.accessLevel;
         this.onMetadataEdited = settings.onMetadataEdited;
+        this.panel = settings.panel === undefined ? true : settings.panel;
+        this.noSave = settings.noSave;
         // the event is created
         this.on('h-metadata-panel-update', (event) => {
             this.renderMetadataWidgetHeader(event);
@@ -456,6 +510,7 @@ var MetadataWidget = Panel.extend({
             apiPath: this.apiPath,
             accessLevel: this.accessLevel,
             parentView: this,
+            noSave: this.noSave,
             onMetadataEdited: this.onMetadataEdited,
             onMetadataAdded: this.onMetadataAdded
         });
@@ -468,6 +523,7 @@ var MetadataWidget = Panel.extend({
             fieldName: this.fieldName,
             apiPath: this.apiPath,
             accessLevel: this.accessLevel,
+            noSave: this.noSave,
             newDatum: true,
             parentView: widget,
             onMetadataEdited: this.onMetadataEdited,
@@ -478,20 +534,32 @@ var MetadataWidget = Panel.extend({
     },
 
     renderMetadataWidgetHeader: function () {
-        // pervent automatically collapse the widget after rendering again
+        // prevent automatically collapsing the widget after rendering again
         this.render();
     },
 
     render: function () {
         if (this.item && this.item.id) {
-            const imageId = this.item.id;
-            const apiPath = `/item/${imageId}/metadata`;
-            this.item.getAccessLevel((accessLevel) => {
-                var metaDict = this.item.get(this.fieldName) || {};
+            let func = this.item.getAccessLevel;
+            if (this.item.get('_modelType') === 'annotation') {
+                func = (callback) => {
+                    const accessLevel = this.item.getAccessLevel();
+                    callback(accessLevel);
+                };
+            }
+            func.call(this.item, (accessLevel) => {
+                const fieldParts = this.fieldName.split('.');
+                let metaDict = this.item.get(fieldParts[0]) || {};
+                fieldParts.slice(1).forEach((part) => {
+                    metaDict = metaDict[part] || {};
+                });
+                if (this.item[this.fieldName]) {
+                    metaDict = this.item[this.fieldName];
+                }
                 var metaKeys = Object.keys(metaDict);
                 metaKeys.sort(localeSort);
-                var firstKey = (metaKeys)[0];
-                var firstValue = metaDict[firstKey];
+                const firstKey = (metaKeys)[0];
+                let firstValue = metaDict[firstKey];
                 if (_.isObject(firstValue)) {
                     // if the value is a json object, JSON.stringify to make it more readable
                     firstValue = JSON.stringify(firstValue);
@@ -503,8 +571,9 @@ var MetadataWidget = Panel.extend({
                     firstValue: firstValue,
                     accessLevel: this.item.attributes._accessLevel,
                     AccessType: AccessType,
+                    panel: this.panel,
                     // if never rendered, the jquery selector will be empty and won't be visible
-                    collapsed: !this.$('.s-panel-content').hasClass('in') && !this.$el.closest('.s-panel').hasClass('h-panel-maximized')
+                    collapsed: this.panel && !this.$('.s-panel-content').hasClass('in') && !this.$el.closest('.s-panel').hasClass('h-panel-maximized')
                 }));
                 // Append each metadatum
                 _.each(metaKeys, function (metaKey) {
@@ -515,7 +584,8 @@ var MetadataWidget = Panel.extend({
                         accessLevel: this.item.attributes._accessLevel,
                         parentView: this,
                         fieldName: this.fieldName,
-                        apiPath: apiPath,
+                        apiPath: this.apiPath,
+                        noSave: this.noSave,
                         onMetadataEdited: this.onMetadataEdited,
                         onMetadataAdded: this.onMetadataAdded
                     }).render().$el);
diff --git a/histomicsui/web_client/stylesheets/dialogs/saveAnnotation.styl b/histomicsui/web_client/stylesheets/dialogs/saveAnnotation.styl
@@ -3,3 +3,23 @@
     float left
 .hui-info-list-entry
   user-select text
+.hui-annotation-metadata.hui-annotation-metadata-dialog
+  .s-panel-title-container
+    background-color #f0f0f0
+    padding 5px 6px
+    color #555
+    font-size 16px
+    font-weight bold
+    margin-top 8px
+    position relative
+    i.icon-up-open, i.icon-down-open
+      display none
+    .g-widget-metadata-add-button
+      margin-top 0
+@media (min-width: 768px)
+  .modal-dialog.hui-save-annotation-dialog
+    width inherit
+@media (min-width: 900px)
+  .modal-dialog.hui-save-annotation-dialog
+    width 70%
+    max-width 900px
diff --git a/histomicsui/web_client/templates/dialogs/saveAnnotation.pug b/histomicsui/web_client/templates/dialogs/saveAnnotation.pug
@@ -28,9 +28,10 @@
             i.icon-share
             | Unique ID: #{model.id}
             if model.get('_version')
-              |
+              = " "
               i.icon-angle-circled-down
               | Global Version: #{model.get('_version')}
+          .hui-annotation-metadata.hui-annotation-metadata-dialog
         if showStyleEditor
           hr
           h4 Reset the style for all point, line, and polygon elements in this annotation
diff --git a/histomicsui/web_client/templates/panels/metadataWidget.pug b/histomicsui/web_client/templates/panels/metadataWidget.pug
diff --git a/histomicsui/web_client/views/body/ImageView.js b/histomicsui/web_client/views/body/ImageView.js
