@windborne/grapher 1.0.0

package/src/renderer/line_program.js

@@ -0,0 +1,125 @@
+import lineFrag from './line.frag';
+import lineVert from './line.vert';
+import circleFrag from './circle.frag';
+import circleVert from './circle.vert';
+import colorToVector from '../helpers/color_to_vector';
+import extractVertices from './extract_vertices';
+import createGLProgram from './create_gl_program';
+import {DPI_INCREASE} from './size_canvas';
+
+export default class LineProgram {
+
+    constructor(gl) {
+        this._gl = gl;
+
+        this._program = createGLProgram(gl, lineVert, lineFrag);
+        this._circleProgram = createGLProgram(gl, circleVert, circleFrag);
+
+        this._positionBuffer = gl.createBuffer();
+        this._prevPositionBuffer = gl.createBuffer();
+        this._vertexBuffer = gl.createBuffer();
+        this._indexBuffer = gl.createBuffer();
+        this._individualPointBuffer = gl.createBuffer();
+
+        if (!gl.getExtension('OES_element_index_uint')) {
+            console.error('Your browser does not support OES_element_index_uint'); // eslint-disable-line no-console
+        }
+    }
+
+    dispose() {
+
+    }
+
+    clear() {
+        const gl = this._gl;
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
+
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+        gl.viewport(0, 0, width, height);
+    }
+
+    /**
+     * Draws the data on the canvas
+     * Assumes the data is in render space
+     *
+     * @param {{nullMask: Uint8Array, maxYValues: Float64Array, minYValues: Float64Array, yValues: Float64Array}} dataInRenderSpace        - the data to render
+     * @param {Object} parameters                           - set of options
+     * @param {String} parameters.color                     - color of the line to draw
+     * @param {Number} [parameters.width]                   - line width
+     * @param {Number} [parameters.shadowBlur]              - level to blur shadow to
+     * @param {String} [parameters.shadowColor]             - color of the shadow
+     * @param {String} [parameters.dashed]                  - whether or not to make the line dashed
+     * @param {Array<Number>} [parameters.dashPattern]      - dash array for the canvas
+     * @param {Boolean} [parameters.highlighted]            - whether the line is highlighted or not
+     * @param {Boolean} [parameters.showIndividualPoints]   - draw circles at each point
+     * @param {Function} [parameters.getIndividualPoints]   - points to draw circles at. Only called when needed.
+     * @private
+     */
+    draw(dataInRenderSpace, parameters) {
+        const gl = this._gl;
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
+        gl.useProgram(this._program);
+
+        // gl.disable(gl.DEPTH_TEST);
+
+        const thickness = DPI_INCREASE*((parameters.width || 1) + (parameters.highlighted ? 2 : 0));
+        const shadowBlur = parameters.shadowBlur === undefined ? 2 : parameters.shadowBlur;
+        const shadowColor = parameters.shadowColor || 'black';
+        const dashed = parameters.dashed || false;
+        const dashPattern = parameters.dashPattern || [5, 5];
+
+        const {positions, prevPositions, vertices, indices} = extractVertices(dataInRenderSpace, { dashed, dashPattern });
+
+        const positionIndex = gl.getAttribLocation(this._program, 'position');
+        const prevPositionIndex = gl.getAttribLocation(this._program, 'prevPosition');
+        const vertexIndex = gl.getAttribLocation(this._program, 'vertex');
+
+        gl.enableVertexAttribArray(positionIndex);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        gl.vertexAttribPointer(positionIndex, 2, gl.FLOAT, false, 0, 0);
+
+        gl.enableVertexAttribArray(prevPositionIndex);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._prevPositionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, prevPositions, gl.STATIC_DRAW);
+        gl.vertexAttribPointer(prevPositionIndex, 2, gl.FLOAT, false, 0, 0);
+
+        gl.enableVertexAttribArray(vertexIndex);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+        gl.vertexAttribPointer(vertexIndex, 1, gl.FLOAT, false, 0, 0);
+
+        gl.uniform1f(gl.getUniformLocation(this._program, 'width'), width);
+        gl.uniform1f(gl.getUniformLocation(this._program, 'height'), height);
+        gl.uniform1f(gl.getUniformLocation(this._program, 'thickness'), Math.max(thickness, 1)+shadowBlur);
+        gl.uniform1f(gl.getUniformLocation(this._program, 'shadowBlur'), shadowBlur);
+        gl.uniform4f(gl.getUniformLocation(this._program, 'color'), ...colorToVector(parameters.color));
+        gl.uniform4f(gl.getUniformLocation(this._program, 'shadowColor'), ...colorToVector(shadowColor));
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_INT, 0);
+
+        if (parameters.showIndividualPoints) {
+            gl.useProgram(this._circleProgram);
+
+            gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'width'), width);
+            gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'height'), height);
+            gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'pointSize'), 2*(thickness+6));
+            gl.uniform4f(gl.getUniformLocation(this._circleProgram, 'color'), ...colorToVector(parameters.color));
+
+            const individualPoints = parameters.getIndividualPoints();
+
+            gl.enableVertexAttribArray(0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._individualPointBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(individualPoints.flat()), gl.STATIC_DRAW);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+            gl.drawArrays(gl.POINTS, 0, individualPoints.length);
+        }
+    }
+
+}

package/src/renderer/paths_from.js

@@ -0,0 +1,72 @@
+import {DPI_INCREASE} from './size_canvas';
+
+/**
+ * Returns an array of contiguous paths from data in render space
+ *
+ * @param {{nullMask: Uint8Array, maxYValues: Float64Array, minYValues: Float64Array, yValues: Float64Array}} dataInRenderSpace
+ * @param {Object} options
+ * @param {Number} options.splitAtY - split the path whenever it's suddenly less or greater than this value
+ * @return {[[Number]]}
+ */
+export default function pathsFrom(dataInRenderSpace, {splitAtY}={}) {
+    const paths = [];
+    let currentPath = [];
+    let previouslyDiscontinuous = true;
+
+    const { nullMask, maxYValues, minYValues, yValues } = dataInRenderSpace;
+
+    for (let i = 0; i < yValues.length; i++) {
+        const x = i*DPI_INCREASE;
+        const y = yValues[i];
+
+        if (nullMask[i] & 0b001) { // y null
+            if (!previouslyDiscontinuous) {
+                paths.push(currentPath);
+                currentPath = [];
+            }
+
+            previouslyDiscontinuous = true;
+            continue;
+        }
+
+        currentPath.push([x, y]);
+
+        const minY = minYValues[i];
+        const maxY = maxYValues[i];
+
+        if (minY !== maxY) {
+            if (!(nullMask[i] & 0b010)) {
+                currentPath.push([x, minY]);
+            }
+
+            if (!(nullMask[i] & 0b100)) {
+                currentPath.push([x, maxY]);
+            }
+            currentPath.push([x, y]);
+        }
+
+        previouslyDiscontinuous = false;
+
+        if (typeof splitAtY === 'number' && i > 0) {
+            const prevY = yValues[i-1];
+            const signFlipped = !(nullMask[i-1] & 0b001) && (prevY < splitAtY && y >= splitAtY) || (prevY > splitAtY && y <= splitAtY);
+
+            if (signFlipped) {
+                if (!previouslyDiscontinuous) {
+                    paths.push(currentPath);
+                    currentPath = [
+                        [x, y]
+                    ];
+                }
+
+                previouslyDiscontinuous = true;
+            }
+        }
+    }
+
+    if (!previouslyDiscontinuous) {
+        paths.push(currentPath);
+    }
+
+    return paths;
+}

package/src/renderer/scale_bounds.js

@@ -0,0 +1,28 @@
+/**
+ * Scales y min and max bounds according to linear or log
+ *
+ * @param {Number} minY
+ * @param {Number} maxY
+ * @param {'linear'|'log'} scale
+ * @return {{minY: Number, maxY: Number}}
+ */
+export default function scaleBounds({ minY, maxY, scale }) {
+    if (scale === 'log') {
+        maxY = Math.log10(maxY);
+
+        if (minY <= 0) {
+            if (maxY > 0) {
+                minY = -maxY;
+            } else {
+                minY = 2*maxY;
+            }
+        } else {
+            minY = Math.log10(minY);
+        }
+    }
+
+    return {
+        minY,
+        maxY
+    };
+}

package/src/renderer/size_canvas.js

@@ -0,0 +1,59 @@
+export const DPI_INCREASE = 2;
+
+/**
+ * Sizes the canvas such that rendering is pixel perfect
+ * Returns the sizing information
+ *
+ * @param {HTMLCanvasElement} canvas
+ * @param {CanvasRenderingContext2D} context
+ * @param {Boolean} reset                       - if true, will reset the canvas size before checking sizing
+ * @return {Promise<{boundingRect: DOMRect, pixelRatio: number, elementHeight: number, renderWidth: number, renderHeight: number, elementWidth: number}>}
+ */
+export default async function sizeCanvas(canvas, context, {reset=true}={}) {
+    if (reset) {
+        canvas.width = '';
+        canvas.height = '';
+        canvas.style.width = '0';
+        canvas.style.height = '';
+
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+
+    let boundingRect = canvas.parentNode.getBoundingClientRect();
+
+    while (boundingRect.width === 0) {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        boundingRect = canvas.getBoundingClientRect();
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    const bsr = context.webkitBackingStorePixelRatio ||
+        context.mozBackingStorePixelRatio ||
+        context.msBackingStorePixelRatio ||
+        context.oBackingStorePixelRatio ||
+        context.backingStorePixelRatio || 1;
+
+    const pixelRatio = DPI_INCREASE*dpr / bsr;
+
+    const elementWidth = boundingRect.width;
+    const elementHeight = boundingRect.height;
+    const renderWidth = elementWidth * pixelRatio;
+    const renderHeight = elementHeight * pixelRatio;
+
+    canvas.width = renderWidth;
+    canvas.height = renderHeight;
+    canvas.style.width = `${elementWidth}px`;
+    canvas.style.height = `${elementHeight}px`;
+
+    // We could us this to make coordinates behave as if they weren't transformed if we wanted
+    // context.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0)
+
+    return {
+        pixelRatio,
+        elementWidth,
+        elementHeight,
+        renderWidth,
+        renderHeight,
+        boundingRect
+    };
+}

package/src/rust/Cargo.lock

@@ -0,0 +1,233 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+[[package]]
+name = "bumpalo"
+version = "3.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f359dc14ff8911330a51ef78022d376f25ed00248912803b58f00cb1c27f742"
+
+[[package]]
+name = "cfg-if"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
+
+[[package]]
+name = "console_error_panic_hook"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8d976903543e0c48546a91908f21588a680a8c8f984df9a5d69feccb2b2a211"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "futures"
+version = "0.1.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b980f2816d6ee8673b6517b52cb0e808a180efc92e5c19d02cdda79066703ef"
+
+[[package]]
+name = "grapher-rs"
+version = "0.1.0"
+dependencies = [
+ "console_error_panic_hook",
+ "futures",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test",
+ "web-sys",
+]
+
+[[package]]
+name = "js-sys"
+version = "0.3.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cb931d43e71f560c81badb0191596562bafad2be06a3f9025b845c847c60df5"
+dependencies = [
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "lazy_static"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
+
+[[package]]
+name = "log"
+version = "0.4.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "14b6052be84e6b71ab17edffc2eeabf5c2c3ae1fdb464aae35ac50c67a44e1f7"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "0.4.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf3d2011ab5c909338f7887f4fc896d35932e29146c12c8d01da6b22a80ba759"
+dependencies = [
+ "unicode-xid 0.1.0",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c09721c6781493a2a492a96b5a5bf19b65917fe6728884e7c44dd0c60ca3435"
+dependencies = [
+ "unicode-xid 0.2.0",
+]
+
+[[package]]
+name = "quote"
+version = "0.6.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce23b6b870e8f94f81fb0a363d65d86675884b34a09043c81e5562f11c1f8e1"
+dependencies = [
+ "proc-macro2 0.4.30",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2bdc6c187c65bca4260c9011c9e3132efe4909da44726bad24cf7572ae338d7f"
+dependencies = [
+ "proc-macro2 1.0.9",
+]
+
+[[package]]
+name = "scoped-tls"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea6a9290e3c9cf0f18145ef7ffa62d68ee0bf5fcd651017e586dc7fd5da448c2"
+
+[[package]]
+name = "syn"
+version = "1.0.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "123bd9499cfb380418d509322d7a6d52e5315f064fe4b3ad18a53d6b92c07859"
+dependencies = [
+ "proc-macro2 1.0.9",
+ "quote 1.0.3",
+ "unicode-xid 0.2.0",
+]
+
+[[package]]
+name = "unicode-xid"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc72304796d0818e357ead4e000d19c9c174ab23dc11093ac919054d20a6a7fc"
+
+[[package]]
+name = "unicode-xid"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "826e7639553986605ec5979c7dd957c7895e93eabed50ab2ffa7f6128a75097c"
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3557c397ab5a8e347d434782bcd31fc1483d927a6826804cec05cc792ee2519d"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e0da9c9a19850d3af6df1cb9574970b566d617ecfaf36eb0b706b6f3ef9bd2f8"
+dependencies = [
+ "bumpalo",
+ "lazy_static",
+ "log",
+ "proc-macro2 1.0.9",
+ "quote 1.0.3",
+ "syn",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.3.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83420b37346c311b9ed822af41ec2e82839bfe99867ec6c54e2da43b7538771c"
+dependencies = [
+ "cfg-if",
+ "futures",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0f6fde1d36e75a714b5fe0cffbb78978f222ea6baebb726af13c78869fdb4205"
+dependencies = [
+ "quote 1.0.3",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25bda4168030a6412ea8a047e27238cadf56f0e53516e1e83fec0a8b7c786f6d"
+dependencies = [
+ "proc-macro2 1.0.9",
+ "quote 1.0.3",
+ "syn",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc9f36ad51f25b0219a3d4d13b90eb44cd075dff8b6280cca015775d7acaddd8"
+
+[[package]]
+name = "wasm-bindgen-test"
+version = "0.2.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2d9693b63a742d481c7f80587e057920e568317b2806988c59cd71618bc26c1"
+dependencies = [
+ "console_error_panic_hook",
+ "futures",
+ "js-sys",
+ "scoped-tls",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-test-macro"
+version = "0.2.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0789dac148a8840bbcf9efe13905463b733fa96543bfbf263790535c11af7ba5"
+dependencies = [
+ "proc-macro2 0.4.30",
+ "quote 0.6.13",
+]
+
+[[package]]
+name = "web-sys"
+version = "0.3.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "721c6263e2c66fd44501cc5efbfa2b7dfa775d13e4ea38c46299646ed1f9c70a"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]

package/src/rust/Cargo.toml

@@ -0,0 +1,35 @@
+[package]
+name = "grapher-rs"
+version = "0.1.0"
+authors = ["Kai Marshland <kaimarshland@gmail.com>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[profile.release]
+lto = true
+
+[features]
+
+[dependencies]
+wasm-bindgen = "0.2.45"
+js-sys = "0.3.22"
+
+[dependencies.web-sys]
+version = "0.3.22"
+features = ["console"]
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so it's only enabled
+# in debug mode.
+[target."cfg(debug_assertions)".dependencies]
+console_error_panic_hook = "0.1.5"
+
+# These crates are used for running unit tests.
+[dev-dependencies]
+wasm-bindgen-test = "0.2.45"
+futures = "0.1.27"
+wasm-bindgen-futures = "0.3.22"
+

package/src/rust/pkg/grapher_rs.d.ts

@@ -0,0 +1,42 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+* @param {number} length 
+* @param {Float64Array} data 
+* @param {Uint8Array} data_null_mask 
+* @param {any} params 
+* @param {Uint8Array} null_mask 
+* @param {Float64Array} y_values 
+* @param {Float64Array} min_y_values 
+* @param {Float64Array} max_y_values 
+*/
+export function selected_space_to_render_space(length: number, data: Float64Array, data_null_mask: Uint8Array, params: any, null_mask: Uint8Array, y_values: Float64Array, min_y_values: Float64Array, max_y_values: Float64Array): void;
+/**
+* @param {number} dpi_increase 
+* @param {Uint8Array} null_mask 
+* @param {Float64Array} y_values 
+* @param {Float64Array} min_y_values 
+* @param {Float64Array} max_y_values 
+* @param {Float32Array} positions 
+* @param {Float32Array} prev_positions 
+* @param {Float32Array} vertices 
+* @param {Uint32Array} indices 
+* @param {boolean} dashed 
+* @param {number} dash0 
+* @param {number} dash1 
+*/
+export function extract_vertices(dpi_increase: number, null_mask: Uint8Array, y_values: Float64Array, min_y_values: Float64Array, max_y_values: Float64Array, positions: Float32Array, prev_positions: Float32Array, vertices: Float32Array, indices: Uint32Array, dashed: boolean, dash0: number, dash1: number): void;
+/**
+*/
+export function main_js(): void;
+/**
+* @param {Uint8Array} null_mask 
+* @param {Float64Array} y_values 
+* @param {Float64Array} min_y_values 
+* @param {Float64Array} max_y_values 
+* @param {boolean} dashed 
+* @param {number} dash0 
+* @param {number} dash1 
+* @returns {number} 
+*/
+export function get_point_number(null_mask: Uint8Array, y_values: Float64Array, min_y_values: Float64Array, max_y_values: Float64Array, dashed: boolean, dash0: number, dash1: number): number;