Member Junction
    Preparing search index...

    Class ERDCompositeComponent

    ERD Composite component that combines the ERD diagram with filter and details panels.

    This is a complete, ready-to-use ERD exploration interface that includes:

    • Left panel: Entity filter controls (schema, name, status, etc.)
    • Center: Interactive ERD diagram
    • Right panel: Entity details (shown when an entity is selected)

    The component handles all internal state but emits events for:

    • State changes (for parent to persist user preferences)
    • Open record requests (for parent to handle navigation)
    <mj-erd-composite
      (stateChange)="onStateChange($event)"
      (userStateChange)="saveUserPreferences($event)"
      (openRecord)="navigateToRecord($event)">
    </mj-erd-composite>

    The component emits userStateChange events (debounced 1s) when user changes any settings. The parent should save this state and restore it using loadUserState():

    @ViewChild(ERDCompositeComponent) erdComposite!: ERDCompositeComponent;

    ngAfterViewInit() {
      const savedState = await this.loadSavedState();
      if (savedState) {
        this.erdComposite.loadUserState(savedState);
      }
    }

    onUserStateChange(state: ERDCompositeState) {
      await this.saveState(state);
    }

    Hierarchy (View Summary)

    Implements

    • OnInit
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    AllEntityFields Depth Entities entityOpened EntityOpened ErdConfig FieldsSectionExpanded FilteredEntities FilterPanelVisible Filters FocusEntities IsDataLoaded IsRefreshingERD MjEntityErd openRecord OpenRecord Provider RelationshipsSectionExpanded SelectedEntity ShowFilterPanel ShowHeader stateChange StateChange userStateChange UserStateChange ɵdir ɵfac

    Accessors

    allEntityFields depth entities erdConfig fieldsSectionExpanded filteredEntities filterPanelVisible filters focusEntities isDataLoaded isRefreshingERD mjEntityErd ProviderToUse relationshipsSectionExpanded RunQueryToUse RunViewToUse selectedEntity showFilterPanel showHeader

    Methods

    getState GetState loadUserState LoadUserState ngOnDestroy ngOnInit onEntityDeselected OnEntityDeselected onEntityOpened OnEntityOpened onEntitySelected OnEntitySelected onERDEntitySelected OnERDEntitySelected onERDOpenRecord OnERDOpenRecord onERDStateChange OnERDStateChange onFieldsSectionToggle OnFieldsSectionToggle onFilterChange onFiltersChange OnFiltersChange onOpenRecord OnOpenRecord onRelationshipsSectionToggle OnRelationshipsSectionToggle onResetFilters OnResetFilters onSplitterLayoutChange OnSplitterLayoutChange onToggleFilterPanel OnToggleFilterPanel refreshERD RefreshERD

    Constructors

    Properties

    AllEntityFields: EntityFieldInfo[] = []

    All entity fields (flattened from all entities)

    Depth: number = 1

    Depth of relationships to display. 1 = only direct relationships, 2 = relationships of relationships, etc.

    Entities: EntityInfo[] = []

    All entities loaded from metadata

    entityOpened: EventEmitter<EntityInfo> = ...

    Use EntityOpened.

    The same emitter under the old binding name, so a template still binding (entityOpened) keeps working. Must stay AFTER EntityOpened: class fields initialise in order, and the other way round this captures undefined.

    EntityOpened: EventEmitter<EntityInfo> = ...

    Emitted when an entity is opened (e.g., double-clicked in details panel)

    ErdConfig: ERDConfig = ...

    ERD configuration - skip animation for faster rendering

    FieldsSectionExpanded: boolean = true
    FilteredEntities: EntityInfo[] = []
    FilterPanelVisible: boolean = true
    Filters: EntityFilter = ...
    FocusEntities: EntityInfo[] | null = null

    Optional: Focus entities to display in the ERD. When provided, only these entities will be shown (useful for single-entity views). When not provided, all entities from metadata are loaded.

    IsDataLoaded: boolean = false
    IsRefreshingERD: boolean = false

    Whether the ERD is in a refreshing state

    MjEntityErd: MJEntityERDComponent
    openRecord: EventEmitter<{ EntityName: string; RecordID: string }> = ...

    Use OpenRecord.

    The same emitter under the old binding name, so a template still binding (openRecord) keeps working. Must stay AFTER OpenRecord: class fields initialise in order, and the other way round this captures undefined.

    OpenRecord: EventEmitter<{ EntityName: string; RecordID: string }> = ...

    Emitted when requesting to open an entity record (for navigation)

    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.

    RelationshipsSectionExpanded: boolean = true
    SelectedEntity: EntityInfo | null = null
    ShowFilterPanel: boolean = true

    Whether to show the filter panel on the left. Set to false for focused/single-entity views.

    ShowHeader: boolean = true

    Whether to show the ERD header bar.

    stateChange: EventEmitter<ERDCompositeState> = ...

    Use StateChange.

    The same emitter under the old binding name, so a template still binding (stateChange) keeps working. Must stay AFTER StateChange: class fields initialise in order, and the other way round this captures undefined.

    StateChange: EventEmitter<ERDCompositeState> = ...

    Emitted on any state change (debounced 50ms)

    userStateChange: EventEmitter<ERDCompositeState> = ...

    Use UserStateChange.

    The same emitter under the old binding name, so a template still binding (userStateChange) keeps working. Must stay AFTER UserStateChange: class fields initialise in order, and the other way round this captures undefined.

    UserStateChange: EventEmitter<ERDCompositeState> = ...

    Emitted on user-initiated state changes (debounced 1s) for persistence

    "ɵ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 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 Promise<void>

    Settings

    Member Visibility

    On This Page

    UsageState Persistence
    Constructors
    Properties
    Accessors
    Methods