codecharta-visualization 1.88.0 → 1.89.0

package/app/codeCharta/state/store.service.spec.ts

@@ -11,6 +11,8 @@ import { setMargin } from "./store/dynamicSettings/margin/margin.actions"
 import { setCamera } from "./store/appSettings/camera/camera.actions"
 import { setIsLoadingMap } from "./store/appSettings/isLoadingMap/isLoadingMap.actions"
 import { toggleSortingOrderAscending } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
+import { EffectsModule } from "./angular-redux/effects/effects.module"
+import { Subject } from "rxjs"
 
 describe("StoreService", () => {
 	let storeService: StoreService
@@ -110,19 +112,30 @@ describe("StoreService", () => {
 			expect($rootScope.$broadcast).not.toHaveBeenCalled()
 		})
 
-		it("should dispatch an action silently and not show the loading-gif", () => {
+		it("should show not the loading-gif when an action is triggered, that doesn't change the loading-gif state", () => {
 			storeService.dispatch(setIsLoadingMap(false))
-
-			storeService.dispatch(setCamera(), { silent: true })
+			storeService.dispatch(toggleSortingOrderAscending())
 
 			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
 		})
 
-		it("should show not the loading-gif when an action is triggered, that doesn't change the loading-gif state", () => {
-			storeService.dispatch(setIsLoadingMap(false))
-			storeService.dispatch(toggleSortingOrderAscending())
+		describe("connection to action subject", () => {
+			beforeEach(() => {
+				EffectsModule.actions$ = new Subject()
+			})
 
-			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
+			afterEach(() => {
+				EffectsModule.actions$.complete()
+			})
+
+			it("should trigger a new action value on dispatch", () => {
+				const subscription = jest.fn()
+				EffectsModule.actions$.subscribe(subscription)
+
+				storeService.dispatch({ type: "something" })
+
+				expect(subscription).toHaveBeenCalledWith({ type: "something" })
+			})
 		})
 	})
 })

package/app/codeCharta/state/store.service.ts

@@ -1,20 +1,8 @@
 import { IRootScopeService } from "angular"
 import { splitStateActions } from "./store/state.splitter"
-import { IsLoadingMapActions, setIsLoadingMap } from "./store/appSettings/isLoadingMap/isLoadingMap.actions"
-import { IsLoadingFileActions } from "./store/appSettings/isLoadingFile/isLoadingFile.actions"
 import { CCAction, State } from "../codeCharta.model"
-import { SearchPanelModeActions } from "./store/appSettings/searchPanelMode/searchPanelMode.actions"
-import { isActionOfType } from "../util/reduxHelper"
-import { SortingOrderAscendingActions } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
-import { SortingOptionActions } from "./store/dynamicSettings/sortingOption/sortingOption.actions"
-import { IsAttributeSideBarVisibleActions } from "./store/appSettings/isAttributeSideBarVisible/isAttributeSideBarVisible.actions"
-import { PanelSelectionActions } from "./store/appSettings/panelSelection/panelSelection.actions"
-import { PresentationModeActions } from "./store/appSettings/isPresentationMode/isPresentationMode.actions"
-import { ExperimentalFeaturesEnabledActions } from "./store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { Store } from "./store/store"
-import { ScreenshotToClipboardEnabledActions } from "./store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
-import { HoveredBuildingPathActions } from "./store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
-import { unfocusAllNodes } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
+import { EffectsModule } from "./angular-redux/effects/effects.module"
 
 export interface StoreSubscriber {
 	onStoreChanged(actionType: string)
@@ -47,29 +35,6 @@ export class StoreService {
 	}
 
 	dispatch(action: CCAction, options: DispatchOptions = { silent: false }) {
-		if (
-			!(
-				isActionOfType(action.type, IsLoadingMapActions) ||
-				isActionOfType(action.type, IsLoadingFileActions) ||
-				isActionOfType(action.type, SortingOrderAscendingActions) ||
-				isActionOfType(action.type, SearchPanelModeActions) ||
-				isActionOfType(action.type, SortingOptionActions) ||
-				isActionOfType(action.type, IsAttributeSideBarVisibleActions) ||
-				isActionOfType(action.type, PanelSelectionActions) ||
-				isActionOfType(action.type, PresentationModeActions) ||
-				isActionOfType(action.type, ExperimentalFeaturesEnabledActions) ||
-				isActionOfType(action.type, ScreenshotToClipboardEnabledActions) ||
-				isActionOfType(action.type, HoveredBuildingPathActions) ||
-				options.silent
-			)
-		) {
-			this.dispatch(setIsLoadingMap(true))
-		}
-
-		if (isActionOfType(action.type, IsLoadingFileActions)) {
-			this.dispatch(unfocusAllNodes())
-		}
-
 		for (const atomicAction of splitStateActions(action)) {
 			this.originalDispatch(atomicAction)
 			if (!options.silent) {
@@ -77,6 +42,8 @@ export class StoreService {
 				this.notifyExtended(atomicAction.type, atomicAction.payload)
 			}
 		}
+
+		EffectsModule.actions$.next(action)
 	}
 
 	getState(): State {

package/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.component.html

@@ -33,7 +33,7 @@
 			ng-change="$ctrl.applyDynamicMargin()"
 			title="Set margin to default (50px)."
 		>
-			Default margin (50px)
+			<span class="default-margin-text">Default margin (50px)</span>
 		</md-checkbox>
 	</md-input-container>
 
@@ -42,3 +42,5 @@
 		tooltip="Reset area metric settings to their defaults"
 	></reset-settings-button-component>
 </div>
+
+<cc-invert-area-option></cc-invert-area-option>

package/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.component.scss

@@ -1,4 +1,4 @@
-area-settings-panel-component {
+cc-area-settings-panel {
 	background: white;
 	border: 1px solid #b5b5b5;
 	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
@@ -16,6 +16,10 @@ area-settings-panel-component {
 	top: 45px;
 	right: 0;
 
+	.md-primary .md-label {
+		padding-top: 3px;
+	}
+
 	md-slider-container {
 		position: relative;
 		.slider-title {
@@ -37,7 +41,7 @@ area-settings-panel-component {
 	}
 }
 
-area-settings-panel-component.hidden {
+cc-area-settings-panel.hidden {
 	max-height: 0;
 	opacity: 0;
 	transition: max-height 200ms ease-in-out, opacity 0ms 200ms;

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

@@ -55,7 +55,7 @@ export class AreaSettingsPanelController implements FilesSelectionSubscriber, Dy
 }
 
 export const areaSettingsPanelComponent = {
-	selector: "areaSettingsPanelComponent",
+	selector: "ccAreaSettingsPanel",
 	template: require("./areaSettingsPanel.component.html"),
 	controller: AreaSettingsPanelController
 }

package/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.module.ts

@@ -1,7 +1,10 @@
 import "../../state/state.module"
 import angular from "angular"
 import { areaSettingsPanelComponent } from "./areaSettingsPanel.component"
+import { downgradeComponent } from "@angular/upgrade/static"
+import { InvertAreaOptionComponent } from "./invertAreaOption/invertAreaOption.component"
 
 angular
 	.module("app.codeCharta.ui.areaSettingsPanel", ["app.codeCharta.state", "app.codeCharta.ui.codeMap"])
 	.component(areaSettingsPanelComponent.selector, areaSettingsPanelComponent)
+	.directive("ccInvertAreaOption", downgradeComponent({ component: InvertAreaOptionComponent }))

package/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.po.ts

@@ -2,21 +2,21 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export const AreaSettingsPanelPageObject = {
 	async toggleDefaultMargin() {
-		await clickButtonOnPageElement("area-settings-panel-component md-checkbox")
+		await clickButtonOnPageElement("cc-area-settings-panel md-checkbox")
 		return this.isDefaultMarginEnabled()
 	},
 
 	async isDefaultMarginEnabled() {
-		return page.$eval("area-settings-panel-component md-checkbox", element => element.className.includes("md-checked"))
+		return page.$eval("cc-area-settings-panel md-checkbox", element => element.className.includes("md-checked"))
 	},
 
 	async toggleMarginBoundingBox() {
-		const marginToggleBoxHandle = await page.$("area-settings-panel-component md-checkbox .md-container")
+		const marginToggleBoxHandle = await page.$("cc-area-settings-panel md-checkbox .md-container")
 		return marginToggleBoxHandle.boundingBox()
 	},
 
 	async resetButtonBoundingBox() {
-		const resetBoxHandle = await page.$("area-settings-panel-component reset-settings-button-component")
+		const resetBoxHandle = await page.$("cc-area-settings-panel reset-settings-button-component")
 		return resetBoxHandle.boundingBox()
 	}
 }

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.html

@@ -0,0 +1 @@
+<mat-checkbox class="invertAreaCheckbox" [checked]="isInvertedArea$ | async" (change)="toggleInvertingArea()">Invert Area</mat-checkbox>

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.scss

@@ -0,0 +1,26 @@
+cc-invert-area-option {
+	.mat-checkbox-layout {
+		padding-left: 4px;
+
+		.mat-checkbox-inner-container {
+			margin-right: 15px;
+		}
+	}
+
+	.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+	.mat-checkbox-checked.mat-accent .mat-checkbox-background,
+	.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
+	.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
+		background-color: rgb(0, 150, 136);
+	}
+
+	.mat-checkbox-frame,
+	.mat-checkbox-background,
+	.mat-checkbox-anim-unchecked-checked .mat-checkbox-anim-checked-unchecked {
+		transform: scale(1.1);
+	}
+
+	mat-checkbox.invertAreaCheckbox .mat-checkbox-checkmark-path {
+		stroke: black !important;
+	}
+}

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.spec.ts

@@ -0,0 +1,29 @@
+import { Store } from "../../../state/store/store"
+import { InvertAreaOptionComponent } from "./invertAreaOption.component"
+import { fireEvent, render } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+import { MaterialModule } from "../../../../material/material.module"
+import { invertAreaSelector } from "../../../state/store/appSettings/invertArea/invertArea.selector"
+
+describe("InvertAreaOptionComponent", () => {
+	beforeEach(() => {
+		Store["initialize"]()
+		TestBed.configureTestingModule({
+			imports: [MaterialModule]
+		})
+	})
+
+	it("should toggle inverting the area of buildings on click", async () => {
+		const { container } = await render(InvertAreaOptionComponent)
+		const isInvertedArea = invertAreaSelector(Store.store.getState())
+		const checkbox = container.querySelector("input")
+
+		expect(checkbox.checked).toBeFalsy()
+
+		fireEvent.click(checkbox)
+
+		expect(checkbox.checked).toBeTruthy()
+
+		expect(invertAreaSelector(Store.store.getState())).toBe(!isInvertedArea)
+	})
+})

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.ts

@@ -0,0 +1,24 @@
+import "./invertAreaOption.component.scss"
+import { Component, Inject, OnInit } from "@angular/core"
+import { Store } from "../../../state/angular-redux/store"
+import { invertAreaSelector } from "../../../state/store/appSettings/invertArea/invertArea.selector"
+import { Observable } from "rxjs"
+import { toggleInvertingArea } from "../../../state/store/appSettings/invertArea/invertArea.actions"
+
+@Component({
+	selector: "cc-invert-area-option",
+	template: require("./invertAreaOption.component.html")
+})
+export class InvertAreaOptionComponent implements OnInit {
+	isInvertedArea$: Observable<boolean>
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	ngOnInit(): void {
+		this.isInvertedArea$ = this.store.select(invertAreaSelector)
+	}
+
+	toggleInvertingArea() {
+		this.store.dispatch(toggleInvertingArea())
+	}
+}

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/aggregationType.pipe.spec.ts

@@ -0,0 +1,19 @@
+import { AttributeTypeValue } from "../../../codeCharta.model"
+import { AggregationTypePipePipe } from "./aggregationType.pipe"
+
+describe("aggregationSymbolPipe", () => {
+	it("should map `AttributeTypeValue.relative` to median", () => {
+		const getAttributeTypeOfNodesByMetricSelector = () => AttributeTypeValue.relative
+		expect(new AggregationTypePipePipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("median")
+	})
+
+	it("should map `AttributeTypeValue.absolute` to sum", () => {
+		const getAttributeTypeOfNodesByMetricSelector = () => AttributeTypeValue.absolute
+		expect(new AggregationTypePipePipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("sum")
+	})
+
+	it("should default to sum", () => {
+		const getAttributeTypeOfNodesByMetricSelector = () => "" as AttributeTypeValue
+		expect(new AggregationTypePipePipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("sum")
+	})
+})

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/{aggregationSymbol.pipe.ts → aggregationType.pipe.ts}

@@ -3,16 +3,16 @@ import { Pipe, PipeTransform } from "@angular/core"
 import { AttributeTypeValue } from "../../../codeCharta.model"
 import { GetAttributeTypeOfNodesByMetric } from "../../../state/selectors/getAttributeTypeOfNodesByMetric.selector"
 
-@Pipe({ name: "aggregationSymbolPipe" })
-export class AggregationSymbolPipe implements PipeTransform {
+@Pipe({ name: "aggregationTypePipe" })
+export class AggregationTypePipePipe implements PipeTransform {
 	transform(metricName: string, getAttributeTypeOfNodesByMetricSelector: GetAttributeTypeOfNodesByMetric): string {
 		const type = getAttributeTypeOfNodesByMetricSelector(metricName)
 		switch (type) {
 			case AttributeTypeValue.relative:
-				return "x͂"
+				return "median"
 			case AttributeTypeValue.absolute:
 			default:
-				return "Σ"
+				return "sum"
 		}
 	}
 }

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

@@ -1,12 +1,4 @@
-<div class="small-action-button transparent">
-	<button mat-button [matMenuTriggerFor]="menu" title="Select attribute type" class="menu-button">
-		<span class="symbol">{{ metricName | aggregationSymbolPipe: (getAttributeTypeOfNodesByMetric$ | async) }}</span>
-	</button>
-</div>
-
-<mat-menu #menu>
-	<div class="menu-header" mat-menu-item disabled>Set global aggregation for rloc</div>
-	<mat-divider></mat-divider>
-	<button mat-menu-item (click)="setToAbsolute()">Σ Sum</button>
-	<button mat-menu-item (click)="setToRelative()">x͂ Median</button>
-</mat-menu>
+<mat-button-toggle-group [value]="metricName | aggregationTypePipe: (getAttributeTypeOfNodesByMetric$ | async)">
+	<mat-button-toggle title="Select Sum" (click)="setToAbsolute()" value="sum">Σ</mat-button-toggle>
+	<mat-button-toggle title="Select Median" (click)="setToRelative()" value="median">x͂</mat-button-toggle>
+</mat-button-toggle-group>

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

@@ -1,25 +1,16 @@
 cc-attribute-type-selector {
-	display: inline-block;
-	background-color: white;
-	border-radius: 12px;
-
-	.menu-button {
-		height: 24px;
-		width: 24px;
-		min-width: 0;
-		padding: 0;
-		border-radius: 12px;
-		vertical-align: top;
-		transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+	.mat-button-toggle-group {
+		height: 18px;
+		align-items: center;
+		justify-content: space-evenly;
+	}
 
-		&:hover {
-			background-color: #c8c8c8;
-		}
+	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+		padding: 0 7px 0 7px;
+	}
 
-		.symbol {
-			position: absolute;
-			top: -5px;
-			left: 8px;
-		}
+	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
+	.mat-button-toggle-group-appearance-standard {
+		border: 0.1px solid darkgrey;
 	}
 }

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

@@ -1,5 +1,5 @@
 import { TestBed } from "@angular/core/testing"
-import { render, screen, fireEvent, waitForElementToBeRemoved } from "@testing-library/angular"
+import { render, screen, fireEvent } from "@testing-library/angular"
 
 import { AttributeTypeSelectorModule } from "./attributeTypeSelector.module"
 import { Store } from "../../../state/store/store"
@@ -27,20 +27,12 @@ describe("attributeTypeSelector", () => {
 			excludeComponentDeclaration: true
 		})
 
-		const initialDisplayedElement = await screen.findByText("Σ")
-		expect(initialDisplayedElement).toBeTruthy()
+		const initialDisplayedElement = await screen.getByRole("button", { pressed: true })
+		expect(initialDisplayedElement.textContent).toBe("Σ")
 
-		fireEvent.click(initialDisplayedElement)
-		const medianMenuItem = await screen.findByText("x͂ Median")
-		expect(medianMenuItem).toBeTruthy()
-
-		fireEvent.click(medianMenuItem)
-		await waitForElementToBeRemoved(() => {
-			const medianMenuItem = screen.queryByText("x͂ Median")
-			return medianMenuItem
-		})
-		const updatedDisplayedElement = await screen.findByText("x͂")
-		expect(updatedDisplayedElement).toBeTruthy()
+		fireEvent.click(screen.getByText("x͂"))
+		const medianMenuItem = await screen.getByRole("button", { pressed: true })
+		expect(medianMenuItem.textContent).toBe("x͂")
 	})
 
 	it("should set aggregation symbol to absolute if attributeType is not available", async () => {
@@ -48,6 +40,7 @@ describe("attributeTypeSelector", () => {
 			componentProperties: { metricName: "non-existing" },
 			excludeComponentDeclaration: true
 		})
-		expect(await screen.findByText("Σ")).toBeTruthy()
+		const initialDisplayedElement = await screen.getByRole("button", { pressed: true })
+		expect(initialDisplayedElement.textContent).toBe("Σ")
 	})
 })

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

@@ -3,11 +3,11 @@ import { CommonModule } from "@angular/common"
 
 import { AttributeTypeSelectorComponent } from "./attributeTypeSelector.component"
 import { MaterialModule } from "../../../../material/material.module"
-import { AggregationSymbolPipe } from "./aggregationSymbol.pipe"
+import { AggregationTypePipePipe } from "./aggregationType.pipe"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule],
-	declarations: [AttributeTypeSelectorComponent, AggregationSymbolPipe],
+	declarations: [AttributeTypeSelectorComponent, AggregationTypePipePipe],
 	exports: [AttributeTypeSelectorComponent]
 })
 export class AttributeTypeSelectorModule {}

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

@@ -15,7 +15,6 @@ import { IsLoadingMapActions } from "../../state/store/appSettings/isLoadingMap/
 import { addFile, resetFiles, setDelta, setMultiple, setSingleByName } from "../../state/store/files/files.actions"
 import { addBlacklistItem, BlacklistActions, setBlacklist } from "../../state/store/fileSettings/blacklist/blacklist.actions"
 import { hierarchy } from "d3-hierarchy"
-import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { MetricDataService } from "../../state/store/metricData/metricData.service"
 import { getCCFiles } from "../../model/files/files.helper"
 import { clone } from "../../util/clone"
@@ -29,7 +28,6 @@ describe("codeMapPreRenderService", () => {
 	let codeMapPreRenderService: CodeMapPreRenderService
 	let $rootScope: IRootScopeService
 	let storeService: StoreService
-	let nodeMetricDataService: NodeMetricDataService
 	let codeMapRenderService: CodeMapRenderService
 
 	let fileMeta: FileMeta
@@ -40,7 +38,6 @@ describe("codeMapPreRenderService", () => {
 		rebuildService()
 		withMockedEventMethods($rootScope)
 		withMockedCodeMapRenderService()
-		withMockedMetricService()
 		withUnifiedMapAndFileMeta()
 		storeService.dispatch(setDynamicSettings(STATE.dynamicSettings))
 	})
@@ -50,7 +47,6 @@ describe("codeMapPreRenderService", () => {
 
 		$rootScope = getService<IRootScopeService>("$rootScope")
 		storeService = getService<StoreService>("storeService")
-		nodeMetricDataService = getService<NodeMetricDataService>("nodeMetricDataService")
 		codeMapRenderService = getService<CodeMapRenderService>("codeMapRenderService")
 
 		fileMeta = clone(FILE_STATES[0].file.fileMeta)
@@ -73,7 +69,7 @@ describe("codeMapPreRenderService", () => {
 	}
 
 	function rebuildService() {
-		codeMapPreRenderService = new CodeMapPreRenderService($rootScope, storeService, nodeMetricDataService, codeMapRenderService)
+		codeMapPreRenderService = new CodeMapPreRenderService($rootScope, storeService, codeMapRenderService)
 	}
 
 	function withMockedCodeMapRenderService() {
@@ -81,10 +77,6 @@ describe("codeMapPreRenderService", () => {
 		codeMapRenderService.scaleMap = jest.fn()
 	}
 
-	function withMockedMetricService() {
-		nodeMetricDataService.isMetricAvailable = jest.fn().mockReturnValue(true)
-	}
-
 	function withUnifiedMapAndFileMeta() {
 		codeMapPreRenderService["unifiedMap"] = map
 		codeMapPreRenderService["unifiedFileMeta"] = fileMeta

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

@@ -18,7 +18,6 @@ import { fileStatesAvailable } from "../../model/files/files.helper"
 import { PanelSelectionActions } from "../../state/store/appSettings/panelSelection/panelSelection.actions"
 import { PresentationModeActions } from "../../state/store/appSettings/isPresentationMode/isPresentationMode.actions"
 import { MetricDataService, MetricDataSubscriber } from "../../state/store/metricData/metricData.service"
-import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { ExperimentalFeaturesEnabledActions } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { LayoutAlgorithmService, LayoutAlgorithmSubscriber } from "../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
 import { trackEventUsageData, trackMapMetaData } from "../../util/usageDataTracker"
@@ -31,7 +30,8 @@ import { FocusedNodePathActions } from "../../state/store/dynamicSettings/focuse
 import { ColorRangeFromSubscriber, ColorRangeToSubscriber, RangeSliderController } from "../rangeSlider/rangeSlider.component"
 import { HoveredBuildingPathActions } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { areAllNecessaryRenderDataAvailableSelector } from "../../state/selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector"
+import { RightClickedNodeDataActions } from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export interface CodeMapPreRenderServiceSubscriber {
 	onRenderMapChanged(map: CodeMapNode)
@@ -59,7 +59,6 @@ export class CodeMapPreRenderService
 	constructor(
 		private $rootScope: IRootScopeService,
 		private storeService: StoreService,
-		private nodeMetricDataService: NodeMetricDataService,
 		private codeMapRenderService: CodeMapRenderService
 	) {
 		"ngInject"
@@ -89,13 +88,7 @@ export class CodeMapPreRenderService
 	}
 
 	onStoreChanged(actionType: string) {
-		if (isActionOfType(actionType, HoveredBuildingPathActions)) {
-			// temporary hack:
-			// this.debounceRendering() leads to a new MapMesh, which leads to a new render, which would revert hover
-			// TODO We definitely need to improve this
-			return
-		}
-
+		// TODO: Get rid of this if else block. Why do we sometimes call this.debounceRendering() and sometimes this.codeMapRenderService.update()?
 		if (
 			this.allNecessaryRenderDataAvailable() &&
 			!isActionOfType(actionType, ScalingActions) &&
@@ -107,7 +100,9 @@ export class CodeMapPreRenderService
 			!isActionOfType(actionType, IsAttributeSideBarVisibleActions) &&
 			!isActionOfType(actionType, PanelSelectionActions) &&
 			!isActionOfType(actionType, PresentationModeActions) &&
-			!isActionOfType(actionType, ExperimentalFeaturesEnabledActions)
+			!isActionOfType(actionType, ExperimentalFeaturesEnabledActions) &&
+			!isActionOfType(actionType, HoveredBuildingPathActions) &&
+			!isActionOfType(actionType, RightClickedNodeDataActions)
 		) {
 			this.debounceRendering()
 			this.debounceTracking(actionType)
@@ -175,30 +170,12 @@ export class CodeMapPreRenderService
 	}
 
 	private allNecessaryRenderDataAvailable() {
-		return (
-			nodeMetricDataSelector(this.storeService.getState()) !== null &&
-			fileStatesAvailable(this.storeService.getState().files) &&
-			this.areChosenMetricsInMetricData() &&
-			Object.values(this.storeService.getState().dynamicSettings).every(x => {
-				return x !== null && Object.values(x).every(v => v !== null)
-			})
-		)
-	}
-
-	private areChosenMetricsInMetricData() {
-		const { dynamicSettings } = this.storeService.getState()
-		return (
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.areaMetric) &&
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.colorMetric) &&
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.heightMetric)
-		)
+		return areAllNecessaryRenderDataAvailableSelector(this.storeService.getState())
 	}
 
 	private removeLoadingGifs() {
-		if (this.storeService.getState().appSettings.isLoadingFile) {
-			this.storeService.dispatch(setIsLoadingFile(false))
-		}
-		this.storeService.dispatch(setIsLoadingMap(false))
+		if (this.storeService.getState().appSettings.isLoadingFile) this.storeService.dispatch(setIsLoadingFile(false))
+		if (this.storeService.getState().appSettings.isLoadingMap) this.storeService.dispatch(setIsLoadingMap(false))
 	}
 
 	private showLoadingMapGif() {

package/app/codeCharta/ui/dialogs/dialogs.ts

@@ -0,0 +1,3 @@
+import { ErrorDialogComponent } from "./errorDialog/errorDialog.component"
+
+export const dialogs = [ErrorDialogComponent]

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.html

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+
+<div mat-dialog-content>{{ data.message }}</div>
+
+<div mat-dialog-actions align="end">
+	<button mat-button mat-dialog-close>OK</button>
+</div>

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.ts

@@ -0,0 +1,9 @@
+import { Component, Inject } from "@angular/core"
+import { MAT_DIALOG_DATA } from "@angular/material/dialog"
+
+@Component({
+	template: require("./errorDialog.component.html")
+})
+export class ErrorDialogComponent {
+	constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}
+}

package/app/codeCharta/ui/mapTreeView/mapTreeView.level.e2e.ts

@@ -1,7 +1,7 @@
 import { goto } from "../../../puppeteer.helper"
 import { MapTreeViewLevelPageObject } from "./mapTreeView.level.po"
 import { SearchPanelModeSelectorPageObject } from "../searchPanelModeSelector/searchPanelModeSelector.po"
-import { NodeContextMenuPageObject } from "../nodeContextMenu/nodeContextMenu.po"
+import { NodeContextMenuPageObject } from "../../state/effects/nodeContextMenu/nodeContextMenu.po"
 
 describe("MapTreeViewLevel", () => {
 	let mapTreeViewLevel: MapTreeViewLevelPageObject

package/app/codeCharta/ui/mapTreeView/mapTreeView.level.po.ts

@@ -3,7 +3,7 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 export class MapTreeViewLevelPageObject {
 	async openContextMenu(path: string) {
 		await clickButtonOnPageElement(`[id='${path}']`, { button: "right" })
-		await page.waitForSelector("node-context-menu-component", { visible: true })
+		await page.waitForSelector("#codemap-context-menu", { visible: true })
 		await page.waitForSelector(".tree-element-label.marked")
 	}
 

package/app/codeCharta/ui/ribbonBar/ribbonBar.component.html

@@ -45,11 +45,11 @@
 			>Area Metric Options <i class="fa fa-angle-down"></i
 		></span>
 	</div>
-	<area-settings-panel-component
+	<cc-area-settings-panel
 		ng-class="{
 			hidden: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.AREA_PANEL_OPEN
 		}"
-	></area-settings-panel-component>
+	></cc-area-settings-panel>
 </md-card>
 
 <md-card