Javascript plugins

Javascript Plugins allow users to add custom UI elements and code to the Deephaven Web UI.

The template below provides steps to create a Javascript Plugin.

Note

See: For more details and examples, see our GitHub repository.

Initial setup

After checking out this template for the first time, run the following in your command line:

npm install

Source files

Your main source file is src/index.js. It defaults to ExamplePlugin.jsx from the examples directory, which is a Table Plugin. You may want to overwrite with ExampleAppPlugin.jsx if you are writing an App Plugin.

Copy any included source files into src maintaining their directory structure (none are needed for the examples).

Build the plugin

Run the following:

/npx webpack --config webpack.config.js

Your output will be in dist/main.js.

Uploading the plugin

  1. Create a directory on the Server to place the plugins.

  2. Set the config value for Webapi.plugins to point to the plugins directory.

  3. Copy the output file main.js to that directory on the server and rename it (e.g., ExamplePlugin.js).

  4. The file name is used as the name of the plugin; e.g. ExamplePlugin.js will be named ExamplePlugin.

Attach a plugin in a query

Simply set the PLUGIN_NAME attribute on the Table with the name of the plugin.

For a plugin located at https://host/url/iriside/plugins/ExamplePlugin.js, the name will be ExamplePlugin.

t=db.t("LearnDeephaven", "StockTrades").where("Date=`2017-08-21`")
t.setAttribute("PluginName", "ExamplePlugin")

Setting an Application Level plugin

In the config, set Webapi.app.plugins to your plugin name. This can be a comma separated list to support multiple plugins.

Login Plugin

A Login Plugin loads before the user logs in to the Web Client, and it allows UI permissions to be set. See ExampleLoginPlugin.jsx for an example.

The current supported permissions are:

  • canUsePanels - Allows the user access to the Panels button in the UI.
  • canCreateDashboard - Allows the user to create a new Dashboard.
  • canCreateCodeStudio - Allows the user to create a new Code Studio.
  • canCreateQueryMonitor - Allows the user to create a new Query Monitor.
  • canCopy - Allows the user to copy cells and rows from a table.
  • canDownloadCsv - Allows the user to download a table to CSV.
  • canShareDashboards - Allows the user to share dashboards that they are the owner of.
  • canViewDashboardSharedUsers - Allows the user to view the list of users a dashboard is shared with for a dashboard they are a viewer of.
  • canShareQueries - Allows users to share queries that they are the owner of.
  • canViewQuerySharedUsers - Allows the user to view the list of users a query is shared with for a query they are a viewer of.

All permissions default to true but can be set to false for certain users or groups to disable functionality. This is done by calling the onPermissionOverrides function in componentDidMount:

  • Return an object with only the permissions that need to be changed.
  • If a user should have the default permissions, return an empty object.

Setting a Login Plugin

As with other plugin types, you must have a plugin directory configured and copy the Login Plugin to that directory.

Then, in the config, set Webapi.login.plugins to your plugin name. This can be a comma separated list to support multiple login plugins.

Finally, you must add the following to the Auth Config:

authentication.client.configuration.list=Webapi.login.plugins

This last step allows the login plugin to load prior to the user logging in.