codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.ts

@@ -1,22 +1,23 @@
-import { Component, Inject, Input } from "@angular/core"
-import { BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { CodeMapNode } from "../../../../codeCharta.model"
 import { Store } from "../../../angular-redux/store"
 import { addBlacklistItem, removeBlacklistItem } from "../../../store/fileSettings/blacklist/blacklist.actions"
 
 @Component({
 	selector: "cc-flatten-buttons",
-	template: require("./flattenButtons.component.html")
+	templateUrl: "./flattenButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FlattenButtonsComponent {
 	@Input() codeMapNode: Pick<CodeMapNode, "path" | "type" | "isFlattened">
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	flattenNode() {
 		this.store.dispatch(
 			addBlacklistItem({
 				path: this.codeMapNode.path,
-				type: BlacklistType.flatten,
+				type: "flatten",
 				nodeType: this.codeMapNode.type
 			})
 		)
@@ -26,7 +27,7 @@ export class FlattenButtonsComponent {
 		this.store.dispatch(
 			removeBlacklistItem({
 				path: this.codeMapNode.path,
-				type: BlacklistType.flatten,
+				type: "flatten",
 				nodeType: this.codeMapNode.type
 			})
 		)

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable, map } from "rxjs"
 
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -9,7 +9,8 @@ import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedN
 
 @Component({
 	selector: "cc-focus-buttons",
-	template: require("./focusButtons.component.html")
+	templateUrl: "./focusButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FocusButtonsComponent {
 	@Input() codeMapNode: Pick<CodeMapNode, "path">
@@ -17,7 +18,7 @@ export class FocusButtonsComponent {
 	currentFocusedNodePath$: Observable<string | undefined>
 	hasPreviousFocusedNodePath$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.currentFocusedNodePath$ = this.store.select(currentFocusedNodePathSelector)
 		this.hasPreviousFocusedNodePath$ = this.store
 			.select(focusedNodePathSelector)

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.spec.ts

@@ -19,7 +19,7 @@ describe("flattenButtonsComponent", () => {
 		const idToBuilding = new IdToBuildingService()
 		idToBuilding.setIdToBuilding([{ id: 0, node: { id: 0 } } as unknown as CodeMapBuilding])
 
-		const { rerender } = await render(HighlightButtonsComponent, {
+		const { change } = await render(HighlightButtonsComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: { codeMapNode: { id: 0 } },
 			providers: [
@@ -31,14 +31,14 @@ describe("flattenButtonsComponent", () => {
 		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
 		await userEvent.click(screen.getByText("KEEP HIGHLIGHT"))
 
-		rerender({ codeMapNode: undefined })
-		rerender({ codeMapNode: { id: 0 } })
+		change({ codeMapNode: undefined })
+		change({ codeMapNode: { id: 0 } })
 
 		expect(screen.queryByText("KEEP HIGHLIGHT")).toBe(null)
 		await userEvent.click(screen.getByText("REMOVE HIGHLIGHT"))
 
-		rerender({ codeMapNode: undefined })
-		rerender({ codeMapNode: { id: 0 } })
+		change({ codeMapNode: undefined })
+		change({ codeMapNode: { id: 0 } })
 
 		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
 		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.ts

@@ -1,21 +1,19 @@
-import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from "@angular/core"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { IdToBuildingService } from "../../../../services/idToBuilding/idToBuilding.service"
 import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
 
 @Component({
 	selector: "cc-highlight-buttons",
-	template: require("./highlightButtons.component.html")
+	templateUrl: "./highlightButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HighlightButtonsComponent implements OnChanges {
 	@Input() codeMapNode: Pick<CodeMapNode, "id">
 
 	isHighlighted: boolean
 
-	constructor(
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(IdToBuildingService) private idToBuilding: IdToBuildingService
-	) {}
+	constructor(private threeSceneService: ThreeSceneService, private idToBuilding: IdToBuildingService) {}
 
 	ngOnChanges(changes: SimpleChanges): void {
 		if (changes.codeMapNode) {

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.ts

@@ -1,5 +1,4 @@
-import "./markFolderRow.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../angular-redux/store"
 import { markPackages, unmarkPackage } from "../../../store/fileSettings/markedPackages/markedPackages.actions"
 import { Observable } from "rxjs"
@@ -9,13 +8,15 @@ import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.sele
 
 @Component({
 	selector: "cc-mark-folder-row",
-	template: require("./markFolderRow.component.html")
+	templateUrl: "./markFolderRow.component.html",
+	styleUrls: ["./markFolderRow.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MarkFolderRowComponent {
 	markFolderItems$: Observable<MarkFolderItem[]>
 	codeMapNode$: Observable<CodeMapNode>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.markFolderItems$ = store.select(markFolderItemsSelector)
 		this.codeMapNode$ = store.select(rightClickedCodeMapNodeSelector)
 	}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenu.service.ts

@@ -1,6 +1,6 @@
 import { Overlay, OverlayRef } from "@angular/cdk/overlay"
 import { ComponentPortal } from "@angular/cdk/portal"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Store } from "../../angular-redux/store"
 import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextMenuCard.component"
@@ -9,7 +9,7 @@ import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextM
 export class NodeContextMenuService {
 	private overlayReference: OverlayRef | null = null
 
-	constructor(@Inject(Overlay) private overlay: Overlay, @Inject(Store) private store: Store) {}
+	constructor(private overlay: Overlay, private store: Store) {}
 
 	open(x: number, y: number) {
 		if (this.overlayReference) {

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.html

@@ -1,4 +1,4 @@
-<mat-card id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
+<mat-card appearance="outlined" id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
 	<div *ngIf="codeMapNode?.children?.length > 0">
 		<cc-mark-folder-row></cc-mark-folder-row>
 		<mat-divider></mat-divider>

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.scss

@@ -1,8 +1,10 @@
 #codemap-context-menu {
-	padding: 2px;
+	padding: 12px;
 
 	.button-group {
-		display: inline-grid;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
 		width: 100%;
 	}
 
@@ -19,16 +21,13 @@
 	[mat-button] {
 		width: 100%;
 		text-align: left;
-		margin-top: 0;
+		margin: 0;
+		justify-content: left;
 		line-height: 30px;
 		min-height: 30px;
 
 		i {
 			min-width: 15px;
 		}
-
-		&:not(:last-child) {
-			margin-bottom: 0;
-		}
 	}
 }

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { IdToBuildingService } from "../../../../services/idToBuilding/idToBuilding.service"
 import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
 import { VALID_FILE_NODE_WITH_ID, VALID_NODE_WITH_PATH } from "../../../../util/dataMocks"
@@ -11,7 +10,7 @@ import { NodeContextMenuCardModule } from "./nodeContextMenuCard.module"
 jest.mock("../rightClickedCodeMapNode.selector", () => ({
 	rightClickedCodeMapNodeSelector: jest.fn()
 }))
-const mockedRightClickedCodeMapNodeSelector = mocked(rightClickedCodeMapNodeSelector)
+const mockedRightClickedCodeMapNodeSelector = jest.mocked(rightClickedCodeMapNodeSelector)
 
 describe("NodeContextMenuCardComponent", () => {
 	beforeEach(() => {

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.ts

@@ -1,17 +1,18 @@
-import "./nodeContextMenuCard.component.scss"
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../angular-redux/store"
 import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
 import { Observable } from "rxjs"
 import { CodeMapNode } from "../../../../codeCharta.model"
 
 @Component({
-	template: require("./nodeContextMenuCard.component.html")
+	templateUrl: "./nodeContextMenuCard.component.html",
+	styleUrls: ["./nodeContextMenuCard.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class NodeContextMenuCardComponent implements OnInit {
 	codeMapNode$: Observable<CodeMapNode>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.codeMapNode$ = this.store.select(rightClickedCodeMapNodeSelector)

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module.ts

@@ -12,7 +12,6 @@ import { NodeContextMenuCardComponent } from "./nodeContextMenuCard.component"
 @NgModule({
 	imports: [CommonModule, MaterialModule, FlattenButtonsModule, FocusButtonsModule, HighlightButtonsModule, MarkFolderRowModule],
 	declarations: [NodeContextMenuCardComponent, LastPartOfNodePathPipe, ExcludeButtonComponent],
-	exports: [NodeContextMenuCardComponent],
-	entryComponents: [NodeContextMenuCardComponent]
+	exports: [NodeContextMenuCardComponent]
 })
 export class NodeContextMenuCardModule {}

package/app/codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect.ts

@@ -11,10 +11,7 @@ import { tap } from "rxjs"
 
 @Injectable()
 export class OpenNodeContextMenuEffect {
-	constructor(
-		@Inject(ActionsToken) private actions$: Actions,
-		@Inject(NodeContextMenuService) private nodeContextMenu: NodeContextMenuService
-	) {}
+	constructor(@Inject(ActionsToken) private actions$: Actions, private nodeContextMenu: NodeContextMenuService) {}
 
 	openNodeContextMenu$ = createEffect(
 		() =>

package/app/codeCharta/state/effects/renderCodeMapEffect/actionsRequiringRerender.ts

@@ -25,6 +25,7 @@ import { MarginActions } from "../../store/dynamicSettings/margin/margin.actions
 import { SearchPatternActions } from "../../store/dynamicSettings/searchPattern/searchPattern.actions"
 import { MarkedPackagesActions } from "../../store/fileSettings/markedPackages/markedPackages.actions"
 import { StateActions } from "../../store/state.actions"
+import { EnableFloorLabelsActions } from "../../store/appSettings/enableFloorLabels/enableFloorLabels.actions"
 
 export const actionsRequiringRerender = [
 	ColorLabelsActions,
@@ -53,5 +54,6 @@ export const actionsRequiringRerender = [
 	ColorMetricActions,
 	ShowOnlyBuildingsWithEdgesActions,
 	MarkedPackagesActions,
-	StateActions
+	StateActions,
+	EnableFloorLabelsActions
 ]

package/app/codeCharta/state/effects/renderCodeMapEffect/renderCodeMap.effect.ts

@@ -18,11 +18,11 @@ export const maxFPS = 1000 / 60
 @Injectable()
 export class RenderCodeMapEffect {
 	constructor(
-		@Inject(Store) private store: Store,
+		private store: Store,
 		@Inject(ActionsToken) private actions$: Actions,
-		@Inject(UploadFilesService) private uploadFilesService: UploadFilesService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService,
-		@Inject(CodeMapRenderService) private codeMapRenderService: CodeMapRenderService
+		private uploadFilesService: UploadFilesService,
+		private threeRendererService: ThreeRendererService,
+		private codeMapRenderService: CodeMapRenderService
 	) {}
 
 	private actionsRequiringRender$ = this.actions$.pipe(

package/app/codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect.spec.ts

@@ -3,7 +3,7 @@ import { TestBed } from "@angular/core/testing"
 import { BehaviorSubject, Subject } from "rxjs"
 import { EffectsModule } from "../../angular-redux/effects/effects.module"
 import { Store } from "../../angular-redux/store"
-import { nodeMetricDataSelector } from "../../selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { metricDataSelector } from "../../selectors/accumulatedData/metricData/metricData.selector"
 import { areChosenMetricsAvailableSelector } from "../../selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector"
 import { setAreaMetric } from "../../store/dynamicSettings/areaMetric/areaMetric.actions"
 import { setColorMetric } from "../../store/dynamicSettings/colorMetric/colorMetric.actions"
@@ -12,13 +12,13 @@ import { setHeightMetric } from "../../store/dynamicSettings/heightMetric/height
 import { ResetChosenMetricsEffect } from "./resetChosenMetrics.effect"
 
 describe("resetChosenMetricsEffect", () => {
-	let mockedNodeMetricDataSelector = new Subject()
+	let mockedMetricDataSelector = new Subject()
 	const mockedAreChosenMetricsAvailableSelector = new BehaviorSubject(false)
 	const mockedStore = {
 		select: (selector: unknown) => {
 			switch (selector) {
-				case nodeMetricDataSelector:
-					return mockedNodeMetricDataSelector
+				case metricDataSelector:
+					return mockedMetricDataSelector
 				case areChosenMetricsAvailableSelector:
 					return mockedAreChosenMetricsAvailableSelector
 				default:
@@ -30,7 +30,7 @@ describe("resetChosenMetricsEffect", () => {
 
 	beforeEach(async () => {
 		mockedStore.dispatch = jest.fn()
-		mockedNodeMetricDataSelector = new Subject()
+		mockedMetricDataSelector = new Subject()
 		TestBed.configureTestingModule({
 			imports: [EffectsModule.forRoot([ResetChosenMetricsEffect])],
 			providers: [{ provide: Store, useValue: mockedStore }]
@@ -39,19 +39,21 @@ describe("resetChosenMetricsEffect", () => {
 	})
 
 	afterEach(() => {
-		mockedNodeMetricDataSelector.complete()
+		mockedMetricDataSelector.complete()
 	})
 
 	it("should do nothing, when there are no metrics available", () => {
-		mockedNodeMetricDataSelector.next([])
+		mockedMetricDataSelector.next({ nodeMetricData: [] })
 		expect(mockedStore.dispatch).not.toHaveBeenCalled()
 	})
 
 	it("should apply matching metrics, when area, height and color metrics of matching category are available", () => {
-		mockedNodeMetricDataSelector.next([
-			{ name: "rloc", maxValue: 9001 },
-			{ name: "mcc", maxValue: 9001 }
-		])
+		mockedMetricDataSelector.next({
+			nodeMetricData: [
+				{ name: "rloc", maxValue: 9001 },
+				{ name: "mcc", maxValue: 9001 }
+			]
+		})
 
 		expect(mockedStore.dispatch).toHaveBeenCalledTimes(4)
 		expect(mockedStore.dispatch).toHaveBeenCalledWith(setDistributionMetric("rloc"))
@@ -61,10 +63,12 @@ describe("resetChosenMetricsEffect", () => {
 	})
 
 	it("should apply available metrics when no matching scenario was found", () => {
-		mockedNodeMetricDataSelector.next([
-			{ name: "rloc", maxValue: 9001 },
-			{ name: "loc", maxValue: 9001 }
-		])
+		mockedMetricDataSelector.next({
+			nodeMetricData: [
+				{ name: "rloc", maxValue: 9001 },
+				{ name: "loc", maxValue: 9001 }
+			]
+		})
 
 		expect(mockedStore.dispatch).toHaveBeenCalledTimes(4)
 		expect(mockedStore.dispatch).toHaveBeenCalledWith(setDistributionMetric("rloc"))
@@ -75,10 +79,12 @@ describe("resetChosenMetricsEffect", () => {
 
 	it("should do nothing, when chosen metrics are still available", () => {
 		mockedAreChosenMetricsAvailableSelector.next(true)
-		mockedNodeMetricDataSelector.next([
-			{ name: "rloc", maxValue: 9001 },
-			{ name: "loc", maxValue: 9001 }
-		])
+		mockedMetricDataSelector.next({
+			nodeMetricData: [
+				{ name: "rloc", maxValue: 9001 },
+				{ name: "loc", maxValue: 9001 }
+			]
+		})
 
 		expect(mockedStore.dispatch).not.toHaveBeenCalled()
 	})

package/app/codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect.ts

@@ -1,23 +1,24 @@
-import { Inject, Injectable } from "@angular/core"
-import { filter, tap, withLatestFrom } from "rxjs"
+import { Injectable } from "@angular/core"
+import { filter, tap, withLatestFrom, map } from "rxjs"
 import { defaultNMetrics, isAnyMetricAvailable, preselectCombination } from "./utils/metricHelper"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { Store } from "../../angular-redux/store"
-import { nodeMetricDataSelector } from "../../selectors/accumulatedData/metricData/nodeMetricData.selector"
 import { setDistributionMetric } from "../../store/dynamicSettings/distributionMetric/distributionMetric.actions"
 import { getDefaultDistribution } from "./utils/getDefaultDistributionMetric"
 import { setAreaMetric } from "../../store/dynamicSettings/areaMetric/areaMetric.actions"
 import { setHeightMetric } from "../../store/dynamicSettings/heightMetric/heightMetric.actions"
 import { setColorMetric } from "../../store/dynamicSettings/colorMetric/colorMetric.actions"
 import { areChosenMetricsAvailableSelector } from "../../selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector"
+import { metricDataSelector } from "../../selectors/accumulatedData/metricData/metricData.selector"
 
 @Injectable()
 export class ResetChosenMetricsEffect {
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	resetChosenDistributionMetric$ = createEffect(
 		() =>
-			this.store.select(nodeMetricDataSelector).pipe(
+			this.store.select(metricDataSelector).pipe(
+				map(metricData => metricData.nodeMetricData),
 				filter(isAnyMetricAvailable),
 				withLatestFrom(this.store.select(areChosenMetricsAvailableSelector)),
 				filter(([, areChosenMetricsAvailable]) => !areChosenMetricsAvailable),

package/app/codeCharta/state/effects/resetSelectedEdgeMetricWhenItDoesntExistAnymore/resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect.spec.ts

@@ -3,20 +3,20 @@ import { ApplicationInitStatus } from "@angular/core"
 import { Subject } from "rxjs"
 import { EffectsModule } from "../../angular-redux/effects/effects.module"
 import { Store } from "../../angular-redux/store"
-import { edgeMetricDataSelector } from "../../selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { metricDataSelector } from "../../selectors/accumulatedData/metricData/metricData.selector"
 import { edgeMetricSelector } from "../../store/dynamicSettings/edgeMetric/edgeMetric.selector"
 import { Store as PlainStoreUsedByEffects } from "../../store/store"
 import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect"
 import { setEdgeMetric } from "../../store/dynamicSettings/edgeMetric/edgeMetric.actions"
 
 describe("ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect", () => {
-	let mockedEdgeMetricDataSelector$ = new Subject()
+	let mockedMetricDataSelector$ = new Subject()
 	let mockedEdgeMetricSelector$ = new Subject()
 	const mockedStore = {
 		select: (selector: unknown) => {
 			switch (selector) {
-				case edgeMetricDataSelector:
-					return mockedEdgeMetricDataSelector$
+				case metricDataSelector:
+					return mockedMetricDataSelector$
 				case edgeMetricSelector:
 					return mockedEdgeMetricSelector$
 				default:
@@ -29,7 +29,7 @@ describe("ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect", () => {
 	beforeEach(async () => {
 		mockedStore.dispatch = jest.fn()
 		PlainStoreUsedByEffects.store.dispatch = mockedStore.dispatch
-		mockedEdgeMetricDataSelector$ = new Subject()
+		mockedMetricDataSelector$ = new Subject()
 		mockedEdgeMetricSelector$ = new Subject()
 		TestBed.configureTestingModule({
 			imports: [EffectsModule.forRoot([ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect])],
@@ -39,39 +39,39 @@ describe("ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect", () => {
 	})
 
 	afterEach(() => {
-		mockedEdgeMetricDataSelector$.complete()
+		mockedMetricDataSelector$.complete()
 		mockedEdgeMetricSelector$.complete()
 	})
 
 	it("should reset selected edge metric to first available, when current isn't available anymore", () => {
 		mockedEdgeMetricSelector$.next("avgCommits")
-		mockedEdgeMetricDataSelector$.next([{ name: "pairingRate" }])
+		mockedMetricDataSelector$.next({ edgeMetricData: [{ name: "pairingRate" }] })
 		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric("pairingRate"))
 	})
 
 	it("should do nothing, when current selected edge metric is still available", () => {
 		mockedEdgeMetricSelector$.next("avgCommits")
-		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		mockedMetricDataSelector$.next({ edgeMetricData: [{ name: "avgCommits" }] })
 		expect(mockedStore.dispatch).not.toHaveBeenCalled()
 	})
 
 	it("should not set reselect edge metric to null", () => {
 		mockedEdgeMetricSelector$.next("avgCommits")
-		mockedEdgeMetricDataSelector$.next([])
+		mockedMetricDataSelector$.next({ edgeMetricData: [] })
 		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric(undefined))
 
-		mockedEdgeMetricDataSelector$.next([])
+		mockedMetricDataSelector$.next({ edgeMetricData: [] })
 		expect(mockedStore.dispatch).toHaveBeenCalledTimes(1)
 	})
 
 	it("should reset when an edge metric becomes available again", () => {
 		mockedEdgeMetricSelector$.next("pairingRate")
-		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		mockedMetricDataSelector$.next({ edgeMetricData: [{ name: "avgCommits" }] })
 		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric("avgCommits"))
 
-		mockedEdgeMetricDataSelector$.next([])
+		mockedMetricDataSelector$.next({ edgeMetricData: [] })
 		mockedEdgeMetricSelector$.next(null)
-		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		mockedMetricDataSelector$.next({ edgeMetricData: [{ name: "avgCommits" }] })
 		expect(mockedStore.dispatch).toHaveBeenCalledTimes(3)
 		expect(mockedStore.dispatch.mock.calls[0][0]).toEqual(setEdgeMetric("avgCommits"))
 	})

package/app/codeCharta/state/effects/resetSelectedEdgeMetricWhenItDoesntExistAnymore/resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect.ts

@@ -1,20 +1,20 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { filter, withLatestFrom, map, distinctUntilChanged } from "rxjs"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { Store } from "../../angular-redux/store"
-import { edgeMetricDataSelector } from "../../selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { metricDataSelector } from "../../selectors/accumulatedData/metricData/metricData.selector"
 import { setEdgeMetric } from "../../store/dynamicSettings/edgeMetric/edgeMetric.actions"
 import { edgeMetricSelector } from "../../store/dynamicSettings/edgeMetric/edgeMetric.selector"
 
 @Injectable()
 export class ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect {
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	resetSelectedEdgeMetricWhenItDoesntExistAnymore$ = createEffect(() =>
-		this.store.select(edgeMetricDataSelector).pipe(
+		this.store.select(metricDataSelector).pipe(
 			withLatestFrom(this.store.select(edgeMetricSelector)),
-			filter(([edgeMetrics, selectedEdgeMetric]) => !edgeMetrics.some(metric => metric.name === selectedEdgeMetric)),
-			map(([edgeMetrics]) => edgeMetrics[0]?.name),
+			filter(([metricData, selectedEdgeMetric]) => !metricData.edgeMetricData.some(metric => metric.name === selectedEdgeMetric)),
+			map(([metricData]) => metricData.edgeMetricData[0]?.name),
 			distinctUntilChanged(),
 			map(newEdgeMetric => setEdgeMetric(newEdgeMetric))
 		)

package/app/codeCharta/state/effects/unfocusNodes/unfocusNodes.effect.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { map } from "rxjs"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { Store } from "../../angular-redux/store"
@@ -7,7 +7,7 @@ import { unfocusAllNodes } from "../../store/dynamicSettings/focusedNodePath/foc
 
 @Injectable()
 export class UnfocusNodesEffect {
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	unfocusNodes$ = createEffect(() => this.store.select(visibleFileStatesSelector).pipe(map(() => unfocusAllNodes())))
 }

package/app/codeCharta/state/effects/updateEdgePreviews/updateEdgePreviews.effect.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { combineLatest, filter, map, withLatestFrom } from "rxjs"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { Store } from "../../angular-redux/store"
@@ -15,7 +15,7 @@ import { setEdgeVisibility } from "./utils/setEdgeVisibility"
 
 @Injectable()
 export class UpdateEdgePreviewsEffect {
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	resetIsEdgeMetricVisible$ = createEffect(() =>
 		this.store.select(edgeMetricSelector).pipe(

package/app/codeCharta/state/effects/updateEdgePreviews/utils/edgePreviewNodes.selector.ts

@@ -1,11 +1,13 @@
 import { createSelector } from "../../../angular-redux/createSelector"
-import { edgeMetricMapSelector, NodeEdgeMetricsMap } from "../../../selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { NodeEdgeMetricsMap } from "../../../selectors/accumulatedData/metricData/edgeMetricData.calculator"
+import { metricDataSelector } from "../../../selectors/accumulatedData/metricData/metricData.selector"
 import { amountOfEdgePreviewsSelector } from "../../../store/appSettings/amountOfEdgePreviews/amountOfEdgePreviews.selector"
 import { edgeMetricSelector } from "../../../store/dynamicSettings/edgeMetric/edgeMetric.selector"
 
 export const edgePreviewNodesSelector = createSelector(
-	[edgeMetricMapSelector, edgeMetricSelector, amountOfEdgePreviewsSelector],
-	(edgeMetricMap, edgeMetric, amountOfEdgePreviews) => new Set(_getNodesWithHighestValue(edgeMetricMap, edgeMetric, amountOfEdgePreviews))
+	[metricDataSelector, edgeMetricSelector, amountOfEdgePreviewsSelector],
+	(metricData, edgeMetric, amountOfEdgePreviews) =>
+		new Set(_getNodesWithHighestValue(metricData.nodeEdgeMetricsMap, edgeMetric, amountOfEdgePreviews))
 )
 
 export const _getNodesWithHighestValue = (edgeMetricMap: NodeEdgeMetricsMap, edgeMetric: string, amountOfEdgePreviews: number) => {

package/app/codeCharta/state/effects/updateFileSettings/updateFileSettings.effect.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, Inject } from "@angular/core"
 import { filter, map } from "rxjs"
 import { getVisibleFiles, isPartialState } from "../../../model/files/files.helper"
 import { isActionOfType } from "../../../util/reduxHelper"
@@ -16,7 +16,7 @@ import { getMergedAttributeDescriptors } from "./utils/attributeDescriptors.merg
 
 @Injectable()
 export class UpdateFileSettingsEffect {
-	constructor(@Inject(ActionsToken) private actions$: Actions, @Inject(State) private state: State) {}
+	constructor(@Inject(ActionsToken) private actions$: Actions, private state: State) {}
 
 	updateFileSettings$ = createEffect(() =>
 		this.actions$.pipe(