Graph Options

Plugin to add custom options components (Flight or React) which display in the graph options menu (next to Fit) when the menu is opened.


For this tutorial we'll create a new options extension that adds a preferenced-backed checkbox. This could be used for toggling some built-in graph styles, for example.

Web Plugin

Register the plugin script and React component in a web plugin.

app.registerJavaScript("/org/visallo/examples/graph_options/plugin.js", true);

Register Extension

Register the options extension pointing to the React component.

visallo.registry.registerExtension('org.visallo.graph.options', {
    identifier: 'org-visallo-examples-graph-opts',
    optionComponentPath: 'org/visallo/examples/graph_options/React'


Create the component that renders a checkbox, and looks up user preferences.

define(['public/v1/api', 'react'], function(api, React) {

    const PREF_NAME = 'my-option-value'

    const MyOption = React.createClass({
        render() {
            const { cy } = this.props;
            const myOptionDefault = visalloData.currentUser.uiPreferences[PREF_NAME];
            return (
                <label>My Setting
                        defaultChecked={myOptionDefault} />

Implement the saving of the preference when the user clicks the checkbox. This updates the in memory user object, and updates the server.

onChange(event) {
    const { checked } =;
    visalloData.currentUser.uiPreferences[PREF_NAME] = checked;
        .then(c => c.dataRequest('user', 'preference', PREF_NAME, checked))
        .then(() => console.log('saved'))

results matching ""

    No results matching ""