Show hover labels only for highlighted nodes

Author: peuf0u

visualization/app/codeCharta/ui/codeMap/codeMap.render.service.spec.ts

@@ -111,7 +111,8 @@ describe("codeMapRenderService", () => {
             }),
             dispose: jest.fn(),
             forceRerender: jest.fn(),
-            setMapMesh: jest.fn()
+            setMapMesh: jest.fn(),
+            getHighlightedBuildings: jest.fn().mockReturnValue([])
         })()
     }
 
@@ -408,6 +409,53 @@ describe("codeMapRenderService", () => {
         })
     })
 
+    describe("onHighlightChanged", () => {
+        it("should label every highlighted leaf while hovering", () => {
+            const currentState = state.getValue()
+            jest.spyOn(state, "getValue").mockReturnValue({
+                ...currentState,
+                appStatus: { ...currentState.appStatus, hoveredNodeId: TEST_NODE_ROOT.id }
+            })
+            threeSceneService.getHighlightedBuildings = jest.fn().mockReturnValue([
+                { node: TEST_NODE_ROOT },
+                { node: TEST_NODE_LEAF },
+                { node: TEST_NODE_LEAF },
+                { node: { ...INCOMING_NODE, visible: false } }
+            ])
+
+            codeMapRenderService["onHighlightChanged"]()
+
+            expect(labelSettingsFacade.clearLabels).toHaveBeenCalled()
+            expect(labelSettingsFacade.addLeafLabel).toHaveBeenCalledTimes(2)
+            expect(labelSettingsFacade.addLeafLabel).toHaveBeenCalledWith(TEST_NODE_ROOT, 2, true)
+            expect(labelSettingsFacade.addLeafLabel).toHaveBeenCalledWith(TEST_NODE_LEAF, 2, true)
+        })
+
+        it("should restore configured labels when there is no active hover", () => {
+            codeMapRenderService["unflattenedNodes"] = TEST_NODES
+            codeMapRenderService["setLabels"] = jest.fn()
+
+            codeMapRenderService["onHighlightChanged"]()
+
+            expect(codeMapRenderService["setLabels"]).toHaveBeenCalledWith(TEST_NODES)
+        })
+
+        it("should not show hover labels when node names are disabled", () => {
+            const currentState = state.getValue()
+            jest.spyOn(state, "getValue").mockReturnValue({
+                ...currentState,
+                appSettings: { ...currentState.appSettings, showMetricLabelNodeName: false },
+                appStatus: { ...currentState.appStatus, hoveredNodeId: TEST_NODE_ROOT.id }
+            })
+            threeSceneService.getHighlightedBuildings = jest.fn().mockReturnValue([{ node: TEST_NODE_ROOT }])
+
+            codeMapRenderService["onHighlightChanged"]()
+
+            expect(labelSettingsFacade.clearLabels).toHaveBeenCalled()
+            expect(labelSettingsFacade.addLeafLabel).not.toHaveBeenCalled()
+        })
+    })
+
     describe("setArrows", () => {
         let sortedNodes: Node[]
 

visualization/app/codeCharta/ui/codeMap/codeMap.render.service.ts

@@ -15,6 +15,7 @@ import { metricDataSelector } from "../../state/selectors/accumulatedData/metric
 import { blacklistMatcherSelector } from "../../state/store/fileSettings/blacklist/blacklistMatcher.selector"
 import { State, Store } from "@ngrx/store"
 import { setColorLabels } from "../../state/store/appSettings/colorLabels/colorLabels.actions"
+import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 
 export interface ColorCategoryCounts {
     positive: number
@@ -46,6 +47,7 @@ export class CodeMapRenderService implements OnDestroy {
         private codeMapMouseEventService: CodeMapMouseEventService
     ) {
         this.subscription = this.store.select(isLoadingFileSelector).pipe(tap(this.onIsLoadingFileChanged)).subscribe()
+        this.threeSceneService.subscribe("onHighlightChanged", this.onHighlightChanged)
     }
 
     ngOnDestroy(): void {
@@ -175,12 +177,55 @@ export class CodeMapRenderService implements OnDestroy {
         }
     }
 
-    private setBuildingLabel(nodes: Node[], highestNodeInSet: number) {
+    private setBuildingLabel(nodes: Node[], highestNodeInSet: number, enforceLabel = false) {
         for (const node of nodes) {
-            this.labelSettingsFacade.addLeafLabel(node, highestNodeInSet)
+            this.labelSettingsFacade.addLeafLabel(node, highestNodeInSet, enforceLabel)
         }
     }
 
+    private onHighlightChanged = () => {
+        if (hoveredNodeIdSelector(this.state.getValue()) === null) {
+            this.setLabels(this.unflattenedNodes)
+            return
+        }
+
+        if (!this.state.getValue().appSettings.showMetricLabelNodeName) {
+            this.labelSettingsFacade.clearLabels()
+            return
+        }
+
+        const highlightedNodes = this.getHighlightedLeafNodes()
+        this.labelSettingsFacade.clearLabels()
+
+        if (highlightedNodes.length === 0) {
+            return
+        }
+
+        const highestNodeInSet = Math.max(...highlightedNodes.map(node => node.height))
+        this.setBuildingLabel(
+            highlightedNodes.sort((a, b) => b.height - a.height),
+            highestNodeInSet,
+            true
+        )
+    }
+
+    private getHighlightedLeafNodes() {
+        const highlightedNodes: Node[] = []
+        const seenNodeIds = new Set<number>()
+
+        for (const building of this.threeSceneService.getHighlightedBuildings()) {
+            const { node } = building
+            if (!node?.isLeaf || node.flat || !node.visible || seenNodeIds.has(node.id)) {
+                continue
+            }
+
+            seenNodeIds.add(node.id)
+            highlightedNodes.push(node)
+        }
+
+        return highlightedNodes
+    }
+
     private setLabels(sortedNodes: Node[]) {
         this.labelSettingsFacade.clearLabels()
 

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts

@@ -19,6 +19,7 @@ import { FileExtensionCalculator, NO_EXTENSION } from "../../fileExtensionBar/se
 type BuildingSelectedEvents = {
     onBuildingSelected: (data: { building: CodeMapBuilding }) => void
     onBuildingDeselected: () => void
+    onHighlightChanged: () => void
 }
 
 @Injectable({ providedIn: "root" })
@@ -154,6 +155,7 @@ export class ThreeSceneService implements OnDestroy {
             const constantHighlightedNodes = new Set<number>([...this.constantHighlight.values()].map(({ node }) => node.id))
             this.highlightMaterial(materials, constantHighlightedNodes)
         }
+        this.eventEmitter.emit("onHighlightChanged")
         this.threeRendererService.render()
     }
 
@@ -239,6 +241,7 @@ export class ThreeSceneService implements OnDestroy {
             if (materials) {
                 this.resetMaterial(materials)
             }
+            this.eventEmitter.emit("onHighlightChanged")
         }
     }
 
@@ -349,6 +352,15 @@ export class ThreeSceneService implements OnDestroy {
         return this.primaryHighlightedBuilding
     }
 
+    getHighlightedBuildings() {
+        if (!this.mapMesh) {
+            return []
+        }
+
+        const { buildings } = this.mapMesh.getMeshDescription()
+        return [...this.highlightedBuildingIds].map(id => buildings[id]).filter((building): building is CodeMapBuilding => Boolean(building))
+    }
+
     dispose() {
         this.mapMesh?.dispose()
     }