Tree Component

A tree component, to display hierarchical data.

Displays several TreeItem entries recursively. This recursion approach was based on the FreeCodeCamp Tree Browser implementation.

It keeps three caches (Sets), one for the TreeItem entries, one for the entries that are expanded, and one for the entries that are active.

The cache collections are used to avoid having to iterate all the entries for operations such as "Expand All" and "Collapse All", and were based on the Vuetify VTreeView component implementation.

Requirements

This component utilizes the Cylc TreeItem component, as well as Vuetify 1.5 components like VLayout, VFlex, etc.

Data

treeItemCache

Cache of TreeItem entries.

activeCache

Cache of active entries (see prop activable).

Props

workflows

The main data structure. It is based on the response of the GraphQL query, but with a few modifications. In order to support recursion in the component, we need a fixed entry with the children nodes. Plus, in order to allow for customization based on the type of the node, it also requires a custom field __type.

• type: Array
• required: true
• example:

[
  {
    __type: 'workflow',
    id: 'user/workflow1',
    name: 'workflow1',
    status: 'running',
    children: [
      {
        __type: 'checkpoint',
        id: '20100101T0000Z',
        name: '20100101T0000Z',
        state: 'failed',
        children: [
          {
            __type: 'task',
            id: 'user/workflow1/20100101T0000Z/foo',
            name: 'foo',
            state: 'failed',
            children: [
              {
                __type: 'job',
                id: 'user/workflow1/20100101T0000Z/foo/01',
                name: '#1',
                startedTime: '2019-08-19T22:44:42Z',
                state: 'failed',
                submitNum: 1
              }
            ]
          }
        ]
      }
    ]
  }
]

hoverable

Whether each entry in the tree should be highlighted or not when the user hovers the mouse over it.

• type: Boolean
• default: false

hoverable

Whether each entry in the tree should be highlighted or not when the user hovers the mouse over it.

• type: Boolean
• default: false

activable

Whether clicking on the entry in the tree should mark it as active, changing its background color permanently until it is clicked again.

• type: Boolean
• default: false

multipleActive

When enabled, users will be able to mark multiple entries in the tree as active, instead of a single one when activable is set to true.

• type: Boolean
• default: false

minDepth

Defines the minimum depth of items to be included in the rendered tree. The first element in the workflows collection has a depth of 0. Its direct children have depth of 1, and so on. Entries with depth less than minDepth are not displayed, even though its children entries can still be displayed if their depth is greater than minDepth.

• type: Number
• default: 0