From 4c3d783fc8170de4350b2c0c57265d712646dfe9 Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Tue, 5 Nov 2019 20:29:21 -0500 Subject: [PATCH] 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 | 8 +-- client/src/components/app.js | 2 + client/src/components/autosave/index.js | 4 +- .../src/components/continuousLegend/index.js | 3 +- client/src/components/graph/graph.js | 15 +++--- client/src/components/graph/setupLasso.js | 1 - client/src/components/leftSidebar/index.js | 4 +- client/src/components/menubar/index.js | 28 +++++----- .../src/components/menubar/undoRedoReset.js | 4 +- client/src/components/rightSidebar/index.js | 53 +++++++++++++++++++ client/src/globals.js | 2 +- 11 files changed, 86 insertions(+), 38 deletions(-) create mode 100644 client/src/components/rightSidebar/index.js diff --git a/client/__tests__/e2e/data.js b/client/__tests__/e2e/data.js index 2d8ebeaf..da29f59e 100644 --- a/client/__tests__/e2e/data.js +++ b/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: { diff --git a/client/src/components/app.js b/client/src/components/app.js index a9c30877..57442ee4 100644 --- a/client/src/components/app.js +++ b/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}
{loading ? null : } + {loading ? null : } {loading ? null : } {loading ? null : } {loading ? null : } diff --git a/client/src/components/autosave/index.js b/client/src/components/autosave/index.js index 3c27e4e3..08a2abe2 100644 --- a/client/src/components/autosave/index.js +++ b/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 }} > diff --git a/client/src/components/continuousLegend/index.js b/client/src/components/continuousLegend/index.js index 3ef55850..db6b2d26 100644 --- a/client/src/components/continuousLegend/index.js +++ b/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 }} /> diff --git a/client/src/components/graph/graph.js b/client/src/components/graph/graph.js index 66f30416..b72a8e8b 100644 --- a/client/src/components/graph/graph.js +++ b/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 }} >
{ diff --git a/client/src/components/graph/setupLasso.js b/client/src/components/graph/setupLasso.js index 9bbc9d1b..00a7a5ca 100644 --- a/client/src/components/graph/setupLasso.js +++ b/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 diff --git a/client/src/components/leftSidebar/index.js b/client/src/components/leftSidebar/index.js index 200f1f7a..fc5fc3e7 100644 --- a/client/src/components/leftSidebar/index.js +++ b/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}` }} > @@ -47,8 +47,6 @@ class LeftSideBar extends React.Component { }} > - -
{scatterplotXXaccessor && scatterplotYYaccessor ? ( diff --git a/client/src/components/menubar/index.js b/client/src/components/menubar/index.js index d988f02c..2382aa37 100644 --- a/client/src/components/menubar/index.js +++ b/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 { - Compute Differential Expression - + /> ) : null} @@ -303,7 +299,7 @@ class MenuBar extends React.Component {
); diff --git a/client/src/components/rightSidebar/index.js b/client/src/components/rightSidebar/index.js new file mode 100644 index 00000000..54a59a34 --- /dev/null +++ b/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 ( +
+
+ + +
+
+ ); + } +} + +export default RightSidebar; diff --git a/client/src/globals.js b/client/src/globals.js index 609be441..daee8339 100644 --- a/client/src/globals.js +++ b/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)";