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 (
-
- );
- }
-}
-
-Popup.defaultProps = {
- id: "id",
- title: "",
- x: 0,
- y: 0
-};