UNPKG

@finos/perspective-viewer

Version:

The `<perspective-viewer>` Custom Element, frontend for Perspective.js

1,012 lines (647 loc) 27.2 kB
# @finos/perspective-viewer Module for the `<perspective-viewer>` custom element. This module has no (real) exports, but importing it has a side effect: the `PerspectiveViewerElement`class is registered as a custom element, after which it can be used as a standard DOM element. Though `<perspective-viewer>` is written mostly in Rust, the nature of WebAssembly's compilation makes it a dynamic module; in order to guarantee that the Custom Elements extension methods are registered synchronously with this package's import, we need perform said registration within this wrapper module. The documentation in this module defines the instance structure of a `<perspective-viewer>` DOM object instantiated typically, through HTML or any relevent DOM method e.g. `document.createElement("perspective-viewer")` or `document.getElementsByTagName("perspective-viewer")`. ## Table of contents ### Classes - [PerspectiveViewerElement](#PerspectiveViewerElement) - [PerspectiveViewerPluginElement](#PerspectiveViewerPluginElement) ### Interfaces - [IPerspectiveViewerPlugin](#IPerspectiveViewerPlugin) ### Type aliases - [PerspectiveViewerConfig](#perspectiveviewerconfig) ## Type aliases ### PerspectiveViewerConfig Ƭ **PerspectiveViewerConfig**: `perspective.ViewConfig` & { `plugin?`: `string` ; `plugin_config?`: `any` ; `settings?`: `boolean` } #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:16](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L16) # Interface: IPerspectiveViewerPlugin The `IPerspectiveViewerPlugin` interface defines the necessary API for a `<perspective-viewer>` plugin, which also must be an `HTMLElement` via the Custom Elements API or otherwise. Rather than implement this API from scratch however, the simplest way is to inherit from `<perspective-viewer-plugin>`, which implements `IPerspectiveViewerPlugin` with non-offensive default implementations, where only the `draw()` and `name()` methods need be overridden to get started with a simple plugin. Note that plugins are frozen once a `<perspective-viewer>` has been instantiated, so generally new plugin code must be executed at the module level (if packaged as a library), or during application init to ensure global availability of a plugin. **`example`** ```javascript const BasePlugin = customElements.get("perspective-viewer-plugin"); class MyPlugin extends BasePlugin { get name() { return "My Plugin"; } async draw(view) { const count = await view.num_rows(); this.innerHTML = `View has ${count} rows`; } } customElements.define("my-plugin", MyPlugin); const Viewer = customElements.get("perspective-viewer"); Viewer.registerPlugin("my-plugin"); ``` ## Hierarchy - `HTMLElement` ↳ **`IPerspectiveViewerPlugin`** ## Implemented by - [`PerspectiveViewerPluginElement`](#`PerspectiveViewerPluginElement`) ## Table of contents ### Accessors - [config\_column\_names](#config_column_names) - [min\_config\_columns](#min_config_columns) - [name](#name) - [select\_mode](#select_mode) ### Methods - [clear](#clear) - [delete](#delete) - [draw](#draw) - [resize](#resize) - [restore](#restore) - [restyle](#restyle) - [save](#save) - [update](#update) ## Accessors ### config\_column\_names • `get` **config_column_names**(): `string`[] The named column labels, if desired. Named columns behave differently in drag/drop mode than unnamed columns, having replace/swap behavior rather than insert. If provided, the length of `config_column_names` _must_ be `>= min_config_columns`, as this is assumed by the drag/drop logic. #### Returns `string`[] #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:80](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L80) ___ ### min\_config\_columns • `get` **min_config_columns**(): `number` The minimum number of columns required for this plugin to operate. This mostly affects drag/drop and column remove button behavior, preventing the use from applying configs which violate this min. While this option can technically be `undefined` (as in the case of `@finos/perspective-viewer-datagrid`), doing so currently has nearly identical behavior to 1. #### Returns `number` #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:71](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L71) ___ ### name • `get` **name**(): `string` The name for this plugin, which is used as both it's unique key for use as a parameter for the `plugin` field of a `ViewerConfig`, and as the display name for this plugin in the `<perspective-viewer>` UI. #### Returns `string` #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:52](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L52) ___ ### select\_mode • `get` **select_mode**(): ``"select"`` \| ``"toggle"`` Select mode determines how column add/remove buttons behave for this plugin. `"select"` mode exclusively selects the added column, removing other columns. `"toggle"` mode toggles the column on or off (dependent on column state), leaving existing columns alone. #### Returns ``"select"`` \| ``"toggle"`` #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:60](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L60) ## Methods ### clear ▸ **clear**(): `Promise`<`void`\> Clear this plugin, though it is up to the discretion of the plugin author to determine what this means. Defaults to resetting this element's `innerHTML`, so be sure to override if you want custom behavior. **`example`** ```javascript async clear(): Promise<void> { this.innerHTML = ""; } ``` #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:124](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L124) ___ ### delete**delete**(): `Promise`<`void`\> Free any resources acquired by this plugin and prepare to be deleted. #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:159](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L159) ___ ### draw**draw**(`view`): `Promise`<`void`\> Render this plugin using the provided `View`. While there is no provision to cancel a render in progress per se, calling a method on a `View` which has been deleted will throw an exception. **`example`** ``` async draw(view: perspective.View): Promise<void> { const csv = await view.to_csv(); this.innerHTML = `<pre>${csv}</pre>`; } ``` #### Parameters | Name | Type | | :------ | :------ | | `view` | `View` | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:95](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L95) ___ ### resize**resize**(): `Promise`<`void`\> Like `update()`, but for when the dimensions of the plugin have changed and the underlying data has not. #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:130](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L130) ___ ### restore**restore**(`config`): `Promise`<`void`\> Restore this plugin to a state previously returned by `save()`. #### Parameters | Name | Type | | :------ | :------ | | `config` | `any` | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:154](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L154) ___ ### restyle**restyle**(): `Promise`<`void`\> Notify the plugin that the style environment has changed. Useful for plugins which read CSS styles via `window.getComputedStyle()`. #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:136](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L136) ___ ### save**save**(): `Promise`<`any`\> Save this plugin's state to a JSON-serializable value. While this value can be anything, it should work reciprocally with `restore()` to return this plugin's renderer to the same state, though potentially with a different `View`. `save()` should be used for user-persistent settings that are data-agnostic, so the user can have persistent view during refresh or reload. For example, `@finos/perspective-viewer-d3fc` uses `plugin_config` to remember the user-repositionable legend coordinates. #### Returns `Promise`<`any`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:149](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L149) ___ ### update**update**(`view`): `Promise`<`void`\> Draw under the assumption that the `ViewConfig` has not changed since the previous call to `draw()`, but the underlying data has. Defaults to dispatch to `draw()`. **`example`** ```javascript async update(view: perspective.View): Promise<void> { return this.draw(view); } ``` #### Parameters | Name | Type | | :------ | :------ | | `view` | `View` | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/plugin.ts:109](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/plugin.ts#L109) # Class: PerspectiveViewerElement The Custom Elements implementation for `<perspective-viewer>`, as well at its API. `PerspectiveViewerElement` should not be constructed directly (like its parent class `HTMLElement`); instead, use `document.createElement()` or declare your `<perspective-viewer>` element in HTML. Once instantiated, `<perspective-viewer>` works just like a standard `HTMLElement`, with a few extra perspective-specific methods. **`example`** ```javascript const viewer = document.createElement("perspective-viewer"); ``` **`example`** ```javascript document.body.innerHTML = ` <perspective-viewer id="viewer"></perspective-viewer> `; const viewer = document.body.querySelector("#viewer"); ``` ## Hierarchy - `HTMLElement` ↳ **`PerspectiveViewerElement`** ## Table of contents ### Data Methods - [getTable](#gettable) - [load](#load) ### Persistence Methods - [reset](#reset) - [restore](#restore) - [save](#save) ### Plugin Methods - [getAllPlugins](#getallplugins) - [getPlugin](#getplugin) - [registerPlugin](#registerplugin) ### UI Action Methods - [copy](#copy) - [download](#download) - [toggleConfig](#toggleconfig) ### Util Methods - [delete](#delete) - [flush](#flush) - [getEditPort](#geteditport) - [notifyResize](#notifyresize) - [restyleElement](#restyleelement) - [setThrottle](#setthrottle) ## Data Methods ### getTable**getTable**(): `Promise`<`Table`\> Returns the `perspective.Table()` which was supplied to `load()`. If `load()` has been called but the supplied `Promise<perspective.Table>` has not resolved, `getTable()` will `await`; if `load()` has not yet been called, an `Error` will be thrown. **`example`** <caption>Share a `Table`</caption> ```javascript const viewers = document.querySelectorAll("perspective-viewer"); const [viewer1, viewer2] = Array.from(viewers); const table = await viewer1.getTable(); await viewer2.load(table); ``` #### Returns `Promise`<`Table`\> A `Promise` which resolves to a `perspective.Table` #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:160](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L160) ___ ### load**load**(`table`): `Promise`<`void`\> Load a `perspective.Table`. If `load` or `update` have already been called on this element, its internal `perspective.Table` will _not_ be deleted, but it will bed de-referenced by this `<perspective-viewer>`. **`example`** <caption>Load perspective.table</caption> ```javascript const my_viewer = document.getElementById('#my_viewer'); const tbl = perspective.table("x,y\n1,a\n2,b"); my_viewer.load(tbl); ``` **`example`** <caption>Load Promise<perspective.table></caption> ```javascript const my_viewer = document.getElementById('#my_viewer'); const tbl = perspective.table("x,y\n1,a\n2,b"); my_viewer.load(tbl); ``` #### Parameters | Name | Type | | :------ | :------ | | `table` | `Table` \| `Promise`<`Table`\> | #### Returns `Promise`<`void`\> A promise which resolves once the data is loaded, a `perspective.View` has been created, and the active plugin has rendered. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:115](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L115) ___ ## Persistence Methods ### reset**reset**(): `Promise`<`void`\> Reset's this element's view state and attributes to default. Does not delete this element's `perspective.table` or otherwise modify the data state. **`example`** ```javascript const viewer = document.querySelector("perspective-viewer"); await viewer.reset(); ``` #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:278](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L278) ___ ### restore ▸ **restore**(`config`): `Promise`<`void`\> Restore this element to a state as generated by a reciprocal call to `save`. In `json` (default) format, `PerspectiveViewerConfig`'s fields have specific semantics: - When a key is missing, this field is ignored; `<perspective-viewer>` will maintain whatever settings for this field is currently applied. - When the key is supplied, but the value is `undefined`, the field is reset to its default value for this current `View`, i.e. the state it would be in after `load()` resolves. - When the key is defined to a value, the value is applied for this field. This behavior is convenient for explicitly controlling current vs desired UI state in a single request, but it does make it a bit inconvenient to use `restore()` to reset a `<perspective-viewer>` to default as you must do so explicitly for each key; for this case, use `reset()` instead of restore. As noted in `save()`, this configuration state does not include the `Table` or its `Schema`. In order for `restore()` to work correctly, it must be called on a `<perspective-viewer>` that has a `Table already `load()`-ed, with the same (or a type-compatible superset) `Schema`. It does not need have the same rows, or even be populated. **`example`** <caption>Restore a viewer from `localStorage`</caption> ```javascript const viewer = document.querySelector("perspective-viewer"); const token = localStorage.getItem("viewer_state"); await viewer.restore(token); ``` #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `config` | `string` \| [`PerspectiveViewerConfig`](#perspectiveviewerconfig) \| `ArrayBuffer` | returned by `save()`. This can be any format returned by `save()`; the specific deserialization is chosen by `typeof config`. | #### Returns `Promise`<`void`\> A promise which resolves when the changes have been applied and rendered. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:203](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L203) ___ ### save ▸ **save**(): `Promise`<[`PerspectiveViewerConfig`](#perspectiveviewerconfig)\> Serialize this element's attribute/interaction state, but _not_ the `perspective.Table` or its `Schema`. `save()` is designed to be used in conjunction with `restore()` to persist user settings and bookmarks, but the `PerspectiveViewerConfig` object returned in `json` format can also be written by hand quite easily, which is useful for authoring pre-conceived configs. **`example`** <caption>Save a viewer to `localStorage`</caption> ```javascript const viewer = document.querySelector("perspective-viewer"); const token = await viewer.save("string"); localStorage.setItem("viewer_state", token); ``` #### Returns `Promise`<[`PerspectiveViewerConfig`](#perspectiveviewerconfig)\> a serialized element in the chosen format. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:230](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L230) ▸ **save**(`format`): `Promise`<[`PerspectiveViewerConfig`](#perspectiveviewerconfig)\> #### Parameters | Name | Type | | :------ | :------ | | `format` | ``"json"`` | #### Returns `Promise`<[`PerspectiveViewerConfig`](#perspectiveviewerconfig)\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:231](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L231) ▸ **save**(`format`): `Promise`<`ArrayBuffer`\> #### Parameters | Name | Type | | :------ | :------ | | `format` | ``"arraybuffer"`` | #### Returns `Promise`<`ArrayBuffer`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:232](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L232) ▸ **save**(`format`): `Promise`<`string`\> #### Parameters | Name | Type | | :------ | :------ | | `format` | ``"string"`` | #### Returns `Promise`<`string`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:233](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L233) ___ ## Plugin Methods ### getAllPlugins ▸ **getAllPlugins**(): `Promise`<`HTMLElement`[]\> Get all plugin custom element instances, in order of registration. If no plugins have been registered (via `registerPlugin()`), calling `getAllPlugins()` will cause `perspective-viewer-plugin` to be registered as a side effect. #### Returns `Promise`<`HTMLElement`[]\> An `Array` of the plugin instances for this `<perspective-viewer>`. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:450](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L450) ___ ### getPlugin ▸ **getPlugin**(`name?`): `Promise`<`HTMLElement`\> Get the currently active plugin custom element instance, or a specific named instance if requested. `getPlugin(name)` does not activate the plugin requested, so if this plugin is not active the returned `HTMLElement` will not have a `parentElement`. If no plugins have been registered (via `registerPlugin()`), calling `getPlugin()` will cause `perspective-viewer-plugin` to be registered as a side effect. #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `name?` | `string` | Optionally a specific plugin name, defaulting to the current active plugin. | #### Returns `Promise`<`HTMLElement`\> The active or requested plugin instance. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:433](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L433) ___ ### registerPlugin ▸ `Static` **registerPlugin**(`name`): `Promise`<`void`\> Register a new plugin via its custom element name. This method is called automatically as a side effect of importing a plugin module, so this method should only typically be called by plugin authors. **`example`** ```javascript customElements.get("perspective-viewer").registerPlugin("my-plugin"); ``` #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `name` | `string` | The `name` of the custom element to register, as supplied to the `customElements.define(name)` method. | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:87](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L87) ___ ## UI Action Methods ### copy ▸ **copy**(`flat`): `Promise`<`void`\> Copies this element's view data (as a CSV) to the clipboard. This method must be called from an event handler, subject to the browser's restrictions on clipboard access. See [https://www.w3.org/TR/clipboard-apis/#allow-read-clipboard](https://www.w3.org/TR/clipboard-apis/#allow-read-clipboard). **`example`** ```javascript const viewer = document.querySelector("perspective-viewer"); const button = document.querySelector("button"); button.addEventListener("click", async () => { await viewer.copy(); }); ``` #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `flat` | `boolean` | Whether to use the element's current view config, or to use a default "flat" view. | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:327](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L327) ___ ### download ▸ **download**(`flat`): `Promise`<`void`\> Download this element's data as a CSV file. #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `flat` | `boolean` | Whether to use the element's current view config, or to use a default "flat" view. | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:304](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L304) ___ ### toggleConfig ▸ **toggleConfig**(`force?`): `Promise`<`void`\> Opens/closes the element's config menu, equivalent to clicking the settings button in the UI. This method is equivalent to `viewer.restore({settings: force})` when `force` is present, but `restore()` cannot toggle as `toggleConfig()` can, you would need to first read the settings state from `save()` otherwise. Calling `toggleConfig()` may be delayed if an async render is currently in process, and it may only partially render the UI if `load()` has not yet resolved. **`example`** ```javascript await viewer.toggleConfig(); ``` #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `force?` | `boolean` | If supplied, explicitly set the config state to "open" (`true`) or "closed" (`false`). | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:413](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L413) ___ ## Util Methods ### delete ▸ **delete**(): `Promise`<`void`\> Deletes this element and clears it's internal state (but not its user state). This (or the underlying `perspective.view`'s equivalent method) must be called in order for its memory to be reclaimed, as well as the reciprocal method on the `perspective.table` which this viewer is bound to. #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:292](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L292) ___ ### flush ▸ **flush**(): `Promise`<`void`\> Flush any pending modifications to this `<perspective-viewer>`. Since `<perspective-viewer>`'s API is almost entirely `async`, it may take some milliseconds before any method call such as `restore()` affects the rendered element. If you want to make sure any invoked method which affects the rendered has had its results rendered, call and await `flush()` **`example`** <caption>Flush an unawaited `restore()`</caption> ```javascript const viewer = document.querySelector("perspective-viewer"); viewer.restore({row_pivots: ["State"]}); await viewer.flush(); console.log("Viewer has been rendered with a pivot!"); ``` #### Returns `Promise`<`void`\> A promise which resolves when the current pending state changes have been applied and rendered. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:261](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L261) ___ ### getEditPort ▸ **getEditPort**(): `Promise`<`number`\> Gets the edit port, the port number for which `Table` updates from this `<perspective-viewer>` are generated. This port number will be present in the options object for a `View.on_update()` callback for any update which was originated by the `<perspective-viewer>`/user, which can be used to distinguish server-originated updates from user edits. **`example`** ```javascript const viewer = document.querySelector("perspective-viewer"); const editport = await viewer.getEditPort(); const table = await viewer.getTable(); const view = await table.view(); view.on_update(obj => { if (obj.port_id = editport) { console.log("User edit detected"); } }); ``` #### Returns `Promise`<`number`\> A promise which resolves to the current edit port. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:368](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L368) ___ ### notifyResize ▸ **notifyResize**(): `Promise`<`void`\> Redraw this `<perspective-viewer>` and plugin when its dimensions or visibility have been updated. This method _must_ be called in these cases, and will not by default respond to dimension or style changes to its parent container. `notifyResize()` does not recalculate the current `View`, but all plugins will re-request the data window (which itself may be smaller or larger due to resize). **`example`** <caption>Bind `notfyResize()` to browser dimensions</caption> ```javascript const viewer = document.querySelector("perspective-viewer"); window.addEventListener("resize", () => viewer.notifyResize()); ``` #### Returns `Promise`<`void`\> A `Promise<void>` which resolves when this resize event has finished rendering. #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:139](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L139) ___ ### restyleElement ▸ **restyleElement**(): `Promise`<`void`\> Restyles the elements and to pick up any style changes. While most of perspective styling is plain CSS and can be updated at any time, some CSS rules are read and cached, e.g. the series colors for `@finos/perspective-viewer-d3fc` which are read from CSS then reapplied as SVG and Canvas attributes. #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:341](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L341) ___ ### setThrottle ▸ **setThrottle**(`value?`): `Promise`<`void`\> Determines the render throttling behavior. Can be an integer, for millisecond window to throttle render event; or, if `undefined`, will try to determine the optimal throttle time from this component's render framerate. **`example`** <caption>Limit FPS to 1 frame per second</caption> ```javascript await viewer.setThrottle(1000); ``` #### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `value?` | `number` | an optional throttle rate in milliseconds (integer). If not supplied, adaptive throttling is calculated from the average plugin render time. | #### Returns `Promise`<`void`\> #### Defined in [rust/perspective-viewer/src/ts/viewer.ts:389](https://github.com/finos/perspective/blob/e19cc4010/rust/perspective-viewer/src/ts/viewer.ts#L389)