From 8cb60c1173acfb606c27a606bf4d34fecf7bbf4a Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Tue, 5 Dec 2023 10:56:19 +0100 Subject: [PATCH] Add test and rename methods by review --- .../codeMap.arrow.service.spec.ts.snap | 134 ++++++++++++++++++ .../arrow/codeMap.arrow.service.spec.ts | 16 +++ .../ui/codeMap/rendering/codeMapBuilding.ts | 6 +- .../ui/codeMap/rendering/codeMapMesh.ts | 8 +- 4 files changed, 157 insertions(+), 7 deletions(-) diff --git a/visualization/app/codeCharta/ui/codeMap/arrow/__snapshots__/codeMap.arrow.service.spec.ts.snap b/visualization/app/codeCharta/ui/codeMap/arrow/__snapshots__/codeMap.arrow.service.spec.ts.snap index dafba2ca8c..7d58bf8cf4 100644 --- a/visualization/app/codeCharta/ui/codeMap/arrow/__snapshots__/codeMap.arrow.service.spec.ts.snap +++ b/visualization/app/codeCharta/ui/codeMap/arrow/__snapshots__/codeMap.arrow.service.spec.ts.snap @@ -199,3 +199,137 @@ CodeMapBuilding { }, } `; + +exports[`CodeMapArrowService Arrow Behaviour when selecting and hovering a building should restore to previous color if another building is selected in delta mode 1`] = ` +CodeMapBuilding { + "_boundingBox": Box3 { + "max": Vector3 { + "x": -Infinity, + "y": -Infinity, + "z": -Infinity, + }, + "min": Vector3 { + "x": Infinity, + "y": Infinity, + "z": Infinity, + }, + }, + "_color": "#EB8319", + "_defaultColor": "#ddcc00", + "_defaultDeltaColor": "#000000", + "_deltaColor": "#EB8319", + "_id": 2, + "_node": { + "attributes": { + "a": 20, + "b": 15, + "mcc": 100, + }, + "color": "#820E0E", + "deltas": { + "a": 1, + "b": 2, + }, + "depth": 4, + "edgeAttributes": { + "a": { + "incoming": 2, + "outgoing": 666, + }, + }, + "flat": false, + "height": 2, + "heightDelta": 20, + "id": 2, + "incomingEdgePoint": Vector3 { + "x": 1, + "y": 2, + "z": 3, + }, + "isLeaf": true, + "length": 3, + "link": "NO_LINK", + "mapNodeDepth": 2, + "markingColor": "0xFFFFFF", + "name": "root/small leaf", + "outgoingEdgePoint": Vector3 { + "x": 1, + "y": 2, + "z": 3, + }, + "path": "/root/Parent Leaf/small leaf", + "visible": true, + "width": 1, + "x0": 5, + "y0": 7, + "z0": 6, + }, +} +`; + +exports[`CodeMapArrowService Arrow Behaviour when selecting and hovering a building should restore to previous color if another building is selected in delta mode 2`] = ` +CodeMapBuilding { + "_boundingBox": Box3 { + "max": Vector3 { + "x": 6, + "y": 8, + "z": 10, + }, + "min": Vector3 { + "x": 5, + "y": 6, + "z": 7, + }, + }, + "_color": "#6987A5", + "_defaultColor": "#AABBCC", + "_defaultDeltaColor": "#000000", + "_deltaColor": "#1A1A1A", + "_id": 0, + "_node": { + "attributes": { + "a": 20, + "b": 15, + "mcc": 14, + }, + "color": "#AABBCC", + "deltas": { + "a": 1, + "b": 2, + }, + "depth": 4, + "edgeAttributes": { + "a": { + "incoming": 2, + "outgoing": 666, + }, + }, + "flat": false, + "height": 2, + "heightDelta": 20, + "id": 1, + "incomingEdgePoint": Vector3 { + "x": 1, + "y": 2, + "z": 3, + }, + "isLeaf": true, + "length": 3, + "link": "NO_LINK", + "mapNodeDepth": 2, + "markingColor": "0xFFFFFF", + "name": "root/big leaf", + "outgoingEdgePoint": Vector3 { + "x": 1, + "y": 2, + "z": 3, + }, + "path": "/root/big leaf", + "visible": true, + "width": 1, + "x0": 5, + "y0": 7, + "z0": 6, + }, +} +`; diff --git a/visualization/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.spec.ts b/visualization/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.spec.ts index 3f936438a0..4f22d75037 100644 --- a/visualization/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.spec.ts +++ b/visualization/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.spec.ts @@ -100,6 +100,22 @@ describe("CodeMapArrowService", () => { expect(threeSceneService["highlighted"]).toMatchSnapshot() expect(threeSceneService["selected"]).toMatchSnapshot() }) + it("should restore to previous color if another building is selected in delta mode", async () => { + const nodes: Node[] = [ + CODE_MAP_BUILDING_WITH_OUTGOING_EDGE_NODE.node, + CODE_MAP_BUILDING_WITH_INCOMING_EDGE_NODE.node, + DIFFERENT_NODE + ] + threeSceneService["mapMesh"] = new CodeMapMesh(nodes, state.getValue(), true) + + store.dispatch(setHeightMetric({ value: "mcc" })) + + threeSceneService.selectBuilding(CODE_MAP_BUILDING_WITH_OUTGOING_EDGE_NODE) + threeSceneService.selectBuilding(CODE_MAP_BUILDING_WITH_INCOMING_EDGE_NODE) + + expect(threeSceneService["selected"]).toMatchSnapshot() + expect(threeSceneService["mapMesh"].getBuildingByPath(CODE_MAP_BUILDING_WITH_OUTGOING_EDGE_NODE.node.path)).toMatchSnapshot() + }) it("should debounce the edge reset of buildings to improve performance", async () => { const resetEdgesOfBuildingMock = jest.fn() codeMapArrowService["resetEdgesOfBuildings"] = resetEdgesOfBuildingMock diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts index 84bdac712a..e6829f167b 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts @@ -38,7 +38,7 @@ export class CodeMapBuilding { } } - _decreaseLightnessForColor(color: string, value: number) { + private _decreaseLightnessForColor(color: string, value: number) { const colorHSL = ColorConverter.hexToHSL(color) colorHSL.decreaseLightness(value) if (colorHSL.getLightness() < 10) { @@ -106,12 +106,12 @@ export class CodeMapBuilding { this._node = node } - setDeltaColor(color: string) { + setInitialDeltaColor(color: string) { this._defaultDeltaColor = color this._deltaColor = color } - setOnclickDeltaColor(color: string) { + setDeltaColor(color: string) { this._deltaColor = color } } diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts index 4be8791bcf..c059951d42 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts @@ -47,7 +47,7 @@ export class CodeMapMesh { selectBuilding(building: CodeMapBuilding, color: string) { building.setColor(color) - building.setOnclickDeltaColor(color) + building.setDeltaColor(color) this.setVertexColor(building.id, building.getColorVector(), building.getDeltaColorVector()) this.updateVertices() } @@ -135,16 +135,16 @@ export class CodeMapMesh { const { node } = building if (node.flat) { - building.setDeltaColor(mapColors.flat) + building.setInitialDeltaColor(mapColors.flat) } else if (node.deltas) { const deltaValue = node.deltas[heightMetric] if (deltaValue > 0) { - building.setDeltaColor(mapColors.positiveDelta) + building.setInitialDeltaColor(mapColors.positiveDelta) } if (deltaValue < 0) { - building.setDeltaColor(mapColors.negativeDelta) + building.setInitialDeltaColor(mapColors.negativeDelta) } } }