Building a tree Gantt
Tags: javascript, webdev, node, typescript
Published: 2024-06-11 07:42:58

## What is a tree Gantt?

The tree Gantt is a component where every row is considered either a tree or a leaf. Tree rows have branches linking to other rows that can be trees or leaves. The leaf row is always the most granular and has no further link.

As a developer, working with tree Gantts can be a tedious task, as most of the algorithms use recursion to visit all the vertices.


![Tree Gantt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoigkqodb5vury1yrjuh.png)

## Implementing a tree Gantt

To implement a Gantt component in [ScheduleJS](https://schedulejs.com/), the first requirement is to extend the right GanttComponentBase. To build a tree Gantt architecture, your Angular component must extend the DefaultScheduleTreeGanttComoponentBase instead of the regular DefaultScheduleGanttComponentBase. 

```
// Create a new tree gantt component

export class MyTreeGanttComponent extends DefaultScheduleTreeGanttComponentBase<MyRow, DefaultScheduleGanttGraphicTreeComponent<MyRow>> { }
```

Storing activities in ScheduleJS always involves an ActivityRepository. There are two different types of repositories:

- The IntervalTreeActivityRepository
- The ListActivityRepository

In the case of a tree Gantt, the default ActivityRepository is an IntervalTreeActivityRepository. It allows your application to perform binary search and ensures higher performance when processing a large number of activities.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n62mv7cbgc1r16vihyh7.png)

Using a tree Gantt component is very similar to using a regular Gantt component, the only difference is that you have to manually call the 

```
gantt.refreshTreeRows()
```
 method once you are done with modifying your rows. This is done to avoid redundancy in calling this function as it may lead to lower performance.

## The ScheduleJS Viewer activity schedule use case

Now we will have a closer look at the HTML file of the ScheduleJS Viewer main component which implements a tree Gantt: the ScheduleJsViewerActivitySchedule. Let’s explain the typical template implemented for the tree Gantt use case.

```
<!-- Activity schedule component -->

<div class="schedule-js-viewer-activity-schedule-container"
     [class.loading]="gantt.isLoading">

  <!-- Schedule timeline & Tree table header cells -->

  <schedule-js-viewer-activity-schedule-timeline-block [gantt]="gantt"
                                                       [scheduleInfoColumns]="scheduleInfoColumns"
                                                       [cellsHost]="this">
  </schedule-js-viewer-activity-schedule-timeline-block>

  <!-- Gantt Graphics -->

  <default-schedule-gantt-graphic-tree class="schedule-js-viewer-activity-schedule-graphics"
                                       [gantt]="gantt"
                                       [ganttNgDoCheckBoundingState]="isTabUsingActivitySchedule()"
                                       [ganttContainerElement]="nativeElement"
                                       [viewportAdditionalLoadCount]="getAdditionalLoadCount()"
                                       [rowInfoTemplate]="rowInfoTemplate"
                                       (rowExpandedChange)="gantt.refreshTreeRows()">

    <!-- Info columns -->

    <ng-template #rowInfoTemplate
                 let-treeNodeContext>
      <schedule-js-viewer-activity-schedule-info-column [cellsHost]="this"
                                                        [scheduleInfoColumns]="scheduleInfoColumns"
                                                        [gantt]="gantt"
                                                        [treeNodeContext]="asTreeNodeContext(treeNodeContext)"
                                                        [row]="treeNodeContext.value"
                                                        [parenthoodColors]="parenthoodColors">
      </schedule-js-viewer-activity-schedule-info-column>
    </ng-template>

  </default-schedule-gantt-graphic-tree>

  <!-- Sub schedules -->

  <div *ngFor="let projectFileData of scheduleJsViewerStateService.projectFiles; let index = index">
    <schedule-js-viewer-activity-sub-schedule *ngIf="projectFileData"
                                              [file]="projectFileData"
                                              [index]="index"
                                              (timelineSyncChange)="onTimelineSubscription($event, index)">
    </schedule-js-viewer-activity-sub-schedule>
  </div>

</div>
```

_There's a lot more to say, but if you'd like to see the rest of the article, I suggest you go to_ [ScheduleJS](https://schedulejs.com/en/building-a-tree-gantt/)