codecharta-visualization 1.86.0 → 1.89.0

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

@@ -1,22 +1,16 @@
 import "./filePanel.component.scss"
 import { IRootScopeService } from "angular"
 import { StoreService } from "../../state/store.service"
-import { removeFile, setDeltaByNames, setMultipleByNames, setSingleByName } from "../../state/store/files/files.actions"
+import { removeFile, setDeltaByNames, setMultipleByNames } from "../../state/store/files/files.actions"
 import { FilesSelectionSubscriber, FilesService } from "../../state/store/files/files.service"
-import {
-	fileStatesAvailable,
-	getFileNameOf,
-	getVisibleFileStates,
-	isDeltaState,
-	isPartialState,
-	isSingleState
-} from "../../model/files/files.helper"
+import { fileStatesAvailable, getFileNameOf, getVisibleFileStates, isDeltaState, isPartialState } from "../../model/files/files.helper"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { CodeChartaService } from "../../codeCharta.service"
 import { removeRecentFile } from "../../state/store/dynamicSettings/recentFiles/recentFiles.actions"
+import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service"
+import { MapColors } from "../../codeCharta.model"
 
 interface SelectedFileNames {
-	single: string
 	delta: {
 		reference: string
 		comparison: string
@@ -24,34 +18,29 @@ interface SelectedFileNames {
 	partial: string[]
 }
 
-export class FilePanelController implements FilesSelectionSubscriber {
+export class FilePanelController implements FilesSelectionSubscriber, MapColorsSubscriber {
 	private lastRenderState: FileSelectionState
 
 	private _viewModel: {
-		isSingleState: boolean
 		isPartialState: boolean
 		isDeltaState: boolean
 		files: FileState[]
 		renderState: FileSelectionState
 		selectedFileNames: SelectedFileNames
-		pictogramFirstFileColor: string
 		pictogramUpperColor: string
 		pictogramLowerColor: string
 	} = {
-		isSingleState: null,
 		isPartialState: null,
 		isDeltaState: null,
 		files: null,
 		renderState: null,
 		selectedFileNames: {
-			single: null,
 			delta: {
 				reference: null,
 				comparison: null
 			},
 			partial: []
 		},
-		pictogramFirstFileColor: null,
 		pictogramUpperColor: null,
 		pictogramLowerColor: null
 	}
@@ -59,41 +48,25 @@ export class FilePanelController implements FilesSelectionSubscriber {
 	constructor(private $rootScope: IRootScopeService, private storeService: StoreService) {
 		"ngInject"
 		FilesService.subscribe(this.$rootScope, this)
+		MapColorsService.subscribe(this.$rootScope, this)
 	}
 
-	onRemoveFile(filename, state, $event): void {
+	onMapColorsChanged(mapColors: MapColors) {
+		this._viewModel.pictogramUpperColor = mapColors.positiveDelta
+		this._viewModel.pictogramLowerColor = mapColors.negativeDelta
+	}
+
+	onRemoveFile(filename, $event): void {
 		this.storeService.dispatch(removeFile(filename))
 		this.storeService.dispatch(removeRecentFile(filename))
 
 		const files = this.storeService.getState().files
-		if (state === FileSelectionState.Single) {
-			this.singleStateFileRemove(files)
-		} else {
-			this.partialStateFileRemove(files)
-		}
+		this.partialStateFileRemove(files)
 
 		$event.stopPropagation()
 		$event.preventDefault()
 	}
 
-	singleStateFileRemove(files: FileState[]) {
-		if (!isSingleState(files)) {
-			this.selectRemainingFile(files)
-		} else {
-			this.keepSelection()
-		}
-	}
-
-	private keepSelection() {
-		const selectedFile = this.storeService.getState().files.find(fileState => fileState.selectedAs === FileSelectionState.Single)
-		this.onSingleFileChange(getFileNameOf(selectedFile))
-	}
-
-	private selectRemainingFile(files: FileState[]) {
-		const remainingFile = files[files.length - 1]
-		this.onSingleFileChange(getFileNameOf(remainingFile))
-	}
-
 	private partialStateFileRemove(files: FileState[]) {
 		const selectedFiles = files.filter(x => x.selectedAs === FileSelectionState.Partial).map(fileState => getFileNameOf(fileState))
 
@@ -106,31 +79,20 @@ export class FilePanelController implements FilesSelectionSubscriber {
 
 	onFilesSelectionChanged(files: FileState[]) {
 		this._viewModel.files = files
-		this._viewModel.isSingleState = isSingleState(files)
 		this._viewModel.isPartialState = isPartialState(files)
 		this._viewModel.isDeltaState = isDeltaState(files)
-		this.setPictogramColor()
 		this.updateSelectedFileNamesInViewModel()
 		this.lastRenderState = this._viewModel.renderState
 	}
 
-	onPartialSelectionClosed() {
+	onPartialSelectionClosed = () => {
 		this.updateSelectedFileNamesInViewModel()
 	}
 
-	private setPictogramColor() {
-		this._viewModel.pictogramFirstFileColor = "#808080"
-		this._viewModel.pictogramUpperColor = this.storeService.getState().appSettings.mapColors.positiveDelta
-		this._viewModel.pictogramLowerColor = this.storeService.getState().appSettings.mapColors.negativeDelta
-	}
-
 	private updateSelectedFileNamesInViewModel() {
 		const visibleFileStates = getVisibleFileStates(this._viewModel.files)
 
-		if (this._viewModel.isSingleState) {
-			this._viewModel.renderState = FileSelectionState.Single
-			this._viewModel.selectedFileNames.single = visibleFileStates[0].file.fileMeta.fileName
-		} else if (this._viewModel.isDeltaState) {
+		if (this._viewModel.isDeltaState) {
 			this._viewModel.renderState = FileSelectionState.Comparison
 
 			let reference = visibleFileStates[0].file.fileMeta.fileName
@@ -148,26 +110,24 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	onSingleFileChange(singleFileName: string) {
-		this.storeService.dispatch(setSingleByName(singleFileName))
-		const rootName = this._viewModel.files.find(x => x.selectedAs === FileSelectionState.Single).file.map.name
-		CodeChartaService.updateRootData(rootName)
-	}
-
-	onDeltaReferenceFileChange(referenceFileName: string) {
-		const rootName = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName).file.map.name
+	onDeltaReferenceFileChange = (referenceFileName: string) => {
+		const rootFile = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName)
+		if (!rootFile) {
+			return
+		}
+		const rootName = rootFile.file.map.name
 		CodeChartaService.updateRootData(rootName)
 		this.storeService.dispatch(setDeltaByNames(referenceFileName, this._viewModel.selectedFileNames.delta.comparison))
 	}
 
-	onDeltaComparisonFileChange(comparisonFileName: string) {
+	onDeltaComparisonFileChange = (comparisonFileName: string) => {
 		const referenceFileName = this._viewModel.selectedFileNames.delta.reference
 		const rootName = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName).file.map.name
 		CodeChartaService.updateRootData(rootName)
 		this.storeService.dispatch(setDeltaByNames(referenceFileName, comparisonFileName))
 	}
 
-	onPartialFilesChange(partialFileNames: string[]) {
+	onPartialFilesChange = (partialFileNames: string[]) => {
 		if (partialFileNames.length > 0) {
 			this.storeService.dispatch(setMultipleByNames(partialFileNames))
 		} else {
@@ -175,26 +135,17 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	onSingleStateSelected() {
-		this._viewModel.selectedFileNames.single = this.getLastVisibleFileName()
-		this.onSingleFileChange(this._viewModel.selectedFileNames.single)
-	}
-
-	onPartialStateSelected() {
-		this.selectRecentPartialFiles()
-	}
-
-	onDeltaStateSelected() {
+	onDeltaStateSelected = () => {
 		this._viewModel.selectedFileNames.delta.reference = this.getLastVisibleFileName()
 		this.onDeltaComparisonFileChange(null)
 	}
 
-	selectAllPartialFiles() {
+	selectAllPartialFiles = () => {
 		const allFileNames = this._viewModel.files.map(x => x.file.fileMeta.fileName)
 		this.onPartialFilesChange(allFileNames)
 	}
 
-	selectRecentPartialFiles() {
+	selectRecentPartialFiles = () => {
 		const recentFileNames = this.storeService.getState().dynamicSettings.recentFiles
 		if (recentFileNames.length > 0) {
 			this.onPartialFilesChange(recentFileNames)
@@ -203,11 +154,11 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	selectZeroPartialFiles() {
+	selectZeroPartialFiles = () => {
 		this.onPartialFilesChange([])
 	}
 
-	invertPartialFileSelection() {
+	invertPartialFileSelection = () => {
 		const invertedFileNames: string[] = []
 		const partialFileNames = new Set(this._viewModel.selectedFileNames.partial)
 
@@ -225,9 +176,6 @@ export class FilePanelController implements FilesSelectionSubscriber {
 	}
 
 	private getLastVisibleFileName() {
-		if (this.lastRenderState === FileSelectionState.Single) {
-			return this._viewModel.selectedFileNames.single
-		}
 		if (this.lastRenderState === FileSelectionState.Partial) {
 			const visibleFileStates = getVisibleFileStates(this._viewModel.files)
 			if (fileStatesAvailable(this._viewModel.files)) {
@@ -242,7 +190,7 @@ export class FilePanelController implements FilesSelectionSubscriber {
 }
 
 export const filePanelComponent = {
-	selector: "filePanelComponent",
+	selector: "ccFilePanel",
 	template: require("./filePanel.component.html"),
 	controller: FilePanelController
 }

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

@@ -1,6 +1,18 @@
 import angular from "angular"
+
 import "../../state/state.module"
+
 import "../dialog/dialog.module"
+
 import { filePanelComponent } from "./filePanel.component"
+import { downgradeComponent } from "@angular/upgrade/static"
+import { FilePanelFileSelectorComponent } from "./filePanelFileSelector/filePanelFileSelector.component"
+import { FilePanelStateButtonsComponent } from "./filePanelStateButtons/filePanelStateButtons.component"
+import { FilePanelDeltaSelectorComponent } from "./filePanelDeltaSelector/filePanelDeltaSelector.component"
 
-angular.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"]).component(filePanelComponent.selector, filePanelComponent)
+angular
+	.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"])
+	.component(filePanelComponent.selector, filePanelComponent)
+	.directive("ccFilePanelFileSelector", downgradeComponent({ component: FilePanelFileSelectorComponent }))
+	.directive("ccFilePanelStateButtons", downgradeComponent({ component: FilePanelStateButtonsComponent }))
+	.directive("ccFilePanelDeltaSelector", downgradeComponent({ component: FilePanelDeltaSelectorComponent }))

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

@@ -2,32 +2,14 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export class FilePanelPageObject {
 	async getSelectedName() {
-		await page.waitForSelector("file-panel-component md-select .md-text")
-		return page.$eval("file-panel-component md-select .md-text", element => element["innerText"])
-	}
-
-	async getSelectedChangedName(oldName: string) {
-		await page.waitForSelector("file-panel-component md-select .md-text")
-		await this.waitUntilNameChange(oldName)
-		return page.$eval("file-panel-component md-select .md-text", element => element["innerText"])
-	}
-
-	private async waitUntilNameChange(oldName: string) {
-		await page.waitForFunction(
-			names => {
-				return document.querySelector(`file-panel-component md-select .md-text md-truncate`).textContent !== names
-			},
-			{},
-			oldName
-		)
+		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span")
+		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span", element => element["innerText"])
 	}
 
 	async getAllNames() {
-		await clickButtonOnPageElement("file-panel-component md-select")
-		await page.waitForSelector(".md-select-menu-container.md-active > md-select-menu")
-
-		const content = await page.$eval(".md-select-menu-container.md-active > md-select-menu", element => element["innerText"])
-
-		return content.split("\n")
+		await clickButtonOnPageElement("cc-file-panel cc-file-panel-file-selector mat-select")
+		await page.waitForSelector(".mat-select-panel")
+		const content = await page.$$eval(".mat-select-panel .mat-option-text", element => element.map(item => item["innerText"]))
+		return content
 	}
 }

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.html

@@ -0,0 +1,23 @@
+<mat-select
+	class="delta-select"
+	placeholder="select reference file"
+	[(ngModel)]="selectedDeltaReferenceFile"
+	(selectionChange)="handleDeltaReferenceFileChange(selectedDeltaReferenceFile)"
+>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>
+
+<div class="pictogram" [style.background]="'linear-gradient(' + pictogramUpperColor + ' 50%, ' + pictogramLowerColor + ' 50%)'"></div>
+
+<mat-select
+	class="delta-select"
+	placeholder="select comparison file"
+	[(ngModel)]="selectedDeltaComparisonFile"
+	(selectionChange)="handleDeltaComparisonFileChange(selectedDeltaComparisonFile)"
+>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core"
+import { FileState } from "../../../model/files/files"
+
+@Component({
+	selector: "cc-file-panel-delta-selector",
+	template: require("./filePanelDeltaSelector.component.html")
+})
+export class FilePanelDeltaSelectorComponent {
+	@Input() files: FileState[]
+	@Input() pictogramFirstColor: string
+	@Input() pictogramUpperColor: string
+	@Input() pictogramLowerColor: string
+	@Input() handleDeltaReferenceFileChange: (referenceFileName: string) => void
+	@Input() handleDeltaComparisonFileChange: (comparisonFileName: string) => void
+
+	selectedDeltaReferenceFile: string
+	selectedDeltaComparisonFile: string
+}

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -0,0 +1,18 @@
+<mat-select
+	class="standard-select"
+	[(ngModel)]="selectedFileNames"
+	(selectionChange)="handleSelectedFilesChanged(selectedFileNames)"
+	name="recentFiles"
+	[placeholder]="selectedFileNames"
+	multiple
+	(closed)="handleOnSelectionClosed()"
+>
+	<div class="actions">
+		<button mat-button (click)="handleSelectAllPartialFiles()">All</button>
+		<button mat-button (click)="handleSelectZeroPartialFiles()">None</button>
+		<button mat-button (click)="handleInvertSelectedPartialFiles()">Invert</button>
+	</div>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core"
+import { FileState } from "../../../model/files/files"
+
+@Component({
+	selector: "cc-file-panel-file-selector",
+	template: require("./filePanelFileSelector.component.html")
+})
+export class FilePanelFileSelectorComponent {
+	@Input() files: FileState[]
+	@Input() selectedFileNames: string[]
+	@Input() handleSelectedFilesChanged: (selectedFileNames: string[]) => void
+	@Input() handleSelectAllPartialFiles: () => void
+	@Input() handleSelectZeroPartialFiles: () => void
+	@Input() handleInvertSelectedPartialFiles: () => void
+	@Input() handleOnSelectionClosed: () => void
+}

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.html

@@ -0,0 +1,18 @@
+<div class="mode-chooser">
+	<button
+		mat-button
+		class="state-selector-button mode-selector left"
+		(click)="handleStandardButtonClicked()"
+		[class.current]="!isDeltaState"
+	>
+		<span class="text">Standard</span>
+	</button>
+	<button
+		mat-button
+		class="state-selector-button mode-selector right"
+		(click)="handleDeltaButtonClicked()"
+		[class.current]="isDeltaState"
+	>
+		<span class="text">Delta</span>
+	</button>
+</div>

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core"
+
+@Component({
+	selector: "cc-file-panel-state-buttons",
+	template: require("./filePanelStateButtons.component.html")
+})
+export class FilePanelStateButtonsComponent {
+	@Input() isDeltaState: boolean
+	@Input() handleStandardButtonClicked: () => void
+	@Input() handleDeltaButtonClicked: () => void
+}

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

@@ -1,15 +1,23 @@
-<span [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></span>
+<cc-color-picker
+	[hexColor]="hexColor"
+	(onColorChange)="handleColorChange($event)"
+	[openXPosition]="'before'"
+	[triggerTemplate]="colorPickerTriggerTemplate"
+></cc-color-picker>
 
-<div class="cc-labelled-color-picker-container">
-	<div class="cc-color-swatch-container">
-		<span class="cc-color-swatch" [style.background-color]="hexColor"></span>
-		<span #brush [style.color]="hexColor | readableColorForBackground" class="cc-color-brush fa fa-paint-brush"></span>
+<ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">
+	<div class="cc-labelled-color-picker-container">
+		<div class="cc-color-swatch-container">
+			<span class="cc-color-swatch" [style.background-color]="hexColor"></span>
+			<span
+				class="cc-color-brush fa fa-paint-brush"
+				[style.color]="hexColor | readableColorForBackground"
+				[style.opacity]="isHovered || isOpen ? '1' : '0'"
+			>
+			</span>
+		</div>
+		<div>
+			<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
+		</div>
 	</div>
-	<div>
-		<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
-	</div>
-</div>
-
-<mat-menu #menu="matMenu" xPosition="before" [hasBackdrop]="false" class="cc-color-picker-menu">
-	<cc-color-picker [hexColor]="hexColor" (onColorChange)="handleColorChange($event)"></cc-color-picker>
-</mat-menu>
+</ng-template>

package/app/codeCharta/ui/labelledColorPicker/labelledColorPicker.component.spec.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
-import { render, fireEvent, screen, waitForElementToBeRemoved, waitFor } from "@testing-library/angular"
+import { render, fireEvent, screen, waitForElementToBeRemoved } from "@testing-library/angular"
 
 import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
 import { LabelledColorPickerModule } from "./labelledColorPicker.module"
@@ -15,7 +15,7 @@ describe("labelledColorPicker", () => {
 		})
 	})
 
-	it("should let a user change a color within a menu", async () => {
+	it("should display label and handle brush visibility", async () => {
 		const { container } = await render(LabelledColorPickerComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: {
@@ -24,41 +24,28 @@ describe("labelledColorPicker", () => {
 				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
 			}
 		})
+		const colorPickerTrigger = container.querySelector("cc-color-picker")
 
 		expect(container.textContent).toMatch("pretty color")
 
-		fireEvent.click(container)
-		const colorPicker = await waitFor(() => screen.getByRole("colorpicker"))
+		fireEvent.mouseEnter(colorPickerTrigger)
+		expectBrushVisibility(container, true)
+
+		fireEvent.click(colorPickerTrigger)
+		const colorPicker = screen.getByRole("colorpicker")
 		expectBrushVisibility(container, true)
 
 		// @ts-ignore
 		ng.probe(colorPicker).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
 		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
 
-		fireEvent.click(document)
+		fireEvent.mouseLeave(colorPickerTrigger)
+		expectBrushVisibility(container, true) // still true as color picker is still open
 
+		fireEvent.click(document)
 		await waitForElementToBeRemoved(screen.getByRole("colorpicker"))
 		expectBrushVisibility(container, false)
 	})
-
-	it("should add/remove brush on mouseenter/mouseleave", async () => {
-		const { container } = await render(LabelledColorPickerComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				hexColor: "#000000",
-				labels: ["pretty color"],
-				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
-			}
-		})
-
-		expectBrushVisibility(container, false)
-
-		fireEvent.mouseEnter(container)
-		expectBrushVisibility(container, true)
-
-		fireEvent.mouseLeave(container)
-		expectBrushVisibility(container, false)
-	})
 })
 
 function expectBrushVisibility(container: Element, isVisible: boolean) {

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

@@ -1,6 +1,5 @@
 import "./labelledColorPicker.component.scss"
-import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from "@angular/core"
-import { MatMenuTrigger } from "@angular/material/menu"
+import { Component, EventEmitter, Input, Output } from "@angular/core"
 
 @Component({
 	selector: "cc-labelled-color-picker",
@@ -12,44 +11,6 @@ export class LabelledColorPickerComponent {
 
 	@Output() onColorChange = new EventEmitter<string>()
 
-	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
-	@ViewChild("brush") brush: ElementRef
-
-	private isClickInside = false
-
-	@HostListener("mouseenter") onMouseEnter() {
-		this.brush.nativeElement.style.opacity = "1"
-	}
-
-	@HostListener("mouseleave") onMouseLeave() {
-		if (!this.colorPickerMenuTrigger.menuOpen) this.brush.nativeElement.style.opacity = "0"
-	}
-
-	@HostListener("click")
-	onClick() {
-		this.isClickInside = true
-
-		const menuOpenedSubscription = this.colorPickerMenuTrigger.menuOpened.subscribe(() => {
-			this.brush.nativeElement.style.opacity = "1"
-			menuOpenedSubscription.unsubscribe()
-		})
-		const menuClosedSubscription = this.colorPickerMenuTrigger.menuClosed.subscribe(() => {
-			this.brush.nativeElement.style.opacity = "0"
-			menuClosedSubscription.unsubscribe()
-		})
-
-		this.colorPickerMenuTrigger.openMenu()
-	}
-
-	@HostListener("document:click")
-	handleDocumentClick() {
-		if (!this.isClickInside && this.colorPickerMenuTrigger && this.colorPickerMenuTrigger.menuOpen) {
-			this.colorPickerMenuTrigger.closeMenu()
-		}
-
-		this.isClickInside = false
-	}
-
 	handleColorChange(hexColor: string) {
 		this.onColorChange.emit(hexColor)
 	}

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

@@ -1,13 +1,12 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 
-import { MaterialModule } from "../../../material/material.module"
 import { ColorPickerModule } from "../colorPicker/colorPicker.module"
 import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
 import { ReadableColorForBackgroundPipe } from "./readableColorForBackground.pipe"
 
 @NgModule({
-	imports: [CommonModule, ColorPickerModule, MaterialModule],
+	imports: [CommonModule, ColorPickerModule],
 	declarations: [LabelledColorPickerComponent, ReadableColorForBackgroundPipe],
 	exports: [LabelledColorPickerComponent]
 })

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts

@@ -5,7 +5,7 @@ import { KeyValue } from "@angular/common"
 
 import { Store } from "../../../state/angular-redux/store"
 import { legendMarkedPackagesSelector, MarkedPackagesMap } from "./legendMarkedPackages.selector"
-import { calculateMarkedPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
+import { markPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
 
 type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackagesMap[keyof MarkedPackagesMap]>
 
@@ -24,7 +24,7 @@ export class LegendMarkedPackagesComponent {
 
 	handleColorChange(newHexColor: string, paths: string[]) {
 		this.store.dispatch(
-			calculateMarkedPackages(
+			markPackages(
 				paths.map(path => ({
 					color: newHexColor,
 					path

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
@@ -18,10 +18,11 @@ describe("MapTreeViewLevel", () => {
 
 	describe("Blacklist", () => {
 		it("excluding a building should exclude it from the tree-view as well", async () => {
-			const filePath = "/root/ParentLeaf/smallLeaf.html"
+			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
 			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/ParentLeaf")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
 			await mapTreeViewLevel.openContextMenu(filePath)
 			await nodeContextMenu.exclude()
 
@@ -31,12 +32,13 @@ describe("MapTreeViewLevel", () => {
 
 	describe("NodeContextMenu", () => {
 		it("NodeContextMenu path should remain marked when hovering over another mapTreeView Element", async () => {
-			const filePath = "/root/ParentLeaf/smallLeaf.html"
+			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
 			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/ParentLeaf")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
 			await mapTreeViewLevel.openContextMenu(filePath)
-			await mapTreeViewLevel.hoverNode("/root/sample1OnlyLeaf.scss")
+			await mapTreeViewLevel.hoverNode("/root/sample1.cc.json/sample1OnlyLeaf.scss")
 
 			expect(await mapTreeViewLevel.isNodeMarked(filePath)).toBeTruthy()
 		})

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")
 	}