Graph View

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.

Tutorial

Web Plugin

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

app.registerJavaScript("/org/visallo/examples/graph_view/plugin.js", true);
app.registerJavaScriptComponent("/org/visallo/examples/graph_view/View.jsx");
app.registerLess("/org/visallo/examples/graph_view/style.less");

Register Extension

Register the options extension pointing to the React component.

visallo.registry.registerExtension('org.visallo.graph.view', {
    componentPath: 'org/visallo/examples/graph_view/View'
});

Component

Create the graph view component. This one will be like a floating toolbar panel.

const GraphViewExample = React.createClass({
    render() {
        return (
            <div className="org-visallo-examples-graph-view">
                Custom palette
                <div className="btn-toolbar">
                    <div className="btn-group">
                        <button className="btn btn-mini">A</button>
                        <button className="btn btn-mini">B</button>
                        <button className="btn btn-mini">C</button>
                    </div>
                    <div className="btn-group">
                        <button className="btn btn-mini">D</button>
                        <button className="btn btn-mini">E</button>
                    </div>
                </div>
            </div>
        )
    }
});

Style

The less style file is wrapped in the class name defined in the component to avoid conflicts with other plugins and core Visallo styles.

.org-visallo-examples-graph-view {

  background: #ececec;
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  border: 1px solid #bdbdbd;
  box-shadow: 0 0px 20px rgba(0,0,0,0.1);
  border-radius: 2px;
  color: #4c4c4c;
  text-align: center;

  .btn-toolbar {
    margin: 0;
  }
    
}

results matching ""

    No results matching ""