Member Junction
    Preparing search index...

    Class HierarchyTreeComponent

    Modern, interactive, canvas-based visual hierarchy and organizational chart component.

    Automatically generates a dynamic, zoomable tree visualization for any MemberJunction entity with a self-referencing parent foreign key (such as Corporate Subsidiaries, Product Categories, Committee Governance structures, Tag Taxonomies, and Management Lines).

    Features:

    • Metadata Driven: Auto-derives primary keys (including composite keys) and parent fields from MJ metadata.
    • Interactive Canvas: D3-powered smooth pan, zoom, auto-fit, and mini-toolbar controls.
    • Collapsible Subtrees: Interactive [+] / [-] badges with direct and total descendant counts.
    • Live Search & Path Expansion: Instant keyword search that highlights matches and auto-expands ancestor branches.
    • Subtree Focus: Isolate any node as the root of the view with 1-click return to full hierarchy.
    • Full Design Token Theming: Uses --mj-* surface, border, typography, and accent tokens.
    • Extensive Cancelable Events: Before/After events for expansion, collapse, reparenting, and navigation.
    <mj-hierarchy-tree
        [Config]="{
            EntityName: 'MJ_BizApps_Common: Organizations',
            ParentField: 'ParentID',
            SubtitleField: 'OrganizationType',
            DefaultIcon: 'fa-solid fa-building'
        }"
        (Navigate)="onNavigate($event)">
    </mj-hierarchy-tree>

    Hierarchy (View Summary)

    Implements

    • OnInit
    • AfterViewInit
    • OnChanges
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    ActiveRecordID? AfterNodeCollapse AfterNodeExpand AfterReparent AllNodes AllowNodeActions BeforeNodeCollapse BeforeNodeExpand BeforeReparent Config Data? ErrorMessage FocusedNode FocusRecordID? Loading MatchingNodeCount Navigate NodeAction NodeClick NodeDoubleClick NodeSelect Provider RootNodes SearchQuery SelectedNode ShowDetailsDrawer svgContainerRef svgRef ZoomChange ZoomLevel? ɵdir ɵfac

    Accessors

    ProviderToUse RunQueryToUse RunViewToUse

    Methods

    buildTreeFromData centerOnNode clearSearch closeDetailsDrawer collapseAll expandAll exportAsSVG fitToScreen getRecordAttributeEntries loadData navigateToRecord ngAfterViewInit ngOnChanges ngOnDestroy ngOnInit onCanvasBackgroundClick onFitToViewClick onNodeAction onNodeClick onNodeDoubleClick onSearchInput openDetailsDrawer refresh renderTree resetFocus resetZoom setFocusRoot setZoomLevel toggleNodeExpansion zoomIn zoomOut

    Constructors

    Properties

    ActiveRecordID?: string

    Optional active / selected record ID. When provided, the node is highlighted and all ancestors are expanded so it is visible in full tree context.

    AfterNodeCollapse: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>> = ...

    Emitted after a node has collapsed its children.

    AfterNodeExpand: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>> = ...

    Emitted after a node has expanded its children.

    AfterReparent: EventEmitter<ReparentEvent<Record<string, unknown>>> = ...

    Emitted after a node has been reparented.

    AllNodes: HierarchyNodeData<Record<string, unknown>>[] = []

    Flattened list of all loaded hierarchy nodes for search and lookup.

    AllowNodeActions: boolean = true

    Controls whether action buttons (Open Record, Focus, Add Child) appear on node cards.

    BeforeNodeCollapse: EventEmitter<
        CancelableHierarchyNodeEvent<Record<string, unknown>>,
    > = ...

    Emitted before a node collapses its children. Cancelable.

    BeforeNodeExpand: EventEmitter<
        CancelableHierarchyNodeEvent<Record<string, unknown>>,
    > = ...

    Emitted before a node expands its children. Cancelable.

    BeforeReparent: EventEmitter<CancelableReparentEvent<Record<string, unknown>>> = ...

    Emitted before a node is reparented. Cancelable.

    Config: HierarchyTreeConfig

    Declarative configuration defining the target entity and visual layout properties.

    Data?: Record<string, unknown>[]

    Optional pre-loaded data array. If provided, the component skips the automated RunView query and constructs the tree directly from these items.

    ErrorMessage: string | null = null
    FocusedNode: HierarchyNodeData<Record<string, unknown>> | null = null
    FocusRecordID?: string

    Primary key ID to focus as the subtree root.

    Loading: boolean = false
    MatchingNodeCount: number = 0
    Navigate: EventEmitter<FormNavigationEvent> = ...

    Emitted when the user requests navigation to a full entity record.

    NodeAction: EventEmitter<NodeActionEvent<Record<string, unknown>>> = ...

    Emitted when an action button (e.g. Open, Add Child, Focus) is invoked on a node.

    NodeClick: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>> = ...

    Emitted when a node is clicked.

    NodeDoubleClick: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>> = ...

    Emitted when a node is double-clicked.

    NodeSelect: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>> = ...

    Emitted when a node is selected / set as active.

    Provider: IMetadataProvider | null

    If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

    RootNodes: HierarchyNodeData<Record<string, unknown>>[] = []

    The root nodes of the active view.

    SearchQuery: string = ''
    SelectedNode: HierarchyNodeData<Record<string, unknown>> | null = null
    ShowDetailsDrawer: boolean = false
    svgContainerRef: ElementRef<HTMLDivElement>
    svgRef: ElementRef<SVGSVGElement>
    ZoomChange: EventEmitter<number> = ...

    Emitted when the user zooms in or out on the hierarchy canvas.

    ZoomLevel?: number

    Optional persisted zoom scale factor to restore.

    "ɵdir": unknown
    "ɵfac": ɵɵFactoryDeclaration<BaseAngularComponent, never>

    Accessors

    • get ProviderToUse(): IMetadataProvider

      Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

      Returns IMetadataProvider

    • get RunQueryToUse(): IRunQueryProvider

      Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

      Returns IRunQueryProvider

    • get RunViewToUse(): IRunViewProvider

      Returns either the default RunView provider or the one specified in the Provider property, if it was specified

      Returns IRunViewProvider

    Methods

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: { [propName: string]: SimpleChange<any> }

        The changed properties.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods