Bm browse view

es/components/browse/SearchView.js

@@ -5,7 +5,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["href", "context", "showClearFiltersButton", "schemas", "currentAction", "facets", "navigate", "columns", "columnExtensionMap", "placeholderReplacementFxn", "keepSelectionInStorage", "searchViewHeader", "windowWidth", "hideFacets"];
+var _excluded = ["href", "context", "showClearFiltersButton", "schemas", "currentAction", "facets", "navigate", "columns", "columnExtensionMap", "placeholderReplacementFxn", "keepSelectionInStorage", "searchViewHeader", "windowWidth", "hideFacets", "hideStickyFooter", "useCustomSelectionController"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _callSuper(_this, derived, args) {
@@ -100,6 +100,8 @@ export var SearchView = /*#__PURE__*/function (_React$PureComponent) {
         searchViewHeader = _this$props$searchVie === void 0 ? null : _this$props$searchVie,
         windowWidth = _this$props.windowWidth,
         hideFacets = _this$props.hideFacets,
+        hideStickyFooter = _this$props.hideStickyFooter,
+        useCustomSelectionController = _this$props.useCustomSelectionController,
         passProps = _objectWithoutProperties(_this$props, _excluded);
       var contextFacets = context.facets;
 
@@ -115,7 +117,8 @@ export var SearchView = /*#__PURE__*/function (_React$PureComponent) {
         href: href,
         windowWidth: windowWidth,
         isOwnPage: true,
-        facets: propFacets || contextFacets
+        facets: propFacets || contextFacets,
+        hideStickyFooter: hideStickyFooter
       });
       var controllersAndView = /*#__PURE__*/React.createElement(WindowNavigationController, {
         filterFacetFxn: this.filterFacetFxn,
@@ -128,7 +131,7 @@ export var SearchView = /*#__PURE__*/function (_React$PureComponent) {
         columns: columns,
         columnExtensionMap: columnExtensionMap
       }, /*#__PURE__*/React.createElement(CustomColumnController, null, /*#__PURE__*/React.createElement(SortController, null, searchViewHeader, /*#__PURE__*/React.createElement(ControlsAndResults, childViewProps)))));
-      if (isSelectAction(currentAction)) {
+      if (isSelectAction(currentAction) && !useCustomSelectionController) {
         // We don't allow "SelectionMode" unless is own page.
         // Could consider changing later once a use case exists.
         controllersAndView =

es/components/browse/components/ControlsAndResults.js

@@ -117,6 +117,8 @@ export var ControlsAndResults = /*#__PURE__*/function (_React$PureComponent) {
         detailPane = _this$props2$detailPa === void 0 ? null : _this$props2$detailPa,
         _this$props2$stickyFi = _this$props2.stickyFirstColumn,
         stickyFirstColumn = _this$props2$stickyFi === void 0 ? false : _this$props2$stickyFi,
+        _this$props2$hideStic = _this$props2.hideStickyFooter,
+        hideStickyFooter = _this$props2$hideStic === void 0 ? false : _this$props2$hideStic,
         context = _this$props2.context,
         href = _this$props2.href,
         requestedCompoundFilterSet = _this$props2.requestedCompoundFilterSet,
@@ -250,7 +252,7 @@ export var ControlsAndResults = /*#__PURE__*/function (_React$PureComponent) {
       }, {
         ref: this.searchResultTableRef,
         renderDetailPane: this.renderSearchDetailPane
-      })), isSelectAction(currentAction) && selectedItems !== null ? /*#__PURE__*/React.createElement(SelectStickyFooter, {
+      })), isSelectAction(currentAction) && selectedItems !== null && !hideStickyFooter ? /*#__PURE__*/React.createElement(SelectStickyFooter, {
         context: context,
         schemas: schemas,
         selectedItems: selectedItems,

es/components/browse/components/above-table-controls/AboveTableControlsBase.js

@@ -23,7 +23,7 @@ import _ from 'underscore';
 import ReactTooltip from 'react-tooltip';
 import Collapse from 'react-bootstrap/esm/Collapse';
 import { AboveTablePanelWrapper } from './AboveTablePanelWrapper';
-import { RightButtonsSection } from './RightButtonsSection';
+import { ColumnCustomizationButtons } from './ColumnCustomizationButtons';
 import { CustomColumnSelector } from './../CustomColumnController';
 import { MultiColumnSortSelector } from './../SortController';
 
@@ -105,7 +105,9 @@ export var AboveTableControlsBase = /*#__PURE__*/function (_React$PureComponent)
       var _this$props = this.props,
         children = _this$props.children,
         _this$props$panelMap = _this$props.panelMap,
-        panelMap = _this$props$panelMap === void 0 ? {} : _this$props$panelMap;
+        panelMap = _this$props$panelMap === void 0 ? {} : _this$props$panelMap,
+        topLeftChildren = _this$props.topLeftChildren,
+        useSmahtLayout = _this$props.useSmahtLayout;
       var _this$state = this.state,
         open = _this$state.open,
         reallyOpen = _this$state.reallyOpen;
@@ -125,11 +127,39 @@ export var AboveTableControlsBase = /*#__PURE__*/function (_React$PureComponent)
       var _ref2 = panelDefinition || {},
         panelTitle = _ref2.title,
         panelBody = _ref2.body;
+
+      // Slightly different layout for SMaHT Browse View
+      if (useSmahtLayout) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "above-results-table-row"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "row align-items-center"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "col box results-count flex-grow-1 d-flex align-items-end"
+        }, topLeftChildren, /*#__PURE__*/React.createElement(ColumnCustomizationButtons, _extends({
+          noWrapper: true,
+          btnClassName: "btn btn-sm btn-outline-secondary me-05"
+        }, _.pick(this.props, 'isFullscreen', 'windowWidth', 'toggleFullScreen', 'showMultiColumnSort'), {
+          currentOpenPanel: open || reallyOpen,
+          onColumnsBtnClick: this.panelToggleFxns.customColumns,
+          onMultiColumnSortBtnClick: this.panelToggleFxns.multiColumnSort
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "right-buttons col-auto"
+        }, extendedChildren)), panelDefinition ? /*#__PURE__*/React.createElement(Collapse, {
+          "in": !!open,
+          appear: true
+        }, /*#__PURE__*/React.createElement(AboveTablePanelWrapper, {
+          onClose: this.handleClose,
+          title: panelTitle
+        }, panelBody)) : null);
+      }
       return /*#__PURE__*/React.createElement("div", {
         className: "above-results-table-row"
       }, /*#__PURE__*/React.createElement("div", {
         className: "row align-items-center"
-      }, extendedChildren, /*#__PURE__*/React.createElement(RightButtonsSection, _extends({}, _.pick(this.props, 'isFullscreen', 'windowWidth', 'toggleFullScreen', 'showMultiColumnSort'), {
+      }, extendedChildren, /*#__PURE__*/React.createElement(ColumnCustomizationButtons, _extends({
+        btnClassName: "btn btn-outline-primary"
+      }, _.pick(this.props, 'isFullscreen', 'windowWidth', 'toggleFullScreen', 'showMultiColumnSort'), {
         currentOpenPanel: open || reallyOpen,
         onColumnsBtnClick: this.panelToggleFxns.customColumns,
         onMultiColumnSortBtnClick: this.panelToggleFxns.multiColumnSort

es/components/browse/components/above-table-controls/ColumnCustomizationButtons.js

@@ -0,0 +1,149 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(_this, derived, args) {
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, function () {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import { SearchResultTable } from './../SearchResultTable';
+export var ColumnCustomizationButtons = /*#__PURE__*/React.memo(function (props) {
+  var noWrapper = props.noWrapper,
+    _props$btnClassName = props.btnClassName,
+    btnClassName = _props$btnClassName === void 0 ? "" : _props$btnClassName,
+    currentOpenPanel = props.currentOpenPanel,
+    onColumnsBtnClick = props.onColumnsBtnClick,
+    onMultiColumnSortBtnClick = props.onMultiColumnSortBtnClick,
+    windowWidth = props.windowWidth,
+    isFullscreen = props.isFullscreen,
+    toggleFullScreen = props.toggleFullScreen,
+    _props$showMultiColum = props.showMultiColumnSort,
+    showMultiColumnSort = _props$showMultiColum === void 0 ? true : _props$showMultiColum;
+  var renderButtons = function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigureVisibleColumnsButton, {
+      onClick: onColumnsBtnClick,
+      open: currentOpenPanel === "customColumns",
+      className: btnClassName
+    }), showMultiColumnSort && /*#__PURE__*/React.createElement(MultiColumnSortButton, {
+      onClick: onMultiColumnSortBtnClick,
+      open: currentOpenPanel === "multiColumnSort",
+      className: btnClassName
+    }), typeof windowWidth === 'number' && typeof isFullscreen === 'boolean' && typeof toggleFullScreen === 'function' && /*#__PURE__*/React.createElement(ToggleLayoutButton, {
+      windowWidth: windowWidth,
+      isFullscreen: isFullscreen,
+      toggleFullScreen: toggleFullScreen,
+      className: btnClassName
+    }));
+  };
+  if (noWrapper) {
+    return renderButtons();
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "right-buttons col-auto"
+  }, renderButtons());
+});
+export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_ref) {
+  var open = _ref.open,
+    onClick = _ref.onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "btn btn-outline-primary" : _ref$className;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    key: "toggle-visible-columns",
+    "data-tip": "Configure visible columns",
+    "data-event-off": "click",
+    active: open.toString(),
+    onClick: onClick,
+    className: (className || "") + (open ? " active" : "")
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon icon-fw icon-table fas"
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "icon icon-fw icon-angle-down ms-03 fas"
+  }));
+});
+export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
+  var open = _ref2.open,
+    onClick = _ref2.onClick,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "btn btn-outline-primary" : _ref2$className;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    key: "toggle-visible-columns",
+    "data-tip": "Sort multiple columns",
+    "data-event-off": "click",
+    active: open.toString(),
+    onClick: onClick,
+    className: (className || "") + (open ? " active" : "")
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon icon-fw icon-sort fas"
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "icon icon-fw icon-angle-down ms-03 fas"
+  }));
+});
+
+/** Toggles between regular & full screen views */
+export var ToggleLayoutButton = /*#__PURE__*/function (_React$PureComponent) {
+  function ToggleLayoutButton(props) {
+    var _this2;
+    _classCallCheck(this, ToggleLayoutButton);
+    _this2 = _callSuper(this, ToggleLayoutButton, [props]);
+    _this2.handleLayoutToggle = _.throttle(_this2.handleLayoutToggle.bind(_this2), 350);
+    return _this2;
+  }
+  _inherits(ToggleLayoutButton, _React$PureComponent);
+  return _createClass(ToggleLayoutButton, [{
+    key: "handleLayoutToggle",
+    value: function handleLayoutToggle() {
+      var _this$props = this.props,
+        windowWidth = _this$props.windowWidth,
+        isFullscreen = _this$props.isFullscreen,
+        toggleFullScreen = _this$props.toggleFullScreen;
+      if (!SearchResultTable.isDesktopClientside(windowWidth)) return null;
+      if (typeof toggleFullScreen !== 'function') {
+        console.error('No toggleFullscreen function passed in.');
+        return null;
+      }
+      setTimeout(toggleFullScreen, 0, !isFullscreen);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isFullscreen = _this$props2.isFullscreen,
+        className = _this$props2.className;
+      var cls = className + " expand-layout-button" + (!isFullscreen ? '' : ' expanded');
+      return /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: cls,
+        onClick: this.handleLayoutToggle,
+        "data-tip": (!isFullscreen ? 'Expand' : 'Collapse') + " table width"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon icon-fw fas icon-" + (!isFullscreen ? 'arrows-alt-h icon-expand' : 'compress')
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "ms-05 d-none d-xl-inline"
+      }, !isFullscreen ? "Full Screen" : "Collapse Table Width"));
+    }
+  }]);
+}(React.PureComponent);
+ToggleLayoutButton.propTypes = {
+  'windowWidth': PropTypes.number.isRequired,
+  'isFullscreen': PropTypes.bool.isRequired,
+  'toggleFullScreen': PropTypes.func.isRequired,
+  'className': PropTypes.string
+};
+ToggleLayoutButton.defaultProps = {
+  'className': "btn btn-outline-primary"
+};

es/components/browse/components/above-table-controls/RightButtonsSection.js

@@ -20,27 +20,49 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import { SearchResultTable } from './../SearchResultTable';
-export var RightButtonsSection = /*#__PURE__*/React.memo(function (props) {
-  var currentOpenPanel = props.currentOpenPanel,
+export var ColumnCustomizationButtons = /*#__PURE__*/React.memo(function (props) {
+  var noWrapper = props.noWrapper,
+    btnClassName = props.btnClassName,
+    currentOpenPanel = props.currentOpenPanel,
     onColumnsBtnClick = props.onColumnsBtnClick,
     onMultiColumnSortBtnClick = props.onMultiColumnSortBtnClick,
     windowWidth = props.windowWidth,
     isFullscreen = props.isFullscreen,
     toggleFullScreen = props.toggleFullScreen,
     _props$showMultiColum = props.showMultiColumnSort,
     showMultiColumnSort = _props$showMultiColum === void 0 ? true : _props$showMultiColum;
+  var showToggleLayoutBtn = typeof windowWidth === 'number' && typeof isFullscreen === 'boolean' && typeof toggleFullScreen === 'function';
+  if (noWrapper) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigureVisibleColumnsButton, {
+      onClick: onColumnsBtnClick,
+      open: currentOpenPanel === "customColumns",
+      className: btnClassName
+    }), showMultiColumnSort ? /*#__PURE__*/React.createElement(MultiColumnSortButton, {
+      onClick: onMultiColumnSortBtnClick,
+      open: currentOpenPanel === "multiColumnSort",
+      className: btnClassName
+    }) : null, showToggleLayoutBtn ? /*#__PURE__*/React.createElement(ToggleLayoutButton, {
+      windowWidth: windowWidth,
+      isFullscreen: isFullscreen,
+      toggleFullScreen: toggleFullScreen,
+      className: btnClassName
+    }) : null);
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "right-buttons col-auto"
   }, /*#__PURE__*/React.createElement(ConfigureVisibleColumnsButton, {
     onClick: onColumnsBtnClick,
-    open: currentOpenPanel === "customColumns"
+    open: currentOpenPanel === "customColumns",
+    className: btnClassName
   }), showMultiColumnSort ? /*#__PURE__*/React.createElement(MultiColumnSortButton, {
     onClick: onMultiColumnSortBtnClick,
-    open: currentOpenPanel === "multiColumnSort"
-  }) : null, typeof windowWidth === 'number' && typeof isFullscreen === 'boolean' && typeof toggleFullScreen === 'function' ? /*#__PURE__*/React.createElement(ToggleLayoutButton, {
+    open: currentOpenPanel === "multiColumnSort",
+    className: btnClassName
+  }) : null, showToggleLayoutBtn ? /*#__PURE__*/React.createElement(ToggleLayoutButton, {
     windowWidth: windowWidth,
     isFullscreen: isFullscreen,
-    toggleFullScreen: toggleFullScreen
+    toggleFullScreen: toggleFullScreen,
+    className: btnClassName
   }) : null);
 });
 export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_ref) {

es/components/util/value-transforms.js

@@ -11,10 +11,23 @@ export var byteLevels = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'Exabytes', 'Zet
 export var numberLevels = ['', 'k', 'm', ' billion', ' trillion', ' quadrillion', ' quintillion'];
 export function bytesToLargerUnit(bytes) {
   var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var showOnlyUnits = arguments.length > 2 ? arguments[2] : undefined;
+  var showOnlyValue = arguments.length > 3 ? arguments[3] : undefined;
   if (bytes >= 1024 && level < byteLevels.length) {
-    return bytesToLargerUnit(bytes / 1024, level + 1);
+    return bytesToLargerUnit(bytes / 1024, level + 1, showOnlyUnits, showOnlyValue);
   } else {
-    return Math.round(bytes * 100) / 100 + ' ' + byteLevels[level];
+    if (showOnlyUnits && showOnlyValue) {
+      throw new Error("showOnlyUnits and showOnlyValue cannot both be true");
+    } else if (showOnlyUnits) {
+      // show only units
+      return byteLevels[level];
+    } else if (showOnlyValue) {
+      // show only the value
+      return Math.round(bytes * 100) / 100;
+    } else {
+      // by default show units and value
+      return Math.round(bytes * 100) / 100 + ' ' + byteLevels[level];
+    }
   }
 }
 export function roundLargeNumber(num) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hms-dbmi-bgm/shared-portal-components",
-    "version": "0.1.91",
+    "version": "0.1.92",
     "description": "Shared components used for DBMI/BGM portal(s).",
     "repository": {
         "type": "git",

src/components/browse/SearchView.js

@@ -118,6 +118,8 @@ export class SearchView extends React.PureComponent {
             //isOwnPage = true,
             windowWidth,
             hideFacets,
+            hideStickyFooter,
+            useCustomSelectionController,
             ...passProps
         } = this.props;
 
@@ -135,7 +137,8 @@ export class SearchView extends React.PureComponent {
             href,
             windowWidth,
             isOwnPage: true,
-            facets: propFacets || contextFacets
+            facets: propFacets || contextFacets,
+            hideStickyFooter,
         };
 
         let controllersAndView = (
@@ -151,7 +154,7 @@ export class SearchView extends React.PureComponent {
             </WindowNavigationController>
         );
 
-        if (isSelectAction(currentAction)){
+        if (isSelectAction(currentAction) && !useCustomSelectionController){
             // We don't allow "SelectionMode" unless is own page.
             // Could consider changing later once a use case exists.
             controllersAndView = (