family tree widget

// family-tree.ts

import {
  CompositeTreeNode,
  ExpandableTreeNode,
  SelectableTreeNode,
  TreeImpl,
  TreeNode
} from "@theia/core/lib/browser";

export default class FamilyTree extends TreeImpl {
  async resolveChildren(parent: CompositeTreeNode): Promise<TreeNode[]> {
    if (FamilyMemberNode.is(parent)) {
      const memberNode = parent as FamilyMemberNode;

      if (!memberNode.children) return [];
      return memberNode.familyMember.children.map(child =>
        FamilyMemberNode.toNode(child, parent)
      );
    }
    return Array.from(parent.children);
  }
}

export interface FamilyMember {
  name: string;
  children: FamilyMember[];
}

export interface FamilyMemberNode
  extends SelectableTreeNode,
    ExpandableTreeNode {
  familyMember: FamilyMember;
}

export namespace FamilyMemberNode {
  export function is(node: object | undefined): node is FamilyMemberNode {
    return !!node && "familyMember" in node;
  }

  export function toNode(
    member: FamilyMember,
    parent: CompositeTreeNode | undefined = undefined
  ): FamilyMemberNode {
    const node: FamilyMemberNode = {
      id: member.name,
      name: member.name,
      familyMember: member,
      selected: false,
      visible: true,
      expanded: false,
      children: [],
      parent
    };
    return node;
  }
}

// family-tree-model.ts

import { TreeModelImpl } from "@theia/core/lib/browser";

export class FamilyTreeModel extends TreeModelImpl {

}

// family-tree-label-provider.ts

import { LabelProviderContribution } from "@theia/core/lib/browser";
import { FamilyMemberNode } from "./family-tree";

export class FamilyTreeLabelProvider implements LabelProviderContribution {
  canHandle(element: object): number {
    return FamilyMemberNode.is(element) ? 1 : 0;
  }

  getName(node: FamilyMemberNode): string {
    return node.familyMember.name;
  }
}


// family-tree-widget.tsx

import {
  CompositeTreeNode,
  ContextMenuRenderer,
  TreeProps,
  TreeWidget,
  TreeModel
} from "@theia/core/lib/browser";
import { inject, injectable, postConstruct } from "inversify";
import { FamilyMemberNode, FamilyMember } from "./family-tree";
import { FamilyTreeModel } from "./family-tree-model";
import * as React from "react";

@injectable()
export class FamilyTreeWidget extends TreeWidget {
  static readonly ID = "family-tree:widget";
  static readonly LABEL = "Family";

  constructor(
    @inject(TreeProps) readonly props: TreeProps,
    @inject(FamilyTreeModel) readonly model: FamilyTreeModel,
    @inject(ContextMenuRenderer) contextMenuRenderer: ContextMenuRenderer
  ) {
    super(props, model, contextMenuRenderer);
    const members: FamilyMember[] = [
      {
        name: "member 1",
        children: [
          {
            name: "child1",
            children: []
          },
          {
            name: "child2",
            children: []
          }
        ]
      },
      {
        name: "member 2",
        children: [
          {
            name: "child3",
            children: []
          },
          {
            name: "child4",
            children: []
          }
        ]
      }
    ];
    this.model.root = {
      id: "family-tree-root",
      name: "Family Tree Root",
      children: members.map(member => FamilyMemberNode.toNode(member)),
      visible: true,
      parent: undefined
    } as CompositeTreeNode;
  }

  @postConstruct()
  protected async init(): Promise<void> {
    this.id = FamilyTreeWidget.ID;
    this.title.label = FamilyTreeWidget.LABEL;
    this.title.caption = FamilyTreeWidget.LABEL;
    this.title.closable = true;
    this.title.iconClass = "fa fa-window-maximize"; // example widget icon.
    this.update();
  }
}