From a0c261f13ef7a9d0dff6cc07c0647a2614017780 Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 09:10:29 +0100 Subject: [PATCH 1/8] Fix delta color deselect by adding backup WIP --- .../ui/codeMap/rendering/codeMapBuilding.ts | 42 +++++++++++-------- .../ui/codeMap/rendering/codeMapMesh.ts | 2 +- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts index fc6d96aace..6f9e2c918b 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts @@ -9,6 +9,7 @@ export class CodeMapBuilding { private _defaultColor: string private _deltaColor: string private _defaultDeltaColor: string + private _deltaColorStorage: string private _node: Node parent: CodeMapBuilding @@ -19,6 +20,7 @@ export class CodeMapBuilding { this._defaultColor = color this._deltaColor = "#000000" this._defaultDeltaColor = "#000000" + this._deltaColorStorage = "#000000" this._node = node } @@ -31,25 +33,23 @@ export class CodeMapBuilding { } decreaseLightness(value: number) { - const defaultColorHSL = ColorConverter.hexToHSL(this._defaultColor) - defaultColorHSL.decreaseLightness(value) - if (defaultColorHSL.getLightness() < 10) { - defaultColorHSL.setLightness(10) - } else { - defaultColorHSL.setLightness(defaultColorHSL.getLightness()) - } - this._color = defaultColorHSL.toHex() + this._color = this._decreaseLightnessForColor(this._defaultColor, value) if (this._node.deltas) { - const deltaColorHSL = ColorConverter.hexToHSL(this._defaultDeltaColor) - deltaColorHSL.decreaseLightness(value) - if (deltaColorHSL.getLightness() < 10) { - deltaColorHSL.setLightness(10) - } else { - deltaColorHSL.setLightness(deltaColorHSL.getLightness()) - } - this._deltaColor = deltaColorHSL.toHex() + this._deltaColor = this._decreaseLightnessForColor(this._defaultDeltaColor, value) + this._defaultDeltaColor = this._deltaColorStorage + } + } + + _decreaseLightnessForColor(color: string, value: number) { + const colorHSL = ColorConverter.hexToHSL(color) + colorHSL.decreaseLightness(value) + if (colorHSL.getLightness() < 10) { + colorHSL.setLightness(10) + } else { + colorHSL.setLightness(colorHSL.getLightness()) } + return colorHSL.toHex() } getColorVector() { @@ -70,7 +70,8 @@ export class CodeMapBuilding { resetColor() { this._color = this._defaultColor - this._deltaColor = this._defaultDeltaColor + this._deltaColor = "#000000" + this._defaultDeltaColor = this._deltaColorStorage } equals(building: CodeMapBuilding) { @@ -112,5 +113,12 @@ export class CodeMapBuilding { setDeltaColor(color: string) { this._defaultDeltaColor = color this._deltaColor = color + this._deltaColorStorage = color + } + + // Both color need to be set, deltaColor = lower part, defaultDeltaColor = upperPart (where defined?) + setClickDeltaColor(color: string) { + this._deltaColor = color + this._defaultDeltaColor = color } } diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts index 203a45212a..47555c0eec 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.setDeltaColor(color) + building.setClickDeltaColor(color) this.setVertexColor(building.id, building.getColorVector(), building.getDefaultDeltaColorVector()) this.updateVertices() } From b684564fa02c1335daf417ba4bee4393037bbaaa Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 14:38:47 +0100 Subject: [PATCH 2/8] Fix select color not reset in delta mode ... By consistent use of default as a backup storage --- .../codeCharta/ui/codeMap/rendering/codeMapBuilding.ts | 10 ++-------- .../app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts | 4 ++-- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts index 6f9e2c918b..e407932758 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts @@ -20,7 +20,6 @@ export class CodeMapBuilding { this._defaultColor = color this._deltaColor = "#000000" this._defaultDeltaColor = "#000000" - this._deltaColorStorage = "#000000" this._node = node } @@ -37,7 +36,6 @@ export class CodeMapBuilding { if (this._node.deltas) { this._deltaColor = this._decreaseLightnessForColor(this._defaultDeltaColor, value) - this._defaultDeltaColor = this._deltaColorStorage } } @@ -70,8 +68,7 @@ export class CodeMapBuilding { resetColor() { this._color = this._defaultColor - this._deltaColor = "#000000" - this._defaultDeltaColor = this._deltaColorStorage + this._deltaColor = this._defaultDeltaColor } equals(building: CodeMapBuilding) { @@ -113,12 +110,9 @@ export class CodeMapBuilding { setDeltaColor(color: string) { this._defaultDeltaColor = color this._deltaColor = color - this._deltaColorStorage = color } - // Both color need to be set, deltaColor = lower part, defaultDeltaColor = upperPart (where defined?) - setClickDeltaColor(color: string) { + setOnclickDeltaColor(color: string) { this._deltaColor = color - this._defaultDeltaColor = color } } diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts index 47555c0eec..4be8791bcf 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts @@ -47,8 +47,8 @@ export class CodeMapMesh { selectBuilding(building: CodeMapBuilding, color: string) { building.setColor(color) - building.setClickDeltaColor(color) - this.setVertexColor(building.id, building.getColorVector(), building.getDefaultDeltaColorVector()) + building.setOnclickDeltaColor(color) + this.setVertexColor(building.id, building.getColorVector(), building.getDeltaColorVector()) this.updateVertices() } From da654bcf270e93d0f9ef35e8ea94215932496979 Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 14:51:39 +0100 Subject: [PATCH 3/8] Update snapshot for test --- .../arrow/__snapshots__/codeMap.arrow.service.spec.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0077a8b8d6..dafba2ca8c 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 @@ -149,7 +149,7 @@ CodeMapBuilding { }, "_color": "#EB8319", "_defaultColor": "#ddcc00", - "_defaultDeltaColor": "#EB8319", + "_defaultDeltaColor": "#000000", "_deltaColor": "#EB8319", "_id": 1, "_node": { From 668360d6b270d260d8a11e8b44c795d5bdff28f2 Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:09:17 +0100 Subject: [PATCH 4/8] Fix typo in pull_request_template --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index e982c06d8a..4641bff39d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -17,7 +17,7 @@ A PR is only ready for merge once all the following acceptance criteria are fulf -[ ] All TODOs related to this PR have been closed -[ ] There are automated tests for newly written code and bug fixes -[ ] All bugs discovered while working on this PR have been submitted as issues (if not already an open issue) --[ ] Documentation (GH-pages, analysis/visualisation READMEs, parser READMEs, --help, etc.) has been updated (almost always necessary except for bug fixes) +-[ ] Documentation (GH-pages, analysis/visualization READMEs, parser READMEs, --help, etc.) has been updated (almost always necessary except for bug fixes) -[ ] CHANGELOG.md has been updated ## Screenshots or gifs From 6e37e97963572540e0de13366e8eec5719bacc4d Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:10:51 +0100 Subject: [PATCH 5/8] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f5c0ebccb..b5c23a9c42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/) - Fix the csv-exporter so that it exports multiple projects instead of just one when multiple projects are specified [#3414](https://github.com/MaibornWolff/codecharta/pull/3414) - Fix file extensions of output files for merged projects [#3421](https://github.com/MaibornWolff/codecharta/pull/3421) - Fix the ability for users to accidentally pass invalid metrics to the RawTextParser without it crashing [#3424](https://github.com/MaibornWolff/codecharta/pull/3424) +- Fix deselected buildings with green/red roof in delta mode do not reset their color roof [#3426](https://github.com/MaibornWolff/codecharta/pull/3426) ### Chore ‍👨‍💻 👩‍💻 From 5342ce1461de03fa6c683bbb3419399d4964196d Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:12:39 +0100 Subject: [PATCH 6/8] Format PR template to fix checkboxes --- .github/pull_request_template.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4641bff39d..552ba2c556 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -13,11 +13,11 @@ _**Please read the [CONTRIBUTING.md](https://github.com/MaibornWolff/codecharta/ ## Definition of Done A PR is only ready for merge once all the following acceptance criteria are fulfilled: --[ ] Changes have been manually tested --[ ] All TODOs related to this PR have been closed --[ ] There are automated tests for newly written code and bug fixes --[ ] All bugs discovered while working on this PR have been submitted as issues (if not already an open issue) --[ ] Documentation (GH-pages, analysis/visualization READMEs, parser READMEs, --help, etc.) has been updated (almost always necessary except for bug fixes) --[ ] CHANGELOG.md has been updated +- [ ] Changes have been manually tested +- [ ] All TODOs related to this PR have been closed +- [ ] There are automated tests for newly written code and bug fixes +- [ ] All bugs discovered while working on this PR have been submitted as issues (if not already an open issue) +- [ ] Documentation (GH-pages, analysis/visualization READMEs, parser READMEs, --help, etc.) has been updated (almost always necessary except for bug fixes) +- [ ] CHANGELOG.md has been updated ## Screenshots or gifs From 56b996fa1ec6065678115f233d13460b643d2aca Mon Sep 17 00:00:00 2001 From: Sebastian Wolf <65733509+phanlezz@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:49:29 +0100 Subject: [PATCH 7/8] Remove unused field --- .../app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts index e407932758..84bdac712a 100644 --- a/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts +++ b/visualization/app/codeCharta/ui/codeMap/rendering/codeMapBuilding.ts @@ -9,7 +9,6 @@ export class CodeMapBuilding { private _defaultColor: string private _deltaColor: string private _defaultDeltaColor: string - private _deltaColorStorage: string private _node: Node parent: CodeMapBuilding From dc2467439bbded0ae4bfa4431f515b1613e8c918 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 8/8] 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) } } }