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).


registry.registerExtension("org.visallo.layout.component", config)

Configuration Properties:
Name Type Attributes Description
applyTo applyTo | applyToFn <optional>

When does this component get used

identifier string

Identifier of this component for use in other components in package syntax. Also transforms into css class – replacing package periods with dashes

layout object <optional>
Name Type Attributes Description
type string <optional>

Which layout type to render children.

options object <optional>

Layout-specific options

componentPath string <optional>

Additional FlightJS component to attach to this node for behavior

className string <optional>

Additional css classname to add to DOM

render function <optional>

Function that renders the content, is passed the model, and match configuration.

collectionItem child <optional>

Reference to layout component to render for each item in model (requires model to be array).

children array.<org.visallo.layout.component~child> <optional>

Children items to render

Validation Function

Extensions registered must pass this validation check to be used.

function extensionValidator(e) {
    if (!_.isFunction(e.applyTo) && _.isObject(e.applyTo)) {
        var optionalApplyToIsValid = null;
        if (e.applyTo.constraints) {
            optionalApplyToIsValid = _.isArray(e.applyTo.constraints) && e.applyTo.constraints.length;
        if (e.applyTo.contexts) {
            optionalApplyToIsValid = optionalApplyToIsValid && _.isArray(e.applyTo.contexts) && e.applyTo.contexts.length;
        if (optionalApplyToIsValid !== null) {
            return optionalApplyToIsValid;
        return e.applyTo.type || e.applyTo.conceptIri || e.applyTo.edgeLabel || e.applyTo.displayType;
    return _.isArray(e.children) || _.isFunction(e.render) || _.isObject(e.collectionItem);

Type Definitions



Only one of these allowed: conceptIri, edgeLabel, displayType, type*

Name Type Attributes Description
conceptIri string <optional>

Implies vertices, only those whose concept (or ancestor) matches this Iri.

edgeLabel string <optional>

Implies edges, only those whose edgeLabel matches this Iri.

displayType string <optional>

Match ontological displayType option.

type string <optional>

Possible values: vertex, edge, element, element[].

constraints array.<string> <optional>

Possible values: width, height. Match based on the view container, instead of matching model data. Constraints control the layout selection for views that are width, and/or height constrained. The detail pane is set to be width constrained, whereas the full screen view has no constraints.

contexts array.<string> <optional>

For named templates. popup is defined by default for graph previews

applyToFn(model, match) → {boolean}

Name Type Description
model object
match object
Name Type Description
contexts array.<string>
constraints array.<string>

If this component should apply given the model and match




Exactly one of the following is required: ref, or componentPath.

Name Type Attributes Description
style object <optional>

CSS attributes to set on DOM

modelAttribute string <optional>

Use this attribute name instead of model when attaching FlightJS component.

attributes function <optional>

Transform attributes using function when attaching FlightJS component.

model function | object <optional>

Change the model passed to this child, either a function or object.

  • function: Transforms the state of the model at this level in the tree to the child. Return either the transformed model or a Promise.
  • object: Static object to pass as the model.
ref string <optional>

Reference to identifier of layout component to render.

componentPath string <optional>

RequireJS path to FlightJS component to render.