Continuous data in right sidebar (#985)

* Create right sidebar files, move histos over

* restructure continuous legend + all padding

* right sidebar file

* proper graph positioning and resize

* new lasso values since right sidebar

* fix autosave position

client/__tests__/e2e/data.js

@@ -26,8 +26,8 @@ export const datasets = {
     cellsets: {
       lasso: [
         {
-          "coordinates-as-percent": { x1: 0.05, y1: 0.25, x2: 0.15, y2: 0.35 },
-          count: "88"
+          "coordinates-as-percent": { x1: 0.1, y1: 0.25, x2: 0.7, y2: 0.75 },
+          count: "1181"
         }
       ],
       categorical: [
@@ -97,8 +97,8 @@ export const datasets = {
         }
       },
       lasso: {
-        "coordinates-as-percent": { x1: 0.45, y1: 0.05, x2: 0.65, y2: 0.15 },
-        count: "39"
+        "coordinates-as-percent": { x1: 0.25, y1: 0.05, x2: 0.75, y2: 0.55 },
+        count: "329"
       }
     },
     scatter: {

client/src/components/app.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 
 import Container from "./framework/container";
 import LeftSideBar from "./leftSidebar";
+import RightSideBar from "./rightSidebar";
 import Legend from "./continuousLegend";
 import Graph from "./graph/graph";
 import MenuBar from "./menubar";
@@ -88,6 +89,7 @@ class App extends React.Component {
         ) : null}
         <div>
           {loading ? null : <LeftSideBar />}
+          {loading ? null : <RightSideBar />}
           {loading ? null : <MenuBar />}
           {loading ? null : <Graph key={graphRenderCounter} />}
           {loading ? null : <Autosave />}

client/src/components/autosave/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-
+import * as globals from "../../globals";
 import actions from "../../actions";
 
 @connect(state => ({
@@ -68,7 +68,7 @@ class Autosave extends React.Component {
         style={{
           position: "fixed",
           display: "inherit",
-          right: 5,
+          right: globals.leftSidebarWidth + 5,
           bottom: 5
         }}
       >

client/src/components/continuousLegend/index.js

@@ -3,6 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 import * as d3 from "d3";
 import { interpolateCool } from "d3-scale-chromatic";
+import * as globals from "../../globals";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
@@ -142,7 +143,7 @@ class ContinuousLegend extends React.Component {
         style={{
           position: "fixed",
           display: colorAccessor ? "inherit" : "none",
-          right: 0,
+          right: globals.leftSidebarWidth,
           top: responsive.height / 2
         }}
       />

client/src/components/graph/graph.js

@@ -175,7 +175,7 @@ class Graph extends React.PureComponent {
     super(props);
     this.count = 0;
     this.graphPaddingTop = 0;
-    this.graphPaddingRight = globals.leftSidebarWidth;
+    this.graphPaddingRightLeft = globals.leftSidebarWidth * 2;
     this.renderCache = {
       X: null,
       Y: null,
@@ -412,7 +412,7 @@ class Graph extends React.PureComponent {
       handleEnd,
       handleCancel,
       responsive,
-      this.graphPaddingRight,
+      this.graphPaddingRightLeft,
       graphInteractionMode
     );
 
@@ -439,7 +439,7 @@ class Graph extends React.PureComponent {
 
     const newCentroidSVG = setupCentroidSVG(
       responsive,
-      this.graphPaddingRight,
+      this.graphPaddingRightLeft,
       centroidScreen,
       centroidLabel.categoryField,
       colorAccessor
@@ -539,7 +539,8 @@ class Graph extends React.PureComponent {
     const cameraInvTF = camera.invView();
 
     /* screen -> gl */
-    const x = (2 * pin[0]) / (responsive.width - this.graphPaddingRight) - 1;
+    const x =
+      (2 * pin[0]) / (responsive.width - this.graphPaddingRightLeft) - 1;
     const y = 2 * (1 - pin[1] / (responsive.height - this.graphPaddingTop)) - 1;
 
     const xy = vec2.fromValues(x, y);
@@ -566,7 +567,7 @@ class Graph extends React.PureComponent {
 
     const pin = [
       Math.round(
-        ((xy[0] + 1) * (responsive.width - this.graphPaddingRight)) / 2
+        ((xy[0] + 1) * (responsive.width - this.graphPaddingRightLeft)) / 2
       ),
       Math.round(
         -((xy[1] + 1) / 2 - 1) * (responsive.height - this.graphPaddingTop)
@@ -753,13 +754,13 @@ class Graph extends React.PureComponent {
             zIndex: -9999,
             position: "fixed",
             top: this.graphPaddingTop,
-            right: 0
+            right: globals.leftSidebarWidth
           }}
         >
           <div id="graphAttachPoint" />
           <div style={{ padding: 0, margin: 0 }}>
             <canvas
-              width={responsive.width - this.graphPaddingRight}
+              width={responsive.width - this.graphPaddingRightLeft}
               height={responsive.height - this.graphPaddingTop}
               data-testid="layout-graph"
               ref={canvas => {

client/src/components/graph/setupLasso.js

@@ -93,7 +93,6 @@ const Lasso = () => {
       .append("rect")
       .attr("width", bbox.width)
       .attr("height", bbox.height)
-      .attr("fill", "tomato")
       .attr("opacity", 0);
 
     const drag = d3

client/src/components/leftSidebar/index.js

@@ -33,7 +33,7 @@ class LeftSideBar extends React.Component {
           position: "fixed",
           backgroundColor: "white",
           /* x y blur spread color */
-          boxShadow: "-3px 0px 6px 2px rgba(153,153,153,0.4)"
+          borderRight: `1px solid ${globals.lightGrey}`
         }}
       >
         <TopLeftLogoAndTitle />
@@ -47,8 +47,6 @@ class LeftSideBar extends React.Component {
           }}
         >
           <Categorical />
-          <GeneExpression />
-          <Continuous />
         </div>
         {scatterplotXXaccessor && scatterplotYYaccessor ? (
           <DynamicScatterplot />

client/src/components/menubar/index.js

@@ -8,7 +8,8 @@ import {
   Popover,
   Position,
   RadioGroup,
-  Radio
+  Radio,
+  Icon
 } from "@blueprintjs/core";
 import { World } from "../../util/stateManager";
 import actions from "../../actions";
@@ -16,10 +17,7 @@ import CellSetButton from "./cellSetButtons";
 import InformationMenu from "./infoMenu";
 import UndoRedoReset from "./undoRedoReset";
 import Clip from "./clip";
-import {
-  tooltipHoverOpenDelay,
-  tooltipHoverOpenDelayQuick
-} from "../../globals";
+import * as globals from "../../globals";
 
 @connect(state => ({
   universe: state.universe,
@@ -282,7 +280,7 @@ class MenuBar extends React.Component {
           <Tooltip
             content={tipMessage}
             position="bottom"
-            hoverOpenDelay={tooltipHoverOpenDelayQuick}
+            hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
           >
             <AnchorButton
               disabled={!haveBothCellSets}
@@ -293,9 +291,7 @@ class MenuBar extends React.Component {
               fill
               type="button"
               onClick={this.computeDiffExp}
-            >
-              Compute Differential Expression
-            </AnchorButton>
+            />
           </Tooltip>
         ) : null}
 
@@ -303,7 +299,7 @@ class MenuBar extends React.Component {
           <Tooltip
             content="Remove differentially expressed gene list and clear cell selections"
             position="bottom"
-            hoverOpenDelay={tooltipHoverOpenDelayQuick}
+            hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
           >
             <Button
               type="button"
@@ -352,7 +348,7 @@ class MenuBar extends React.Component {
       <div
         style={{
           position: "fixed",
-          right: 8,
+          right: globals.leftSidebarWidth + 8,
           top: 8
         }}
       >
@@ -360,7 +356,7 @@ class MenuBar extends React.Component {
         <Tooltip
           content="Show only metadata and cells which are currently selected"
           position="bottom"
-          hoverOpenDelay={tooltipHoverOpenDelay}
+          hoverOpenDelay={globals.tooltipHoverOpenDelay}
         >
           <AnchorButton
             type="button"
@@ -378,14 +374,14 @@ class MenuBar extends React.Component {
               dispatch({ type: "increment graph render counter" });
             }}
           >
-            subset to current selection
+            <Icon icon="double-chevron-down" />
           </AnchorButton>
         </Tooltip>
         <div className="bp3-button-group">
           <Tooltip
             content={selectionTooltip}
             position="bottom"
-            hoverOpenDelay={tooltipHoverOpenDelay}
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
           >
             <Button
               type="button"
@@ -406,7 +402,7 @@ class MenuBar extends React.Component {
           <Tooltip
             content="Drag to pan, scroll to zoom"
             position="bottom"
-            hoverOpenDelay={tooltipHoverOpenDelay}
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
           >
             <Button
               type="button"
@@ -436,7 +432,7 @@ class MenuBar extends React.Component {
               <Tooltip
                 content="Select embedding for visualization"
                 position="bottom"
-                hoverOpenDelay={tooltipHoverOpenDelay}
+                hoverOpenDelay={globals.tooltipHoverOpenDelay}
               >
                 <Button
                   type="button"

client/src/components/menubar/undoRedoReset.js

@@ -63,9 +63,7 @@ function InformationMenu(props) {
           onClick={resetInterface}
           data-testid="reset"
           data-testclass={`resetting-${resettingInterface}`}
-        >
-          reset
-        </AnchorButton>
+        />
       </Tooltip>
     </div>
   );

client/src/components/rightSidebar/index.js

@@ -0,0 +1,53 @@
+// jshint esversion: 6
+import React from "react";
+import { connect } from "react-redux";
+import Continuous from "../continuous/continuous";
+import GeneExpression from "../geneExpression";
+import * as globals from "../../globals";
+
+@connect(state => ({
+  responsive: state.responsive,
+  scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
+  scatterplotYYaccessor: state.controls.scatterplotYYaccessor
+}))
+class RightSidebar extends React.Component {
+  render() {
+    const {
+      responsive,
+      scatterplotXXaccessor,
+      scatterplotYYaccessor
+    } = this.props;
+
+    /*
+    this magic number should be made less fragile,
+    if cellxgene logo or tabs change, this must as well
+    */
+    const logoRelatedPadding = 50;
+
+    return (
+      <div
+        style={{
+          position: "fixed",
+          right: 0,
+          backgroundColor: "white",
+          /* x y blur spread color */
+          borderLeft: `1px solid ${globals.lightGrey}`
+        }}
+      >
+        <div
+          style={{
+            height: responsive.height,
+            width: globals.leftSidebarWidth,
+            overflowY: "auto",
+            overflowX: "hidden"
+          }}
+        >
+          <GeneExpression />
+          <Continuous />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RightSidebar;

client/src/globals.js

@@ -26,7 +26,7 @@ export const blue = Colors.BLUE3;
 export const linkBlue = Colors.BLUE5;
 export const lightestGrey = "rgb(249,249,249)";
 export const lighterGrey = "rgb(245,245,245)";
-export const lightGrey = "rgb(211,211,211)";
+export const lightGrey = Colors.LIGHT_GRAY1;
 export const mediumGrey = "rgb(153,153,153)";
 export const darkGrey = "rgb(102,102,102)";
 export const darkerGrey = "rgb(51,51,51)";