Dashboards

Dashboards provide a way to create applications with multiple pages displaying collections of components. This is particularly useful in the development stage to allow developers to customize the user interface to their needs. Dashboards provide an interface similar to Tensorboard, Tensorflow's visualization toolkit. Programming a dashboard only requires specifying pages with the list of component instances to display on each page.

In Marcelle, dashboards are applications that can be displayed on demand on top of any existing web application.

Installation

To install the package:

npm

npm install @marcellejs/layouts

yarn

npm add @marcellejs/layouts

pnpm

pnpm add @marcellejs/layouts

To use the package in your app, import both the CSS and the JS constructors:

import '@marcellejs/layouts/dist/marcelle-layouts.css';
import { dashboard } from '@marcellejs/layouts';

Dashboard

The following factory function creates and returns an empty Dashboard Application:

function dashboard({
  title: string;
  author: string;
  closable?: boolean;
}): Dashboard

Parameters

Parameter	Type	Description	Required	Default
title	String	The application's title.
author	String	The application's authors/credits.
closable	boolean	Whether the dashboard can be closed. This flag adds a close button to the menu bar, and is useful when the dashboard is displayed on demand		false

properties

Name	Type	Description	Hold
$active	Stream<boolean>	Stream specifying whether the dashboard is active (visible) or not	✓
$page	Stream<string>	Stream indicating the current page slug	✓

Example

const dash = dashboard({
  title: 'Marcelle Example - Dashboard',
  author: 'Marcelle Pirates Crew',
});

dash
  .page('Data Management')
  .sidebar(input, featureExtractor)
  .use([label, capture], trainingSetBrowser);
dash.page('Training').use(params, b, prog, plotTraining);
dash.page('Batch Prediction').use(predictButton, confusionMatrix);
dash.settings.dataStores(store).datasets(trainingSet).models(classifier).predictions(batchMLP);

.hide()

Dashboard.hide(): void

Hide the dashboard application. This destroys the current view, if it exists, but preserves the configuration, meaning that the dashboard can still be re-started.

.page()

Dashboard.page(name: string, showSidebar?: boolean): DashboardPage

Create a new page on the dashboard entitled name, and returns the corresponding DashboardPage instance.

.settings

Dashboard.settings: DashboardSettings

The dashboard's settings. See DashboardSettings.

.show()

Dashboard.show(): void

Show the dashboard application. The application, a Svelte component instance, is mounted on the document's body, creating an overlay on the current web page without destroying any content.

DashboardPage

Dashboard pages are simply components containers. They are created using the page method of a Dashboard.

.use()

use(...components: Array<Component | Component[] | string>): DashboardPage

The use method takes an arbitrary number of arguments specifying the components to display on the page. By default, components are stacked vertically in the right column of the page. Each argument can either be:

• A component (Component, displayed full-width on the right column
• An array of component, which are then distributed horizontally
• A string, which defines a section title

.sidebar()

sidebar(...components: Component[]): DashboardPage {
  this.componentsLeft = this.componentsLeft.concat(components);
  return this;
}

The sidebar method is similar to use except that components are placed on the left column of the dashboard page. The method only accept components as argument.

DashboardSettings

Specifies the contents of the dashboards settings panel.

.datasets()

datasets(...datasets: Dataset[]): DashboardSettings

Specify the datasets that can be managed in the settings panel.

.dataStores()

dataStores(...stores: DataStore[]): DashboardSettings

Specify the data stores that can be managed in the settings panel.

.models()

models(...models: Model<any, any>[]): DashboardSettings

Specify the models that can be managed in the settings panel.

.predictions()

predictions(...predictions: BatchPrediction[]): DashboardSettings

Specify the batch prediction components that can be managed in the settings panel.

.use()

use(...components: Array<Component | Component[] | string>): DashboardSettings

The use method takes an arbitrary number of arguments specifying the components to display on the page. By default, components are stacked vertically in the right column of the page. Each argument can either be:

• A component (Component, displayed full-width on the right column
• An array of component, which are then distributed horizontally
• A string, which defines a section title