<cdk-virtual-scroll-viewport
  #cvsvOrganization
  itemSize="40"
  perfectScrollbar
  fxFlexFill
>
  <ng-container
    *cdkVirtualFor="let node of dataSource.expandedData$"
  ></ng-container>
  <mat-tree
    #orgranizationTree
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    class="organization-tree"
  >
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node"
      matTreeNodePadding
      class="mat-tree-last-node"
    >
      <li (click)="onClickNode(node)" matRipple>
        <div>
          {{ node.name }}
        </div>
      </li>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node; when: hasChild"
      matTreeNodePadding
      class="tree-node-frame"
    >
      <li (click)="onClickNode(node)" matRipple>
        <div class="path">
          <span class="horizontal-line"></span>
          <button
            mat-icon-button
            color="accent"
            matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename"
          >
            <mat-icon class="mat-icon-rtl-mirror">
              <!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
            </mat-icon>
          </button>
          <span class="dept-name">{{ node.name }}</span>
        </div>
        <ul
          [class.organization-tree-node-invisible]="
            !treeControl.isExpanded(node)
          "
        >
          <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
            <div class="vertical-line"></div>
            <ng-container matTreeNodeOutlet></ng-container>
          </div>
        </ul>
      </li>
    </mat-tree-node>
  </mat-tree>
</cdk-virtual-scroll-viewport>
