Feature/org slow (#154)

* Added loading gif and reduced the number of calls to backend * Fixed workflow search (previously had typo)
dockstore · Apr 12, 2017 · e590187 · e590187
1 parent 704a179
commit e590187
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -177,9 +177,7 @@ angular
           controllerAs: 'Maintenance'
         })
         .when('/organizations', {
-          templateUrl: 'views/organizations.html',
-          controller: 'OrganizationsCtrl',
-          controllerAs: 'Organizations'
+          templateUrl: 'views/organizations.html'
         })
         .when('/organizations/:org', {
           templateUrl: 'views/org.html',

diff --git a/app/scripts/controllers/organizations.js b/app/scripts/controllers/organizations.js
@@ -31,7 +31,8 @@ angular.module('dockstore.ui')
     '$routeParams',
     function($scope, OrganizationService, $q, $routeParams) {
       $scope.org = $routeParams.org;
-      $scope.display = false;
+      $scope.tools = false;
+      $scope.workflows = false;
 
       var getOrgs = function() {
         return OrganizationService.getOrganizations();
@@ -66,6 +67,7 @@ angular.module('dockstore.ui')
           var tools = ordered[i];
           $scope.orgToTools[$scope.organizations[i]] = tools;
         }
+        $scope.tools = true;
       },
 
       mapWorkflows = function(resultFromApi) {
@@ -75,23 +77,42 @@ angular.module('dockstore.ui')
           var workflows = ordered[i];
           $scope.orgToWorkflows[$scope.organizations[i]] = workflows;
         }
-        $scope.display = true;
+        $scope.workflows = true;
       },
 
       reportProblems = function(fault) {
         return $q.reject(fault);
       };
 
-      var getOrgsPromise = getOrgs();
+      var setUp = function () {
+        var org = $scope.org;
 
-      getOrgsPromise
-        .then(assignTools)
-          .then(mapTools)
-        .catch(reportProblems);
+        if (org) {
+          var organizations = [];
+         organizations.push(org);
 
-      getOrgsPromise
-        .then(assignWorkflows)
-          .then(mapWorkflows)
-        .catch(reportProblems);
+          assignTools(organizations)
+            .then(mapTools)
+            .catch(reportProblems);
+
+          assignWorkflows(organizations)
+            .then(mapWorkflows)
+            .catch(reportProblems);
+        } else {
+          var getOrgsPromise = getOrgs();
+
+          getOrgsPromise
+            .then(assignTools)
+              .then(mapTools)
+            .catch(reportProblems);
+
+          getOrgsPromise
+            .then(assignWorkflows)
+              .then(mapWorkflows)
+            .catch(reportProblems);
+        }
+      };
+
+      setUp();
     }
   ]);
diff --git a/app/scripts/controllers/workflowsgrid.js b/app/scripts/controllers/workflowsgrid.js
@@ -61,7 +61,7 @@ angular.module('dockstore.ui')
       /* Filter by organization */
       var location = $location.search();
       if (location.hasOwnProperty("organization")) {
-        organization = location.namespace;
+        organization = location.organization;
       }
 
       /* Column Sorting */

diff --git a/app/templates/organizations.html b/app/templates/organizations.html
@@ -11,10 +11,13 @@ <h3 class="available-containers">
   </div>
 </div>
 
-<div class="container view-content" style="margin-top: 20px">
+<div class="container view-content centerPageSection" style="margin-top: 20px">
   <div class="row">
     <div class="col-md-12">
-      <div ng-if="organizations.length !== 0">
+      <div ng-if="!workflows || !tools">
+        <img class="center-block" src="styles/images/loading.gif">
+      </div>
+      <div ng-if="workflows && tools">
         <div ng-repeat="organization in organizations">
           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" data-collapsible="expandable">
             <div class="panel panel-default">

diff --git a/app/views/org.html b/app/views/org.html
@@ -12,7 +12,7 @@ <h3 class="available-containers">
 </div>
 
 <div class="container view-content">
-  <div ng-if="display" class="row">
+  <div ng-if="workflows && tools" class="row">
     <div ng-if="orgToTools[org].length > 0">
       <h3>Tools</h3>
       <ul ng-repeat="tool in orgToTools[org]">