From ca37483447f68e225a0f7a68f15d8f0bef6ecde7 Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Tue, 9 Oct 2018 11:47:24 -0700 Subject: [PATCH] remove old heatmap webgl code --- .../_experimentalWebGLHeatmap/heatmap.js | 251 ------------------ .../orbit-control.js | 170 ------------ .../_experimentalWebGLHeatmap/popup.js | 45 ---- 3 files changed, 466 deletions(-) delete mode 100644 client/src/components/_experimentalWebGLHeatmap/heatmap.js delete mode 100755 client/src/components/_experimentalWebGLHeatmap/orbit-control.js delete mode 100755 client/src/components/_experimentalWebGLHeatmap/popup.js diff --git a/client/src/components/_experimentalWebGLHeatmap/heatmap.js b/client/src/components/_experimentalWebGLHeatmap/heatmap.js deleted file mode 100644 index 1e65f694..00000000 --- a/client/src/components/_experimentalWebGLHeatmap/heatmap.js +++ /dev/null @@ -1,251 +0,0 @@ -// jshint esversion: 6 -import React from "react"; -import _ from "lodash"; -import DeckGL, { - PointCloudLayer, - ScreenGridLayer, - COORDINATE_SYSTEM -} from "deck.gl"; -import OrbitController from "./orbit-control"; -import { Popup } from "./popup"; - -class Heatmap extends React.Component { - constructor(props) { - super(props); - - this.onChangeViewport = this.onChangeViewport.bind(this); - this.onInitialized = this.onInitialized.bind(this); - this.onResize = this.onResize.bind(this); - this.onUpdate = this.onUpdate.bind(this); - this.onHover = this.onHover.bind(this); - - this.state = { - width: 0, - height: 0, - points: [], - sampleExpressionMatrix: [ - { color: [0, 255, 0], position: [100, 100] }, - { color: [0, 255, 0], position: [100, 100] }, - { color: [0, 255, 0], position: [100, 100] } - ], - progress: 0, - popup: { - displayed: false, - x: 0, - y: 0, - title: "" - }, - viewport: { - lookAt: [0, 0, 0], - distance: 1, - rotationX: 0, - rotationY: 0, - fov: 30, - minDistance: 0.5, - maxDistance: 3 - } - }; - } - - getColor(cluster) { - let color = [0, 0, 0]; - - switch (cluster) { - case 0: - color = [166, 206, 227]; - break; - case 1: - color = [31, 120, 180]; - break; - case 2: - color = [178, 223, 138]; - break; - case 3: - color = [51, 160, 44]; - break; - case 4: - color = [251, 154, 153]; - break; - case 5: - color = [227, 26, 28]; - break; - case 6: - color = [253, 191, 111]; - break; - case 7: - color = [255, 127, 0]; - break; - case 8: - color = [202, 178, 214]; - break; - case 9: - color = [106, 61, 154]; - break; - } - - return color; - } - - componentWillMount() { - window.addEventListener("resize", this.onResize); - this.onResize(); - } - - componentDidMount() { - this.canvas.fitBounds([-0.5, -0.5, -0.5], [0.5, 0.5, 0.5]); - - this.fetchData(); - - window.requestAnimationFrame(this.onUpdate); - } - - componentWillUnmount() { - window.removeEventListener("resize", this.onResize); - } - - fetchData() { - fetch( - "https://raw.githubusercontent.com/zdenekhynek/data-science-capstone-visualisation/master/public/clusters.json" - ).then(res => { - res.json().then(obj => { - const clusters = Object.keys(obj).map(k => obj[k]); - const points = clusters.map(cluster => { - const position = [cluster.x, cluster.y, cluster.z]; - const color = [255, 0, 0]; - const id = cluster.id; - const title = cluster.webTitle; - return { id, title, position, color }; - }); - - this.setState({ points, progress: 1 }); - }); - }); - } - - onHover(d) { - let popup = { displayed: false }; - console.log("d", d); - - if (d.object) { - const object = d.object; - popup = { - id: object.id, - title: object.title, - displayed: true, - x: d.x, - y: d.y - }; - } - - this.setState({ popup }); - } - - onResize() { - const { innerWidth: width, innerHeight: height } = window; - this.setState({ width: width / 1.5, height: height / 1.5 }); - } - - onInitialized(gl) { - gl.clearColor(0, 0, 0, 1); - gl.enable(gl.DEPTH_TEST); - gl.depthFunc(gl.LEQUAL); - } - - onChangeViewport(viewport) { - this.setState({ - rotating: !viewport.isDragging, - viewport: { ...this.state.viewport, ...viewport } - }); - } - - onUpdate() { - const { viewport } = this.state; - window.requestAnimationFrame(this.onUpdate); - } - - renderPointCloudLayer() { - return ( - this.state.points.length && - new PointCloudLayer({ - id: "point-cloud-layer", - data: this.state.points, - projectionMode: COORDINATE_SYSTEM.IDENTITY, - pickable: true, - onHover: this.onHover, - getPosition: d => d.position, - getNormal: d => [0, 0.5, 0.2], - getColor: d => d.color, - radiusPixels: 2 - }) - ); - } - - renderGridLayer() { - /** - * Data format: - * [ - * {position: [-122.4, 37.7]}, - * ... - * ] - */ - const screenGridLayer = new ScreenGridLayer({ - id: "screen-grid-layer", - data: this.state.sampleExpressionMatrix, - projectionMode: COORDINATE_SYSTEM.IDENTITY, - pickable: true, - getPosition: d => d.position, - getColor: d => d.color, - cellSizePixels: 40 - }); - - return screenGridLayer; - } - - renderDeckGLCanvas() { - const { width, height, viewport } = this.state; - const canvasProps = { width, height, ...viewport }; - const glViewport = OrbitController.getViewport(canvasProps); - - return ( - width && - height && ( - { - this.canvas = canvas; - }} - onChangeViewport={this.onChangeViewport} - > - - - ) - ); - } - - render() { - const { width, height, popup } = this.state; - if (!width || !height) { - return null; - } - - const renderedPopup = popup.displayed ? : null; - - return ( -
- {this.renderDeckGLCanvas()} - {renderedPopup} -
- ); - } -} - -export default Heatmap; diff --git a/client/src/components/_experimentalWebGLHeatmap/orbit-control.js b/client/src/components/_experimentalWebGLHeatmap/orbit-control.js deleted file mode 100755 index fb4602e0..00000000 --- a/client/src/components/_experimentalWebGLHeatmap/orbit-control.js +++ /dev/null @@ -1,170 +0,0 @@ -// jshint esversion: 6 -/* global window */ -import React, { Component } from "react"; -import { PerspectiveViewport } from "deck.gl"; -import { vec3 } from "gl-matrix"; - -/* Utils */ -// constrain number between bounds -function clamp(x, min, max) { - if (x < min) { - return min; - } - if (x > max) { - return max; - } - return x; -} - -const ua = - typeof window.navigator !== "undefined" - ? window.navigator.userAgent.toLowerCase() - : ""; -const firefox = ua.indexOf("firefox") !== -1; - -/* Interaction */ - -export default class OrbitController extends Component { - static getViewport({ - width, - height, - lookAt, - distance, - rotationX, - rotationY, - fov - }) { - const cameraPos = vec3.add([], lookAt, [0, 0, distance]); - vec3.rotateX(cameraPos, cameraPos, lookAt, rotationX / 180 * Math.PI); - vec3.rotateY(cameraPos, cameraPos, lookAt, rotationY / 180 * Math.PI); - - return new PerspectiveViewport({ - width, - height, - lookAt, - far: 1000, - near: 0.1, - fovy: fov, - eye: cameraPos - }); - } - - constructor(props) { - super(props); - this._dragStartPos = null; - } - - _onDragStart(evt) { - const { pageX, pageY } = evt; - this._dragStartPos = [pageX, pageY]; - this.props.onChangeViewport({ isDragging: true }); - } - - _onDrag(evt) { - if (this._dragStartPos) { - const { pageX, pageY } = evt; - const { width, height } = this.props; - const dx = (pageX - this._dragStartPos[0]) / width; - const dy = (pageY - this._dragStartPos[1]) / height; - - if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey) { - // pan - const { lookAt, distance, rotationX, rotationY, fov } = this.props; - - const unitsPerPixel = distance / Math.tan(fov / 180 * Math.PI / 2) / 2; - - const newLookAt = vec3.add([], lookAt, [ - -unitsPerPixel * dx, - unitsPerPixel * dy, - 0 - ]); - vec3.rotateX(newLookAt, newLookAt, lookAt, rotationX / 180 * Math.PI); - vec3.rotateY(newLookAt, newLookAt, lookAt, rotationY / 180 * Math.PI); - - this.props.onChangeViewport({ - lookAt: newLookAt - }); - } else { - // rotate - const { rotationX, rotationY } = this.props; - const newRotationX = clamp(rotationX - dy * 180, -90, 90); - const newRotationY = (rotationY - dx * 180) % 360; - - this.props.onChangeViewport({ - rotationX: newRotationX, - rotationY: newRotationY - }); - } - - this._dragStartPos = [pageX, pageY]; - } - } - - _onDragEnd() { - this._dragStartPos = null; - this.props.onChangeViewport({ isDragging: false }); - } - - _onWheel(evt) { - evt.preventDefault(); - let value = evt.deltaY; - // Firefox doubles the values on retina screens... - if (firefox && evt.deltaMode === window.WheelEvent.DOM_DELTA_PIXEL) { - value /= window.devicePixelRatio; - } - if (evt.deltaMode === window.WheelEvent.DOM_DELTA_LINE) { - value *= 40; - } - if (value !== 0 && value % 4.000244140625 === 0) { - // This one is definitely a mouse wheel event. - // Normalize this value to match trackpad. - value = Math.floor(value / 4); - } - - const { distance, minDistance, maxDistance } = this.props; - const newDistance = clamp( - distance * Math.pow(1.01, value), - minDistance, - maxDistance - ); - - this.props.onChangeViewport({ - distance: newDistance - }); - } - - // public API - fitBounds(min, max) { - const { fov } = this.props; - const size = Math.max(max[0] - min[0], max[1] - min[1], max[2] - min[2]); - const newDistance = size / Math.tan(fov / 180 * Math.PI / 2) / 2; - - this.props.onChangeViewport({ - distance: newDistance - }); - } - - render() { - return ( -
- {this.props.children} -
- ); - } -} - -OrbitController.defaultProps = { - lookAt: [0, 0, 0], - rotationX: 0, - rotationY: 0, - minDistance: 0, - maxDistance: Infinity, - fov: 50 -}; diff --git a/client/src/components/_experimentalWebGLHeatmap/popup.js b/client/src/components/_experimentalWebGLHeatmap/popup.js deleted file mode 100755 index dd39a8ff..00000000 --- a/client/src/components/_experimentalWebGLHeatmap/popup.js +++ /dev/null @@ -1,45 +0,0 @@ -// jshint esversion: 6 -import React, { PureComponent } from "react"; - -export class Popup extends PureComponent { - render() { - const { title, x, y } = this.props; - const style = { - position: "absolute", - top: y, - left: x, - maxWidth: "200px", - padding: "10px", - color: "white", - backgroundColor: "black", - pointerEvents: "none", - transform: "translate(10px, -50%)" - }; - - const arrowStyle = { - position: "absolute", - top: "50%", - left: "-14px", - width: "7px", - height: "5px", - boxSizing: "border-box", - transform: "translateY(-50%)", - border: "7px solid transparent", - borderRight: "7px solid black" - }; - - return ( -
-
- {title} -
- ); - } -} - -Popup.defaultProps = { - id: "id", - title: "", - x: 0, - y: 0 -};