Merge pull request #712 from rfcx/feature/CE-1109-user-can-open-explo…

…rer-from-arbimon-visualizer

CE-1109 User can open Explorer from Arbimon Visualizer (only recordings uploaded with Uploader App)

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## v3.0.33 - July XX, 2021
 
+New features:
+
+- CE-1109 User can open Explorer from Arbimon Visualizer (only recordings uploaded with Uploader App)
+- CE-1110 User can scale spectrogram in Visualizer to standard frequencies
+
 Performance improvements:
 
 - CE-988 The datime_local column is removed
@@ -10,10 +15,6 @@ Performance improvements:
 
 ## v3.0.32 - June 26, 2021
 
-New feature:
-
-- CE-1110 User can scale spectrogram in Visualizer to standard frequencies
-
 Performance improvements:
 
 - CE-1065 Patten Matching list loads quicker

DEPLOYMENT_NOTES.md

@@ -1,7 +1,8 @@
 # Arbimon Deployment Notes
 
-## v.3.0.32
+## v3.0.33
 
+- Add `explorerBaseUrl` in `config/rfcx.local.json` file
 - Update the "upload" lambda to not save datetime_local
 - Run sql migration 018-remove-datetime-local-column-from-recordings-table.sql
 

app/model/recordings.js

@@ -24,7 +24,7 @@ var audioTools   = require('../utils/audiotool');
 var sqlutil      = require('../utils/sqlutil');
 var dbpool       = require('../utils/dbpool');
 var tyler        = require('../utils/tyler.js');
-
+const rfcxConfig = config('rfcx');
 const moment = require('moment');
 const Projects = require('./projects');
 
@@ -296,6 +296,7 @@ var Recordings = {
                         "SUBSTRING_INDEX(R.uri,'/',-1) as file, R.meta, \n"+
                         "S.name as site, \n"+
                         "S.timezone, \n"+
+                        "S.external_id, \n"+
                         "R.uri, \n"+
                         "R.datetime, \n"+
                         "R.datetime_utc, \n"+
@@ -381,6 +382,7 @@ var Recordings = {
                         d.legacy = Recordings.isLegacy(d);
                         d.meta = d.meta ? Recordings.__parse_meta_data(d.meta) : null;
                         d.file = d.meta && d.meta.filename? d.meta.filename : d.file;
+                        d.explorerUrl = d.legacy ? null : `${rfcxConfig.explorerBaseUrl}/explorer/${d.external_id}?t=${moment(d.datetime_utc).format('YYYYMMDDTHHmmssSSS')}Z`;
                     })
                     return data;
                 }

assets/app/app/visualizer/layer-item/recording-layer.html

@@ -1,6 +1,6 @@
 <div class="layer">
     <div class="row">
-        <div class="col-sm-9">
+        <div ng-class="{'col-sm-9': !visobject.explorerUrl, 'col-sm-10': visobject.explorerUrl}">
             <div class="audio-seek-bar clickable" ng-click="audio_player.setCurrentTime(($event|consoleLog|mouseEventContainerPercent|consoleLog).x * visobject.duration)">
                 <div class="bar" ng-style="{width: ((100*audio_player.getCurrentTime()/visobject.duration) | round)+'%'}"></div>
             </div>
@@ -70,6 +70,13 @@
                             <i class="fa fa-download"></i>
                         </button>
                     </div>
+                    <div class="btn-group ml-1" ng-show="visobject.explorerUrl">
+                        <a class="btn btn-default btn-sm"
+                            ng-href="{{layer.controller.explorerUrl()}}"
+                            tooltip="Navigate to Explorer">
+                            <i class="fa fa-external-link"></i>
+                        </a>
+                    </div>
                     <div class="btn-group ml-1" style="position: relative;">
                         <button class="btn btn-default btn-sm"
                             ng-disabled="!audio_player.clustersData"
@@ -103,7 +110,7 @@ <h3 class="popover-title">
                 </div>
             </div>
         </div>
-        <div class="col-sm-3 no-pad-r">
+        <div class="pl-0 pr-3 no-pad-r" ng-class="{'col-sm-3': !visobject.explorerUrl, 'col-sm-2': visobject.explorerUrl}">
             <div class="">
                 <i class="fa fa-sm fa-play"></i>
                 {{ audio_player.getCurrentTime() | number:2 }} s

assets/app/app/visualizer/layers/recordings/recordings.js

@@ -6,7 +6,7 @@ angular.module('a2.visualizer.layers.recordings', [
     /**
      * @ngdoc object
      * @name a2.visualizer.layers.recordings.object:recordings-layer
-     * @description Recordings layer. 
+     * @description Recordings layer.
      * adds the recordings-layer layer_type to layer_types. This layer uses
      * a2.visualizer.layers.recordings.controller:a2VisualizerRecordingLayerController as controller,
      * and requires a visobject of type recording to be selected.
@@ -24,7 +24,7 @@ angular.module('a2.visualizer.layers.recordings', [
         hide_visibility: true
     });
 })
-.controller('a2VisualizerRecordingLayerController', function($scope, $modal, $location){
+.controller('a2VisualizerRecordingLayerController', function($scope, $modal, $location, $window){
     this.setGain = function(gain){
         $scope.audio_player.setGain(gain).then(function(){
             var gain=$scope.audio_player.gain;
@@ -33,6 +33,10 @@ angular.module('a2.visualizer.layers.recordings', [
             });
         });
     };
+    this.explorerUrl = function() {
+        if (!$scope.visobject) return null;
+        return $scope.visobject.explorerUrl;
+    };
     this.openFreqFilterModal = function(){
         if(!$scope.visobject){
             return;
@@ -60,15 +64,15 @@ angular.module('a2.visualizer.layers.recordings', [
 .controller('a2VisualizerFrequencyFilterModalController', function($scope, $modalInstance, data){
     $scope.recording = data.recording;
     $scope.max_freq = data.recording.sample_rate / 2;
-    
+
     $scope.has_previous_filter = true; //!!data.filter;
     $scope.filter = data.filter ? angular.copy(data.filter) : {min:0, max:$scope.max_freq};
-    
+
     $scope.remove_filter = function(){
         $modalInstance.close();
     };
     $scope.apply_filter = function(){
         $modalInstance.close($scope.filter);
     };
 })
-;
+;

config/rfcx.json

@@ -2,5 +2,6 @@
   "coreAPIEnabled": true,
   "apiBaseUrl": "https://staging-api.rfcx.org",
   "mediaBaseUrl": "https://staging-media-api.rfcx.org",
-  "deviceBaseUrl": "https://staging-device-api.rfcx.org"
+  "deviceBaseUrl": "https://staging-device-api.rfcx.org",
+  "explorerBaseUrl": "https://staging-explorer.rfcx.org"
 }