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 cache collections (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. Updated whenever a TreeItem is added to the Tree (or recursively added to another TreeItem).

activeCache

Cache of active entries (see prop activable). Updated whenever the active data property of a TreeItem changes.

expandedCache

Cache of entries that were expanded (i.e. its children are now displayed to the user) (see data (expanded)[expanded]). Updated whenever the expanded prop property of a TreeItem changes.

expanded

Whether the TreeItems added to the Tree must be initially expanded (true) or collapsed (false).

expandFilter

A Function that is used by the method expandAll(#expandAll). When it is not null, expandAll uses this function to filter what entries are expanded or not.

collapseFilter

A Function that is used by the method collapseAll(#collapseAll). When it is not null, collapseAll uses this function to filter what entries are collapsed or not.

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

Slots

TODO

Methods

These methods are used internally by the component. But can be used externally if necessary. There are multiple ways of accessing methods of a component externally, but one of the simplest is to assign a ref ID to the component when created. And then simply call the method.

Example.

<tree
    ref="treeComponent1"
    :workflows="workflowTree"
    :hoverable="hoverable"
    :activable="activable"
    :multiple-active="multipleActive"
    :min-depth="minDepth"
></tree>

And then somewhere in your caller code, you can simply use something similar to <v-btn small @click="$refs.treeComponent1.expandAll()">Expand All</v-btn>.

expandAll (filter = null)

Expands all the entries of the Tree. If a filter is provided, the filter is applied first, and the expandedFilter is updated. The expandedCache is properly updated too.

collapseAll (filter = null)

Collapses all the entries of the Tree. If a filter is provided, the filter is applied first, and the collapsedFilter is updated. The expandedCache is properly updated too (we only need to keep one cache, as we have the complete set domain values in treeItemCache).

Other methods

The component has other methods such as onTreeItemExpanded, onTreeItemCollapsed, onTreeItemCreated, and onTreeItemClicked.

These methods react to events from TreeItem entries, and are not supposed to be extended or called directly.

Demo

Some of these screen shots/casts have been recorded during development, so they may differ a little.

Simple use case

Responsive

What the component looks like when rendered in a browser with mobile viewport.

Changing the minimum depth

When changing the prop minDepth, we can prune the tree, showing only children at a certain depth. In this example, jobs have depth equals 3 (workflows are 0, cyclepoints are 1, and tasks are 2).

Marking entries as active, and using methods to expand and collapse entries

In this example we have added a custom view with controls to customize the component (similar to Vuetify's show case sections).

Summary information

When the user collapses a TreeItem that represents a task, the user is presented with the summary of the task jobs. As the jobs are now hidden (were collapsed), we show them aligned side-by-side next to the task entry.