WIP: Add an interactive viewer for local features in study results

web_external/StudyResults/studyResultsLocalFeaturesPage.jade

@@ -1,15 +1,9 @@
-- var hasFeaturesClass = hasLocalFeatures ? '' : 'hidden';
-- var noFeaturesClass = hasLocalFeatures ? 'hidden' : '';
-
-.isic-study-results-local-features-content(class=noFeaturesClass)
-  span N/A
-
-.isic-study-results-local-features-content(class=hasFeaturesClass)
-  #isic-study-results-select-local-feature-container
-  .isic-study-results-local-features-legend
-    .isic-study-results-local-features-legend-possible
-      i ■
-      span  50% confidence
-    .isic-study-results-local-features-legend-definite
-      i ■
-      span  100% confidence
+#isic-study-results-local-features-select-container
+.isic-study-results-local-features-legend
+  .isic-study-results-local-features-legend-possible
+    i ■
+    span  50% confidence
+  .isic-study-results-local-features-legend-definite
+    i ■
+    span  100% confidence
+#isic-study-results-local-features-image-container

web_external/StudyResults/studyResultsLocalFeaturesPage.styl

@@ -1,26 +1,27 @@
-.isic-study-results-local-features-content
-  display flex
-
-  &>span
-    margin-left 20px
+#isic-study-results-local-features-select-container
+  flex 1
 
-  .isic-study-results-local-features-legend
-    margin-top 10px
+.isic-study-results-local-features-legend
+  margin-top 10px
 
-    &>div
-      display inline
-      margin-left 20px
+  &>div
+    display inline
+    margin-left 20px
 
-    .isic-study-results-local-features-legend-possible
-      i
-        color #fafa00
+  .isic-study-results-local-features-legend-possible
+    i
+      color #fafa00
 
-    .isic-study-results-local-features-legend-definite
-      i
-        color #0000ff
+  .isic-study-results-local-features-legend-definite
+    i
+      color #0000ff
 
 #isic-study-results-local-features-image-container
   margin-top 5px
-
-#isic-study-results-select-local-feature-container
+  display flex
   flex 1
+  min-width 640px
+  min-height 480px
+  object-fit contain
+  width 100%
+  height 100%

web_external/StudyResults/studyResultsLocalFeaturesSelectPage.jade

@@ -0,0 +1,6 @@
+.isic-study-results-local-features-select-container
+  // For select2, add width in style attribute, see https://select2.github.io/examples.html#responsive
+  select#isic-study-results-local-features-select-box.form-control.input(style='width:100%')
+    option(selected disabled value='')
+    each feature in availableFeatures
+      option(value=feature.id)= feature.name.join(', ')

web_external/StudyResults/studyResultsSelectLocalFeaturesPage.styl → web_external/StudyResults/studyResultsLocalFeaturesSelectPage.styl

@@ -1,4 +1,4 @@
-.isic-study-results-select-local-features-container
+.isic-study-results-local-features-select-container
 
   select
     // Note that this might not apply, see https://select2.github.io/examples.html#responsive

web_external/StudyResults/studyResultsPage.jade

@@ -40,13 +40,3 @@
           #isic-study-results-global-features-container
 
         .tab-pane#isic-study-results-local-features-tab-content
-          #isic-study-results-local-features-container
-
-      // Container for images associated with tabs. Visibility is controlled by logic in StudyResultsView.js.
-      .isic-study-results-flex-grow.isic-study-results-image-container
-
-        // Local features image container
-        .isic-study-results-flex-grow.hidden#isic-study-results-local-features-image-container
-
-        // Image preview container
-        .isic-study-results-flex-grow#isic-study-results-image-preview-container

web_external/StudyResults/studyResultsPage.styl

@@ -27,11 +27,6 @@
   #isic-study-results-main-container
     overflow hidden
 
-  .isic-study-results-image-container
-    overflow auto
-    display flex
-    flex-flow column
-
   #isic-study-results-select-image-container
     min-width 155px
     overflow auto
@@ -42,25 +37,14 @@
   #isic-study-results-select-user-container
     margin-bottom 10px
 
-  #isic-study-results-image-preview-container
-  #isic-study-results-local-features-image-container
-    display flex
-
-  .isic-study-results-image-preview-container
-    flex 1
-
-  .isic-study-results-image
-    flex 1
-    min-width 640px
-    min-height 480px
-    object-fit contain
-    width 100%
-    height 100%
-
   .nav
     li
       a
         padding 5px 10px
 
   .tab-content
     padding-top 3px
+    height 100%
+
+    .tab-pane
+      height 100%

web_external/common/Viewer/ImageViewerWidget.js

@@ -118,5 +118,69 @@ isic.views.ImageViewerWidget = isic.View.extend({
 
         isic.View.prototype.destroy.call(this);
     }
+});
+
+isic.views.OverlayImageViewerWidget = isic.views.ImageViewerWidget.extend({
+    State: {
+        ABSENT: 0.0,
+        POSSIBLE: 0.5,
+        DEFINITE: 1.0
+    },
+
+    _createViewer: function () {
+        isic.views.ImageViewerWidget.prototype._createViewer.call(this);
+
+        this.annotationLayer = this.viewer.createLayer('feature', {
+            features: ['pixelmap']
+        });
+        this.pixelmap = this.annotationLayer.createFeature('pixelmap', {
+            selectionAPI: true,
+            url: girder.apiRoot + '/image/' + this.model.id + '/superpixels',
+            position: {
+                ul: {x: 0, y: 0},
+                lr: {x: this.sizeX, y: this.sizeY}
+            },
+            color: _.bind(function (dataValue, index) {
+                var color = {r: 0, g: 0, b: 0, a: 0};
+                var shownAlpha = 0.4;
+
+                if (dataValue === this.State.ABSENT) {
+                    // This could be semi-transparent, to show "definite negative" tiles
+                    color.a = 0.0;
+                } else if (dataValue === this.State.POSSIBLE) {
+                    color = window.geo.util.convertColor('#fafa00');
+                    color.a = shownAlpha;
+                } else if (dataValue === this.State.DEFINITE) {
+                    color = window.geo.util.convertColor('#0000ff');
+                    color.a = shownAlpha;
+                }
+                // TODO: else, log error
+                return color;
+            }, this)
+        });
+        this.annotationLayer.draw();
+        this.clear();
+    },
 
+    /**
+     * Remove all displayed overlays.
+     */
+    clear: function () {
+        this.pixelmap.data([]);
+        this.pixelmap.visible(false);
+        this.pixelmap.draw();
+
+        this.pixelmap.geoOff();
+    },
+
+    /**
+     * Display a single view-only feature on the viewer.
+     */
+    overlay: function (featureValues) {
+        this.clear();
+
+        this.pixelmap.data(featureValues);
+        this.pixelmap.visible(true);
+        this.pixelmap.draw();
+    }
 });

web_external/models/AnnotationModel.js

@@ -1,3 +1,11 @@
 isic.models.AnnotationModel = girder.Model.extend({
-    resourceName: 'annotation'
+    resourceName: 'annotation',
+
+    isComplete: function () {
+        return this.get('state') === 'complete';
+    },
+
+    image: function () {
+        return new isic.models.ImageModel(this.get('image'));
+    }
 });