Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/index.html

Created May 18, 2023 03:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save texodus/67d2b08d73aa513f5f6fe1f00f6a2bca to your computer and use it in GitHub Desktop.
Save texodus/67d2b08d73aa513f5f6fe1f00f6a2bca to your computer and use it in GitHub Desktop.
Download ZIP
`perspective-python` tornado client without localhost
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective@2.1.1/dist/cdn/perspective.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@2.1.1/dist/cdn/perspective-viewer.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@2.1.1/dist/cdn/perspective-viewer-datagrid.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@2.1.1/dist/cdn/perspective-viewer-d3fc.js"></script>
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/themes.css" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.cpp.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow" as="fetch" type="arraybuffer" crossorigin="anonymous" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.worker.js" as="fetch" type="application/javascript" crossorigin="anonymous" />
<style>
perspective-viewer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<perspective-viewer id="viewer"></perspective-viewer>
<script type="module">
import { worker } from "https://cdn.jsdelivr.net/npm/@finos/perspective@2.1.1/dist/cdn/perspective.js";
window.addEventListener("DOMContentLoaded", async function () {
/**
* `perspective.websocket` connects to a remote Perspective server
* that accepts WebSocket connections at the specified URL.
*
* Use `perspective.websocket` to set up Perspective in server or
* distributed modes.
*/
const websocket = perspective.websocket("ws://localhost:8080/websocket");
/**
* This shows Perspective running in "distributed mode": a `Table`
* is present on the Python server AND in the browser client, and
* state is automatically synchronized between the two.
*
* To create a Perspective client running in "distributed mode",
* host a `Table` in the Python server, create a `Table` on the
* client through a `View` on the server. This synchronizes the
* server's `Table` with the client's `Table`.
*/
const worker = perspective.worker();
/**
* `server_table` is a proxy to the hosted `Table` in the Python
* server. All public API methods are available through this
* proxied table.
*/
const server_table = await websocket.open_table("data_source_one");
/**
* Create a `View` on the server.
*/
const server_view = await server_table.view();
/**
* When a `View` is passed into `table()` to create a new `Table`,
* it automatically sets up an `on_update` callback to synchronize
* the state of the server and client.
*
* `const table` is a local Perspective `Table` that runs in
* WebAssembly, with its state kept in sync through the WebSocket
* connection. If the WebSocket connection closes/times out, the
* `Table` and its data (and associated viewer) are still fully
* functional, but will not be kept up-to-date with server state.
*
* Use `table.get_index()` in order to create a `Table` on the
* client that has the exact same settings as the server.
*
* For a more complex example of manually controlling state
* synchronization between server and client, see
* `client_server_editing.html`.
*/
const table = worker.table(server_view, {
index: await server_table.get_index(),
});
// Load the local table in the `<perspective-viewer>`.
document.getElementById("viewer").load(table);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment