codecharta-visualization 1.87.1 → 1.88.0

package/app/app.module.ts

@@ -4,7 +4,8 @@ import { Inject, NgModule } from "@angular/core"
 import { BrowserModule } from "@angular/platform-browser"
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
 import { UpgradeModule } from "@angular/upgrade/static"
-
+import { FormsModule } from "@angular/forms"
+import { MaterialModule } from "./material/material.module"
 import { MapTreeViewModule } from "./codeCharta/ui/mapTreeView/mapTreeView.module"
 import { MapTreeViewComponent } from "./codeCharta/ui/mapTreeView/mapTreeView.component"
 import { MatchingFilesCounterComponent } from "./codeCharta/ui/matchingFilesCounter/matchingFilesCounter.component"
@@ -18,10 +19,13 @@ import { LegendPanelComponent } from "./codeCharta/ui/legendPanel/legendPanel.co
 import { LegendPanelModule } from "./codeCharta/ui/legendPanel/legendPanel.module"
 import { ColorPickerForMapColorModule } from "./codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.module"
 import { ColorPickerForMapColorComponent } from "./codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component"
-import { MarkFolderColorPickerModule } from "./codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.module"
-import { MarkFolderColorPickerComponent } from "./codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component"
 import { FocusButtonsModule } from "./codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.module"
 import { FocusButtonsComponent } from "./codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.component"
+import { FilePanelFileSelectorComponent } from "./codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component"
+import { FilePanelStateButtonsComponent } from "./codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component"
+import { FilePanelDeltaSelectorComponent } from "./codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component"
+import { MarkFolderRowComponent } from "./codeCharta/ui/nodeContextMenu/markFolderRow/markFolderRow.component"
+import { MarkFolderRowModule } from "./codeCharta/ui/nodeContextMenu/markFolderRow/markFolderRow.module"
 
 @NgModule({
 	imports: [
@@ -30,13 +34,15 @@ import { FocusButtonsComponent } from "./codeCharta/ui/nodeContextMenu/focusButt
 		MapTreeViewModule,
 		MatchingFilesCounterModule,
 		AttributeSideBarModule,
+		MaterialModule,
+		FormsModule,
 		Export3DMapButtonModule,
 		LegendPanelModule,
 		ColorPickerForMapColorModule,
-		MarkFolderColorPickerModule,
-		FocusButtonsModule
+		FocusButtonsModule,
+		MarkFolderRowModule
 	],
-	declarations: [],
+	declarations: [FilePanelFileSelectorComponent, FilePanelStateButtonsComponent, FilePanelDeltaSelectorComponent],
 	entryComponents: [
 		MapTreeViewComponent,
 		MatchingFilesCounterComponent,
@@ -45,8 +51,12 @@ import { FocusButtonsComponent } from "./codeCharta/ui/nodeContextMenu/focusButt
 		LegendPanelComponent,
 		LabelledColorPickerComponent,
 		ColorPickerForMapColorComponent,
-		MarkFolderColorPickerComponent,
-		FocusButtonsComponent
+		FocusButtonsComponent,
+		FilePanelFileSelectorComponent,
+		FilePanelStateButtonsComponent,
+		FilePanelDeltaSelectorComponent,
+		FocusButtonsComponent,
+		MarkFolderRowComponent
 	]
 })
 export class AppModule {

package/app/codeCharta/codeCharta.component.ts

@@ -76,6 +76,8 @@ export class CodeChartaController {
 		this.codeChartaService.loadFiles(values)
 	}
 
+	// TODO: Please make sure that this function works fine on Github pages with
+	//  the updated file selection (no more single mode!)
 	private setRenderStateFromUrl() {
 		const renderState = this.urlUtils.getParameterByName("mode")
 		const files = getCCFiles(this.storeService.getState().files)

package/app/codeCharta/codeCharta.model.ts

@@ -5,6 +5,7 @@ import { CodeMapBuilding } from "./ui/codeMap/rendering/codeMapBuilding"
 import { FileState } from "./model/files/files"
 import { CustomConfig } from "./model/customConfig/customConfig.api.model"
 import Rectangle from "./util/algorithm/streetLayout/rectangle"
+import { RightClickedNodeData } from "./state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export interface NameDataPair {
 	fileName: string
@@ -404,6 +405,7 @@ export interface LookUp {
 export interface AppStatus {
 	hoveredBuildingPath: string | null
 	selectedBuildingId: number | null
+	rightClickedNodeData: RightClickedNodeData
 }
 
 export enum PanelSelection {

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

@@ -6,9 +6,9 @@ import { BlacklistType, CCFile, NodeMetricData, NodeType } from "./codeCharta.mo
 import { StoreService } from "./state/store.service"
 import { removeFile, resetFiles } from "./state/store/files/files.actions"
 import { ExportBlacklistType, ExportCCFile } from "./codeCharta.api.model"
-import { getCCFiles, isSingleState } from "./model/files/files.helper"
+import { getCCFiles, isPartialState } from "./model/files/files.helper"
 import { DialogService } from "./ui/dialog/dialog.service"
-import { CCValidationResult, ERROR_MESSAGES } from "./util/fileValidator"
+import { CCFileValidationResult, ERROR_MESSAGES } from "./util/fileValidator"
 import packageJson from "../../package.json"
 import { clone } from "./util/clone"
 import { nodeMetricDataSelector } from "./state/selectors/accumulatedData/metricData/nodeMetricData.selector"
@@ -53,8 +53,7 @@ describe("codeChartaService", () => {
 
 	function withMockedDialogService() {
 		dialogService = codeChartaService["dialogService"] = jest.fn().mockReturnValue({
-			showValidationErrorDialog: jest.fn(),
-			showValidationWarningDialog: jest.fn()
+			showValidationDialog: jest.fn()
 		})()
 	}
 
@@ -137,7 +136,7 @@ describe("codeChartaService", () => {
 			])
 
 			expect(getCCFiles(storeService.getState().files)[0]).toEqual(expected)
-			expect(isSingleState(storeService.getState().files)).toBeTruthy()
+			expect(isPartialState(storeService.getState().files)).toBeTruthy()
 		})
 
 		it("should load a valid file and update root data", async () => {
@@ -150,9 +149,8 @@ describe("codeChartaService", () => {
 			])
 
 			expect(getCCFiles(storeService.getState().files)[0]).toEqual(expected)
-			expect(isSingleState(storeService.getState().files)).toBeTruthy()
-			expect(dialogService.showValidationWarningDialog).not.toHaveBeenCalled()
-			expect(dialogService.showValidationErrorDialog).not.toHaveBeenCalled()
+			expect(isPartialState(storeService.getState().files)).toBeTruthy()
+			expect(dialogService.showValidationDialog).not.toHaveBeenCalled()
 
 			expect(CodeChartaService.ROOT_NAME).toEqual(expected.map.name)
 			expect(CodeChartaService.ROOT_PATH).toEqual(`/${expected.map.name}`)
@@ -253,7 +251,7 @@ describe("codeChartaService", () => {
 			await codeChartaService.loadFiles([{ fileName: "SecondFile", content: valid2ndFileContent, fileSize: 42 }])
 
 			expect(storeService.getState().files[0].selectedAs).toEqual("None")
-			expect(storeService.getState().files[1].selectedAs).toEqual("Single")
+			expect(storeService.getState().files[1].selectedAs).toEqual("Partial")
 		})
 
 		it("should load the default scenario after loading a valid file", async () => {
@@ -287,41 +285,50 @@ describe("codeChartaService", () => {
 		})
 
 		it("should show error on invalid file", async () => {
-			const expectedError: CCValidationResult = {
-				error: [ERROR_MESSAGES.fileIsInvalid],
-				warning: []
-			}
+			const expectedError: CCFileValidationResult[] = [
+				{
+					fileName,
+					errors: [ERROR_MESSAGES.fileIsInvalid],
+					warnings: []
+				}
+			]
 
 			await codeChartaService.loadFiles([{ fileName, content: null, fileSize: 0 }])
 
 			expect(storeService.getState().files).toHaveLength(0)
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledWith(expectedError)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledWith(expectedError)
 		})
 
 		it("should show error on a random string", async () => {
-			const expectedError: CCValidationResult = {
-				error: [ERROR_MESSAGES.apiVersionIsInvalid],
-				warning: []
-			}
+			const expectedError: CCFileValidationResult[] = [
+				{
+					fileName,
+					errors: [ERROR_MESSAGES.apiVersionIsInvalid],
+					warnings: []
+				}
+			]
 
 			await codeChartaService.loadFiles([{ fileName, fileSize: 42, content: "string" as unknown as ExportCCFile }])
 
 			expect(storeService.getState().files).toHaveLength(0)
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledWith(expectedError)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledWith(expectedError)
 		})
 
 		it("should show error if a file is missing a required property", async () => {
-			const expectedError: CCValidationResult = {
-				error: ["Required error:  should have required property 'projectName'"],
-				warning: []
-			}
+			const expectedError: CCFileValidationResult[] = [
+				{
+					fileName,
+					errors: ["Required error:  should have required property 'projectName'"],
+					warnings: []
+				}
+			]
 
 			const invalidFileContent = validFileContent
 			delete invalidFileContent.projectName
 			await codeChartaService.loadFiles([{ fileName, fileSize: 42, content: invalidFileContent }])
 
 			expect(storeService.getState().files).toHaveLength(0)
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledWith(expectedError)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledWith(expectedError)
 		})
 
 		it("should convert old blacklist type", async () => {
@@ -339,46 +346,30 @@ describe("codeChartaService", () => {
 			expect(getCCFiles(storeService.getState().files)[0].settings.fileSettings.blacklist).toEqual(blacklist)
 		})
 
-		it("should break the loop after the first invalid file was validated", async () => {
-			const expectedError: CCValidationResult = {
-				error: ["Required error:  should have required property 'projectName'"],
-				warning: []
-			}
-
-			const invalidFileContent = validFileContent
-			delete invalidFileContent.projectName
-
-			await codeChartaService.loadFiles([
-				{ fileName, content: invalidFileContent, fileSize: 42 },
-				{ fileName, content: invalidFileContent, fileSize: 42 }
-			])
-
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledTimes(1)
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledWith(expectedError)
-		})
-
 		it("should not show a validation error if filenames are duplicated when their path is different", async () => {
 			validFileContent.nodes[0].children[0].name = "duplicate"
 			validFileContent.nodes[0].children[1].children[0].name = "duplicate"
 
 			await codeChartaService.loadFiles([{ fileName, content: validFileContent, fileSize: 42 }])
 
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledTimes(0)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledTimes(0)
 			expect(storeService.getState().files).toHaveLength(1)
 		})
 
 		it("should show a validation error if two files in a folder have the same name", async () => {
 			validFileContent.nodes[0].children[1].children[0].name = "duplicate"
 			validFileContent.nodes[0].children[1].children[1].name = "duplicate"
-			const expectedError: CCValidationResult = {
-				error: [`${ERROR_MESSAGES.nodesNotUnique} Found duplicate of File with path: /root/Parent Leaf/duplicate`],
-				warning: []
-			}
+			const expectedError: CCFileValidationResult[] = [
+				{
+					fileName,
+					errors: [`${ERROR_MESSAGES.nodesNotUnique} Found duplicate of File with path: /root/Parent Leaf/duplicate`],
+					warnings: []
+				}
+			]
 
 			await codeChartaService.loadFiles([{ fileName, content: validFileContent, fileSize: 42 }])
 
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledTimes(1)
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledWith(expectedError)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledWith(expectedError)
 		})
 
 		it("should not show a validation error if two files in a folder have the same name but different type", async () => {
@@ -389,7 +380,7 @@ describe("codeChartaService", () => {
 
 			await codeChartaService.loadFiles([{ fileName, content: validFileContent, fileSize: 42 }])
 
-			expect(dialogService.showValidationErrorDialog).toHaveBeenCalledTimes(0)
+			expect(dialogService.showValidationDialog).toHaveBeenCalledTimes(0)
 			expect(storeService.getState().files).toHaveLength(1)
 		})
 

package/app/codeCharta/codeCharta.service.ts

@@ -1,7 +1,7 @@
-import { validate } from "./util/fileValidator"
+import { CCFileValidationResult, checkErrors, checkWarnings } from "./util/fileValidator"
 import { NodeDecorator } from "./util/nodeDecorator"
 import { StoreService } from "./state/store.service"
-import { setFiles, setSingleByName } from "./state/store/files/files.actions"
+import { setFiles, setMultipleByNames } from "./state/store/files/files.actions"
 import { DialogService } from "./ui/dialog/dialog.service"
 import { setState } from "./state/store/state.actions"
 import { ScenarioHelper } from "./util/scenarioHelper"
@@ -25,41 +25,46 @@ export class CodeChartaService {
 
 	async loadFiles(nameDataPairs: NameDataPair[]) {
 		this.fileStates = this.storeService.getState().files
-		for (const nameDataPair of nameDataPairs) {
-			try {
-				validate(nameDataPair)
-				this.addFile(nameDataPair)
-			} catch (error) {
-				if (error.error.length > 0) {
-					this.fileStates = []
-					this.recentFiles = []
-					this.storeService.dispatch(setIsLoadingFile(false))
-					await this.dialogService.showValidationErrorDialog(error)
-					break
-				}
-
-				if (error.warning.length > 0) {
-					this.addFile(nameDataPair)
-					this.addRecentFile(nameDataPair.fileName)
-					this.storeService.dispatch(setIsLoadingFile(false))
-					await this.dialogService.showValidationWarningDialog(error)
-				}
-			}
-		}
+		const fileValidationResults: CCFileValidationResult[] = []
+
+		this.getValidationResults(nameDataPairs, fileValidationResults)
+
+		this.storeService.dispatch(setIsLoadingFile(false))
 
-		if (this.fileStates.length > 0) {
+		if (fileValidationResults.length > 0) await this.dialogService.showValidationDialog(fileValidationResults)
+
+		if (this.recentFiles.length > 0) {
 			this.storeService.dispatch(setRecentFiles(this.recentFiles))
 			this.storeService.dispatch(setFiles(this.fileStates))
 
-			this.fileStates = []
-			this.recentFiles = []
-
 			const recentFile = this.storeService.getState().dynamicSettings.recentFiles[0]
 			const rootName = this.storeService.getState().files.find(f => f.file.fileMeta.fileName === recentFile).file.map.name
-			this.storeService.dispatch(setSingleByName(recentFile))
+			this.storeService.dispatch(setMultipleByNames(this.recentFiles))
 
 			CodeChartaService.updateRootData(rootName)
 			this.setDefaultScenario()
+
+			this.fileStates = []
+			this.recentFiles = []
+		}
+	}
+
+	private getValidationResults(nameDataPairs: NameDataPair[], fileValidationResults: CCFileValidationResult[]) {
+		for (const nameDataPair of nameDataPairs) {
+			const fileValidationResult: CCFileValidationResult = {
+				fileName: nameDataPair?.fileName,
+				errors: [],
+				warnings: []
+			}
+			fileValidationResult.errors.push(...checkErrors(nameDataPair?.content))
+
+			if (fileValidationResult.errors.length === 0) {
+				fileValidationResult.warnings.push(...checkWarnings(nameDataPair?.content))
+				this.addFile(nameDataPair)
+			}
+
+			if (fileValidationResult.errors.length > 0 || fileValidationResult.warnings.length > 0)
+				fileValidationResults.push(fileValidationResult)
 		}
 	}
 
@@ -129,8 +134,4 @@ export class CodeChartaService {
 		CodeChartaService.ROOT_NAME = rootName
 		CodeChartaService.ROOT_PATH = `/${CodeChartaService.ROOT_NAME}`
 	}
-
-	private addRecentFile(fileName: string) {
-		this.recentFiles.push(fileName)
-	}
 }

package/app/codeCharta/e2e/url.e2e.ts

@@ -63,7 +63,7 @@ describe("codecharta", () => {
 	it("should throw errors when file parameters in url are invalid and load sample data instead", async () => {
 		await goto(`${CC_URL}?file=invalid234`)
 		await handleErrorDialog()
-		await checkSelectedFileName("sample1.cc.json")
+		await checkSelectedFileName("sample1.cc.json, sample2.cc.json")
 		await checkAllFileNames(["sample1.cc.json", "sample2.cc.json"])
 	})
 })

package/app/codeCharta/state/store/appStatus/appStatus.reducer.ts

@@ -1,11 +1,13 @@
 import { combineReducers } from "redux"
 
 import { hoveredBuildingPath } from "./hoveredBuildingPath/hoveredBuildingPath.reducer"
+import { rightClickedNodeData } from "./rightClickedNodeData/rightClickedNodeData.reducer"
 import { selectedBuildingId } from "./selectedBuildingId/selectedBuildingId.reducer"
 
 const appStatus = combineReducers({
 	hoveredBuildingPath,
-	selectedBuildingId
+	selectedBuildingId,
+	rightClickedNodeData
 })
 
 export default appStatus

package/app/codeCharta/state/store/appStatus/appStatus.selector.ts

@@ -0,0 +1,3 @@
+import { CcState } from "../store"
+
+export const appStatusSelector = (state: CcState) => state.appStatus

package/app/codeCharta/state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions.ts

@@ -0,0 +1,23 @@
+import { Action } from "redux"
+
+export enum RightClickedNodeDataActions {
+	SET_RIGHT_CLICKED_NODE_DATA = "SET_RIGHT_CLICKED_NODE_DATA"
+}
+
+export type RightClickedNodeData = {
+	nodeId: number
+	xPositionOfRightClickEvent: number
+	yPositionOfRightClickEvent: number
+} | null
+
+export interface SetRightClickedNodeDataAction extends Action {
+	type: RightClickedNodeDataActions.SET_RIGHT_CLICKED_NODE_DATA
+	payload: RightClickedNodeData
+}
+
+export const defaultRightClickedNodeData: RightClickedNodeData = null
+
+export const setRightClickedNodeData = (payload: RightClickedNodeData): SetRightClickedNodeDataAction => ({
+	type: RightClickedNodeDataActions.SET_RIGHT_CLICKED_NODE_DATA,
+	payload
+})

package/app/codeCharta/state/store/appStatus/rightClickedNodeData/rightClickedNodeData.reducer.ts

@@ -0,0 +1,15 @@
+import {
+	defaultRightClickedNodeData,
+	RightClickedNodeData,
+	RightClickedNodeDataActions,
+	SetRightClickedNodeDataAction
+} from "./rightClickedNodeData.actions"
+
+export const rightClickedNodeData = (state: RightClickedNodeData = defaultRightClickedNodeData, action: SetRightClickedNodeDataAction) => {
+	switch (action.type) {
+		case RightClickedNodeDataActions.SET_RIGHT_CLICKED_NODE_DATA:
+			return action.payload
+		default:
+			return state
+	}
+}

package/app/codeCharta/state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/createSelector"
+import { appStatusSelector } from "../appStatus.selector"
+
+export const rightClickedNodeDataSelector = createSelector([appStatusSelector], appStatus => appStatus.rightClickedNodeData)

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

@@ -8,6 +8,7 @@ import { defaultTreeMapSettings } from "./treeMap/treeMap.actions"
 import { defaultFiles } from "./files/files.actions"
 import { defaultHoveredBuildingPath } from "./appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { defaultSelectedBuildingId } from "./appStatus/selectedBuildingId/selectedBuildingId.actions"
+import { defaultRightClickedNodeData } from "./appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export enum StateActions {
 	SET_STATE = "SET_STATE"
@@ -36,6 +37,7 @@ export const defaultState: State = {
 	files: defaultFiles,
 	appStatus: {
 		hoveredBuildingPath: defaultHoveredBuildingPath,
-		selectedBuildingId: defaultSelectedBuildingId
+		selectedBuildingId: defaultSelectedBuildingId,
+		rightClickedNodeData: defaultRightClickedNodeData
 	}
 }

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

@@ -18,7 +18,7 @@ import { CodeMapPreRenderService } from "./codeMap.preRender.service"
 import { ThreeViewerService } from "./threeViewer/threeViewerService"
 import { setHoveredBuildingPath } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { hoveredBuildingPathSelector } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.selector"
-import type { BUILDING_RIGHT_CLICKED_EVENT_TYPE } from "../../../../src/globals"
+import { setRightClickedNodeData } from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 interface Coordinates {
 	x: number
@@ -355,13 +355,11 @@ export class CodeMapMouseEventService implements ViewCubeEventPropagationSubscri
 		// Check if mouse moved to prevent the node context menu to show up
 		// after moving the map, when the cursor ends on a building.
 		if (building && !this.hasMouseMovedMoreThanThreePixels(this.mouseOnLastClick)) {
-			document.dispatchEvent(
-				new CustomEvent<BUILDING_RIGHT_CLICKED_EVENT_TYPE>("building-right-clicked", {
-					detail: {
-						building,
-						x: this.mouse.x,
-						y: this.mouse.y
-					}
+			this.storeService.dispatch(
+				setRightClickedNodeData({
+					nodeId: building.node.id,
+					xPositionOfRightClickEvent: this.mouse.x,
+					yPositionOfRightClickEvent: this.mouse.y
 				})
 			)
 		}

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

@@ -1,17 +1,17 @@
 <div class="custom-configs">
 	<md-menu class="custom-configs-component">
-		<md-button class="custom-configs-button" ng-click="$ctrl.initView(); $mdMenu.open($event);" title="Open your saved Custom Configs">
+		<md-button class="custom-configs-button" ng-click="$ctrl.initView(); $mdMenu.open($event);" title="Open your saved Custom Views">
 			<i class="fa fa-cogs"></i>
 		</md-button>
 
 		<md-menu-content class="custom-configs-drop-down" width="7">
 			<md-menu-item class="custom-configs-item">
-				<md-button class="custom-configs-dialog-name" ng-disabled="true">Custom Configs</md-button>
+				<md-button class="custom-configs-dialog-name" ng-disabled="true">Custom Views</md-button>
 
 				<md-button
 					class="action-button"
 					onclick="document.getElementById('input-file-id').click()"
-					title="Upload Custom Configs (.cc.config.json file)."
+					title="Upload Custom View (.cc.config.json file)."
 				>
 					<i class="fa fa-folder-open" aria-hidden="true"></i>
 				</md-button>
@@ -19,11 +19,11 @@
 					ng-click="$ctrl.downloadPreloadedCustomConfigs()"
 					ng-disabled="!$ctrl._viewModel.hasDownloadableConfigs"
 					class="action-button"
-					title="Download Custom Configs related to currently uploaded maps, if any."
+					title="Download Custom View related to currently uploaded maps, if any."
 				>
 					<i class="fa fa-download" aria-hidden="true"></i>
 				</md-button>
-				<md-button ng-click="$ctrl.showAddCustomConfigSettings()" class="action-button" title="Create new Custom Config">
+				<md-button ng-click="$ctrl.showAddCustomConfigSettings()" class="action-button" title="Create new Custom View">
 					<i class="fa fa-plus" aria-hidden="true"></i>
 				</md-button>
 			</md-menu-item>
@@ -31,7 +31,7 @@
 			<md-divider></md-divider>
 
 			<md-menu-item ng-if="!$ctrl._viewModel.dropDownCustomConfigItemGroups.length" class="custom-configs-item">
-				<md-button disabled>It is time to add your first CustomConfig.</md-button>
+				<md-button disabled>It is time to add your first Custom View.</md-button>
 			</md-menu-item>
 
 			<md-menu-item
@@ -46,7 +46,7 @@
 					md-prevent-menu-close="md-prevent-menu-close"
 				>
 					<span class="collapse-trigger">
-						Custom Configs in <strong>{{ customConfigItemGroup.mapSelectionMode | lowercase }}</strong> mode for
+						Custom View(s) in <strong>{{ customConfigItemGroup.mapSelectionMode | lowercase }}</strong> mode for
 						<strong>{{ customConfigItemGroup.mapNames }}</strong>
 					</span>
 					<i ng-show="!collapsed" class="collapse-icon fa fa-arrow-down"></i>
@@ -88,7 +88,7 @@
 				ng-click="$ctrl.toggleNonApplicableItems();"
 				md-prevent-menu-close="md-prevent-menu-close"
 			>
-				{{ $ctrl.isExpanded() ? "Hide non-applicable CustomConfigs" : "Show non-applicable CustomConfigs" }}
+				{{ $ctrl.isExpanded() ? "Hide non-applicable Custom Views" : "Show non-applicable Custom Views" }}
 				<i ng-class="$ctrl.isExpanded() ? 'fa fa-angle-up' : 'fa fa-angle-down'"></i>
 			</button>
 		</md-menu-content>
@@ -98,7 +98,7 @@
 		<md-button
 			class="custom-configs-button plus"
 			ng-click="$ctrl.showAddCustomConfigSettings();"
-			title="Quick save current view as a Custom Config"
+			title="Quick save current view as a Custom View"
 		>
 			<i class="fa fa-plus"></i>
 		</md-button>

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.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()
 		})