codecharta-visualization 1.89.0 → 1.90.0

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

@@ -3,7 +3,7 @@
 import { CodeMapNode, FileMeta } from "../../codeCharta.model"
 import { IRootScopeService } from "angular"
 import { CodeMapRenderService } from "./codeMap.render.service"
-import { StoreExtendedSubscriber, StoreService, StoreSubscriber } from "../../state/store.service"
+import { StoreService, StoreSubscriber } from "../../state/store.service"
 import { ScalingService, ScalingSubscriber } from "../../state/store/appSettings/scaling/scaling.service"
 import debounce from "lodash.debounce"
 import { ScalingActions } from "../../state/store/appSettings/scaling/scaling.actions"
@@ -20,14 +20,7 @@ import { PresentationModeActions } from "../../state/store/appSettings/isPresent
 import { MetricDataService, MetricDataSubscriber } from "../../state/store/metricData/metricData.service"
 import { ExperimentalFeaturesEnabledActions } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { LayoutAlgorithmService, LayoutAlgorithmSubscriber } from "../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
-import { trackEventUsageData, trackMapMetaData } from "../../util/usageDataTracker"
-import { AreaMetricActions } from "../../state/store/dynamicSettings/areaMetric/areaMetric.actions"
-import { HeightMetricActions } from "../../state/store/dynamicSettings/heightMetric/heightMetric.actions"
-import { ColorMetricActions } from "../../state/store/dynamicSettings/colorMetric/colorMetric.actions"
-import { ColorRangeActions } from "../../state/store/dynamicSettings/colorRange/colorRange.actions"
-import { BlacklistActions } from "../../state/store/fileSettings/blacklist/blacklist.actions"
-import { FocusedNodePathActions } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
-import { ColorRangeFromSubscriber, ColorRangeToSubscriber, RangeSliderController } from "../rangeSlider/rangeSlider.component"
+import { trackMapMetaData } from "../../util/usageDataTracker"
 import { HoveredBuildingPathActions } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
 import { areAllNecessaryRenderDataAvailableSelector } from "../../state/selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector"
@@ -37,16 +30,7 @@ export interface CodeMapPreRenderServiceSubscriber {
 	onRenderMapChanged(map: CodeMapNode)
 }
 
-export class CodeMapPreRenderService
-	implements
-		StoreSubscriber,
-		StoreExtendedSubscriber,
-		MetricDataSubscriber,
-		ScalingSubscriber,
-		LayoutAlgorithmSubscriber,
-		ColorRangeFromSubscriber,
-		ColorRangeToSubscriber
-{
+export class CodeMapPreRenderService implements StoreSubscriber, MetricDataSubscriber, ScalingSubscriber, LayoutAlgorithmSubscriber {
 	private static RENDER_MAP_CHANGED_EVENT = "render-map-changed"
 
 	private unifiedMap: CodeMapNode
@@ -64,18 +48,15 @@ export class CodeMapPreRenderService
 		"ngInject"
 		MetricDataService.subscribe(this.$rootScope, this)
 		StoreService.subscribe(this.$rootScope, this)
-		StoreService.subscribeDetailedData(this.$rootScope, this)
 		ScalingService.subscribe(this.$rootScope, this)
 		LayoutAlgorithmService.subscribe(this.$rootScope, this)
-		RangeSliderController.subscribeToColorRangeFromUpdated(this.$rootScope, this)
-		RangeSliderController.subscribeToColorRangeToUpdated(this.$rootScope, this)
 
 		this.debounceRendering = debounce(() => {
 			this.renderAndNotify()
 		}, this.DEBOUNCE_TIME)
 
 		this.debounceTracking = debounce(() => {
-			trackMapMetaData(this.storeService.getState())
+			trackMapMetaData(this.storeService.getState().files)
 		}, 1000)
 	}
 
@@ -111,29 +92,6 @@ export class CodeMapPreRenderService
 		}
 	}
 
-	onStoreChangedExtended(actionType: string, payload?: any) {
-		if (
-			this.allNecessaryRenderDataAvailable() &&
-			(isActionOfType(actionType, AreaMetricActions) ||
-				isActionOfType(actionType, HeightMetricActions) ||
-				isActionOfType(actionType, ColorMetricActions) ||
-				isActionOfType(actionType, ColorRangeActions) ||
-				isActionOfType(actionType, BlacklistActions) ||
-				isActionOfType(actionType, FocusedNodePathActions))
-		) {
-			// Track event usage data only on certain events
-			trackEventUsageData(actionType, this.storeService.getState(), payload)
-		}
-	}
-
-	onColorRangeFromUpdated(colorMetric: string, fromValue: number) {
-		trackEventUsageData(RangeSliderController.COLOR_RANGE_FROM_UPDATED, this.storeService.getState(), { colorMetric, fromValue })
-	}
-
-	onColorRangeToUpdated(colorMetric: string, toValue: number) {
-		trackEventUsageData(RangeSliderController.COLOR_RANGE_TO_UPDATED, this.storeService.getState(), { colorMetric, toValue })
-	}
-
 	onLayoutAlgorithmChanged() {
 		this.debounceRendering()
 	}

package/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.spec.ts

@@ -17,17 +17,24 @@ import { StoreService } from "../../../state/store.service"
 import { CodeMapMesh } from "../rendering/codeMapMesh"
 import { klona } from "klona"
 import { CodeMapNode, LayoutAlgorithm } from "../../../codeCharta.model"
-import { setIdToBuilding } from "../../../state/store/lookUp/idToBuilding/idToBuilding.actions"
-import { setIdToNode } from "../../../state/store/lookUp/idToNode/idToNode.actions"
 import { setScaling } from "../../../state/store/appSettings/scaling/scaling.actions"
 import { Box3, BufferGeometry, Group, Material, Matrix4, Object3D, Raycaster, Vector3 } from "three"
 import { setLayoutAlgorithm } from "../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
 import { FloorLabelDrawer } from "./floorLabels/floorLabelDrawer"
+import { idToNodeSelector } from "../../../state/selectors/accumulatedData/idToNode.selector"
+import { mocked } from "ts-jest/utils"
+import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
+
+jest.mock("../../../state/selectors/accumulatedData/idToNode.selector", () => ({
+	idToNodeSelector: jest.fn()
+}))
+const mockedIdToNodeSelector = mocked(idToNodeSelector)
 
 describe("ThreeSceneService", () => {
 	let threeSceneService: ThreeSceneService
 	let $rootScope: IRootScopeService
 	let storeService: StoreService
+	let idToBuildingService: IdToBuildingService
 
 	let codeMapBuilding: CodeMapBuilding
 
@@ -42,12 +49,13 @@ describe("ThreeSceneService", () => {
 		$rootScope = getService<IRootScopeService>("$rootScope")
 		storeService = getService<StoreService>("storeService")
 		threeSceneService = getService<ThreeSceneService>("threeSceneService")
+		idToBuildingService = getService<IdToBuildingService>("idToBuilding")
 
 		codeMapBuilding = klona(CODE_MAP_BUILDING)
 	}
 
 	function rebuildService() {
-		threeSceneService = new ThreeSceneService($rootScope, storeService)
+		threeSceneService = new ThreeSceneService($rootScope, storeService, idToBuildingService)
 	}
 
 	beforeEach(() => {
@@ -104,14 +112,13 @@ describe("ThreeSceneService", () => {
 
 	describe("addNodeAndChildrenToConstantHighlight", () => {
 		beforeEach(() => {
-			const idToBuilding = new Map<number, CodeMapBuilding>()
-			idToBuilding.set(CODE_MAP_BUILDING.id, CODE_MAP_BUILDING)
-			idToBuilding.set(CODE_MAP_BUILDING_TS_NODE.id, CODE_MAP_BUILDING_TS_NODE)
-			storeService.dispatch(setIdToBuilding(idToBuilding))
-			const idToNode = new Map<number, CodeMapNode>()
-			idToNode.set(VALID_NODES_WITH_ID.id, VALID_NODES_WITH_ID)
-			idToNode.set(VALID_FILE_NODE_WITH_ID.id, VALID_FILE_NODE_WITH_ID)
-			storeService.dispatch(setIdToNode(idToNode))
+			mockedIdToNodeSelector.mockImplementation(() => {
+				const idToNode = new Map<number, CodeMapNode>()
+				idToNode.set(VALID_NODES_WITH_ID.id, VALID_NODES_WITH_ID)
+				idToNode.set(VALID_FILE_NODE_WITH_ID.id, VALID_FILE_NODE_WITH_ID)
+				return idToNode
+			})
+			idToBuildingService.setIdToBuilding([CODE_MAP_BUILDING, CODE_MAP_BUILDING_TS_NODE])
 			threeSceneService["constantHighlight"] = new Map()
 		})
 
@@ -137,15 +144,15 @@ describe("ThreeSceneService", () => {
 
 	describe("removeNodeAndChildrenFromConstantHighlight", () => {
 		beforeEach(() => {
-			const idToBuilding = new Map<number, CodeMapBuilding>()
-			idToBuilding.set(CODE_MAP_BUILDING.id, CODE_MAP_BUILDING)
-			idToBuilding.set(CODE_MAP_BUILDING_TS_NODE.id, CODE_MAP_BUILDING_TS_NODE)
-			storeService.dispatch(setIdToBuilding(idToBuilding))
-			const idToNode = new Map<number, CodeMapNode>()
-			idToNode.set(VALID_NODES_WITH_ID.id, VALID_NODES_WITH_ID)
-			idToNode.set(VALID_FILE_NODE_WITH_ID.id, VALID_FILE_NODE_WITH_ID)
-			storeService.dispatch(setIdToNode(idToNode))
+			mockedIdToNodeSelector.mockImplementation(() => {
+				const idToNode = new Map<number, CodeMapNode>()
+				idToNode.set(VALID_NODES_WITH_ID.id, VALID_NODES_WITH_ID)
+				idToNode.set(VALID_FILE_NODE_WITH_ID.id, VALID_FILE_NODE_WITH_ID)
+				return idToNode
+			})
+			idToBuildingService.setIdToBuilding([CODE_MAP_BUILDING, CODE_MAP_BUILDING_TS_NODE])
 		})
+
 		it("should remove the building from constant Highlight ", () => {
 			const result = new Map<number, CodeMapBuilding>()
 			result.set(CODE_MAP_BUILDING.id, CODE_MAP_BUILDING)

package/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts

@@ -10,6 +10,8 @@ import { ColorConverter } from "../../../util/color/colorConverter"
 import { MapColorsService, MapColorsSubscriber } from "../../../state/store/appSettings/mapColors/mapColors.service"
 import { FloorLabelDrawer } from "./floorLabels/floorLabelDrawer"
 import { setSelectedBuildingId } from "../../../state/store/appStatus/selectedBuildingId/selectedBuildingId.actions"
+import { idToNodeSelector } from "../../../state/selectors/accumulatedData/idToNode.selector"
+import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
 
 export interface BuildingSelectedEventSubscriber {
 	onBuildingSelected(selectedBuilding?: CodeMapBuilding)
@@ -19,14 +21,9 @@ export interface BuildingDeselectedEventSubscriber {
 	onBuildingDeselected()
 }
 
-export interface CodeMapMeshChangedSubscriber {
-	onCodeMapMeshChanged(mapMesh: CodeMapMesh)
-}
-
 export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, MapColorsSubscriber {
 	private static readonly BUILDING_SELECTED_EVENT = "building-selected"
 	private static readonly BUILDING_DESELECTED_EVENT = "building-deselected"
-	private static readonly CODE_MAP_MESH_CHANGED_EVENT = "code-map-mesh-changed"
 
 	scene: Scene
 	labels: Group
@@ -53,7 +50,7 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 	private highlightedLine = null
 	private mapLabelColors = this.storeService.getState().appSettings.mapColors.labelColorAndAlpha
 
-	constructor(private $rootScope: IRootScopeService, private storeService: StoreService) {
+	constructor(private $rootScope: IRootScopeService, private storeService: StoreService, private idToBuilding: IdToBuildingService) {
 		"ngInject"
 		MapColorsService.subscribe(this.$rootScope, this)
 		CodeMapPreRenderService.subscribe(this.$rootScope, this)
@@ -341,22 +338,22 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 		return maxDistance
 	}
 
-	addNodeAndChildrenToConstantHighlight(codeMapNode: CodeMapNode) {
-		const { lookUp } = this.storeService.getState()
-		const codeMapBuilding = lookUp.idToNode.get(codeMapNode.id)
+	addNodeAndChildrenToConstantHighlight(codeMapNode: Pick<CodeMapNode, "id">) {
+		const idToNode = idToNodeSelector(this.storeService.getState())
+		const codeMapBuilding = idToNode.get(codeMapNode.id)
 		for (const { data } of hierarchy(codeMapBuilding)) {
-			const building = lookUp.idToBuilding.get(data.id)
+			const building = this.idToBuilding.get(data.id)
 			if (building) {
 				this.constantHighlight.set(building.id, building)
 			}
 		}
 	}
 
-	removeNodeAndChildrenFromConstantHighlight(codeMapNode: CodeMapNode) {
-		const { lookUp } = this.storeService.getState()
-		const codeMapBuilding = lookUp.idToNode.get(codeMapNode.id)
+	removeNodeAndChildrenFromConstantHighlight(codeMapNode: Pick<CodeMapNode, "id">) {
+		const idToNode = idToNodeSelector(this.storeService.getState())
+		const codeMapBuilding = idToNode.get(codeMapNode.id)
 		for (const { data } of hierarchy(codeMapBuilding)) {
-			const building = lookUp.idToBuilding.get(data.id)
+			const building = this.idToBuilding.get(data.id)
 			if (building) {
 				this.constantHighlight.delete(building.id)
 			}
@@ -412,7 +409,8 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 		this.mapGeometry.position.z = -mapSize
 
 		this.mapGeometry.add(this.mapMesh.getThreeMesh())
-		this.notifyMapMeshChanged()
+
+		this.idToBuilding.setIdToBuilding(this.mapMesh.getMeshDescription().buildings)
 	}
 
 	getMapMesh() {
@@ -443,10 +441,6 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 		}
 	}
 
-	private notifyMapMeshChanged() {
-		this.$rootScope.$broadcast(ThreeSceneService.CODE_MAP_MESH_CHANGED_EVENT, this.mapMesh)
-	}
-
 	dispose() {
 		this.mapMesh?.dispose()
 	}
@@ -462,10 +456,4 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 			subscriber.onBuildingSelected(selectedBuilding)
 		})
 	}
-
-	static subscribeToCodeMapMeshChangedEvent($rootScope: IRootScopeService, subscriber: CodeMapMeshChangedSubscriber) {
-		$rootScope.$on(this.CODE_MAP_MESH_CHANGED_EVENT, (_event, mapMesh: CodeMapMesh) => {
-			subscriber.onCodeMapMeshChanged(mapMesh)
-		})
-	}
 }

package/app/codeCharta/ui/codeMap/threeViewer/threeViewer.module.ts

@@ -9,6 +9,8 @@ import "../../../state/state.module"
 import camelCase from "lodash.camelcase"
 
 import angular from "angular"
+import { downgradeInjectable } from "@angular/upgrade/static"
+import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
 
 angular
 	.module("app.codeCharta.ui.codeMap.threeViewer", ["app.codeCharta.state"])
@@ -19,3 +21,4 @@ angular
 	.service(camelCase(ThreeOrbitControlsService.name), ThreeOrbitControlsService)
 	.service(camelCase(ThreeCameraService.name), ThreeCameraService)
 	.service(camelCase(ThreeStatsService.name), ThreeStatsService)
+	.factory("idToBuilding", downgradeInjectable(IdToBuildingService))

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

@@ -28,15 +28,14 @@ import { setMaxTreeMapFiles } from "../../state/store/appSettings/maxTreeMapFile
 import { GlobalSettingsHelper } from "../../util/globalSettingsHelper"
 import { SharpnessModeService, SharpnessModeSubscriber } from "../../state/store/appSettings/sharpnessMode/sharpnessMode.service"
 import { setSharpnessMode } from "../../state/store/appSettings/sharpnessMode/sharpnessMode.actions"
-import { CodeChartaStorage } from "../../util/codeChartaStorage"
 import { FileDownloader } from "../../util/fileDownloader"
 import { getVisibleFileStates, isSingleState } from "../../model/files/files.helper"
-import { isStandalone } from "../../util/envDetector"
 import { setScreenshotToClipboardEnabled } from "../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
 import {
 	ScreenshotToClipboardEnabledService,
 	ScreenshotToClipboardEnabledSubscriber
 } from "../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.service"
+import { TRACKING_DATA_LOCAL_STORAGE_ELEMENT } from "../../util/usageDataTracker"
 
 export class DialogGlobalSettingsController
 	implements
@@ -166,19 +165,18 @@ export class DialogGlobalSettingsController
 
 	mapTrackingDataAvailable() {
 		const files = this.storeService.getState().files
-		return isStandalone() && isSingleState(files) && getVisibleFileStates(files)
+		return isSingleState(files) && getVisibleFileStates(files)
 	}
 
 	downloadTrackingData() {
 		//TODO: this should be removed as soon as we send the data to a server
-		const fileStorage = new CodeChartaStorage()
 
 		// Make sure that only file within usageData can be read
 		const fileChecksum = this.storeService.getState().files[0].file.fileMeta.fileChecksum.replace(/\//g, "")
 
 		let trackedMapMetaData = ""
 		try {
-			trackedMapMetaData = fileStorage.getItem(`usageData/${fileChecksum}-meta`)
+			trackedMapMetaData = localStorage.getItem(`${TRACKING_DATA_LOCAL_STORAGE_ELEMENT}/${fileChecksum}-meta`)
 		} catch {
 			// ignore, it no events item exists
 		}

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

@@ -54,7 +54,7 @@ describe("DialogGlobalSettings", () => {
 
 			const layout = await globalSettingsPageObject.getDisplayQuality()
 
-			expect(layout).toEqual(SharpnessMode.PixelRatioNoAA)
+			expect(layout).toContain(SharpnessMode.PixelRatioNoAA)
 		})
 	})
 })

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

@@ -46,6 +46,7 @@ describe("fileChooserController", () => {
 			loadFiles: jest.fn().mockReturnValue({ catch: jest.fn() })
 		})()
 	}
+
 	describe("setNewData", () => {
 		it("should call loadFiles with read files", () => {
 			const file: NameDataPair = {

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

@@ -8,6 +8,8 @@ import { ExportCCFile } from "../../codeCharta.api.model"
 import zlib from "zlib"
 import { CUSTOM_CONFIG_FILE_EXTENSION, CustomConfigHelper } from "../../util/customConfigHelper"
 import { getCCFileAndDecorateFileChecksum } from "../../util/fileHelper"
+import { parseGameObjectsFile } from "../../util/gameObjectsParser/gameObjectsImporter"
+import { validateGameObjects } from "../../util/gameObjectsParser/gameObjectsValidator"
 
 export class FileChooserController {
 	private files: NameDataPair[] = []
@@ -38,7 +40,10 @@ export class FileChooserController {
 				}
 
 				reader.onload = event => {
-					content = (isCompressed ? zlib.unzipSync(Buffer.from(<string>event.target.result)) : event.target.result).toString()
+					const result = event.target.result.toString()
+					content = isCompressed ? zlib.unzipSync(Buffer.from(<string>event.target.result)).toString() : result
+					if (result.includes("gameObjectPositions") && validateGameObjects(result))
+						content = JSON.stringify(parseGameObjectsFile(result))
 				}
 
 				reader.onloadend = () => {

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

@@ -16,6 +16,11 @@ describe("FileChooser", () => {
 
 		await goto()
 	})
+	it("should load a valid gameObjects file", async () => {
+		await fileChooser.openFiles(["./app/codeCharta/assets/gameObjectsFile.json"])
+
+		expect(await filePanel.getSelectedName()).toEqual("gameObjectsFile.json")
+	})
 
 	it("should load another cc.json", async () => {
 		await fileChooser.openFiles(["./app/codeCharta/assets/sample3.cc.json"])

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

@@ -13,6 +13,7 @@
 	[handle-select-zero-partial-files]="$ctrl.selectZeroPartialFiles"
 	[handle-invert-selected-partial-files]="$ctrl.invertPartialFileSelection"
 	[handle-on-selection-closed]="$ctrl.onPartialSelectionClosed"
+	[handle-on-remove-file]="$ctrl.onRemoveFile"
 	[files]="$ctrl._viewModel.files"
 ></cc-file-panel-file-selector>
 

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

@@ -311,6 +311,13 @@ describe("filePanelController", () => {
 			]
 		})
 
+		it("should delete file", () => {
+			filePanelController.onRemoveFile("fileA", new Event("mouseEvent"))
+
+			const remainingFiles = storeService.getState().files
+			expect(remainingFiles.length).toEqual(3)
+		})
+
 		it("should not change selection when partially selected files still exist", () => {
 			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B, TEST_DELTA_MAP_C]))
 

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

@@ -56,7 +56,7 @@ export class FilePanelController implements FilesSelectionSubscriber, MapColorsS
 		this._viewModel.pictogramLowerColor = mapColors.negativeDelta
 	}
 
-	onRemoveFile(filename, $event): void {
+	onRemoveFile = (filename: string, $event): void => {
 		this.storeService.dispatch(removeFile(filename))
 		this.storeService.dispatch(removeRecentFile(filename))
 
@@ -69,7 +69,6 @@ export class FilePanelController implements FilesSelectionSubscriber, MapColorsS
 
 	private partialStateFileRemove(files: FileState[]) {
 		const selectedFiles = files.filter(x => x.selectedAs === FileSelectionState.Partial).map(fileState => getFileNameOf(fileState))
-
 		if (selectedFiles.length > 0) {
 			this.onPartialFilesChange(selectedFiles)
 		} else {

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

@@ -9,6 +9,7 @@ import { downgradeComponent } from "@angular/upgrade/static"
 import { FilePanelFileSelectorComponent } from "./filePanelFileSelector/filePanelFileSelector.component"
 import { FilePanelStateButtonsComponent } from "./filePanelStateButtons/filePanelStateButtons.component"
 import { FilePanelDeltaSelectorComponent } from "./filePanelDeltaSelector/filePanelDeltaSelector.component"
+import { RemoveFileButtonComponent } from "./filePanelFileSelector/removeFileButton/removeFileButton.component"
 
 angular
 	.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"])
@@ -16,3 +17,4 @@ angular
 	.directive("ccFilePanelFileSelector", downgradeComponent({ component: FilePanelFileSelectorComponent }))
 	.directive("ccFilePanelStateButtons", downgradeComponent({ component: FilePanelStateButtonsComponent }))
 	.directive("ccFilePanelDeltaSelector", downgradeComponent({ component: FilePanelDeltaSelectorComponent }))
+	.directive("ccRemoveFileButton", downgradeComponent({ component: RemoveFileButtonComponent }))

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

@@ -12,7 +12,13 @@
 		<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">
+	<mat-option class="filenames" *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
 		{{ file.file.fileMeta.fileName }}
+
+		<cc-remove-file-button
+			*ngIf="files.length > 1"
+			[filename]="file.file.fileMeta.fileName"
+			[onRemoveFile]="handleOnRemoveFile"
+		></cc-remove-file-button>
 	</mat-option>
 </mat-select>

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

@@ -0,0 +1,6 @@
+.filenames {
+	.mat-option-text {
+		display: flex;
+		justify-content: space-between;
+	}
+}

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

@@ -1,6 +1,6 @@
+import "./filePanelFileSelector.component.scss"
 import { Component, Input } from "@angular/core"
 import { FileState } from "../../../model/files/files"
-
 @Component({
 	selector: "cc-file-panel-file-selector",
 	template: require("./filePanelFileSelector.component.html")
@@ -13,4 +13,5 @@ export class FilePanelFileSelectorComponent {
 	@Input() handleSelectZeroPartialFiles: () => void
 	@Input() handleInvertSelectedPartialFiles: () => void
 	@Input() handleOnSelectionClosed: () => void
+	@Input() handleOnRemoveFile: (filename: string, event) => void
 }

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

@@ -0,0 +1,3 @@
+<button mat-button (click)="onRemoveFile(filename, $event)" title="Remove map">
+	<i class="fa fa-trash delete-symbol"></i>
+</button>

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss

@@ -0,0 +1,9 @@
+cc-remove-file-button {
+	.mat-button {
+		border-radius: 50%;
+		margin: 0;
+		min-width: 0;
+		line-height: 0;
+		padding: 8px 10px;
+	}
+}

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

@@ -0,0 +1,11 @@
+import "./removeFileButton.component.scss"
+import { Component, Input } from "@angular/core"
+
+@Component({
+	selector: "cc-remove-file-button",
+	template: require("./removeFileButton.component.html")
+})
+export class RemoveFileButtonComponent {
+	@Input() filename: string
+	@Input() onRemoveFile: (filename: string, event) => void
+}

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

@@ -11,14 +11,7 @@ import { isDeltaState } from "../../model/files/files.helper"
 import { BlacklistService, BlacklistSubscriber } from "../../state/store/fileSettings/blacklist/blacklist.service"
 import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service"
-
-export interface ColorRangeFromSubscriber {
-	onColorRangeFromUpdated(colorMetric: string, fromValue: number)
-}
-
-export interface ColorRangeToSubscriber {
-	onColorRangeToUpdated(colorMetric: string, toValue: number)
-}
+import { trackEventUsageData } from "../../util/usageDataTracker"
 
 export class RangeSliderController
 	implements ColorMetricSubscriber, ColorRangeSubscriber, FilesSelectionSubscriber, BlacklistSubscriber, MapColorsSubscriber
@@ -30,9 +23,6 @@ export class RangeSliderController
 	private MAX_DIGITS = 6
 	private FULL_WIDTH_SLIDER = 235
 
-	static COLOR_RANGE_FROM_UPDATED = "color-range-from-updated"
-	static COLOR_RANGE_TO_UPDATED = "color-range-to-updated"
-
 	private _viewModel: {
 		colorRangeFrom: number
 		colorRangeTo: number
@@ -145,32 +135,18 @@ export class RangeSliderController
 
 	private applySliderUpdateDone(modelValue, highValue, pointerType) {
 		if (pointerType === "min") {
-			this.broadcastColorRangeFromUpdated(this.storeService.getState().dynamicSettings.colorMetric, modelValue)
+			trackEventUsageData("color-range-from-updated", this.storeService.getState().files, {
+				colorMetric: this.storeService.getState().dynamicSettings.colorMetric,
+				fromValue: modelValue
+			})
 		} else if (pointerType === "max") {
-			this.broadcastColorRangeToUpdated(this.storeService.getState().dynamicSettings.colorMetric, highValue)
+			trackEventUsageData("color-range-to-updated", this.storeService.getState().files, {
+				colorMetric: this.storeService.getState().dynamicSettings.colorMetric,
+				toValue: highValue
+			})
 		}
 	}
 
-	private broadcastColorRangeFromUpdated(colorMetric: string, fromValue: number) {
-		this.$rootScope.$broadcast(RangeSliderController.COLOR_RANGE_FROM_UPDATED, { colorMetric, fromValue })
-	}
-
-	private broadcastColorRangeToUpdated(colorMetric: string, toValue: number) {
-		this.$rootScope.$broadcast(RangeSliderController.COLOR_RANGE_TO_UPDATED, { colorMetric, toValue })
-	}
-
-	static subscribeToColorRangeFromUpdated($rootScope: IRootScopeService, subscriber: ColorRangeFromSubscriber) {
-		$rootScope.$on(RangeSliderController.COLOR_RANGE_FROM_UPDATED, (_event, data) => {
-			subscriber.onColorRangeFromUpdated(data.colorMetric, data.fromValue)
-		})
-	}
-
-	static subscribeToColorRangeToUpdated($rootScope: IRootScopeService, subscriber: ColorRangeToSubscriber) {
-		$rootScope.$on(RangeSliderController.COLOR_RANGE_TO_UPDATED, (_event, data) => {
-			subscriber.onColorRangeToUpdated(data.colorMetric, data.toValue)
-		})
-	}
-
 	private updateInputFieldWidth() {
 		const fromLength = this._viewModel.colorRangeFrom.toFixed(0).length + 1
 		const toLength = this._viewModel.colorRangeTo.toFixed(0).length + 1

package/app/codeCharta/util/__snapshots__/usageDataTracker.spec.ts.snap

@@ -1,25 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UsageDataTracker trackEventUsageData should track node interaction blacklist event 1`] = `
-"some-already-tracked-events-from-file-storage
-{\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"eventType\\":\\"node_interaction\\",\\"eventTime\\":1612428357566,\\"payload\\":{\\"eventName\\":\\"ADD_BLACKLIST_ITEM\\",\\"id\\":\\"098f6bcd4621d373cade4e832627b4f6\\",\\"type\\":\\"exclude\\",\\"attributes\\":{}}}"
-`;
-
-exports[`UsageDataTracker trackEventUsageData should track node interaction focus event 1`] = `
-"some-already-tracked-events-from-file-storage
-{\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"eventType\\":\\"node_interaction\\",\\"eventTime\\":1612428357566,\\"payload\\":{\\"eventName\\":\\"FOCUS_NODE\\",\\"id\\":\\"9d1e46ce2260c90b8b7600a11ca08972\\"}}"
-`;
-
-exports[`UsageDataTracker trackEventUsageData should track setting changed event 1`] = `
+exports[`UsageDataTracker trackEventUsageData should track an event 1`] = `
 "some-already-tracked-events-from-file-storage
 {\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"eventType\\":\\"setting_changed\\",\\"eventTime\\":1612428357566,\\"payload\\":{\\"eventName\\":\\"SET_HEIGHT_METRIC\\",\\"newValue\\":\\"newHeightMetricValue\\"}}"
 `;
 
-exports[`UsageDataTracker trackEventUsageData should track setting changed event for resetting the blacklist 1`] = `
-"some-already-tracked-events-from-file-storage
-{\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"eventType\\":\\"setting_changed\\",\\"eventTime\\":1612428357566,\\"payload\\":{\\"eventName\\":\\"SET_BLACKLIST\\",\\"newValue\\":[]}}"
-`;
-
 exports[`UsageDataTracker trackMetaUsageData should not consider files with divergent metrics for statistic calculation 1`] = `"{\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"codeChartaApiVersion\\":\\"1.1\\",\\"creationTime\\":1612369999999,\\"exportedFileSizeInBytes\\":999,\\"statisticsPerLanguage\\":{\\"ts\\":{\\"metrics\\":{\\"rloc\\":{\\"avg\\":33.333333333333336,\\"max\\":70,\\"median\\":30,\\"min\\":0,\\"numberOfFiles\\":3,\\"totalSum\\":100,\\"firstQuantile\\":0,\\"thirdQuantile\\":70,\\"variance\\":822.2222222222223,\\"standardDeviation\\":28.674417556808756,\\"variationCoefficient\\":0.8602325267042626,\\"outliers\\":[],\\"metricValues\\":[0,30,70]}},\\"numberOfFiles\\":3,\\"maxFilePathDepth\\":4,\\"avgFilePathDepth\\":3.6666666666666665},\\"java\\":{\\"metrics\\":{\\"rloc\\":{\\"avg\\":55,\\"max\\":100,\\"median\\":50,\\"min\\":20,\\"numberOfFiles\\":4,\\"totalSum\\":220,\\"firstQuantile\\":25,\\"thirdQuantile\\":85,\\"variance\\":1025,\\"standardDeviation\\":32.01562118716424,\\"variationCoefficient\\":0.5821022034029862,\\"outliers\\":[],\\"metricValues\\":[100,30,70,20]},\\"functions\\":{\\"avg\\":280,\\"max\\":1000,\\"median\\":55,\\"min\\":10,\\"numberOfFiles\\":4,\\"totalSum\\":1120,\\"firstQuantile\\":10,\\"thirdQuantile\\":550,\\"variance\\":174150,\\"standardDeviation\\":417.31283229730667,\\"variationCoefficient\\":1.490402972490381,\\"outliers\\":[],\\"metricValues\\":[10,100,1000,10]},\\"mcc\\":{\\"avg\\":28.25,\\"max\\":100,\\"median\\":6,\\"min\\":1,\\"numberOfFiles\\":4,\\"totalSum\\":113,\\"firstQuantile\\":1.5,\\"thirdQuantile\\":55,\\"variance\\":1728.1875,\\"standardDeviation\\":41.57147459496716,\\"variationCoefficient\\":1.4715566228306958,\\"outliers\\":[],\\"metricValues\\":[1,100,10,2]}},\\"numberOfFiles\\":4,\\"maxFilePathDepth\\":4,\\"avgFilePathDepth\\":3.75}}}"`;
 
 exports[`UsageDataTracker trackMetaUsageData should track files with multiple programming languages properly 1`] = `"{\\"mapId\\":\\"invalid-md5-sample-checksum\\",\\"codeChartaApiVersion\\":\\"1.1\\",\\"creationTime\\":1612369999999,\\"exportedFileSizeInBytes\\":999,\\"statisticsPerLanguage\\":{\\"ts\\":{\\"metrics\\":{\\"rloc\\":{\\"avg\\":66.66666666666667,\\"max\\":100,\\"median\\":70,\\"min\\":30,\\"numberOfFiles\\":3,\\"totalSum\\":200,\\"firstQuantile\\":30,\\"thirdQuantile\\":100,\\"variance\\":822.2222222222223,\\"standardDeviation\\":28.674417556808756,\\"variationCoefficient\\":0.4301162633521313,\\"outliers\\":[],\\"metricValues\\":[100,30,70]},\\"functions\\":{\\"avg\\":370,\\"max\\":1000,\\"median\\":100,\\"min\\":10,\\"numberOfFiles\\":3,\\"totalSum\\":1110,\\"firstQuantile\\":10,\\"thirdQuantile\\":1000,\\"variance\\":199800,\\"standardDeviation\\":446.9899327725402,\\"variationCoefficient\\":1.2080808993852439,\\"outliers\\":[],\\"metricValues\\":[10,100,1000]},\\"mcc\\":{\\"avg\\":37,\\"max\\":100,\\"median\\":10,\\"min\\":1,\\"numberOfFiles\\":3,\\"totalSum\\":111,\\"firstQuantile\\":1,\\"thirdQuantile\\":100,\\"variance\\":1998,\\"standardDeviation\\":44.69899327725402,\\"variationCoefficient\\":1.2080808993852437,\\"outliers\\":[],\\"metricValues\\":[1,100,10]}},\\"numberOfFiles\\":3,\\"maxFilePathDepth\\":4,\\"avgFilePathDepth\\":3.6666666666666665},\\"java\\":{\\"metrics\\":{\\"rloc\\":{\\"avg\\":55,\\"max\\":100,\\"median\\":50,\\"min\\":20,\\"numberOfFiles\\":4,\\"totalSum\\":220,\\"firstQuantile\\":25,\\"thirdQuantile\\":85,\\"variance\\":1025,\\"standardDeviation\\":32.01562118716424,\\"variationCoefficient\\":0.5821022034029862,\\"outliers\\":[],\\"metricValues\\":[100,30,70,20]},\\"functions\\":{\\"avg\\":280,\\"max\\":1000,\\"median\\":55,\\"min\\":10,\\"numberOfFiles\\":4,\\"totalSum\\":1120,\\"firstQuantile\\":10,\\"thirdQuantile\\":550,\\"variance\\":174150,\\"standardDeviation\\":417.31283229730667,\\"variationCoefficient\\":1.490402972490381,\\"outliers\\":[],\\"metricValues\\":[10,100,1000,10]},\\"mcc\\":{\\"avg\\":28.25,\\"max\\":100,\\"median\\":6,\\"min\\":1,\\"numberOfFiles\\":4,\\"totalSum\\":113,\\"firstQuantile\\":1.5,\\"thirdQuantile\\":55,\\"variance\\":1728.1875,\\"standardDeviation\\":41.57147459496716,\\"variationCoefficient\\":1.4715566228306958,\\"outliers\\":[],\\"metricValues\\":[1,100,10,2]}},\\"numberOfFiles\\":4,\\"maxFilePathDepth\\":4,\\"avgFilePathDepth\\":3.75}}}"`;

package/app/codeCharta/util/codeMapHelper.ts

@@ -1,4 +1,4 @@
-import { hierarchy, HierarchyNode } from "d3-hierarchy"
+import { hierarchy } from "d3-hierarchy"
 import { BlacklistItem, BlacklistType, CodeMapNode, MarkedPackage } from "../codeCharta.model"
 import ignore from "ignore"
 import { FileState } from "../model/files/files"
@@ -105,7 +105,8 @@ export function isBlacklisted(node: CodeMapNode) {
 	return node.isExcluded || node.isFlattened
 }
 
-export function isLeaf(node: CodeMapNode | HierarchyNode<unknown>) {
+export type MaybeLeaf = { children?: unknown[] }
+export function isLeaf(node: MaybeLeaf) {
 	return node.children === undefined || node.children.length === 0
 }