WIP: Refactor study results local features

web_external/StudyResults/StudyResultsLocalFeaturesView.js

@@ -0,0 +1,145 @@
+isic.views.StudyResultsLocalFeaturesView = isic.View.extend({
+    /**
+     * Create a view to select and display local features of an annotation.
+     *
+     * @param {Object} settings - Parameters for the view.
+     * @param {HTMLElement} settings.el - Element to attach this view to.
+     * @param {isic.models.AnnotationModel} settings.annotation - The annotation
+     * model; this may change and this view will update.
+     * @param {isic.models.FeaturesetModel} settings.featureset - The featureset
+     * of the study for the annotation; this should never change (delete and
+     * re-instantiate this view for a new study).
+     * @param {girder.View} settings.parentView - View that instantiated this view.
+     */
+    initialize: function (settings) {
+        this.annotation = settings.annotation;
+        this.featureset = settings.featureset;
+
+        this.render();
+
+        this.listenTo(this.annotation, 'change', this.annotationChanged);
+        this.listenTo(this.featureset, 'change', this.render);
+    },
+
+    render: function () {
+        if (!this.featureset.id) {
+            // TODO: this should not happen
+            this.$el.html('<span>N/A</span>');
+            return this;
+        }
+        this.$el.html(isic.templates.studyResultsLocalFeaturesPage({
+            hasLocalFeatures: !_.isEmpty(this.featureset.get('localFeatures'))
+        }));
+
+        this.selectFeatureView = new isic.views.StudyResultsLocalFeaturesSelectView({
+            el: this.$('#isic-study-results-local-features-select-container'),
+            annotation: this.annotation,
+            featureset: this.featureset,
+            parentView: this
+        });
+        this.overlayImageViewerWidget = new isic.views.OverlayImageViewerWidget({
+            el: this.$('#isic-study-results-local-features-image-container'),
+            model: this.annotation.image(),
+            parentView: this
+        }).render();
+
+        this.selectedFeatureId = null;
+        this.listenTo(this.selectFeatureView, 'changed', this.selectedFeatureChanged);
+
+        return this;
+    },
+
+    selectedFeatureChanged: function (featureId) {
+        if (featureId === this.selectedFeatureId) {
+            return;
+        }
+        this.selectedFeatureId = featureId;
+
+        if (this.selectedFeatureId && this.annotation.isComplete()) {
+            var annotationValue = this.annotation.get('annotations')[this.selectedFeatureId];
+            if (annotationValue) {
+                this.overlayImageViewerWidget.overlay(annotationValue);
+                return;
+            }
+        }
+        this.overlayImageViewerWidget.clear();
+    },
+
+    annotationChanged: function () {
+        this.selectedFeatureId = null;
+
+        // this.selectFeatureView updates itself when this.annotation changes
+
+        // TODO: this.overlayImageViewerWidget should probably expose a method
+        //   to update its model
+        var overlayImageModel = this.overlayImageViewerWidget.model;
+        overlayImageModel.clear({silent: true});
+        overlayImageModel.set(this.annotation.image().attributes);
+    },
+
+    setVisible: function (visible) {
+        if (visible) {
+            this.$el.removeClass('hidden');
+        } else {
+            this.$el.addClass('hidden');
+        }
+    }
+});
+
+// View for a collection of local features in a select tag
+isic.views.StudyResultsLocalFeaturesSelectView = isic.View.extend({
+    events: {
+        'change': 'selectedFeatureChanged'
+    },
+
+    initialize: function (settings) {
+        this.annotation = settings.annotation;
+        this.featureset = settings.featureset;
+
+        this.render();
+
+        this.listenTo(this.annotation, 'change', this.annotationChanged);
+    },
+
+    render: function () {
+        var availableFeatures;
+        if (this.annotation.isComplete()) {
+            // Annotation is complete
+            var featuresetLocalFeatures = this.featureset.get('localFeatures');
+            var annotationValues = this.annotation.get('annotations');
+            availableFeatures = featuresetLocalFeatures.filter(_.bind(function (feature) {
+                return _.has(annotationValues, feature.id);
+            }, this));
+        } else {
+            // Annotation is pending
+            availableFeatures = [];
+        }
+
+        this.$el.html(isic.templates.studyResultsLocalFeaturesSelectPage({
+            availableFeatures: availableFeatures
+        }));
+
+        // Set up select box
+        var placeholder = _.isEmpty(availableFeatures)
+            ? 'No features available'
+            : 'Select a feature... (' + availableFeatures.length + ' available)';
+        var select = this.$('#isic-study-results-local-features-select-box');
+        select.select2({
+            placeholder: placeholder
+        });
+
+        return this;
+    },
+
+    selectedFeatureChanged: function () {
+        this.trigger('changed', this.$('select').val());
+    },
+
+    annotationChanged: function () {
+        // Destroy previous select2
+        var select = this.$('#isic-study-results-local-features-select-box');
+        select.select2('destroy');
+
+        this.render();
+    }
+});