|
| 1 | +// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ |
| 2 | +// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ |
| 3 | +// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ |
| 4 | +// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ |
| 5 | +// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ |
| 6 | +// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ |
| 7 | +// ┃ Copyright (c) 2017, the Perspective Authors. ┃ |
| 8 | +// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ |
| 9 | +// ┃ This file is part of the Perspective library, distributed under the terms ┃ |
| 10 | +// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ |
| 11 | +// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ |
| 12 | + |
| 13 | +// # [Perspective bootstrapping](https://perspective.finos.org/guide/how_to/javascript/importing.html) |
| 14 | + |
| 15 | +// Here we're initializing the WASM interpreter that powers the perspective API |
| 16 | +// and viewer, as covered in the [user guide section on bundling](https://perspective.finos.org/guide/how_to/javascript/importing.html). |
| 17 | +// This example is written assuming that the bundler is configured |
| 18 | +// to treat these files as a "file" and returns a path as the default export. |
| 19 | +// Use ./build.js as an example. The type stubs are in ./globals.d.ts |
| 20 | + |
| 21 | +import perspective from "@finos/perspective"; |
| 22 | +import perspective_viewer from "@finos/perspective-viewer"; |
| 23 | +import "@finos/perspective-viewer-datagrid"; |
| 24 | +import "@finos/perspective-viewer-d3fc"; |
| 25 | + |
| 26 | +import SERVER_WASM from "@finos/perspective/dist/wasm/perspective-server.wasm"; |
| 27 | +import CLIENT_WASM from "@finos/perspective-viewer/dist/wasm/perspective-viewer.wasm"; |
| 28 | + |
| 29 | +await Promise.all([ |
| 30 | + perspective.init_server(fetch(SERVER_WASM)), |
| 31 | + perspective_viewer.init_client(fetch(CLIENT_WASM)), |
| 32 | +]); |
| 33 | + |
| 34 | +// # Data Source |
| 35 | + |
| 36 | +// Data source creates a static Web Worker instance of Perspective engine, and a |
| 37 | +// table creation function which both downloads data and loads it into the |
| 38 | +// engine. |
| 39 | + |
| 40 | +import type * as psp from "@finos/perspective"; |
| 41 | +import type * as pspViewer from "@finos/perspective-viewer"; |
| 42 | +import * as Workspace from "@finos/perspective-workspace"; |
| 43 | + |
| 44 | +import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow"; |
| 45 | + |
| 46 | +const CLIENT = await perspective.worker(); |
| 47 | + |
| 48 | +async function createNewSuperstoreTable(): Promise<psp.Table> { |
| 49 | + console.warn("Creating new table!"); |
| 50 | + const req = fetch(SUPERSTORE_ARROW); |
| 51 | + const resp = await req; |
| 52 | + const buffer = await resp.arrayBuffer(); |
| 53 | + return await CLIENT.table(buffer); |
| 54 | +} |
| 55 | + |
| 56 | +const CONFIG: pspViewer.ViewerConfigUpdate = { |
| 57 | + group_by: ["State"], |
| 58 | +}; |
| 59 | + |
| 60 | +// # React application |
| 61 | + |
| 62 | +// The React application itself |
| 63 | + |
| 64 | +import * as React from "react"; |
| 65 | +import { createRoot } from "react-dom/client"; |
| 66 | +import { PerspectiveWorkspace } from "@finos/perspective-react"; |
| 67 | +import { PerspectiveWorkspaceConfig } from "@finos/perspective-workspace"; |
| 68 | + |
| 69 | +import "@finos/perspective-viewer/dist/css/pro.css"; |
| 70 | +import "@finos/perspective-workspace/dist/css/pro.css"; |
| 71 | +import "./index.css"; |
| 72 | + |
| 73 | +interface WorkspaceState { |
| 74 | + mounted: boolean; |
| 75 | + config: PerspectiveWorkspaceConfig<string>; |
| 76 | + tables: Record<string, Promise<psp.Table>>; |
| 77 | + /// This object is kept for the 'swap tables' button. |
| 78 | + /// It is a backup set of tables that correspond in keys to `tables` |
| 79 | + /// but with different data. |
| 80 | + swapTables: Record<string, Promise<psp.Table>>; |
| 81 | + /// if false use `tables` and true use `swapTables` in the workspace |
| 82 | + swap: boolean; |
| 83 | +} |
| 84 | + |
| 85 | +const WorkspaceApp: React.FC = () => { |
| 86 | + const [state, setState] = React.useState<WorkspaceState>({ |
| 87 | + mounted: true, |
| 88 | + tables: {}, |
| 89 | + swapTables: {}, |
| 90 | + config: { |
| 91 | + sizes: [], |
| 92 | + viewers: {}, |
| 93 | + detail: undefined, |
| 94 | + }, |
| 95 | + swap: false, |
| 96 | + }); |
| 97 | + |
| 98 | + const onClickAddViewer = React.useCallback(async () => { |
| 99 | + const name = window.crypto.randomUUID(); |
| 100 | + const data = `a,b,c\n${Math.random()},${Math.random()},${Math.random()}`; |
| 101 | + const swapData = `a,b,c\n${Math.random()},${Math.random()},${Math.random()}\n${Math.random()},${Math.random()},${Math.random()}`; |
| 102 | + // dont assign internal names to the tables they are not used by the workspace |
| 103 | + const t = CLIENT.table(data); |
| 104 | + const swap = CLIENT.table(swapData); |
| 105 | + const config = Workspace.addViewer(state.config, { |
| 106 | + table: name, |
| 107 | + title: name, |
| 108 | + }); |
| 109 | + const tables = { ...state.tables, [name]: t }; |
| 110 | + const swapTables = { ...state.swapTables, [name]: swap }; |
| 111 | + setState({ |
| 112 | + ...state, |
| 113 | + tables, |
| 114 | + config, |
| 115 | + swapTables, |
| 116 | + }); |
| 117 | + }, [state]); |
| 118 | + |
| 119 | + const onLayoutUpdate: (detail: { |
| 120 | + layout: PerspectiveWorkspaceConfig<string>; |
| 121 | + tables: Record<string, psp.Table | Promise<psp.Table>>; |
| 122 | + }) => void = React.useCallback( |
| 123 | + ({ layout, tables }) => { |
| 124 | + const newTables = Object.fromEntries( |
| 125 | + Object.entries(tables).map(([k, v]) => [k, Promise.resolve(v)]) |
| 126 | + ); |
| 127 | + setState({ |
| 128 | + ...state, |
| 129 | + config: layout, |
| 130 | + tables: state.swap ? state.tables : newTables, |
| 131 | + swapTables: state.swap ? newTables : state.swapTables, |
| 132 | + }); |
| 133 | + }, |
| 134 | + [state] |
| 135 | + ); |
| 136 | + |
| 137 | + const onClickToggleMount = () => |
| 138 | + setState((old) => ({ ...old, mounted: !state.mounted })); |
| 139 | + |
| 140 | + // swaps the tables out but uses the same name of them. |
| 141 | + // this keeps the layout the same, but the data within each viewer changes |
| 142 | + const swapTables = React.useCallback(() => { |
| 143 | + setState({ |
| 144 | + ...state, |
| 145 | + swap: !state.swap, |
| 146 | + }) |
| 147 | + }, [state]); |
| 148 | + |
| 149 | + return ( |
| 150 | + <div className="workspace-container"> |
| 151 | + <div className="workspace-toolbar"> |
| 152 | + <button className="toggle-mount" onClick={onClickToggleMount}> |
| 153 | + Toggle Mount |
| 154 | + </button> |
| 155 | + <button className="add-viewer" onClick={onClickAddViewer}> |
| 156 | + Add Viewer |
| 157 | + </button> |
| 158 | + <button className="swap" onClick={swapTables}> |
| 159 | + Swap underlying tables |
| 160 | + </button> |
| 161 | + </div> |
| 162 | + {state.mounted && ( |
| 163 | + <PerspectiveWorkspace |
| 164 | + tables={state.swap ? state.swapTables : state.tables} |
| 165 | + config={state.config} |
| 166 | + onLayoutUpdate={onLayoutUpdate} |
| 167 | + /> |
| 168 | + )} |
| 169 | + </div> |
| 170 | + ); |
| 171 | +}; |
| 172 | + |
| 173 | +createRoot(document.getElementById("root")!).render(<WorkspaceApp />); |
0 commit comments