Release 0.9.3

crs4 · Feb 21, 2022 · e07cb0d · e07cb0d
2 parents fe97206 + c177560
commit e07cb0d
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 10 deletions.
diff --git a/promort/VERSION b/promort/VERSION
@@ -1 +1 @@
-0.9.2
+0.9.3
diff --git a/promort/src/js/ome_seadragon_viewer/viewer.controllers.js b/promort/src/js/ome_seadragon_viewer/viewer.controllers.js
@@ -112,10 +112,10 @@
         }
     }
 
-    SimpleHeatmapViewerController.$inject = ['$scope', '$routeParams', '$rootScope', '$location', '$log',
+    SimpleHeatmapViewerController.$inject = ['$scope', '$rootScope', '$location', '$log', 'ngDialog',
         'ViewerService', 'HeatmapViewerService', 'CurrentPredictionDetailsService'];
 
-    function SimpleHeatmapViewerController($scope, $routeParams, $rootScope, $location, $log, ViewerService,
+    function SimpleHeatmapViewerController($scope, $rootScope, $location, $log, ngDialog, ViewerService,
                                            HeatmapViewerService, CurrentPredictionDetailsService) {
         var vm = this;
         vm.slide_id = undefined;
@@ -125,17 +125,49 @@
         vm.dzi_url = undefined;
         vm.dataset_dzi_url = undefined;
         vm.static_files_url = undefined;
+        vm.loading_tiled_images = undefined;
+        vm.current_opacity = undefined;
         vm.getDZIURL = getDZIURL;
         vm.getDatasetDZIURL = getDatasetDZIURL;
         vm.getStaticFilesURL = getStaticFilesURL;
         vm.getSlideMicronsPerPixel = getSlideMicronsPerPixel;
+        vm.registerComponents = registerComponents;
+        vm.setOverlayOpacity = setOverlayOpacity;
+        vm.updateOverlayOpacity = updateOverlayOpacity;
 
         activate();
 
         function activate() {
+            var dialog = undefined;
             vm.slide_id = CurrentPredictionDetailsService.getSlideId();
             vm.prediction_id = CurrentPredictionDetailsService.getPredictionId();
 
+            vm.loading_tiled_images = 0;
+
+            $scope.$on('viewer.tiledimage.added', function() {
+                if (vm.loading_tiled_images == 0) {
+                    dialog = ngDialog.open({
+                        template: '/static/templates/dialogs/heatmap_loading.html',
+                        showClose: false,
+                        closeByEscape: false,
+                        closeByNavigation: false,
+                        closeByDocument: false
+                    });
+                }
+                vm.loading_tiled_images += 1;
+            });
+
+            $scope.$on('viewer.tiledimage.loaded', function() {
+                if (vm.loading_tiled_images > 0) {
+                    vm.loading_tiled_images -= 1;
+                    if (vm.loading_tiled_images === 0) {
+                        dialog.close();
+                    }
+                } else {
+                    console.log('Nothing to do...');
+                }
+            });
+
             ViewerService.getOMEBaseURLs()
                 .then(OMEBaseURLSuccessFn, OMEBaseURLErrorFn);
 
@@ -165,7 +197,8 @@
                     }
 
                     function PredictionInfoErrorFn(response) {
-
+                        $log.error(response.error);
+                        $location.url('404');
                     }
                 }
 
@@ -195,6 +228,21 @@
         function getSlideMicronsPerPixel() {
             return vm.slide_details.image_microns_per_pixel;
         }
+
+        function registerComponents(viewer_manager, dataset_base_url) {
+            HeatmapViewerService.registerComponents(viewer_manager, dataset_base_url);
+        }
+
+        function setOverlayOpacity(opacity, update) {
+            this.current_opacity = opacity;
+            if (typeof(update) !== 'undefined' && update === true) {
+                this.updateOverlayOpacity();
+            }
+        }
+
+        function updateOverlayOpacity() {
+            HeatmapViewerService.setOverlayOpacity(this.current_opacity);
+        }
     }
 
     AnnotationsViewerController.$inject = ['$scope', '$rootScope', '$location', '$log', 'ngDialog',

diff --git a/promort/src/js/ome_seadragon_viewer/viewer.directives.js b/promort/src/js/ome_seadragon_viewer/viewer.directives.js
@@ -160,14 +160,27 @@
                     );
                     ome_seadragon_viewer.buildViewer();
 
-                    ome_seadragon_viewer.viewer.addHandler('open', function() {
+                    ome_seadragon_viewer.viewer.world.addHandler('add-item', function(data) {
+                        scope.$broadcast('viewer.tiledimage.added');
+
+                        data.item.addHandler('fully-loaded-change', function(data) {
+                            if (data.fullyLoaded === true) {
+                                scope.$broadcast('viewer.tiledimage.loaded');
+                            }
+                        });
+                    });
+
+                    ome_seadragon_viewer.viewer.addHandler('open', function(data) {
                         ome_seadragon_viewer.setMinDZILevel(8);
 
                         ome_seadragon_viewer.initOverlaysLayer(
                             {
                                 'green': scope.shvc.getDatasetDZIURL('Greens_9')
                             }, 0.5
                         );
+                        scope.shvc.registerComponents(ome_seadragon_viewer, scope.shvc.dataset_dzi_url);
+                        scope.shvc.setOverlayOpacity(0.5);
+
                         ome_seadragon_viewer.activateOverlay('green');
                     });
 

diff --git a/promort/src/js/ome_seadragon_viewer/viewer.services.js b/promort/src/js/ome_seadragon_viewer/viewer.services.js
@@ -86,18 +86,35 @@
         }
     }
 
-    HeatmapViewerService.$inject = ['$http', '$log'];
+    HeatmapViewerService.$inject = ['$http', '$rootScope', '$log'];
 
-    function HeatmapViewerService($http, $log) {
+    function HeatmapViewerService($http, $rootScope, $log) {
         var HeatmapViewerService = {
-            getPredictionInfo: getPredictionInfo
+            registerComponents: registerComponents,
+            getPredictionInfo: getPredictionInfo,
+            setOverlay: setOverlay,
+            setOverlayOpacity: setOverlayOpacity
         };
 
         return HeatmapViewerService;
 
+        function registerComponents(viewer_manager, dataset_base_url) {
+            this.viewerManager = viewer_manager;
+            this.dataset_base_url = dataset_base_url;
+            $rootScope.$broadcast('viewerctrl.components.registered');
+        }
+
         function getPredictionInfo(prediction_id) {
             return $http.get('api/predictions/' + prediction_id + '/');
         }
+
+        function setOverlay(palette, threshold) {
+            this.viewerManager.setOverlay(this.dataset_base_url, palette, threshold);
+        }
+
+        function setOverlayOpacity(opacity) {
+            this.viewerManager.setOverlayOpacity(opacity);
+        }
     }
 
     AnnotationsViewerService.$inject = ['$log'];

diff --git a/promort/src/js/predictions_manager/predictions_manager.controllers.js b/promort/src/js/predictions_manager/predictions_manager.controllers.js
@@ -27,14 +27,27 @@
         .controller('PredictionsManagerController', PredictionsManagerController);
 
     PredictionsManagerController.$inject = ['$scope', '$routeParams', '$location', '$log',
-        'PredictionsManagerService', 'CurrentPredictionDetailsService'];
+        'PredictionsManagerService', 'CurrentPredictionDetailsService', 'HeatmapViewerService'];
 
     function PredictionsManagerController($scope, $routerParams, $location, $log, PredictionsManagerService,
-                                          CurrentPredictionDetailsService) {
+                                          CurrentPredictionDetailsService, HeatmapViewerService) {
         var vm = this;
         vm.prediction_review_label = undefined;
         vm.slide_id = undefined;
         vm.prediction_id = undefined;
+        vm.overlay_palette = undefined;
+        vm.overlay_opacity = undefined;
+        vm.overlay_threshold = undefined;
+
+        vm.oo_percentage = undefined;
+        vm.ot_percentage = undefined;
+        vm.threshold_update = undefined;
+
+        vm.updateOverlayOpacity = updateOverlayOpacity;
+        vm.updateOverlayThreshold = updateOverlayThreshold;
+        vm.updateOverlayThresholdPercentage = updateOverlayThresholdPercentage;
+        vm.updateOverlayPalette = updateOverlayPalette;
+        vm.isThresholdUpdate = isThresholdUpdate;
 
         activate();
 
@@ -43,6 +56,38 @@
 
             vm.slide_id = CurrentPredictionDetailsService.getSlideId();
             vm.prediction_id = CurrentPredictionDetailsService.getPredictionId();
+
+            vm.overlay_palette = 'Greens_9';
+            vm.overlay_opacity = 0.5;
+            vm.overlay_threshold = 0;
+
+            vm.oo_percentage = Math.floor(vm.overlay_opacity * 100);
+            vm.ot_percentage = Math.floor(vm.overlay_threshold * 100);
+            vm.threshold_update = false;
+        }
+
+        function updateOverlayOpacity() {
+            HeatmapViewerService.setOverlayOpacity(vm.overlay_opacity);
+            vm.oo_percentage = Math.floor(vm.overlay_opacity * 100);
+        }
+
+        function updateOverlayThreshold() {
+            HeatmapViewerService.setOverlay(vm.overlay_palette, vm.overlay_threshold);
+            vm.threshold_update = false;
+        }
+
+        function updateOverlayThresholdPercentage() {
+            vm.ot_percentage = Math.floor(vm.overlay_threshold * 100);
+            vm.threshold_update = true;
+        }
+
+        function updateOverlayPalette() {
+            console.log('Current overlay palette is: ' + vm.overlay_palette);
+            HeatmapViewerService.setOverlay(vm.overlay_palette, vm.overlay_threshold);
+        }
+
+        function isThresholdUpdate() {
+            return vm.threshold_update;
         }
     }
 })();
diff --git a/promort/static_src/templates/dialogs/heatmap_loading.html b/promort/static_src/templates/dialogs/heatmap_loading.html
@@ -0,0 +1,28 @@
+<div>
+    <!--
+      ~ Copyright (c) 2019, CRS4
+      ~
+      ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
+      ~ this software and associated documentation files (the "Software"), to deal in
+      ~ the Software without restriction, including without limitation the rights to
+      ~ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+      ~ the Software, and to permit persons to whom the Software is furnished to do so,
+      ~ subject to the following conditions:
+      ~
+      ~ The above copyright notice and this permission notice shall be included in all
+      ~ copies or substantial portions of the Software.
+      ~
+      ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+      ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+      ~ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+      ~ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+      ~ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+      ~ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+      -->
+    <div class="page-header text-center">
+        <h2>
+            <i class="icon-spinner_2 prm-rotating-spinner"></i>
+            <span>Loading data, please wait...</span>
+        </h2>
+    </div>
+</div>
diff --git a/promort/static_src/templates/predictions_manager/manager.html b/promort/static_src/templates/predictions_manager/manager.html
@@ -27,6 +27,74 @@ <h1>Prediction review</h1>
     <div id="pg_body" class="col-sm-12">
         <div id="hm_viewer_ctrl" class="col-sm-3 col-md-3">
             <viewer-navigation-panel></viewer-navigation-panel>
+            <div class="prm-form-header">
+                <h4 class="text-left">Overlay Controls</h4>
+            </div>
+            <div id="hm_ctrl" class="well" style="background-color:white">
+                <fieldset class="hm-palette">
+                    <div class="form-group row text-center">
+                        <div class="col-sm-6 prm-label-elem text-right">
+                            <h4 for="hm-palette">COLOR PALETTE</h4>
+                        </div>
+                        <div class="col-sm-6 prm-form-elem">
+                            <select class="form-control prm-text-input" id="palette_ctrl"
+                                    ng-model="pmc.overlay_palette"
+                                    ng-change="pmc.updateOverlayPalette()">
+                                <option value="Greens_9" selected>Green (10 values)</option>
+                                <option value="Blues_9">Blue (10 values)</option>
+                                <option value="Reds_9">Red (10 values)</option>
+                            </select>
+                        </div>
+                    </dev>
+                </fieldset>
+                <div class="form-group row text-center" style="margin-top:20px; margin-bottom:0px;">
+                    <div class="col-sm-6 prm-label-elem text-right">
+                        <h4>OPACITY</h4>
+                    </div>
+                    <div class="col-sm-3 text-left prm-form-elem">
+                        <div class="input-group">
+                            <input class="form-control prm-text-input" type="number" readonly
+                                   ng-model="pmc.oo_percentage">
+                            <div class="input-group-addon prm-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+                <div id="opacity_ctrl" class="input-group prm-row-elem prm-range-selector">
+                    <div class="input-group-addon prm-range-label">0</div>
+                    <input type="range" min="0.0" max="1.0" step="0.01"
+                           ng-model="pmc.overlay_opacity"
+                           ng-change="pmc.updateOverlayOpacity()" />
+                    <div class="input-group-addon prm-range-label">100</div>
+                </div>
+                <div class="form-group row text-center" style="margin-top:30px; margin-bottom:0px;">
+                    <div class="col-sm-6 prm-label-elem text-right">
+                        <h4>THRESHOLD</h4>
+                    </div>
+                    <div class="col-sm-3 text-left prm-form-elem">
+                        <div class="input-group">
+                            <input class="form-control prm-text-input" type="number" readonly
+                                   ng-model="pmc.ot_percentage">
+                            <div class="input-group-addon prm-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+                <div id="threshodl_ctrl" class="input-group prm-row-elem prm-range-selector">
+                    <div class="input-group-addon prm-range-label">0</div>
+                    <input type="range" min="0.0" max="1.0" step="0.1" 
+                           ng-model="pmc.overlay_threshold"
+                           ng-mouseup="pmc.updateOverlayThreshold()"
+                           ng-change="pmc.updateOverlayThresholdPercentage()" />
+                    <div class="input-group-addon prm-range-label">100</div>
+                </div>
+                <div class="row" ng-hide="!pmc.isThresholdUpdate()">
+                    <div class="col-sm-offset-2 col-sm-8 well">
+                        <h3 class="text-center" style="margin-top:0px;">
+                            <i class="icon-information_black"></i>
+                        </h3>
+                        <p class="text-center">Release the mouse to confirm threshold value</p>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="col-sm-9 col-md-9">
             <div id="viewer_container" class="prm-viewer_frame well">