Feature/dockstore 299 dag dropdown (#59)

* workflow version dropdown implemented in DAG tab

check by looking at workflow version's "valid"
if true, then put it in dropdown, otherwise, dont put it in dropdown
by this, there will be no need to implement warning when dag is invalid

* version dropdown fixed

dropdown will point to the valid versionName according to successContent
warning is not implemented yet

* missing tools warning implemented

warning of missing tool will only be shown if the descriptor type is cwl
- if the required tools are not in the repo, warning will be shown
- if the descriptor is invalid, the null warning will be shown
- if all tools needed are present and descriptor file is valid, dag will be shown

app/scripts/controllers/workflowdagview.js

@@ -18,6 +18,7 @@ angular.module('dockstore.ui')
       var cy;
       $scope.successContent = [];
       $scope.missingTool = false;
+      $scope.notFound = false;
 
       $scope.getWorkflowVersions = function() {
         var sortedVersionObjs = $scope.workflowObj.workflowVersions;
@@ -40,20 +41,22 @@ angular.module('dockstore.ui')
       };
 
       $scope.nodesAndEdges = function(workflowId, workflowVersions) {
-      var workflowVersionId;
-      if (workflowVersions.length == 0) {
-        return null;
-      }
-      for (var i = 0; i < workflowVersions.length; i++) {
-        if (workflowVersions[i].name === $scope.selVersionName) {
-          if (workflowVersions[i].valid) {
-            workflowVersionId = workflowVersions[i].id;
-            break;
-          } else {
-            return null;
+        var workflowVersionId;
+        if (workflowVersions.length == 0) {
+          return null;
+        }
+
+        for (var i = 0; i < workflowVersions.length; i++) {
+          if (workflowVersions[i].name === $scope.selVersionName) {
+            if (workflowVersions[i].valid) {
+              workflowVersionId = workflowVersions[i].id;
+              break;
+            } else {
+              return null;
+            }
           }
         }
-      }
+
         return WorkflowService.getWorkflowDag(workflowId, workflowVersionId)
           .then(
             function(dagJson) {
@@ -63,6 +66,16 @@ angular.module('dockstore.ui')
             function(response) {
               return $q.reject(response);
             });
+
+      };
+
+      $scope.checkVersion = function() {
+        $scope.successContent = [];
+        for(var i=0;i<$scope.workflowObj.workflowVersions.length;i++){
+          if($scope.workflowObj.workflowVersions[i].valid){
+            $scope.successContent.push($scope.workflowObj.workflowVersions[i].name);
+          }
+        }
       };
 
       $scope.filterVersion = function(element) {
@@ -79,13 +92,32 @@ angular.module('dockstore.ui')
 
       $scope.setDocument = function() {
         $scope.workflowVersions = $scope.getWorkflowVersions();
-        $scope.selVersionName = $scope.workflowVersions[0];
+        $scope.selVersionName = $scope.successContent[0];
 
       };
 
       $scope.refreshDocument = function() {
         $scope.dagJson = $scope.nodesAndEdges($scope.workflowObj.id, $scope.workflowObj.workflowVersions);
+        //$scope.dagJson is a promise returned by the web service from nodesAndEdges function
         if ($scope.dagJson !== null){
+          $scope.dagJson.then(
+          function(s){
+            if(s.nodes.length === 0 && s.edges.length === 0){
+              //DAG has no nodes and edges even though file is valid
+              //some inputs needed from file are missing from Github repo
+              $scope.missingTool = true;
+            }else{
+              //DAG has nodes and edges
+              $scope.missingTool = false;
+            }
+            $scope.notFound = false;
+          },
+          function(e){
+            console.log("dagJSON error");
+            $scope.notFound = true;
+            $scope.missingTool = false;
+          }
+        );
           cy = window.cy = cytoscape({
         	  container: document.getElementById('cy'),
 
@@ -134,6 +166,7 @@ angular.module('dockstore.ui')
               }
             }
           });
+
         } else {
           cy = window.cy = null;
         }

app/scripts/controllers/workflowdetails.js

@@ -34,6 +34,7 @@ angular.module('dockstore.ui')
       };
 
       $scope.openDAG = function() {
+        $scope.$broadcast('checkVersion');
         $scope.$broadcast('refreshFiles');
       };
 

app/scripts/directives/workflowdagview.js

@@ -17,7 +17,10 @@ angular.module('dockstore.ui')
       templateUrl: 'templates/workflowdagview.html',
       link: function postLink(scope, element, attrs) {
         scope.$watch('workflowObj.path', function(newValue, oldValue) {
-          if (newValue) scope.setDocument();
+          if (newValue) {
+            scope.checkVersion();
+            scope.setDocument();
+          }
         });
         scope.$watchGroup(
           ['selVersionName', 'workflowObj.id'],
@@ -28,6 +31,9 @@ angular.module('dockstore.ui')
           scope.setDocument();
           scope.refreshDocument();
         });
+        scope.$on('checkVersion', function(event){
+          scope.checkVersion();
+        });
 
       }
     };

app/templates/workflowdagview.html

@@ -5,21 +5,25 @@
         <strong>Workflow Version</strong>:
         <select class="ds-version" ng-model="selVersionName">
           <option
-            ng-repeat="version in workflowVersions"
+            ng-repeat="version in workflowVersions | filter: filterVersion "
             value="{{version}}">
             {{version}}
           </option>
         </select>
       </div>
     </div>
-    <div class="alert alert-warning" role="alert" ng-show="dagJson === null">
+    <div class="alert alert-warning"
+         role="alert"
+         ng-show="dagJson === null || notFound">
       <span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
       A Descriptor associated with this workflow could not be found.
     </div>
-    <!-- <div class="alert alert-warning" role="alert" ng-show="dagJson !== null">
+    <div class="alert alert-warning"
+         role="alert"
+         ng-show="workflowObj.descriptorType === 'cwl' && missingTool">
       <span class="glyphicon glyphicon-warning-sign"></span>&nbsp;
-      DAG cannot be created because this workflow is missing some required tools. 
-    </div> -->
-    <div id="cy" ng-show="dagJson !== null"></div>
+      DAG cannot be created because some required tools are missing from Github repo.
+    </div>
+    <div id="cy" ng-show="dagJson !== null && !missingTool"></div>
   </div>
 </div>