Skip to content

Commit 4fd03f0

Browse files
binDongKimbinDongKim
committed
[#noissue] Add an experimental option for the layout update
1 parent 3bc3f0d commit 4fd03f0

File tree

6 files changed

+57
-86
lines changed

6 files changed

+57
-86
lines changed

‎web-frontend/src/main/angular/src/app/core/components/server-map/class/server-map-diagram-with-cytoscapejs.class.ts

+38-82
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {ServerMapDiagram} from './server-map-diagram.class';
88
import {ServerMapData} from './server-map-data.class';
99
import {IServerMapOption} from './server-map-factory';
1010
import {ServerMapTemplate} from './server-map-template';
11-
import {isEmpty} from 'app/core/utils/util';
1211

1312
const enum GraphStyle {
1413
NODE_WIDTH = 100,
@@ -19,8 +18,9 @@ const enum GraphStyle {
1918
}
2019

2120
export class ServerMapDiagramWithCytoscapejs extends ServerMapDiagram {
21+
private updateLayoutManually: boolean;
2222
private cy: any;
23-
private addedNodes: any;
23+
private addedNodes: any = [];
2424
protected computedStyle = getComputedStyle(document.body);
2525
protected serverMapColor = {
2626
text: this.computedStyle.getPropertyValue('--text-primary'),
@@ -141,78 +141,34 @@ export class ServerMapDiagramWithCytoscapejs extends ServerMapDiagram {
141141
});
142142

143143
this.cy.on('layoutstop', () => {
144-
// TODO: Add experimental flag
145-
// this.cy.nodes().unlock();
146-
// // Check overlay and adjust the position
147-
// const rootNodes = this.cy.nodes().roots().toArray();
148-
// const leafNodes = this.cy.nodes().leaves().toArray();
149-
150-
// this.addedNodes.forEach((addedNode: any) => {
151-
// const {y} = addedNode.position();
152-
// const {h, y1} = addedNode.boundingBox();
153-
// const labelHeight = h - (y - y1) * 2;
154-
// const isRootNode = rootNodes.some((node: any) => node.id() === addedNode.id());
155-
// const isLeafNode = leafNodes.some((node: any) => node.id() === addedNode.id());
156-
157-
// if (isRootNode || isLeafNode) {
158-
// const sameTypeNodes = isRootNode ? rootNodes.filter((node: any) => node.id() !== addedNode.id())
159-
// : leafNodes.filter((node: any) => node.id() !== addedNode.id());
160-
// const newX = sameTypeNodes.reduce((acc: number, node: any) => {
161-
// const {x} = node.position();
162-
163-
// return acc + x;
164-
// }, 0) / sameTypeNodes.length;
165-
166-
// const overlayableNodes = this.cy.nodes().toArray().filter((node: any) => {
167-
// return this.isXPosOverlaid(addedNode, node);
168-
// });
169-
170-
// let newY1;
171-
172-
// if (Math.random() >= 0.5) {
173-
// // Add at the top
174-
// const topY = Math.min(...overlayableNodes.map((node: any) => node.boundingBox().y1));
175-
// const newY2 = topY - GraphStyle.NODE_GAP;
176-
177-
// newY1 = newY2 - h;
178-
// } else {
179-
// // Add at the bottom
180-
// const bottomY = Math.max(...overlayableNodes.map((node: any) => node.boundingBox().y2));
181-
182-
// newY1 = bottomY + GraphStyle.NODE_GAP;
183-
// }
184-
185-
// const newY = (h - labelHeight) / 2 + newY1;
186-
187-
// addedNode.position({
188-
// x: newX,
189-
// y: newY
190-
// });
191-
// } else {
192-
// const isOverlaid = this.cy.nodes().toArray().some((node: any) => addedNode.id() !== node.id() && this.areTheyOverlaid(addedNode, node));
144+
if (!this.updateLayoutManually) {
145+
this.cy.nodes().unlock();
146+
// Check overlay and adjust the position
147+
this.addedNodes.forEach((addedNode: any) => {
148+
const isOverlaid = this.cy.nodes().some((node: any) => addedNode.id() !== node.id() && this.areTheyOverlaid(addedNode, node));
193149

194-
// if (!isOverlaid) {
195-
// return;
196-
// }
150+
if (!isOverlaid) {
151+
return;
152+
}
197153

198-
// const {x, y} = addedNode.position();
199-
// const {h, y1} = addedNode.boundingBox();
200-
// const labelHeight = h - (y - y1) * 2;
154+
const {x, y} = addedNode.position();
155+
const {h, y1} = addedNode.boundingBox();
156+
const labelHeight = h - (y - y1) * 2;
201157

202-
// const nodesAtSameX = this.cy.nodes().filter((node: any) => {
203-
// return x === node.position().x;
204-
// });
205-
// const topY = Math.min(...nodesAtSameX.map((node: any) => node.boundingBox().y1));
206-
// const newY2 = topY - GraphStyle.NODE_GAP;
207-
// const newY1 = newY2 - h;
208-
// const newY = (h - labelHeight) / 2 + newY1;
158+
const nodesAtSameX = this.cy.nodes().filter((node: any) => {
159+
return x === node.position().x;
160+
});
161+
const topY = Math.min(...nodesAtSameX.map((node: any) => node.boundingBox().y1));
162+
const newY2 = topY - GraphStyle.NODE_GAP;
163+
const newY1 = newY2 - h;
164+
const newY = (h - labelHeight) / 2 + newY1;
209165

210-
// addedNode.position({
211-
// x,
212-
// y: newY
213-
// });
214-
// }
215-
// });
166+
addedNode.position({
167+
x,
168+
y: newY
169+
});
170+
});
171+
}
216172
});
217173

218174
this.cy.on('select', 'node', ({target}: any) => {
@@ -396,19 +352,15 @@ export class ServerMapDiagramWithCytoscapejs extends ServerMapDiagram {
396352
tap((elements: { [key: string]: any }) => {
397353
this.addedNodes = this.cy.add(elements).nodes();
398354
}),
399-
// filter(() => !isEmpty(this.addedNodes))
400355
filter(() => !this.addedNodes.empty())
401356
).subscribe((elements: {[key: string]: any}) => {
402-
console.log('node 추가!');
403-
console.log(this.addedNodes.map((node: any) => node.id()));
404-
// TODO: Add experimental option
405-
// this.cy.nodes().lock();
406-
// this.initLayout();
407-
// this.adjustStyle(elements);
408-
409-
// this.updateLayout();
410-
// this.updateLayoutWithRank();
411-
this.updateLayoutWithoutRank();
357+
if (this.updateLayoutManually) {
358+
this.updateLayout();
359+
} else {
360+
this.cy.nodes().lock();
361+
this.initLayout();
362+
}
363+
412364
this.adjustStyle(elements);
413365
});
414366
} else {
@@ -451,7 +403,7 @@ export class ServerMapDiagramWithCytoscapejs extends ServerMapDiagram {
451403
this.baseApplicationKey = baseApplicationKey;
452404
}
453405

454-
private updateLayoutWithoutRank(): void {
406+
private updateLayout(): void {
455407
const centerNode = this.cy.getElementById(this.baseApplicationKey);
456408
const {x: centerNodeX, y: centerNodeY} = centerNode.position();
457409
const {y1: centerNodeY1, y2: centerNodeY2} = centerNode.boundingBox();
@@ -710,6 +662,10 @@ export class ServerMapDiagramWithCytoscapejs extends ServerMapDiagram {
710662
}).run();
711663
}
712664

665+
setUpdateLayoutOption(updateLayoutManually: boolean): void {
666+
this.updateLayoutManually = updateLayoutManually;
667+
}
668+
713669
redraw(): void {
714670
this.setMapData(this.serverMapData, this.baseApplicationKey, this.shouldRefresh);
715671
}

‎web-frontend/src/main/angular/src/app/core/components/server-map/class/server-map-diagram.class.ts

+2
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,6 @@ export abstract class ServerMapDiagram {
2626
abstract refresh(): void;
2727

2828
abstract clear(): void;
29+
30+
abstract setUpdateLayoutOption(updateLayoutManually: boolean): void;
2931
}

‎web-frontend/src/main/angular/src/app/core/components/server-map/server-map-container.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
[type]="type"
88
[shouldRefresh]="shouldRefresh"
99
[enableServerMapRealTime]="enableServerMapRealTime"
10+
[updateServerMapLayoutManually]="updateServerMapLayoutManually"
1011
(outContextClickBackground)="onContextClickBackground($event)"
1112
(outClickNode)="onClickNode($event)"
1213
(outClickLink)="onClickLink($event)"

‎web-frontend/src/main/angular/src/app/core/components/server-map/server-map-container.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export class ServerMapContainerComponent implements OnInit, OnDestroy {
6262
interval = 2000;
6363
shouldRefresh: boolean;
6464
enableServerMapRealTime: boolean;
65+
updateServerMapLayoutManually: boolean;
6566

6667
constructor(
6768
private router: Router,
@@ -84,7 +85,10 @@ export class ServerMapContainerComponent implements OnInit, OnDestroy {
8485
ngOnInit() {
8586
this.webAppSettingDataService.getExperimentalConfiguration().subscribe(configuration => {
8687
const enableServerMapRealTime = this.webAppSettingDataService.getExperimentalOption('serverMapRealTime');
88+
const updateServerMapLayoutManually = this.webAppSettingDataService.getExperimentalOption('updateServerMapLayoutManually');
89+
8790
this.enableServerMapRealTime = enableServerMapRealTime === null ? configuration.enableServerMapRealTime.value : enableServerMapRealTime;
91+
this.updateServerMapLayoutManually = updateServerMapLayoutManually === null ? configuration.updateServerMapLayoutManually.value : updateServerMapLayoutManually;
8892
});
8993

9094
this.funcServerMapImagePath = this.webAppSettingDataService.getServerMapIconPathMakeFunc();

‎web-frontend/src/main/angular/src/app/core/components/server-map/server-map.component.ts

+3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class ServerMapComponent implements OnInit, OnChanges, OnDestroy, AfterVi
3434
@Input() type: ServerMapType;
3535
@Input() shouldRefresh = true;
3636
@Input() enableServerMapRealTime: boolean;
37+
@Input() updateServerMapLayoutManually: boolean;
3738
@Output() outClickNode = new EventEmitter<any>();
3839
@Output() outContextClickNode = new EventEmitter<string>();
3940
@Output() outClickLink = new EventEmitter<any>();
@@ -97,6 +98,8 @@ export class ServerMapComponent implements OnInit, OnChanges, OnDestroy, AfterVi
9798
this.serverMapDiagram.setMapData(this.mapData, this.baseApplicationKey, this.shouldRefresh);
9899
this.hasRenderData = false;
99100
}
101+
102+
this.serverMapDiagram.setUpdateLayoutOption(this.updateServerMapLayoutManually);
100103
}
101104

102105
addEventHandler(): void {

‎web-frontend/src/main/angular/src/app/shared/services/system-configuration-data.service.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export enum ExperimentalConfigurationLocalStorageKey {
99
useStatisticsAgentState = 'statisticsAgentState',
1010
enableServerMapRealTime = 'serverMapRealTime',
1111
sampleScatter = 'scatterSampling',
12-
useScatterChartV2 = 'useScatterChartV2'
12+
useScatterChartV2 = 'useScatterChartV2',
13+
updateServerMapLayoutManually = 'updateServerMapLayoutManually',
1314
}
1415

1516
type ExperimentalConfigMetaItem = {
@@ -18,8 +19,8 @@ type ExperimentalConfigMetaItem = {
1819
}
1920

2021
enum ClientExperimentalConfig {
21-
// enableSideNavigationUI = 'enableSideNavigationUI',
22-
useScatterChartV2 = 'useScatterChartV2'
22+
useScatterChartV2 = 'useScatterChartV2',
23+
updateServerMapLayoutManually = 'updateServerMapLayoutManually'
2324
}
2425

2526
export type ExperimentalConfigurationKeyType = keyof typeof ExperimentalConfigurationLocalStorageKey
@@ -57,7 +58,11 @@ export class SystemConfigurationDataService {
5758
getClientExperimentalConfiguration(): Record<ClientExperimentalConfig, ExperimentalConfigMetaItem> {
5859
return {
5960
useScatterChartV2: {
60-
description: 'Use ScatterChart v2',
61+
description: 'Use ScatterChart v2.',
62+
value: false
63+
},
64+
updateServerMapLayoutManually: {
65+
description: 'Update server-map layout manually.',
6166
value: false
6267
}
6368
};

0 commit comments

Comments
 (0)