codecharta-visualization 1.86.0 → 1.89.0

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

@@ -0,0 +1,30 @@
+import "./markFolderRow.component.scss"
+import { Component, Inject } from "@angular/core"
+import { Store } from "../../../angular-redux/store"
+import { markPackages, unmarkPackage } from "../../../store/fileSettings/markedPackages/markedPackages.actions"
+import { Observable } from "rxjs"
+import { MarkFolderItem, markFolderItemsSelector } from "./selectors/markFolderItems.selector"
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
+
+@Component({
+	selector: "cc-mark-folder-row",
+	template: require("./markFolderRow.component.html")
+})
+export class MarkFolderRowComponent {
+	markFolderItems$: Observable<MarkFolderItem[]>
+	codeMapNode$: Observable<CodeMapNode>
+
+	constructor(@Inject(Store) private store: Store) {
+		this.markFolderItems$ = store.select(markFolderItemsSelector)
+		this.codeMapNode$ = store.select(rightClickedCodeMapNodeSelector)
+	}
+
+	markFolder(path: string, color: string) {
+		this.store.dispatch(markPackages([{ path, color }]))
+	}
+
+	unmarkFolder(path: string) {
+		this.store.dispatch(unmarkPackage({ path }))
+	}
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { ColorPickerModule } from "../../../../ui/colorPicker/colorPicker.module"
+import { MarkFolderRowComponent } from "./markFolderRow.component"
+
+@NgModule({
+	imports: [CommonModule, ColorPickerModule],
+	declarations: [MarkFolderRowComponent],
+	exports: [MarkFolderRowComponent]
+})
+export class MarkFolderRowModule {}

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/selectors/markFolderItems.selector.spec.ts

@@ -0,0 +1,17 @@
+import { _getMarkFolderItems } from "./markFolderItems.selector"
+
+describe("markFolderItemsSelector's _getMarkFolderItems", () => {
+	it("should return all colors as unmarked if no node is given", () => {
+		expect(_getMarkFolderItems(null, ["#000000", "#ffffff"], [])).toEqual([
+			{ color: "#000000", isMarked: false },
+			{ color: "#ffffff", isMarked: false }
+		])
+	})
+
+	it("should recognized a marked folder", () => {
+		expect(_getMarkFolderItems({ path: "/root" }, ["#000000", "#ffffff"], [{ color: "#000000", path: "/root" }])).toEqual([
+			{ color: "#000000", isMarked: true },
+			{ color: "#ffffff", isMarked: false }
+		])
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/selectors/markFolderItems.selector.ts

@@ -0,0 +1,29 @@
+import { MarkedPackage } from "../../../../../codeCharta.model"
+import { createSelector } from "../../../../angular-redux/createSelector"
+import { mapColorsSelector } from "../../../../store/appSettings/mapColors/mapColors.selector"
+import { markedPackagesSelector } from "../../../../store/fileSettings/markedPackages/markedPackages.selector"
+import { findIndexOfMarkedPackageOrParent } from "../../../../store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent"
+import { CcState } from "../../../../store/store"
+import { rightClickedCodeMapNodeSelector } from "../../rightClickedCodeMapNode.selector"
+
+export type MarkFolderItem = {
+	color: string
+	isMarked: boolean
+}
+
+const markingColorsSelector = createSelector([mapColorsSelector], mapColors => mapColors.markingColors)
+
+export const _getMarkFolderItems = (node: { path?: string } | null, markingColors: string[], markedPackages: MarkedPackage[]) => {
+	if (node === null) return markingColors.map(color => ({ color, isMarked: false }))
+
+	const nodeIndexWithinMarkedPackages = findIndexOfMarkedPackageOrParent(markedPackages, node.path)
+	return markingColors.map(color => ({
+		color,
+		isMarked: nodeIndexWithinMarkedPackages !== -1 && color === markedPackages[nodeIndexWithinMarkedPackages].color
+	}))
+}
+
+export const markFolderItemsSelector: (state: CcState) => MarkFolderItem[] = createSelector(
+	[rightClickedCodeMapNodeSelector, markingColorsSelector, markedPackagesSelector],
+	_getMarkFolderItems
+)

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/nodeContextMenu.e2e.ts

@@ -1,36 +1,24 @@
-import { goto } from "../../../puppeteer.helper"
+import { goto } from "../../../../puppeteer.helper"
 import { NodeContextMenuPageObject } from "./nodeContextMenu.po"
-import { SearchPanelModeSelectorPageObject } from "../searchPanelModeSelector/searchPanelModeSelector.po"
-import { MapTreeViewLevelPageObject } from "../mapTreeView/mapTreeView.level.po"
-import { CodeMapPageObject } from "../codeMap/codeMap.po"
-import { ERROR_MESSAGES } from "../../util/fileValidator"
-import { DialogErrorPageObject } from "../dialog/dialog.error.po"
+import { SearchPanelModeSelectorPageObject } from "../../../ui/searchPanelModeSelector/searchPanelModeSelector.po"
+import { MapTreeViewLevelPageObject } from "../../../ui/mapTreeView/mapTreeView.level.po"
+import { CodeMapPageObject } from "../../../ui/codeMap/codeMap.po"
 
 describe("NodeContextMenu", () => {
 	let contextMenu: NodeContextMenuPageObject
 	let searchPanelModeSelector: SearchPanelModeSelectorPageObject
 	let mapTreeViewLevel: MapTreeViewLevelPageObject
 	let codeMap: CodeMapPageObject
-	let dialogError: DialogErrorPageObject
 
 	beforeEach(async () => {
 		contextMenu = new NodeContextMenuPageObject()
 		searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
 		mapTreeViewLevel = new MapTreeViewLevelPageObject()
 		codeMap = new CodeMapPageObject()
-		dialogError = new DialogErrorPageObject()
 
 		await goto()
 	})
 
-	it("should show error message when user excludes all files", async () => {
-		await searchPanelModeSelector.toggleTreeView()
-		await mapTreeViewLevel.openContextMenu("/root")
-		await contextMenu.clickOnExclude()
-
-		expect(await dialogError.getMessage()).toEqual(`${ERROR_MESSAGES.blacklistError}`)
-	})
-
 	it("right clicking a folder should open a context menu with color options", async () => {
 		await searchPanelModeSelector.toggleTreeView()
 		await mapTreeViewLevel.openContextMenu("/root")

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/nodeContextMenu.po.ts

@@ -1,4 +1,4 @@
-import { clickButtonOnPageElement } from "../../../puppeteer.helper"
+import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
 
 export class NodeContextMenuPageObject {
 	async hasColorButtons() {

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

@@ -0,0 +1,78 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { fireEvent } from "@testing-library/angular"
+import { MaterialModule } from "../../../../material/material.module"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import { NodeContextMenuCardModule } from "./nodeContextMenuCard/nodeContextMenuCard.module"
+import { OpenNodeContextMenuEffect } from "./openNodeContextMenu.effect"
+
+describe("nodeContextMenuService", () => {
+	let mockedWheelTargetElement
+
+	beforeEach(async () => {
+		mockedWheelTargetElement = { addEventListener: jest.fn(), removeEventListener: jest.fn() }
+		// @ts-ignore
+		jest.spyOn(document, "getElementById").mockImplementation(() => mockedWheelTargetElement)
+
+		TestBed.configureTestingModule({
+			imports: [MaterialModule, EffectsModule.forRoot([OpenNodeContextMenuEffect]), NodeContextMenuCardModule],
+			providers: [NodeContextMenuService]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	it("should close on document click", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		document.dispatchEvent(new MouseEvent("click"))
+
+		expect(closeSpy).toHaveBeenCalled()
+	})
+
+	it("should not close when clicking within (its) color picker", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		const mockedMouseEvent = { composedPath: () => [{ nodeName: "COLOR-CHROME" }] } as unknown as MouseEvent
+		nodeContextMenu["onLeftClickHideNodeContextMenu"](mockedMouseEvent)
+
+		expect(closeSpy).not.toHaveBeenCalled()
+	})
+
+	it("should not close when opening its color picker", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		const mockedMouseEvent = { composedPath: () => [{ nodeName: "CC-COLOR-PICKER" }] } as unknown as MouseEvent
+		nodeContextMenu["onLeftClickHideNodeContextMenu"](mockedMouseEvent)
+
+		expect(closeSpy).not.toHaveBeenCalled()
+	})
+
+	it("should remove all listeners when closing", () => {
+		const documentRemoveEventListenerSpy = jest.spyOn(document, "removeEventListener")
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+
+		nodeContextMenu.close()
+
+		expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith("click", nodeContextMenu["onLeftClickHideNodeContextMenu"], true)
+		expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith("mousedown", nodeContextMenu["onRightClickHideNodeContextMenu"], true)
+		expect(mockedWheelTargetElement.removeEventListener).toHaveBeenCalledWith("wheel", nodeContextMenu.close, true)
+	})
+
+	it("should prevent default browser context menu to open", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		nodeContextMenu.open(10, 10)
+		let wasDefaultContextMenuPrevented
+		document.addEventListener("contextmenu", event => {
+			wasDefaultContextMenuPrevented = event.defaultPrevented
+		})
+		fireEvent.contextMenu(nodeContextMenu["overlayReference"].overlayElement)
+		expect(wasDefaultContextMenuPrevented).toBe(true)
+	})
+})

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

@@ -0,0 +1,72 @@
+import { Overlay, OverlayRef } from "@angular/cdk/overlay"
+import { ComponentPortal } from "@angular/cdk/portal"
+import { Inject, Injectable } from "@angular/core"
+import { Store } from "../../angular-redux/store"
+import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextMenuCard.component"
+
+@Injectable({ providedIn: "root" })
+export class NodeContextMenuService {
+	private overlayReference: OverlayRef | null = null
+
+	constructor(@Inject(Overlay) private overlay: Overlay, @Inject(Store) private store: Store) {}
+
+	open(x: number, y: number) {
+		const positionStrategy = this.overlay
+			.position()
+			.flexibleConnectedTo({ x, y })
+			.withPositions([
+				{
+					originX: "end",
+					originY: "bottom",
+					overlayX: "start",
+					overlayY: "top"
+				}
+			])
+
+		this.overlayReference = this.overlay.create({
+			positionStrategy,
+			scrollStrategy: this.overlay.scrollStrategies.close()
+		})
+
+		this.overlayReference.attach(new ComponentPortal(NodeContextMenuCardComponent))
+
+		this.overlayReference.overlayElement.addEventListener("contextmenu", event => {
+			event.preventDefault()
+		})
+
+		document.addEventListener("click", this.onLeftClickHideNodeContextMenu, false)
+		document.addEventListener("mousedown", this.onRightClickHideNodeContextMenu, true)
+		document.getElementById("codeMap").addEventListener("wheel", this.close, true)
+	}
+
+	close = () => {
+		document.removeEventListener("click", this.onLeftClickHideNodeContextMenu, true)
+		document.removeEventListener("mousedown", this.onRightClickHideNodeContextMenu, true)
+		document.getElementById("codeMap").removeEventListener("wheel", this.close, true)
+
+		this.store.dispatch(setRightClickedNodeData(null))
+
+		if (this.overlayReference) {
+			this.overlayReference.dispose()
+			this.overlayReference = null
+		}
+	}
+
+	private onLeftClickHideNodeContextMenu = (mouseEvent: MouseEvent) => {
+		if (this.isEventFromColorPicker(mouseEvent)) return
+
+		this.close()
+	}
+
+	private onRightClickHideNodeContextMenu = event => {
+		if (event.button !== 2) return
+		// Close on right click down, to close before the map gets potential moved by right clicked
+		this.close()
+	}
+
+	private isEventFromColorPicker(mouseEvent: MouseEvent) {
+		const elements = mouseEvent.composedPath() as Node[]
+		return elements.some(element => element?.nodeName === "CC-COLOR-PICKER" || element?.nodeName === "COLOR-CHROME")
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/lastPartOfNodePath.pipe.spec.ts

@@ -0,0 +1,11 @@
+import { LastPartOfNodePathPipe } from "./lastPartOfNodePath.pipe"
+
+describe("lastPartOfNodePathPipe", () => {
+	it("should shorten children with '...'-prefix", () => {
+		expect(new LastPartOfNodePathPipe().transform("/root/child.ts")).toBe(".../child.ts")
+	})
+
+	it("should not shorten a top level entry", () => {
+		expect(new LastPartOfNodePathPipe().transform("/root")).toBe("/root")
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/lastPartOfNodePath.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+@Pipe({ name: "lastPartOfNodePath" })
+export class LastPartOfNodePathPipe implements PipeTransform {
+	transform(path: string) {
+		return `${path.lastIndexOf("/") === 0 ? "" : "..."}${path.slice(path.lastIndexOf("/"))}`
+	}
+}

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

@@ -0,0 +1,17 @@
+<mat-card 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>
+	</div>
+
+	<div class="button-group">
+		<button mat-button disabled="true" title="{{ codeMapNode.path }}">
+			{{ codeMapNode.path | lastPartOfNodePath }}
+		</button>
+
+		<cc-focus-buttons [codeMapNode]="codeMapNode"></cc-focus-buttons>
+		<cc-flatten-buttons [codeMapNode]="codeMapNode"></cc-flatten-buttons>
+		<cc-highlight-buttons [codeMapNode]="codeMapNode"></cc-highlight-buttons>
+		<cc-exclude-button [codeMapNode]="codeMapNode"></cc-exclude-button>
+	</div>
+</mat-card>

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

@@ -0,0 +1,34 @@
+#codemap-context-menu {
+	padding: 2px;
+
+	.button-group {
+		display: inline-grid;
+		width: 100%;
+	}
+
+	.png-icon {
+		width: 17px;
+		height: 17px;
+		margin: 5px auto auto;
+		padding: 0;
+		display: inline-block;
+		background-repeat: no-repeat no-repeat;
+		pointer-events: none;
+	}
+
+	[mat-button] {
+		width: 100%;
+		text-align: left;
+		margin-top: 0;
+		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

@@ -0,0 +1,49 @@
+import { TestBed } from "@angular/core/testing"
+import { render, screen } from "@testing-library/angular"
+import { mocked } from "ts-jest/utils"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { VALID_FILE_NODE_WITH_ID, VALID_NODE_WITH_PATH } from "../../../../util/dataMocks"
+import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard.component"
+import { NodeContextMenuCardModule } from "./nodeContextMenuCard.module"
+
+jest.mock("../rightClickedCodeMapNode.selector", () => ({
+	rightClickedCodeMapNodeSelector: jest.fn()
+}))
+const mockedRightClickedCodeMapNodeSelector = mocked(rightClickedCodeMapNodeSelector)
+
+describe("NodeContextMenuCardComponent", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [NodeContextMenuCardModule],
+			providers: [
+				{
+					provide: ThreeSceneServiceToken,
+					useValue: {
+						addNodeAndChildrenToConstantHighlight: jest.fn(),
+						removeNodeAndChildrenFromConstantHighlight: jest.fn(),
+						getConstantHighlight: jest.fn()
+					}
+				}
+			]
+		})
+	})
+
+	it("should not display mark folder option if node is a leaf", async () => {
+		mockedRightClickedCodeMapNodeSelector.mockImplementation(() => VALID_FILE_NODE_WITH_ID)
+		await render(NodeContextMenuCardComponent, { excludeComponentDeclaration: true })
+		expect(screen.queryByTitle("Colorize folder")).toBe(null)
+	})
+
+	it("should display all information", async () => {
+		mockedRightClickedCodeMapNodeSelector.mockImplementation(() => VALID_NODE_WITH_PATH)
+		await render(NodeContextMenuCardComponent, { excludeComponentDeclaration: true })
+
+		expect(screen.queryByText("/root")).not.toBe(null)
+		expect(screen.queryByText("FOCUS")).not.toBe(null)
+		expect(screen.queryByText("FLATTEN")).not.toBe(null)
+		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)
+		expect(screen.queryByText("EXCLUDE")).not.toBe(null)
+		expect(screen.queryAllByTitle("Colorize folder").length).toBe(5)
+	})
+})

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

@@ -0,0 +1,19 @@
+import "./nodeContextMenuCard.component.scss"
+import { Component, Inject, OnInit } 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")
+})
+export class NodeContextMenuCardComponent implements OnInit {
+	codeMapNode$: Observable<CodeMapNode>
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	ngOnInit(): void {
+		this.codeMapNode$ = this.store.select(rightClickedCodeMapNodeSelector)
+	}
+}

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

@@ -0,0 +1,18 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { ExcludeButtonComponent } from "../excludeButton/excludeButton.component"
+import { FlattenButtonsModule } from "../flattenButtons/flattenButtons.module"
+import { FocusButtonsModule } from "../focusButtons/focusButtons.module"
+import { HighlightButtonsModule } from "../highlightButtons/highlightButtons.module"
+import { MarkFolderRowModule } from "../markFolderRow/markFolderRow.module"
+import { LastPartOfNodePathPipe } from "./lastPartOfNodePath.pipe"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule, FlattenButtonsModule, FocusButtonsModule, HighlightButtonsModule, MarkFolderRowModule],
+	declarations: [NodeContextMenuCardComponent, LastPartOfNodePathPipe, ExcludeButtonComponent],
+	exports: [NodeContextMenuCardComponent],
+	entryComponents: [NodeContextMenuCardComponent]
+})
+export class NodeContextMenuCardModule {}

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

@@ -0,0 +1,32 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { Action } from "redux"
+import { Subject } from "rxjs"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import { OpenNodeContextMenuEffect } from "./openNodeContextMenu.effect"
+
+describe("OpenNodeContextMenuEffect", () => {
+	let openSpy
+	beforeEach(async () => {
+		openSpy = jest.fn()
+		EffectsModule.actions$ = new Subject<Action>()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([OpenNodeContextMenuEffect])],
+			providers: [{ provide: NodeContextMenuService, useValue: { open: openSpy } }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	it("should ignore empty rightClickedNodeData", () => {
+		EffectsModule.actions$.next(setRightClickedNodeData(null))
+		expect(openSpy).not.toHaveBeenCalled()
+	})
+
+	it("should open node context menu", () => {
+		EffectsModule.actions$.next(setRightClickedNodeData({ nodeId: 1, xPositionOfRightClickEvent: 2, yPositionOfRightClickEvent: 3 }))
+		expect(openSpy).toHaveBeenCalledTimes(1)
+		expect(openSpy).toHaveBeenCalledWith(2, 3)
+	})
+})

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

@@ -0,0 +1,33 @@
+import { Inject, Injectable } from "@angular/core"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { Actions, ActionsToken } from "../../angular-redux/effects/effects.module"
+import { ofType } from "../../angular-redux/ofType"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import {
+	RightClickedNodeDataActions,
+	SetRightClickedNodeDataAction
+} from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { tap } from "rxjs"
+
+@Injectable()
+export class OpenNodeContextMenuEffect {
+	constructor(
+		@Inject(ActionsToken) private actions$: Actions,
+		@Inject(NodeContextMenuService) private nodeContextMenu: NodeContextMenuService
+	) {}
+
+	openNodeContextMenu$ = createEffect(
+		() =>
+			this.actions$.pipe(
+				ofType<SetRightClickedNodeDataAction>(RightClickedNodeDataActions.SET_RIGHT_CLICKED_NODE_DATA),
+				tap(rightClickedNodeData => {
+					if (rightClickedNodeData.payload)
+						this.nodeContextMenu.open(
+							rightClickedNodeData.payload.xPositionOfRightClickEvent,
+							rightClickedNodeData.payload.yPositionOfRightClickEvent
+						)
+				})
+			),
+		{ dispatch: false }
+	)
+}

package/app/codeCharta/state/effects/nodeContextMenu/rightClickedCodeMapNode.selector.ts

@@ -0,0 +1,8 @@
+import { createSelector } from "../../angular-redux/createSelector"
+import { rightClickedNodeDataSelector } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
+import { idToNodeSelector } from "../../store/lookUp/idToNode/idToNode.selector"
+
+export const rightClickedCodeMapNodeSelector = createSelector(
+	[rightClickedNodeDataSelector, idToNodeSelector],
+	(rightClickedNodeData, idToNode) => (rightClickedNodeData ? idToNode.get(rightClickedNodeData.nodeId) : null)
+)

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

@@ -0,0 +1,47 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { Action } from "redux"
+import { Subject } from "rxjs"
+import { mocked } from "ts-jest/utils"
+
+import { EffectsModule } from "../angular-redux/effects/effects.module"
+import { setIsLoadingFile } from "../store/appSettings/isLoadingFile/isLoadingFile.actions"
+import { unfocusAllNodes } from "../store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
+import { Store } from "../store/store"
+import { UnfocusNodesOnLoadingMapEffect } from "./unfocusNodesOnLoadingMap.effect"
+
+jest.mock("../store/store", () => ({
+	Store: {}
+}))
+const MockedStore = mocked(Store)
+
+describe("UnfocusNodesOnLoadingMapEffect", () => {
+	beforeEach(async () => {
+		MockedStore.dispatch = jest.fn()
+
+		EffectsModule.actions$ = new Subject<Action>()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([UnfocusNodesOnLoadingMapEffect])]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		EffectsModule.actions$.complete()
+	})
+
+	it("should ignore a not relevant action", () => {
+		EffectsModule.actions$.next({ type: "whatever" })
+		expect(MockedStore.dispatch).not.toHaveBeenCalled()
+	})
+
+	it("should fire an unfocusAllNodes action after setIsLoadingFile to true", () => {
+		EffectsModule.actions$.next(setIsLoadingFile(true))
+		expect(MockedStore.dispatch).toHaveBeenCalledWith(unfocusAllNodes())
+	})
+
+	it("should ignore setIsLoadingFile to false", () => {
+		EffectsModule.actions$.next(setIsLoadingFile(false))
+		expect(MockedStore.dispatch).not.toHaveBeenCalled()
+	})
+})

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

@@ -0,0 +1,18 @@
+import { Inject } from "@angular/core"
+import { filter, map } from "rxjs"
+import { isAction } from "../../util/reduxHelper"
+import { createEffect } from "../angular-redux/effects/createEffect"
+import { Actions, ActionsToken } from "../angular-redux/effects/effects.module"
+import { IsLoadingFileActions, SetIsLoadingFileAction } from "../store/appSettings/isLoadingFile/isLoadingFile.actions"
+import { unfocusAllNodes } from "../store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
+
+export class UnfocusNodesOnLoadingMapEffect {
+	constructor(@Inject(ActionsToken) private actions$: Actions) {}
+
+	unfocusNodesOnLoadingMap$ = createEffect(() => {
+		return this.actions$.pipe(
+			filter(action => isAction<SetIsLoadingFileAction>(action, IsLoadingFileActions.SET_IS_LOADING_FILE) && action.payload === true),
+			map(() => unfocusAllNodes())
+		)
+	})
+}

package/app/codeCharta/state/selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector.ts

@@ -0,0 +1,30 @@
+import { fileStatesAvailable } from "../../../model/files/files.helper"
+import { createSelector } from "../../angular-redux/createSelector"
+import { areaMetricSelector } from "../../store/dynamicSettings/areaMetric/areaMetric.selector"
+import { colorMetricSelector } from "../../store/dynamicSettings/colorMetric/colorMetric.selector"
+import { dynamicSettingsSelector } from "../../store/dynamicSettings/dynamicSettings.selector"
+import { heightMetricSelector } from "../../store/dynamicSettings/heightMetric/heightMetric.selector"
+import { filesSelector } from "../../store/files/files.selector"
+import { nodeMetricDataSelector } from "../accumulatedData/metricData/nodeMetricData.selector"
+import { areDynamicSettingsAvailable } from "./utils/areDynamicSettingsAvailable"
+import { areMetricsAvailable } from "./utils/areMetricsAvailable"
+
+const areFileStatesAvailableSelector = createSelector([filesSelector], files => fileStatesAvailable(files))
+
+const areChosenMetricsAvailableSelector = createSelector(
+	[nodeMetricDataSelector, areaMetricSelector, colorMetricSelector, heightMetricSelector],
+	(nodeMetricData, areaMetric, colorMetric, heightMetric) => areMetricsAvailable(nodeMetricData, [areaMetric, colorMetric, heightMetric])
+)
+
+const areDynamicSettingsAvailableSelector = createSelector([dynamicSettingsSelector], dynamicSettings =>
+	areDynamicSettingsAvailable(dynamicSettings)
+)
+
+export const areAllNecessaryRenderDataAvailableSelector = createSelector(
+	[nodeMetricDataSelector, areFileStatesAvailableSelector, areChosenMetricsAvailableSelector, areDynamicSettingsAvailableSelector],
+	(nodeMetricData, areFileStatesAvailable, areChosenMetricsAvailable, areDynamicSettingsAvailable) => {
+		if (nodeMetricData === null || !areFileStatesAvailable || !areChosenMetricsAvailable || !areDynamicSettingsAvailable) return false
+
+		return true
+	}
+)