From f57c4d29252596acc7c4af4700d74cac1fdb6966 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Sun, 26 Jun 2016 17:57:11 -0700
Subject: [PATCH 01/34] Added THREE.js and typings.

Automatic reordering by node and jspm

Updated d3 to v3.5.17

Progress to THREE support

Rough first pass at WebGL graphing intergration using THREE.js with d3

Got dots, rectfill and cargrid modes all working.

Got 1D plots to work with WebGL

Updating code to Google style standards.
---
 client-js/app/elements/labrad-plot.html |  11 +-
 client-js/app/elements/labrad-plot.ts   | 861 +++++++++++++++++-------
 client-js/app/scripts/activities.ts     |   2 +-
 client-js/gulpfile.js                   |   2 +-
 4 files changed, 614 insertions(+), 262 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.html b/client-js/app/elements/labrad-plot.html
index 135b0d8..9ae4e9b 100644
--- a/client-js/app/elements/labrad-plot.html
+++ b/client-js/app/elements/labrad-plot.html
@@ -35,10 +35,19 @@
     #dots {
       margin-top: 40px;
     }
+    #plot {
+      position: relative;
+    }
+    #canvas {
+      position: absolute;
+      top: 50px;
+      left: 40px;
+    }
   </style>
   <template>
     <div id="plot"></div>
-    <div id="pos">current position: <span>{{currPos}}</span></div>
+    <div id="canvas"></div>
+    <div id="pos">Current Position: <span>{{currPos}}</span></div>
     <div id="buttons">
       <paper-icon-button icon="tab-unselected" id="rect" on-click="mouseModeSelectorZoomRect" title="drag to zoom"></paper-icon-button>
       <paper-icon-button icon="open-with" id="pan" on-click="mouseModeSelectorPan" title="drag to pan"></paper-icon-button>
diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 5e775e4..1898b57 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -1,9 +1,17 @@
 import 'd3';
-
+import * as three from 'three';
 import {viridisData} from '../scripts/colormaps';
 import * as datavault from "../scripts/datavault";
 
+/**
+ * Import the THREE namespace from the module.
+ */
+const THREE = three.default;
 
+
+/**
+ * Mouse Constants
+ */
 const MOUSE_MAIN_BUTTON = 0;
 
 
@@ -62,8 +70,6 @@ export class Plot extends polymer.Base {
 
   private numTraces: number = 0;
   private svg: any;
-  private chartBody: any;
-  private clip: any;
   private width: number;
   private height: number;
   private xAxis: any;
@@ -108,19 +114,94 @@ export class Plot extends polymer.Base {
   private dy0: number = -1;
   private displayTraces: number[];
   private allOrNone: boolean = true;
+  private displaySurface: number = 2;
   private is1D: boolean;
   private is2D: boolean;
-  private displaySurface: number = 2;
 
 
   /**
-   * Redraw the plot and attach resize to the window resize event.
-   * Fires when the component is attached to the DOM.
+   * The base size of a point of data when in `dots` viewing mode.
    */
-  attached() {
-    this.redraw();
-    window.addEventListener('resize', (event) => this.redraw());
-  }
+  private dotBaseSize: number = 4;
+
+
+  /**
+   * The scaling factor to apply to a point of data in `dots` viewing mode.
+   */
+  private dotScaleSize: number = 1;
+
+
+  /**
+   * A matrix for the use in transforming geometries.
+   */
+  private transformMatrix = new THREE.Matrix4();
+
+
+  /**
+   * A non-indexed plane unit geometry one world unit in size.
+   * Used to render rectangular data points.
+   */
+  private planeUnitGeometry =
+      new THREE.PlaneBufferGeometry(1, 1).toNonIndexed();
+
+
+  /**
+   * The number of vertices in a plane geometry.
+   */
+  private planeVertexPositions =
+      this.planeUnitGeometry.attributes.position.array;
+
+
+  /**
+   * The number of vertices in a plane geometry.
+   */
+  private planeVertexCount = this.planeVertexPositions.length;
+
+
+  private cameraOpts = {
+    /** The field of view of the camera. */
+    fov: 45,
+    /** The initial aspect ratio of the camera. */
+    aspect: 1,
+    /** The near plane of the camera. */
+    near: -500,
+    /** The far plane of the camera. */
+    far: 500,
+    /** The starting position of the camera. */
+    startingPosition: new THREE.Vector3(0, 0, 1000)
+  };
+
+  /**
+   * A perspective camera to view the graph.
+   *
+   * The camera is currently only used for the sake of being able to observe
+   * the scene. Zooming/Panning is handled by `d3` rather than physically
+   * moving the camera around the 3D space provided by `THREE.js`. As such,
+   * camera properties such as position and zoom never change.
+   */
+  private camera = new THREE.PerspectiveCamera(
+    this.cameraOpts.fov,
+    this.cameraOpts.aspect,
+    this.cameraOpts.near,
+    this.cameraOpts.far);
+
+  /** The scene to render graphs to. */
+  private scene = new THREE.Scene();
+
+  /** A WebGL renderer for the scene. */
+  private renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+
+  /** A list of objects in the scene. */
+  private sceneObjects = [];
+
+  /** If a zoom in or out is taking place. */
+  private isZooming = false;
+
+  /** If we have ever zoomed since last resetting the zoom level. */
+  private haveZoomed: boolean = false;
+
+  /** If the scene render loop has been started. */
+  private isRendering: boolean = false;
 
 
   /**
@@ -134,14 +215,113 @@ export class Plot extends polymer.Base {
     for (let row of data) {
       this.splice('data', this.data.length, 0, row);
     }
-    this.plotData(data, lastData);
+    this.plotData(data);
+
+    if (!this.haveZoomed) {
+      this.resetZoom();
+    } else {
+      this.projectGraphPositions();
+    }
   }
 
 
-  private createPlot(
-      area: HTMLElement, totWidth: number, totHeight: number): void {
-    const p = this;
+  /**
+   * Redraw the plot and attach resize to the window resize event.
+   * Fires when the component is attached to the DOM.
+   */
+  attached() {
+    this.render();
+    window.addEventListener('resize', (e) => this.resizePlot());
+  }
+
+
+  /**
+   * Resets the current zoom level to fit the data.
+   */
+  resetZoomControl() {
+    this.resetZoom();
+  }
+
+
+  /**
+   * Creates and renders the SVG and WebGL portions of the graph.
+   */
+  private render(): void {
+    if (this.isRendering) {
+      return;
+    }
+
+    this.isRendering = true;
+
+    // Initialize SVG portions of plot.
+    this.initializeSVGPlot();
+
+    // Initialize WebGL portions of plot.
+    this.initializeWebGLPlot();
+
+    // Resize the plot to be the correct dimensions.
+    this.resizePlot();
+  }
+
+
+  /**
+   * Resizes the SVG and WebGL portions of the plots.
+   */
+  private resizePlot() {
+    this.resizeSVGPlot();
+    this.resizeWebGLPlot();
+    this.projectGraphPositions();
+  }
+
+
+  /**
+   * Begins the scene rendering loop.
+   */
+  private renderScene(): void {
+    this.renderer.render(this.scene, this.camera);
+    requestAnimationFrame(() => this.renderScene());
+  }
+
 
+  /**
+   * Deletes all objects from the scene and re-plots the data.
+   */
+  private redrawScene(resetZoom: boolean): void {
+    this.lastData = null;
+    for (let obj of this.sceneObjects) {
+      this.scene.remove(obj);
+    }
+    this.sceneObjects = [];
+    this.plotData(this.data);
+    if (resetZoom) {
+      this.resetZoom();
+    } else {
+      this.projectGraphPositions();
+    }
+  }
+
+
+  /**
+   * Initializes the WebGL portion of the plot.
+   */
+  private initializeWebGLPlot(): void {
+    this.scene.add(this.camera);
+    this.scene.add(new THREE.AmbientLight(0xffffff));
+    this.camera.position.copy(this.cameraOpts.startingPosition);
+    this.$.canvas.appendChild(this.renderer.domElement);
+    this.renderScene();
+  }
+
+
+  /**
+   * Initializes the SVG portion of the plot.
+   */
+  private initializeSVGPlot(): void {
+    const p = this;
+    const plot = p.$.plot;
+    const plotBounds = plot.getBoundingClientRect();
+    const totWidth = Math.max(plotBounds.width, 400);
+    const totHeight = Math.max(plotBounds.height, 400);
     const width = totWidth - p.margin.left - p.margin.right;
     const height = totHeight - p.margin.top - p.margin.bottom;
 
@@ -174,19 +354,22 @@ export class Plot extends polymer.Base {
     p.zoom = d3.behavior.zoom()
             .x(p.xScale)
             .y(p.yScale)
-            .on('zoom', () => this.handleZoom());
+            .on('zoom', (e) => p.zoomEventHandler());
 
     // Plot area.
-    p.svg = d3.select(area)
+    p.svg = d3.select(p.$.plot)
             .append('svg:svg')
+            .attr('id', 'svgplot')
             .attr('width', width + p.margin.left + p.margin.right)
             .attr('height', height + p. margin.top + p.margin.bottom)
             .append('g')
+            .attr('id', 'svgplotgroup')
             .attr('transform', `translate(${p.margin.left}, ${p.margin.top})`);
 
     // Background rectangle.
     p.svg.append('rect')
             .classed('background', true)
+            .attr('id', 'rect')
             .attr('stroke', 'black')
             .attr('stroke-width', 1)
             .attr('width', width)
@@ -195,6 +378,7 @@ export class Plot extends polymer.Base {
 
     // X-axis ticks and label.
     p.svg.append('g')
+            .attr('id', 'x-axis')
             .attr('class', 'x axis')
             .attr('transform', `translate(0, ${height})`)
             .call(p.xAxis);
@@ -207,6 +391,7 @@ export class Plot extends polymer.Base {
 
     // Y-axis ticks and label.
     p.svg.append('g')
+            .attr('id', 'y-axis')
             .attr('class', 'y axis')
             .call(p.yAxis);
     p.svg.append('text')
@@ -218,21 +403,78 @@ export class Plot extends polymer.Base {
             .style('text-anchor', 'middle')
             .text(this.yLabel);
 
-    // Draw the graph object (from http://jsfiddle.net/KSAbK/)
-    // This keeps the data from exceeding the limits of the plot.
-    p.chartBody = p.svg.append('g')
-            .attr('clip-path', 'url(#clip)');
-    p.clip = p.svg.append('svg:clipPath')
-            .attr('id', 'clip')
-            .append('svg:rect')
-            .attr('x', 0)
-            .attr('y', 0)
-            .attr('width', width)
-            .attr('height', height);
+    this.updatePlotStyles();
+    this.updateControlEventListeners();
+  }
+
+
+  /**
+   * Resizes the WebGL renderer and camera.
+   */
+  private resizeWebGLPlot() {
+    this.camera.aspect = this.width / this.height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(this.width, this.height);
+  }
+
+
+  /**
+   * Resize the SVG portion of the plot.
+   */
+  private resizeSVGPlot(): void {
+    const plot = this.$.plot;
+    const plotBounds = plot.getBoundingClientRect();
+    const plotWidth = Math.max(plotBounds.width, 400);
+    const plotHeight = Math.max(plotBounds.height, 400);
+
+    // The inner dimensions of the plot, sans margins
+    this.width = plotWidth - this.margin.left - this.margin.right;
+    this.height = plotHeight - this.margin.top - this.margin.bottom;
+
+    this.xScale.range([0, this.width]);
+    this.yScale.range([this.height, 0]);
+
+    this.xAxis.scale(this.xScale)
+           .tickSize(-this.height);
+
+    this.yAxis
+        .scale(this.yScale)
+        .tickSize(-this.width);
+
+    this.line
+        .x((d) => this.xScale(d[0]))
+        .y((d) => this.yScale(d[1]));
+
+    this.zoom.x(this.xScale)
+          .y(this.yScale);
+
+    d3.select('#svgplot')
+        .attr('width', plotWidth)
+        .attr('height', plotHeight)
+
+    this.svg.select('#rect')
+        .attr('width', this.width)
+        .attr('height', this.height);
+
+    this.svg.select('#x-axis')
+        .attr('transform', `translate(0, ${this.height})`)
+        .call(this.xAxis);
+
+    this.svg.select('#x-label')
+        .attr('transform', `translate(${this.width / 2}, ${this.height + this.margin.bottom - 10})`);
+
+    this.svg.select("#y-axis").call(this.yAxis);
+
+    this.svg.select('#y-label')
+        .attr('x', -(this.height / 2))
+        .attr('y', -this.margin.left);
   }
 
 
-  private plotData(data: number[][], lastData?: number[]) {
+  /**
+   *
+   */
+  private plotData(data: number[][]) {
     if (data.length === 0) return;
 
     this.numTraces = data[0].length - 1;
@@ -243,8 +485,8 @@ export class Plot extends polymer.Base {
     }
 
     switch (this.numIndeps) {
-      case 1: this.plotData1D(data, lastData); break;
-      case 2: this.plotData2D(data, lastData); break;
+      case 1: this.plotData1D(data); break;
+      case 2: this.plotData2D(data); break;
       default: break; // Nothing to do.
     }
 
@@ -261,14 +503,112 @@ export class Plot extends polymer.Base {
       this.limits.yMin -= 1;
       this.limits.yMax += 1;
     }
+  }
 
-    // Zoom to fit the data.
-    // TODO: Only if the zoom has not changed.
-    this.resetZoom();
+
+  /**
+   *
+   */
+  private plotData1D(data: number[][]) {
+    this.dataLimits1D(data);
+
+    const ob = new THREE.Object3D();
+
+    for (let i of this.displayTraces) {
+      const length = (this.lastData) ? data.length + 1 : data.length;
+      const positions = new Float32Array(length * 3);
+      const dataPoints = new Float64Array(length * 2);
+
+      let offset = 0;
+
+      // Add the last point of data if it exists to avoid gaps.
+      if (this.lastData) {
+        dataPoints[offset] = this.lastData[0];
+        dataPoints[offset + 1] = this.lastData[i+1];
+        offset += 2;
+      }
+
+      for (let row of data) {
+        dataPoints[offset] = row[0];
+        dataPoints[offset + 1] = row[i + 1];
+        offset += 2;
+      }
+
+      if (dataPoints.length > 1) {
+        const geometry = new THREE.BufferGeometry();
+        geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
+
+        let material = new THREE.LineBasicMaterial({color: COLOR_LIST[i % COLOR_LIST.length]});
+        let mesh = new THREE.Line(geometry, material);
+        // TODO [awhiteside]: Increase line width to retain parity with SVG
+        ob.add(mesh);
+      }
+    }
+
+    this.sceneObjects.push(ob);
+    this.scene.add(ob);
   }
 
 
-  private plotData1D(data: number[][], lastData?: number[]) {
+  /**
+   *
+   */
+  private plotData2D(data: number[][]) {
+    this.dataLimits2D(data);
+
+    const zMin = this.dataLimits.zMin;
+    const zMax = this.dataLimits.zMax;
+    const numVertices = (this.drawMode2D == 'dots') ?
+        3 : this.planeVertexCount;
+
+    const positions = new Float32Array(data.length * numVertices);
+    const dataPoints = new Float64Array(data.length * 2);
+    const colors = new Float32Array(data.length * numVertices);
+
+    for (let i = 0, len = data.length; i < len; ++i) {
+      const row = data[i];
+      const color = getColor(row[this.displaySurface], zMin, zMax);
+
+      dataPoints[i * 2] = row[0];
+      dataPoints[i * 2 + 1] = row[1];
+
+      const index = i * numVertices;
+      for (let j = 0; j < numVertices; j += 3) {
+        colors[index + j] = color.r / 255;
+        colors[index + j + 1] = color.g / 255;
+        colors[index + j + 2] = color.b / 255;
+      }
+    }
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
+    geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+    let material;
+    let mesh;
+
+    if (this.drawMode2D == 'dots') {
+      material = new THREE.PointsMaterial({size: 1, vertexColors: THREE.VertexColors});
+      mesh = new THREE.Points(geometry, material);
+    } else {
+      material = new THREE.MeshLambertMaterial({vertexColors: THREE.VertexColors});
+      mesh = new THREE.Mesh(geometry, material);
+    }
+
+    const ob = new THREE.Object3D();
+    ob.add(mesh);
+
+    this.sceneObjects.push(ob);
+    this.scene.add(ob);
+  }
+
+
+  /**
+   *
+   */
+  private dataLimits1D(data: number[][]) {
     // Update data limits.
     this.dataLimits = {
       xMin: NaN,
@@ -295,43 +635,36 @@ export class Plot extends polymer.Base {
     this.limits.xMax = isNaN(this.dataLimits.xMax) ? 0 : this.dataLimits.xMax;
     this.limits.yMin = isNaN(this.dataLimits.yMin) ? 0 : this.dataLimits.yMin;
     this.limits.yMax = isNaN(this.dataLimits.yMax) ? 0 : this.dataLimits.yMax;
-
-    for (let i of this.displayTraces) {
-      // Extract data for trace i, starting with the last datapoint to avoid gaps.
-      const traceData = [];
-      if (lastData) {
-        traceData.push([lastData[0], lastData[i+1]]);
-      }
-      for (let row of data) {
-        traceData.push([row[0], row[i+1]]);
-      }
-
-      // Add this trace to the plot.
-      if (traceData.length > 1) {
-        this.chartBody.append('svg:path')
-                .datum(traceData)
-                .attr('stroke', COLOR_LIST[i % COLOR_LIST.length])
-                .attr('stroke-width', 1.5)
-                .attr('fill', 'none')
-                .attr('class', `line${i}`)
-                .attr('d', this.line);
-      }
-    }
   }
 
 
-  private plotData2D(data: number[][], lastData?: number[]) {
-    // Update data limits.
-
+  /**
+   *
+   */
+  private dataLimits2D(data: number[][]) {
+    console.info("dataLimits2D", data.length);
     for (let row of data) {
       let x = row[0];
+      let y = row[1];
+
+      this.dataLimits.xMin = safeMin(this.dataLimits.xMin, x);
+      this.dataLimits.xMax = safeMax(this.dataLimits.xMax, x);
+
+      this.dataLimits.yMin = safeMin(this.dataLimits.yMin, y);
+      this.dataLimits.yMax = safeMax(this.dataLimits.yMax, y);
+
       if (this.x0 === null) {
         this.x0 = x;
       } else if (this.dx0 < 0 && x !== this.x0) {
         this.dx0 = Math.abs(x - this.x0);
       }
-      this.dataLimits.xMin = safeMin(this.dataLimits.xMin, x);
-      this.dataLimits.xMax = safeMax(this.dataLimits.xMax, x);
+
+      if (this.y0 === null) {
+        this.y0 = y;
+      } else if (this.dy0 < 0 && y !== this.y0) {
+        this.dy0 = Math.abs(y - this.y0);
+      }
+
       if (!this.xNext.hasOwnProperty(x)) {
         let xi = insertSorted(this.xs, x);
         let len = this.xs.length;
@@ -346,14 +679,6 @@ export class Plot extends polymer.Base {
         }
       }
 
-      let y = row[1];
-      if (this.y0 === null) {
-        this.y0 = y;
-      } else if (this.dy0 < 0 && y !== this.y0) {
-        this.dy0 = Math.abs(y - this.y0);
-      }
-      this.dataLimits.yMin = safeMin(this.dataLimits.yMin, y);
-      this.dataLimits.yMax = safeMax(this.dataLimits.yMax, y);
       if (!this.yNext.hasOwnProperty(y)) {
         let yi = insertSorted(this.ys, y);
         let len = this.ys.length;
@@ -368,9 +693,9 @@ export class Plot extends polymer.Base {
         }
       }
 
-        let z = row[this.displaySurface];
-        this.dataLimits.zMin = safeMin(this.dataLimits.zMin, z);
-        this.dataLimits.zMax = safeMax(this.dataLimits.zMax, z);
+      let z = row[this.displaySurface];
+      this.dataLimits.zMin = safeMin(this.dataLimits.zMin, z);
+      this.dataLimits.zMax = safeMax(this.dataLimits.zMax, z);
     }
 
     // Update view limits.
@@ -388,194 +713,172 @@ export class Plot extends polymer.Base {
       zMax += 1;
     }
 
-    // Add a dot to the plot.
-    let w = 0,
-        h = 0;
-    const p = this;
-    switch (this.drawMode2D) {
-      case 'dots':
-        w = h = 4;
-        for (let row of data) {
-          this.chartBody
-                .append('rect')
-                .datum(row)
-                .classed('data', true)
-                .attr('x', (d) => p.xScale(d[0]))
-                .attr('y', (d) => p.yScale(d[1]) - h)
-                .attr('width', w)
-                .attr('height', h)
-                .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-        }
-        break;
-
-      case 'rectfill':
-        w = Math.abs(p.xScale(this.dx0) - p.xScale(0));
-        h = Math.abs(p.yScale(this.dy0) - p.yScale(0));
-        for (let row of data) {
-          this.chartBody
-                .append('rect')
-                .datum(row)
-                .classed('data', true)
-                .attr('x', (d) => p.xScale(d[0]))
-                .attr('y', (d) => p.yScale(d[1]) - h)
-                .attr('width', w)
-                .attr('height', h)
-                .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-        }
-        break;
+    this.xScale.domain([this.limits.xMin, this.limits.xMax]);
+    this.yScale.domain([this.limits.yMin, this.limits.yMax]);
+  }
 
-      case 'vargrid':
-        for (let row of data) {
-          this.chartBody
-                .append('rect')
-                .datum(row)
-                .classed('data', true)
-                .attr('x', (d) => p.xScale(d[0]))
-                .attr('y', (d) => p.yScale(p.yNext[d[1]]))
-                .attr('width', (d) => p.xScale(p.xNext[d[0]]) - p.xScale(d[0]))
-                .attr('height', (d) => {
-                  return Math.abs(p.yScale(p.yNext[d[1]]) - p.yScale(d[1]));
-                })
-                .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-        }
-        break;
 
-      default:
-        // Nothing to do.
-        break;
-    }
-  }
 
+  /**
+   * Projects a coordinate in graph coordinates (relative to the axes of the
+   * data) to screen coordinates (relative to the canvas). Additionally
+   * determines the width and height of the coordinate based on its type.
+   */
+  private projectGraphCoordToScreenRect(
+      x: number, y: number,
+      outputObject: {x: number, y: number, w: number, h: number}) {
+    let wScreen, hScreen;
 
-  private installMouseListeners() {
-    if (!this.svg) return;
-    switch (this.mouseMode) {
-      case 'pan':
-        this.svg.on('mousedown', null);
-        this.svg.call(this.zoom);
-        this.$.plot.style.cursor = 'auto';
-        this.$.plot.style.cursor = 'all-scroll';
-        break;
+    switch (this.drawMode2D) {
+    case 'dots':
+      wScreen = this.dotBaseSize * this.dotScaleSize;
+      hScreen = wScreen;
+      break;
 
-      case 'zoomRect':
-        this.svg.on('.zoom', null)
-        this.svg.on('mousedown', () => this.zoomRectangle());
-        this.$.plot.style.cursor = 'auto';
-        this.$.plot.style.cursor = 'crosshair';
-        break;
+    case 'rectfill':
+      wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
+      hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
+      break;
 
-      default:
-        // Nothing to do.
-        break;
+    case 'vargrid':
+      wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
+      hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
+      y = this.yNext[y];
+      break;
     }
-  }
 
+    const xScreen = this.xScale(x) + (wScreen / 2);
+    const yScreen = this.yScale(y) + (hScreen / 2);
 
-  private updatePlotStyles() {
-    if (!this.svg) return;
-    switch (this.numIndeps) {
-      case 1:
-        this.$$('rect.background').style.fill = '#ffffff';
-        this.$.modes2d.style.visibility = 'hidden';
-        this.is1D = true;
-        this.is2D = false;
-        break;
+    outputObject.x = xScreen;
+    outputObject.y = yScreen;
+    outputObject.w = wScreen;
+    outputObject.h = hScreen;
+  }
 
-      case 2:
-        this.$$('rect.background').style.fill = '#222222';
-        this.is1D = false;
-        this.is2D = true;
-        break;
 
-      default:
-        // Nothing to do.
-        break;
-    }
+  /**
+   * Projects a coordinate in screen coordinates (relative to the canvas) to
+   * world coordinates (relative to the 3D projection of the scene).
+   */
+  private projectScreenCoordToWorldCoord(x: number, y: number, outputVector: THREE.Vector3) {
+    outputVector.set((x / this.width) * 2 - 1, -(y / this.height) * 2 + 1, 0.5);
+    outputVector.unproject(this.camera);
   }
 
 
   /**
-   * Destroys and recreates the plot.
+   *
    */
-  redraw(): void {
-    const area = this.$.plot,
-          rect = area.getBoundingClientRect();
-    while (area.firstChild) {
-      area.removeChild(area.firstChild);
+  private projectGraphPositions() {
+    const numVertices = (this.numIndeps == 1 || this.drawMode2D == 'dots') ?
+        3 : this.planeVertexCount;
+
+    // A reusable buffer for manipulating the coordinates of each point.
+    const positionBuffer = new Float32Array(numVertices);
+
+    // Reuse the same vector and object for all coordinate conversions to avoid
+    // generating a large amount of garbage causing GC stalls.
+    const vector = new THREE.Vector3();
+    const screenRect = { x: 0, y: 0, w: 0, h: 0 };
+
+    // Project the (0, 0) screen position to world coordinates so that widths
+    // and heights in world space can be calculated from the delta.
+    this.projectScreenCoordToWorldCoord(0, 0, vector);
+    const {
+      x: xWorldZero,
+      y: yWorldZero
+    } = vector;
+
+    for (let obj of this.sceneObjects) {
+      for (let child of obj.children) {
+        let array = child.geometry.attributes.position.array;
+        let data = child.geometry.attributes.data.array;
+
+        for (let i = 0, len = data.length / 2; i < len; ++i) {
+          const positionOffset = i * numVertices;
+
+          // Convert the graph (x, y) coordinate to screen coordinates.
+          this.projectGraphCoordToScreenRect(data[i * 2], data[i*2+1], screenRect);
+          const {
+            x: xScreen,
+            y: yScreen,
+            w: wScreen,
+            h: hScreen
+          } = screenRect;
+
+          // Convert screen coordinates into world (3D) coordinates.
+          this.projectScreenCoordToWorldCoord(xScreen, yScreen, vector);
+          const {
+            x: xWorld,
+            y: yWorld
+          } = vector;
+
+          if (this.numIndeps == 1 || this.drawMode2D == 'dots') {
+            // When dealing with dots, simply copy the world coordinates
+            // into the position array at the correct offset.
+            array[positionOffset] = xWorld;
+            array[positionOffset + 1] = yWorld;
+          } else {
+            // Project the width and height in screen space to world space,
+            // then calculate the size as a delta from world zero.
+            this.projectScreenCoordToWorldCoord(wScreen, -hScreen, vector);
+            const {
+              x: wWorldEnd,
+              y: hWorldEnd
+            } = vector;
+            const wWorld = wWorldEnd - xWorldZero;
+            const hWorld = hWorldEnd - yWorldZero;
+
+            // Copy the plane vertex positions into the buffer for manipulation
+            positionBuffer.set(this.planeVertexPositions);
+
+            // Scale the plane to world width and height
+            this.transformMatrix.makeScale(wWorld, hWorld, 0);
+            this.transformMatrix.applyToVector3Array(positionBuffer);
+
+            // Move plane to the appropriate position
+            this.transformMatrix.makeTranslation(xWorld, yWorld, 0);
+            this.transformMatrix.applyToVector3Array(positionBuffer);
+
+            // Copy the buffer into the buffer geometry at the correct offset
+            array.set(positionBuffer, positionOffset);
+          }
+        }
+        child.geometry.attributes.position.needsUpdate = true;
+
+        if (this.drawMode2D == 'dots') {
+          this.projectGraphCoordToScreenRect(0, 0, screenRect);
+          const {w: wScreen} = screenRect;
+          this.projectScreenCoordToWorldCoord(wScreen, 0, vector);
+          const {x: wWorldEnd} = vector;
+          const wWorld = wWorldEnd - xWorldZero;
+          child.material.size = wWorld;
+        }
+      }
     }
-    this.createPlot(area,
-                     Math.max(rect.width, 400),
-                     Math.max(rect.height, 400));
-    this.updatePlotStyles();
-    this.plotData(this.data);
-    this.installMouseListeners();
   }
 
 
+  /**
+   *
+   */
   private handleZoom() {
-    // Zoom and pan axes.
     this.svg.select('.x.axis').call(this.xAxis);
     this.svg.select('.y.axis').call(this.yAxis);
-
-    switch (this.numIndeps) {
-      case 1: this.zoomData1D(); break;
-      case 2: this.zoomData2D(); break;
-      default: break; // Nothing to do.
-    }
+    this.projectGraphPositions();
+    this.isZooming = false;
   }
 
 
-  private zoomData1D() {
-    // Adjust data for each trace.
-    for (let k = 0; k < this.numTraces; k++) {
-      this.svg.selectAll(`.line${k}`)
-          .attr('class', `line${k}`)
-          .attr('d', this.line);
-    }
-  }
-
-
-  private zoomData2D() {
-    const zMin = this.dataLimits.zMin,
-          zMax = this.dataLimits.zMax,
-          p = this;
-
-    let w = 0,
-        h = 0;
-    // Adjust size, position, and color of each data rect.
-    switch (this.drawMode2D) {
-    case 'dots':
-      w = 4;
-      h = 4;
-      this.svg.selectAll('rect.data')
-          .attr('x', (d) => p.xScale(d[0]))
-          .attr('y', (d) => p.yScale(d[1]) - h)
-          .attr('width', w)
-          .attr('height', h)
-          .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-      break;
-
-    case 'rectfill':
-      w = Math.abs(p.xScale(this.dx0) - p.xScale(0));
-      h = Math.abs(p.yScale(this.dy0) - p.yScale(0));
-      this.svg.selectAll('rect.data')
-          .attr('x', (d) => p.xScale(d[0]))
-          .attr('y', (d) => p.yScale(d[1]) - h)
-          .attr('width', w)
-          .attr('height', h)
-          .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-      break;
-
-    case 'vargrid':
-      this.svg.selectAll('rect.data')
-          .attr('x', (d) => p.xScale(d[0]))
-          .attr('y', (d) => p.yScale(p.yNext[d[1]]))
-          .attr('width', (d) => p.xScale(p.xNext[d[0]]) - p.xScale(d[0]))
-          .attr('height', (d) => {
-            return Math.abs(p.yScale(p.yNext[d[1]]) - p.yScale(d[1]));
-          })
-          .style('fill', (d) => getColor(d[p.displaySurface], zMin, zMax));
-      break;
+  /**
+   * Queues zoom handling on the next animation frame.
+   */
+  private zoomEventHandler(): void {
+    if (!this.isZooming) {
+      requestAnimationFrame(() => this.handleZoom());
+      this.isZooming = true;
+      this.haveZoomed = true;
     }
   }
 
@@ -641,15 +944,49 @@ export class Plot extends polymer.Base {
   }
 
 
-  private mouseToDataX(x: number): number {
-    x = clip(x - this.margin.left, 0, this.width);
-    return this.xScale.invert(x);
+  /**
+   * Updates the control event listeners depeding on mode.
+   */
+  private updateControlEventListeners() {
+    if (!this.isRendering) {
+      return;
+    }
+    const canvas = d3.select(this.renderer.domElement);
+    switch (this.mouseMode) {
+      case 'pan':
+        canvas.on('mousedown', null);
+        canvas.call(this.zoom);
+        this.$.canvas.style.cursor = 'all-scroll';
+        break;
+
+      case 'zoomRect':
+        canvas.on('.zoom', null)
+        canvas.on('mousedown', () => this.zoomRectangle());
+        this.$.canvas.style.cursor = 'crosshair';
+        break;
+    }
   }
 
 
-  private mouseToDataY(y: number): number {
-    y = clip(y - this.margin.top, 0, this.height);
-    return this.yScale.invert(y);
+  /**
+   * Update plot style depending on number of variables plotted.
+   */
+  private updatePlotStyles() {
+    if (!this.svg) return;
+    switch (this.numIndeps) {
+      case 1:
+        this.$$('rect.background').style.fill = '#ffffff';
+        this.$.modes2d.style.visibility = 'hidden';
+        this.is1D = true;
+        this.is2D = false;
+        break;
+
+      case 2:
+        this.$$('rect.background').style.fill = '#222222';
+        this.is1D = false;
+        this.is2D = true;
+        break;
+    }
   }
 
 
@@ -657,6 +994,7 @@ export class Plot extends polymer.Base {
    * Reset to original window size after zoom-in.
    */
   resetZoom() {
+    this.haveZoomed = false;
     this.xScale.domain([this.limits.xMin, this.limits.xMax]);
     this.yScale.domain([this.limits.yMin, this.limits.yMax]);
     this.xAxis.scale(this.xScale);
@@ -774,7 +1112,7 @@ export class Plot extends polymer.Base {
       this.displaySurface = this.displayTraces[0] + 2;
       this.$.traceSelector.close();
       this.userTraces = true;
-      this.redraw();
+      this.redrawScene(false);
     }
   }
 
@@ -812,12 +1150,12 @@ export class Plot extends polymer.Base {
         // Nothing to do.
         break;
     }
-    this.installMouseListeners();
+    this.updateControlEventListeners();
   }
 
 
   @observe('drawMode2D')
-  private observeDrawMode2D(newMode: string, oldMode: string) {
+  private observeDrawMode2D(newMode: string) {
     switch (newMode) {
       case 'dots':
         this.$.dots.style.color = 'black';
@@ -841,8 +1179,10 @@ export class Plot extends polymer.Base {
         // Nothing to do.
         break;
     }
-    if (oldMode && newMode !== oldMode) {
-      setTimeout(() => this.handleZoom(), 0);
+
+    // Points and square differences require a complete recreation of the data.
+    if (this.isRendering) {
+      this.redrawScene(false);
     }
   }
 
@@ -854,18 +1194,23 @@ export class Plot extends polymer.Base {
 
 
   @listen('plot.mousemove')
-  private listenPlotMouseMove(event) {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const xMin = this.xScale.invert(0),
-          xMax = this.xScale.invert(this.width),
-          yMin = this.yScale.invert(this.height),
-          yMax = this.yScale.invert(0),
-          dx = (xMax - xMin) / this.width,
-          dy = (yMax - yMin) / this.height,
-          x = this.mouseToDataX(event.pageX - rect.left),
-          y = this.mouseToDataY(event.pageY - rect.top),
-          xStr = prettyNumber(x, xMin, xMax, dx),
-          yStr = prettyNumber(y, yMin, yMax, dy);
+  private listenPlotMouseMove(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+
+    const xMouseScreen = e.pageX - rect.left;
+    const yMouseScreen = e.pageY - rect.top;
+    const xMouseGraph = this.xScale.invert(clip(xMouseScreen, 0, this.width));
+    const yMouseGraph = this.yScale.invert(clip(yMouseScreen, 0, this.height));
+
+    const xMin = this.xScale.invert(0);
+    const xMax = this.xScale.invert(this.width);
+    const yMin = this.yScale.invert(this.height);
+    const yMax = this.yScale.invert(0);
+    const dx = (xMax - xMin) / this.width;
+    const dy = (yMax - yMin) / this.height;
+
+    const xStr = prettyNumber(xMouseGraph, xMin, xMax, dx);
+    const yStr = prettyNumber(yMouseGraph, yMin, yMax, dy);
 
     this.currPos = `(${xStr}, ${yStr})`;
   }
@@ -945,7 +1290,6 @@ function clip(x: number, xMin: number, xMax: number): number {
   return Math.max(xMin, Math.min(xMax, x));
 }
 
-
 function insertInRange(
     xs: number[], x: number, lh: number, rh: number): number {
   const m = lh + Math.floor((rh - lh)/2);
@@ -968,7 +1312,6 @@ function insertInRange(
   }
 }
 
-
 function insertSorted(xs: number[], x: number): number {
   const len = xs.length;
   if (len === 0) {
diff --git a/client-js/app/scripts/activities.ts b/client-js/app/scripts/activities.ts
index aeb9cbf..6238f2c 100644
--- a/client-js/app/scripts/activities.ts
+++ b/client-js/app/scripts/activities.ts
@@ -232,7 +232,7 @@ export class DatavaultLiveActivity implements Activity {
     // resize all plots to ensure they fit the view.
     if (this.activities.length <= 3) {
       for (const activity of this.activities) {
-        activity.plot.redraw();
+        activity.plot.redrawScene();
       }
     }
 
diff --git a/client-js/gulpfile.js b/client-js/gulpfile.js
index 67cf842..b235a2a 100644
--- a/client-js/gulpfile.js
+++ b/client-js/gulpfile.js
@@ -26,7 +26,7 @@ var minimist = require('minimist');
 
 var knownOptions = {
   string: 'api-host',
-  default: { 
+  default: {
     'api-host': 'localhost:7667'
   }
 };

From 39ff547dff90b54f98973b75686b299b0ea1feb4 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 11:12:55 -0700
Subject: [PATCH 02/34] Fixed color bar when plot resizes

---
 client-js/app/elements/labrad-plot.ts | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index d3837a7..204ad7b 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -478,6 +478,7 @@ export class Plot extends polymer.Base {
       // Color Bar Rectangle
       const colorBarOffset = width + COLOR_BAR_LEFT_MARGIN;
       p.svg.append('rect')
+             .attr('id', 'color-bar')
              .attr('fill', gradientFill)
              .attr('transform', `translate(${colorBarOffset}, 0)`)
              .attr('width', COLOR_BAR_WIDTH)
@@ -488,6 +489,7 @@ export class Plot extends polymer.Base {
       // Z-axis ticks and label.
       const zAxisOffset = width + COLOR_BAR_LEFT_MARGIN + COLOR_BAR_WIDTH + COLOR_BAR_RIGHT_MARGIN;
       p.svg.append('g')
+             .attr('id', 'color-bar-ticks')
              .attr('class', 'z axis')
              .attr('transform', `translate(${zAxisOffset}, 0)`)
              .call(p.zAxis);
@@ -525,6 +527,7 @@ export class Plot extends polymer.Base {
 
     this.xScale.range([0, this.width]);
     this.yScale.range([this.height, 0]);
+    this.zScale.range([this.height, 0]);
 
     this.xAxis.scale(this.xScale)
            .tickSize(-this.height);
@@ -533,6 +536,8 @@ export class Plot extends polymer.Base {
         .scale(this.yScale)
         .tickSize(-this.width);
 
+    this.zAxis.scale(this.zScale);
+
     this.line
         .x((d) => this.xScale(d[0]))
         .y((d) => this.yScale(d[1]));
@@ -540,10 +545,6 @@ export class Plot extends polymer.Base {
     this.zoom.x(this.xScale)
           .y(this.yScale);
 
-    d3.select('#svgplot')
-        .attr('width', plotWidth)
-        .attr('height', plotHeight)
-
     this.svg.select('#rect')
         .attr('width', this.width)
         .attr('height', this.height);
@@ -560,6 +561,18 @@ export class Plot extends polymer.Base {
     this.svg.select('#y-label')
         .attr('x', -(this.height / 2))
         .attr('y', -this.margin.left);
+
+    // Color Bar Rectangle
+    const colorBarOffset = this.width + COLOR_BAR_LEFT_MARGIN;
+    this.svg.select('#color-bar')
+        .attr('height', this.height)
+        .attr('transform', `translate(${colorBarOffset}, 0)`);
+
+    // Z-axis ticks and label.
+    const zAxisOffset = this.width + COLOR_BAR_LEFT_MARGIN + COLOR_BAR_WIDTH + COLOR_BAR_RIGHT_MARGIN;
+    this.svg.select('#color-bar-ticks')
+        .attr('transform', `translate(${zAxisOffset}, 0)`)
+        .call(this.zAxis);
   }
 
 

From 70332577d14758a69dcfa010af9c3fe1fa658c76 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 11:28:13 -0700
Subject: [PATCH 03/34] Moved all sizing code from initialization into just
 resize

---
 client-js/app/elements/labrad-plot.ts | 105 ++++++++++----------------
 1 file changed, 38 insertions(+), 67 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 204ad7b..5c14282 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -338,46 +338,29 @@ export class Plot extends polymer.Base {
    */
   private initializeSVGPlot(): void {
     const p = this;
-    const plot = p.$.plot;
-    const plotBounds = plot.getBoundingClientRect();
-    const totWidth = Math.max(plotBounds.width, 400);
-    const totHeight = Math.max(plotBounds.height, 400);
 
     // Make room for the color bar if necessary.
     if (p.numIndeps == 2) {
       p.margin.right = PLOT_RIGHT_MARGIN + COLOR_BAR_WIDGET_SIZE;
     }
 
-    const width = totWidth - p.margin.left - p.margin.right;
-    const height = totHeight - p.margin.top - p.margin.bottom;
-
-    p.width = width;
-    p.height = height;
-
     p.xScale = d3.scale.linear()
-            .domain([p.limits.xMin, p.limits.xMax])
-            .range([0, width]);
+            .domain([p.limits.xMin, p.limits.xMax]);
 
     p.yScale = d3.scale.linear()
-            .domain([p.limits.yMin, p.limits.yMax])
-            .range([height, 0]);
+            .domain([p.limits.yMin, p.limits.yMax]);
 
     p.zScale = d3.scale.linear()
-            .domain([0, 1])
-            .range([height, 0]);
+            .domain([0, 1]);
 
     p.xAxis = d3.svg.axis()
-            .scale(p.xScale)
-            .orient('bottom')
-            .tickSize(-height);
+            .orient('bottom');
 
     const yAxisFormatter = d3.format('.5g');
-
     p.yAxis = d3.svg.axis()
-            .scale(p.yScale)
             .orient('left')
             .ticks(5)
-            .tickSize(-width)
+            .tickSize(-p.width)
             .tickFormat((d) => yAxisFormatter(d));
 
     p.line = d3.svg.line()
@@ -392,7 +375,7 @@ export class Plot extends polymer.Base {
     // Plot area.
     const marginLeft = p.margin.left;
     const marginTop = p.margin.top;
-    p.svg = d3.select(plot)
+    p.svg = d3.select(p.$.plot)
               .append('svg:svg')
                 .attr('id', 'svgplot')
                 .attr('class', 'flex')
@@ -406,33 +389,24 @@ export class Plot extends polymer.Base {
             .attr('id', 'rect')
             .attr('stroke', 'black')
             .attr('stroke-width', 1)
-            .attr('width', width)
-            .attr('height', height)
             .style('fill', '#222222');
 
     // X-axis ticks and label.
     p.svg.append('g')
             .attr('id', 'x-axis')
-            .attr('class', 'x axis')
-            .attr('transform', `translate(0, ${height})`)
-            .call(p.xAxis);
+            .attr('class', 'x axis');
     p.svg.append('text')
             .attr('id', 'x-label')
-            .attr('transform',
-                  `translate(${width / 2}, ${height + p.margin.bottom - 10})`)
             .style('text-anchor', 'middle')
             .text(this.xLabel);
 
     // Y-axis ticks and label.
     p.svg.append('g')
             .attr('id', 'y-axis')
-            .attr('class', 'y axis')
-            .call(p.yAxis);
+            .attr('class', 'y axis');
     p.svg.append('text')
             .attr('id', 'y-label')
             .attr('transform', 'rotate(-90)')
-            .attr('y', 0 - p.margin.left)
-            .attr('x', 0 - (height / 2))
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
             .text(this.yLabel);
@@ -440,8 +414,7 @@ export class Plot extends polymer.Base {
     // Color Bar Axis
     if (this.numIndeps == 2) {
       p.zAxis = d3.svg.axis();
-      p.zAxis.scale(p.zScale)
-             .orient('right')
+      p.zAxis.orient('right')
              .ticks(COLOR_BAR_NUM_TICKS)
              .tickSize(5);
 
@@ -476,23 +449,17 @@ export class Plot extends polymer.Base {
       const gradientFill = `url('${location.href}#ColorBarGradient')`;
 
       // Color Bar Rectangle
-      const colorBarOffset = width + COLOR_BAR_LEFT_MARGIN;
       p.svg.append('rect')
              .attr('id', 'color-bar')
              .attr('fill', gradientFill)
-             .attr('transform', `translate(${colorBarOffset}, 0)`)
              .attr('width', COLOR_BAR_WIDTH)
-             .attr('height', height)
              .attr('stroke', '#000000')
              .attr('stroke-width', COLOR_BAR_STROKE_WIDTH);
 
       // Z-axis ticks and label.
-      const zAxisOffset = width + COLOR_BAR_LEFT_MARGIN + COLOR_BAR_WIDTH + COLOR_BAR_RIGHT_MARGIN;
       p.svg.append('g')
              .attr('id', 'color-bar-ticks')
-             .attr('class', 'z axis')
-             .attr('transform', `translate(${zAxisOffset}, 0)`)
-             .call(p.zAxis);
+             .attr('class', 'z axis');
     }
 
     this.updatePlotStyles();
@@ -530,49 +497,53 @@ export class Plot extends polymer.Base {
     this.zScale.range([this.height, 0]);
 
     this.xAxis.scale(this.xScale)
-           .tickSize(-this.height);
+              .tickSize(-this.height);
 
-    this.yAxis
-        .scale(this.yScale)
-        .tickSize(-this.width);
+    this.yAxis.scale(this.yScale)
+              .tickSize(-this.width);
 
     this.zAxis.scale(this.zScale);
 
-    this.line
-        .x((d) => this.xScale(d[0]))
-        .y((d) => this.yScale(d[1]));
+    this.line.x((d) => this.xScale(d[0]))
+             .y((d) => this.yScale(d[1]));
 
     this.zoom.x(this.xScale)
-          .y(this.yScale);
+             .y(this.yScale);
 
     this.svg.select('#rect')
-        .attr('width', this.width)
-        .attr('height', this.height);
+              .attr('width', this.width)
+              .attr('height', this.height);
 
     this.svg.select('#x-axis')
-        .attr('transform', `translate(0, ${this.height})`)
-        .call(this.xAxis);
+              .attr('transform', `translate(0, ${this.height})`)
+              .call(this.xAxis);
 
+    const xLabXOffset = this.width / 2;
+    const xLabYOffset = this.height + this.margin.bottom - 10;
     this.svg.select('#x-label')
-        .attr('transform', `translate(${this.width / 2}, ${this.height + this.margin.bottom - 10})`);
+              .attr('transform', `translate(${xLabXOffset}, ${xLabYOffset})`);
 
-    this.svg.select("#y-axis").call(this.yAxis);
+    this.svg.select("#y-axis")
+              .call(this.yAxis);
 
     this.svg.select('#y-label')
-        .attr('x', -(this.height / 2))
-        .attr('y', -this.margin.left);
+              .attr('x', -(this.height / 2))
+              .attr('y', -this.margin.left);
 
-    // Color Bar Rectangle
+    // Color Bar Rectangle.
     const colorBarOffset = this.width + COLOR_BAR_LEFT_MARGIN;
     this.svg.select('#color-bar')
-        .attr('height', this.height)
-        .attr('transform', `translate(${colorBarOffset}, 0)`);
-
-    // Z-axis ticks and label.
-    const zAxisOffset = this.width + COLOR_BAR_LEFT_MARGIN + COLOR_BAR_WIDTH + COLOR_BAR_RIGHT_MARGIN;
+              .attr('height', this.height)
+              .attr('transform', `translate(${colorBarOffset}, 0)`);
+
+    // Color Bar Ticks and Label.
+    const zAxisXOffset = (this.width
+                         + COLOR_BAR_LEFT_MARGIN
+                         + COLOR_BAR_WIDTH
+                         + COLOR_BAR_RIGHT_MARGIN);
     this.svg.select('#color-bar-ticks')
-        .attr('transform', `translate(${zAxisOffset}, 0)`)
-        .call(this.zAxis);
+              .attr('transform', `translate(${zAxisXOffset}, 0)`)
+              .call(this.zAxis);
   }
 
 

From 8024f8235c3acbcef85c63f8343e1a37c99e42f1 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 11:45:49 -0700
Subject: [PATCH 04/34] Code cleanup

---
 client-js/app/elements/labrad-plot.ts | 45 +++++++++++++++++----------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 5c14282..269f0bd 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -98,12 +98,14 @@ export class Plot extends polymer.Base {
   private zScale: any;
   private line: any;
   private zoom: any;
+
   private limits = {
     xMin: 0,
     xMax: 1,
     yMin: 0,
     yMax: 1
   };
+
   private dataLimits = {
     xMin: NaN,
     xMax: NaN,
@@ -112,6 +114,7 @@ export class Plot extends polymer.Base {
     zMin: NaN,
     zMax: NaN
   };
+
   private margin = {
     top: PLOT_TOP_MARGIN,
     right: PLOT_RIGHT_MARGIN,
@@ -134,9 +137,9 @@ export class Plot extends polymer.Base {
   private dy0: number = -1;
   private displayTraces: number[];
   private allOrNone: boolean = true;
-  private displaySurface: number = 2;
   private is1D: boolean;
   private is2D: boolean;
+  private displaySurface: number = 2;
 
 
   /**
@@ -166,7 +169,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * The number of vertices in a plane geometry.
+   * A short-hand to access the positions array in a unit plane.
    */
   private planeVertexPositions =
       this.planeUnitGeometry.attributes.position.array;
@@ -178,19 +181,27 @@ export class Plot extends polymer.Base {
   private planeVertexCount = this.planeVertexPositions.length;
 
 
+  /**
+   * The default options for the plotting camera.
+   */
   private cameraOpts = {
     /** The field of view of the camera. */
     fov: 45,
+
     /** The initial aspect ratio of the camera. */
     aspect: 1,
+
     /** The near plane of the camera. */
     near: -500,
+
     /** The far plane of the camera. */
     far: 500,
+
     /** The starting position of the camera. */
     startingPosition: new THREE.Vector3(0, 0, 1000)
   };
 
+
   /**
    * A perspective camera to view the graph.
    *
@@ -214,15 +225,15 @@ export class Plot extends polymer.Base {
   /** A list of objects in the scene. */
   private sceneObjects = [];
 
+  /** If the scene render loop has been started. */
+  private isRendering: boolean = false;
+
   /** If a zoom in or out is taking place. */
   private isZooming = false;
 
   /** If we have ever zoomed since last resetting the zoom level. */
   private haveZoomed: boolean = false;
 
-  /** If the scene render loop has been started. */
-  private isRendering: boolean = false;
-
 
   /**
    * Add new data to the plot and re-zoom.
@@ -1276,20 +1287,20 @@ export class Plot extends polymer.Base {
   private listenPlotMouseMove(e) {
     const rect = e.currentTarget.getBoundingClientRect();
 
-    const xMouseScreen = e.pageX - rect.left;
-    const yMouseScreen = e.pageY - rect.top;
-    const xMouseGraph = this.xScale.invert(clip(xMouseScreen, 0, this.width));
-    const yMouseGraph = this.yScale.invert(clip(yMouseScreen, 0, this.height));
+    const xMouseScreen = e.pageX - rect.left,
+          yMouseScreen = e.pageY - rect.top,
+          xMouseGraph = this.xScale.invert(clip(xMouseScreen, 0, this.width)),
+          yMouseGraph = this.yScale.invert(clip(yMouseScreen, 0, this.height));
 
-    const xMin = this.xScale.invert(0);
-    const xMax = this.xScale.invert(this.width);
-    const yMin = this.yScale.invert(this.height);
-    const yMax = this.yScale.invert(0);
-    const dx = (xMax - xMin) / this.width;
-    const dy = (yMax - yMin) / this.height;
+    const xMin = this.xScale.invert(0),
+          xMax = this.xScale.invert(this.width),
+          yMin = this.yScale.invert(this.height),
+          yMax = this.yScale.invert(0),
+          dx = (xMax - xMin) / this.width,
+          dy = (yMax - yMin) / this.height;
 
-    const xStr = prettyNumber(xMouseGraph, xMin, xMax, dx);
-    const yStr = prettyNumber(yMouseGraph, yMin, yMax, dy);
+    const xStr = prettyNumber(xMouseGraph, xMin, xMax, dx),
+          yStr = prettyNumber(yMouseGraph, yMin, yMax, dy);
 
     this.currPos = `(${xStr}, ${yStr})`;
   }

From e795ebb1c6065398e62d6d5fb469397c14e2c4e3 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 12:17:28 -0700
Subject: [PATCH 05/34] Fixed limits to prevent zoom reset when changing 2D
 modes

---
 client-js/app/elements/labrad-plot.ts | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 269f0bd..603aeb7 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -673,9 +673,7 @@ export class Plot extends polymer.Base {
     geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
     geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
 
-    let material;
-    let mesh;
-
+    let material, mesh;
     if (this.drawMode2D == 'dots') {
       material = new THREE.PointsMaterial({size: 1, vertexColors: THREE.VertexColors});
       mesh = new THREE.Points(geometry, material);
@@ -792,20 +790,9 @@ export class Plot extends polymer.Base {
     this.limits.yMin = isNaN(this.dataLimits.yMin) ? 0 : this.dataLimits.yMin;
     this.limits.yMax = isNaN(this.dataLimits.yMax + this.dy) ?
         0 : this.dataLimits.yMax + this.dy;
-
-    let zMin = this.dataLimits.zMin,
-        zMax = this.dataLimits.zMax;
-    if (zMin === zMax) {
-      zMin -= 1;
-      zMax += 1;
-    }
-
-    this.xScale.domain([this.limits.xMin, this.limits.xMax]);
-    this.yScale.domain([this.limits.yMin, this.limits.yMax]);
   }
 
 
-
   /**
    * Projects a coordinate in graph coordinates (relative to the axes of the
    * data) to screen coordinates (relative to the canvas). Additionally

From 245c8dadb66c77a91fdcc11a8bec0d8499bd68a7 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 12:20:59 -0700
Subject: [PATCH 06/34] Fixed errors when rendering 1D plots due to no zAxis

---
 client-js/app/elements/labrad-plot.ts | 40 +++++++++++++++------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 603aeb7..68ab454 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -513,8 +513,6 @@ export class Plot extends polymer.Base {
     this.yAxis.scale(this.yScale)
               .tickSize(-this.width);
 
-    this.zAxis.scale(this.zScale);
-
     this.line.x((d) => this.xScale(d[0]))
              .y((d) => this.yScale(d[1]));
 
@@ -541,20 +539,24 @@ export class Plot extends polymer.Base {
               .attr('x', -(this.height / 2))
               .attr('y', -this.margin.left);
 
-    // Color Bar Rectangle.
-    const colorBarOffset = this.width + COLOR_BAR_LEFT_MARGIN;
-    this.svg.select('#color-bar')
-              .attr('height', this.height)
-              .attr('transform', `translate(${colorBarOffset}, 0)`);
-
-    // Color Bar Ticks and Label.
-    const zAxisXOffset = (this.width
-                         + COLOR_BAR_LEFT_MARGIN
-                         + COLOR_BAR_WIDTH
-                         + COLOR_BAR_RIGHT_MARGIN);
-    this.svg.select('#color-bar-ticks')
-              .attr('transform', `translate(${zAxisXOffset}, 0)`)
-              .call(this.zAxis);
+    if (this.numIndeps == 2) {
+      this.zAxis.scale(this.zScale);
+
+      // Color Bar Rectangle.
+      const colorBarOffset = this.width + COLOR_BAR_LEFT_MARGIN;
+      this.svg.select('#color-bar')
+                .attr('height', this.height)
+                .attr('transform', `translate(${colorBarOffset}, 0)`);
+
+      // Color Bar Ticks and Label.
+      const zAxisXOffset = (this.width
+                          + COLOR_BAR_LEFT_MARGIN
+                          + COLOR_BAR_WIDTH
+                          + COLOR_BAR_RIGHT_MARGIN);
+      this.svg.select('#color-bar-ticks')
+                .attr('transform', `translate(${zAxisXOffset}, 0)`)
+                .call(this.zAxis);
+    }
   }
 
 
@@ -1075,9 +1077,13 @@ export class Plot extends polymer.Base {
     this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
     this.xAxis.scale(this.xScale);
     this.yAxis.scale(this.yScale);
-    this.zAxis.scale(this.zScale);
     this.zoom.x(this.xScale);
     this.zoom.y(this.yScale);
+
+    if (this.numIndeps == 2) {
+      this.zAxis.scale(this.zScale);
+    }
+
     this.handleZoom();
   }
 

From fcfb30ad7ab28e72a1974a9aebaa95defd95c90d Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 13:12:15 -0700
Subject: [PATCH 07/34] Removed extraneous paramter to redrawScene and restored
 public status

---
 client-js/app/elements/labrad-plot.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 68ab454..45a0dac 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -317,18 +317,14 @@ export class Plot extends polymer.Base {
   /**
    * Deletes all objects from the scene and re-plots the data.
    */
-  private redrawScene(resetZoom: boolean): void {
+  redrawScene(): void {
     this.lastData = null;
     for (let obj of this.sceneObjects) {
       this.scene.remove(obj);
     }
     this.sceneObjects = [];
     this.plotData(this.data);
-    if (resetZoom) {
-      this.resetZoom();
-    } else {
-      this.projectGraphPositions();
-    }
+    this.projectGraphPositions();
   }
 
 
@@ -381,7 +377,7 @@ export class Plot extends polymer.Base {
     p.zoom = d3.behavior.zoom()
             .x(p.xScale)
             .y(p.yScale)
-            .on('zoom', (e) => p.zoomEventHandler());
+            .on('zoom', () => p.zoomEventHandler());
 
     // Plot area.
     const marginLeft = p.margin.left;
@@ -1195,7 +1191,7 @@ export class Plot extends polymer.Base {
       this.displaySurface = this.displayTraces[0] + 2;
       this.$.traceSelector.close();
       this.userTraces = true;
-      this.redrawScene(false);
+      this.redrawScene();
     }
   }
 
@@ -1265,7 +1261,7 @@ export class Plot extends polymer.Base {
 
     // Points and square differences require a complete recreation of the data.
     if (this.isRendering) {
-      this.redrawScene(false);
+      this.redrawScene();
     }
   }
 

From 9c47a0609017718d377cf91537a9fe621abf5d69 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 13:13:42 -0700
Subject: [PATCH 08/34] Changed all this calls to p inside initializeSVGPlot
 for consistency

---
 client-js/app/elements/labrad-plot.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 45a0dac..e425070 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -318,11 +318,12 @@ export class Plot extends polymer.Base {
    * Deletes all objects from the scene and re-plots the data.
    */
   redrawScene(): void {
-    this.lastData = null;
     for (let obj of this.sceneObjects) {
       this.scene.remove(obj);
     }
     this.sceneObjects = [];
+
+    this.lastData = null;
     this.plotData(this.data);
     this.projectGraphPositions();
   }
@@ -405,7 +406,7 @@ export class Plot extends polymer.Base {
     p.svg.append('text')
             .attr('id', 'x-label')
             .style('text-anchor', 'middle')
-            .text(this.xLabel);
+            .text(p.xLabel);
 
     // Y-axis ticks and label.
     p.svg.append('g')
@@ -416,10 +417,10 @@ export class Plot extends polymer.Base {
             .attr('transform', 'rotate(-90)')
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
-            .text(this.yLabel);
+            .text(p.yLabel);
 
     // Color Bar Axis
-    if (this.numIndeps == 2) {
+    if (p.numIndeps == 2) {
       p.zAxis = d3.svg.axis();
       p.zAxis.orient('right')
              .ticks(COLOR_BAR_NUM_TICKS)
@@ -469,8 +470,8 @@ export class Plot extends polymer.Base {
              .attr('class', 'z axis');
     }
 
-    this.updatePlotStyles();
-    this.updateControlEventListeners();
+    p.updatePlotStyles();
+    p.updateControlEventListeners();
   }
 
 

From 0ed4446c48f6db0ec5efe589542a9d483947c741 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 13:16:07 -0700
Subject: [PATCH 09/34] Removed dotScaleSize as it was added to allow a scaling
 UI, but this feature is beyond this PR

---
 client-js/app/elements/labrad-plot.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index e425070..919c777 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -148,12 +148,6 @@ export class Plot extends polymer.Base {
   private dotBaseSize: number = 4;
 
 
-  /**
-   * The scaling factor to apply to a point of data in `dots` viewing mode.
-   */
-  private dotScaleSize: number = 1;
-
-
   /**
    * A matrix for the use in transforming geometries.
    */
@@ -804,7 +798,7 @@ export class Plot extends polymer.Base {
 
     switch (this.drawMode2D) {
     case 'dots':
-      wScreen = this.dotBaseSize * this.dotScaleSize;
+      wScreen = this.dotBaseSize;
       hScreen = wScreen;
       break;
 

From 77a6fe435e481ee0cd840f47a7671b33aac10e88 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 13:34:00 -0700
Subject: [PATCH 10/34] Put extraneous space back into gulpfile to avoid
 touching more files in one PR than necessary.

---
 client-js/gulpfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client-js/gulpfile.js b/client-js/gulpfile.js
index b235a2a..67cf842 100644
--- a/client-js/gulpfile.js
+++ b/client-js/gulpfile.js
@@ -26,7 +26,7 @@ var minimist = require('minimist');
 
 var knownOptions = {
   string: 'api-host',
-  default: {
+  default: { 
     'api-host': 'localhost:7667'
   }
 };

From 19b0d390ae35c50f3bd4844a45ba288fee3fbfed Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 16:25:19 -0700
Subject: [PATCH 11/34] Converted numVertices to actually be a number of
 vertices, rather than a number of points to represent all the vertices

---
 client-js/app/elements/labrad-plot.ts | 38 ++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 919c777..00845ab 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -172,7 +172,7 @@ export class Plot extends polymer.Base {
   /**
    * The number of vertices in a plane geometry.
    */
-  private planeVertexCount = this.planeVertexPositions.length;
+  private planeVertexCount = this.planeVertexPositions.length / 3;
 
 
   /**
@@ -640,11 +640,11 @@ export class Plot extends polymer.Base {
     const zMin = this.dataLimits.zMin;
     const zMax = this.dataLimits.zMax;
     const numVertices = (this.drawMode2D == 'dots') ?
-        3 : this.planeVertexCount;
+        1 : this.planeVertexCount;
 
-    const positions = new Float32Array(data.length * numVertices);
+    const positions = new Float32Array(data.length * numVertices * 3);
     const dataPoints = new Float64Array(data.length * 2);
-    const colors = new Float32Array(data.length * numVertices);
+    const colors = new Float32Array(data.length * numVertices * 3);
 
     for (let i = 0, len = data.length; i < len; ++i) {
       const row = data[i];
@@ -653,8 +653,9 @@ export class Plot extends polymer.Base {
       dataPoints[i * 2] = row[0];
       dataPoints[i * 2 + 1] = row[1];
 
-      const index = i * numVertices;
-      for (let j = 0; j < numVertices; j += 3) {
+      const numColorVals = numVertices * 3;
+      const index = i * numColorVals;
+      for (let j = 0; j < numColorVals; j += 3) {
         colors[index + j] = color.r / 255;
         colors[index + j + 1] = color.g / 255;
         colors[index + j + 2] = color.b / 255;
@@ -835,14 +836,29 @@ export class Plot extends polymer.Base {
 
 
   /**
+   * Projects all graph data according to the latest zoom level.
    *
+   * Due to the separation of each plot into a WebGL and SVG component, the
+   * zoom/pan of the d3 axes needs to lead to the updating of the WebGL
+   * display.
+   *
+   * Each object in the scene is iterated, its original graph data position is
+   * extracted and then reprojected to the correct position in WebGL (world)
+   * space.
+   *
+   * There are three primary coordinate systems:
+   * 1) Graph Space. The position of the data to be plotted in the graph.
+   * 2) Screen Space. The position relative to the plot on screen.
+   * 3) World Space. The position of the item in the 3D WebGL projected world.
    */
   private projectGraphPositions() {
+    // When plotting lines or single points, we only need one vertex to
+    // represent the data.
     const numVertices = (this.numIndeps == 1 || this.drawMode2D == 'dots') ?
-        3 : this.planeVertexCount;
+        1 : this.planeVertexCount;
 
     // A reusable buffer for manipulating the coordinates of each point.
-    const positionBuffer = new Float32Array(numVertices);
+    const positionBuffer = new Float32Array(numVertices * 3);
 
     // Reuse the same vector and object for all coordinate conversions to avoid
     // generating a large amount of garbage causing GC stalls.
@@ -863,7 +879,7 @@ export class Plot extends polymer.Base {
         let data = child.geometry.attributes.data.array;
 
         for (let i = 0, len = data.length / 2; i < len; ++i) {
-          const positionOffset = i * numVertices;
+          const positionOffset = i * numVertices * 3;
 
           // Convert the graph (x, y) coordinate to screen coordinates.
           this.projectGraphCoordToScreenRect(data[i * 2], data[i*2+1], screenRect);
@@ -928,7 +944,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Updates axes and reprojects all data to reflect the new zoom level.
    */
   private handleZoom() {
     this.svg.select('.x.axis').call(this.xAxis);
@@ -1364,6 +1380,7 @@ function clip(x: number, xMin: number, xMax: number): number {
   return Math.max(xMin, Math.min(xMax, x));
 }
 
+
 function insertInRange(
     xs: number[], x: number, lh: number, rh: number): number {
   const m = lh + Math.floor((rh - lh)/2);
@@ -1386,6 +1403,7 @@ function insertInRange(
   }
 }
 
+
 function insertSorted(xs: number[], x: number): number {
   const len = xs.length;
   if (len === 0) {

From 0f1aa1a8a079a398fa26e1d861946944aeeeedfc Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 16:26:27 -0700
Subject: [PATCH 12/34] Clarifying comments

---
 client-js/app/elements/labrad-plot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 00845ab..909341c 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -930,6 +930,8 @@ export class Plot extends polymer.Base {
         }
         child.geometry.attributes.position.needsUpdate = true;
 
+        // If we are drawing dots, we need to scale them so they are a constant
+        // size relative to the screen regardless of zoom level.
         if (this.drawMode2D == 'dots') {
           this.projectGraphCoordToScreenRect(0, 0, screenRect);
           const {w: wScreen} = screenRect;

From 8dad16b5f3e002a11184bcdc1685ecbcfcebd86b Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Mon, 11 Jul 2016 19:09:42 -0700
Subject: [PATCH 13/34] Fixed mistakes

---
 client-js/app/elements/labrad-plot.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 909341c..11ffcd1 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -552,7 +552,8 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Filter the traces and then generate the data appropriate for the given
+   * plot type.
    */
   private plotData(data: number[][]) {
     if (data.length === 0) return;
@@ -587,7 +588,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Generate the geometries and materials for a 1D plot.
    */
   private plotData1D(data: number[][]) {
     this.dataLimits1D(data);
@@ -619,9 +620,11 @@ export class Plot extends polymer.Base {
         geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
         geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
 
-        let material = new THREE.LineBasicMaterial({color: COLOR_LIST[i % COLOR_LIST.length]});
+        let material = new THREE.LineBasicMaterial({
+          color: COLOR_LIST[i % COLOR_LIST.length],
+          linewidth: 1.5
+        });
         let mesh = new THREE.Line(geometry, material);
-        // TODO [awhiteside]: Increase line width to retain parity with SVG
         ob.add(mesh);
       }
     }
@@ -632,7 +635,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Generate the geometries and materials for a 2D plot.
    */
   private plotData2D(data: number[][]) {
     this.dataLimits2D(data);
@@ -685,7 +688,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Set the bounds for a 1D plot.
    */
   private dataLimits1D(data: number[][]) {
     // Update data limits.
@@ -718,7 +721,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   *
+   * Set the bounds for a 2D plot.
    */
   private dataLimits2D(data: number[][]) {
     console.info("dataLimits2D", data.length);

From a5e2f15a7fdfa0ad94c97fe459e67298e5ffabbb Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 12:01:53 -0700
Subject: [PATCH 14/34] Response to comments.

---
 client-js/app/elements/labrad-plot.ts | 163 ++++++++++++++------------
 1 file changed, 90 insertions(+), 73 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 11ffcd1..d449fc6 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -10,7 +10,20 @@ const THREE = three.default;
 
 
 /**
- * Mouse Constants
+ * Plot Constants.
+ */
+const PLOT_MIN_WIDTH = 400;
+const PLOT_MIN_HEIGHT = 400;
+const PLOT_LEFT_MARGIN = 120;
+const PLOT_RIGHT_MARGIN = 10;
+const PLOT_TOP_MARGIN = 50;
+const PLOT_BOTTOM_MARGIN = 50;
+const PLOT_LINE_WIDTH = 1.5;
+const PLOT_POINT_SIZE = 10;
+
+
+/**
+ * Mouse Constants.
  */
 const MOUSE_MAIN_BUTTON = 0;
 
@@ -41,6 +54,9 @@ const COLOR_MAP = viridisData.map((rgb) => {
 });
 
 
+/**
+ * Color Bar Constants
+ */
 const COLOR_BAR_NUM_TICKS = 10;
 const COLOR_BAR_WIDTH = 15;
 const COLOR_BAR_LEFT_MARGIN = 15;
@@ -54,10 +70,6 @@ const COLOR_BAR_WIDGET_SIZE = (
    COLOR_BAR_OUTER_WIDTH + COLOR_BAR_AXIS_WIDTH
 );
 
-const PLOT_LEFT_MARGIN = 120;
-const PLOT_RIGHT_MARGIN = 10;
-const PLOT_TOP_MARGIN = 50;
-const PLOT_BOTTOM_MARGIN = 50;
 
 @component('labrad-plot')
 export class Plot extends polymer.Base {
@@ -142,12 +154,6 @@ export class Plot extends polymer.Base {
   private displaySurface: number = 2;
 
 
-  /**
-   * The base size of a point of data when in `dots` viewing mode.
-   */
-  private dotBaseSize: number = 4;
-
-
   /**
    * A matrix for the use in transforming geometries.
    */
@@ -201,8 +207,9 @@ export class Plot extends polymer.Base {
    *
    * The camera is currently only used for the sake of being able to observe
    * the scene. Zooming/Panning is handled by `d3` rather than physically
-   * moving the camera around the 3D space provided by `THREE.js`. As such,
-   * camera properties such as position and zoom never change.
+   * moving the camera around the 3D space provided by `THREE.js`. Aspect ratio
+   * modified if the plot is resized, otherwise camera properties (such as
+   * position and zoom level) do not change.
    */
   private camera = new THREE.PerspectiveCamera(
     this.cameraOpts.fov,
@@ -210,13 +217,10 @@ export class Plot extends polymer.Base {
     this.cameraOpts.near,
     this.cameraOpts.far);
 
-  /** The scene to render graphs to. */
   private scene = new THREE.Scene();
-
-  /** A WebGL renderer for the scene. */
   private renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
 
-  /** A list of objects in the scene. */
+  /** The objects currently in the scene. */
   private sceneObjects = [];
 
   /** If the scene render loop has been started. */
@@ -228,13 +232,18 @@ export class Plot extends polymer.Base {
   /** If we have ever zoomed since last resetting the zoom level. */
   private haveZoomed: boolean = false;
 
+  /** If the render loop should stop. */
+  private finishRender: boolean = false;
+
 
   /**
    * Add new data to the plot and re-zoom.
    * Fires when new data arrives via the socket.
    */
   addData(data: number[][]) {
-    if (data.length === 0) return;
+    if (data.length === 0) {
+      return;
+    }
     const lastData = (this.data.length > 0) ?
         this.data[this.data.length - 1] : null;
     for (let row of data) {
@@ -269,7 +278,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * Creates and renders the SVG and WebGL portions of the graph.
+   * Initializes the plot and begins the scene rendering loop.
    */
   private render(): void {
     if (this.isRendering) {
@@ -277,20 +286,15 @@ export class Plot extends polymer.Base {
     }
 
     this.isRendering = true;
-
-    // Initialize SVG portions of plot.
     this.initializeSVGPlot();
-
-    // Initialize WebGL portions of plot.
     this.initializeWebGLPlot();
-
-    // Resize the plot to be the correct dimensions.
     this.resizePlot();
   }
 
 
   /**
-   * Resizes the SVG and WebGL portions of the plots.
+   * Resizes the SVG and WebGL portions of the plots and reprojects the data
+   * according to the new aspect ratio.
    */
   private resizePlot() {
     this.resizeSVGPlot();
@@ -300,10 +304,19 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * Begins the scene rendering loop.
+   * Renders the WebGL scene on each animation frame until the `finishRender`
+   * flag is set.
    */
   private renderScene(): void {
     this.renderer.render(this.scene, this.camera);
+
+    // If signaled to stop rendering, end the cycle.
+    if (this.finishRender) {
+      this.isRendering = false;
+      this.finishRender = false;
+      return;
+    }
+
     requestAnimationFrame(() => this.renderScene());
   }
 
@@ -472,7 +485,7 @@ export class Plot extends polymer.Base {
   /**
    * Resizes the WebGL renderer and camera.
    */
-  private resizeWebGLPlot() {
+  private resizeWebGLPlot(): void {
     this.camera.aspect = this.width / this.height;
     this.camera.updateProjectionMatrix();
     this.renderer.setSize(this.width, this.height);
@@ -487,8 +500,8 @@ export class Plot extends polymer.Base {
   private resizeSVGPlot(): void {
     const plot = this.$.plot;
     const plotBounds = plot.getBoundingClientRect();
-    const plotWidth = Math.max(plotBounds.width, 400);
-    const plotHeight = Math.max(plotBounds.height, 400);
+    const plotWidth = Math.max(plotBounds.width, PLOT_MIN_WIDTH);
+    const plotHeight = Math.max(plotBounds.height, PLOT_MIN_HEIGHT);
 
     // The inner dimensions of the plot, sans margins
     this.width = plotWidth - this.margin.left - this.margin.right;
@@ -518,10 +531,11 @@ export class Plot extends polymer.Base {
               .attr('transform', `translate(0, ${this.height})`)
               .call(this.xAxis);
 
-    const xLabXOffset = this.width / 2;
-    const xLabYOffset = this.height + this.margin.bottom - 10;
+    const xLabelXOffset = this.width / 2;
+    const xLabelYOffset = this.height + this.margin.bottom - 10;
     this.svg.select('#x-label')
-              .attr('transform', `translate(${xLabXOffset}, ${xLabYOffset})`);
+              .attr('transform',
+                    `translate(${xLabelXOffset}, ${xLabelYOffset})`);
 
     this.svg.select("#y-axis")
               .call(this.yAxis);
@@ -555,8 +569,10 @@ export class Plot extends polymer.Base {
    * Filter the traces and then generate the data appropriate for the given
    * plot type.
    */
-  private plotData(data: number[][]) {
-    if (data.length === 0) return;
+  private plotData(data: number[][]): void {
+    if (data.length === 0) {
+      return;
+    }
 
     this.numTraces = data[0].length - 1;
     if (!this.userTraces) {
@@ -590,7 +606,7 @@ export class Plot extends polymer.Base {
   /**
    * Generate the geometries and materials for a 1D plot.
    */
-  private plotData1D(data: number[][]) {
+  private plotData1D(data: number[][]): void {
     this.dataLimits1D(data);
 
     const ob = new THREE.Object3D();
@@ -620,12 +636,12 @@ export class Plot extends polymer.Base {
         geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
         geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
 
-        let material = new THREE.LineBasicMaterial({
+        const material = new THREE.LineBasicMaterial({
           color: COLOR_LIST[i % COLOR_LIST.length],
-          linewidth: 1.5
+          linewidth: PLOT_LINE_WIDTH
         });
-        let mesh = new THREE.Line(geometry, material);
-        ob.add(mesh);
+        const line = new THREE.Line(geometry, material);
+        ob.add(line);
       }
     }
 
@@ -637,7 +653,7 @@ export class Plot extends polymer.Base {
   /**
    * Generate the geometries and materials for a 2D plot.
    */
-  private plotData2D(data: number[][]) {
+  private plotData2D(data: number[][]): void {
     this.dataLimits2D(data);
 
     const zMin = this.dataLimits.zMin;
@@ -672,7 +688,7 @@ export class Plot extends polymer.Base {
 
     let material, mesh;
     if (this.drawMode2D == 'dots') {
-      material = new THREE.PointsMaterial({size: 1, vertexColors: THREE.VertexColors});
+      material = new THREE.PointsMaterial({vertexColors: THREE.VertexColors});
       mesh = new THREE.Points(geometry, material);
     } else {
       material = new THREE.MeshLambertMaterial({vertexColors: THREE.VertexColors});
@@ -690,7 +706,7 @@ export class Plot extends polymer.Base {
   /**
    * Set the bounds for a 1D plot.
    */
-  private dataLimits1D(data: number[][]) {
+  private dataLimits1D(data: number[][]): void {
     // Update data limits.
     this.dataLimits = {
       xMin: NaN,
@@ -723,8 +739,7 @@ export class Plot extends polymer.Base {
   /**
    * Set the bounds for a 2D plot.
    */
-  private dataLimits2D(data: number[][]) {
-    console.info("dataLimits2D", data.length);
+  private dataLimits2D(data: number[][]): void {
     for (let row of data) {
       let x = row[0];
       let y = row[1];
@@ -794,15 +809,18 @@ export class Plot extends polymer.Base {
    * Projects a coordinate in graph coordinates (relative to the axes of the
    * data) to screen coordinates (relative to the canvas). Additionally
    * determines the width and height of the coordinate based on its type.
+   *
+   * Mutates `outputObject` returning the projected `x` and `y` coordinate as
+   * well as `w` and `h` for the projected width and height.
    */
   private projectGraphCoordToScreenRect(
       x: number, y: number,
-      outputObject: {x: number, y: number, w: number, h: number}) {
+      outputObject: {x: number, y: number, w: number, h: number}): void {
     let wScreen, hScreen;
 
     switch (this.drawMode2D) {
     case 'dots':
-      wScreen = this.dotBaseSize;
+      wScreen = PLOT_POINT_SIZE;
       hScreen = wScreen;
       break;
 
@@ -831,6 +849,9 @@ export class Plot extends polymer.Base {
   /**
    * Projects a coordinate in screen coordinates (relative to the canvas) to
    * world coordinates (relative to the 3D projection of the scene).
+   *
+   * Mutates `outputVector` to return the projected `x`, `y` and `z`
+   * coordinate.
    */
   private projectScreenCoordToWorldCoord(x: number, y: number, outputVector: THREE.Vector3) {
     outputVector.set((x / this.width) * 2 - 1, -(y / this.height) * 2 + 1, 0.5);
@@ -866,39 +887,33 @@ export class Plot extends polymer.Base {
     // Reuse the same vector and object for all coordinate conversions to avoid
     // generating a large amount of garbage causing GC stalls.
     const vector = new THREE.Vector3();
-    const screenRect = { x: 0, y: 0, w: 0, h: 0 };
+    const screenRect = {x: 0, y: 0, w: 0, h: 0};
 
     // Project the (0, 0) screen position to world coordinates so that widths
     // and heights in world space can be calculated from the delta.
     this.projectScreenCoordToWorldCoord(0, 0, vector);
-    const {
-      x: xWorldZero,
-      y: yWorldZero
-    } = vector;
+    const xWorldZero = vector.x,
+          yWorldZero = vector.y;
 
     for (let obj of this.sceneObjects) {
       for (let child of obj.children) {
-        let array = child.geometry.attributes.position.array;
-        let data = child.geometry.attributes.data.array;
+        const array = child.geometry.attributes.position.array;
+        const data = child.geometry.attributes.data.array;
 
         for (let i = 0, len = data.length / 2; i < len; ++i) {
           const positionOffset = i * numVertices * 3;
 
           // Convert the graph (x, y) coordinate to screen coordinates.
           this.projectGraphCoordToScreenRect(data[i * 2], data[i*2+1], screenRect);
-          const {
-            x: xScreen,
-            y: yScreen,
-            w: wScreen,
-            h: hScreen
-          } = screenRect;
+          const xScreen = screenRect.x,
+                yScreen = screenRect.y,
+                wScreen = screenRect.w,
+                hScreen = screenRect.h;
 
           // Convert screen coordinates into world (3D) coordinates.
           this.projectScreenCoordToWorldCoord(xScreen, yScreen, vector);
-          const {
-            x: xWorld,
-            y: yWorld
-          } = vector;
+          const xWorld = vector.x,
+                yWorld = vector.y;
 
           if (this.numIndeps == 1 || this.drawMode2D == 'dots') {
             // When dealing with dots, simply copy the world coordinates
@@ -909,10 +924,9 @@ export class Plot extends polymer.Base {
             // Project the width and height in screen space to world space,
             // then calculate the size as a delta from world zero.
             this.projectScreenCoordToWorldCoord(wScreen, -hScreen, vector);
-            const {
-              x: wWorldEnd,
-              y: hWorldEnd
-            } = vector;
+
+            const xWorldEnd= vector.x,
+                  yWorldEnd = vector.y;
             const wWorld = wWorldEnd - xWorldZero;
             const hWorld = hWorldEnd - yWorldZero;
 
@@ -937,9 +951,9 @@ export class Plot extends polymer.Base {
         // size relative to the screen regardless of zoom level.
         if (this.drawMode2D == 'dots') {
           this.projectGraphCoordToScreenRect(0, 0, screenRect);
-          const {w: wScreen} = screenRect;
+          const wScreen = screenRect.w;
           this.projectScreenCoordToWorldCoord(wScreen, 0, vector);
-          const {x: wWorldEnd} = vector;
+          const wWorldEnd = vector.x;
           const wWorld = wWorldEnd - xWorldZero;
           child.material.size = wWorld;
         }
@@ -1034,7 +1048,7 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * Updates the control event listeners depeding on mode.
+   * Updates the control event listeners depending on mode.
    */
   private updateControlEventListeners() {
     if (!this.isRendering) {
@@ -1061,7 +1075,10 @@ export class Plot extends polymer.Base {
    * Update plot style depending on number of variables plotted.
    */
   private updatePlotStyles() {
-    if (!this.svg) return;
+    if (!this.svg) {
+      return;
+    }
+
     switch (this.numIndeps) {
       case 1:
         this.$$('rect.background').style.fill = '#ffffff';
@@ -1289,7 +1306,7 @@ export class Plot extends polymer.Base {
 
 
   @listen('canvas.mousemove')
-  private listenPlotMouseMove(e) {
+  private onCanvasMouseMove(e) {
     const rect = e.currentTarget.getBoundingClientRect();
 
     const xMouseScreen = e.pageX - rect.left,

From 0a1e75c1ca2a54b06a48206d547474c752f26bc5 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 12:17:33 -0700
Subject: [PATCH 15/34] Fixed encapsulation of the resetZoom function
 separating UI and internals.

---
 client-js/app/elements/labrad-plot.html |  2 +-
 client-js/app/elements/labrad-plot.ts   | 48 ++++++++++++-------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.html b/client-js/app/elements/labrad-plot.html
index 4dc2631..d87716e 100644
--- a/client-js/app/elements/labrad-plot.html
+++ b/client-js/app/elements/labrad-plot.html
@@ -53,7 +53,7 @@
     <div id="buttons">
       <paper-icon-button icon="tab-unselected" id="rect" on-click="mouseModeSelectorZoomRect" title="drag to zoom"></paper-icon-button>
       <paper-icon-button icon="open-with" id="pan" on-click="mouseModeSelectorPan" title="drag to pan"></paper-icon-button>
-      <paper-icon-button icon="home" id="home" on-click="resetZoom" title="zoom out"></paper-icon-button>
+      <paper-icon-button icon="home" id="home" on-click="resetZoomControl" title="zoom out"></paper-icon-button>
       <paper-icon-button icon="list" id="select" on-click="traceSelectorOpen" title="select trace"></paper-icon-button>
       <div id="modes2d">
         <paper-icon-button icon="av:stop" id="dots" on-click="drawMode2DSelectorDots" title="draw with dots"></paper-icon-button>
diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index d449fc6..c1adba4 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -269,14 +269,6 @@ export class Plot extends polymer.Base {
   }
 
 
-  /**
-   * Resets the current zoom level to fit the data.
-   */
-  resetZoomControl() {
-    this.resetZoom();
-  }
-
-
   /**
    * Initializes the plot and begins the scene rendering loop.
    */
@@ -985,6 +977,27 @@ export class Plot extends polymer.Base {
   }
 
 
+  /**
+   * Reset to original window size after zoom-in.
+   */
+  private resetZoom() {
+    this.haveZoomed = false;
+    this.xScale.domain([this.limits.xMin, this.limits.xMax]);
+    this.yScale.domain([this.limits.yMin, this.limits.yMax]);
+    this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
+    this.xAxis.scale(this.xScale);
+    this.yAxis.scale(this.yScale);
+    this.zoom.x(this.xScale);
+    this.zoom.y(this.yScale);
+
+    if (this.numIndeps == 2) {
+      this.zAxis.scale(this.zScale);
+    }
+
+    this.handleZoom();
+  }
+
+
   /**
    * Zoom into a selected rectangular region on the graph.
    */
@@ -1097,23 +1110,10 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * Reset to original window size after zoom-in.
+   * Resets the current zoom level to fit the data.
    */
-  resetZoom() {
-    this.haveZoomed = false;
-    this.xScale.domain([this.limits.xMin, this.limits.xMax]);
-    this.yScale.domain([this.limits.yMin, this.limits.yMax]);
-    this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
-    this.xAxis.scale(this.xScale);
-    this.yAxis.scale(this.yScale);
-    this.zoom.x(this.xScale);
-    this.zoom.y(this.yScale);
-
-    if (this.numIndeps == 2) {
-      this.zAxis.scale(this.zScale);
-    }
-
-    this.handleZoom();
+  resetZoomControl() {
+    this.resetZoom();
   }
 
 

From e0a5efcfd612fa81a7a011bab385f4f305589cd2 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 13:46:18 -0700
Subject: [PATCH 16/34] Cleaned up long lines and switch statements

---
 client-js/app/elements/labrad-plot.ts | 72 +++++++++++++++++----------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index c1adba4..ffc5485 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -811,21 +811,25 @@ export class Plot extends polymer.Base {
     let wScreen, hScreen;
 
     switch (this.drawMode2D) {
-    case 'dots':
-      wScreen = PLOT_POINT_SIZE;
-      hScreen = wScreen;
-      break;
-
-    case 'rectfill':
-      wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
-      hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
-      break;
-
-    case 'vargrid':
-      wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
-      hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
-      y = this.yNext[y];
-      break;
+      case 'dots':
+        wScreen = PLOT_POINT_SIZE;
+        hScreen = wScreen;
+        break;
+
+      case 'rectfill':
+        wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
+        hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
+        break;
+
+      case 'vargrid':
+        wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
+        hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
+        y = this.yNext[y];
+        break;
+
+      default:
+        // Nothing to do.
+        break;
     }
 
     const xScreen = this.xScale(x) + (wScreen / 2);
@@ -845,8 +849,12 @@ export class Plot extends polymer.Base {
    * Mutates `outputVector` to return the projected `x`, `y` and `z`
    * coordinate.
    */
-  private projectScreenCoordToWorldCoord(x: number, y: number, outputVector: THREE.Vector3) {
-    outputVector.set((x / this.width) * 2 - 1, -(y / this.height) * 2 + 1, 0.5);
+  private projectScreenCoordToWorldCoord(x: number,
+                                         y: number,
+                                         outputVector: THREE.Vector3) {
+    outputVector.set((x / this.width) * 2 - 1,
+                     -(y / this.height) * 2 + 1,
+                     0.5);
     outputVector.unproject(this.camera);
   }
 
@@ -889,14 +897,17 @@ export class Plot extends polymer.Base {
 
     for (let obj of this.sceneObjects) {
       for (let child of obj.children) {
-        const array = child.geometry.attributes.position.array;
+        const positions = child.geometry.attributes.position.array;
         const data = child.geometry.attributes.data.array;
 
         for (let i = 0, len = data.length / 2; i < len; ++i) {
           const positionOffset = i * numVertices * 3;
+          const dataOffset = i * 2;
 
           // Convert the graph (x, y) coordinate to screen coordinates.
-          this.projectGraphCoordToScreenRect(data[i * 2], data[i*2+1], screenRect);
+          this.projectGraphCoordToScreenRect(data[dataOffset],
+                                             data[dataOffset + 1],
+                                             screenRect);
           const xScreen = screenRect.x,
                 yScreen = screenRect.y,
                 wScreen = screenRect.w,
@@ -910,17 +921,18 @@ export class Plot extends polymer.Base {
           if (this.numIndeps == 1 || this.drawMode2D == 'dots') {
             // When dealing with dots, simply copy the world coordinates
             // into the position array at the correct offset.
-            array[positionOffset] = xWorld;
-            array[positionOffset + 1] = yWorld;
+            positions[positionOffset] = xWorld;
+            positions[positionOffset + 1] = yWorld;
           } else {
             // Project the width and height in screen space to world space,
             // then calculate the size as a delta from world zero.
             this.projectScreenCoordToWorldCoord(wScreen, -hScreen, vector);
 
-            const xWorldEnd= vector.x,
-                  yWorldEnd = vector.y;
-            const wWorld = wWorldEnd - xWorldZero;
-            const hWorld = hWorldEnd - yWorldZero;
+            const wWorldEnd= vector.x,
+                  hWorldEnd = vector.y;
+
+            const wWorld = wWorldEnd - xWorldZero,
+                  hWorld = hWorldEnd - yWorldZero;
 
             // Copy the plane vertex positions into the buffer for manipulation
             positionBuffer.set(this.planeVertexPositions);
@@ -934,7 +946,7 @@ export class Plot extends polymer.Base {
             this.transformMatrix.applyToVector3Array(positionBuffer);
 
             // Copy the buffer into the buffer geometry at the correct offset
-            array.set(positionBuffer, positionOffset);
+            positions.set(positionBuffer, positionOffset);
           }
         }
         child.geometry.attributes.position.needsUpdate = true;
@@ -1080,6 +1092,10 @@ export class Plot extends polymer.Base {
         canvas.on('mousedown', () => this.zoomRectangle());
         this.$.canvas.style.cursor = 'crosshair';
         break;
+
+      default:
+        // Do nothing.
+        break;
     }
   }
 
@@ -1105,6 +1121,10 @@ export class Plot extends polymer.Base {
         this.is1D = false;
         this.is2D = true;
         break;
+
+      default:
+        // Do nothing.
+        break;
     }
   }
 

From 3d3ea4474bc62fda1b197e775444448ca9e610d3 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 15:55:07 -0700
Subject: [PATCH 17/34] Refactored zoom loop to occur inside the render loop

---
 client-js/app/elements/labrad-plot.ts | 69 +++++++++++++--------------
 1 file changed, 33 insertions(+), 36 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index ffc5485..dd1fdf4 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -235,6 +235,9 @@ export class Plot extends polymer.Base {
   /** If the render loop should stop. */
   private finishRender: boolean = false;
 
+  /** Store the canvas' bounding rectangle for performance. */
+  private canvasBoundingRect = null;
+
 
   /**
    * Add new data to the plot and re-zoom.
@@ -280,28 +283,16 @@ export class Plot extends polymer.Base {
     this.isRendering = true;
     this.initializeSVGPlot();
     this.initializeWebGLPlot();
+    this.renderPlot();
     this.resizePlot();
   }
 
 
   /**
-   * Resizes the SVG and WebGL portions of the plots and reprojects the data
-   * according to the new aspect ratio.
-   */
-  private resizePlot() {
-    this.resizeSVGPlot();
-    this.resizeWebGLPlot();
-    this.projectGraphPositions();
-  }
-
-
-  /**
-   * Renders the WebGL scene on each animation frame until the `finishRender`
+   * Renders the plot on each animation frame until the `finishRender`
    * flag is set.
    */
-  private renderScene(): void {
-    this.renderer.render(this.scene, this.camera);
-
+  private renderPlot(): void {
     // If signaled to stop rendering, end the cycle.
     if (this.finishRender) {
       this.isRendering = false;
@@ -309,7 +300,27 @@ export class Plot extends polymer.Base {
       return;
     }
 
-    requestAnimationFrame(() => this.renderScene());
+    if (this.isZooming) {
+      this.svg.select('.x.axis').call(this.xAxis);
+      this.svg.select('.y.axis').call(this.yAxis);
+      this.projectGraphPositions();
+      this.haveZoomed = true;
+      this.isZooming = false;
+    }
+
+    this.renderer.render(this.scene, this.camera);
+    requestAnimationFrame(() => this.renderPlot());
+  }
+
+
+  /**
+   * Resizes the SVG and WebGL portions of the plots and reprojects the data
+   * according to the new aspect ratio.
+   */
+  private resizePlot() {
+    this.resizeSVGPlot();
+    this.resizeWebGLPlot();
+    this.projectGraphPositions();
   }
 
 
@@ -336,7 +347,6 @@ export class Plot extends polymer.Base {
     this.scene.add(new THREE.AmbientLight(0xffffff));
     this.camera.position.copy(this.cameraOpts.startingPosition);
     this.$.canvas.appendChild(this.renderer.domElement);
-    this.renderScene();
   }
 
 
@@ -377,7 +387,7 @@ export class Plot extends polymer.Base {
     p.zoom = d3.behavior.zoom()
             .x(p.xScale)
             .y(p.yScale)
-            .on('zoom', () => p.zoomEventHandler());
+            .on('zoom', () => p.handleZoom());
 
     // Plot area.
     const marginLeft = p.margin.left;
@@ -483,6 +493,7 @@ export class Plot extends polymer.Base {
     this.renderer.setSize(this.width, this.height);
     this.$.canvas.style.top = `${this.margin.top}px`;
     this.$.canvas.style.left = `${this.margin.left}px`;
+    this.canvasBoundingRect = this.$.canvas.getBoundingClientRect();
   }
 
 
@@ -812,6 +823,7 @@ export class Plot extends polymer.Base {
 
     switch (this.drawMode2D) {
       case 'dots':
+        // Points have a fixed width relative to the screen regardless of zoom.
         wScreen = PLOT_POINT_SIZE;
         hScreen = wScreen;
         break;
@@ -967,25 +979,10 @@ export class Plot extends polymer.Base {
 
 
   /**
-   * Updates axes and reprojects all data to reflect the new zoom level.
+   * Initiates zooming to be handled by the render loop.
    */
   private handleZoom() {
-    this.svg.select('.x.axis').call(this.xAxis);
-    this.svg.select('.y.axis').call(this.yAxis);
-    this.projectGraphPositions();
-    this.isZooming = false;
-  }
-
-
-  /**
-   * Queues zoom handling on the next animation frame.
-   */
-  private zoomEventHandler(): void {
-    if (!this.isZooming) {
-      requestAnimationFrame(() => this.handleZoom());
-      this.isZooming = true;
-      this.haveZoomed = true;
-    }
+    this.isZooming = true;
   }
 
 
@@ -1327,7 +1324,7 @@ export class Plot extends polymer.Base {
 
   @listen('canvas.mousemove')
   private onCanvasMouseMove(e) {
-    const rect = e.currentTarget.getBoundingClientRect();
+    const rect = this.canvasBoundingRect;
 
     const xMouseScreen = e.pageX - rect.left,
           yMouseScreen = e.pageY - rect.top,

From a4c705929127a311c9084c28268e81336cca5c33 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 15:59:47 -0700
Subject: [PATCH 18/34] Reordered projection functions to flow a little better

---
 client-js/app/elements/labrad-plot.ts | 127 +++++++++++++-------------
 1 file changed, 64 insertions(+), 63 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index dd1fdf4..0128ba4 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -283,8 +283,8 @@ export class Plot extends polymer.Base {
     this.isRendering = true;
     this.initializeSVGPlot();
     this.initializeWebGLPlot();
-    this.renderPlot();
     this.resizePlot();
+    this.renderPlot();
   }
 
 
@@ -808,68 +808,6 @@ export class Plot extends polymer.Base {
   }
 
 
-  /**
-   * Projects a coordinate in graph coordinates (relative to the axes of the
-   * data) to screen coordinates (relative to the canvas). Additionally
-   * determines the width and height of the coordinate based on its type.
-   *
-   * Mutates `outputObject` returning the projected `x` and `y` coordinate as
-   * well as `w` and `h` for the projected width and height.
-   */
-  private projectGraphCoordToScreenRect(
-      x: number, y: number,
-      outputObject: {x: number, y: number, w: number, h: number}): void {
-    let wScreen, hScreen;
-
-    switch (this.drawMode2D) {
-      case 'dots':
-        // Points have a fixed width relative to the screen regardless of zoom.
-        wScreen = PLOT_POINT_SIZE;
-        hScreen = wScreen;
-        break;
-
-      case 'rectfill':
-        wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
-        hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
-        break;
-
-      case 'vargrid':
-        wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
-        hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
-        y = this.yNext[y];
-        break;
-
-      default:
-        // Nothing to do.
-        break;
-    }
-
-    const xScreen = this.xScale(x) + (wScreen / 2);
-    const yScreen = this.yScale(y) + (hScreen / 2);
-
-    outputObject.x = xScreen;
-    outputObject.y = yScreen;
-    outputObject.w = wScreen;
-    outputObject.h = hScreen;
-  }
-
-
-  /**
-   * Projects a coordinate in screen coordinates (relative to the canvas) to
-   * world coordinates (relative to the 3D projection of the scene).
-   *
-   * Mutates `outputVector` to return the projected `x`, `y` and `z`
-   * coordinate.
-   */
-  private projectScreenCoordToWorldCoord(x: number,
-                                         y: number,
-                                         outputVector: THREE.Vector3) {
-    outputVector.set((x / this.width) * 2 - 1,
-                     -(y / this.height) * 2 + 1,
-                     0.5);
-    outputVector.unproject(this.camera);
-  }
-
 
   /**
    * Projects all graph data according to the latest zoom level.
@@ -978,6 +916,69 @@ export class Plot extends polymer.Base {
   }
 
 
+  /**
+   * Projects a coordinate in graph coordinates (relative to the axes of the
+   * data) to screen coordinates (relative to the canvas). Additionally
+   * determines the width and height of the coordinate based on its type.
+   *
+   * Mutates `outputObject` returning the projected `x` and `y` coordinate as
+   * well as `w` and `h` for the projected width and height.
+   */
+  private projectGraphCoordToScreenRect(
+      x: number, y: number,
+      outputObject: {x: number, y: number, w: number, h: number}): void {
+    let wScreen, hScreen;
+
+    switch (this.drawMode2D) {
+      case 'dots':
+        // Points have a fixed width relative to the screen regardless of zoom.
+        wScreen = PLOT_POINT_SIZE;
+        hScreen = wScreen;
+        break;
+
+      case 'rectfill':
+        wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
+        hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
+        break;
+
+      case 'vargrid':
+        wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
+        hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
+        y = this.yNext[y];
+        break;
+
+      default:
+        // Nothing to do.
+        break;
+    }
+
+    const xScreen = this.xScale(x) + (wScreen / 2);
+    const yScreen = this.yScale(y) + (hScreen / 2);
+
+    outputObject.x = xScreen;
+    outputObject.y = yScreen;
+    outputObject.w = wScreen;
+    outputObject.h = hScreen;
+  }
+
+
+  /**
+   * Projects a coordinate in screen coordinates (relative to the canvas) to
+   * world coordinates (relative to the 3D projection of the scene).
+   *
+   * Mutates `outputVector` to return the projected `x`, `y` and `z`
+   * coordinate.
+   */
+  private projectScreenCoordToWorldCoord(x: number,
+                                         y: number,
+                                         outputVector: THREE.Vector3) {
+    outputVector.set((x / this.width) * 2 - 1,
+                     -(y / this.height) * 2 + 1,
+                     0.5);
+    outputVector.unproject(this.camera);
+  }
+
+
   /**
    * Initiates zooming to be handled by the render loop.
    */

From 0493e1794125f5da4e99b8ec03c69d73b78ab935 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 16:01:50 -0700
Subject: [PATCH 19/34] Added void return types, renamed zoomRectangle

---
 client-js/app/elements/labrad-plot.ts | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 0128ba4..72889aa 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -243,7 +243,7 @@ export class Plot extends polymer.Base {
    * Add new data to the plot and re-zoom.
    * Fires when new data arrives via the socket.
    */
-  addData(data: number[][]) {
+  addData(data: number[][]): void {
     if (data.length === 0) {
       return;
     }
@@ -266,7 +266,7 @@ export class Plot extends polymer.Base {
    * Redraw the plot and attach resize to the window resize event.
    * Fires when the component is attached to the DOM.
    */
-  attached() {
+  attached(): void {
     this.render();
     window.addEventListener('resize', (e) => this.resizePlot());
   }
@@ -317,7 +317,7 @@ export class Plot extends polymer.Base {
    * Resizes the SVG and WebGL portions of the plots and reprojects the data
    * according to the new aspect ratio.
    */
-  private resizePlot() {
+  private resizePlot(): void {
     this.resizeSVGPlot();
     this.resizeWebGLPlot();
     this.projectGraphPositions();
@@ -808,7 +808,6 @@ export class Plot extends polymer.Base {
   }
 
 
-
   /**
    * Projects all graph data according to the latest zoom level.
    *
@@ -825,7 +824,7 @@ export class Plot extends polymer.Base {
    * 2) Screen Space. The position relative to the plot on screen.
    * 3) World Space. The position of the item in the 3D WebGL projected world.
    */
-  private projectGraphPositions() {
+  private projectGraphPositions(): void {
     // When plotting lines or single points, we only need one vertex to
     // represent the data.
     const numVertices = (this.numIndeps == 1 || this.drawMode2D == 'dots') ?
@@ -1011,7 +1010,7 @@ export class Plot extends polymer.Base {
   /**
    * Zoom into a selected rectangular region on the graph.
    */
-  private zoomRectangle() {
+  private drawZoomRectangle(): void {
     // Only trigger zoom rectangle on left click
     if (d3.event.button !== MOUSE_MAIN_BUTTON) {
       return;
@@ -1073,7 +1072,7 @@ export class Plot extends polymer.Base {
   /**
    * Updates the control event listeners depending on mode.
    */
-  private updateControlEventListeners() {
+  private updateControlEventListeners(): void {
     if (!this.isRendering) {
       return;
     }
@@ -1087,7 +1086,7 @@ export class Plot extends polymer.Base {
 
       case 'zoomRect':
         canvas.on('.zoom', null)
-        canvas.on('mousedown', () => this.zoomRectangle());
+        canvas.on('mousedown', () => this.drawZoomRectangle());
         this.$.canvas.style.cursor = 'crosshair';
         break;
 
@@ -1101,7 +1100,7 @@ export class Plot extends polymer.Base {
   /**
    * Update plot style depending on number of variables plotted.
    */
-  private updatePlotStyles() {
+  private updatePlotStyles(): void {
     if (!this.svg) {
       return;
     }

From 315b1d8b1eefca59eb5362f49a8182a9d8e702b4 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 16:03:40 -0700
Subject: [PATCH 20/34] More voids

---
 client-js/app/elements/labrad-plot.ts | 32 +++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 72889aa..9b942c9 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -1129,7 +1129,7 @@ export class Plot extends polymer.Base {
   /**
    * Resets the current zoom level to fit the data.
    */
-  resetZoomControl() {
+  resetZoomControl(): void {
     this.resetZoom();
   }
 
@@ -1137,7 +1137,7 @@ export class Plot extends polymer.Base {
   /**
    * Sets the control mode to pan/zoom.
    */
-  mouseModeSelectorPan() {
+  mouseModeSelectorPan(): void {
     this.mouseMode = 'pan';
   }
 
@@ -1145,7 +1145,7 @@ export class Plot extends polymer.Base {
   /**
    * Sets the control mode to zoom rectangle.
    */
-  mouseModeSelectorZoomRect() {
+  mouseModeSelectorZoomRect(): void {
     this.mouseMode = 'zoomRect';
   }
 
@@ -1153,7 +1153,7 @@ export class Plot extends polymer.Base {
   /**
    * Sets the 2D draw mode to dots.
    */
-  drawMode2DSelectorDots() {
+  drawMode2DSelectorDots(): void {
     this.drawMode2D = 'dots';
   }
 
@@ -1161,7 +1161,7 @@ export class Plot extends polymer.Base {
   /**
    * Sets the 2D draw mode to rect fill.
    */
-  drawMode2DSelectorRectfill() {
+  drawMode2DSelectorRectfill(): void {
     this.drawMode2D = 'rectfill';
   }
 
@@ -1169,7 +1169,7 @@ export class Plot extends polymer.Base {
   /**
    * Sets the 2D draw mode to vargrid.
    */
-  drawMode2DSelectorVargrid() {
+  drawMode2DSelectorVargrid(): void {
     this.drawMode2D = 'vargrid';
   }
 
@@ -1177,7 +1177,7 @@ export class Plot extends polymer.Base {
   /**
    * Opens the trace selector dialog window.
    */
-  traceSelectorOpen() {
+  traceSelectorOpen(): void {
     this.$.traceSelector.open();
   }
 
@@ -1185,7 +1185,7 @@ export class Plot extends polymer.Base {
   /**
    * Selects all available traces.
    */
-  traceSelectorSelectAll() {
+  traceSelectorSelectAll(): void {
     const selector = Polymer.dom(this.$.traceSelector);
     const checkboxes = selector.querySelectorAll('[name=traces]');
     for (let checkbox of checkboxes) {
@@ -1197,7 +1197,7 @@ export class Plot extends polymer.Base {
   /**
    * Selects none of the available traces.
    */
-  traceSelectorSelectNone() {
+  traceSelectorSelectNone(): void {
     const selector = Polymer.dom(this.$.traceSelector);
     const checkboxes = selector.querySelectorAll('[name=traces]');
     for (let checkbox of checkboxes) {
@@ -1210,7 +1210,7 @@ export class Plot extends polymer.Base {
    * Submit the users trace selection. Will not submit if no traces are
    * selected.
    */
-  traceSelectorSubmit() {
+  traceSelectorSubmit(): void {
     const selected: number[] = [];
     const selector = Polymer.dom(this.$.traceSelector);
     const checkboxes = selector.querySelectorAll('[name=traces]');
@@ -1247,7 +1247,7 @@ export class Plot extends polymer.Base {
 
 
   @observe('xLabel')
-  private observeXLabel(newLabel: string, oldLabel: string) {
+  private observeXLabel(newLabel: string, oldLabel: string): void {
     if (this.svg) {
       this.svg.select('#x-label').text(newLabel);
     }
@@ -1255,7 +1255,7 @@ export class Plot extends polymer.Base {
 
 
   @observe('yLabel')
-  private observeYLabel(newLabel: string, oldLabel: string) {
+  private observeYLabel(newLabel: string, oldLabel: string): void {
     if (this.svg) {
       this.svg.select('#y-label').text(newLabel);
     }
@@ -1263,7 +1263,7 @@ export class Plot extends polymer.Base {
 
 
   @observe('mouseMode')
-  private observeMouseMode(newMode: string, oldMode: string) {
+  private observeMouseMode(newMode: string, oldMode: string): void {
     switch (newMode) {
       case 'pan':
         this.$.pan.style.color = 'black';
@@ -1284,7 +1284,7 @@ export class Plot extends polymer.Base {
 
 
   @observe('drawMode2D')
-  private observeDrawMode2D(newMode: string) {
+  private observeDrawMode2D(newMode: string): void {
     switch (newMode) {
       case 'dots':
         this.$.dots.style.color = 'black';
@@ -1317,13 +1317,13 @@ export class Plot extends polymer.Base {
 
 
   @observe('numIndeps')
-  private observeNumIndeps(newNum: number, oldNum: number) {
+  private observeNumIndeps(newNum: number, oldNum: number): void {
     this.updatePlotStyles();
   }
 
 
   @listen('canvas.mousemove')
-  private onCanvasMouseMove(e) {
+  private onCanvasMouseMove(e): void {
     const rect = this.canvasBoundingRect;
 
     const xMouseScreen = e.pageX - rect.left,

From c719e32dc5f8223373d355ec80b64ce4195b3636 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 16:17:33 -0700
Subject: [PATCH 21/34] Use getAttribute instead of attributes

---
 client-js/app/elements/labrad-plot.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 9b942c9..548184e 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -172,7 +172,7 @@ export class Plot extends polymer.Base {
    * A short-hand to access the positions array in a unit plane.
    */
   private planeVertexPositions =
-      this.planeUnitGeometry.attributes.position.array;
+      this.planeUnitGeometry.getAttribute('position').array;
 
 
   /**
@@ -846,8 +846,8 @@ export class Plot extends polymer.Base {
 
     for (let obj of this.sceneObjects) {
       for (let child of obj.children) {
-        const positions = child.geometry.attributes.position.array;
-        const data = child.geometry.attributes.data.array;
+        const positions = child.geometry.getAttribute('position').array;
+        const data = child.geometry.getAttribute('data').array;
 
         for (let i = 0, len = data.length / 2; i < len; ++i) {
           const positionOffset = i * numVertices * 3;
@@ -898,7 +898,7 @@ export class Plot extends polymer.Base {
             positions.set(positionBuffer, positionOffset);
           }
         }
-        child.geometry.attributes.position.needsUpdate = true;
+        child.geometry.getAttribute('position').needsUpdate = true;
 
         // If we are drawing dots, we need to scale them so they are a constant
         // size relative to the screen regardless of zoom level.

From 887f5766d29ead0b29dfae1fe0a0cfa3b990cf45 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Tue, 12 Jul 2016 16:27:55 -0700
Subject: [PATCH 22/34] Better commented on the attributes for plotting in 1D
 and 2D

---
 client-js/app/elements/labrad-plot.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 548184e..e4cb055 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -616,7 +616,13 @@ export class Plot extends polymer.Base {
 
     for (let i of this.displayTraces) {
       const length = (this.lastData) ? data.length + 1 : data.length;
+
+      // The positions array is initialized in the geometry here, but positions
+      // are set withing projectGraphPositions. See plotData2D for more info.
       const positions = new Float32Array(length * 3);
+
+      // Raw data is stored inside the geometry for more efficient
+      // reprojection.
       const dataPoints = new Float64Array(length * 2);
 
       let offset = 0;
@@ -664,8 +670,21 @@ export class Plot extends polymer.Base {
     const numVertices = (this.drawMode2D == 'dots') ?
         1 : this.planeVertexCount;
 
+    // Each vertex of a data point uses three Float32 to place it in 3D space.
+    // These positions are set by projectGraphPositions as they change
+    // depending on zoom/pan.
     const positions = new Float32Array(data.length * numVertices * 3);
+
+    // Each data point consists of two Float64 representing its x and y
+    // coordinate in the 2D space. The data are stored in the geometry so they
+    // can be easily reprojected when the zoom/pan changes. These are fixed for
+    // the duration of the plot as they exist in Graph Space.
     const dataPoints = new Float64Array(data.length * 2);
+
+    // Each vertex in a data point needs a color associated with it, every
+    // vertex in a single data point is the same color.
+    // The color is represented by three Float32 representing the red, blue and
+    // green as a value between 0 and 1. These are fixed.
     const colors = new Float32Array(data.length * numVertices * 3);
 
     for (let i = 0, len = data.length; i < len; ++i) {
@@ -675,6 +694,8 @@ export class Plot extends polymer.Base {
       dataPoints[i * 2] = row[0];
       dataPoints[i * 2 + 1] = row[1];
 
+      // Insert the color of the vertex into the colors array once for each
+      // vertex in the data point.
       const numColorVals = numVertices * 3;
       const index = i * numColorVals;
       for (let j = 0; j < numColorVals; j += 3) {

From 2ad35683a3240b740ab4889d88cc86d72d44ee51 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Wed, 13 Jul 2016 10:22:50 -0700
Subject: [PATCH 23/34] Fix graph resizing issues when lots of data points are
 available

---
 client-js/app/elements/labrad-plot.ts | 55 +++++++++++++++++----------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index e4cb055..27c4f08 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -226,8 +226,8 @@ export class Plot extends polymer.Base {
   /** If the scene render loop has been started. */
   private isRendering: boolean = false;
 
-  /** If a zoom in or out is taking place. */
-  private isZooming = false;
+  /** If the graph data or camera has changed, requiring reprojection. */
+  private graphUpdateRequired = false;
 
   /** If we have ever zoomed since last resetting the zoom level. */
   private haveZoomed: boolean = false;
@@ -252,13 +252,17 @@ export class Plot extends polymer.Base {
     for (let row of data) {
       this.splice('data', this.data.length, 0, row);
     }
+
     this.plotData(data);
+    this.updateScales();
 
+    // If there is no custom zoom level, then we want to automatically adjust
+    // to keep all the data in frame.
     if (!this.haveZoomed) {
       this.resetZoom();
-    } else {
-      this.projectGraphPositions();
     }
+
+    this.graphUpdateRequired = true;
   }
 
 
@@ -300,12 +304,9 @@ export class Plot extends polymer.Base {
       return;
     }
 
-    if (this.isZooming) {
-      this.svg.select('.x.axis').call(this.xAxis);
-      this.svg.select('.y.axis').call(this.yAxis);
+    if (this.graphUpdateRequired) {
       this.projectGraphPositions();
-      this.haveZoomed = true;
-      this.isZooming = false;
+      this.graphUpdateRequired = false;
     }
 
     this.renderer.render(this.scene, this.camera);
@@ -334,8 +335,11 @@ export class Plot extends polymer.Base {
     this.sceneObjects = [];
 
     this.lastData = null;
+
     this.plotData(this.data);
-    this.projectGraphPositions();
+    this.updateScales();
+
+    this.graphUpdateRequired = true;
   }
 
 
@@ -627,7 +631,7 @@ export class Plot extends polymer.Base {
 
       let offset = 0;
 
-      // Add the last point of data if it exists to avoid gaps.
+      // Add the last point of data if maxima exists to avoid gaps.
       if (this.lastData) {
         dataPoints[offset] = this.lastData[0];
         dataPoints[offset + 1] = this.lastData[i+1];
@@ -972,8 +976,8 @@ export class Plot extends polymer.Base {
         break;
     }
 
-    const xScreen = this.xScale(x) + (wScreen / 2);
-    const yScreen = this.yScale(y) + (hScreen / 2);
+    let xScreen = this.xScale(x) + (wScreen / 2);
+    let yScreen = this.yScale(y) + (hScreen / 2);
 
     outputObject.x = xScreen;
     outputObject.y = yScreen;
@@ -1003,28 +1007,39 @@ export class Plot extends polymer.Base {
    * Initiates zooming to be handled by the render loop.
    */
   private handleZoom() {
-    this.isZooming = true;
+    this.graphUpdateRequired = true;
+    this.haveZoomed = true;
+
+    this.svg.select('.x.axis').call(this.xAxis);
+    this.svg.select('.y.axis').call(this.yAxis);
   }
 
 
   /**
-   * Reset to original window size after zoom-in.
+   * Updates the axis scales to reflect the latest data limits.
    */
-  private resetZoom() {
-    this.haveZoomed = false;
+  private updateScales() {
     this.xScale.domain([this.limits.xMin, this.limits.xMax]);
     this.yScale.domain([this.limits.yMin, this.limits.yMax]);
     this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
     this.xAxis.scale(this.xScale);
     this.yAxis.scale(this.yScale);
-    this.zoom.x(this.xScale);
-    this.zoom.y(this.yScale);
 
     if (this.numIndeps == 2) {
       this.zAxis.scale(this.zScale);
     }
+  }
+
 
-    this.handleZoom();
+  /**
+   * Reset to original window size after zoom-in.
+   */
+  private resetZoom() {
+    this.graphUpdateRequired = true;
+    this.haveZoomed = false;
+
+    this.zoom.x(this.xScale);
+    this.zoom.y(this.yScale);
   }
 
 

From e7ca05545c9f2b789db62d4327b11fa10db13f31 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Wed, 13 Jul 2016 10:25:33 -0700
Subject: [PATCH 24/34] Fix positioning of RectFill point

---
 client-js/app/elements/labrad-plot.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 27c4f08..46e7ab0 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -963,6 +963,7 @@ export class Plot extends polymer.Base {
       case 'rectfill':
         wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
         hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
+        y += this.dy0;
         break;
 
       case 'vargrid':

From ef188f7a7d280fc3ce1d14c045ef72be19b6fa72 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Wed, 13 Jul 2016 11:07:41 -0700
Subject: [PATCH 25/34] Fix issue with 1D plots becoming offset

---
 client-js/app/elements/labrad-plot.ts | 89 ++++++++++++++++-----------
 1 file changed, 54 insertions(+), 35 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 46e7ab0..a0d51c0 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -19,7 +19,7 @@ const PLOT_RIGHT_MARGIN = 10;
 const PLOT_TOP_MARGIN = 50;
 const PLOT_BOTTOM_MARGIN = 50;
 const PLOT_LINE_WIDTH = 1.5;
-const PLOT_POINT_SIZE = 10;
+const PLOT_POINT_SIZE = 30;
 
 
 /**
@@ -337,7 +337,6 @@ export class Plot extends polymer.Base {
     this.lastData = null;
 
     this.plotData(this.data);
-    this.updateScales();
 
     this.graphUpdateRequired = true;
   }
@@ -902,7 +901,7 @@ export class Plot extends polymer.Base {
             // then calculate the size as a delta from world zero.
             this.projectScreenCoordToWorldCoord(wScreen, -hScreen, vector);
 
-            const wWorldEnd= vector.x,
+            const wWorldEnd = vector.x,
                   hWorldEnd = vector.y;
 
             const wWorld = wWorldEnd - xWorldZero,
@@ -933,6 +932,7 @@ export class Plot extends polymer.Base {
           this.projectScreenCoordToWorldCoord(wScreen, 0, vector);
           const wWorldEnd = vector.x;
           const wWorld = wWorldEnd - xWorldZero;
+          console.log(wScreen, wWorld, wWorldEnd, xWorldZero);
           child.material.size = wWorld;
         }
       }
@@ -945,41 +945,54 @@ export class Plot extends polymer.Base {
    * data) to screen coordinates (relative to the canvas). Additionally
    * determines the width and height of the coordinate based on its type.
    *
-   * Mutates `outputObject` returning the projected `x` and `y` coordinate as
+   * Mutates `outputObject` by setting the projected `x` and `y` coordinate as
    * well as `w` and `h` for the projected width and height.
    */
   private projectGraphCoordToScreenRect(
       x: number, y: number,
       outputObject: {x: number, y: number, w: number, h: number}): void {
-    let wScreen, hScreen;
+    let xScreen, yScreen, wScreen, hScreen;
 
-    switch (this.drawMode2D) {
-      case 'dots':
-        // Points have a fixed width relative to the screen regardless of zoom.
-        wScreen = PLOT_POINT_SIZE;
-        hScreen = wScreen;
-        break;
+    if (this.numIndeps == 2) {
+      switch (this.drawMode2D) {
+        case 'dots':
+          // Points have a fixed width relative to the screen regardless of zoom.
+          wScreen = 2 * PLOT_POINT_SIZE;
+          hScreen = wScreen;
+          break;
+
+        case 'rectfill':
+          wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
+          hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
+          y += this.dy0;
+          break;
+
+        case 'vargrid':
+          wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
+          hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
+          y = this.yNext[y];
+          break;
+
+        default:
+          // Nothing to do.
+          break;
+      }
 
-      case 'rectfill':
-        wScreen = Math.abs(this.xScale(this.dx0) - this.xScale(0));
-        hScreen = Math.abs(this.yScale(this.dy0) - this.yScale(0));
-        y += this.dy0;
-        break;
+      xScreen = this.xScale(x) + (wScreen / 2);
+      yScreen = this.yScale(y) + (hScreen / 2);
 
-      case 'vargrid':
-        wScreen = this.xScale(this.xNext[x]) - this.xScale(x),
-        hScreen = Math.abs(this.yScale(this.yNext[y]) - this.yScale(y));
-        y = this.yNext[y];
-        break;
-
-      default:
-        // Nothing to do.
-        break;
+      if (this.drawMode2D == 'dots') {
+        yScreen -= hScreen / 4;
+        yScreen -= hScreen / 2;
+        xScreen -= hScreen / 4;
+      }
+    } else {
+      wScreen = 0;
+      hScreen = 0;
+      xScreen = this.xScale(x);
+      yScreen = this.yScale(y);
     }
 
-    let xScreen = this.xScale(x) + (wScreen / 2);
-    let yScreen = this.yScale(y) + (hScreen / 2);
-
     outputObject.x = xScreen;
     outputObject.y = yScreen;
     outputObject.w = wScreen;
@@ -1004,13 +1017,8 @@ export class Plot extends polymer.Base {
   }
 
 
-  /**
-   * Initiates zooming to be handled by the render loop.
-   */
-  private handleZoom() {
+  private updateZoom() {
     this.graphUpdateRequired = true;
-    this.haveZoomed = true;
-
     this.svg.select('.x.axis').call(this.xAxis);
     this.svg.select('.y.axis').call(this.yAxis);
   }
@@ -1032,15 +1040,26 @@ export class Plot extends polymer.Base {
   }
 
 
+  /**
+   * Initiates zooming to be handled by the render loop.
+   */
+  private handleZoom() {
+    this.haveZoomed = true;
+    this.updateZoom();
+  }
+
+
   /**
    * Reset to original window size after zoom-in.
    */
   private resetZoom() {
-    this.graphUpdateRequired = true;
     this.haveZoomed = false;
 
+    this.updateScales();
+
     this.zoom.x(this.xScale);
     this.zoom.y(this.yScale);
+    this.updateZoom();
   }
 
 

From 51118a723895c1033c089b0550d4f3d0d02ea499 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Wed, 13 Jul 2016 15:27:57 -0700
Subject: [PATCH 26/34] Replace broken and horrible Point sizing code with a
 working and much nicer implementation

---
 client-js/app/elements/labrad-plot.ts | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index a0d51c0..a9f96c8 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -19,7 +19,7 @@ const PLOT_RIGHT_MARGIN = 10;
 const PLOT_TOP_MARGIN = 50;
 const PLOT_BOTTOM_MARGIN = 50;
 const PLOT_LINE_WIDTH = 1.5;
-const PLOT_POINT_SIZE = 30;
+const PLOT_POINT_SIZE = 6;
 
 
 /**
@@ -715,7 +715,11 @@ export class Plot extends polymer.Base {
 
     let material, mesh;
     if (this.drawMode2D == 'dots') {
-      material = new THREE.PointsMaterial({vertexColors: THREE.VertexColors});
+      material = new THREE.PointsMaterial({
+        sizeAttenuation: false,
+        size: PLOT_POINT_SIZE,
+        vertexColors: THREE.VertexColors
+      });
       mesh = new THREE.Points(geometry, material);
     } else {
       material = new THREE.MeshLambertMaterial({vertexColors: THREE.VertexColors});
@@ -923,18 +927,6 @@ export class Plot extends polymer.Base {
           }
         }
         child.geometry.getAttribute('position').needsUpdate = true;
-
-        // If we are drawing dots, we need to scale them so they are a constant
-        // size relative to the screen regardless of zoom level.
-        if (this.drawMode2D == 'dots') {
-          this.projectGraphCoordToScreenRect(0, 0, screenRect);
-          const wScreen = screenRect.w;
-          this.projectScreenCoordToWorldCoord(wScreen, 0, vector);
-          const wWorldEnd = vector.x;
-          const wWorld = wWorldEnd - xWorldZero;
-          console.log(wScreen, wWorld, wWorldEnd, xWorldZero);
-          child.material.size = wWorld;
-        }
       }
     }
   }
@@ -957,7 +949,7 @@ export class Plot extends polymer.Base {
       switch (this.drawMode2D) {
         case 'dots':
           // Points have a fixed width relative to the screen regardless of zoom.
-          wScreen = 2 * PLOT_POINT_SIZE;
+          wScreen = PLOT_POINT_SIZE;
           hScreen = wScreen;
           break;
 
@@ -982,9 +974,7 @@ export class Plot extends polymer.Base {
       yScreen = this.yScale(y) + (hScreen / 2);
 
       if (this.drawMode2D == 'dots') {
-        yScreen -= hScreen / 4;
-        yScreen -= hScreen / 2;
-        xScreen -= hScreen / 4;
+        yScreen = this.yScale(y) - (hScreen / 2);
       }
     } else {
       wScreen = 0;

From 699174df3b3d974e87fdb0ebd0014015c723e18e Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Wed, 13 Jul 2016 19:57:33 -0700
Subject: [PATCH 27/34] Fixed zoomRectangle

---
 client-js/app/elements/labrad-plot.html |  9 +++++++
 client-js/app/elements/labrad-plot.ts   | 36 +++++++++++++------------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.html b/client-js/app/elements/labrad-plot.html
index d87716e..c8e0ee8 100644
--- a/client-js/app/elements/labrad-plot.html
+++ b/client-js/app/elements/labrad-plot.html
@@ -45,10 +45,19 @@
       top: 0;
       left: 0;
     }
+    #zoomRectangle {
+      background-color: #eee;
+      opacity: 0.5;
+      cursor: crosshair;
+      position: absolute;
+      border: 2px solid #f00;
+      display: none;
+    }
   </style>
   <template>
     <div id="plot"></div>
     <div id="canvas"></div>
+    <div id="zoomRectangle"></div>
     <div id="pos">Current Position: <span>{{currPos}}</span></div>
     <div id="buttons">
       <paper-icon-button icon="tab-unselected" id="rect" on-click="mouseModeSelectorZoomRect" title="drag to zoom"></paper-icon-button>
diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index a9f96c8..921da08 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -1066,31 +1066,33 @@ export class Plot extends polymer.Base {
     // area. The d3.mouse function returns coordinates relative to the full html
     // element, so we must account for the margins. We also clip the coordinates
     // to the available plot area.
-    const mousePos = () => {
+    const mousePos = (offset) => {
       const [x, y] = d3.mouse(this);
       return [
-        clip(x - this.margin.left, 0, this.width),
-        clip(y - this.margin.top, 0, this.height)
+        clip(x - this.margin.left, 0, this.width + offset),
+        clip(y - this.margin.top, 0, this.height + offset)
       ];
     }
 
-    const [originX, originY] = mousePos(),
-        rect = this.svg.append('rect')
-                       .classed('zoom', true)
-                       .attr('stroke', 'red')
-                       .attr('fill', '#eee')
-                       .attr('fill-opacity', 0.5);
+    const [originX, originY] = mousePos(0);
+
+    const rect = this.$.zoomRectangle;
 
     d3.select(window)
       .on('mousemove', () => {
-        const [x, y] = mousePos();
-        rect.attr('x', Math.min(originX, x))
-            .attr('y', Math.min(originY, y))
-            .attr('width', Math.abs(x - originX))
-            .attr('height', Math.abs(y - originY));
+        const [x, y] = mousePos(-4);
+        const posX = Math.min(originX, x) + this.margin.left;
+        const posY = Math.min(originY, y) + this.margin.top;
+        const width = Math.abs(x - originX);
+        const height = Math.abs(y - originY);
+        rect.style.left = `${posX}px`;
+        rect.style.top = `${posY}px`;
+        rect.style.width = `${width}px`;
+        rect.style.height = `${height}px`;
+        rect.style.display = 'block';
       })
       .on('mouseup', () => {
-        const [x, y] = mousePos();
+        const [x, y] = mousePos(0);
         d3.select(window)
           .on('mousemove', null)
           .on('mouseup', null);
@@ -1107,7 +1109,7 @@ export class Plot extends polymer.Base {
           this.zoom.x(xScale.domain([xMin, xMax]))
                    .y(yScale.domain([yMin, yMax]));
         }
-        rect.remove();
+        rect.style.display = 'none';
         this.handleZoom();
       }, true);
     d3.event.preventDefault();
@@ -1368,7 +1370,7 @@ export class Plot extends polymer.Base {
   }
 
 
-  @listen('canvas.mousemove')
+  @listen('mousemove')
   private onCanvasMouseMove(e): void {
     const rect = this.canvasBoundingRect;
 

From 9953786548a54344799f184d549f1319168324cc Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Thu, 14 Jul 2016 11:01:31 -0700
Subject: [PATCH 28/34] Fix no zoom reset when a scroll has occurred

---
 client-js/app/elements/labrad-plot.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 921da08..2e980f6 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -254,11 +254,11 @@ export class Plot extends polymer.Base {
     }
 
     this.plotData(data);
-    this.updateScales();
 
     // If there is no custom zoom level, then we want to automatically adjust
     // to keep all the data in frame.
     if (!this.haveZoomed) {
+      this.updateScales();
       this.resetZoom();
     }
 
@@ -927,6 +927,7 @@ export class Plot extends polymer.Base {
           }
         }
         child.geometry.getAttribute('position').needsUpdate = true;
+        child.geometry.computeBoundingSphere();
       }
     }
   }

From 8b19c33881fc0c379d5e335a8172f4a3627959ce Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Thu, 14 Jul 2016 11:41:53 -0700
Subject: [PATCH 29/34] Fix color scaling to update every frame rather than
 being fixed.

---
 client-js/app/elements/labrad-plot.ts | 80 +++++++++++++++++----------
 1 file changed, 51 insertions(+), 29 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 2e980f6..cc70ac8 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -262,6 +262,10 @@ export class Plot extends polymer.Base {
       this.resetZoom();
     }
 
+    // New data may have changed the zAxis scale, so we need to update the
+    // display independent of the other axes.
+    this.updateColorBarScale();
+
     this.graphUpdateRequired = true;
   }
 
@@ -626,27 +630,27 @@ export class Plot extends polymer.Base {
 
       // Raw data is stored inside the geometry for more efficient
       // reprojection.
-      const dataPoints = new Float64Array(length * 2);
+      const dataPoints = new Float64Array(length * 3);
 
       let offset = 0;
 
       // Add the last point of data if maxima exists to avoid gaps.
       if (this.lastData) {
         dataPoints[offset] = this.lastData[0];
-        dataPoints[offset + 1] = this.lastData[i+1];
-        offset += 2;
+        dataPoints[offset + 1] = this.lastData[i + 1];
+        offset += 3;
       }
 
       for (let row of data) {
         dataPoints[offset] = row[0];
         dataPoints[offset + 1] = row[i + 1];
-        offset += 2;
+        offset += 3;
       }
 
       if (dataPoints.length > 1) {
         const geometry = new THREE.BufferGeometry();
         geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
-        geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
+        geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 3));
 
         const material = new THREE.LineBasicMaterial({
           color: COLOR_LIST[i % COLOR_LIST.length],
@@ -668,8 +672,6 @@ export class Plot extends polymer.Base {
   private plotData2D(data: number[][]): void {
     this.dataLimits2D(data);
 
-    const zMin = this.dataLimits.zMin;
-    const zMax = this.dataLimits.zMax;
     const numVertices = (this.drawMode2D == 'dots') ?
         1 : this.planeVertexCount;
 
@@ -682,7 +684,7 @@ export class Plot extends polymer.Base {
     // coordinate in the 2D space. The data are stored in the geometry so they
     // can be easily reprojected when the zoom/pan changes. These are fixed for
     // the duration of the plot as they exist in Graph Space.
-    const dataPoints = new Float64Array(data.length * 2);
+    const dataPoints = new Float64Array(data.length * 3);
 
     // Each vertex in a data point needs a color associated with it, every
     // vertex in a single data point is the same color.
@@ -692,25 +694,14 @@ export class Plot extends polymer.Base {
 
     for (let i = 0, len = data.length; i < len; ++i) {
       const row = data[i];
-      const color = getColor(row[this.displaySurface], zMin, zMax);
-
-      dataPoints[i * 2] = row[0];
-      dataPoints[i * 2 + 1] = row[1];
-
-      // Insert the color of the vertex into the colors array once for each
-      // vertex in the data point.
-      const numColorVals = numVertices * 3;
-      const index = i * numColorVals;
-      for (let j = 0; j < numColorVals; j += 3) {
-        colors[index + j] = color.r / 255;
-        colors[index + j + 1] = color.g / 255;
-        colors[index + j + 2] = color.b / 255;
-      }
+      dataPoints[i * 3] = row[0];
+      dataPoints[i * 3 + 1] = row[1];
+      dataPoints[i * 3 + 2] = row[this.displaySurface];
     }
 
     const geometry = new THREE.BufferGeometry();
     geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
-    geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 2));
+    geometry.addAttribute('data', new THREE.BufferAttribute(dataPoints, 3));
     geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
 
     let material, mesh;
@@ -872,14 +863,18 @@ export class Plot extends polymer.Base {
     const xWorldZero = vector.x,
           yWorldZero = vector.y;
 
+    const zMin = this.dataLimits.zMin;
+    const zMax = this.dataLimits.zMax;
+
     for (let obj of this.sceneObjects) {
       for (let child of obj.children) {
         const positions = child.geometry.getAttribute('position').array;
+        const colors = (this.numIndeps == 2) ? child.geometry.getAttribute('color').array : [];
         const data = child.geometry.getAttribute('data').array;
 
-        for (let i = 0, len = data.length / 2; i < len; ++i) {
+        for (let i = 0, len = data.length / 3; i < len; ++i) {
           const positionOffset = i * numVertices * 3;
-          const dataOffset = i * 2;
+          const dataOffset = i * 3;
 
           // Convert the graph (x, y) coordinate to screen coordinates.
           this.projectGraphCoordToScreenRect(data[dataOffset],
@@ -900,6 +895,7 @@ export class Plot extends polymer.Base {
             // into the position array at the correct offset.
             positions[positionOffset] = xWorld;
             positions[positionOffset + 1] = yWorld;
+            positions[positionOffset + 2] = 0;
           } else {
             // Project the width and height in screen space to world space,
             // then calculate the size as a delta from world zero.
@@ -925,9 +921,29 @@ export class Plot extends polymer.Base {
             // Copy the buffer into the buffer geometry at the correct offset
             positions.set(positionBuffer, positionOffset);
           }
+
+          if (this.numIndeps == 2) {
+            // Update the colors of each point to reflect the latest scaling of
+            // the zAxis.
+            const color = getColor(data[dataOffset + 2], zMin, zMax);
+
+            // Insert the color of the vertex into the colors array once for each
+            // vertex in the data point.
+            const numColorVals = numVertices * 3;
+            const index = i * numColorVals;
+            for (let j = 0; j < numColorVals; j += 3) {
+              colors[index + j] = color.r / 255;
+              colors[index + j + 1] = color.g / 255;
+              colors[index + j + 2] = color.b / 255;
+            }
+          }
         }
         child.geometry.getAttribute('position').needsUpdate = true;
         child.geometry.computeBoundingSphere();
+
+        if (this.numIndeps == 2) {
+          child.geometry.getAttribute('color').needsUpdate = true;
+        }
       }
     }
   }
@@ -1015,19 +1031,25 @@ export class Plot extends polymer.Base {
   }
 
 
+  private updateColorBarScale() {
+    if (this.numIndeps == 2) {
+      this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
+      this.zAxis.scale(this.zScale);
+      this.svg.select('.z.axis').call(this.zAxis);
+    }
+  }
+
+
   /**
    * Updates the axis scales to reflect the latest data limits.
    */
   private updateScales() {
     this.xScale.domain([this.limits.xMin, this.limits.xMax]);
     this.yScale.domain([this.limits.yMin, this.limits.yMax]);
-    this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
     this.xAxis.scale(this.xScale);
     this.yAxis.scale(this.yScale);
 
-    if (this.numIndeps == 2) {
-      this.zAxis.scale(this.zScale);
-    }
+    this.updateColorBarScale();
   }
 
 

From e030599ba187a010d1f31a441163624256bbe985 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Thu, 14 Jul 2016 15:19:52 -0700
Subject: [PATCH 30/34] Moved various functions into the render loop for
 efficiency, amongst other performance improvements.

---
 client-js/app/elements/labrad-plot.ts | 73 +++++++++++++++++++--------
 client-js/app/scripts/activities.ts   |  1 +
 2 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index cc70ac8..3aa0864 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -229,16 +229,20 @@ export class Plot extends polymer.Base {
   /** If the graph data or camera has changed, requiring reprojection. */
   private graphUpdateRequired = false;
 
+  private resetZoomRequired = false;
+  private updateZoomRequired = false;
+  private updateScalesRequired = false;
+  private updateColorBarScaleRequired = false;
+
   /** If we have ever zoomed since last resetting the zoom level. */
   private haveZoomed: boolean = false;
 
   /** If the render loop should stop. */
-  private finishRender: boolean = false;
+  finishRender: boolean = false;
 
   /** Store the canvas' bounding rectangle for performance. */
   private canvasBoundingRect = null;
 
-
   /**
    * Add new data to the plot and re-zoom.
    * Fires when new data arrives via the socket.
@@ -250,7 +254,7 @@ export class Plot extends polymer.Base {
     const lastData = (this.data.length > 0) ?
         this.data[this.data.length - 1] : null;
     for (let row of data) {
-      this.splice('data', this.data.length, 0, row);
+      this.data.splice(this.data.length, 0, row);
     }
 
     this.plotData(data);
@@ -258,14 +262,13 @@ export class Plot extends polymer.Base {
     // If there is no custom zoom level, then we want to automatically adjust
     // to keep all the data in frame.
     if (!this.haveZoomed) {
-      this.updateScales();
-      this.resetZoom();
+      this.resetZoomRequired = true;
+      this.updateScalesRequired = true;
     }
 
     // New data may have changed the zAxis scale, so we need to update the
     // display independent of the other axes.
-    this.updateColorBarScale();
-
+    this.updateColorBarScaleRequired = true;
     this.graphUpdateRequired = true;
   }
 
@@ -275,6 +278,7 @@ export class Plot extends polymer.Base {
    * Fires when the component is attached to the DOM.
    */
   attached(): void {
+    this.plotID = Math.random();
     this.render();
     window.addEventListener('resize', (e) => this.resizePlot());
   }
@@ -282,6 +286,7 @@ export class Plot extends polymer.Base {
 
   /**
    * Initializes the plot and begins the scene rendering loop.
+   *
    */
   private render(): void {
     if (this.isRendering) {
@@ -308,12 +313,27 @@ export class Plot extends polymer.Base {
       return;
     }
 
+    if (this.updateZoomRequired) {
+      this.updateZoom();
+    }
+
+    if (this.updateScalesRequired) {
+      this.updateScales();
+    }
+
+    if (this.updateColorBarScaleRequired) {
+      this.updateColorBarScale();
+    }
+
+    if (this.resetZoomRequired) {
+      this.resetZoom();
+    }
+
     if (this.graphUpdateRequired) {
       this.projectGraphPositions();
-      this.graphUpdateRequired = false;
+      this.renderer.render(this.scene, this.camera);
     }
 
-    this.renderer.render(this.scene, this.camera);
     requestAnimationFrame(() => this.renderPlot());
   }
 
@@ -619,7 +639,13 @@ export class Plot extends polymer.Base {
   private plotData1D(data: number[][]): void {
     this.dataLimits1D(data);
 
-    const ob = new THREE.Object3D();
+    if (this.sceneObjects.length == 0) {
+      const ob = new THREE.Object3D();
+      this.sceneObjects.push(ob);
+      this.scene.add(ob);
+    }
+
+    const ob = this.sceneObjects[0];
 
     for (let i of this.displayTraces) {
       const length = (this.lastData) ? data.length + 1 : data.length;
@@ -631,7 +657,6 @@ export class Plot extends polymer.Base {
       // Raw data is stored inside the geometry for more efficient
       // reprojection.
       const dataPoints = new Float64Array(length * 3);
-
       let offset = 0;
 
       // Add the last point of data if maxima exists to avoid gaps.
@@ -660,9 +685,6 @@ export class Plot extends polymer.Base {
         ob.add(line);
       }
     }
-
-    this.sceneObjects.push(ob);
-    this.scene.add(ob);
   }
 
 
@@ -717,11 +739,14 @@ export class Plot extends polymer.Base {
       mesh = new THREE.Mesh(geometry, material);
     }
 
-    const ob = new THREE.Object3D();
-    ob.add(mesh);
+    if (this.sceneObjects.length == 0) {
+      const ob = new THREE.Object3D();
+      this.sceneObjects.push(ob);
+      this.scene.add(ob);
+    }
 
-    this.sceneObjects.push(ob);
-    this.scene.add(ob);
+    const ob = this.sceneObjects[0];
+    ob.add(mesh);
   }
 
 
@@ -844,6 +869,8 @@ export class Plot extends polymer.Base {
    * 3) World Space. The position of the item in the 3D WebGL projected world.
    */
   private projectGraphPositions(): void {
+    this.graphUpdateRequired = false;
+
     // When plotting lines or single points, we only need one vertex to
     // represent the data.
     const numVertices = (this.numIndeps == 1 || this.drawMode2D == 'dots') ?
@@ -1025,6 +1052,7 @@ export class Plot extends polymer.Base {
 
 
   private updateZoom() {
+    this.updateZoomRequired = false;
     this.graphUpdateRequired = true;
     this.svg.select('.x.axis').call(this.xAxis);
     this.svg.select('.y.axis').call(this.yAxis);
@@ -1032,6 +1060,8 @@ export class Plot extends polymer.Base {
 
 
   private updateColorBarScale() {
+    this.updateColorBarScaleRequired = false;
+
     if (this.numIndeps == 2) {
       this.zScale.domain([this.dataLimits.zMin, this.dataLimits.zMax]);
       this.zAxis.scale(this.zScale);
@@ -1044,6 +1074,8 @@ export class Plot extends polymer.Base {
    * Updates the axis scales to reflect the latest data limits.
    */
   private updateScales() {
+    this.updateScalesRequired = false;
+
     this.xScale.domain([this.limits.xMin, this.limits.xMax]);
     this.yScale.domain([this.limits.yMin, this.limits.yMax]);
     this.xAxis.scale(this.xScale);
@@ -1058,7 +1090,7 @@ export class Plot extends polymer.Base {
    */
   private handleZoom() {
     this.haveZoomed = true;
-    this.updateZoom();
+    this.updateZoomRequired = true;
   }
 
 
@@ -1067,12 +1099,13 @@ export class Plot extends polymer.Base {
    */
   private resetZoom() {
     this.haveZoomed = false;
+    this.resetZoomRequired = false;
 
     this.updateScales();
 
     this.zoom.x(this.xScale);
     this.zoom.y(this.yScale);
-    this.updateZoom();
+    this.updateZoomRequired = true;
   }
 
 
diff --git a/client-js/app/scripts/activities.ts b/client-js/app/scripts/activities.ts
index 6238f2c..3bf1528 100644
--- a/client-js/app/scripts/activities.ts
+++ b/client-js/app/scripts/activities.ts
@@ -350,6 +350,7 @@ export class DatasetActivity implements Activity {
   }
 
   async stop(): Promise<void> {
+    this.plot.finishRender = true;
     this.lifetime.close();
     await this.api.dataStreamClose({token: this.token});
   }

From ea8e66b58008f6acf086156f670b04d9f44f3a0e Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Thu, 14 Jul 2016 15:22:22 -0700
Subject: [PATCH 31/34] Properly defer graph projection when resizing a plot

---
 client-js/app/elements/labrad-plot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 3aa0864..877abde 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -345,7 +345,7 @@ export class Plot extends polymer.Base {
   private resizePlot(): void {
     this.resizeSVGPlot();
     this.resizeWebGLPlot();
-    this.projectGraphPositions();
+    this.graphUpdateRequired = true;
   }
 
 

From 50fe6608c59a4782b35027dd20b20565d6f446a0 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Thu, 14 Jul 2016 20:10:55 -0700
Subject: [PATCH 32/34] Removed plotID used for debug

---
 client-js/app/elements/labrad-plot.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 877abde..bff8e95 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -278,7 +278,6 @@ export class Plot extends polymer.Base {
    * Fires when the component is attached to the DOM.
    */
   attached(): void {
-    this.plotID = Math.random();
     this.render();
     window.addEventListener('resize', (e) => this.resizePlot());
   }

From e119b9e74b58442eae4770cbba373698e8d90dba Mon Sep 17 00:00:00 2001
From: Adam Whiteside <awhiteside@google.com>
Date: Fri, 15 Jul 2016 11:23:48 -0700
Subject: [PATCH 33/34] Updated labrad-plot to use new ES6 import for THREEjs

---
 client-js/app/elements/labrad-plot.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 56cfd13..0642582 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -1,13 +1,8 @@
 import 'd3';
-import * as three from 'three';
+import {THREE} from 'three';
 import {viridisData} from '../scripts/colormaps';
 import * as datavault from "../scripts/datavault";
 
-/**
- * Import the THREE namespace from the module.
- */
-const THREE = three.default;
-
 
 /**
  * Plot Constants.

From 4b4f6845131a071b584fc3dfdd1ad32b5d8e9950 Mon Sep 17 00:00:00 2001
From: Adam Whiteside <adamcwhiteside@gmail.com>
Date: Fri, 15 Jul 2016 11:50:57 -0700
Subject: [PATCH 34/34] Get THREE js to import and compile nicely

---
 client-js/app/elements/labrad-plot.ts | 2 +-
 client-js/typings/three/three.d.ts    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client-js/app/elements/labrad-plot.ts b/client-js/app/elements/labrad-plot.ts
index 0642582..9053a09 100644
--- a/client-js/app/elements/labrad-plot.ts
+++ b/client-js/app/elements/labrad-plot.ts
@@ -1,5 +1,5 @@
 import 'd3';
-import {THREE} from 'three';
+import THREE from 'three';
 import {viridisData} from '../scripts/colormaps';
 import * as datavault from "../scripts/datavault";
 
diff --git a/client-js/typings/three/three.d.ts b/client-js/typings/three/three.d.ts
index 7ee8d34..5d9946f 100644
--- a/client-js/typings/three/three.d.ts
+++ b/client-js/typings/three/three.d.ts
@@ -710,9 +710,9 @@ declare namespace THREE {
         getIndex(): BufferAttribute;
         setIndex( index: BufferAttribute ): void;
 
-        addAttribute(name: string, attribute: BufferAttribute|InterleavedBufferAttribute): BufferGeometry;
+        addAttribute(name: string, attribute: BufferAttribute): BufferGeometry;
 
-        getAttribute(name: string): BufferAttribute|InterleavedBufferAttribute;
+        getAttribute(name: string): BufferAttribute;
         removeAttribute(name: string): BufferGeometry;
 
         addGroup(start: number, count: number, materialIndex?: number): void;
@@ -3446,7 +3446,7 @@ declare namespace THREE {
          */
         multiplyScalar(s: number): Matrix4;
         multiplyVector3Array(array: number[]): number[]; // deprecated, use applyToVector3Array()
-        applyToVector3Array(array: number[], offset?: number, length?: number): number[];
+        applyToVector3Array(array: number[] | Float32Array | Float64Array, offset?: number, length?: number): number[] | Float32Array | Float64Array;
         applyToBuffer( buffer: BufferAttribute, offset?: number, length?: number): BufferAttribute;
         /**
          * Computes determinant of this matrix.