UI

csp-gateway provides an automatically generated UI based on React and Perspective.

Note

To enable the UI, ensure you run your Gateway with ui=True and include the MountPerspectiveTables module.

Perspective

Perspective is an interactive analytics and data visualization component, which is especially well-suited for large and/or streaming datasets. See the Perspective Documentation (and the media section in particular) for more information on how to use Perspective.

Top Bar

The top bar has several buttons on the righthand side for selecting/saving/downloading layouts, toggling light/dark mode, and opening the settings drawer.

Layouts

Perspective layouts are driven via JSON. You can drag/drop to build your own layout, and click the save button to store it locally in your browser. Layouts can also be downloaded as a JSON, and integrated into the server-side configuration for sharing across multiple users.

modules:
  mount_perspective_tables:
    _target_: csp_gateway.MountPerspectiveTables
    layouts:
      A Layout Name: "<The JSON you downloaded>"

Settings

The rightmost top bar button opens the settings drawer. Depending on your server configuration, this has one or more Controls.

• "Big Red Button": Shut down the backend Gateway server
• Email: if your server settings have an email contact, this will generate a mailto: link
• Logs: if your server includes the MountOutputsFolder module, this will link to an integrated log and configuration viewer
• Graph View: if your server includes the MountChannelsGraph module, this will link to an integrated graph viewer

Frontend providers

The UI above is served by spaday, the default frontend provider. The legacy React/Perspective frontend is still available, selected per gateway with the UI_PROVIDER setting. Both render the same pieces from the same modules — the Perspective workspace, layout selector, theme toggle, and the settings-drawer actions (shutdown, logs, channels graph, email) — and the spaday provider adds a "send to a channel" form panel.

Select a provider in your gateway configuration:

port: 8000

gateway:
  settings:
    UI_PROVIDER: spaday

UI_PROVIDER defaults to spaday; set it to default for the legacy React/Perspective UI, which requires the bundled Javascript build and is slated for removal. Everything else — modules, the REST API, authentication, and ROOT_PATH sub-path serving — behaves the same.

The white-labeling settings (TITLE, HEADER_LOGO, FOOTER_LOGO, CUSTOM_CSS, CUSTOM_JS, CUSTOM_STATIC_DIR) apply to both providers, with one difference under spaday: CUSTOM_JS files are imported as ES modules rather than loaded as classic <script> tags, so a custom script cannot rely on being in global scope.

The spaday UI takes its colours from the shell's own light and dark palettes, which are published as the --spa-surface, --spa-surface-2, --spa-border and --spa-muted custom properties at zero specificity. A CUSTOM_CSS file is linked after them, so redefining those properties is enough to rebrand the chrome:

spa-app { --spa-surface: #ffffff; --spa-border: #dde3ec; }
html.wa-dark spa-app { --spa-surface: #222b39; --spa-border: #3b4860; }

Component internals are shadow DOM and cannot be selected from an external stylesheet, so restyling those means setting the WebAwesome custom properties they document rather than writing rules against their markup.