@memberjunction/ng-explorer-core

Core components and infrastructure for the MemberJunction Explorer application. Provides the shell, routing, resource wrappers, command palette, user menu system, authentication guards, and single-entity/record/dashboard view components.

Overview

Explorer Core is the central package that implements the Explorer application’s runtime. It provides the ShellComponent (the main application frame with header, app switcher, navigation, and tab container), resource wrapper components for each resource type, route guards, validation services, and an extensible user menu plugin system.

graph TD
    SHELL["ShellComponent\n(<mj-shell>)"] --> HEAD["AppNavComponent\n(Header + Nav)"]
    SHELL --> TABS["TabContainerComponent\n(Golden Layout)"]
    SHELL --> AS["AppSwitcherComponent"]
    SHELL --> CMD["CommandPaletteComponent"]
    SHELL --> UM["User Menu Plugin System"]

    TABS --> RW["Resource Wrappers"]

    subgraph "Resource Wrappers"
        RR["RecordResource"]
        DR["DashboardResource"]
        VR["ViewResource"]
        QR["QueryResource"]
        CR["ChatResource"]
        AR["ArtifactResource"]
    end

    subgraph "Route Guards"
        AG["AuthGuardService"]
        EG["EntitiesGuard"]
    end

    subgraph "Validation"
        SVS["SystemValidationService"]
        STVS["StartupValidationService"]
        SVB["ValidationBannerComponent"]
    end

    style SHELL fill:#7c5295,stroke:#563a6b,color:#fff
    style HEAD fill:#2d6a9f,stroke:#1a4971,color:#fff
    style TABS fill:#2d6a9f,stroke:#1a4971,color:#fff
    style AS fill:#2d8659,stroke:#1a5c3a,color:#fff
    style CMD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style UM fill:#2d8659,stroke:#1a5c3a,color:#fff
    style RR fill:#b8762f,stroke:#8a5722,color:#fff
    style DR fill:#b8762f,stroke:#8a5722,color:#fff
    style VR fill:#b8762f,stroke:#8a5722,color:#fff
    style QR fill:#b8762f,stroke:#8a5722,color:#fff
    style CR fill:#b8762f,stroke:#8a5722,color:#fff
    style AR fill:#b8762f,stroke:#8a5722,color:#fff
    style AG fill:#2d6a9f,stroke:#1a4971,color:#fff
    style EG fill:#2d6a9f,stroke:#1a4971,color:#fff
    style SVS fill:#2d8659,stroke:#1a5c3a,color:#fff
    style STVS fill:#2d8659,stroke:#1a5c3a,color:#fff
    style SVB fill:#2d8659,stroke:#1a5c3a,color:#fff

Features

• Shell Component: App-centric header with app switcher, nav items, Golden Layout tab container, loading animations, and notification badges
• Resource Wrappers: Specialized components for Records, Dashboards, Views, Queries, Lists, Search Results, Conversations, and Artifacts
• Command Palette: Global keyboard-driven command search (Ctrl+K / Cmd+K)
• User Menu Plugin System: Extensible via BaseUserMenu with @RegisterClass overrides
• Route Guards: AuthGuardService for authentication, EntitiesGuard for entity route validation
• System Validation: Startup validation services with visual banner for configuration issues
• OAuth Module: OAuth callback handling for external service integrations
• Single-entity views: SingleRecordComponent, SingleDashboardComponent, SingleQueryComponent, SingleListDetailComponent, SingleSearchResultComponent
• Dashboard management: Add/edit/delete dashboard items, preferences dialog
• User profile: Profile viewing and notification components

Installation

npm install @memberjunction/ng-explorer-core

Key Dependencies

Dependency	Purpose
@memberjunction/ng-base-application	ApplicationManager, WorkspaceStateManager, GoldenLayoutManager
@memberjunction/ng-auth-services	MJAuthBase for authentication
@memberjunction/ng-shared, @memberjunction/ng-shared-generic	Shared services, NavigationService
@memberjunction/ng-dashboards	Dashboard components
@memberjunction/ng-entity-form-dialog	Entity form dialogs
@memberjunction/ng-conversations	Chat conversation components
@memberjunction/ng-artifacts	Artifact viewer
golden-layout	Tab container layout engine
@progress/kendo-angular-*	Kendo UI components

Usage

Module Import

import { ExplorerCoreModule, ShellModule } from '@memberjunction/ng-explorer-core';

@NgModule({
  imports: [ExplorerCoreModule, ShellModule]
})
export class AppModule {}

Shell Component

<mj-shell></mj-shell>

The shell handles everything: header navigation, app switching, tab management, workspace state persistence, loading animations, and user menu.

Custom Resource Types

import { RegisterClass } from '@memberjunction/global';
import { BaseResourceComponent } from '@memberjunction/ng-shared';

@RegisterClass(BaseResourceComponent, 'MyCustomResource')
@Component({ selector: 'mj-custom-resource', template: '...' })
export class CustomResource extends BaseResourceComponent {
  async GetResourceDisplayName(data: ResourceData): Promise<string> {
    return `Custom: ${data.Name}`;
  }
  async GetResourceIconClass(data: ResourceData): Promise<string> {
    return 'fa-solid fa-star';
  }
}

User Menu Customization

import { RegisterClass } from '@memberjunction/global';
import { BaseUserMenu, UserMenuItem } from '@memberjunction/ng-explorer-core';

@RegisterClass(BaseUserMenu)
export class CustomUserMenu extends BaseUserMenu {
  public GetMenuItems(): UserMenuItem[] {
    const items = super.GetMenuItems();
    items.push({
      id: 'my-action', label: 'My Action', icon: 'fa-solid fa-star',
      group: 'primary', order: 50, developerOnly: false,
      visible: true, enabled: true
    });
    return items;
  }
}

Command Palette

The command palette is available globally via Ctrl+K (Cmd+K on Mac). Custom commands can be registered via CommandPaletteService.

Exported API

Key exports include:

Export	Type	Description
ShellComponent	Component	Main application shell
ShellModule	NgModule	Shell module with all shell-related components
ExplorerCoreModule	NgModule	Core module with routes and common components
ResourceContainerComponent	Component	Dynamic resource loading container
CommandPaletteComponent	Component	Global command search
CommandPaletteService	Service	Programmatic command palette control
AuthGuardService	Guard	Authentication route guard
EntitiesGuard	Guard	Entity route validation guard
SystemValidationService	Service	System configuration validation
StartupValidationService	Service	Startup validation checks
SystemValidationBannerComponent	Component	Validation issue banner
BaseUserMenu	Class	Extensible user menu base class
UserMenuItem, UserMenuContext	Interfaces	User menu type definitions
DashboardPreferencesDialogComponent	Component	Dashboard preferences editor
SingleRecordComponent	Component	Single record viewer/editor
SingleDashboardComponent	Component	Single dashboard viewer
SingleQueryComponent	Component	Single query viewer
OAuthModule	NgModule	OAuth callback handling
AppRoutingModule	NgModule	Application routing configuration

Build

cd packages/Angular/Explorer/explorer-core && npm run build

License

ISC