Jkmarx/data set2 indicator column (#1688)

* Fix spacing * Update partial to view for clarity. * Fix typo. * Swap cart and control panel. * Display control panel tree. * Remove temp selected file display. * Add pair styling. * Tweak css. * Add file relationship service and depth. * Fix counters for each group. * Display selected nodes. * Move input group into control directive. * Fix mapping function. * Fix currentTypes generation. * Max pairs length. * Remove console logs * Trigger current position change when a new tool is selected. * Fix scope bug due to factory. * Add comments. * Remove cloak. * Add unit test. * Move attribute generation to service. * Put method calls into activate method per style guide. * Style guide changes. * Add a popover to the selection grid. * Close popover when not clicking on row. * Add popover with custom template. * Modify template to only open one popover at a time. * rename method for clarity. * Use jqlite instead. * Add template to ui-grid selection. * Add checkbox selection. * Grab current uuids from service and dynamically create obj. * Move input groups to service. * Add a left float, unstyle list class. * Show current group. * Rename variable for clarity. * Add data object to track current group's nodes. * Remove buttons for now. * Refactor according to style guide. * Change method and variable name for clarity. * Move selection obj to node-service. * Fix bug which requires deep copy. * Fix bug with removing selected nodes. * Add comments. * fix button css * Refactor and added comments. * Update title. * Add unit for ctrl. * Add iffy * Add directive unit test. * Add line break for readability. * Add another directive unit test and remove unused variable. * Update unit test. * Fix typo in view location. * Fix unit test. * Add comments. * Fix unit tests. * Add file relationship test. * Fix bug due to merge. * Update directive with static url method. * Remove unneccessary files. * Fix formatting. * Reflect selection in control panel. * Remove recursive directive and rename for clarity. * Reorder and used service for control panel. * Fix indexing. * Add css. * Add borders to templates. * Fix orderby . * Remove current input group. * Add unit test. * Consolidate components. * Disable remove/removeAll if groups are empty. * Reorder variable and comment. * Remove hr to keep styling consistent. * Delete obj properties when empty. * Split pair portion. * Seperate pair/list section. * Update selectionObj reference. * Adjust css. * Fix deselect checkbox when clearing group. * Add list structure to control panel. * Fix bug with popover. * Fix remove and deselect bug. * Add comments. * Turn off select all. * Add comments and unit tests. * Add comment. * Remove unused igv and visualization module. * Remove from refinery app. * Update api endpoint. * Remove default stylin for selected rows. * Remove default selection. * Remove console.log. * Remove reference to the ui-grid node selections. * Update unit test. * Update name for clarity. * Add custom input group template. * Darken arrow if row is selected. * Add dark arrow if popover is open. * Fix bug cause by shallow copy. * Fix update ui-grid when remove/remove all. * Css to hide overflow in group list. * Reorder and comment. * Add comments.
refinery-platform · Apr 27, 2017 · 475c62d · 475c62d
1 parent b738cf3
commit 475c62d
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 14 deletions.
diff --git a/refinery/ui/source/js/file-browser/ctrls/ctrl.js b/refinery/ui/source/js/file-browser/ctrls/ctrl.js
@@ -18,6 +18,7 @@
     'fileBrowserFactory',
     'fileBrowserSettings',
     'filesLoadingService',
+    'fileRelationshipService',
     'isOwnerService',
     'resetGridService',
     'selectedFilterService',
@@ -37,15 +38,17 @@
     fileBrowserFactory,
     fileBrowserSettings,
     filesLoadingService,
+    fileRelationshipService,
     isOwnerService,
     resetGridService,
     selectedFilterService,
     selectedNodesService
   ) {
     var maxFileRequest = fileBrowserSettings.maxFileRequest;
     var nodesService = selectedNodesService;
+    var fileService = fileRelationshipService;
     var vm = this;
-
+    vm.activeNodeRow = nodesService.activeNodeRow;
     // flag to help with timing issues when selecting node group
     vm.afterNodeGroupUpdate = false;
     vm.analysisFilter = fileBrowserFactory.analysisFilter;
@@ -85,6 +88,7 @@
     };
     vm.gridOptions.onRegisterApi = gridRegister;
     vm.lastPage = 0;  // variable supporting ui-grid dynamic scrolling
+    vm.nodeSelectCollection = fileService.nodeSelectCollection;
     vm.openSelectionPopover = openSelectionPopover;
     vm.queryKeys = Object.keys($location.search()); // used for preset filters
     vm.refreshAssayFiles = refreshAssayFiles;
@@ -243,6 +247,7 @@
      */
     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');
     }
@@ -475,5 +480,24 @@
         }
       }
     );
+    // when a new row is selected/deselected
+    $scope.$watch(
+      function () {
+        return nodesService.activeNodeRow;
+      },
+      function () {
+        vm.activeNodeRow = nodesService.activeNodeRow;
+      }
+    );
+
+    // when a node is added/removed from a tool input group
+    $scope.$watchCollection(
+      function () {
+        return fileService.nodeSelectCollection;
+      },
+      function () {
+        vm.nodeSelectCollection = fileService.nodeSelectCollection;
+      }
+    );
   }
 })();
diff --git a/refinery/ui/source/js/file-browser/ctrls/node-selection-popover-ctrl.js b/refinery/ui/source/js/file-browser/ctrls/node-selection-popover-ctrl.js
@@ -68,6 +68,15 @@
         vm.nodeSelection = fileService.nodeSelectCollection;
       }
     );
+    // When user selects/deselects row
+    $scope.$watch(
+      function () {
+        return nodeService.activeNodeRow;
+      },
+      function () {
+        vm.activeRow = nodeService.activeNodeRow;
+      }
+    );
     // When user changes the group selection from the control panel
     $scope.$watchCollection(
       function () {

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
@@ -9,19 +9,22 @@
     '$compile',
     '$rootScope',
     '$templateCache',
-    'fileRelationshipService'
+    'fileRelationshipService',
+    'selectedNodesService'
   ];
 
   function rpNodeSelectionPopover (
     $compile,
     $rootScope,
     $templateCache,
-    fileRelationshipService
+    fileRelationshipService,
+    selectedNodesService
     ) {
     return {
       restrict: 'AE',
       link: function (scope, element) {
         var fileService = fileRelationshipService;
+        var nodesService = selectedNodesService;
         // The script is in the data_set2.html template.
         var template = $templateCache.get('nodeselectionpopover.html');
         var popOverContent = $compile(template)(scope);
@@ -35,7 +38,9 @@
         };
         angular.element(element).popover(options);
 
+        // Method for resetting the selected now and hiding the popover
         scope.closeSelectionPopover = function () {
+          angular.copy({}, nodesService.activeNodeRow);
           angular.element('.popover').popover('hide');
           angular.element('.ui-grid-selection-row-header-buttons').popover('enable');
         };

diff --git a/refinery/ui/source/js/file-browser/services/factory.js b/refinery/ui/source/js/file-browser/services/factory.js
@@ -156,7 +156,9 @@ function fileBrowserFactory (
       angular.copy(culledAttributes, assayAttributes);
       // Add file_download column first
       assayAttributes.unshift({ display_name: 'Url', internal_name: 'Url' });
+      assayAttributes.unshift({ display_name: 'Input Groups', internal_name: 'InputGroups' });
       assayAttributes.unshift({ display_name: 'Selection', internal_name: 'Selection' });
+
       // some attributes will be duplicate in different fields, duplicate
       // column names will throw an error. This prevents duplicates
       for (var ind = 0; ind < assayAttributes.length; ind++) {
@@ -240,20 +242,53 @@ function fileBrowserFactory (
     return internalName;
   };
 
+  /**
+   * Helper method for input groups column, requires unique template & fields.
+   * @param {string} _columnName - column name
+   */
+  var setCustomInputGroupsColumn = function (_columnName) {
+    var _cellTemplate = '<div class="ngCellText grid-input-groups">' +
+      '<div ng-if="grid.appScope.nodeSelectCollection[row.entity.uuid].groupList.length > 0" ' +
+      '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"> ' +
+      '<span ng-repeat="group in grid.appScope.nodeSelectCollection[row.entity.uuid].groupList ' +
+      'track by $index">{{group}} &nbsp </span></div></div></div>';
+
+    return {
+      name: _columnName,
+      field: _columnName,
+      cellTooltip: true,
+      width: 11 + '%',
+      displayName: 'Input Groups',
+      enableFiltering: false,
+      enableSorting: false,
+      enableColumnMenu: false,
+      enableColumnResizing: true,
+      cellTemplate: _cellTemplate
+    };
+  };
+
+   /**
+   * Helper method for select column, requires unique template & fields.
+   * @param {string} _columnName - column name
+   */
   var setCustomSelectColumn = function (columnName) {
-    var cellTemplate = '<div class="ngCellText text-align-center">' +
+    var cellTemplate = '<div class="ngCellText text-align-center ui-grid-cell-contents">' +
         '<a rp-node-selection-popover title="Select Tool Input"' +
         'class="ui-grid-selection-row-header-buttons" ' +
-        'ng-click="selectButtonClick(row, $event); ' +
-        'grid.appScope.openSelectionPopover(row.entity);"' +
+        'ng-class="{\'solidText\': grid.appScope.nodeSelectCollection[' +
+        'row.entity.uuid].groupList.length > 0 || row.entity.uuid ==' +
+        ' grid.appScope.activeNodeRow.uuid}" ' +
+        'ng-click="grid.appScope.openSelectionPopover(row.entity)"' +
         'id="{{row.entity.uuid}}">' +
-        '<i class="fa fa-arrow-right ui-grid-checks"' +
-        ' aria-hidden="true"></i></a></div>';
+        '<i class="fa fa-arrow-right" aria-hidden="true"></i></a></div>';
 
     return {
       name: columnName,
       field: columnName,
-      cellTooltip: true,
+      cellTooltip: false,
       width: 4 + '%',
       displayName: '',
       enableFiltering: false,
@@ -268,9 +303,9 @@ function fileBrowserFactory (
    * Helper method for file download column, requires unique template & fields.
    * @param {string} _columnName - column name
    */
-  var setCustomUrlColumnDef = function (_columnName) {
+  var setCustomUrlColumn = function (_columnName) {
     var internalName = grabAnalysisInternalName(assayAttributes);
-    var _cellTemplate = '<div class="ngCellText text-align-center"' +
+    var _cellTemplate = '<div class="ngCellText text-align-center ui-grid-cell-contents"' +
           'ng-class="col.colIndex()">' +
           '<div ng-if="COL_FIELD" title="Download File \{{COL_FIELD}}\">' +
           '<a href="{{COL_FIELD}}" target="_blank">' +
@@ -324,8 +359,12 @@ function fileBrowserFactory (
       };
       if (columnName === 'Url') {
         // Url requires a custom template for downloading links
-        tempCustomColumnNames.push(setCustomUrlColumnDef(columnName));
+        tempCustomColumnNames.push(setCustomUrlColumn(columnName));
+      } else if (columnName === 'Input Groups') {
+        // Input Groups requires a custom template for downloading links
+        tempCustomColumnNames.push(setCustomInputGroupsColumn(columnName));
       } else if (columnName === 'Selection') {
+        // Selection requires a custom template for downloading links
         tempCustomColumnNames.push(setCustomSelectColumn(columnName));
       } else if (columnName === 'Analysis Group') {
         // Analysis requires a custom template for filtering -1 entries

diff --git a/refinery/ui/source/js/tool-launch/services/file-relationship-service.js b/refinery/ui/source/js/tool-launch/services/file-relationship-service.js
@@ -178,10 +178,10 @@
     // groupId and it's associated inputFileType
     function removeGroupFromNodeSelectCollection (nodeList, TypeUuid) {
       for (var i = 0; i < nodeList.length; i++) {
-        var groupInd = vm.nodeSelectCollection[nodeList[i].uuid].groupList.indexOf(TypeUuid);
+        var groupInd = vm.nodeSelectCollection[nodeList[i].uuid].inputTypeList.indexOf(TypeUuid);
         if (groupInd > -1) {
           vm.nodeSelectCollection[nodeList[i].uuid].groupList.splice(groupInd, 1);
-          vm.nodeSelectCollection[nodeList[i].uuid].TypeUuid.splice(groupInd, 1);
+          vm.nodeSelectCollection[nodeList[i].uuid].inputTypeList.splice(groupInd, 1);
         }
        // Delete node property from obj if empty
         if (vm.nodeSelectCollection[nodeList[i].uuid].groupList === 0) {

diff --git a/refinery/ui/source/styles/file-browser.less b/refinery/ui/source/styles/file-browser.less
@@ -170,6 +170,24 @@
   word-wrap: break-word;
 }
 
+
+.grid-input-groups {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .selected-node {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    float: left;
+    div {
+      background-color: rgba(0, 158, 115, 0.4);
+      text-overflow: ellipsis;
+      white-space: no-wrap;
+    }
+  }
+}
+
 .node-input-group {
   ul {
     padding-left: 0px;
@@ -256,6 +274,10 @@
   }
 }
 
+.solidText {
+  opacity: 1 !important;
+}
+
 #control-panel-list {
   .tree-panel {
     padding: .25em;