Refactor out WebsSocketManager from WebSockerServer

examples/datasources/index.js

@@ -1 +1,12 @@
-export {datasource as securities} from "./securities";
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const securities = require("./securities");
+
+module.exports.securities = securities;

examples/datasources/securities.js

@@ -1,17 +1,53 @@
-import perspective from "@finos/perspective";
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
 
-const worker = perspective.shared_worker();
+const perspective = require("@finos/perspective");
 
-const SECURITIES = ["AAPL.N", "AMZN.N", "QQQ.N", "NVDA.N", "TSLA.N", "FB.N", "MSFT.N", "TLT.N", "XIV.N", "YY.N", "CSCO.N", "GOOGL.N", "PCLN.N"];
+const worker = perspective.shared_worker ? perspective.shared_worker() : perspective;
+
+// Cache updates for faster update rates (but less data diversity)>
+const CACHE_INPUT = false;
+
+// If cached, how many updates to cache?
+const CACHE_ENTRIES = 200;
+
+// How many rows per update?
+const UPDATE_SIZE = 50;
+
+// Update every N milliseconds
+const TICK_RATE = 20;
 
+// Size limit of the server-side table
+const TABLE_SIZE = 10000;
+
+const SECURITIES = ["AAPL.N", "AMZN.N", "QQQ.N", "NVDA.N", "TSLA.N", "FB.N", "MSFT.N", "TLT.N", "XIV.N", "YY.N", "CSCO.N", "GOOGL.N", "PCLN.N"];
 const CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Moe", "Lenny", "Carl", "Krusty"];
 
-const newRows = () => {
+const __CACHE__ = [];
+
+perspective.initialize_profile_thread();
+
+/*******************************************************************************
+ *
+ * Slow mode (new rows generated on the fly)
+ */
+
+function choose(choices) {
+    return choices[Math.floor(Math.random() * choices.length)];
+}
+
+function newRows(total_rows) {
     const rows = [];
-    for (let x = 0; x < 5; x++) {
+    for (let x = 0; x < total_rows; x++) {
         rows.push({
-            name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
-            client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
+            name: choose(SECURITIES),
+            client: choose(CLIENTS),
             lastUpdate: new Date(),
             chg: Math.random() * 20 - 10,
             bid: Math.random() * 10 + 90,
@@ -20,22 +56,61 @@ const newRows = () => {
         });
     }
     return rows;
-};
+}
+
+async function init_dynamic({table_size, update_size, tick_rate}) {
+    // Create a `table`.
+    const table = worker.table(newRows(table_size), {limit: table_size});
+
+    // The `table` needs to be registered to a name with the Perspective
+    // `WebSocketServer` in order for the client to get a proxy handle to it.
+
+    // Loop and update the `table` oocasionally.
+    (function postRow() {
+        table.update(newRows(update_size));
+        setTimeout(postRow, tick_rate);
+    })();
+    return table;
+}
+
+/*******************************************************************************
+ *
+ * Fast mode (rows pre-generated, cached as Arrows)
+ */
+
+async function newArrow(total_rows) {
+    const table = worker.table(newRows(total_rows));
+    const vw = table.view();
+    const arrow = await vw.to_arrow();
+    vw.delete();
+    table.delete();
+    return arrow;
+}
 
-const getTable = (updating = true) => {
-    const table = worker.table(newRows(), {
-        index: "name"
-    });
-
-    if (updating) {
-        const update = () => {
-            table.update(newRows());
-            setTimeout(update, 500);
-        };
-        update();
+async function populate_cache(cache_entries) {
+    for (let x = 0; x < cache_entries; x++) {
+        let arrow = await newArrow();
+        __CACHE__[x] = arrow;
     }
+}
 
+async function init_cached({table_size, tick_rate, cache_entries}) {
+    await populate_cache(cache_entries);
+    const table = worker.table(newRows(table_size), {limit: table_size});
+    (function postRow() {
+        const entry = __CACHE__[Math.floor(Math.random() * __CACHE__.length)];
+        table.update(entry);
+        setTimeout(postRow, tick_rate);
+    })();
     return table;
+}
+
+const getTable = (config = {cached: CACHE_INPUT, tick_rate: TICK_RATE, update_size: UPDATE_SIZE, table_size: TABLE_SIZE, cache_entries: CACHE_ENTRIES}) => {
+    if (config.cached) {
+        return init_cached(config);
+    } else {
+        return init_dynamic(config);
+    }
 };
 
-export const datasource = getTable();
+module.exports = getTable;

examples/remote-express/README.md

@@ -0,0 +1,5 @@
+# Remote Example
+
+An express node.js server example hosting a perspective table to a client-side
+perspective running in a WebWorker.  Both "State of the World" and subsequent
+update data are transferred via Arrow-encoded ArrayBuffers over WebSocket.

examples/remote-express/index.css

@@ -0,0 +1,31 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+ perspective-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@media (max-width: 600px) {
+    html {
+        overflow: hidden;
+    }
+
+    body {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+        touch-action: none;
+    }
+}

examples/remote-express/index.html

@@ -0,0 +1,69 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="perspective-viewer.js"></script>
+    <script src="perspective-viewer-hypergrid.js"></script>
+    <script src="perspective-viewer-d3fc.js"></script>
+
+    <script src="perspective.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="material.dark.css">
+
+</head>
+
+<body>
+
+    <perspective-viewer 
+        id="view1"
+        plugin="d3_heatmap"
+        row-pivots='["client"]'
+        columns='["chg"]'
+        column-pivots='["name"]'>
+
+    </perspective-viewer>
+
+    <script>
+
+        window.addEventListener('WebComponentsReady', async function() {
+
+            // Create two perspective interfaces, one remotely via WebSocket, 
+            // and one local via WebWorker.
+
+            const websocket = perspective.websocket(`${window.location.origin.replace("http", "ws")}/subscribe`);
+            const worker = perspective.worker();
+            worker.initialize_profile_thread();
+
+            // Get a proxy for a view named "data_source_one", registered on
+            // the server with a reciprocal call to `host_view()`.
+            // No data is transferred, `view` is a virtual handle for data on
+            // the server.
+            const table = websocket.open_table('remote_table');
+
+            // Create a `table` from this, owned by the local WebWorker.
+            // Data is transferred from `view` to the local WebWorker, both
+            // the current state and all future updates, as Arrows.
+            // const table = worker.table(view, {limit: 10000});
+
+            // Load this in the `<perspective-viewer>`.
+            document.getElementById('view1').load(table);
+        });
+
+    </script>
+
+</body>
+
+</html>

examples/remote-express/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "remote-express",
+    "private": true,
+    "version": "0.4.5",
+    "description": "An example of 2 Perspectives, one client and one server, streaming via Apache Arrow.",
+    "scripts": {
+        "start": "node server.js"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.5",
+        "@finos/perspective-viewer": "^0.4.5",
+        "@finos/perspective-viewer-d3fc": "^0.4.5",
+        "@finos/perspective-viewer-hypergrid": "^0.4.5",
+        "express": "^4.17.1",
+        "express-ws": "^4.0.0"
+    }
+}

examples/remote-express/server.js

@@ -0,0 +1,27 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const {WebSocketManager, perspective_assets} = require("@finos/perspective");
+const express = require("express");
+const expressWs = require("express-ws");
+const {securities} = require("../datasources");
+
+const app = express();
+expressWs(app);
+
+// create Perspective WebSocketManager and host table
+const manager = new WebSocketManager();
+securities().then(table => manager.host_table("remote_table", table));
+
+// add connection to manager whenever a new client connects
+app.ws("/subscribe", ws => manager.add_connection(ws));
+
+app.use("/", perspective_assets([__dirname], true));
+
+const server = app.listen(8080, () => console.log(`Listening on port ${server.address().port}`));