codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -7,13 +7,14 @@ import { PrimaryMetrics, primaryMetricsSelector } from "../../../state/selectors
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metrics",
-	template: require("./attributeSideBarPrimaryMetrics.component.html")
+	templateUrl: "./attributeSideBarPrimaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarPrimaryMetricsComponent {
 	primaryMetrics$: Observable<PrimaryMetrics>
 	showAttributeTypeSelector$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.primaryMetrics$ = store.select(primaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 	}

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html

@@ -5,7 +5,11 @@
 				<tr>
 					<th scope="col" colspan="2">Secondary Metrics</th>
 				</tr>
-				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" class="metric-row">
+				<tr
+					*ngFor="let secondaryMetric of secondaryMetrics$ | async"
+					class="metric-row"
+					[title]="secondaryMetric.descriptors | metricDescriptorTitle"
+				>
 					<td class="metric-summary">
 						<span class="metric-type">
 							<cc-attribute-type-selector

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -9,14 +9,15 @@ import { secondaryMetricsSelector } from "./secondaryMetrics.selector"
 
 @Component({
 	selector: "cc-attribute-side-bar-secondary-metrics",
-	template: require("./attributeSideBarSecondaryMetrics.component.html")
+	templateUrl: "./attributeSideBarSecondaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarSecondaryMetricsComponent {
 	secondaryMetrics$: Observable<Metric[]>
 	showAttributeTypeSelector$: Observable<boolean>
 	showDeltaValue$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.secondaryMetrics$ = store.select(secondaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 		this.showDeltaValue$ = store.select(showDeltaValueSelector)

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.spec.ts

@@ -1,5 +1,6 @@
 import { DIFFERENT_NODE } from "../../../util/dataMocks"
 import { _calculateSecondaryMetrics } from "./secondaryMetrics.selector"
+import { AttributeDescriptors } from "../../../codeCharta.model"
 
 const primaryMetricNames = {
 	areaMetric: "a",
@@ -8,15 +9,39 @@ const primaryMetricNames = {
 	edgeMetric: "None"
 }
 
+const attributeDescriptors: AttributeDescriptors = {}
+
 describe("secondaryMetricsSelector", () => {
 	it("should return an empty list if there is no selectedNode", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames)).toEqual([])
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors)).toEqual([])
 	})
 
 	it("should return a by name sorted list of metrics without primary metrics", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames, DIFFERENT_NODE)).toEqual([
-			{ name: "b", value: 15 },
-			{ name: "mcc", value: 14 }
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors, DIFFERENT_NODE)).toEqual([
+			{
+				name: "b",
+				value: 15,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "b",
+					link: undefined,
+					title: undefined
+				}
+			},
+			{
+				name: "mcc",
+				value: 14,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "mcc",
+					link: undefined,
+					title: "Cyclomatic Complexity"
+				}
+			}
 		])
 	})
 })

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.ts

@@ -1,11 +1,17 @@
-import { CodeMapNode, PrimaryMetrics } from "../../../codeCharta.model"
+import { CodeMapNode, PrimaryMetrics, AttributeDescriptors } from "../../../codeCharta.model"
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { primaryMetricNamesSelector } from "../../../state/selectors/primaryMetrics/primaryMetricNames.selector"
 import { selectedNodeSelector } from "../../../state/selectors/selectedNode.selector"
 import { CcState } from "../../../state/store/store"
 import { Metric } from "../util/metric"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getMetricDescriptors } from "../util/metricDescriptors"
 
-export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?: Pick<CodeMapNode, "attributes">) => {
+export const _calculateSecondaryMetrics = (
+	primaryMetrics: PrimaryMetrics,
+	attributeDescriptors: AttributeDescriptors,
+	node?: Pick<CodeMapNode, "attributes">
+) => {
 	if (!node) {
 		return [] as Metric[]
 	}
@@ -17,11 +23,12 @@ export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?
 
 	return secondaryMetricNames.map(secondaryMetricName => ({
 		name: secondaryMetricName,
-		value: node.attributes[secondaryMetricName]
+		value: node.attributes[secondaryMetricName],
+		descriptors: getMetricDescriptors(secondaryMetricName, attributeDescriptors)
 	}))
 }
 
 export const secondaryMetricsSelector: (state: CcState) => Metric[] = createSelector(
-	[primaryMetricNamesSelector, selectedNodeSelector],
+	[primaryMetricNamesSelector, attributeDescriptorsSelector, selectedNodeSelector],
 	_calculateSecondaryMetrics
 )

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss

@@ -1,16 +1,14 @@
 cc-attribute-type-selector {
-	.mat-button-toggle-group {
+	.mat-mdc-button-toggle-group {
 		height: 18px;
 		align-items: center;
 		justify-content: space-evenly;
 	}
-
-	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+	.mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content {
 		padding: 0 7px 0 7px;
 	}
-
-	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-	.mat-button-toggle-group-appearance-standard {
+	.mat-mdc-button-toggle-standalone.mat-button-toggle-appearance-standard,
+	.mat-mdc-button-toggle-group-appearance-standard {
 		border: 0.1px solid darkgrey;
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.ts

@@ -1,5 +1,4 @@
-import "./attributeTypeSelector.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { AttributeTypes, AttributeTypeValue } from "../../../codeCharta.model"
 import { updateAttributeType } from "../../../state/store/fileSettings/attributeTypes/attributeTypes.actions"
 import { Store } from "../../../state/angular-redux/store"
@@ -7,7 +6,9 @@ import { attributeTypesSelector } from "../../../state/store/fileSettings/attrib
 
 @Component({
 	selector: "cc-attribute-type-selector",
-	template: require("./attributeTypeSelector.component.html")
+	templateUrl: "./attributeTypeSelector.component.html",
+	styleUrls: ["./attributeTypeSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeTypeSelectorComponent {
 	@Input() metricName: string
@@ -15,7 +16,7 @@ export class AttributeTypeSelectorComponent {
 
 	attributeTypes$ = this.store.select(attributeTypesSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	setToAbsolute() {
 		this.setAttributeType(AttributeTypeValue.absolute)

package/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.spec.ts

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { idToNodeSelector } from "../../../state/selectors/accumulatedData/idToNode.selector"
 import { Store } from "../../../state/store/store"
 
@@ -9,7 +8,7 @@ import { MetricDeltaSelectedComponent } from "./metricDeltaSelected.component"
 jest.mock("../../../state/selectors/accumulatedData/idToNode.selector", () => ({
 	idToNodeSelector: jest.fn()
 }))
-const mockedIdToNodeSelector = mocked(idToNodeSelector)
+const mockedIdToNodeSelector = jest.mocked(idToNodeSelector)
 jest.mock("../../../state/store/appStatus/selectedBuildingId/selectedBuildingId.selector", () => ({
 	selectedBuildingIdSelector: () => 0
 }))
@@ -57,12 +56,12 @@ describe("MetricDeltaSelectedComponent", () => {
 	it("should update when its metricName changes", async () => {
 		mockIdToNodeSelector({ rloc: 2, mcc: 4 })
 
-		const { rerender } = await render(MetricDeltaSelectedComponent, {
+		const { change } = await render(MetricDeltaSelectedComponent, {
 			componentProperties: { metricName: "rloc" }
 		})
 		expect(screen.queryByText(/Δ2/)).toBeTruthy()
 
-		await rerender({ metricName: "mcc" })
+		await change({ metricName: "mcc" })
 		expect(screen.queryByText(/Δ4/)).toBeTruthy()
 	})
 

package/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from "@angular/core"
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { MapColors, CodeMapNode } from "../../../codeCharta.model"
@@ -8,7 +8,8 @@ import { mapColorsSelector } from "../../../state/store/appSettings/mapColors/ma
 
 @Component({
 	selector: "cc-metric-delta-selected",
-	template: require("./metricDeltaSelected.component.html")
+	templateUrl: "./metricDeltaSelected.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricDeltaSelectedComponent implements OnInit {
 	@Input() metricName: string
@@ -16,7 +17,7 @@ export class MetricDeltaSelectedComponent implements OnInit {
 	selectedNode$: Observable<CodeMapNode>
 	mapColors$: Observable<MapColors>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.selectedNode$ = this.store.select(selectedNodeSelector)

package/app/codeCharta/ui/attributeSideBar/util/edge.ts

@@ -0,0 +1,7 @@
+import { MetricDescriptors } from "./metricDescriptors"
+export type Edge = {
+	name: string
+	incoming: number | undefined
+	outgoing: number | undefined
+	descriptors: MetricDescriptors
+}

package/app/codeCharta/ui/attributeSideBar/util/metric.ts

@@ -1,4 +1,6 @@
+import { MetricDescriptors } from "./metricDescriptors"
 export type Metric = {
 	name: string
 	value: number
+	descriptors: MetricDescriptors
 }

package/app/codeCharta/ui/{legendPanel/selectors/legendMetric.ts → attributeSideBar/util/metricDescriptors.ts}

@@ -1,17 +1,23 @@
 import { AttributeDescriptors } from "../../../codeCharta.model"
 import { metricTitles } from "../../../util/metric/metricTitles"
 
-export type LegendMetric = {
+export type MetricDescriptors = {
 	key: string
 	title: string
 	description: string
+	hintLowValue: string
+	hintHighValue: string
+	link: string
 }
 
-export function getLegendMetric(metricKey: string, attributeDescriptors: AttributeDescriptors): LegendMetric {
+export function getMetricDescriptors(metricKey: string, attributeDescriptors: AttributeDescriptors): MetricDescriptors {
 	return {
 		key: metricKey,
 		title: getMetricTitle(metricKey, attributeDescriptors),
-		description: attributeDescriptors?.[metricKey]?.description
+		description: attributeDescriptors?.[metricKey]?.description,
+		hintLowValue: attributeDescriptors?.[metricKey]?.hintLowValue,
+		hintHighValue: attributeDescriptors?.[metricKey]?.hintHighValue,
+		link: attributeDescriptors?.[metricKey]?.link
 	}
 }
 
@@ -19,6 +25,6 @@ function getMetricTitle(metric: string, attributeDescriptors: AttributeDescripto
 	if (attributeDescriptors?.[metric]?.title !== undefined && attributeDescriptors[metric].title !== "") {
 		return attributeDescriptors[metric].title
 	}
-	//Fallback Description can still return null
+	//Fallback Description can still return undefined
 	return metricTitles.get(metric)
 }

package/app/codeCharta/ui/codeMap/__snapshots__/codeMap.arrow.service.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeMapArrowService Arrow Behaviour when selecting and hovering a building should only highlight small leaf when big leaf is selected 1`] = `
-Array [
+[
   CodeMapBuilding {
     "_boundingBox": Box3 {
       "max": Vector3 {
@@ -20,20 +20,20 @@ Array [
     "_defaultDeltaColor": "#000000",
     "_deltaColor": "#000000",
     "_id": 1,
-    "_node": Object {
-      "attributes": Object {
+    "_node": {
+      "attributes": {
         "a": 20,
         "b": 15,
         "mcc": 100,
       },
       "color": "#820E0E",
-      "deltas": Object {
+      "deltas": {
         "a": 1,
         "b": 2,
       },
       "depth": 4,
-      "edgeAttributes": Object {
-        "a": Object {
+      "edgeAttributes": {
+        "a": {
           "incoming": 2,
           "outgoing": 666,
         },
@@ -84,20 +84,20 @@ Array [
     "_defaultDeltaColor": "#000000",
     "_deltaColor": "#000000",
     "_id": 1,
-    "_node": Object {
-      "attributes": Object {
+    "_node": {
+      "attributes": {
         "a": 20,
         "b": 15,
         "mcc": 100,
       },
       "color": "#820E0E",
-      "deltas": Object {
+      "deltas": {
         "a": 1,
         "b": 2,
       },
       "depth": 4,
-      "edgeAttributes": Object {
-        "a": Object {
+      "edgeAttributes": {
+        "a": {
           "incoming": 2,
           "outgoing": 666,
         },
@@ -152,20 +152,20 @@ CodeMapBuilding {
   "_defaultDeltaColor": "#EB8319",
   "_deltaColor": "#EB8319",
   "_id": 1,
-  "_node": Object {
-    "attributes": Object {
+  "_node": {
+    "attributes": {
       "a": 20,
       "b": 15,
       "mcc": 14,
     },
     "color": "#AABBCC",
-    "deltas": Object {
+    "deltas": {
       "a": 1,
       "b": 2,
     },
     "depth": 4,
-    "edgeAttributes": Object {
-      "a": Object {
+    "edgeAttributes": {
+      "a": {
         "incoming": 2,
         "outgoing": 666,
       },

package/app/codeCharta/ui/codeMap/__snapshots__/codeMap.render.service.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`codeMapRenderService getNodes should get Nodes as array 1`] = `
-Array [
-  Object {
-    "attributes": Object {
+[
+  {
+    "attributes": {
       "mcc": 111,
       "rloc": 200,
       "unary": 4,
@@ -11,7 +11,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 0,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -39,8 +39,8 @@ Array [
     "y0": 0,
     "z0": 0,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 10,
       "mcc": 1,
       "rloc": 100,
@@ -49,7 +49,7 @@ Array [
     "color": "#69AE40",
     "deltas": undefined,
     "depth": 1,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -77,8 +77,8 @@ Array [
     "y0": 19.200000000000003,
     "z0": 2,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "mcc": 110,
       "rloc": 100,
       "unary": 3,
@@ -86,7 +86,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 1,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -114,8 +114,8 @@ Array [
     "y0": 19.200000000000003,
     "z0": 2,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 100,
       "mcc": 100,
       "rloc": 30,
@@ -124,7 +124,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -152,8 +152,8 @@ Array [
     "y0": 38.400000000000006,
     "z0": 4,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 1000,
       "mcc": 10,
       "rloc": 70,
@@ -162,7 +162,7 @@ Array [
     "color": "#6caf3e",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -190,8 +190,8 @@ Array [
     "y0": 306.16530459215556,
     "z0": 4,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "mcc": 0,
       "rloc": 0,
       "unary": 1,
@@ -199,7 +199,7 @@ Array [
     "color": "#69AE40",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 500,
     "heightDelta": 0,

package/app/codeCharta/ui/codeMap/codeMap.arrow.service.spec.ts

@@ -107,8 +107,7 @@ describe("CodeMapArrowService", () => {
 			expect(threeSceneService["selected"]).toMatchSnapshot()
 		})
 		it("should debounce the edge reset of buildings to improve performance", async () => {
-			codeMapArrowService["resetEdgesOfBuildings"] = () => {}
-			const resetEdgesOfBuildingMock = jest.fn().mockImplementation()
+			const resetEdgesOfBuildingMock = jest.fn()
 			codeMapArrowService["resetEdgesOfBuildings"] = resetEdgesOfBuildingMock
 			codeMapArrowService.onBuildingHovered(CODE_MAP_BUILDING_WITH_OUTGOING_EDGE_NODE)
 
@@ -123,6 +122,7 @@ describe("CodeMapArrowService", () => {
 	describe("SelectionMethods", () => {
 		beforeEach(() => {
 			codeMapArrowService.clearArrows = jest.fn()
+			codeMapArrowService.addArrow = jest.fn()
 			codeMapArrowService["showEdgesOfBuildings"] = jest.fn()
 			codeMapArrowService.addEdgePreview = jest.fn()
 			threeSceneService.clearHighlight = jest.fn()
@@ -178,9 +178,10 @@ describe("CodeMapArrowService", () => {
 			codeMapArrowService.onBuildingDeselected()
 
 			expect(codeMapArrowService.clearArrows).toHaveBeenCalled()
-			expect(threeSceneService.clearHighlight).toHaveBeenCalled()
-			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 			expect(codeMapArrowService.addEdgePreview).toHaveBeenCalled()
+			expect(codeMapArrowService.addArrow).toHaveBeenCalledTimes(0)
+			expect(threeSceneService.clearHighlight).toHaveBeenCalledTimes(0)
+			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 		})
 	})
 

package/app/codeCharta/ui/codeMap/codeMap.arrow.service.ts

@@ -1,50 +1,55 @@
-import { Injectable, Inject } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { ThreeSceneService } from "./threeViewer/threeSceneService"
 import { Node, EdgeVisibility } from "../../codeCharta.model"
 import { ArrowHelper, BufferGeometry, CubicBezierCurve3, Line, LineBasicMaterial, Object3D, Vector3 } from "three"
 import { ColorConverter } from "../../util/color/colorConverter"
 import { CodeMapBuilding } from "./rendering/codeMapBuilding"
-import debounce from "lodash.debounce"
 import { IdToBuildingService } from "../../services/idToBuilding/idToBuilding.service"
 import { tap } from "rxjs"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
+import { debounce } from "../../util/debounce"
 
 @Injectable({ providedIn: "root" })
-export class CodeMapArrowService {
-	private VERTICES_PER_LINE = 5
+export class CodeMapArrowService implements OnDestroy {
 	private map: Map<string, Node>
-	private arrows: Object3D[]
-	private debounceCalculation: (hoveredBuilding: CodeMapBuilding) => void
-	private HIGHLIGHT_BUILDING_DELAY = 15
+	private VERTICES_PER_LINE = 5
+	private arrows: Object3D[] = new Array<Object3D>()
+	private HIGHLIGHT_BUILDING_DELAY = 1
+	private debounceCalculation: (hoveredBuilding: CodeMapBuilding) => void = debounce(
+		(hoveredBuilding: CodeMapBuilding) => this.resetEdgesOfBuildings(hoveredBuilding),
+		this.HIGHLIGHT_BUILDING_DELAY
+	)
+	private subscription = this.store
+		.select(hoveredNodeIdSelector)
+		.pipe(
+			tap(hoveredNodeId => {
+				if (hoveredNodeId !== null) {
+					const hoveredBuilding = this.idToBuildingService.get(hoveredNodeId)
+					this.onBuildingHovered(hoveredBuilding)
+				} else {
+					this.onBuildingUnhovered()
+				}
+			})
+		)
+		.subscribe()
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(IdToBuildingService) private idToBuildingService: IdToBuildingService
+		private store: Store,
+		private state: State,
+		private threeSceneService: ThreeSceneService,
+		private idToBuildingService: IdToBuildingService
 	) {
-		this.arrows = new Array<Object3D>()
-		this.store
-			.select(hoveredNodeIdSelector)
-			.pipe(
-				tap(hoveredNodeId => {
-					if (hoveredNodeId !== null) {
-						const hoveredBuilding = this.idToBuildingService.get(hoveredNodeId)
-						this.onBuildingHovered(hoveredBuilding)
-					} else {
-						this.onBuildingUnhovered()
-					}
-				})
-			)
-			.subscribe()
 		this.threeSceneService.subscribe("onBuildingSelected", this.onBuildingSelected)
 		this.threeSceneService.subscribe("onBuildingDeselected", this.onBuildingDeselected)
-		this.debounceCalculation = debounce(hoveredBuildings => this.resetEdgesOfBuildings(hoveredBuildings), this.HIGHLIGHT_BUILDING_DELAY)
 	}
 
-	private resetEdgesOfBuildings = hoveredBuilding => {
+	ngOnDestroy(): void {
+		this.subscription.unsubscribe()
+	}
+
+	private resetEdgesOfBuildings = (hoveredBuilding: CodeMapBuilding) => {
 		if (this.isEdgeApplicableForBuilding(hoveredBuilding)) {
 			this.clearArrows()
 			this.showEdgesOfBuildings(hoveredBuilding)
@@ -62,7 +67,6 @@ export class CodeMapArrowService {
 
 	onBuildingDeselected = () => {
 		this.clearArrows()
-		this.threeSceneService.clearHighlight()
 		this.addEdgePreview()
 	}
 
@@ -170,14 +174,15 @@ export class CodeMapArrowService {
 			}
 			if (node.has(originNode.path)) {
 				this.addArrow(targetNode, originNode, true)
+				this.threeSceneService.highlightBuildings()
 				// TODO: Check if the second if case is actually necessary. Edges should
 				// always have valid origin and target paths. The test data is likely
 				// faulty and should be improved.
 			} else if (node.has(targetNode.path)) {
 				this.addArrow(targetNode, originNode, false)
+				this.threeSceneService.highlightBuildings()
 			}
 		}
-		this.threeSceneService.highlightBuildings()
 	}
 
 	private createCurve(arrowOriginNode: Node, arrowTargetNode: Node, curveScale) {