Extension Points


Custom activity rows based on events or long running processes

Activity items display in the floating panel accessed from the menubar gears icon.


Add admin tools to admin pane

Renders a new link to an admin form in the admin list (opened from menubar icon.)

The component is placed in a pane next to the admin list and automatically will scroll if the height is larger than window.

One of Component, componentPath, or url is required.


Provides interface for authentication

Provide custom authentication interface to login users.

Visallo will display an error if:

  • No authentication plugins are registered
  • More than one plugins are registered


Add items that can be placed on dashboards

Allow custom content to be rendered in a card on dashboards. They can be included in defaults dashboards using the org.visallo.dashboard.layout extension, or added manually by users using the "Add Item" button when editing dashboards.

The bundled items are defined in registerDefaultItems.js for examples.

Either componentPath or report is required.


Instead of specifying a component to render, specify a report template that requests data from the server and passes the results to a org.visallo.dashboard.reportRenderer that can handle that data. The most common report uses search with aggregations configured.

An item can be a report if either:

  • The extension defines the report
  • a component registered with componentPath saves a report inside the items configuration, e.g. item.configuration.report = { ... }


Define dashboard layout for new cases

When a new case is created or new user logs in, this will define the default dashboard items and their layout. The user is able to modify it upon its creation.

Only one extension should be registered or an error will log to console. The default layout is defined in defaultLayout.js.


Define custom report renderers for dashboard

Adds additional output types for dashboard items that define a report or item.configuration.report.

There are several built-in renderers defined in reportRenderers.js.

withReportRenderer Mixin

If the renderer uses the mixin, the only function required is render. Optionally, a processData function can be defined to transform the raw server results. It's better to process the data in processData function instead of render because it will run once on refreshData events, instead of on every reflow event.

The render function is called with four parameters render(d3, svgNode, data, d3tip)

  • d3 [Object] The d3 library object
  • node [DomElement] The dom element to populate
  • data [?] The response from the server (after processData)
  • d3tip [Object] The d3tip library object (for tooltips)


Define toolbar items for dashboard cards

Allows custom buttons to be rendered next to the cards configuration button. These buttons (displayed as icons) can send an event on click, or specify content to be rendered in a popover.


Replace Extracted Text with custom component

Replaces the content of a collapsible text section in the inspector.

Only one extension can replace a given text section, the first one will win.


Add Inspector toolbar items

These items can be added to single entity/edge inspectors, or the multiple selection inspector (or both). Use canHandle to specify what inspectors to apply to.


Add edge context menu items

Add menu items to the context menu of edges.

Pass the string DIVIDER to place a divider in the menu


Implement custom implementations for rendering items into element lists

This allows plugins to adjust how list items are displayed in search results, details panels, or anywhere else the lists are used.

Requires either component or componentPath.

The item property passed to Component can differ depending on usageContext.

usageContext == 'detail/relationships' => { vertex, relationship }
usageContext == 'searchresults' => The element


Function that can change cytoscape classes of nodes

Register a function that can add or remove classes from cytoscape collapsed nodes for custom styling.


Function that can change cytoscape classes of edges

Register a function that can add or remove classes from cytoscape edges for custom styling.


Add menu options to export graph / workspace

Allows a custom component to render to configure how to export.


Add new cytoscape layouts to graph menu

Extension to add new graph layouts that are accesible from the layout context menu.

the identifier is used for the menu option text and should be in the plugins message bundle:

 graph.layout.myLayout.displayName=My Layout


Function that can change cytoscape classes of nodes

Register a function that can add or remove classes from cytoscape nodes for custom styling.


Add decoration text/images around the node

Graph decorations are additional detail to display around a vertex when displayed in a graph. These decorations are implemented as cytoscape.js nodes inside of compound nodes. That allows them to be styled just like vertices using org.visallo.graph.style extensions.


Add custom graph selection menu items

Add custom cytoscape selection menu items. Graph provides select all, none, and invert by default.

The text displayed to the user uses the message bundle key:

 graph.selector.[identifier].displayName=Selection Text to Display


Apply additional cytoscape styles

Add to the cytoscape stylesheet. Cytoscape docs

This is used to adjust the styling of all graph elements: Nodes, Edges, Decorations, etc.

The default stylesheet is defined in styles.js


Add components to graph container

Plugin to add custom view components which overlay the graph. Used for toolbars, etc., that interact with the graph.

Views can be Flight or React components and should be styled to be absolutely positioned. The absolute position given is relative to the graph. 0,0 is top-left corner of graph *


Specify cloud destinations for ingestion

Create custom endpoints to ingest content into Visallo. A Long running process will process the loading of content asynchronously. Plugins register a CloudResourceSource that returns items given a JSON configuration object generated by a custom component in the UI.

Cloud import items are available in the file import popover.

Visallo includes a plugin for Amazon S3


Define the layout of the Inspector based on content

The detail pane is rendered using a custom layout engine consisting of a tree of layout components.

Layout Components are nodes in the layout tree that define the type of layout and what children are included in the layout.

The children defined in a layout component can be references (ref) to other components, or FlightJS components specified with a componentPath. Layout components can also specify a flight component to be attached to the node for implementing behavior.

Exactly one of the following is required: render, collectionItem or children (i.e., you cannot supply both render and collectionItem).


Handles the layout of children within a component

Visallo includes the Flex layout type.

Layout components are passed properties: layoutConfig and children


Override logout

Register a handler that is notified of logout. Happens before the request to logout.

If the handler returns false all other logout handlers are skipped and the default logout process is cancelled.


Add items to menubar

Add additional icons into the menubar that can open a slide out panel or display a component in the content area like the built in dashboard.

For placement hints options, these are the built-in identifiers: dashboard, search, workspaces (cases), products, admin, activity, logout.

All pane type extensions will automatically save/restore pane size as a user preference.


Add components to the product toolbar

Plugin to add custom item components (Flight or React) which display in toolbar at the top right of a product.


Add alternate search interfaces

Alternate search interfaces to replace the content in the search pane.

Each of the search interfaces has its own saved searches.


Add toolbar icons under search query box

Search toolbar items display below the search query input field.

They have access to the current search query (if available), and can react to click events with content in a popover, or a custom event.


Add new tabs to user account modal dialog

Create new clickable sections in the user account dialog accessed when clicking the username in the case overlay.

Create a key in a message bundle for the name of the section:

 useraccount.page.[Identifier].displayName=[String to display]


Add vertex context menu items

Add menu items to the context menu of vertices.

Pass the string DIVIDER to place a divider in the menu


Implement custom interface for visibility display and editing

Plugin to configure the user interface for displaying and editing visibility authorization strings.

The visibility component requires two FlightJS components registered for viewing and editing:


Add custom websocket message handlers

Extension to register new listeners for websocket messages. Must be registered in JavaScript file registered with app.registerWebWorkerJavaScript in web app plugin.