Scrolling

package.json

@@ -26,7 +26,7 @@
     "autobind-decorator": "2.4.0",
     "bootstrap": "3.3.7",
     "deep-equal": "1.0.1",
-    "higlass": "1.6.5",
+    "higlass": "1.7.2",
     "history": "4.7.2",
     "pixi.js-legacy": "5.0.4",
     "prop-types": "15.6.2",

src/components/App.js

@@ -40,10 +40,19 @@ class App extends React.Component {
 
     this.state = {
       dialog: undefined,
+      higlassOptions: {
+        sizeMode: 'bounded'
+      },
       isAuthenticated: auth.isAuthenticated(),
     };
 
     this.domEvent = createDomEvent(props.pubSub);
+
+    this.dialogHandlerBound = this.dialogHandler.bind(this);
+    this.keyDownHandlerBound = this.keyDownHandler.bind(this);
+    this.loginHandlerBound = this.loginHandler.bind(this);
+    this.logoutHandlerBound = this.logoutHandler.bind(this);
+    this.hgSizeModeHandlerBound = this.hgSizeModeHandler.bind(this);
   }
 
   componentDidMount() {
@@ -57,19 +66,23 @@ class App extends React.Component {
     this.domEvent.register('scroll', document);
 
     this.pubSubs.push(
-      this.props.pubSub.subscribe('globalDialog', this.dialogHandler.bind(this))
+      this.props.pubSub.subscribe('globalDialog', this.dialogHandlerBound)
     );
 
     this.pubSubs.push(
-      this.props.pubSub.subscribe('keydown', this.keyDownHandler.bind(this))
+      this.props.pubSub.subscribe('keydown', this.keyDownHandlerBound)
     );
 
     this.pubSubs.push(
-      this.props.pubSub.subscribe('login', this.loginHandler.bind(this))
+      this.props.pubSub.subscribe('login', this.loginHandlerBound)
     );
 
     this.pubSubs.push(
-      this.props.pubSub.subscribe('logout', this.logoutHandler.bind(this))
+      this.props.pubSub.subscribe('logout', this.logoutHandlerBound)
+    );
+
+    this.pubSubs.push(
+      this.props.pubSub.subscribe('hgSizeMode', this.hgSizeModeHandlerBound)
     );
   }
 
@@ -116,7 +129,8 @@ class App extends React.Component {
         <TopBar
           isAuthenticated={this.state.isAuthenticated} />
         <Main
-          isAuthenticated={this.state.isAuthenticated} />
+          isAuthenticated={this.state.isAuthenticated}
+          higlassOptions={this.state.higlassOptions} />
       </div>
     );
   }
@@ -154,6 +168,15 @@ class App extends React.Component {
       });
   }
 
+  hgSizeModeHandler(sizeMode) {
+    this.setState({
+      higlassOptions: {
+        ...this.state.higlassOptions,
+        sizeMode,
+      }
+    });
+  }
+
   keyDownHandler(event) {
     if (
       IGNORED_FOCUS_ELEMENTS.indexOf(

src/components/HiGlassLauncher.js

@@ -21,7 +21,7 @@ import '../styles/bootstrap.less';
 const logger = Logger('HiGlassLauncher');  // eslint-disable-line
 
 const defaultOptions = Object.assign({
-  bounded: true,
+  sizeMode: 'bounded',
 }, window.HGAC_DEFAULT_OPTIONS);
 
 
@@ -46,6 +46,12 @@ class HiGlassLauncher extends React.Component {
       this.setMouseTool(nextProps.mouseTool);
     }
 
+    if (nextProps.options !== this.props.options && this.api) {
+      Object.entries(nextProps.options).forEach(([key, value]) => {
+        this.api.option(key, value);
+      })
+    }
+
     if (deepEqual(this.newViewConfig, nextProps.viewConfig)) {
       return false;
     }
@@ -112,9 +118,9 @@ class HiGlassLauncher extends React.Component {
       options.mouseTool = this.props.mouseTool;
     }
 
-    options.bounded = this.props.autoExpand
-      ? false
-      : this.props.options.bounded;
+    options.sizeMode = this.props.autoExpand
+      ? 'default'
+      : this.props.options.sizeMode;
 
     const className = !this.props.autoExpand ? 'full-dim' : 'rel';
 

src/components/HiGlassViewer.js

@@ -190,14 +190,16 @@ class HiGlassViewer extends React.Component {
                       isPadded={this.props.isPadded}
                       isZoomFixed={this.props.isZoomFixed}
                       onError={this.onError.bind(this)}
+                      options={this.props.options}
                       viewConfig={this.state.viewConfigStatic}
                     />
                   : <HiGlassLoader
                       api={this.props.api}
                       enableAltMouseTools={this.props.enableAltMouseTools}
-                      onError={this.onError.bind(this)}
                       isPadded={this.props.isPadded}
                       isZoomFixed={this.props.isZoomFixed}
+                      onError={this.onError.bind(this)}
+                      options={this.props.options}
                     />
         )}
       </div>
@@ -222,6 +224,7 @@ HiGlassViewer.propTypes = {
   isPadded: PropTypes.bool,
   isStatic: PropTypes.bool,
   isZoomFixed: PropTypes.bool,
+  options: PropTypes.object.isRequired,
   pubSub: PropTypes.object.isRequired,
   server: PropTypes.string,
   setViewConfig: PropTypes.func.isRequired,

src/components/Main.js

@@ -31,7 +31,9 @@ class Main extends React.Component {
 
           return <Viewer
             isAuthenticated={this.props.isAuthenticated}
-            viewConfigId={viewConfigId} />;
+            higlassOptions={this.props.higlassOptions}
+            viewConfigId={viewConfigId}
+          />;
         }} />
         <Route exact path='/examples' component={Examples} />
         <Route exact path='/plugins' component={Plugins} />
@@ -48,6 +50,7 @@ class Main extends React.Component {
 
 Main.propTypes = {
   isAuthenticated: PropTypes.bool,
+  higlassOptions: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
 };
 

src/components/TopBar.js

@@ -12,6 +12,7 @@ import Hamburger from "./Hamburger";
 import Icon from "./Icon";
 // import TopBarDropDownLogin from './TopBarDropDownLogin';
 // import TopBarDropDownUser from './TopBarDropDownUser';
+import TopBarDropDownAppSettings from './TopBarDropDownAppSettings';
 
 // Services
 import auth from "../services/auth";
@@ -222,6 +223,11 @@ class TopBar extends React.Component {
                 //   }
                 // </li>
               }
+              {this.props.location.pathname.substr(0, 4) === '/app' && (
+                <li className='separated-left flex-c flex-jc-c'>
+                  <TopBarDropDownAppSettings closeOnOuterClick />
+                </li>
+              )}
               <li className="separated-left flex-c">
                 <a
                   href="https://github.com/higlass"

src/components/TopBar.scss

@@ -164,6 +164,26 @@
       padding: 0.25rem;
     }
 
+    &.is-primary-nav {
+      color: $gray-dark;
+      box-shadow: none;
+
+      &:hover,
+      &:focus {
+        color: $black;
+        background: none;
+        box-shadow: none;
+      }
+
+      &:hover {
+        background: none;
+      }
+
+      &:focus {
+        background: $gray-lightest;
+      }
+    }
+
     .icon {
       width: 1rem;
       height: 1rem;

src/components/TopBarDropDownAppSettings.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Components
+import ButtonIcon from './ButtonIcon';
+import DropDownContent from './DropDownContent';
+import DropDownTrigger from './DropDownTrigger';
+import TopBarDropDown from './TopBarDropDown';
+
+// HOCs
+import withPubSub from "../hocs/with-pub-sub";
+
+// Styles
+import './TopBarDropDownUser.scss';
+
+
+const scrollChangeHandler = pubSub => event => {
+  if (event.target.checked) {
+    pubSub.publish('hgSizeMode', 'scroll');
+  } else {
+    pubSub.publish('hgSizeMode', 'overflow');
+  }
+};
+
+const TopBarDropDowAppSettings = props => (
+  <TopBarDropDown
+    alignRight={true}
+    className='top-bar-drop-down-user'
+    closeOnOuterClick={props.closeOnOuterClick}>
+    <DropDownTrigger>
+      <ButtonIcon className='is-primary-nav' icon='cog-wheel' iconOnly />
+    </DropDownTrigger>
+    <DropDownContent>
+      <div className='flex-c flex-v'>
+        <div className='menu-field menu-text'>
+          <div className='menu-text-label'>HiGlass Settings:</div>
+        </div>
+        <label className='flex flex-a-c menu-field menu-checkbox'>
+          <input
+            type="checkbox"
+            onChange={scrollChangeHandler(props.pubSub)}
+          /> Enable Scrolling
+        </label>
+      </div>
+    </DropDownContent>
+  </TopBarDropDown>
+);
+
+TopBarDropDowAppSettings.propTypes = {
+  closeOnOuterClick: PropTypes.bool,
+  pubSub: PropTypes.object.isRequired
+};
+
+export default withPubSub(TopBarDropDowAppSettings);

src/views/Viewer.js

@@ -252,6 +252,7 @@ class Viewer extends React.Component {
             api={(api) => { this.hgApi = api; }}
             enableAltMouseTools={this.props.isAuthenticated}
             hasSubTopBar={this.props.isAuthenticated}
+            options={this.props.higlassOptions}
             server={server}
             viewConfigId={this.props.viewConfigId}
           />
@@ -272,6 +273,7 @@ Viewer.defaultProps = {
 };
 
 Viewer.propTypes = {
+  higlassOptions: PropTypes.object.isRequired,
   isAuthenticated: PropTypes.bool,
   mouseTool: PropTypes.string,
   pubSub: PropTypes.object.isRequired,