diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 645c2c8c..e3da5b62 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -297,6 +297,9 @@ const resetInterface = () => (dispatch, getState) => { type: "reset World to eq Universe", universe }); + dispatch({ + type: "increment graph render counter" + }); }; export default { diff --git a/client/src/components/app.js b/client/src/components/app.js index 1bd57bb9..89d0236c 100644 --- a/client/src/components/app.js +++ b/client/src/components/app.js @@ -11,7 +11,8 @@ import actions from "../actions"; @connect(state => ({ loading: state.controls.loading, - error: state.controls.error + error: state.controls.error, + graphRenderCounter: state.controls.graphRenderCounter })) class App extends React.Component { constructor(props) { @@ -54,7 +55,7 @@ class App extends React.Component { } render() { - const { loading } = this.props; + const { loading, error, graphRenderCounter } = this.props; return ( @@ -79,10 +80,8 @@ class App extends React.Component { marginLeft: 350 /* but responsive */ }} > - {loading ? null : } - + {loading ? null : } - {} diff --git a/client/src/components/graph/drawPointsRegl.js b/client/src/components/graph/drawPointsRegl.js index b5f9d6da..d8784438 100644 --- a/client/src/components/graph/drawPointsRegl.js +++ b/client/src/components/graph/drawPointsRegl.js @@ -38,7 +38,7 @@ export default function(regl) { uniforms: { distance: regl.prop("distance"), view: regl.prop("view"), - projection: () => mat4.perspective([], Math.PI / 2, 1, 0.01, 1000) + projection: ({viewportWidth, viewportHeight}) => mat4.perspective([], Math.PI / 2, viewportWidth / viewportHeight, 0.01, 1000) }, count: regl.prop("count"), diff --git a/client/src/components/graph/graph.js b/client/src/components/graph/graph.js index 2dd0d034..d14d73b1 100644 --- a/client/src/components/graph/graph.js +++ b/client/src/components/graph/graph.js @@ -6,8 +6,7 @@ import { connect } from "react-redux"; import mat4 from "gl-mat4"; import _regl from "regl"; import { Button, AnchorButton, Tooltip } from "@blueprintjs/core"; -import { worldEqUniverse } from "../../util/stateManager/world"; - +import * as globals from "../../globals"; import setupSVGandBrushElements from "./setupSVGandBrush"; import actions from "../../actions"; import _camera from "../../util/camera"; @@ -30,9 +29,9 @@ class Graph extends React.Component { super(props); this.count = 0; this.inverse = mat4.identity([]); - this.graphPaddingTop = 100; + this.graphPaddingTop = 0; this.graphPaddingBottom = 45; - this.graphPaddingRight = 10; + this.graphPaddingRight = globals.leftSidebarWidth; this.renderCache = { positions: null, colors: null @@ -126,18 +125,24 @@ class Graph extends React.Component { const glScaleX = scaleLinear([0, 1], [-1, 1]); const glScaleY = scaleLinear([0, 1], [1, -1]); + const offset = [d3.mean(obsLayout.X) - 0.5, d3.mean(obsLayout.Y) - 0.5]; + for ( let i = 0, { positions } = this.renderCache; i < cellCount; i += 1 ) { - positions[2 * i] = glScaleX(obsLayout.X[i]); - positions[2 * i + 1] = glScaleY(obsLayout.Y[i]); + positions[2 * i] = glScaleX(obsLayout.X[i] - offset[0]); + positions[2 * i + 1] = glScaleY(obsLayout.Y[i] - offset[1]); } pointBuffer({ data: this.renderCache.positions, dimension: 2 }); + + this.setState({ + offset + }); } // Colors for each point - a cached value that only changes when @@ -196,7 +201,7 @@ class Graph extends React.Component { this.handleBrushSelectAction.bind(this), this.handleBrushDeselectAction.bind(this), responsive, - this.graphPaddingTop + this.graphPaddingRight ); this.setState({ svg: newSvg, brush }); } @@ -251,7 +256,7 @@ class Graph extends React.Component { an event on procedural deselect because it is move: null */ - const { camera } = this.state; + const { camera, offset } = this.state; const { dispatch, responsive } = this.props; if (d3.event.sourceEvent !== null) { @@ -262,6 +267,7 @@ class Graph extends React.Component { https://bl.ocks.org/EfratVil/0e542f5fc426065dd1d4b6daaa345a9f */ const s = d3.event.selection; + const gl = this.state.regl._gl; /* event describing brush position: @-------| @@ -270,19 +276,23 @@ class Graph extends React.Component { |-------@ */ + // get aspect ratio + const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; + // compute inverse view matrix const inverse = mat4.invert([], camera.view()); // transform screen coordinates -> cell coordinates const invert = pin => { - const x = (2 * pin[0]) / (responsive.height - this.graphPaddingTop) - 1; + const x = + (2 * pin[0]) / (responsive.width - this.graphPaddingRight) - 1; const y = 2 * (1 - pin[1] / (responsive.height - this.graphPaddingTop)) - 1; const pout = [ - x * inverse[14] + inverse[12], + x * inverse[14] * aspect + inverse[12], y * inverse[14] + inverse[13] ]; - return [(pout[0] + 1) / 2, (pout[1] + 1) / 2]; + return [(pout[0] + 1) / 2 + offset[0], (pout[1] + 1) / 2 + offset[1]]; }; const brushCoords = { @@ -366,6 +376,7 @@ class Graph extends React.Component { style={{ marginRight: 10 }} onClick={() => { dispatch(actions.regraph()); + dispatch({ type: "increment graph render counter" }); }} > subset to current selection @@ -421,12 +432,10 @@ class Graph extends React.Component {
{ this.reglCanvas = canvas; diff --git a/client/src/components/graph/setupSVGandBrush.js b/client/src/components/graph/setupSVGandBrush.js index f08c9cac..f88e3f19 100644 --- a/client/src/components/graph/setupSVGandBrush.js +++ b/client/src/components/graph/setupSVGandBrush.js @@ -12,22 +12,18 @@ export default ( handleBrushSelectAction, handleBrushDeselectAction, responsive, - graphPaddingTop + graphPaddingRight ) => { - const side = responsive.height - graphPaddingTop; const svg = d3 .select("#graphAttachPoint") .append("svg") - .attr("width", side) - .attr("height", side) + .attr("width", responsive.width - graphPaddingRight) + .attr("height", responsive.height) .attr("class", `${styles.graphSVG}`); const brush = d3 .brush() - .extent([ - [0, 0], - [responsive.height - graphPaddingTop, responsive.height - graphPaddingTop] - ]) + .extent([[0, 0], [responsive.width - graphPaddingRight, responsive.height]]) .on("brush", handleBrushSelectAction) .on("end", handleBrushDeselectAction); diff --git a/client/src/reducers/controls.js b/client/src/reducers/controls.js index e7b36df0..09d9b79c 100644 --- a/client/src/reducers/controls.js +++ b/client/src/reducers/controls.js @@ -54,6 +54,7 @@ const Controls = ( scatterplotXXaccessor: null, // just easier to read scatterplotYYaccessor: null, axesHaveBeenDrawn: false, + graphRenderCounter: 0 /* integer as