Jkmarx/row template updates (#1816)

* Enable pinning of select and input group columns. * Add highlights and keep icon blue. * Show template and input file.
refinery-platform · Jun 20, 2017 · 359e7d5 · 359e7d5
1 parent 4f40767
commit 359e7d5
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 30 deletions.
diff --git a/refinery/ui/source/js/file-browser/directives/node-selection-popover.js b/refinery/ui/source/js/file-browser/directives/node-selection-popover.js
@@ -30,10 +30,10 @@
         var popOverContent = $compile(template)(scope);
         var options = {
           content: popOverContent,
-          placement: 'right-top',
+          placement: 'bottom',
           html: true,
           trigger: 'manual',
-          container: 'body'
+          container: '#assay-files-table'
         };
         angular.element(element).popover(options);
 

diff --git a/refinery/ui/source/js/file-browser/module.js b/refinery/ui/source/js/file-browser/module.js
@@ -14,6 +14,7 @@
       'ui.grid',
       'ui.grid.autoResize',
       'ui.grid.infiniteScroll',
+      'ui.grid.pinning',
       'ui.grid.resizeColumns',
       'ui.select',
     ]);

diff --git a/refinery/ui/source/js/file-browser/module.spec.js b/refinery/ui/source/js/file-browser/module.spec.js
@@ -35,6 +35,10 @@
           expect(hasModule('ui.grid.infiniteScroll')).toEqual(true);
         });
 
+        it('should have "ui.grid.pinning" as a dependency', function () {
+          expect(hasModule('ui.grid.pinning')).toEqual(true);
+        });
+
         it('should have "ui.grid.resizeColumns" as a dependency', function () {
           expect(hasModule('ui.grid.resizeColumns')).toEqual(true);
         });

diff --git a/refinery/ui/source/js/file-browser/partials/assay-files.html b/refinery/ui/source/js/file-browser/partials/assay-files.html
@@ -2,6 +2,7 @@
   ui-grid="FBCtrl.gridOptions"
   ui-grid-auto-resize
   ui-grid-infinite-scroll
+  ui-grid-pinning
   ui-grid-resize-columns
   class="grid">
 </div>
diff --git a/refinery/ui/source/js/file-browser/partials/node-selection-popover-detail.html b/refinery/ui/source/js/file-browser/partials/node-selection-popover-detail.html
@@ -8,30 +8,24 @@
           '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>
-                </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">
+              <span>
                 <input
                   type="checkbox"
                   ng-click="NSPCtrl.selectNode(inputType.uuid)"
                   ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][NSPCtrl.activeNode.uuid]">
                 {{ inputType.name }}
               </span>
+               <!-- Deselect: user can currently deselect any node in the current group-->
+              <div
+                class="wrap-word"
+                ng-class='{"selected-node-name": NSPCtrl.groupCollection[NSPCtrl
+              .currentGroup][inputType.uuid].length > 0}'>
+                <span
+                  ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid]">
+                   {{ selectedFile[NSPCtrl.attributes.Name] }}
+                </span>
+              </div>
             </label>
           </div>
         </li>
@@ -59,7 +53,14 @@ <h4>
                   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>
+
+                <div
+                  ng-if="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][NSPCtrl.activeNode.uuid]"
+                  class="wrap-word selected-node-name">
+                  {{ NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid]
+                  [NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid].length - 1]
+                  [NSPCtrl.attributes.Name] }}
+                </div>
           </span>
         </li>
       </div>

diff --git a/refinery/ui/source/js/file-browser/partials/ui-grid-row-template.html b/refinery/ui/source/js/file-browser/partials/ui-grid-row-template.html
@@ -1,8 +1,7 @@
 <div
   ng-repeat='(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name'
   class='ui-grid-cell'
-  ng-class='{
-  "selectRowBorder": grid.appScope.nodeSelectCollection[row.entity.uuid].groupList.length > 0 ||
-   (grid.appScope.activeNodeRow && row.entity.uuid == grid.appScope.activeNodeRow.uuid)}'
+  ng-class='{"activeRowHighlight": (grid.appScope.activeNodeRow && row.entity.uuid == grid
+  .appScope.activeNodeRow.uuid)}'
   ui-grid-cell>
 </div>
diff --git a/refinery/ui/source/js/file-browser/services/factory.js b/refinery/ui/source/js/file-browser/services/factory.js
@@ -277,6 +277,7 @@
         enableSorting: false,
         enableColumnMenu: false,
         enableColumnResizing: true,
+        pinnedLeft: true,
         cellTemplate: _cellTemplate,
         visible: isToolSelected
       };
@@ -290,10 +291,7 @@
           '<a rp-node-selection-popover title="Select Tool Input"' +
           'ng-click="grid.appScope.openSelectionPopover(row.entity)"' +
           'id="{{row.entity.uuid}}">' +
-          '<div class="full-size ui-grid-selection-row-header-buttons" ' +
-          'ng-class="{\'solidText\': grid.appScope.nodeSelectCollection[' +
-          'row.entity.uuid].groupList.length > 0 || row.entity.uuid == ' +
-          'grid.appScope.activeNodeRow.uuid}">' +
+          '<div class="full-size ui-grid-selection-row-header-buttons solidText">' +
           '<i class="fa fa-arrow-right" aria-hidden="true">' +
           '</i></div></a></div>';
 
@@ -309,6 +307,7 @@
         enableSorting: false,
         enableColumnMenu: false,
         enableColumnResizing: true,
+        pinnedLeft: true,
         cellTemplate: cellTemplate,
         visible: isToolSelected
       };

diff --git a/refinery/ui/source/styles/file-browser.less b/refinery/ui/source/styles/file-browser.less
@@ -211,6 +211,9 @@
       .fileTypes {
         display: inline;
       }
+      .selected-node-name {
+        border-top: 1px dashed;
+      }
     }
   }
 }
@@ -326,9 +329,8 @@
   }
 }
 
-.selectRowBorder {
-  border-top: 1px solid @blue-active !important;
-  border-bottom: 1px solid @blue-active !important;
+.activeRowHighlight {
+  background-color: #c9dde1 !important;
 }
 
 .current-type-border {