Member Junction
    Preparing search index...

    Class ThemeStudioDashboardComponent

    Make the base class a directive so we can use Angular functionality and sub-classes can be

    Hierarchy (View Summary)

    Implements

    • AfterViewInit
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    _config activeView advancedOpen barCats barHeights barValues baseFontSize chromeSelectorInfo cssEditorExtensions cssWarnings currentName currentThemeId customCss density derived destroy$ editingName editingToken editingTokenValue Error fontOptions footerNotice fullscreen Interaction mockAccordionOpen mockNav mockNavItems mockSwitchA mockSwitchB mockTab mockTabs modeOptions navigationService OpenEntityRecord openTokenCats panelCollapsed panelResizing panelWidth ParentTabId presetGalleryOpen presets previewMode Provider recipeStates saving seeds showGeneratedCss surfaceOptions themePickerOpen themes tokenGroups tokenOverrides tokenSearch UserStateChanged workspacePreviewOn ɵdir ɵfac

    Accessors

    advancedSummary Config currentIsDefault darkPrimary Data DisplayNameChangedEvent generatedCss isBuiltInSelected LoadComplete LoadCompleteEvent LoadStarted LoadStartedEvent onPrimaryDetail onPrimaryWorst overridableTokens ProviderToUse ResourceCloseRequestedEvent ResourceRecordSavedEvent RunQueryToUse RunReportToUse RunViewToUse secondaryColor vizColors vizOverridden

    Methods

    applyPreset applyToMe beginTokenEdit cancelRename cancelTokenEdit choosePreset clearTokenHighlight closePresetGallery commitRename commitTokenEdit copyGeneratedCss discard editViz GetQueryParams GetResourceDisplayName GetResourceIconClass getTabId highlightTokenTargets initDashboard insertChromeSelector isCurrentTheme isTokenCategoryOpen loadData newTheme ngAfterViewInit ngOnDestroy ngOnInit NotifyCloseRequested NotifyDisplayNameChanged NotifyLoadComplete NotifyLoadStarted onAdvancedChanged onBaseSizeChanged onCssEditorChange onDensityChanged onEscape onFullscreenChange onInsertTokenPick onModeToggle OnQueryParamsChanged onSeedsChanged onSurfaceToggle onTokenColorInput onTokenSearchChanged onWindowResize recompute Refresh RefreshView resetTokenOverride resetViz ResourceRecordSaved save saveAsCopy selectTheme setAsDefault setPreviewMode setTokenOverride setView SetVisible startPanelResize startRename toggleAdvanced toggleFullscreen togglePanel toggleRecipe toggleThemePicker toggleTokenCategory toggleWorkspacePreview UpdateQueryParams

    Constructors

    Properties

    Protected_config

    _config: DashboardConfig | null
    activeView: PreviewSurface = 'explorer'
    advancedOpen: boolean = false

    Advanced customization (persisted): per-token overrides + raw scoped CSS.

    barCats: string[] = ...
    barHeights: number[] = ...

    Height %s + labels for the demo bar chart.

    barValues: string[] = ...
    baseFontSize: number = 14
    chromeSelectorInfo: ChromeSelectorInfo[] = MJ_CHROME_SELECTOR_INFO

    Recipes (Q2#3): curated intents expanded to token sets. On/off is tracked by PROVENANCE — activeRecipeKeys records exactly which override keys each active recipe produced, so hand-set overrides never masquerade as an active recipe and toggling off removes only keys the recipe still owns.

    cssEditorExtensions: Extension[] = ...

    CodeMirror extensions for the custom-CSS editor: MJ selector + token completions.

    cssWarnings: string[] = []

    Inline custom-CSS validation results (Q3#6).

    currentName: string = 'New Theme'
    currentThemeId: string | null = null
    customCss: string = ''
    density: number = 16
    derived: DerivedTheme = ...
    destroy$: Subject<void>
    editingName: boolean = false
    editingToken: string | null = null
    editingTokenValue: string = ''
    Error: EventEmitter<Error>

    Subclasses can emit anytime an error occurs.

    fontOptions: { label: string; value: string }[] = ...
    footerNotice: string = 'Confidential'

    Preview-only branding/density knobs (not part of the seed contract yet).

    fullscreen: boolean = false
    Interaction: EventEmitter<any>

    Subclasses can emit this event anytime they want to communicate with the container to let it know that something has happened of significance.

    mockAccordionOpen: boolean = false
    mockNav: number = 0
    mockNavItems: string[] = ...

    Interactive-mock state (Q1#6) — clickable tabs/nav/switches/accordion so the derived state token families (hover/active/focus) demonstrate themselves live.

    mockSwitchA: boolean = true
    mockSwitchB: boolean = false
    mockTab: number = 0
    mockTabs: string[] = ...
    modeOptions: ViewToggleOption[] = ...
    navigationService: NavigationService
    OpenEntityRecord: EventEmitter<{ EntityName: string; RecordPKey: CompositeKey }>

    Subclasses can emit this event anytime they want to open a record within a particular entity. The container should handle this event and open the record.

    openTokenCats: Set<string> = ...
    panelCollapsed: boolean = false
    panelResizing: boolean = false
    panelWidth: number = PANEL_MIN_WIDTH

    Panel sizing (Q3#1/#2).

    ParentTabId: string | null

    Tab ID for query param notification scoping. Set by resource wrappers that render child dashboards, so the child knows which tab it belongs to. If not set, falls back to Data.Configuration.tabId.

    presetGalleryOpen: boolean = false

    Preset gallery shown as step one of "New theme" (Q1#2).

    presets: ThemePreset[] = ...
    previewMode: "light" | "dark" = 'light'
    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.

    recipeStates: { on: boolean; recipe: ThemeRecipe }[] = []
    saving: boolean = false
    seeds: ThemeSeeds = ...
    showGeneratedCss: boolean = false
    surfaceOptions: ViewToggleOption[] = ...

    Toolbar segmented controls (mj-view-toggle options).

    themePickerOpen: boolean = false
    themes: ThemeListItem[] = []
    tokenGroups: TokenGroup[] = []
    tokenOverrides: Record<string, string> = {}
    tokenSearch: string = ''

    Visual token browser state (Q2#1).

    UserStateChanged: EventEmitter<any>

    Subclasses should emit this event anytime their internal state changes in a way that they'd like to persist.

    workspacePreviewOn: boolean = false

    "Preview on my workspace" (Q3#8).

    "ɵdir": unknown
    "ɵfac": unknown

    Accessors

    • get DisplayNameChangedEvent(): ((newName: string) => void) | null

      Returns ((newName: string) => void) | null

    • set DisplayNameChangedEvent(value: ((newName: string) => void) | null): void

      Parameters

      • value: ((newName: string) => void) | null

      Returns void

    • get LoadComplete(): boolean

      Returns boolean

    • get LoadStarted(): boolean

      Returns boolean

    • get LoadStartedEvent(): any

      Returns any

    • set LoadStartedEvent(value: any): void

      Parameters

      • value: any

      Returns void

    • get ProviderToUse(): IMetadataProvider

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

      Returns IMetadataProvider

    • get ResourceCloseRequestedEvent(): (() => void) | null

      Returns (() => void) | null

    • set ResourceCloseRequestedEvent(value: (() => void) | null): void

      Parameters

      • value: (() => void) | null

      Returns void

    • get ResourceRecordSavedEvent(): any

      Returns any

    • set ResourceRecordSavedEvent(value: any): void

      Parameters

      • value: any

      Returns void

    • get RunQueryToUse(): IRunQueryProvider

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

      Returns IRunQueryProvider

    • get RunReportToUse(): IRunReportProvider

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

      Returns IRunReportProvider

    • get RunViewToUse(): IRunViewProvider

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

      Returns IRunViewProvider

    Methods

    • Read current query params from tab configuration. Use in initDashboard() / ngOnInit() to get initial URL state.

      Returns Record<string, string>

    • Get this component's tab ID. Checks ParentTabId input first (set by resource wrappers for child dashboards), then falls back to Data.Configuration.tabId.

      Returns string

    • 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>

    • Ask the host shell to close/dismiss this resource (typically: close the tab). Called by subclasses that hosted a form that emitted a 'dismiss' navigation event — most often, a brand-new record where the user clicked Discard. The record was never saved, the form is empty, and leaving it open serves no purpose. The tab-container listens for this and closes the workspace tab.

      Returns void

    • Call this to notify the tab system that the resource's display name has changed. The tab container will update the tab title and browser title accordingly.

      Parameters

      • newName: string

      Returns void

    • Returns void

    • Returns void

    • Called by the framework when query params change from an external source (browser back/forward, deep link navigation). Override in subclasses to react to query param changes.

      Parameters

      • params: Record<string, string>

        The new query params from the URL

      • source: "popstate" | "deeplink"

        'popstate' for back/forward, 'deeplink' for external URL entry

      Returns void

    • This method will result in the dashboard being reloaded.

      Returns Promise<void>

    • Marks this component's view (and its ancestors) as needing change detection and schedules a tick — the reliable way for a resource component to re-render after updating state from async work (RunView/RunQuery continuations, timers, websocket pushes, RxJS subscriptions).

      WHY THIS EXISTS: the Explorer shell hosts resource components dynamically — createComponent()

      • ApplicationRef.attachView() — because tab content mounts into Golden Layout / cached DOM containers, not into an Angular template. Since Angular 18's change-detection scheduler rework (Explorer is on Angular 21), ApplicationRef.tick() only refreshes attached views that are FLAGGED dirty; a root-level attached view whose component mutates plain fields from an async continuation is never flagged, so the view silently never re-renders — even though the component uses default (non-OnPush) change detection (issue #3106).

      The framework calls this automatically from NotifyLoadStarted() / NotifyLoadComplete(), so the standard load lifecycle re-renders without any subclass action. Call it yourself after any LATER async state change that must reach the DOM outside those signals.

      Returns void

    • This method can be used by a container to let the dashboard know that it is being opened/closed. Base class just sets a flag.

      Parameters

      • visible: boolean

      Returns void

    • Prefer the native Fullscreen API — it promotes the canvas to the browser's top layer, so it fills the real screen regardless of any transformed/contained ancestor, and browser Esc reliably exits. Falls back to CSS-fixed overlay if the API is unavailable or rejects.

      Parameters

      • on: boolean

      Returns Promise<void>

    • Temporarily apply the in-memory draft (seeds + overrides + custom CSS) to the real app chrome so custom-CSS selectors are authored against reality. The preview stays on while you navigate other tabs (that's the point — the Studio tab is cached, not destroyed) and reverts on toggle-off or when the Studio tab is closed. It is never persisted ({ persist: false }), so a reload always restores the user's real theme.

      Returns Promise<void>

    • Push query param changes to the URL. Creates a browser history entry. Safe to call during OnQueryParamsChanged — auto-suppressed to prevent loops.

      Parameters

      • params: Record<string, string | null>

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods
    applyPresetapplyToMebeginTokenEditcancelRenamecancelTokenEditchoosePresetclearTokenHighlightclosePresetGallerycommitRenamecommitTokenEditcopyGeneratedCssdiscardeditVizGetQueryParamsGetResourceDisplayNameGetResourceIconClassgetTabIdhighlightTokenTargetsinitDashboardinsertChromeSelectorisCurrentThemeisTokenCategoryOpenloadDatanewThemengAfterViewInitngOnDestroyngOnInitNotifyCloseRequestedNotifyDisplayNameChangedNotifyLoadCompleteNotifyLoadStartedonAdvancedChangedonBaseSizeChangedonCssEditorChangeonDensityChangedonEscapeonFullscreenChangeonInsertTokenPickonModeToggleOnQueryParamsChangedonSeedsChangedonSurfaceToggleonTokenColorInputonTokenSearchChangedonWindowResizerecomputeRefreshRefreshViewresetTokenOverrideresetVizResourceRecordSavedsavesaveAsCopyselectThemesetAsDefaultsetPreviewModesetTokenOverridesetViewSetVisiblestartPanelResizestartRenametoggleAdvancedtoggleFullscreentogglePaneltoggleRecipetoggleThemePickertoggleTokenCategorytoggleWorkspacePreviewUpdateQueryParams