codecharta-visualization 1.86.0 → 1.89.0

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

@@ -69,6 +69,7 @@
 			font-size: 10px;
 			line-height: 48px;
 			vertical-align: top;
+			color: black;
 		}
 
 		.action-button {

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

@@ -13,6 +13,7 @@ import { CustomConfigHelper } from "../../util/customConfigHelper"
 import { setState } from "../../state/store/state.actions"
 import { CustomConfig, ExportCustomConfig } from "../../model/customConfig/customConfig.api.model"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCameraService"
+import { klona } from "klona"
 
 describe("CustomConfigsController", () => {
 	let customConfigsController: CustomConfigsController
@@ -133,12 +134,60 @@ describe("CustomConfigsController", () => {
 
 	describe("removeCustomConfig", () => {
 		it("should call deleteCustomConfig", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(klona(CUSTOM_CONFIG_ITEM_GROUPS))
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
+			CustomConfigHelper.deleteCustomConfig = jest.fn()
+			const configIdToRemove = "SINGLEfileASampleMap View #1"
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
+
+			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+		})
+
+		it("should delete element from customConfigItemGroup in dropDownCustomConfigItemGroups when removing a custom config", () => {
+			const testDropDownConfigItemGroup = [klona(CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBSINGLE"))]
+			const configIdToRemove = "SINGLEfileASampleMap View #1"
+
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testDropDownConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
+			CustomConfigHelper.deleteCustomConfig = jest.fn()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(2)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
+
+			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should delete element from dropDownCustomConfigItemGroups when removing a custom config", () => {
+			const testDropDownConfigItemGroup = [klona(CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple"))]
+			testDropDownConfigItemGroup[0].customConfigItems.pop()
+			const configIdToRemove = "MULTIPLEfileESampleMap View #1"
+
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue([testDropDownConfigItemGroup])
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testDropDownConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
 			CustomConfigHelper.deleteCustomConfig = jest.fn()
 
-			const configIdToRemove = 1
-			customConfigsController.removeCustomConfig(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
 
 			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(0)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(0)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
 		})
 	})
 
@@ -214,4 +263,76 @@ describe("CustomConfigsController", () => {
 			expect(customConfigsController["_viewModel"].hasDownloadableConfigs).toBe(true)
 		})
 	})
+
+	describe("collapse and expand non applicable custom configs", () => {
+		it("should not show configs that are not applicable by default", () => {
+			const testConfigItemGroups = [[...CUSTOM_CONFIG_ITEM_GROUPS][0], [...CUSTOM_CONFIG_ITEM_GROUPS][2]]
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testConfigItemGroups)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(2)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(0)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should show all configs that are applicable by default", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should hide expand button when only applicable custom configs are loaded", () => {
+			const testConfigItemGroup = [CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple")]
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
+		})
+
+		it("should show all custom configs when 'show non-applicable CustomConfigs' button is clicked", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.toggleNonApplicableItems()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(3)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should hide all configs that are not applicable when 'show non-applicable CustomConfigs' button is clicked", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.toggleNonApplicableItems()
+			customConfigsController.toggleNonApplicableItems()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+	})
 })

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

@@ -29,13 +29,19 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 	private _viewModel: {
 		dropDownCustomConfigItemGroups: CustomConfigItemGroup[]
 		hasDownloadableConfigs: boolean
+		showNonApplicableButton: boolean
+		visibleEntries: number
 	} = {
 		dropDownCustomConfigItemGroups: [],
-		hasDownloadableConfigs: false
+		hasDownloadableConfigs: false,
+		showNonApplicableButton: false,
+		visibleEntries: 0
 	}
 
 	private customConfigFileStateConnector: CustomConfigFileStateConnector
 	private downloadableConfigs: Map<string, ExportCustomConfig> = new Map()
+	private previousEntries
+	private applicableEntries = 0
 
 	constructor(
 		private $rootScope: IRootScopeService,
@@ -57,6 +63,7 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 	initView() {
 		this.loadCustomConfigs()
 		this.preloadDownloadableConfigs()
+		this.initVisibleEntries()
 	}
 
 	loadCustomConfigs() {
@@ -74,8 +81,41 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 		CustomConfigHelper.applyCustomConfig(configId, this.storeService, this.threeCameraService, this.threeOrbitControlsService)
 	}
 
-	removeCustomConfig(configId) {
+	removeCustomConfig(configId, customConfigItemIndex, dropDownCustomConfigItemGroupIndex) {
+		const { dropDownCustomConfigItemGroups } = this._viewModel
+
 		CustomConfigHelper.deleteCustomConfig(configId)
+		dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].customConfigItems.splice(customConfigItemIndex, 1)
+
+		if (dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].customConfigItems.length === 0) {
+			if (dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].hasApplicableItems) {
+				this.applicableEntries--
+			}
+
+			dropDownCustomConfigItemGroups.splice(dropDownCustomConfigItemGroupIndex, 1)
+			this._viewModel.visibleEntries--
+			this.previousEntries--
+			this.updateButtonVisibility()
+		}
+	}
+
+	private initVisibleEntries() {
+		this.applicableEntries = 0
+		while (this._viewModel.dropDownCustomConfigItemGroups[this.applicableEntries]?.hasApplicableItems) {
+			this.applicableEntries++
+		}
+
+		this._viewModel.visibleEntries = this.applicableEntries
+		this.updateButtonVisibility()
+	}
+
+	toggleNonApplicableItems() {
+		if (!this.isExpanded()) {
+			this.previousEntries = this._viewModel.visibleEntries
+			this._viewModel.visibleEntries = this._viewModel.dropDownCustomConfigItemGroups.length
+		} else {
+			this._viewModel.visibleEntries = this.previousEntries
+		}
 	}
 
 	downloadPreloadedCustomConfigs() {
@@ -109,6 +149,20 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 		}
 		return false
 	}
+
+	private isExpanded(): boolean {
+		return this._viewModel.visibleEntries === this._viewModel.dropDownCustomConfigItemGroups.length
+	}
+
+	private updateButtonVisibility() {
+		if (this._viewModel.dropDownCustomConfigItemGroups.length === 0) {
+			this._viewModel.showNonApplicableButton = false
+		} else if (this.applicableEntries < this._viewModel.dropDownCustomConfigItemGroups.length) {
+			this._viewModel.showNonApplicableButton = true
+		} else {
+			this._viewModel.showNonApplicableButton = false
+		}
+	}
 }
 
 export const customConfigsComponent = {

package/app/codeCharta/ui/dialog/dialog.addCustomConfigSettings.component.html

@@ -1,7 +1,7 @@
 <md-dialog class="custom-config-dialog">
 	<md-toolbar>
 		<div class="md-toolbar-tools">
-			<h2>Add Custom Config</h2>
+			<h2>Add Custom View</h2>
 		</div>
 	</md-toolbar>
 
@@ -34,7 +34,7 @@
 			<md-button
 				ng-click="$ctrl.showPurgeConfirmDialog()"
 				class="md-warn"
-				title="Download old unused Configs as a backup file and then delete them in the browser."
+				title="Download old unused Custom Views as a backup file and then delete them in the browser."
 				>Download & Purge ...</md-button
 			>
 		</span>

package/app/codeCharta/ui/dialog/dialog.changelog.component.html

@@ -15,7 +15,7 @@
 	</md-dialog-content>
 
 	<md-dialog-actions>
-		<a href="https://maibornwolff.github.io/codecharta/news/" class="md-primary">Know more</a>
+		<a class="md-primary" href="https://maibornwolff.github.io/codecharta/news/" target="_blank" rel="noopener noreferrer">Know more</a>
 		<md-button ng-click="$ctrl.hide()" class="md-secondary">Close</md-button>
 	</md-dialog-actions>
 </md-dialog>

package/app/codeCharta/ui/dialog/dialog.changelog.component.scss

@@ -0,0 +1,15 @@
+img[alt$="xs"] {
+	height: 32px;
+}
+img[alt$="s"] {
+	height: 64px;
+}
+img[alt$="m"] {
+	height: 256px;
+}
+img[alt$="l"] {
+	height: 350px;
+}
+img[alt$="xl"] {
+	height: 512px;
+}

package/app/codeCharta/ui/dialog/dialog.changelog.component.spec.ts

@@ -33,11 +33,11 @@ describe("DialogChangelogController", () => {
 			expect(dialogChangelogController["_viewModel"].changes).not.toBeNull()
 			expect(dialogChangelogController["_viewModel"].changes[added]).toBeUndefined()
 			expect(dialogChangelogController["_viewModel"].changes[fixed]).toBe(
-				'<li>3 (<a href="">#3</a>)</li>\n' + '<li>4 (<a href="">#4</a>)</li>\n' + '<li>5 (<a href="">#5</a>)</li>'
+				'<li>3 (<a href="">#3</a>)</li><br>\n' + '<li>4 (<a href="">#4</a>)</li><br>\n' + '<li>5 (<a href="">#5</a>)</li><br>'
 			)
 			expect(dialogChangelogController["_viewModel"].changes[removed]).toBeUndefined()
 			expect(dialogChangelogController["_viewModel"].changes[changed]).toBeUndefined()
-			expect(dialogChangelogController["_viewModel"].changes[chore]).toBe('<li>6 (<a href="">#6</a>)</li>')
+			expect(dialogChangelogController["_viewModel"].changes[chore]).toBe('<li>6 (<a href="">#6</a>)</li><br>')
 		})
 
 		it("should extract the changes from changelog for 2 versions", () => {
@@ -47,24 +47,24 @@ describe("DialogChangelogController", () => {
 
 			expect(dialogChangelogController["_viewModel"].changes).not.toBeNull()
 			expect(dialogChangelogController["_viewModel"].changes[added]).toBe(
-				'<li>7 (<a href="">#7</a>)</li>\n' + '<li>8 (<a href="">#8</a>)</li>'
+				'<li>7 (<a href="">#7</a>)</li><br>\n' + '<li>8 (<a href="">#8</a>)</li><br>'
 			)
 			expect(dialogChangelogController["_viewModel"].changes[fixed]).toBe(
-				'<li>3 (<a href="">#3</a>)</li>\n' + '<li>4 (<a href="">#4</a>)</li>\n' + '<li>5 (<a href="">#5</a>)</li>'
+				'<li>3 (<a href="">#3</a>)</li><br>\n' + '<li>4 (<a href="">#4</a>)</li><br>\n' + '<li>5 (<a href="">#5</a>)</li><br>'
 			)
-			expect(dialogChangelogController["_viewModel"].changes[chore]).toBe('<li>6 (<a href="">#6</a>)</li>')
+			expect(dialogChangelogController["_viewModel"].changes[chore]).toBe('<li>6 (<a href="">#6</a>)</li><br>')
 			// Expect nested list to be correctly parsed
 			expect(dialogChangelogController["_viewModel"].changes[changed]).toBe(
-				"<li>\n" +
-					'<p>9 (<a href="">#9</a>)</p>\n' +
-					"</li>\n" +
-					"<li>\n" +
-					'<p>10 (<a href="">#10</a>)</p>\n' +
-					"<ul>\n" +
-					"<li>10.1</li>\n" +
-					"<li>10.2</li>\n" +
-					"</ul>\n" +
-					"</li>"
+				"<li><br>\n" +
+					'<p>9 (<a href="">#9</a>)</p><br>\n' +
+					"</li><br>\n" +
+					"<li><br>\n" +
+					'<p>10 (<a href="">#10</a>)</p><br>\n' +
+					"<ul><br>\n" +
+					"<li>10.1</li><br>\n" +
+					"<li>10.2</li><br>\n" +
+					"</ul><br>\n" +
+					"</li><br>"
 			)
 			expect(dialogChangelogController["_viewModel"].changes[removed]).toBeUndefined()
 		})

package/app/codeCharta/ui/dialog/dialog.changelog.component.ts

@@ -1,5 +1,6 @@
 import markdownFile from "../../../../../CHANGELOG.md"
 import packageJson from "../../../../package.json"
+import "./dialog.changelog.component.scss"
 
 export class DialogChangelogController {
 	private _viewModel: {
@@ -35,7 +36,7 @@ export class DialogChangelogController {
 				const start = lineIndex + 2
 				const end = this.findEndChangesLine(changelogLines, lineIndex)
 				for (const changeLine of changelogLines.slice(start, end)) {
-					changelogTypes.push(changeLine)
+					changelogTypes.push(`${changeLine}<br>`)
 				}
 			}
 			if (changelogTypes.length > 0) changes[title] = changelogTypes.join("\n")

package/app/codeCharta/ui/dialog/dialog.globalSettings.e2e.ts

@@ -49,7 +49,7 @@ describe("DialogGlobalSettings", () => {
 			await globalSettingsPageObject.isTreeMapFilesComponentVisible()
 		})
 
-		it("should change the display quality to Pixel Ratio without Antialiasing", async () => {
+		it("should change the display quality to Low Setting", async () => {
 			await globalSettingsPageObject.changedDisplayQuality()
 
 			const layout = await globalSettingsPageObject.getDisplayQuality()

package/app/codeCharta/ui/dialog/dialog.globalSettings.po.ts

@@ -35,7 +35,7 @@ export class DialogGlobalSettingsPageObject {
 		await clickButtonOnPageElement("div.md-dialog-content sharpness-mode-selector-component div md-input-container md-select", {
 			visible: true
 		})
-		await clickButtonOnPageElement('md-select-menu md-content [value="Pixel Ratio without Antialiasing"]', { visible: true })
+		await clickButtonOnPageElement('md-select-menu md-content [value="Low"]', { visible: true })
 		await page.waitForSelector(".md-select-menu-container.md-active", { visible: false })
 	}
 

package/app/codeCharta/ui/dialog/dialog.service.spec.ts

@@ -0,0 +1,68 @@
+import "./dialog.module.ts"
+import { getService, instantiateModule } from "../../../../mocks/ng.mockhelper"
+import { DialogService } from "./dialog.service"
+import { CCFileValidationResult } from "../../util/fileValidator"
+
+describe("DialogService", () => {
+	let dialogService: DialogService
+	let $mdDialog
+
+	beforeEach(() => {
+		restartSystem()
+		rebuildController()
+		dialogService.showCustomDialog = jest.fn()
+		dialogService.showErrorDialog = jest.fn()
+	})
+
+	function restartSystem() {
+		instantiateModule("app.codeCharta.ui.dialog")
+		$mdDialog = getService("$mdDialog")
+	}
+
+	function rebuildController() {
+		dialogService = new DialogService($mdDialog)
+	}
+
+	it("should show AddCustomConfigSettings", function () {
+		dialogService.showAddCustomConfigSettings()
+
+		expect(dialogService.showCustomDialog).toHaveBeenCalled()
+	})
+
+	it("should show DownloadDialog", function () {
+		dialogService.showDownloadDialog()
+
+		expect(dialogService.showCustomDialog).toHaveBeenCalled()
+	})
+
+	it("should show AddScenarioSettings", function () {
+		dialogService.showAddScenarioSettings()
+
+		expect(dialogService.showCustomDialog).toHaveBeenCalled()
+	})
+
+	it("should show GlobalSettingsDialog", function () {
+		dialogService.showGlobalSettingsDialog()
+
+		expect(dialogService.showCustomDialog).toHaveBeenCalled()
+	})
+
+	it("should show ChangelogDialog", function () {
+		dialogService.showChangelogDialog()
+
+		expect(dialogService.showCustomDialog).toHaveBeenCalled()
+	})
+
+	it("should show ValidationDialog", function () {
+		const fileValidationResults: CCFileValidationResult[] = [
+			{ fileName: "file_1", errors: ["Error"], warnings: [] },
+			{ fileName: "file_2", errors: [], warnings: ["Warning"] }
+		]
+		dialogService.showValidationDialog(fileValidationResults)
+
+		expect(dialogService.showErrorDialog).toHaveBeenCalledWith(
+			`<h2>Errors</h2><p><strong>file_1:</strong> <p><i class="fa fa-exclamation-circle"></i> Error</p></p><h2>Warnings</h2><p><strong>file_2:</strong> <p><i class="fa fa-exclamation-triangle"></i> Warning</p></p>`,
+			"Something is wrong with the uploaded file(s)"
+		)
+	})
+})

package/app/codeCharta/ui/dialog/dialog.service.ts

@@ -2,7 +2,7 @@ import { dialogDownloadComponent } from "./dialog.download.component"
 import { dialogGlobalSettingsComponent } from "./dialog.globalSettings.component"
 import { addScenarioSettingsComponent } from "./dialog.addScenarioSettings.component"
 import { addCustomConfigSettingsComponent } from "./dialog.addCustomConfigSettings.component"
-import { CCValidationResult } from "../../util/fileValidator"
+import { CCFileValidationResult } from "../../util/fileValidator"
 import { dialogChangelogComponent } from "./dialog.changelog.component"
 
 export class DialogService {
@@ -38,26 +38,47 @@ export class DialogService {
 		await this.$mdDialog.show(this.$mdDialog.alert().clickOutsideToClose(true).title(title).htmlContent(message).ok(button))
 	}
 
-	async showErrorDialogAndOpenFileChooser(message = "An error occurred.", title = "Error", button = "Ok") {
-		const prompt = this.$mdDialog.alert().clickOutsideToClose(true).title(title).htmlContent(message).ok(button)
-		await this.$mdDialog.show(prompt)
-		document.getElementById("input-file-id").click()
+	async showValidationDialog(fileValidationResults: CCFileValidationResult[]) {
+		const htmlMessages = []
+
+		const filesWithErrors = fileValidationResults.filter(validationResult => {
+			return validationResult.errors.length > 0
+		})
+		if (filesWithErrors.length > 0) {
+			htmlMessages.push("<h2>Errors</h2>")
+			for (const fileWithErrors of filesWithErrors) {
+				const fileErrorMessage = this.buildFileErrorMessage(fileWithErrors)
+				htmlMessages.push(fileErrorMessage)
+			}
+		}
+
+		const filesWithWarnings = fileValidationResults.filter(validationResult => {
+			return validationResult.warnings.length > 0
+		})
+		if (filesWithWarnings.length > 0) {
+			htmlMessages.push("<h2>Warnings</h2>")
+			for (const fileWithWarnings of filesWithWarnings) {
+				const fileWarningMessage = this.buildFileWarningMessage(fileWithWarnings)
+				htmlMessages.push(fileWarningMessage)
+			}
+		}
+		await this.showErrorDialog(htmlMessages.join(""), "Something is wrong with the uploaded file(s)")
 	}
 
-	async showValidationWarningDialog(validationResult: CCValidationResult) {
-		const warningSymbol = '<i class="fa fa-exclamation-triangle"></i> '
-
-		const htmlMessage = this.buildHtmlMessage(warningSymbol, validationResult.warning)
-
-		await this.showErrorDialog(htmlMessage, "Validation Warning")
-	}
-
-	async showValidationErrorDialog(validationResult: CCValidationResult) {
+	private buildFileErrorMessage(fileValidationResult) {
 		const errorSymbol = '<i class="fa fa-exclamation-circle"></i> '
+		return `<p><strong>${fileValidationResult.fileName}:</strong> ${this.buildHtmlMessage(
+			errorSymbol,
+			fileValidationResult.errors
+		)}</p>`
+	}
 
-		const htmlMessage = this.buildHtmlMessage(errorSymbol, validationResult.error)
-
-		await this.showErrorDialogAndOpenFileChooser(htmlMessage, "Validation Error")
+	private buildFileWarningMessage(fileValidationResult) {
+		const warningSymbol = '<i class="fa fa-exclamation-triangle"></i> '
+		return `<p><strong>${fileValidationResult.fileName}:</strong> ${this.buildHtmlMessage(
+			warningSymbol,
+			fileValidationResult.warnings
+		)}</p>`
 	}
 
 	private buildHtmlMessage(symbol: string, validationResult: string[]) {

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/edgeChooser/edgeChooser.e2e.ts

@@ -43,8 +43,9 @@ describe("MapTreeViewLevel", () => {
 
 		it("should not display the amount of incoming and outgoing edges of buildings for the none metric", async () => {
 			await searchPanel.toggle()
-			await mapTreeViewLevel.openFolder("/root/ParentLeaf")
-			await mapTreeViewLevel.hoverNode("/root/ParentLeaf/smallLeaf.html")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
+			await mapTreeViewLevel.hoverNode("/root/sample1.cc.json/ParentLeaf/smallLeaf.html")
 
 			expect(await edgeChooser.isEdgeCountAvailable()).toBeFalsy()
 		})

package/app/codeCharta/ui/fileChooser/fileChooser.e2e.ts

@@ -50,7 +50,7 @@ describe("FileChooser", () => {
 
 	it("should open an invalid file, close the dialog and open a valid file", async () => {
 		await fileChooser.openFiles(["./app/codeCharta/assets/empty.png"])
-		expect(await dialogError.getMessage()).toEqual(` ${ERROR_MESSAGES.fileIsInvalid}`)
+		expect(await dialogError.getMessage()).toContain(` ${ERROR_MESSAGES.fileIsInvalid}`)
 
 		await dialogError.clickOk()
 
@@ -61,7 +61,7 @@ describe("FileChooser", () => {
 
 	it("should open an valid and an invalid file, close the dialog and open a valid file", async () => {
 		await fileChooser.openFiles(["./app/codeCharta/assets/empty.png", "./app/codeCharta/assets/sample3.cc.json"])
-		expect(await dialogError.getMessage()).toEqual(` ${ERROR_MESSAGES.fileIsInvalid}`)
+		expect(await dialogError.getMessage()).toContain(` ${ERROR_MESSAGES.fileIsInvalid}`)
 
 		await dialogError.clickOk()
 
@@ -73,10 +73,9 @@ describe("FileChooser", () => {
 	it("should not load a map and show error, when loading a map with warning and a map with error", async () => {
 		await fileChooser.openFiles(["./app/codeCharta/resources/sample1_with_api_warning.cc.json", "./app/codeCharta/assets/empty.png"])
 
-		expect(await dialogError.getMessage()).toEqual(` ${ERROR_MESSAGES.minorApiVersionOutdated} Found: 1.5`)
-		await dialogError.clickAndWaitUntilContentChange()
-
-		expect(await dialogError.getMessage()).toEqual(` ${ERROR_MESSAGES.fileIsInvalid}`)
+		const dialogMessage = await dialogError.getMessage()
+		expect(dialogMessage).toContain(` ${ERROR_MESSAGES.minorApiVersionOutdated} Found: 1.5`)
+		expect(dialogMessage).toContain(` ${ERROR_MESSAGES.fileIsInvalid}`)
 		await dialogError.clickOk()
 
 		await fileChooser.openFiles(["./app/codeCharta/assets/sample3.cc.json"])