@meshmakers/octo-ui 3.4.290 → 3.4.310

package/fesm2022/meshmakers-octo-ui.mjs

@@ -6062,6 +6062,46 @@ const CONFIG_QUERY = gql `
     }
   }
 `;
+/**
+ * Loads the singleton's `perspectives` array (AB#4263). Kept SEPARATE from
+ * CONFIG_QUERY on purpose: the `perspectives` field only exists in the tenant
+ * schema when System.UI >= 2.3.0. On a tenant still on System.UI 2.2.0 the type
+ * IS present (so the type-exists probe passes) but this field is not, which would
+ * raise a GraphQL validation error for the whole operation. Isolating it here
+ * lets `fetchPerspectives` swallow that error so the 2.2.0 roles feature keeps
+ * working and perspectives simply come back empty.
+ */
+const CONFIG_PERSPECTIVES_QUERY = gql `
+  query getTreeNavigationPerspectives {
+    runtime {
+      systemUITreeNavigationConfiguration(
+        first: 1
+        fieldFilter: [
+          {
+            attributePath: "rtWellKnownName"
+            operator: EQUALS
+            comparisonValue: "TreeNavigation"
+          }
+        ]
+      ) {
+        items {
+          rtId
+          perspectives {
+            key
+            displayName
+            sortIndex
+            icon
+            rootMode
+            rootCkTypeId
+            primaryRoleId
+            primaryDirection
+            secondaryRoleIds
+          }
+        }
+      }
+    }
+  }
+`;
 const ROLE_SUGGESTIONS_QUERY = gql `
   query treeNavigationRoleSuggestions($ckTypeId: String!) {
     constructionKit {
@@ -6126,6 +6166,8 @@ class TreeNavigationConfigService {
     apollo = inject(Apollo);
     /** key `${sourceCkTypeId}::${roleId}` -> override; cached for the session. */
     overridesPromise;
+    /** Configured extra perspectives; cached for the session. */
+    perspectivesPromise;
     /**
      * Resolves the override for one (source type, role) pair, preferring an exact
      * source-type match over a wildcard (`*`) rule. Returns undefined when nothing
@@ -6139,6 +6181,58 @@ class TreeNavigationConfigService {
     /** Forces a reload on next access (e.g. after a tenant switch). */
     reset() {
         this.overridesPromise = undefined;
+        this.perspectivesPromise = undefined;
+    }
+    /**
+     * Returns the configured extra tree perspectives (AB#4263), sorted by
+     * sortIndex then displayName. Returns [] when the CK type is absent
+     * (System.UI < 2.3.0) or none are configured. The built-in spatial
+     * perspective is synthesized by the data source and is NOT included here.
+     */
+    perspectives() {
+        if (!this.perspectivesPromise) {
+            this.perspectivesPromise = this.loadPerspectives().catch((error) => {
+                console.error('Error loading tree navigation perspectives', error);
+                this.perspectivesPromise = undefined;
+                return [];
+            });
+        }
+        return this.perspectivesPromise;
+    }
+    async loadPerspectives() {
+        // Skip the singleton entirely when the CK type is not installed at all.
+        if (!(await this.probeTypePresent())) {
+            return [];
+        }
+        const rawPerspectives = await this.fetchPerspectivesRaw();
+        return rawPerspectives
+            .map((raw) => this.toPerspectiveDefinition(raw))
+            .filter((p) => p !== null)
+            .sort((a, b) => (a.sortIndex ?? Number.MAX_SAFE_INTEGER) -
+            (b.sortIndex ?? Number.MAX_SAFE_INTEGER) ||
+            a.displayName.localeCompare(b.displayName));
+    }
+    /** Maps a raw perspective record to a definition, dropping invalid rows. */
+    toPerspectiveDefinition(raw) {
+        const key = raw?.key?.trim();
+        if (!key) {
+            return null;
+        }
+        const rootMode = raw?.rootMode === 'Type' ? 'Type' : 'Spatial';
+        const secondary = (raw?.secondaryRoleIds ?? [])
+            .map((r) => (typeof r === 'string' ? r : ''))
+            .filter((r) => r.length > 0);
+        return {
+            key,
+            displayName: raw?.displayName?.trim() || key,
+            sortIndex: raw?.sortIndex ?? undefined,
+            icon: raw?.icon ?? undefined,
+            rootMode,
+            rootCkTypeId: raw?.rootCkTypeId ?? undefined,
+            primaryRoleId: raw?.primaryRoleId ?? undefined,
+            primaryDirection: raw?.primaryDirection === 'Outbound' ? 'Outbound' : undefined,
+            secondaryRoleIds: secondary.length > 0 ? secondary : undefined,
+        };
     }
     /**
      * Returns the inbound association roles declared on a CK type, for the role
@@ -6209,6 +6303,7 @@ class TreeNavigationConfigService {
      */
     async loadConfig() {
         const { typePresent, rtId, rawRoles } = await this.fetchSingleton();
+        const rawPerspectives = typePresent ? await this.fetchPerspectivesRaw() : [];
         const roles = [];
         for (const raw of rawRoles) {
             if (!raw?.sourceCkTypeId || !raw?.roleId) {
@@ -6224,22 +6319,38 @@ class TreeNavigationConfigService {
                 icon: raw.icon ?? undefined,
             });
         }
-        return { typePresent, rtId, roles };
+        const perspectives = rawPerspectives
+            .map((raw) => this.toPerspectiveDefinition(raw))
+            .filter((p) => p !== null);
+        return { typePresent, rtId, roles, perspectives };
     }
     /**
-     * Creates or updates the singleton with the given rules, then invalidates the
-     * resolve cache so the trees pick up the change on the next expand. Returns the
-     * singleton rtId.
+     * Creates or updates the singleton with the given rules and perspectives, then
+     * invalidates the resolve/perspective cache so the trees pick up the change on
+     * the next expand. Returns the singleton rtId.
      */
-    async saveConfig(rtId, roles) {
+    async saveConfig(rtId, roles, perspectives = []) {
         const cleanRoles = roles
             .filter((r) => r.sourceCkTypeId && r.roleId)
             .map((r) => this.toRoleInput(r));
+        const cleanPerspectives = perspectives
+            .filter((p) => p.key)
+            .map((p) => this.toPerspectiveInput(p));
+        // Only send `perspectives` when non-empty: on a System.UI 2.2.0 tenant the
+        // input type has no `perspectives` field, so including it (even as []) would
+        // fail validation and break roles saving. Trade-off: clearing the last
+        // perspective on 2.3.0 is not persisted via save (edge case).
         let savedRtId;
         if (rtId) {
+            const item = { roles: cleanRoles };
+            if (cleanPerspectives.length > 0) {
+                item['perspectives'] = cleanPerspectives;
+            }
             const result = await firstValueFrom(this.apollo.mutate({
                 mutation: UPDATE_CONFIG_MUTATION,
-                variables: { entities: [{ rtId, item: { roles: cleanRoles } }] },
+                variables: {
+                    entities: [{ rtId, item }],
+                },
                 fetchPolicy: 'no-cache',
             }));
             savedRtId =
@@ -6255,6 +6366,9 @@ class TreeNavigationConfigService {
                             rtWellKnownName: CONFIG_WELL_KNOWN_NAME,
                             name: 'Tree Navigation',
                             roles: cleanRoles,
+                            ...(cleanPerspectives.length > 0
+                                ? { perspectives: cleanPerspectives }
+                                : {}),
                         },
                     ],
                 },
@@ -6290,11 +6404,45 @@ class TreeNavigationConfigService {
             input['icon'] = role.icon;
         return input;
     }
-    /** Probes the CK schema and (when present) loads the singleton's raw roles. */
-    async fetchSingleton() {
+    /** Drops undefined/empty fields so the perspective input only carries set values. */
+    toPerspectiveInput(p) {
+        const input = {
+            key: p.key,
+            displayName: p.displayName || p.key,
+            rootMode: p.rootMode,
+        };
+        if (p.sortIndex !== undefined && p.sortIndex !== null) {
+            input['sortIndex'] = p.sortIndex;
+        }
+        if (p.icon)
+            input['icon'] = p.icon;
+        if (p.rootCkTypeId)
+            input['rootCkTypeId'] = p.rootCkTypeId;
+        if (p.primaryRoleId)
+            input['primaryRoleId'] = p.primaryRoleId;
+        if (p.primaryDirection)
+            input['primaryDirection'] = p.primaryDirection;
+        if (p.secondaryRoleIds && p.secondaryRoleIds.length > 0) {
+            input['secondaryRoleIds'] = p.secondaryRoleIds;
+        }
+        return input;
+    }
+    /**
+     * Probes whether the `System.UI/TreeNavigationConfiguration` CK type is
+     * installed on the tenant (System.UI >= 2.2.0). Uses the always-valid
+     * `constructionKit.types` query so it never raises a schema validation error.
+     */
+    async probeTypePresent() {
         const exists = await firstValueFrom(this.apollo.query({ query: CONFIG_TYPE_EXISTS_QUERY, fetchPolicy: 'network-only' }));
-        const typePresent = (exists.data?.constructionKit?.types?.items?.length ?? 0) > 0;
-        if (!typePresent) {
+        return (exists.data?.constructionKit?.types?.items?.length ?? 0) > 0;
+    }
+    /**
+     * Probes the CK schema and (when present) loads the singleton's raw roles.
+     * Perspectives are loaded separately (see fetchPerspectivesRaw) so a System.UI
+     * 2.2.0 tenant (type present but no `perspectives` field yet) keeps its roles.
+     */
+    async fetchSingleton() {
+        if (!(await this.probeTypePresent())) {
             return { typePresent: false, rtId: null, rawRoles: [] };
         }
         const result = await firstValueFrom(this.apollo.query({ query: CONFIG_QUERY, fetchPolicy: 'network-only' }));
@@ -6305,6 +6453,23 @@ class TreeNavigationConfigService {
             rawRoles: item?.roles ?? [],
         };
     }
+    /**
+     * Loads the singleton's raw perspectives, tolerating the System.UI 2.2.0 case
+     * where the `perspectives` field does not yet exist (GraphQL validation error).
+     * Any failure yields an empty list so roles loading is never affected.
+     */
+    async fetchPerspectivesRaw() {
+        try {
+            const result = await firstValueFrom(this.apollo.query({ query: CONFIG_PERSPECTIVES_QUERY, fetchPolicy: 'network-only' }));
+            return (result.data?.runtime?.systemUITreeNavigationConfiguration?.items?.[0]
+                ?.perspectives ?? []);
+        }
+        catch {
+            // System.UI 2.2.0: `perspectives` field absent → validation error. Degrade
+            // to no perspectives; the roles query above is unaffected.
+            return [];
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationConfigService, providedIn: 'root' });
 }
@@ -6356,6 +6521,44 @@ const PARENT_CHILD_ROLE_ID = 'System/ParentChild';
  * tree from firing a guaranteed-failing query for every entity.
  */
 const NON_NAVIGABLE_TARGET_CK_TYPES = new Set(['System/Entity']);
+/** Key of the built-in spatial perspective (all Basic/Tree roots, as before). */
+const SPATIAL_PERSPECTIVE_KEY = 'Spatial';
+/**
+ * The always-available built-in perspective. It reproduces the pre-AB#4263
+ * behaviour (roots = all Basic/Tree entities) and is synthesized rather than
+ * stored, so a zero-config tenant still has exactly one perspective.
+ */
+const BUILT_IN_SPATIAL_PERSPECTIVE = {
+    key: SPATIAL_PERSPECTIVE_KEY,
+    displayName: 'Spatial',
+    rootMode: 'Spatial',
+    sortIndex: 0,
+};
+/**
+ * Loads all runtime instances of a CK type as the roots of a `Type` perspective
+ * (AB#4263). Inline gql (like TreeNavigationConfigService) to stay decoupled
+ * from a schema re-introspection; the selection mirrors getTrees so the existing
+ * root-node rendering keeps working.
+ */
+const GET_ROOT_ENTITIES_BY_CK_TYPE = gql `
+  query getRuntimeEntitiesByCkType($ckTypeId: String!, $first: Int!) {
+    runtime {
+      runtimeEntities(ckId: $ckTypeId, first: $first) {
+        items {
+          rtId
+          ckTypeId
+          rtWellKnownName
+          attributes(attributeNames: ["name", "displayName", "description"]) {
+            items {
+              attributeName
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`;
 class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
     getTreesDtoGQL = inject(GetTreesDtoGQL);
     getCkTypeAssociationRolesDtoGQL = inject(GetCkTypeAssociationRolesDtoGQL);
@@ -6369,6 +6572,93 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
     updateTreeNodesDtoGQL = inject(UpdateTreeNodesDtoGQL);
     typeHelperService = inject(TypeHelperService);
     treeNavConfig = inject(TreeNavigationConfigService);
+    apollo = inject(Apollo);
+    /** Key of the currently active tree perspective (AB#4263). */
+    activePerspectiveKey = SPATIAL_PERSPECTIVE_KEY;
+    /**
+     * The perspective resolved during the last `fetchRootNodes()`. Used by
+     * `fetchChildren()` to apply the root-level whitelist for `Type` perspectives.
+     */
+    activePerspective = BUILT_IN_SPATIAL_PERSPECTIVE;
+    /**
+     * rtIds of the current perspective's root nodes. The primary/secondary role
+     * whitelist is applied ONLY to the direct children of these roots — deeper
+     * nodes keep full auto-discovery (whitelist-at-root-only).
+     */
+    perspectiveRootRtIds = new Set();
+    /**
+     * Selects the active perspective by key. The host is responsible for reloading
+     * the tree afterwards (e.g. `treeDetail.refreshTree()`), which re-runs
+     * `fetchRootNodes()` and re-resolves the perspective.
+     */
+    setActivePerspective(key) {
+        this.activePerspectiveKey = key || SPATIAL_PERSPECTIVE_KEY;
+    }
+    /** The currently selected perspective key. */
+    getActivePerspectiveKey() {
+        return this.activePerspectiveKey;
+    }
+    /**
+     * Returns all selectable perspectives: the built-in spatial one first, then the
+     * per-tenant configured perspectives, de-duplicated by key (a configured
+     * `Spatial` overrides the built-in). With no configuration this is a single
+     * entry, so the host can hide the switcher.
+     */
+    async getPerspectives() {
+        let configured = [];
+        try {
+            configured = await this.treeNavConfig.perspectives();
+        }
+        catch (error) {
+            console.error('Error loading perspectives', error);
+        }
+        const byKey = new Map();
+        byKey.set(BUILT_IN_SPATIAL_PERSPECTIVE.key, BUILT_IN_SPATIAL_PERSPECTIVE);
+        for (const p of configured) {
+            byKey.set(p.key, p);
+        }
+        return [...byKey.values()].sort((a, b) => (a.sortIndex ?? Number.MAX_SAFE_INTEGER) -
+            (b.sortIndex ?? Number.MAX_SAFE_INTEGER) ||
+            a.displayName.localeCompare(b.displayName));
+    }
+    /**
+     * The role-id whitelist of the active perspective (primary + secondary), or
+     * null when the perspective is not a `Type` perspective or declares no roles.
+     */
+    activePerspectiveWhitelist() {
+        const p = this.activePerspective;
+        if (p.rootMode !== 'Type') {
+            return null;
+        }
+        const allowed = new Set();
+        if (p.primaryRoleId) {
+            allowed.add(p.primaryRoleId);
+        }
+        for (const roleId of p.secondaryRoleIds ?? []) {
+            allowed.add(roleId);
+        }
+        return allowed.size > 0 ? allowed : null;
+    }
+    /**
+     * The set of role ids the given entity's direct children are restricted to,
+     * or null for full auto-discovery. Non-null only when the entity is a root of
+     * the active `Type` perspective (whitelist-at-root-only).
+     */
+    rootWhitelistFor(rtId) {
+        return this.perspectiveRootRtIds.has(rtId)
+            ? this.activePerspectiveWhitelist()
+            : null;
+    }
+    /**
+     * Resolves the active perspective from the configured list, falling back to a
+     * configured/built-in spatial one when the selected key is unknown.
+     */
+    async resolveActivePerspective() {
+        const perspectives = await this.getPerspectives();
+        return (perspectives.find((p) => p.key === this.activePerspectiveKey) ??
+            perspectives.find((p) => p.key === SPATIAL_PERSPECTIVE_KEY) ??
+            BUILT_IN_SPATIAL_PERSPECTIVE);
+    }
     isCkModelsRoot(item) {
         return !!item && 'isCkModelsRoot' in item;
     }
@@ -6426,17 +6716,30 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
         // runtime edges but are no longer declared on the type in the installed CK
         // model (orphan roles after model evolution). Each group carries its concrete
         // origin CK type (the ckId used to load its targets) and an exact count.
-        const roleGroups = await this.discoverEntityInboundRoleGroups(rtEntity.rtId, rtEntity.ckTypeId);
+        const discoveredGroups = await this.discoverEntityInboundRoleGroups(rtEntity.rtId, rtEntity.ckTypeId);
+        // AB#4263: when this entity is a root of the active `Type` perspective,
+        // restrict its direct children to the perspective's primary + secondary
+        // roles (whitelist-at-root-only). Deeper nodes are not in
+        // perspectiveRootRtIds, so they keep full auto-discovery.
+        const whitelist = this.rootWhitelistFor(rtEntity.rtId);
+        const primaryRoleId = whitelist ? this.activePerspective.primaryRoleId : undefined;
+        const roleGroups = whitelist
+            ? discoveredGroups.filter((g) => whitelist.has(g.roleId))
+            : discoveredGroups;
         // Apply the optional per-tenant TreeNavigationConfiguration overrides on top
         // of auto-discovery: hide (visible), relabel (displayName), reorder
         // (sortIndex), flatten vs group (grouped), icon. Defaults reproduce Phase 1:
-        // System/ParentChild flat, every other role grouped.
+        // System/ParentChild flat, every other role grouped. In a perspective root
+        // the perspective's primary role is flattened at the top instead.
         const annotated = await Promise.all(roleGroups.map(async (group) => {
             const override = await this.treeNavConfig.resolve(rtEntity.ckTypeId, group.roleId);
+            const defaultGrouped = primaryRoleId
+                ? group.roleId !== primaryRoleId
+                : group.roleId !== PARENT_CHILD_ROLE_ID;
             return {
                 group,
                 visible: override?.visible !== false,
-                grouped: override?.grouped ?? group.roleId !== PARENT_CHILD_ROLE_ID,
+                grouped: override?.grouped ?? defaultGrouped,
                 displayName: override?.displayName,
                 sortIndex: override?.sortIndex,
                 icon: override?.icon,
@@ -6697,6 +7000,17 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
             // Add CK Models root node
             const ckModelsRoot = { isCkModelsRoot: true };
             result.push(new TreeItemDataTyped('ck-models-root', 'CK Models', 'Construction Kit Models', ckModelsRoot, folderOpenIcon, true));
+            // AB#4263: resolve the active perspective and reset the root-id set that
+            // scopes the whitelist to the direct children of these roots.
+            this.perspectiveRootRtIds.clear();
+            this.activePerspective = await this.resolveActivePerspective();
+            // `Type` perspective: roots are all instances of the configured CK type.
+            if (this.activePerspective.rootMode === 'Type' &&
+                this.activePerspective.rootCkTypeId) {
+                result.push(...(await this.fetchTypePerspectiveRoots(this.activePerspective.rootCkTypeId)));
+                return result;
+            }
+            // Spatial perspective (default): all Basic/Tree entities, exactly as before.
             // Check if Basic construction kit is available before trying to fetch Tree entities
             const isBasicCkAvailable = await this.checkBasicConstructionKitAvailable();
             if (isBasicCkAvailable) {
@@ -6743,6 +7057,39 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
             return [];
         }
     }
+    /**
+     * Loads all runtime instances of a CK type as the roots of a `Type`
+     * perspective (AB#4263), registering their rtIds so the whitelist applies to
+     * their direct children only. Expandability is schema-based (does the type
+     * declare an inbound role, restricted to the whitelist when set).
+     */
+    async fetchTypePerspectiveRoots(ckTypeId) {
+        try {
+            const response = await firstValueFrom(this.apollo.query({
+                query: GET_ROOT_ENTITIES_BY_CK_TYPE,
+                variables: { ckTypeId, first: 2000 },
+                fetchPolicy: 'network-only',
+            }));
+            const items = (response.data?.runtime?.runtimeEntities?.items ?? []).filter((i) => !!i && !!i.rtId && !!i.ckTypeId);
+            // Expandable when the root type declares at least one inbound role that
+            // survives the whitelist (avoids always-empty expand arrows).
+            const whitelist = this.activePerspectiveWhitelist();
+            const roles = items.length > 0 ? await this.getInboundRoles(items[0].ckTypeId) : [];
+            const expandable = whitelist
+                ? roles.some((r) => whitelist.has(r.roleId))
+                : roles.length > 0;
+            const result = [];
+            for (const item of items) {
+                this.perspectiveRootRtIds.add(item.rtId);
+                result.push(new TreeItemDataTyped(`${item.ckTypeId}@${item.rtId}`, this.extractDisplayName(item), this.extractTooltip(item), item, this.resolveIcon(item.ckTypeId), expandable));
+            }
+            return result;
+        }
+        catch (error) {
+            console.error('Error fetching type-perspective roots for', ckTypeId, error);
+            return [];
+        }
+    }
     /**
      * Gets ParentChild association of given Runtime Entity.
      *
@@ -7036,11 +7383,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+/**
+ * Small toolbar control that lets the user switch the active tree perspective
+ * (AB#4263). Theme-neutral (Kendo CSS variables only). Renders nothing when
+ * there is a single perspective, so a zero-config tenant sees no switcher.
+ */
+class PerspectiveSwitcherComponent {
+    /** All selectable perspectives (built-in spatial first). */
+    perspectives = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "perspectives" }] : /* istanbul ignore next */ []));
+    /** Currently active perspective key. */
+    activeKey = input('Spatial', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /** Label shown before the dropdown. */
+    label = input('Perspective', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Emits the selected perspective key. */
+    perspectiveChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PerspectiveSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PerspectiveSwitcherComponent, isStandalone: true, selector: "mm-perspective-switcher", inputs: { perspectives: { classPropertyName: "perspectives", publicName: "perspectives", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { perspectiveChange: "perspectiveChange" }, ngImport: i0, template: `
+    @if (perspectives().length > 1) {
+      <div class="perspective-switcher">
+        <span class="switcher-label">{{ label() }}</span>
+        <kendo-dropdownlist
+          [data]="perspectives()"
+          [textField]="'displayName'"
+          [valueField]="'key'"
+          [valuePrimitive]="true"
+          [value]="activeKey()"
+          (valueChange)="perspectiveChange.emit($event)"
+        ></kendo-dropdownlist>
+      </div>
+    }
+  `, isInline: true, styles: [".perspective-switcher{display:flex;align-items:center;gap:8px;padding:4px 8px}.switcher-label{font-size:.85rem;font-weight:600;color:var(--kendo-color-subtle, #6c757d);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PerspectiveSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-perspective-switcher', standalone: true, imports: [DropDownListModule], template: `
+    @if (perspectives().length > 1) {
+      <div class="perspective-switcher">
+        <span class="switcher-label">{{ label() }}</span>
+        <kendo-dropdownlist
+          [data]="perspectives()"
+          [textField]="'displayName'"
+          [valueField]="'key'"
+          [valuePrimitive]="true"
+          [value]="activeKey()"
+          (valueChange)="perspectiveChange.emit($event)"
+        ></kendo-dropdownlist>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".perspective-switcher{display:flex;align-items:center;gap:8px;padding:4px 8px}.switcher-label{font-size:.85rem;font-weight:600;color:var(--kendo-color-subtle, #6c757d);white-space:nowrap}\n"] }]
+        }], propDecorators: { perspectives: [{ type: i0.Input, args: [{ isSignal: true, alias: "perspectives", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], perspectiveChange: [{ type: i0.Output, args: ["perspectiveChange"] }] } });
+
 class EntitySelectorDialogComponent {
     windowRef = inject(WindowRef);
     treeDataSource = inject(RuntimeBrowserDataSource);
+    tree;
+    /** Selectable tree perspectives (AB#4263); switcher hides itself when <= 1. */
+    perspectives = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "perspectives" }] : /* istanbul ignore next */ []));
+    activePerspectiveKey = signal(this.treeDataSource.getActivePerspectiveKey(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePerspectiveKey" }] : /* istanbul ignore next */ []));
     data = {};
     selectedEntity = null;
+    async ngOnInit() {
+        try {
+            this.perspectives.set(await this.treeDataSource.getPerspectives());
+            this.activePerspectiveKey.set(this.treeDataSource.getActivePerspectiveKey());
+        }
+        catch (error) {
+            console.error('Error loading perspectives', error);
+        }
+    }
+    /** Switches the active perspective and reloads the picker tree. */
+    async onPerspectiveChange(key) {
+        this.treeDataSource.setActivePerspective(key);
+        this.activePerspectiveKey.set(key);
+        this.selectedEntity = null;
+        await this.tree?.refreshTree();
+    }
     onNodeSelected(node) {
         const item = node.item;
         if (item && typeof item === 'object' && 'rtId' in item && 'ckTypeId' in item) {
@@ -7070,11 +7492,17 @@ class EntitySelectorDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntitySelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntitySelectorDialogComponent, isStandalone: true, selector: "mm-entity-selector-dialog", providers: [RuntimeBrowserDataSource], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntitySelectorDialogComponent, isStandalone: true, selector: "mm-entity-selector-dialog", providers: [RuntimeBrowserDataSource], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }], ngImport: i0, template: `
     <div class="entity-selector">
       <div class="entity-selector-body">
+        <mm-perspective-switcher
+          [perspectives]="perspectives()"
+          [activeKey]="activePerspectiveKey()"
+          (perspectiveChange)="onPerspectiveChange($event)"
+        ></mm-perspective-switcher>
         <div class="tree-section">
           <mm-tree-view
+            #tree
             [dataSource]="treeDataSource"
             (nodeSelected)="onNodeSelected($event)"
           ></mm-tree-view>
@@ -7109,7 +7537,7 @@ class EntitySelectorDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0}.entity-selector{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box}.entity-selector-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.tree-section{flex:1;min-height:0;overflow:auto;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface, #ffffff)}.selection-preview{padding:10px 12px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);display:flex;flex-direction:column;gap:4px;flex-shrink:0}.preview-row{display:flex;gap:8px}.preview-row .preview-label{font-weight:600;min-width:45px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.preview-row .preview-value{font-size:.85rem}.preview-row .monospace{font-family:monospace}.selection-hint{text-align:center;padding:8px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem;flex-shrink:0}.dialog-actions{flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--kendo-color-border, #dee2e6);background:var(--kendo-color-surface, transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TreeComponent, selector: "mm-tree-view", inputs: ["dataSource"], outputs: ["nodeSelected", "nodeClick", "nodeDoubleClick", "nodeDrop", "expand", "collapse"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0}.entity-selector{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box}.entity-selector-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.tree-section{flex:1;min-height:0;overflow:auto;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface, #ffffff)}.selection-preview{padding:10px 12px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);display:flex;flex-direction:column;gap:4px;flex-shrink:0}.preview-row{display:flex;gap:8px}.preview-row .preview-label{font-weight:600;min-width:45px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.preview-row .preview-value{font-size:.85rem}.preview-row .monospace{font-family:monospace}.selection-hint{text-align:center;padding:8px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem;flex-shrink:0}.dialog-actions{flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--kendo-color-border, #dee2e6);background:var(--kendo-color-surface, transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TreeComponent, selector: "mm-tree-view", inputs: ["dataSource"], outputs: ["nodeSelected", "nodeClick", "nodeDoubleClick", "nodeDrop", "expand", "collapse"] }, { kind: "component", type: PerspectiveSwitcherComponent, selector: "mm-perspective-switcher", inputs: ["perspectives", "activeKey", "label"], outputs: ["perspectiveChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntitySelectorDialogComponent, decorators: [{
             type: Component,
@@ -7117,11 +7545,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         CommonModule,
                         ButtonModule,
                         TreeComponent,
+                        PerspectiveSwitcherComponent,
                     ], providers: [RuntimeBrowserDataSource], template: `
     <div class="entity-selector">
       <div class="entity-selector-body">
+        <mm-perspective-switcher
+          [perspectives]="perspectives()"
+          [activeKey]="activePerspectiveKey()"
+          (perspectiveChange)="onPerspectiveChange($event)"
+        ></mm-perspective-switcher>
         <div class="tree-section">
           <mm-tree-view
+            #tree
             [dataSource]="treeDataSource"
             (nodeSelected)="onNodeSelected($event)"
           ></mm-tree-view>
@@ -7157,7 +7592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       </div>
     </div>
   `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0}.entity-selector{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box}.entity-selector-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.tree-section{flex:1;min-height:0;overflow:auto;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface, #ffffff)}.selection-preview{padding:10px 12px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);display:flex;flex-direction:column;gap:4px;flex-shrink:0}.preview-row{display:flex;gap:8px}.preview-row .preview-label{font-weight:600;min-width:45px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.preview-row .preview-value{font-size:.85rem}.preview-row .monospace{font-family:monospace}.selection-hint{text-align:center;padding:8px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem;flex-shrink:0}.dialog-actions{flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--kendo-color-border, #dee2e6);background:var(--kendo-color-surface, transparent)}\n"] }]
-        }] });
+        }], propDecorators: { tree: [{
+                type: ViewChild,
+                args: ['tree']
+            }] } });
 
 const DIALOG_KEY$1 = 'entity-selector';
 const DEFAULT_SIZE$1 = { width: 600, height: 680 };
@@ -8817,6 +9255,7 @@ const DEFAULT_RUNTIME_BROWSER_MESSAGES = {
     mappingNotSet: '(not set)',
     mappingSelect: 'Select...',
     mappingNoneConfigured: 'No data point mappings configured yet.',
+    perspective: 'Perspective',
 };
 
 class DataMappingListComponent {
@@ -14754,6 +15193,26 @@ class RuntimeBrowserComponent {
         ...this.messages(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedMessages" }] : /* istanbul ignore next */ []));
+    /** Selectable tree perspectives (AB#4263); switcher hides itself when <= 1. */
+    perspectives = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "perspectives" }] : /* istanbul ignore next */ []));
+    activePerspectiveKey = signal(this.dataSource.getActivePerspectiveKey(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePerspectiveKey" }] : /* istanbul ignore next */ []));
+    /** Switches the active perspective and reloads the tree from its new roots. */
+    async onPerspectiveChange(key) {
+        this.dataSource.setActivePerspective(key);
+        this.activePerspectiveKey.set(key);
+        await this.treeDetail?.refreshTree();
+    }
+    async loadPerspectives() {
+        try {
+            this.perspectives.set(await this.dataSource.getPerspectives());
+            this.activePerspectiveKey.set(this.dataSource.getActivePerspectiveKey());
+        }
+        catch (error) {
+            console.error('Error loading perspectives', error);
+        }
+    }
     treeDetail;
     detailsPanel;
     // Define toolbar actions
@@ -14833,6 +15292,8 @@ class RuntimeBrowserComponent {
         return !this.isLoading && this.isSelectedItemAnRtEntity && !this.isEditing;
     }
     ngAfterViewInit() {
+        // Load the selectable perspectives for the switcher (AB#4263).
+        void this.loadPerspectives();
         // Restore tree state after the tree has been initialized
         this.waitForTreeComponent().then((isReady) => {
             if (isReady) {
@@ -15338,6 +15799,12 @@ class RuntimeBrowserComponent {
       <!-- Main Content -->
       <div class="lcars-content-panel">
         <div class="panel-accent-top"></div>
+        <mm-perspective-switcher
+          [perspectives]="perspectives()"
+          [activeKey]="activePerspectiveKey()"
+          [label]="resolvedMessages().perspective ?? 'Perspective'"
+          (perspectiveChange)="onPerspectiveChange($event)"
+        ></mm-perspective-switcher>
         <mm-base-tree-detail
           #treeDetail
           [treeDataSource]="dataSource"
@@ -15373,11 +15840,15 @@ class RuntimeBrowserComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.runtime-browser-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}::ng-deep mm-base-tree-detail .k-splitter{background:transparent;border:none}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar{background:linear-gradient(180deg,var(--octo-mint-30),transparent);width:4px!important}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar:hover{background:linear-gradient(180deg,var(--octo-mint-50),var(--octo-mint-20))}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf{font-family:Roboto,sans-serif;transition:all .2s ease;border-radius:4px}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf:hover{background:var(--octo-mint-10);color:var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected{background:linear-gradient(90deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-left:3px solid var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected:hover{background:linear-gradient(90deg,var(--octo-mint-25),transparent)}::ng-deep mm-base-tree-detail .toolbar{background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}::ng-deep mm-base-tree-detail .base-tree-detail-container{height:100%;display:flex;flex-direction:column}::ng-deep mm-base-tree-detail .base-tree-detail-container .k-splitter{flex:1;min-height:0}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details{display:flex!important;flex:1!important;min-height:0!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details>.runtime-browser-details{flex:1;display:flex;flex-direction:column;min-height:0}@media(max-width:1024px){.runtime-browser-container{padding:12px;gap:12px}}@media(max-width:768px){.runtime-browser-container{padding:8px;gap:10px}}\n"], dependencies: [{ kind: "component", type: BaseTreeDetailComponent, selector: "mm-base-tree-detail", inputs: ["treeDataSource", "leftPaneSize", "leftToolbarActions", "rightToolbarActions"], outputs: ["nodeSelected", "nodeDropped"] }, { kind: "component", type: RuntimeBrowserDetailsComponent, selector: "mm-runtime-browser-details", inputs: ["selectedItem", "showDataMapping", "messages", "expressionValidator"], outputs: ["entitySaved"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.runtime-browser-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}::ng-deep mm-base-tree-detail .k-splitter{background:transparent;border:none}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar{background:linear-gradient(180deg,var(--octo-mint-30),transparent);width:4px!important}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar:hover{background:linear-gradient(180deg,var(--octo-mint-50),var(--octo-mint-20))}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf{font-family:Roboto,sans-serif;transition:all .2s ease;border-radius:4px}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf:hover{background:var(--octo-mint-10);color:var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected{background:linear-gradient(90deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-left:3px solid var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected:hover{background:linear-gradient(90deg,var(--octo-mint-25),transparent)}::ng-deep mm-base-tree-detail .toolbar{background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}::ng-deep mm-base-tree-detail .base-tree-detail-container{height:100%;display:flex;flex-direction:column}::ng-deep mm-base-tree-detail .base-tree-detail-container .k-splitter{flex:1;min-height:0}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details{display:flex!important;flex:1!important;min-height:0!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details>.runtime-browser-details{flex:1;display:flex;flex-direction:column;min-height:0}@media(max-width:1024px){.runtime-browser-container{padding:12px;gap:12px}}@media(max-width:768px){.runtime-browser-container{padding:8px;gap:10px}}\n"], dependencies: [{ kind: "component", type: BaseTreeDetailComponent, selector: "mm-base-tree-detail", inputs: ["treeDataSource", "leftPaneSize", "leftToolbarActions", "rightToolbarActions"], outputs: ["nodeSelected", "nodeDropped"] }, { kind: "component", type: RuntimeBrowserDetailsComponent, selector: "mm-runtime-browser-details", inputs: ["selectedItem", "showDataMapping", "messages", "expressionValidator"], outputs: ["entitySaved"] }, { kind: "component", type: PerspectiveSwitcherComponent, selector: "mm-perspective-switcher", inputs: ["perspectives", "activeKey", "label"], outputs: ["perspectiveChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-runtime-browser', imports: [BaseTreeDetailComponent, RuntimeBrowserDetailsComponent], template: `
+            args: [{ selector: 'mm-runtime-browser', imports: [
+                        BaseTreeDetailComponent,
+                        RuntimeBrowserDetailsComponent,
+                        PerspectiveSwitcherComponent,
+                    ], template: `
     <div class="runtime-browser-container kendo-theme-provider">
       <!-- LCARS Header -->
       <div class="lcars-page-header">
@@ -15404,6 +15875,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       <!-- Main Content -->
       <div class="lcars-content-panel">
         <div class="panel-accent-top"></div>
+        <mm-perspective-switcher
+          [perspectives]="perspectives()"
+          [activeKey]="activePerspectiveKey()"
+          [label]="resolvedMessages().perspective ?? 'Perspective'"
+          (perspectiveChange)="onPerspectiveChange($event)"
+        ></mm-perspective-switcher>
         <mm-base-tree-detail
           #treeDetail
           [treeDataSource]="dataSource"