Formula1

A form library based on react-bootstrap v3

Components:

Tree

A hierarchical tree structure that allows navigation through search and expand/collapse. Selection can be any node in the tree or can be limited to leaf nodes only.

JSON data is passed in to populate the tree.

{
    "name": "Associations",
    "value": null,
    "children": [
        {
            "name": "Platforms",
            "value": null,
            "type": 9,
            "children": [
                {
                    "type": 9,
                    "name": "Brain Simulation Platform",
                    "value": 2
                },
                {
                    "type": 9,
                    "name": "High Performance Analytics and Computing Platform",
                    "value": 3
                }
                .
                .
                .
            ]
        },
        {
            "name": "Website Categories",
            "value": null,
            "type": 16,
            "children": [
                {
                    "type": 16,
                    "name": "Understanding Cognition",
                    "value": 4
                }
                .
                .
                .
            ]
        }
        .
        .
        .
    ]
}

The visible labels for the nodes are specified by mappingLabel.

The callback method is specified by onSelect.

The value passed to the callback method on node selection is specified by mappingValue.

An example of rendering the tree:

  render() {
    return (
      <div>
        <Tree
          data={this.tree}
          onSelect={this.onSelect.bind(this)} 
          mappingLabel="name"
          mappingValue={["value","type"]}
          selectOnlyLeaf={true}
          showOnlySearchedNodes={true}
          defaultExpanded={['.','.']}
        />
      </div>
    );
  }

Javadoc for all parameters:

/**
 * @param {array} data {} - The tree structure to select from, must be an object with eventually an array of children
 * @param {function} onSelect {} - The callback to receive the selected node
 * @param {string} mappingLabel "label" - the name of the node object field related to the node label
 * @param {string | array} mappingValue "value" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes
 * @param {string} mappingChildren "children" - the name of the node object field related to the node children
 * @param {boolean} selectOnlyLeaf false - If enabled, only leaves can be selected and not the intermediary nodes
 * @param {boolean} expandToSelectedNodes false - If enabled, tree selection modal will recursively expand to all the already selected values
 * @param {array} defaultExpanded [] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)
 * @param {boolean} showOnlySearchedNodes false - Flag that determines if nodes that doesn't match the text search should be hidden
 */

History:

I instigated the forerunner of this package, hbp-quickfire, while working on the Human Brain Project in Geneva, Switzerland.

I was product owner of two systems:

• DataWorkbench - A metadata curation and search tool for neuroscience big-data
• PLUS - A web-based project management tool for use by the 100+ academic institutions involved in the HBP

Both of these were based on React/Bootstrap and needed sophisticted form controls for navigation and capture.

My team included Benoit Baumatin and Florian Duerlain, two talented and productive developers. They produced the bulk of the functionality in 'quickfire' and this library aims to take their work forward.