Refactor - simplify popover in input group. (#1800)

* Remove unused method. * Fix parsing error. (#1801) * Fix parsing error. * Fix bound bug by using the auto-resize ui-grid module. (#1802) * Fix bound bug by using the auto-resize ui-grid module. * Remove unused dependency. * Fix unit test. * Jkmarx/data set 2 fix button hide (#1804) * Show tool icon when selected. * Fix hidden button bug. * Add styles.
refinery-platform · Jun 16, 2017 · 4d447de · 4d447de
1 parent 987a586
commit 4d447de
Show file tree

Hide file tree

Showing 17 changed files with 58 additions and 119 deletions.
diff --git a/refinery/ui/source/js/file-browser/ctrls/ctrl.js b/refinery/ui/source/js/file-browser/ctrls/ctrl.js
@@ -339,12 +339,12 @@
     function toggleToolPanel () {
       if (toolService.isToolPanelCollapsed) {
         toolService.isToolPanelCollapsed = false;
-        vm.collapsedToolPanel = toolService.isToolPanelCollapsed;
       } else {
         toolService.isToolPanelCollapsed = true;
-        vm.collapsedToolPanel = toolService.isToolPanelCollapsed;
-        resetGridService.setRefreshGridFlag(true);
       }
+      // resize window with toggling
+      vm.collapsedToolPanel = toolService.isToolPanelCollapsed;
+      vm.gridApi.core.handleWindowResize();
     }
 
     // Helper method which check for any data updates during soft loads (tabbing)

diff --git a/refinery/ui/source/js/file-browser/ctrls/ctrl.spec.js b/refinery/ui/source/js/file-browser/ctrls/ctrl.spec.js
@@ -35,6 +35,15 @@
     });
 
     describe('Toggle Tool Panel', function () {
+      beforeEach(inject(function () {
+        var mockGridApi = {
+          handleWindowResize: function () { return; }
+        };
+        ctrl.gridApi = angular.copy({
+          core: {}
+        });
+        angular.copy(mockGridApi, ctrl.gridApi.core);
+      }));
       it('toggleToolPanel is method', function () {
         expect(angular.isFunction(ctrl.toggleToolPanel)).toBe(true);
       });

diff --git a/refinery/ui/source/js/file-browser/directives/assay-filters.js b/refinery/ui/source/js/file-browser/directives/assay-filters.js
@@ -33,7 +33,7 @@
         // show even though the panel is collapsed
         scope.dropAttributePanel = function (e, attributeName, attributeObj) {
           e.preventDefault();
-          var escapeAttributeName = attributeName.replace(' ', '-');
+          var escapeAttributeName = attributeName.replace(/ /g, '-');
           var attributeTitle = angular.element(
             document.querySelector('#attribute-panel-' + escapeAttributeName)
           );
@@ -70,7 +70,8 @@
 
         // When panel is minimized, selected fields continue to show
         scope.showField = function (field, internalName, attributeName) {
-          var escapedAttributeName = attributeName.replace(' ', '-');
+          var escapedAttributeName = attributeName.replace(/ /g, '-');
+
           var selectedIndex = -1;
           if (selectedFilterService.attributeSelectedFields[internalName] !== undefined) {
             selectedIndex = selectedFilterService
@@ -92,7 +93,7 @@
             var encodedAttribute = selectedFilterService
               .stringifyAndEncodeAttributeObj(attributeInternalName, allFields[ind]);
             if (queryFields.indexOf(encodedAttribute) > -1) {
-              var escapeAttributeName = attributeName.replace(' ', '-');
+              var escapeAttributeName = attributeName.replace(/ /g, '-');
               var attributeTitle = angular.element(
               document.querySelector('#attribute-panel-' + escapeAttributeName)
               );

diff --git a/refinery/ui/source/js/file-browser/module.js b/refinery/ui/source/js/file-browser/module.js
@@ -11,11 +11,10 @@
 
   angular
     .module('refineryFileBrowser', [
-      'dndLists',
       'ui.grid',
-      'ui.grid.selection',
+      'ui.grid.autoResize',
       'ui.grid.infiniteScroll',
       'ui.grid.resizeColumns',
-      'ui.select'
+      'ui.select',
     ]);
 })();
diff --git a/refinery/ui/source/js/file-browser/module.spec.js b/refinery/ui/source/js/file-browser/module.spec.js
@@ -27,8 +27,8 @@
           expect(hasModule('ui.grid')).toEqual(true);
         });
 
-        it('should have "ui.grid.selection" as a dependency', function () {
-          expect(hasModule('ui.grid.selection')).toEqual(true);
+        it('should have "ui.grid.autoResize" as a dependency', function () {
+          expect(hasModule('ui.grid.autoResize')).toEqual(true);
         });
 
         it('should have "ui.grid.infiniteScroll" as a dependency', function () {
@@ -39,8 +39,8 @@
           expect(hasModule('ui.grid.resizeColumns')).toEqual(true);
         });
 
-        it('should have "dndLists" as a dependency', function () {
-          expect(hasModule('dndLists')).toEqual(true);
+        it('should have "ui.select" as a dependency', function () {
+          expect(hasModule('ui.select')).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
@@ -1,5 +1,6 @@
 <div id="assay-files-table"
   ui-grid="FBCtrl.gridOptions"
+  ui-grid-auto-resize
   ui-grid-infinite-scroll
   ui-grid-resize-columns
   class="grid">

diff --git a/refinery/ui/source/js/tool-launch/ctrls/input-group-ctrl.js b/refinery/ui/source/js/tool-launch/ctrls/input-group-ctrl.js
@@ -36,7 +36,6 @@
     vm.removeAllGroups = removeAllGroups;
     vm.removeGroup = removeGroup; // Refreshes all selection
     vm.selectedTool = {};
-    vm.setDisplayInputFile = setDisplayInputFile;
 
 
    /*
@@ -81,11 +80,6 @@
       vm.selectionObj = nodeService.selectionObj;
     }
 
-    // Vm method which sets which input file type to display in popover help.//
-    function setDisplayInputFile (inputObj) {
-      angular.copy(inputObj, fileService.displayInputFile);
-    }
-
    /*
    * ---------------------------------------------------------
    * Watchers

diff --git a/refinery/ui/source/js/tool-launch/ctrls/input-group-help-popover.js b/refinery/ui/source/js/tool-launch/ctrls/input-group-help-popover.js
diff --git a/refinery/ui/source/js/tool-launch/ctrls/input-group-help-popover.spec.js b/refinery/ui/source/js/tool-launch/ctrls/input-group-help-popover.spec.js
diff --git a/refinery/ui/source/js/tool-launch/directives/input-group-help-popover.js b/refinery/ui/source/js/tool-launch/directives/input-group-help-popover.js
@@ -3,7 +3,10 @@
 
   angular.module('refineryToolLaunch')
     .component('rpInputGroupHelpPopover', {
-      controller: 'InputGroupHelpPopoverCtrl',
+      bindings: {
+        displayFile: '<',
+        displayFileColor: '<'
+      },
       templateUrl: ['$window', function ($window) {
         return $window.getStaticUrl('partials/tool-launch/partials/input-group-help-popover.html');
       }]

diff --git a/refinery/ui/source/js/tool-launch/partials/input-group-help-popover.html b/refinery/ui/source/js/tool-launch/partials/input-group-help-popover.html
@@ -4,21 +4,22 @@
   aria-multiselectable="true">
   <ul>
     <li
-      ng-style="{'color': $ctrl.inputFileTypeColor[$ctrl.displayInputFile.uuid],
-      'border-color': $ctrl.inputFileTypeColor[$ctrl.displayInputFile.uuid]}">
-        {{ $ctrl.displayInputFile.name }}:
+      ng-style="{'color': $ctrl.displayFileColor,
+      'border-color': $ctrl.displayFileColor}">
+        {{ $ctrl.displayFile.name }}:
         <
         <div
           class='fileTypes'
-          ng-repeat="fileObj in $ctrl.displayInputFile.allowed_filetypes">
+          ng-repeat="fileObj in $ctrl.displayFile.allowed_filetypes">
           {{fileObj.name}}
-          <span ng-if="$index < $ctrl.displayInputFile.allowed_filetypes.length - 1">
+          <span ng-if="$index < $ctrl.displayFile.allowed_filetypes.length - 1">
             ,
           </span>
         </div>
         >
         <br>
-        <em>{{ $ctrl.displayInputFile.description }}</em>
+        <em>{{ $ctrl.displayFile.description }}</em>
     </li>
   </ul>
 </div>
+
diff --git a/refinery/ui/source/js/tool-launch/partials/input-group.html b/refinery/ui/source/js/tool-launch/partials/input-group.html
@@ -20,7 +20,6 @@ <h4>
                 popover-title="Input Group File Types"
                 popover-trigger="focus"
                 popover-append-to-body="true"
-                ng-click="$ctrl.setDisplayInputFile(inputFile)"
                 tabindex="0">
                 <i class="fa fa-question-circle info-icon icon-only"></i>
               </a>
@@ -105,7 +104,9 @@ <h4>
 
 <script type="text/ng-template" id="inputgrouphelppopover.html">
   <div>
-  <rp-input-group-help-popover>
-  </rp-input-group-help-popover>
+    <rp-input-group-help-popover
+      display-file='inputFile'
+      display-file-color='$ctrl.inputFileTypeColor[inputFile.uuid]'>
+    </rp-input-group-help-popover>
   </div>
 </script>
diff --git a/refinery/ui/source/js/tool-launch/partials/tool-launch-button.html b/refinery/ui/source/js/tool-launch/partials/tool-launch-button.html
@@ -1,4 +1,4 @@
-<span class="p-l-1-3">
+<span id="tool-select-button">
   <button
     class="btn btn-primary btn-xs"
     ng-disabled="$ctrl.needMoreNodes()"

diff --git a/refinery/ui/source/js/tool-launch/partials/tool-select.html b/refinery/ui/source/js/tool-launch/partials/tool-select.html
@@ -1,17 +1,19 @@
 <ui-select
+  id="tool-select-drop-down"
   append-to-body="true"
   search-enabled="false"
   ng-model="$ctrl.selectedTool.select"
   on-select="$ctrl.updateTool($item)"
   theme="select2"
   class="ui-select-drop text-left">
    <ui-select-match placeholder="Select a tool">
-     <span ng-bind="$select.selected.name"></span>
+      <i class="{{tool.tool_type|toolTypeIcon}} p-r-1-4" aria-hidden="true"></i>{{
+     $select.selected.name }}
    </ui-select-match>
   <ui-select-choices
     position="down"
     repeat="tool in $ctrl.tools track by $index">
-     <i class="{{tool.tool_type|toolTypeIcon}}" aria-hidden="true"></i>{{ tool.name }}
+     <i class="{{tool.tool_type|toolTypeIcon}} p-r-1-4" aria-hidden="true"></i>{{ tool.name }}
   </ui-select-choices>
 </ui-select>
 

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
@@ -33,7 +33,6 @@
     vm.attributesObj = {}; // displayName: internalName, ex Name:
     vm.currentGroup = []; // index for the group coordinates
     vm.currentTypes = []; // tracks whether depths are pair or list
-    vm.displayInputFile = {}; // for input-group-help-popover, tracks selected
     vm.groupCollection = {}; // contains groups with their selected row's info
     vm.hideNodePopover = false;
     vm.inputFileTypes = []; // maintains the required input types
@@ -141,7 +140,6 @@
       }
       vm.groupCollection = {};
       vm.nodeSelectCollection = {};
-      vm.displayInputFile = {};
       angular.copy({}, nodeService.selectionObj);
     }
 
@@ -151,7 +149,6 @@
     function resetToolRelated () {
       vm.currentGroup = [];
       vm.currentTypes = [];
-      vm.displayInputFile = {};
       vm.groupCollection = {};
       vm.hideNodePopover = false;
       vm.inputFileTypes = [];

diff --git a/refinery/ui/source/js/tool-launch/views/tool-display.html b/refinery/ui/source/js/tool-launch/views/tool-display.html
@@ -5,7 +5,7 @@ <h2>
     </h2>
   </div>
 
-  <div>
+  <div id="tool-select-panel">
      <rp-tool-select></rp-tool-select>
      <rp-tool-launch-button></rp-tool-launch-button>
   </div>

diff --git a/refinery/ui/source/styles/file-browser.less b/refinery/ui/source/styles/file-browser.less
@@ -125,10 +125,6 @@
     padding-left: 5px;
     padding-right: 5px;
 
-    .ui-select-drop {
-      width: 150px;
-    }
-
     .ui-select-placeholder {
       display: inline;
     }
@@ -253,6 +249,20 @@
       -webkit-border-radius: 10px;
       border-radius: 10px;
   }
+
+  #tool-select-panel {
+    width: 100%;
+    #tool-select-drop-down {
+      width: 70%;
+    }
+    #tool-select-button {
+      margin-left: .1em;
+      margin-right: .5em;
+      margin-top: .1em;
+      float: right;
+    }
+  }
+
 }
 
 #tool-panel-show-button {