@acorex-platform/module-system-insight-client 0.0.21

package/fesm2022/acorex-platform-module-system-insight-client-index-D-Sy2f4K.mjs

@@ -0,0 +1,708 @@
+import { TRACE_TIMELINE_PAGE_COMPONENT_KEY, TRACE_FLOW_PAGE_COMPONENT_KEY } from '@acorex-platform/module-system-insight-contracts';
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { convertArrayToDataSource } from '@acorex/cdk/common';
+import * as i1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/data-table';
+import { AXDataTableModule } from '@acorex/components/data-table';
+import * as i4 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i5 from '@acorex/components/progress-bar';
+import { AXProgressBarModule } from '@acorex/components/progress-bar';
+import * as i7 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { AXPQueryExecutor } from '@acorex-platform/framework-client/runtime';
+import { runtimeQueryPayloadData } from '@acorex-platform/framework-shared/core';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { arrangeWorkflowDiagram, AXPWorkflowDesignerComponent } from '@acorex-platform/module-platform-management-client';
+
+//#region ---- Trace page providers ----
+class AXMTraceTimelinePageComponentProvider {
+    async components() {
+        return [
+            {
+                key: TRACE_TIMELINE_PAGE_COMPONENT_KEY,
+                loader: () => Promise.resolve().then(function () { return traceTimelinePage_component; }).then((m) => m.AXMTraceTimelinePageComponent),
+            },
+            {
+                key: TRACE_FLOW_PAGE_COMPONENT_KEY,
+                loader: () => Promise.resolve().then(function () { return traceFlowPage_component; }).then((m) => m.AXMTraceFlowPageComponent),
+            },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceTimelinePageComponentProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceTimelinePageComponentProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceTimelinePageComponentProvider, decorators: [{
+            type: Injectable
+        }] });
+
+//#endregion
+/**
+ * TraceEntry detail tab — same hosting pattern as workflow Activities / RuleSet Simulate.
+ * Chrome comes from entity details; content uses ACOREX controls only.
+ */
+class AXMTraceTimelinePageComponent extends AXPPageLayoutBaseComponent {
+    #loadEffect;
+    constructor() {
+        super();
+        this.queryExecutor = inject(AXPQueryExecutor);
+        this.translationService = inject(AXTranslationService);
+        /** Entity record from TraceEntry detail host. */
+        this.rootContext = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.pageConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "pageConfig" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.timeline = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
+        this.spanRows = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spanRows" }] : /* istanbul ignore next */ []));
+        this.spansLabel = signal('Spans', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spansLabel" }] : /* istanbul ignore next */ []));
+        this.spanCountBadge = computed(() => `${this.spanRows().length} ${this.spansLabel()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spanCountBadge" }] : /* istanbul ignore next */ []));
+        this.dataSource = signal(convertArrayToDataSource([], { key: 'id', pageSize: 100 }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.traceId = computed(() => {
+            const ctx = this.rootContext() ?? {};
+            const fromTraceId = typeof ctx['traceId'] === 'string' ? ctx['traceId'].trim() : '';
+            if (fromTraceId) {
+                return fromTraceId;
+            }
+            const fromId = typeof ctx['id'] === 'string' ? ctx['id'].trim() : '';
+            return fromId;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "traceId" }] : /* istanbul ignore next */ []));
+        this.#loadEffect = effect(() => {
+            const id = this.traceId();
+            void this.loadTimeline(id);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#loadEffect" }] : /* istanbul ignore next */ []));
+        void this.translationService
+            .translateAsync('@system-insight:pages.trace-timeline.spans')
+            .then((label) => this.spansLabel.set(label));
+    }
+    async getPageTitle() {
+        return this.translationService.translateAsync('@system-insight:pages.trace-timeline.title');
+    }
+    goToRelatedLogs() {
+        const traceId = this.timeline()?.traceId ?? this.traceId();
+        if (!traceId) {
+            return;
+        }
+        const app = this.sessionService.application?.name;
+        if (!app) {
+            return;
+        }
+        void this.router.navigate([`/${app}/m/SystemInsight/e/LogEntry/list`], {
+            queryParams: { traceId },
+        });
+    }
+    async loadTimeline(traceId) {
+        if (!traceId) {
+            this.timeline.set(null);
+            this.spanRows.set([]);
+            this.dataSource.set(convertArrayToDataSource([], { key: 'id', pageSize: 100 }));
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        try {
+            const result = await this.queryExecutor.fetch('SystemInsight:TraceTimeline:Get', traceId);
+            const timeline = runtimeQueryPayloadData(result) ?? null;
+            const rows = this.buildSpanRows(timeline);
+            this.timeline.set(timeline);
+            this.spanRows.set(rows);
+            this.dataSource.set(convertArrayToDataSource(rows, { key: 'id', pageSize: 100 }));
+            this.recompute();
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    buildSpanRows(timeline) {
+        if (!timeline?.spans?.length) {
+            return [];
+        }
+        const spanStarts = timeline.spans
+            .map((span) => Date.parse(span.startTime))
+            .filter((value) => Number.isFinite(value));
+        const rootStart = spanStarts.length ? Math.min(...spanStarts) : Date.parse(timeline.startTime) || 0;
+        const maxEnd = Math.max(...timeline.spans.map((span) => {
+            const start = Date.parse(span.startTime);
+            const startMs = Number.isFinite(start) ? start : rootStart;
+            return startMs + (span.duration || 0);
+        }), rootStart + (timeline.duration || 0));
+        const total = Math.max(maxEnd - rootStart, timeline.duration || 1, 1);
+        return timeline.spans.map((span) => {
+            const start = Date.parse(span.startTime);
+            const offsetMs = Number.isFinite(start) ? Math.max(0, start - rootStart) : 0;
+            const widthPercent = Math.max(3, Math.min(100, ((span.duration || 0) / total) * 100));
+            const offsetPercent = Math.max(0, Math.min(100 - widthPercent, (offsetMs / total) * 100));
+            return {
+                ...span,
+                offsetPercent,
+                widthPercent,
+                durationShare: span.duration ?? 0,
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceTimelinePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMTraceTimelinePageComponent, isStandalone: true, selector: "axm-trace-timeline-page", inputs: { rootContext: { classPropertyName: "rootContext", publicName: "rootContext", isSignal: true, isRequired: false, transformFunction: null }, pageConfig: { classPropertyName: "pageConfig", publicName: "pageConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-trace-timeline-page block w-full min-h-0" }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMTraceTimelinePageComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="axm-trace-timeline flex flex-col gap-4 p-4 w-full min-h-0">
+      @if (loading()) {
+        <div class="flex justify-center py-10">
+          <ax-loading />
+        </div>
+      } @else if (timeline(); as data) {
+        <div class="flex flex-wrap items-center gap-2">
+          <ax-badge [text]="spanCountBadge()" color="primary" size="sm"></ax-badge>
+          @for (service of data.services; track service) {
+            <ax-badge [text]="service" color="secondary" size="sm"></ax-badge>
+          }
+          <span class="text-sm text-muted ms-auto">
+            {{ '@system-insight:pages.trace-timeline.duration' | translate | async }}:
+            {{ data.duration }} ms
+          </span>
+          <ax-button
+            look="outline"
+            color="primary"
+            [text]="('@system-insight:pages.trace-timeline.view-logs' | translate | async) || ''"
+            (onClick)="goToRelatedLogs()"
+          ></ax-button>
+        </div>
+
+        <ax-data-table
+          class="w-full border border-lightest rounded-md overflow-hidden"
+          [paging]="false"
+          [dataSource]="dataSource()"
+        >
+          <ax-text-column
+            dataField="operationName"
+            [caption]="'@system-insight:fields.operation' | translate | async"
+            [width]="'200px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="serviceName"
+            [caption]="'@system-insight:fields.service-name' | translate | async"
+            [width]="'140px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="status"
+            [caption]="'@system-insight:fields.status' | translate | async"
+            [width]="'100px'"
+            [cellTemplate]="statusTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="duration"
+            [caption]="'@system-insight:fields.duration' | translate | async"
+            [width]="'110px'"
+            [cellTemplate]="durationTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="durationShare"
+            [caption]="'@system-insight:pages.trace-timeline.timeline' | translate | async"
+            [width]="'280px'"
+            [cellTemplate]="timelineTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="spanId"
+            [caption]="'@system-insight:fields.span-id' | translate | async"
+            [width]="'180px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+        </ax-data-table>
+      } @else {
+        <p class="text-sm text-muted p-2">
+          {{ '@system-insight:pages.trace-timeline.not-found' | translate | async }}
+        </p>
+      }
+    </div>
+
+    <ng-template #statusTpl let-item>
+      <ax-badge
+        [text]="item.data?.status || 'ok'"
+        [color]="item.data?.status === 'error' ? 'danger' : 'success'"
+        size="sm"
+      ></ax-badge>
+    </ng-template>
+
+    <ng-template #durationTpl let-item>{{ item.data?.duration ?? 0 }} ms</ng-template>
+
+    <ng-template #timelineTpl let-item>
+      <div class="flex w-full items-center gap-0 py-1">
+        <div class="shrink-0" [style.width.%]="item.data?.offsetPercent ?? 0"></div>
+        <div class="min-w-0" [style.width.%]="item.data?.widthPercent ?? 3">
+          <ax-progress-bar
+            [progress]="100"
+            [color]="item.data?.status === 'error' ? 'danger' : 'primary'"
+            [style.height.px]="10"
+          ></ax-progress-bar>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i3.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i5.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceTimelinePageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axm-trace-timeline-page',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        AXBadgeModule,
+                        AXButtonModule,
+                        AXDataTableModule,
+                        AXLoadingModule,
+                        AXProgressBarModule,
+                        AXTranslationModule,
+                    ],
+                    template: `
+    <div class="axm-trace-timeline flex flex-col gap-4 p-4 w-full min-h-0">
+      @if (loading()) {
+        <div class="flex justify-center py-10">
+          <ax-loading />
+        </div>
+      } @else if (timeline(); as data) {
+        <div class="flex flex-wrap items-center gap-2">
+          <ax-badge [text]="spanCountBadge()" color="primary" size="sm"></ax-badge>
+          @for (service of data.services; track service) {
+            <ax-badge [text]="service" color="secondary" size="sm"></ax-badge>
+          }
+          <span class="text-sm text-muted ms-auto">
+            {{ '@system-insight:pages.trace-timeline.duration' | translate | async }}:
+            {{ data.duration }} ms
+          </span>
+          <ax-button
+            look="outline"
+            color="primary"
+            [text]="('@system-insight:pages.trace-timeline.view-logs' | translate | async) || ''"
+            (onClick)="goToRelatedLogs()"
+          ></ax-button>
+        </div>
+
+        <ax-data-table
+          class="w-full border border-lightest rounded-md overflow-hidden"
+          [paging]="false"
+          [dataSource]="dataSource()"
+        >
+          <ax-text-column
+            dataField="operationName"
+            [caption]="'@system-insight:fields.operation' | translate | async"
+            [width]="'200px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="serviceName"
+            [caption]="'@system-insight:fields.service-name' | translate | async"
+            [width]="'140px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="status"
+            [caption]="'@system-insight:fields.status' | translate | async"
+            [width]="'100px'"
+            [cellTemplate]="statusTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="duration"
+            [caption]="'@system-insight:fields.duration' | translate | async"
+            [width]="'110px'"
+            [cellTemplate]="durationTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="durationShare"
+            [caption]="'@system-insight:pages.trace-timeline.timeline' | translate | async"
+            [width]="'280px'"
+            [cellTemplate]="timelineTpl"
+            [allowResizing]="true"
+          ></ax-text-column>
+          <ax-text-column
+            dataField="spanId"
+            [caption]="'@system-insight:fields.span-id' | translate | async"
+            [width]="'180px'"
+            [allowResizing]="true"
+          ></ax-text-column>
+        </ax-data-table>
+      } @else {
+        <p class="text-sm text-muted p-2">
+          {{ '@system-insight:pages.trace-timeline.not-found' | translate | async }}
+        </p>
+      }
+    </div>
+
+    <ng-template #statusTpl let-item>
+      <ax-badge
+        [text]="item.data?.status || 'ok'"
+        [color]="item.data?.status === 'error' ? 'danger' : 'success'"
+        size="sm"
+      ></ax-badge>
+    </ng-template>
+
+    <ng-template #durationTpl let-item>{{ item.data?.duration ?? 0 }} ms</ng-template>
+
+    <ng-template #timelineTpl let-item>
+      <div class="flex w-full items-center gap-0 py-1">
+        <div class="shrink-0" [style.width.%]="item.data?.offsetPercent ?? 0"></div>
+        <div class="min-w-0" [style.width.%]="item.data?.widthPercent ?? 3">
+          <ax-progress-bar
+            [progress]="100"
+            [color]="item.data?.status === 'error' ? 'danger' : 'primary'"
+            [style.height.px]="10"
+          ></ax-progress-bar>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMTraceTimelinePageComponent,
+                        },
+                    ],
+                    host: { class: 'axm-trace-timeline-page block w-full min-h-0' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { rootContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootContext", required: false }] }], pageConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageConfig", required: false }] }] } });
+
+var traceTimelinePage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMTraceTimelinePageComponent: AXMTraceTimelinePageComponent
+});
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Constants ----
+const DEFAULT_NODE_W = 220;
+const DEFAULT_NODE_H = 88;
+//#endregion
+//#region ---- Helpers ----
+function spanTitle(span) {
+    if (span.middlewareName) {
+        return span.middlewareName;
+    }
+    return span.operationName;
+}
+function spanSubtitle(span) {
+    const parts = [];
+    if (span.spanKind) {
+        parts.push(span.spanKind);
+    }
+    if (span.duration != null) {
+        parts.push(`${span.duration} ms`);
+    }
+    if (span.nextMiddleware) {
+        parts.push(`→ ${span.nextMiddleware}`);
+    }
+    return parts.join(' · ');
+}
+function statusColors(status) {
+    if (status === 'error') {
+        return { color: 'danger', borderColor: 'danger' };
+    }
+    if (status === 'running') {
+        return { color: 'warning', borderColor: 'warning' };
+    }
+    return { borderColor: 'success' };
+}
+function sortSpans(spans) {
+    return [...spans].sort((a, b) => {
+        const aStart = Date.parse(a.startTime) || 0;
+        const bStart = Date.parse(b.startTime) || 0;
+        if (aStart !== bStart) {
+            return aStart - bStart;
+        }
+        return (a.order ?? 0) - (b.order ?? 0);
+    });
+}
+//#endregion
+//#region ---- Builder ----
+function buildTraceFlowDiagram(timeline) {
+    if (!timeline?.spans?.length) {
+        return null;
+    }
+    const spans = sortSpans(timeline.spans);
+    const nodes = spans.map((span, index) => {
+        const colors = statusColors(span.status);
+        return {
+            id: span.spanId,
+            type: span.spanKind ?? 'span',
+            title: spanTitle(span),
+            icon: span.spanKind === 'middleware'
+                ? 'fa-light fa-layer-group'
+                : span.spanKind === 'backend'
+                    ? 'fa-light fa-database'
+                    : 'fa-light fa-play',
+            shape: 'rounded-rectangle',
+            position: { x: index * 280, y: 40 },
+            size: { width: DEFAULT_NODE_W, height: DEFAULT_NODE_H },
+            inboundPorts: [{ id: `${span.spanId}:in`, kind: 'inbound', side: 'left', ratio: 0.5 }],
+            outboundPorts: [{ id: `${span.spanId}:out`, kind: 'outbound', side: 'right', ratio: 0.5 }],
+            readonly: true,
+            color: colors.color,
+            borderColor: colors.borderColor,
+            data: {
+                subtitle: spanSubtitle(span),
+                span,
+            },
+        };
+    });
+    const spanIds = new Set(spans.map((span) => span.spanId));
+    const connectors = spans
+        .filter((span) => span.parentSpanId && spanIds.has(span.parentSpanId))
+        .map((span) => ({
+        id: `${span.parentSpanId}->${span.spanId}`,
+        sourceNodeId: span.parentSpanId,
+        sourcePortId: `${span.parentSpanId}:out`,
+        targetNodeId: span.spanId,
+        targetPortId: `${span.spanId}:in`,
+        readonly: true,
+        borderColor: (span.status === 'error' ? 'danger' : 'primary'),
+    }));
+    // Fallback linear chain when parent links are missing
+    if (!connectors.length && nodes.length > 1) {
+        for (let i = 0; i < nodes.length - 1; i += 1) {
+            connectors.push({
+                id: `${nodes[i].id}->${nodes[i + 1].id}`,
+                sourceNodeId: nodes[i].id,
+                sourcePortId: `${nodes[i].id}:out`,
+                targetNodeId: nodes[i + 1].id,
+                targetPortId: `${nodes[i + 1].id}:in`,
+                readonly: true,
+                borderColor: 'primary',
+            });
+        }
+    }
+    return arrangeWorkflowDiagram({
+        nodes,
+        connectors,
+        data: {
+            traceId: timeline.traceId,
+            kind: timeline.kind,
+            operation: timeline.operation,
+        },
+    }, { direction: 'horizontal' });
+}
+//#endregion
+
+//#region ---- Trace flow display normalization ----
+/**
+ * Prepares a value for the Trace Flow detail viewer:
+ * - plain string → unchanged
+ * - JSON string → parsed object/array (recursively)
+ * - object/array → nested JSON strings expanded
+ */
+function normalizeTraceDisplayValue(value, depth = 0) {
+    if (depth > 8) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        return tryParseJsonString(value, depth);
+    }
+    if (Array.isArray(value)) {
+        return value.map((entry) => normalizeTraceDisplayValue(entry, depth + 1));
+    }
+    if (value && typeof value === 'object') {
+        const result = {};
+        for (const [key, entry] of Object.entries(value)) {
+            result[key] = normalizeTraceDisplayValue(entry, depth + 1);
+        }
+        return result;
+    }
+    return value;
+}
+function tryParseJsonString(value, depth) {
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return value;
+    }
+    const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+        ((trimmed.startsWith('"') && trimmed.endsWith('"')) && trimmed.length > 1);
+    if (!looksLikeJson) {
+        return value;
+    }
+    try {
+        const parsed = JSON.parse(trimmed);
+        return normalizeTraceDisplayValue(parsed, depth + 1);
+    }
+    catch {
+        return value;
+    }
+}
+//#endregion
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/**
+ * TraceEntry detail tab — readonly flow chart of spans (middleware chain),
+ * same hosting pattern as Timeline / workflow history Visual.
+ */
+class AXMTraceFlowPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ---- Services & Dependencies ----
+        this.queryExecutor = inject(AXPQueryExecutor);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ---- Inputs ----
+        /** Entity record from TraceEntry detail host. */
+        this.rootContext = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.pageConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "pageConfig" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- State Signals ----
+        this.loading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.timeline = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
+        this.selectedSpan = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedSpan" }] : /* istanbul ignore next */ []));
+        this.diagram = computed(() => buildTraceFlowDiagram(this.timeline()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "diagram" }] : /* istanbul ignore next */ []));
+        this.highlightedNodeIds = computed(() => {
+            const id = this.selectedSpan()?.spanId;
+            return id ? [id] : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightedNodeIds" }] : /* istanbul ignore next */ []));
+        this.traceId = computed(() => {
+            const ctx = this.rootContext() ?? {};
+            const fromTraceId = typeof ctx['traceId'] === 'string' ? ctx['traceId'].trim() : '';
+            if (fromTraceId) {
+                return fromTraceId;
+            }
+            const fromId = typeof ctx['id'] === 'string' ? ctx['id'].trim() : '';
+            return fromId;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "traceId" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Lifecycle ----
+        this.#loadEffect = effect(() => {
+            const id = this.traceId();
+            void this.loadTimeline(id);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#loadEffect" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ---- Lifecycle ----
+    #loadEffect;
+    //#endregion
+    //#region ---- Page metadata ----
+    async getPageTitle() {
+        return this.translationService.translateAsync('@system-insight:pages.trace-flow.title');
+    }
+    //#endregion
+    //#region ---- Event Handlers ----
+    onNodeClick(event) {
+        const nodeId = event.node.id;
+        const fromData = event.node.data?.['span'];
+        const fromTimeline = this.timeline()?.spans?.find((span) => span.spanId === nodeId || span.id === nodeId);
+        this.selectedSpan.set(fromData ?? fromTimeline ?? null);
+        this.recompute();
+    }
+    hasValue(value) {
+        if (value === undefined || value === null) {
+            return false;
+        }
+        if (typeof value === 'string') {
+            return value.trim().length > 0;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        if (typeof value === 'object') {
+            return Object.keys(value).length > 0;
+        }
+        return true;
+    }
+    /**
+     * Display rules:
+     * - plain string → as-is
+     * - JSON string → parse, then pretty JSON
+     * - object/array → pretty JSON (nested JSON strings also expanded)
+     */
+    formatJson(value) {
+        const normalized = normalizeTraceDisplayValue(value);
+        if (typeof normalized === 'string') {
+            return normalized;
+        }
+        try {
+            return JSON.stringify(normalized, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    //#endregion
+    //#region ---- Data Loading ----
+    async loadTimeline(traceId) {
+        if (!traceId) {
+            this.timeline.set(null);
+            this.selectedSpan.set(null);
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        try {
+            const result = await this.queryExecutor.fetch('SystemInsight:TraceTimeline:Get', traceId);
+            const timeline = runtimeQueryPayloadData(result) ?? null;
+            this.timeline.set(timeline);
+            this.selectedSpan.set(timeline?.spans?.[0] ?? null);
+            this.recompute();
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceFlowPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMTraceFlowPageComponent, isStandalone: true, selector: "axm-trace-flow-page", inputs: { rootContext: { classPropertyName: "rootContext", publicName: "rootContext", isSignal: true, isRequired: false, transformFunction: null }, pageConfig: { classPropertyName: "pageConfig", publicName: "pageConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-trace-flow-page block w-full min-h-0" }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMTraceFlowPageComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<!-- ----- Trace flow chart page ----- -->\n<div class=\"axm-trace-flow flex flex-col gap-4 p-4 w-full min-h-0 h-full\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while timeline is fetched ----- -->\n    <div class=\"flex justify-center py-10\">\n      <ax-loading />\n    </div>\n  }\n  <!-- ----- Empty state when timeline is missing ----- -->\n  @else if (!timeline()) {\n    <p class=\"typo-caption text-muted\">\n      {{ '@system-insight:pages.trace-flow.not-found' | translate | async }}\n    </p>\n  }\n  <!-- ----- Flow chart + span details ----- -->\n  @else {\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @if (timeline()?.kind; as kind) {\n        <ax-badge [text]=\"kind\" color=\"primary\" size=\"sm\"></ax-badge>\n      }\n      @if (timeline()?.operation; as operation) {\n        <span class=\"text-sm\">{{ operation }}</span>\n      }\n      <span class=\"text-sm text-muted ms-auto\">\n        {{ '@system-insight:pages.trace-flow.duration' | translate | async }}:\n        {{ timeline()?.duration }} ms\n      </span>\n    </div>\n\n    <div class=\"axm-trace-flow__canvas border border-lightest rounded-md overflow-hidden min-h-[360px] flex-1\">\n      @if (diagram(); as model) {\n        <!-- ----- Readonly span flow chart ----- -->\n        <axp-workflow-designer\n          [model]=\"model\"\n          [readonly]=\"true\"\n          [showPortLabels]=\"false\"\n          [highlightedNodeIds]=\"highlightedNodeIds()\"\n          (nodeClick)=\"onNodeClick($event)\"\n        />\n      }\n      <!-- ----- Empty diagram fallback ----- -->\n      @else {\n        <p class=\"typo-caption text-muted p-4\">\n          {{ '@system-insight:pages.trace-flow.empty' | translate | async }}\n        </p>\n      }\n    </div>\n\n    @if (selectedSpan(); as span) {\n      <!-- ----- Selected span details (metadata + IO) ----- -->\n      <div class=\"border border-lightest rounded-md p-4 flex flex-col gap-4\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <strong class=\"text-base\">{{ span.operationName }}</strong>\n          @if (span.spanKind) {\n            <ax-badge [text]=\"span.spanKind\" color=\"primary\" size=\"sm\"></ax-badge>\n          }\n          @if (span.middlewareName) {\n            <ax-badge [text]=\"span.middlewareName\" color=\"secondary\" size=\"sm\"></ax-badge>\n          }\n          @if (span.status) {\n            <ax-badge\n              [text]=\"span.status\"\n              [color]=\"span.status === 'error' ? 'danger' : 'success'\"\n              size=\"sm\"\n            ></ax-badge>\n          }\n        </div>\n\n        <!-- ----- Span metadata grid ----- -->\n        <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 text-sm\">\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:pages.trace-flow.span-id' | translate | async }}\n            </div>\n            <div class=\"font-mono break-all\">{{ span.spanId }}</div>\n          </div>\n          @if (span.parentSpanId) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:pages.trace-flow.parent-span-id' | translate | async }}\n              </div>\n              <div class=\"font-mono break-all\">{{ span.parentSpanId }}</div>\n            </div>\n          }\n          @if (span.serviceName) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:fields.service-name' | translate | async }}\n              </div>\n              <div>{{ span.serviceName }}</div>\n            </div>\n          }\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:pages.trace-flow.duration' | translate | async }}\n            </div>\n            <div>{{ span.duration ?? 0 }} ms</div>\n          </div>\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:fields.start-time' | translate | async }}\n            </div>\n            <div>{{ span.startTime }}</div>\n          </div>\n          @if (span.order != null) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:fields.order' | translate | async }}\n              </div>\n              <div>{{ span.order }}</div>\n            </div>\n          }\n          @if (span.nextMiddleware) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:pages.trace-flow.next-middleware' | translate | async }}\n              </div>\n              <div>{{ span.nextMiddleware }}</div>\n            </div>\n          }\n        </div>\n\n        @if (span.error) {\n          <!-- ----- Span error ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1 text-danger\">\n              {{ '@system-insight:fields.error' | translate | async }}\n            </div>\n            <pre class=\"text-sm whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-40\">{{\n              span.error\n            }}</pre>\n          </div>\n        }\n\n        <!-- ----- Input snapshot (always visible) ----- -->\n        <div>\n          <div class=\"text-sm font-medium mb-1\">\n            {{ '@system-insight:pages.trace-flow.input' | translate | async }}\n          </div>\n          @if (hasValue(span.input)) {\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.input)\n            }}</pre>\n          }\n          @else {\n            <p class=\"typo-caption text-muted m-0\">\n              {{ '@system-insight:pages.trace-flow.no-input' | translate | async }}\n            </p>\n          }\n        </div>\n\n        <!-- ----- Output snapshot (always visible) ----- -->\n        <div>\n          <div class=\"text-sm font-medium mb-1\">\n            {{ '@system-insight:pages.trace-flow.output' | translate | async }}\n          </div>\n          @if (hasValue(span.output)) {\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.output)\n            }}</pre>\n          }\n          @else {\n            <p class=\"typo-caption text-muted m-0\">\n              {{ '@system-insight:pages.trace-flow.no-output' | translate | async }}\n            </p>\n          }\n        </div>\n\n        @if (hasValue(span.tags)) {\n          <!-- ----- Span tags / attributes ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1\">\n              {{ '@system-insight:pages.trace-flow.attributes' | translate | async }}\n            </div>\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.tags)\n            }}</pre>\n          </div>\n        }\n\n        @if (span.logs?.length) {\n          <!-- ----- Span logs / events ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1\">\n              {{ '@system-insight:pages.trace-flow.events' | translate | async }}\n            </div>\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.logs)\n            }}</pre>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWorkflowDesignerComponent, selector: "axp-workflow-designer", inputs: ["model", "readonly", "highlightedNodeIds", "gridSize", "snapToGrid", "connectionPreviewStyle", "backgroundPattern", "canConnect", "paletteItems", "showPortLabels", "nodeBodyTemplate"], outputs: ["modelChange", "zoomChange", "designerPointerDown", "designerClick", "designerDoubleClick", "nodePointerDown", "nodeClick", "nodeDoubleClick", "nodeContextMenu", "nodeDragStart", "nodeDragEnd", "portPointerDown", "linkDragStart", "linkDragMove", "linkDragEnd", "connectorClick", "connectorDoubleClick", "connectionCreated", "connectionRejected", "activationChange"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTraceFlowPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-trace-flow-page', standalone: true, imports: [
+                        CommonModule,
+                        AXBadgeModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                        AXPWorkflowDesignerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMTraceFlowPageComponent,
+                        },
+                    ], host: { class: 'axm-trace-flow-page block w-full min-h-0' }, template: "<!-- ----- Trace flow chart page ----- -->\n<div class=\"axm-trace-flow flex flex-col gap-4 p-4 w-full min-h-0 h-full\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while timeline is fetched ----- -->\n    <div class=\"flex justify-center py-10\">\n      <ax-loading />\n    </div>\n  }\n  <!-- ----- Empty state when timeline is missing ----- -->\n  @else if (!timeline()) {\n    <p class=\"typo-caption text-muted\">\n      {{ '@system-insight:pages.trace-flow.not-found' | translate | async }}\n    </p>\n  }\n  <!-- ----- Flow chart + span details ----- -->\n  @else {\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @if (timeline()?.kind; as kind) {\n        <ax-badge [text]=\"kind\" color=\"primary\" size=\"sm\"></ax-badge>\n      }\n      @if (timeline()?.operation; as operation) {\n        <span class=\"text-sm\">{{ operation }}</span>\n      }\n      <span class=\"text-sm text-muted ms-auto\">\n        {{ '@system-insight:pages.trace-flow.duration' | translate | async }}:\n        {{ timeline()?.duration }} ms\n      </span>\n    </div>\n\n    <div class=\"axm-trace-flow__canvas border border-lightest rounded-md overflow-hidden min-h-[360px] flex-1\">\n      @if (diagram(); as model) {\n        <!-- ----- Readonly span flow chart ----- -->\n        <axp-workflow-designer\n          [model]=\"model\"\n          [readonly]=\"true\"\n          [showPortLabels]=\"false\"\n          [highlightedNodeIds]=\"highlightedNodeIds()\"\n          (nodeClick)=\"onNodeClick($event)\"\n        />\n      }\n      <!-- ----- Empty diagram fallback ----- -->\n      @else {\n        <p class=\"typo-caption text-muted p-4\">\n          {{ '@system-insight:pages.trace-flow.empty' | translate | async }}\n        </p>\n      }\n    </div>\n\n    @if (selectedSpan(); as span) {\n      <!-- ----- Selected span details (metadata + IO) ----- -->\n      <div class=\"border border-lightest rounded-md p-4 flex flex-col gap-4\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <strong class=\"text-base\">{{ span.operationName }}</strong>\n          @if (span.spanKind) {\n            <ax-badge [text]=\"span.spanKind\" color=\"primary\" size=\"sm\"></ax-badge>\n          }\n          @if (span.middlewareName) {\n            <ax-badge [text]=\"span.middlewareName\" color=\"secondary\" size=\"sm\"></ax-badge>\n          }\n          @if (span.status) {\n            <ax-badge\n              [text]=\"span.status\"\n              [color]=\"span.status === 'error' ? 'danger' : 'success'\"\n              size=\"sm\"\n            ></ax-badge>\n          }\n        </div>\n\n        <!-- ----- Span metadata grid ----- -->\n        <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 text-sm\">\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:pages.trace-flow.span-id' | translate | async }}\n            </div>\n            <div class=\"font-mono break-all\">{{ span.spanId }}</div>\n          </div>\n          @if (span.parentSpanId) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:pages.trace-flow.parent-span-id' | translate | async }}\n              </div>\n              <div class=\"font-mono break-all\">{{ span.parentSpanId }}</div>\n            </div>\n          }\n          @if (span.serviceName) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:fields.service-name' | translate | async }}\n              </div>\n              <div>{{ span.serviceName }}</div>\n            </div>\n          }\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:pages.trace-flow.duration' | translate | async }}\n            </div>\n            <div>{{ span.duration ?? 0 }} ms</div>\n          </div>\n          <div>\n            <div class=\"text-muted mb-1\">\n              {{ '@system-insight:fields.start-time' | translate | async }}\n            </div>\n            <div>{{ span.startTime }}</div>\n          </div>\n          @if (span.order != null) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:fields.order' | translate | async }}\n              </div>\n              <div>{{ span.order }}</div>\n            </div>\n          }\n          @if (span.nextMiddleware) {\n            <div>\n              <div class=\"text-muted mb-1\">\n                {{ '@system-insight:pages.trace-flow.next-middleware' | translate | async }}\n              </div>\n              <div>{{ span.nextMiddleware }}</div>\n            </div>\n          }\n        </div>\n\n        @if (span.error) {\n          <!-- ----- Span error ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1 text-danger\">\n              {{ '@system-insight:fields.error' | translate | async }}\n            </div>\n            <pre class=\"text-sm whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-40\">{{\n              span.error\n            }}</pre>\n          </div>\n        }\n\n        <!-- ----- Input snapshot (always visible) ----- -->\n        <div>\n          <div class=\"text-sm font-medium mb-1\">\n            {{ '@system-insight:pages.trace-flow.input' | translate | async }}\n          </div>\n          @if (hasValue(span.input)) {\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.input)\n            }}</pre>\n          }\n          @else {\n            <p class=\"typo-caption text-muted m-0\">\n              {{ '@system-insight:pages.trace-flow.no-input' | translate | async }}\n            </p>\n          }\n        </div>\n\n        <!-- ----- Output snapshot (always visible) ----- -->\n        <div>\n          <div class=\"text-sm font-medium mb-1\">\n            {{ '@system-insight:pages.trace-flow.output' | translate | async }}\n          </div>\n          @if (hasValue(span.output)) {\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.output)\n            }}</pre>\n          }\n          @else {\n            <p class=\"typo-caption text-muted m-0\">\n              {{ '@system-insight:pages.trace-flow.no-output' | translate | async }}\n            </p>\n          }\n        </div>\n\n        @if (hasValue(span.tags)) {\n          <!-- ----- Span tags / attributes ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1\">\n              {{ '@system-insight:pages.trace-flow.attributes' | translate | async }}\n            </div>\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.tags)\n            }}</pre>\n          </div>\n        }\n\n        @if (span.logs?.length) {\n          <!-- ----- Span logs / events ----- -->\n          <div>\n            <div class=\"text-sm font-medium mb-1\">\n              {{ '@system-insight:pages.trace-flow.events' | translate | async }}\n            </div>\n            <pre class=\"text-xs whitespace-pre-wrap m-0 p-2 rounded-md bg-lightest overflow-auto max-h-56\">{{\n              formatJson(span.logs)\n            }}</pre>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { rootContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootContext", required: false }] }], pageConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageConfig", required: false }] }] } });
+
+var traceFlowPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMTraceFlowPageComponent: AXMTraceFlowPageComponent
+});
+
+export { AXMTraceFlowPageComponent, AXMTraceTimelinePageComponent, AXMTraceTimelinePageComponentProvider, buildTraceFlowDiagram, normalizeTraceDisplayValue };
+//# sourceMappingURL=acorex-platform-module-system-insight-client-index-D-Sy2f4K.mjs.map