texodus · May 18, 2023 03:23
diff --git a/index.html b/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/[email protected]/dist/cdn/perspective.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/dist/cdn/perspective-viewer.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/dist/cdn/perspective-viewer-datagrid.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/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/[email protected]/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>
	<!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/[email protected]/dist/cdn/perspective.js"></script>
	<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/dist/cdn/perspective-viewer.js"></script>
	<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/dist/cdn/perspective-viewer-datagrid.js"></script>
	<script type="module" src="https://cdn.jsdelivr.net/npm/@finos/[email protected]/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/[email protected]/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>