Add event to close popover when clicking on select icon.

refinery/ui/source/js/file-browser/ctrls/ctrl.js

@@ -88,6 +88,7 @@
       gridFooterTemplate: '<rp-is-assay-files-loading></rp-is-assay-files-loading>'
     };
     vm.gridOptions.onRegisterApi = gridRegister;
+    vm.inputFileTypeColor = fileService.inputFileTypeColor;
     vm.lastPage = 0;  // variable supporting ui-grid dynamic scrolling
     vm.nodeSelectCollection = fileService.nodeSelectCollection;
     vm.openSelectionPopover = openSelectionPopover;
@@ -243,10 +244,16 @@
      * @param nodeUuid
      */
     function openSelectionPopover (nodeRow) {
-      angular.copy(nodeRow, nodesService.activeNodeRow);
-      vm.activeNodeRow = nodesService.activeNodeRow;
-      angular.element('#' + nodeRow.uuid).popover('show');
-      angular.element('.ui-grid-selection-row-header-buttons').popover('disable');
+      if (_.isEmpty(nodesService.activeNodeRow)) {
+        // active nodes are cleared after popovers are closed
+        angular.copy(nodeRow, nodesService.activeNodeRow);
+        vm.activeNodeRow = nodesService.activeNodeRow;
+        angular.element('#' + nodeRow.uuid).popover('show');
+        angular.element('.ui-grid-selection-row-header-buttons').popover('disable');
+      } else {
+        // user selects a different row, triggers closing all open popovers
+        fileService.hideNodePopover = true;
+      }
     }
 
     /**
@@ -487,6 +494,7 @@
       },
       function () {
         vm.nodeSelectCollection = fileService.nodeSelectCollection;
+        vm.inputFileTypeColor = fileService.inputFileTypeColor;
       }
     );
   }

refinery/ui/source/js/file-browser/ctrls/node-selection-popover-ctrl.js

@@ -29,6 +29,7 @@
     // selectedNodes ordered by group indicies
     vm.groupCollection = fileService.groupCollection;
     vm.inputFileTypes = fileService.inputFileTypes; // current tool's inputFileTypes
+    vm.inputFileTypeColor = fileService.inputFileTypeColor;
     // selectedNodes ordered by group indicies
     vm.nodeSelection = fileService.nodeSelectCollection;
     vm.selectNode = selectNode; // method
@@ -85,6 +86,7 @@
       function () {
         vm.currentGroup = fileService.currentGroup;
         vm.currentTypes = fileService.currentTypes;
+        vm.inputFileTypeColor = fileService.inputFileTypeColor;
       }
     );
   }

refinery/ui/source/js/file-browser/ctrls/node-selection-popover-ctrl.spec.js

@@ -36,6 +36,7 @@
       expect(ctrl.currentTypes).toEqual([]);
       expect(ctrl.groupCollection).toEqual({});
       expect(ctrl.inputFileTypes).toEqual([]);
+      expect(ctrl.inputFileTypeColor).toEqual({});
       expect(ctrl.nodeSelection).toEqual({});
       expect(ctrl.selectionObj).toEqual({});
     });

refinery/ui/source/js/file-browser/partials/node-selection-popover-detail.html

@@ -1,91 +1,95 @@
-<div id="node-selection-popover">
-  <div class="node-input-group">
-    <ul>
-      <form name="inputNodeForm">
-        <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='PAIR'">
-          <li ng-repeat="inputType in NSPCtrl.inputFileTypes track by $index">
-            <div class="checkbox">
-              <label>
-                <!-- Deselect: user can currently deselect any node in the current group-->
-                <span
-                  ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
-                  NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length > 0"
-                  class="wrap-word">
-                    <span ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid]">
-                      <input
-                        type="checkbox"
-                        ng-click="NSPCtrl.selectNode(inputType.uuid, selectedFile.uuid)"
-                        ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][selectedFile.uuid]">
-                       {{ selectedFile[NSPCtrl.attributes.Name] }}
-                    </span>
+<div class="node-input-group">
+  <ul>
+    <form name="inputNodeForm">
+      <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='PAIR'">
+        <li
+          ng-repeat="inputType in NSPCtrl.inputFileTypes track by $index"
+          ng-style="{'color': NSPCtrl.inputFileTypeColor[inputType.uuid],
+          'border-color': NSPCtrl.inputFileTypeColor[inputType.uuid]}">
+          <div class="checkbox">
+            <label>
+              <!-- Deselect: user can currently deselect any node in the current group-->
+              <span
+                ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
+                NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length > 0"
+                class="wrap-word">
+                  <span ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid]">
+                    <input
+                      type="checkbox"
+                      ng-click="NSPCtrl.selectNode(inputType.uuid, selectedFile.uuid)"
+                      ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][selectedFile.uuid]">
+                     {{ selectedFile[NSPCtrl.attributes.Name] }}
                   </span>
-                <!-- Select: If there's NOT a group already started for the inputFileType than checkbox not selected-->
-                <span
-                  ng-if="!NSPCtrl.groupCollection[NSPCtrl.currentGroup] ||
-                  !NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid] ||
-                  NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length == 0">
-                  <input
-                    type="checkbox"
-                    ng-click="NSPCtrl.selectNode(inputType.uuid)"
-                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][NSPCtrl.activeNode.uuid]">
-                  {{ inputType.name }}
                 </span>
-              </label>
-            </div>
-          </li>
-        </div>
+              <!-- Select: If there's NOT a group already started for the inputFileType than checkbox not selected-->
+              <span
+                ng-if="!NSPCtrl.groupCollection[NSPCtrl.currentGroup] ||
+                !NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid] ||
+                NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length == 0">
+                <input
+                  type="checkbox"
+                  ng-click="NSPCtrl.selectNode(inputType.uuid)"
+                  ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][NSPCtrl.activeNode.uuid]">
+                {{ inputType.name }}
+              </span>
+            </label>
+          </div>
+        </li>
+      </div>
 
-        <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='LIST'">
-           <li>
-            <span>
-              <!-- active row selection, for list is always showing -->
+      <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='LIST'">
+         <li
+           ng-style="{'color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid],
+          'border-color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid]}">
+          <span>
+            <!-- active row selection, for list is always showing -->
+            <div class="checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid)"
+                  ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][NSPCtrl.activeNode.uuid]">
+                {{ NSPCtrl.inputFileTypes[0].name }}
+              </label>
+          </span>
+         <!-- Select/Deselect nodes in the list -->
+          <span
+            ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
+            NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid].length > 0">
+            {{ inputType.uuid }}
+            <div ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid]">
               <div class="checkbox">
-                <label>
+                <label class="wrap-word">
                   <input
                     type="checkbox"
-                    ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid)"
-                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][NSPCtrl.activeNode.uuid]">
-                  {{ NSPCtrl.inputFileTypes[0].name }}
+                    ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid, selectedFile.uuid)"
+                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][selectedFile.uuid]">
+                 {{ selectedFile[NSPCtrl.attributes.Name] }}
                 </label>
-            </span>
-           <!-- Select/Deselect nodes in the list -->
-            <span
-              ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
-              NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid].length > 0">
-              {{ inputType.uuid }}
-              <div ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid]">
-                <div class="checkbox">
-                  <label class="wrap-word">
-                    <input
-                      type="checkbox"
-                      ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid, selectedFile.uuid)"
-                      ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][selectedFile.uuid]">
-                   {{ selectedFile[NSPCtrl.attributes.Name] }}
-                  </label>
-                </div>
               </div>
-            </span>
-          </li>
-        </div>
-      </form>
-    </ul>
-  </div>
-  <div>
-    <span ng-if="NSPCtrl.currentTypes.length > 1">
-      <div class="refinery-subheader">
-        <h4>
-          {{ NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 2] }} Nav:
-          Group {{ NSPCtrl.currentGroup[NSPCtrl.currentGroup.length - 2] + 1 }}
-        </h4>
+            </div>
+          </span>
+        </li>
       </div>
-      <rp-input-control-inner-nav></rp-input-control-inner-nav>
-    </span>
-    <div class="p-t-1 text-right">
-      <button
-        class="refinery-base btn btn-default btn-xs"
-        ng-click="closeSelectionPopover()">
-        Close
-      </button>
+    </form>
+  </ul>
+</div>
+<div>
+  <span ng-if="NSPCtrl.currentTypes.length > 1">
+    <div class="refinery-subheader">
+      <h4>
+        {{ NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 2] }} Nav:
+        Group {{ NSPCtrl.currentGroup[NSPCtrl.currentGroup.length - 1] + 1 }}
+      </h4>
     </div>
+    <rp-input-control-inner-nav></rp-input-control-inner-nav>
+  </span>
+  <div class="p-t-1 text-right">
+    <button
+      class="refinery-base btn btn-default btn-xs"
+      ng-click="closeSelectionPopover()">
+      Close
+    </button>
   </div>
 </div>
+

refinery/ui/source/js/file-browser/services/factory.js

@@ -252,9 +252,14 @@ function fileBrowserFactory (
       'class="selected-node" ' +
       'title="{{grid.appScope.nodeSelectCollection[row.entity.uuid].groupList}}">' +
       '<div class="paragraph ui-grid-cell-contents" ' +
-      'ng-if="grid.appScope.nodeSelectCollection[row.entity.uuid].groupList[0].length > 1"> ' +
+      'ng-if="grid.appScope.nodeSelectCollection[row.entity.uuid].groupList[0].length > 0"> ' +
       '<span ng-repeat="group in grid.appScope.nodeSelectCollection[row.entity.uuid].groupList ' +
-      'track by $index">{{group}} &nbsp </span></div></div></div>';
+      'track by $index">' +
+      '<span ng-style="{\'color\':grid.appScope.inputFileTypeColor[' +
+      'grid.appScope.nodeSelectCollection[row.entity.uuid].inputTypeList[$index]]}">' +
+      '{{group[group.length - 1]}}</span>' +
+      '<span ng-if="$index < grid.appScope.nodeSelectCollection[row.entity.uuid]' +
+      '.groupList.length - 1">, &nbsp</span> </span></div></div></div>';
 
     return {
       name: _columnName,

refinery/ui/source/js/tool-launch/ctrls/input-group-ctrl.js

@@ -29,6 +29,7 @@
     vm.currentTypes = fileService.currentTypes;
     vm.groupCollection = fileService.groupCollection;
     vm.inputFileTypes = fileService.inputFileTypes;
+    vm.inputFileTypeColor = fileService.inputFileTypeColor;
     vm.isGroupPopulated = isGroupPopulated;
     vm.isNavCollapsed = false;
     vm.isObjEmpty = isObjEmpty;
@@ -105,6 +106,7 @@
         function () {
           vm.groupCollection = fileService.groupCollection;
           vm.currentGroup = fileService.currentGroup;
+          vm.inputFileTypeColor = fileService.inputFileTypeColor;
         }
       );
     };

refinery/ui/source/js/tool-launch/ctrls/input-group-ctrl.spec.js

@@ -32,6 +32,7 @@
       expect(ctrl.currentTypes).toEqual([]);
       expect(ctrl.groupCollection).toEqual({});
       expect(ctrl.inputFileTypes).toEqual([]);
+      expect(ctrl.inputFileTypeColor).toEqual({});
       expect(ctrl.isNavCollapsed).toEqual(false);
     });
 

refinery/ui/source/js/tool-launch/partials/input-control-inner-nav.html

@@ -1,24 +1,24 @@
  <div>
   <button
     class="btn btn-default btn-xs outline"
-    ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-2] == 0"
-    ng-click="$ctrl.navLeft($ctrl.currentGroup.length-2)">
+    ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-1] == 0"
+    ng-click="$ctrl.navLeft($ctrl.currentGroup.length-1)">
     <i class="fa fa-backward"></i>
   </button>
   <span ng-if="$ctrl.currentTypes[$ctrl.currentTypes.length - 2] == 'PAIR'">
     <button
       class="btn btn-default btn-xs outline"
-      ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-2] == 1 ||
+      ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-1] == 1 ||
       $ctrl.needMoreNodes()"
-      ng-click="$ctrl.navRight($ctrl.currentGroup.length-2)">
+      ng-click="$ctrl.navRight($ctrl.currentGroup.length-1)">
       <i class="fa fa-forward"></i>
     </button>
   </span>
   <span ng-if="$ctrl.currentTypes[$ctrl.currentTypes.length - 2]  == 'LIST'">
     <button
       class="btn btn-default btn-xs outline"
       ng-disabled="$ctrl.needMoreNodes()"
-      ng-click="$ctrl.navRight($ctrl.currentGroup.length-2)">
+      ng-click="$ctrl.navRight($ctrl.currentGroup.length-1)">
       <i class="fa fa-forward"></i>
     </button>
   </span>

refinery/ui/source/js/tool-launch/partials/input-control.html

@@ -36,36 +36,40 @@ <h4 class="panel-title">
               <rp-input-group></rp-input-group>
             </div>
 
+            <div ng-if="$index == 1" class="p-a-1-2">
+              <rp-input-control-inner-nav></rp-input-control-inner-nav>
+            </div>
+
             <div
-              ng-if="$index > 0"
+              ng-if="$index > 1"
               class="tree-panel"
               ng-style="{'margin-left': 10*$index+'px'}">
               <hr>
               <div>
                 <h5>
-                  {{ $ctrl.currentGroup[$ctrl.currentGroup.length-$index-1] }}
+                  {{ $ctrl.currentGroup[$ctrl.currentGroup.length-$index] + 1 }}
                   of groups in {{ groupType }}
                 </h5>
               </div>
               <div>
                 <button
                   class="btn btn-default btn-xs outline"
-                  ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-$index-1] == 0"
-                  ng-click="$ctrl.navLeft($ctrl.currentGroup.length-$index-1)">
+                  ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-$index] == 0"
+                  ng-click="$ctrl.navLeft($ctrl.currentGroup.length-$index)">
                   <i class="fa fa-backward"></i>
                 </button>
                 <span ng-if="groupType == 'PAIR'">
                   <button
                     class="btn btn-default btn-xs outline"
-                    ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-$index-1] == 1"
-                    ng-click="$ctrl.navRight($ctrl.currentGroup.length-$index-1)">
+                    ng-disabled="$ctrl.currentGroup[$ctrl.currentGroup.length-$index] == 1"
+                    ng-click="$ctrl.navRight($ctrl.currentGroup.length-$index)">
                     <i class="fa fa-forward"></i>
                   </button>
                 </span>
                 <span ng-if="groupType == 'LIST'">
                   <button
                     class="btn btn-default btn-xs outline"
-                    ng-click="$ctrl.navRight($ctrl.currentGroup.length-$index-1)">
+                    ng-click="$ctrl.navRight($ctrl.currentGroup.length-$index)">
                     <i class="fa fa-forward"></i>
                   </button>
                 </span>

refinery/ui/source/js/tool-launch/partials/input-group.html

@@ -5,15 +5,17 @@
 
   <ul>
      <div ng-if="$ctrl.currentTypes[$ctrl.currentTypes.length-1]=='PAIR'">
-      <li ng-repeat="inputFile in $ctrl.inputFileTypes track by $index">
-        <span class="wrap-word" ng-if="$ctrl.isGroupPopulated(inputFile.uuid)">
+      <li
+        ng-repeat="inputFile in $ctrl.inputFileTypes track by $index"
+        ng-style="{'color': $ctrl.inputFileTypeColor[inputFile.uuid],
+        'border-color': $ctrl.inputFileTypeColor[inputFile.uuid]}">
+          <span class="wrap-word" ng-if="$ctrl.isGroupPopulated(inputFile.uuid)">
           <span ng-repeat="node in $ctrl.groupCollection[$ctrl.currentGroup][inputFile.uuid]">
             {{ node[$ctrl.attributes.Name] }}
           </span>
         </span>
-        <span ng-if="!$ctrl.isGroupPopulated(inputFile.uuid)">
+          <span ng-if="!$ctrl.isGroupPopulated(inputFile.uuid)">
           {{ inputFile.name }}:
-          <
           <div
             class='fileTypes'
             ng-repeat="fileObj in inputFile.allowed_filetypes">
@@ -30,7 +32,10 @@
      </div>
 
     <div ng-if="$ctrl.currentTypes[$ctrl.currentTypes.length-1]=='LIST'">
-      <li class="wrap-word">
+      <li
+        class="wrap-word"
+         ng-style="{'color': $ctrl.inputFileTypeColor[$ctrl.inputFileTypes[0].uuid],
+        'border-color': $ctrl.inputFileTypeColor[$ctrl.inputFileTypes[0].uuid]}">
         <div ng-if="!$ctrl.isGroupPopulated($ctrl.inputFileTypes[0].uuid)">
           {{ $ctrl.inputFileTypes[0].name }}:
           <