@xui/charts
Version:
xUI Charts for Angular
45 lines • 18.2 kB
JavaScript
import { Component, Input } from '@angular/core';
import { AnalysisService } from '../analysis.service';
import * as i0 from "@angular/core";
import * as i1 from "../analysis.service";
import * as i2 from "@angular/common";
import * as i3 from "@xui/components";
import * as i4 from "@angular/cdk/drag-drop";
export class MetricsComponent {
constructor(analysis) {
this.analysis = analysis;
this.opened = [];
this.active = null;
}
ngOnInit() {
// Testing
this.active = this.entities?.[0].entities[0] ?? null;
}
isActive(entity) {
return this.active?.id === entity.id;
}
activate(entity) {
this.active = entity;
}
isOpened(group) {
// return true;
return this.opened.includes(group.id);
}
toggleGroup(group) {
if (this.isOpened(group)) {
this.opened = this.opened.filter(x => x !== group.id);
}
else {
this.opened = [...this.opened, group.id];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MetricsComponent, deps: [{ token: i1.AnalysisService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MetricsComponent, selector: "xui-metrics", inputs: { entities: "entities" }, ngImport: i0, template: "<div class=\"entries\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n <div class=\"buttons\">\n <xui-button> <xui-icon icon=\"add_circle\"></xui-icon> Add Entities </xui-button>\n\n <xui-button type=\"icon\">\n <xui-icon icon=\"refresh\"></xui-icon>\n </xui-button>\n </div>\n\n @for (group of entities; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n <xui-icon [icon]=\"group.icon\"></xui-icon>\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\">\n @for (entity of group.entities; track entity.id) {\n <div class=\"entity\" [class.active]=\"isActive(entity)\" (click)=\"activate(entity)\">\n <xui-icon icon=\"check\"></xui-icon>\n {{ entity.name }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<div class=\"metrics\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n @for (group of active?.metrics; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\" cdkDropList cdkDropListSortingDisabled>\n @for (metric of group.metrics; track metric.id) {\n <div\n class=\"metric\"\n cdkDrag\n [cdkDragData]=\"{ metric, entity: active }\"\n (cdkDragStarted)=\"analysis.dragStarted()\"\n (cdkDragEnded)=\"analysis.dragEnded()\"\n >\n <span style=\"display: none\" *cdkDragPlaceholder></span>\n <div class=\"drag-preview\" *cdkDragPreview>\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}.entries{border-right:1px solid gray;padding:0 12px}.entries .buttons{display:flex;justify-content:space-between;border-bottom:1px dashed gray;padding:4px 0}.metrics{padding:0 12px}.group{font-size:12px;font-weight:600}.group .name{display:flex;cursor:pointer}.group .name .menu-icon{color:var(--color-primary-default);font-size:2em}.group .name .content{display:flex;gap:8px;align-items:center}.group .name .content .x-icon{font-size:1.5em}.group .entities{display:flex;flex-direction:column}.group .entities .entity{display:flex;gap:4px;align-items:center;cursor:pointer;margin-left:24px;padding:0 4px}.group .entities .entity .x-icon{font-size:1.5em}.group .entities .entity.active{background-color:#1e90ff}.group .entities .entity:hover{outline:1px solid gray;outline-offset:-1px}.group .entities .metric{display:flex;gap:8px;padding:8px 12px 8px 0;border-top:1px solid gray;cursor:move;line-height:1.3em}.group .entities .metric:last-child{border-bottom:1px solid gray}.group .entities .metric .description{color:gray}.drag-preview{display:flex;gap:8px;padding:8px 12px 8px 0;border-radius:4px;color:var(--color-bg-floating-contrast);background-color:var(--color-bg-floating);font-size:12px;font-weight:600;line-height:1.3em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XuiButton, selector: "xui-button", inputs: ["type", "size", "color", "shine", "disabled", "stateDelay", "onClick"], outputs: ["click"] }, { kind: "component", type: i3.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }, { kind: "component", type: i3.XuiInput, selector: "xui-input", inputs: ["value", "placeholder", "color", "size", "type", "dataList", "disabled", "readOnly"], outputs: ["valueChange"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MetricsComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-metrics', template: "<div class=\"entries\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n <div class=\"buttons\">\n <xui-button> <xui-icon icon=\"add_circle\"></xui-icon> Add Entities </xui-button>\n\n <xui-button type=\"icon\">\n <xui-icon icon=\"refresh\"></xui-icon>\n </xui-button>\n </div>\n\n @for (group of entities; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n <xui-icon [icon]=\"group.icon\"></xui-icon>\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\">\n @for (entity of group.entities; track entity.id) {\n <div class=\"entity\" [class.active]=\"isActive(entity)\" (click)=\"activate(entity)\">\n <xui-icon icon=\"check\"></xui-icon>\n {{ entity.name }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n<div class=\"metrics\">\n <xui-input color=\"dark\" size=\"small\">\n <xui-icon icon=\"search\" xuiPostfix></xui-icon>\n </xui-input>\n\n @for (group of active?.metrics; track group) {\n <div class=\"group\">\n <div class=\"name\" (click)=\"toggleGroup(group)\">\n <xui-icon class=\"menu-icon\" [icon]=\"isOpened(group) ? 'menu' : 'menu_open'\"></xui-icon>\n <div class=\"content\">\n {{ group.name }}\n </div>\n </div>\n\n <div class=\"entities\" *ngIf=\"isOpened(group)\" cdkDropList cdkDropListSortingDisabled>\n @for (metric of group.metrics; track metric.id) {\n <div\n class=\"metric\"\n cdkDrag\n [cdkDragData]=\"{ metric, entity: active }\"\n (cdkDragStarted)=\"analysis.dragStarted()\"\n (cdkDragEnded)=\"analysis.dragEnded()\"\n >\n <span style=\"display: none\" *cdkDragPlaceholder></span>\n <div class=\"drag-preview\" *cdkDragPreview>\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n\n <xui-icon icon=\"drag_indicator\"></xui-icon>\n <div>\n {{ metric.name }}\n <div class=\"description\">{{ active!.name }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}.entries{border-right:1px solid gray;padding:0 12px}.entries .buttons{display:flex;justify-content:space-between;border-bottom:1px dashed gray;padding:4px 0}.metrics{padding:0 12px}.group{font-size:12px;font-weight:600}.group .name{display:flex;cursor:pointer}.group .name .menu-icon{color:var(--color-primary-default);font-size:2em}.group .name .content{display:flex;gap:8px;align-items:center}.group .name .content .x-icon{font-size:1.5em}.group .entities{display:flex;flex-direction:column}.group .entities .entity{display:flex;gap:4px;align-items:center;cursor:pointer;margin-left:24px;padding:0 4px}.group .entities .entity .x-icon{font-size:1.5em}.group .entities .entity.active{background-color:#1e90ff}.group .entities .entity:hover{outline:1px solid gray;outline-offset:-1px}.group .entities .metric{display:flex;gap:8px;padding:8px 12px 8px 0;border-top:1px solid gray;cursor:move;line-height:1.3em}.group .entities .metric:last-child{border-bottom:1px solid gray}.group .entities .metric .description{color:gray}.drag-preview{display:flex;gap:8px;padding:8px 12px 8px 0;border-radius:4px;color:var(--color-bg-floating-contrast);background-color:var(--color-bg-floating);font-size:12px;font-weight:600;line-height:1.3em}\n"] }]
}], ctorParameters: () => [{ type: i1.AnalysisService }], propDecorators: { entities: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NoYXJ0cy9zcmMvYW5hbHlzaXMvbWV0cmljcy9tZXRyaWNzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY2hhcnRzL3NyYy9hbmFseXNpcy9tZXRyaWNzL21ldHJpY3MuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7QUFPdEQsTUFBTSxPQUFPLGdCQUFnQjtJQU0zQixZQUFtQixRQUF5QjtRQUF6QixhQUFRLEdBQVIsUUFBUSxDQUFpQjtRQUw1QyxXQUFNLEdBQWUsRUFBRSxDQUFDO1FBQ3hCLFdBQU0sR0FBa0IsSUFBSSxDQUFDO0lBSWtCLENBQUM7SUFFaEQsUUFBUTtRQUNOLFVBQVU7UUFDVixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDO0lBQ3ZELENBQUM7SUFFRCxRQUFRLENBQUMsTUFBYztRQUNyQixPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxLQUFLLE1BQU0sQ0FBQyxFQUFFLENBQUM7SUFDdkMsQ0FBQztJQUVELFFBQVEsQ0FBQyxNQUFjO1FBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBZ0M7UUFDdkMsZUFBZTtRQUNmLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBZ0M7UUFDMUMsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDeEQsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUMzQyxDQUFDO0lBQ0gsQ0FBQzs4R0FoQ1UsZ0JBQWdCO2tHQUFoQixnQkFBZ0IscUZDVDdCLHdqRkE4RUE7OzJGRHJFYSxnQkFBZ0I7a0JBTDVCLFNBQVM7K0JBQ0UsYUFBYTtvRkFRZCxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRW50aXR5LCBFbnRpdHlHcm91cCwgRW50aXR5SWQsIE1ldHJpY0dyb3VwIH0gZnJvbSAnLi4vYW5hbHlzaXMudHlwZXMnO1xuaW1wb3J0IHsgQW5hbHlzaXNTZXJ2aWNlIH0gZnJvbSAnLi4vYW5hbHlzaXMuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1tZXRyaWNzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpY3MuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tZXRyaWNzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTWV0cmljc0NvbXBvbmVudCB7XG4gIG9wZW5lZDogRW50aXR5SWRbXSA9IFtdO1xuICBhY3RpdmU6IEVudGl0eSB8IG51bGwgPSBudWxsO1xuXG4gIEBJbnB1dCgpIGVudGl0aWVzPzogRW50aXR5R3JvdXBbXTtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgYW5hbHlzaXM6IEFuYWx5c2lzU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICAvLyBUZXN0aW5nXG4gICAgdGhpcy5hY3RpdmUgPSB0aGlzLmVudGl0aWVzPy5bMF0uZW50aXRpZXNbMF0gPz8gbnVsbDtcbiAgfVxuXG4gIGlzQWN0aXZlKGVudGl0eTogRW50aXR5KSB7XG4gICAgcmV0dXJuIHRoaXMuYWN0aXZlPy5pZCA9PT0gZW50aXR5LmlkO1xuICB9XG5cbiAgYWN0aXZhdGUoZW50aXR5OiBFbnRpdHkpIHtcbiAgICB0aGlzLmFjdGl2ZSA9IGVudGl0eTtcbiAgfVxuXG4gIGlzT3BlbmVkKGdyb3VwOiBFbnRpdHlHcm91cCB8IE1ldHJpY0dyb3VwKSB7XG4gICAgLy8gcmV0dXJuIHRydWU7XG4gICAgcmV0dXJuIHRoaXMub3BlbmVkLmluY2x1ZGVzKGdyb3VwLmlkKTtcbiAgfVxuXG4gIHRvZ2dsZUdyb3VwKGdyb3VwOiBFbnRpdHlHcm91cCB8IE1ldHJpY0dyb3VwKSB7XG4gICAgaWYgKHRoaXMuaXNPcGVuZWQoZ3JvdXApKSB7XG4gICAgICB0aGlzLm9wZW5lZCA9IHRoaXMub3BlbmVkLmZpbHRlcih4ID0+IHggIT09IGdyb3VwLmlkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5vcGVuZWQgPSBbLi4udGhpcy5vcGVuZWQsIGdyb3VwLmlkXTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJlbnRyaWVzXCI+XG4gIDx4dWktaW5wdXQgY29sb3I9XCJkYXJrXCIgc2l6ZT1cInNtYWxsXCI+XG4gICAgPHh1aS1pY29uIGljb249XCJzZWFyY2hcIiB4dWlQb3N0Zml4PjwveHVpLWljb24+XG4gIDwveHVpLWlucHV0PlxuXG4gIDxkaXYgY2xhc3M9XCJidXR0b25zXCI+XG4gICAgPHh1aS1idXR0b24+IDx4dWktaWNvbiBpY29uPVwiYWRkX2NpcmNsZVwiPjwveHVpLWljb24+IEFkZCBFbnRpdGllcyA8L3h1aS1idXR0b24+XG5cbiAgICA8eHVpLWJ1dHRvbiB0eXBlPVwiaWNvblwiPlxuICAgICAgPHh1aS1pY29uIGljb249XCJyZWZyZXNoXCI+PC94dWktaWNvbj5cbiAgICA8L3h1aS1idXR0b24+XG4gIDwvZGl2PlxuXG4gIEBmb3IgKGdyb3VwIG9mIGVudGl0aWVzOyB0cmFjayBncm91cCkge1xuICAgIDxkaXYgY2xhc3M9XCJncm91cFwiPlxuICAgICAgPGRpdiBjbGFzcz1cIm5hbWVcIiAoY2xpY2spPVwidG9nZ2xlR3JvdXAoZ3JvdXApXCI+XG4gICAgICAgIDx4dWktaWNvbiBjbGFzcz1cIm1lbnUtaWNvblwiIFtpY29uXT1cImlzT3BlbmVkKGdyb3VwKSA/ICdtZW51JyA6ICdtZW51X29wZW4nXCI+PC94dWktaWNvbj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICAgICAgICA8eHVpLWljb24gW2ljb25dPVwiZ3JvdXAuaWNvblwiPjwveHVpLWljb24+XG4gICAgICAgICAge3sgZ3JvdXAubmFtZSB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZW50aXRpZXNcIiAqbmdJZj1cImlzT3BlbmVkKGdyb3VwKVwiPlxuICAgICAgICBAZm9yIChlbnRpdHkgb2YgZ3JvdXAuZW50aXRpZXM7IHRyYWNrIGVudGl0eS5pZCkge1xuICAgICAgICAgIDxkaXYgY2xhc3M9XCJlbnRpdHlcIiBbY2xhc3MuYWN0aXZlXT1cImlzQWN0aXZlKGVudGl0eSlcIiAoY2xpY2spPVwiYWN0aXZhdGUoZW50aXR5KVwiPlxuICAgICAgICAgICAgPHh1aS1pY29uIGljb249XCJjaGVja1wiPjwveHVpLWljb24+XG4gICAgICAgICAgICB7eyBlbnRpdHkubmFtZSB9fVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG5cbjxkaXYgY2xhc3M9XCJtZXRyaWNzXCI+XG4gIDx4dWktaW5wdXQgY29sb3I9XCJkYXJrXCIgc2l6ZT1cInNtYWxsXCI+XG4gICAgPHh1aS1pY29uIGljb249XCJzZWFyY2hcIiB4dWlQb3N0Zml4PjwveHVpLWljb24+XG4gIDwveHVpLWlucHV0PlxuXG4gIEBmb3IgKGdyb3VwIG9mIGFjdGl2ZT8ubWV0cmljczsgdHJhY2sgZ3JvdXApIHtcbiAgICA8ZGl2IGNsYXNzPVwiZ3JvdXBcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJuYW1lXCIgKGNsaWNrKT1cInRvZ2dsZUdyb3VwKGdyb3VwKVwiPlxuICAgICAgICA8eHVpLWljb24gY2xhc3M9XCJtZW51LWljb25cIiBbaWNvbl09XCJpc09wZW5lZChncm91cCkgPyAnbWVudScgOiAnbWVudV9vcGVuJ1wiPjwveHVpLWljb24+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAge3sgZ3JvdXAubmFtZSB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZW50aXRpZXNcIiAqbmdJZj1cImlzT3BlbmVkKGdyb3VwKVwiIGNka0Ryb3BMaXN0IGNka0Ryb3BMaXN0U29ydGluZ0Rpc2FibGVkPlxuICAgICAgICBAZm9yIChtZXRyaWMgb2YgZ3JvdXAubWV0cmljczsgdHJhY2sgbWV0cmljLmlkKSB7XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3M9XCJtZXRyaWNcIlxuICAgICAgICAgICAgY2RrRHJhZ1xuICAgICAgICAgICAgW2Nka0RyYWdEYXRhXT1cInsgbWV0cmljLCBlbnRpdHk6IGFjdGl2ZSB9XCJcbiAgICAgICAgICAgIChjZGtEcmFnU3RhcnRlZCk9XCJhbmFseXNpcy5kcmFnU3RhcnRlZCgpXCJcbiAgICAgICAgICAgIChjZGtEcmFnRW5kZWQpPVwiYW5hbHlzaXMuZHJhZ0VuZGVkKClcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxzcGFuIHN0eWxlPVwiZGlzcGxheTogbm9uZVwiICpjZGtEcmFnUGxhY2Vob2xkZXI+PC9zcGFuPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRyYWctcHJldmlld1wiICpjZGtEcmFnUHJldmlldz5cbiAgICAgICAgICAgICAgPHh1aS1pY29uIGljb249XCJkcmFnX2luZGljYXRvclwiPjwveHVpLWljb24+XG4gICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAge3sgbWV0cmljLm5hbWUgfX1cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGVzY3JpcHRpb25cIj57eyBhY3RpdmUhLm5hbWUgfX08L2Rpdj5cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPHh1aS1pY29uIGljb249XCJkcmFnX2luZGljYXRvclwiPjwveHVpLWljb24+XG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICB7eyBtZXRyaWMubmFtZSB9fVxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGVzY3JpcHRpb25cIj57eyBhY3RpdmUhLm5hbWUgfX08L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG4iXX0=