Building a tree Gantt

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.

Implementing a tree Gantt

To implement a Gantt component in ScheduleJS, 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.

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