codecharta-visualization 1.114.0 → 1.115.1

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.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="(selectedNode$ | async )?.deltas?.[metricName] as deltaValue">
-	<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']" class="metric-delta">
+	<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']">
 		&Delta;{{ deltaValue | number: "1.1-2" }}
 	</span>
 </ng-container>

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

@@ -56,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) {

package/app/codeCharta/ui/codeMap/codeMap.component.ts

@@ -1,5 +1,4 @@
-import "./codeMap.component.scss"
-import { Component, Inject, AfterViewInit, ElementRef, OnDestroy } from "@angular/core"
+import { Component, AfterViewInit, ElementRef, OnDestroy, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
 import { ThreeViewerService } from "./threeViewer/threeViewer.service"
@@ -10,7 +9,9 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-code-map",
-	template: require("./codeMap.component.html")
+	templateUrl: "./codeMap.component.html",
+	styleUrls: ["./codeMap.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CodeMapComponent implements AfterViewInit, OnDestroy {
 	isLoadingFile$ = this.store.select(isLoadingFileSelector)
@@ -26,11 +27,11 @@ export class CodeMapComponent implements AfterViewInit, OnDestroy {
 		.subscribe()
 
 	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store,
-		@Inject(ThreeViewerService) private threeViewerService: ThreeViewerService,
-		@Inject(CodeMapMouseEventService) private codeMapMouseEventService: CodeMapMouseEventService,
-		@Inject(ElementRef) private elementReference: ElementRef
+		public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
+		private store: Store,
+		private threeViewerService: ThreeViewerService,
+		private codeMapMouseEventService: CodeMapMouseEventService,
+		private elementReference: ElementRef
 	) {}
 
 	ngAfterViewInit(): void {

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

@@ -5,7 +5,7 @@ import { ThreeCameraService } from "./threeViewer/threeCamera.service"
 import { ThreeSceneService } from "./threeViewer/threeSceneService"
 import { ColorConverter } from "../../util/color/colorConverter"
 import { State } from "../../state/angular-redux/state"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { treeMapSize } from "../../util/algorithm/treeMapLayout/treeMapHelper"
 
 interface InternalLabel {
@@ -33,10 +33,10 @@ export class CodeMapLabelService {
 	private nodeHeight = 0
 
 	constructor(
-		@Inject(State) private state: State,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private state: State,
+		private threeCameraService: ThreeCameraService,
+		private threeSceneService: ThreeSceneService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {
 		this.labels = new Array<InternalLabel>()
 		this.threeOrbitControlsService.subscribe("onCameraChanged", () => this.onCameraChanged())

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

@@ -501,6 +501,7 @@ describe("codeMapMouseEventService", () => {
 		describe("on left click", () => {
 			beforeEach(() => {
 				event = { button: ClickType.LeftClick, clientX: 10, clientY: 20 }
+				codeMapMouseEventService["intersectedBuilding"] = undefined
 			})
 			it("should change the cursor to default when the left click is triggered", () => {
 				document.body.style.cursor = CursorType.Pointer
@@ -537,7 +538,7 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.selectBuilding).toHaveBeenCalledWith(codeMapBuilding)
 			})
 
-			it("should call clearselection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
+			it("should call clearSelection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)
 				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
@@ -547,6 +548,18 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.clearSelection).toHaveBeenCalled()
 			})
 
+			it("should not call clearSelection, when the mouse has moved less or exact 3 pixels but a building is currently being clicked upon", () => {
+				codeMapMouseEventService.onDocumentMouseMove(event)
+				codeMapMouseEventService.onDocumentMouseDown(event)
+				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
+				codeMapMouseEventService["intersectedBuilding"] = CODE_MAP_BUILDING
+
+				codeMapMouseEventService.onDocumentMouseUp(event)
+
+				expect(threeSceneService.clearSelection).toHaveBeenCalledTimes(0)
+				expect(threeSceneService.selectBuilding).toHaveBeenLastCalledWith(CODE_MAP_BUILDING)
+			})
+
 			it("should not call clear selection, when mouse has moved more than 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)