codecharta-visualization 1.86.0 → 1.87.0

package/Dockerfile

@@ -1,3 +1,3 @@
-FROM nginx:1.21.4-alpine
+FROM nginx:1.21.5-alpine
 
 COPY ./dist/webpack /usr/share/nginx/html

package/app/app.module.ts

@@ -20,6 +20,8 @@ import { ColorPickerForMapColorModule } from "./codeCharta/ui/colorPickerForMapC
 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"
 
 @NgModule({
 	imports: [
@@ -31,7 +33,8 @@ import { MarkFolderColorPickerComponent } from "./codeCharta/ui/nodeContextMenu/
 		Export3DMapButtonModule,
 		LegendPanelModule,
 		ColorPickerForMapColorModule,
-		MarkFolderColorPickerModule
+		MarkFolderColorPickerModule,
+		FocusButtonsModule
 	],
 	declarations: [],
 	entryComponents: [
@@ -42,7 +45,8 @@ import { MarkFolderColorPickerComponent } from "./codeCharta/ui/nodeContextMenu/
 		LegendPanelComponent,
 		LabelledColorPickerComponent,
 		ColorPickerForMapColorComponent,
-		MarkFolderColorPickerComponent
+		MarkFolderColorPickerComponent,
+		FocusButtonsComponent
 	]
 })
 export class AppModule {

package/app/codeCharta/codeCharta.model.ts

@@ -119,7 +119,7 @@ export interface DynamicSettings {
 	colorMetric: string
 	distributionMetric: string
 	edgeMetric: string
-	focusedNodePath: string
+	focusedNodePath: string[]
 	searchPattern: string
 	margin: number
 	colorRange: ColorRange

package/app/codeCharta/state/store/dynamicSettings/dynamicSettings.splitter.ts

@@ -7,11 +7,11 @@ import { splitEdgeMetricAction } from "./edgeMetric/edgeMetric.splitter"
 import { splitColorRangeAction } from "./colorRange/colorRange.splitter"
 import { splitMarginAction } from "./margin/margin.splitter"
 import { splitSearchPatternAction } from "./searchPattern/searchPattern.splitter"
-import { splitFocusedNodePathAction } from "./focusedNodePath/focusedNodePath.splitter"
 import { splitHeightMetricAction } from "./heightMetric/heightMetric.splitter"
 import { splitDistributionMetricAction } from "./distributionMetric/distributionMetric.splitter"
 import { splitColorMetricAction } from "./colorMetric/colorMetric.splitter"
 import { splitAreaMetricAction } from "./areaMetric/areaMetric.splitter"
+import { setAllFocusedNodes } from "./focusedNodePath/focusedNodePath.actions"
 
 export function splitDynamicSettingsActions(payload: RecursivePartial<DynamicSettings>) {
 	const actions: CCAction[] = []
@@ -45,7 +45,7 @@ export function splitDynamicSettingsActions(payload: RecursivePartial<DynamicSet
 	}
 
 	if (payload.focusedNodePath !== undefined) {
-		actions.push(splitFocusedNodePathAction(payload.focusedNodePath))
+		actions.push(setAllFocusedNodes(payload.focusedNodePath))
 	}
 
 	if (payload.heightMetric !== undefined) {

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/currentFocused.selector.ts

@@ -0,0 +1,8 @@
+import { createSelector } from "../../../angular-redux/createSelector"
+import { CcState } from "../../store"
+import { focusedNodePathSelector } from "./focusedNodePath.selector"
+
+export const currentFocusedNodePathSelector: (state: CcState) => string | undefined = createSelector(
+	[focusedNodePathSelector],
+	focusedNodePath => focusedNodePath[0]
+)

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

@@ -2,7 +2,9 @@ import { CCAction } from "../../../../codeCharta.model"
 
 export enum FocusedNodePathActions {
 	FOCUS_NODE = "FOCUS_NODE",
-	UNFOCUS_NODE = "UNFOCUS_NODE"
+	UNFOCUS_NODE = "UNFOCUS_NODE",
+	UNFOCUS_ALL_NODES = "UNFOCUS_ALL_NODES",
+	SET_ALL_FOCUSED_NODES = "SET_ALL_FOCUSED_NODES"
 }
 
 export interface FocusNodeAction extends CCAction {
@@ -12,12 +14,19 @@ export interface FocusNodeAction extends CCAction {
 
 export interface UnfocusNodeAction extends CCAction {
 	type: FocusedNodePathActions.UNFOCUS_NODE
-	payload: string
 }
 
-export type FocusedNodePathAction = FocusNodeAction | UnfocusNodeAction
+export interface UnfocusAllNodesAction extends CCAction {
+	type: FocusedNodePathActions.UNFOCUS_ALL_NODES
+}
+export interface SetAllFocusedNodesAction extends CCAction {
+	type: FocusedNodePathActions.SET_ALL_FOCUSED_NODES
+	payload: string[]
+}
+
+export type FocusedNodePathAction = FocusNodeAction | UnfocusNodeAction | UnfocusAllNodesAction | SetAllFocusedNodesAction
 
-export function focusNode(focusedNodePath: string = defaultFocusedNodePath): FocusNodeAction {
+export function focusNode(focusedNodePath: string): FocusNodeAction {
 	return {
 		type: FocusedNodePathActions.FOCUS_NODE,
 		payload: focusedNodePath
@@ -26,9 +35,20 @@ export function focusNode(focusedNodePath: string = defaultFocusedNodePath): Foc
 
 export function unfocusNode(): UnfocusNodeAction {
 	return {
-		type: FocusedNodePathActions.UNFOCUS_NODE,
-		payload: ""
+		type: FocusedNodePathActions.UNFOCUS_NODE
+	}
+}
+
+export function unfocusAllNodes(): UnfocusAllNodesAction {
+	return {
+		type: FocusedNodePathActions.UNFOCUS_ALL_NODES
+	}
+}
+export function setAllFocusedNodes(focusedNodePaths: string[]): SetAllFocusedNodesAction {
+	return {
+		type: FocusedNodePathActions.SET_ALL_FOCUSED_NODES,
+		payload: focusedNodePaths
 	}
 }
 
-export const defaultFocusedNodePath = ""
+export const defaultFocusedNodePath: string[] = []

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.reducer.spec.ts

@@ -1,40 +1,56 @@
 import { focusedNodePath } from "./focusedNodePath.reducer"
-import { FocusedNodePathAction, focusNode, unfocusNode } from "./focusedNodePath.actions"
+import { FocusedNodePathAction, focusNode, setAllFocusedNodes, unfocusAllNodes, unfocusNode } from "./focusedNodePath.actions"
 
 describe("focusedNodePath", () => {
 	describe("Default State", () => {
 		it("should initialize the default state", () => {
 			const result = focusedNodePath(undefined, {} as FocusedNodePathAction)
 
-			expect(result).toEqual("")
+			expect(result).toEqual([])
 		})
 	})
 
 	describe("Action: FOCUS_NODE", () => {
 		it("should set new focusedNodePath", () => {
-			const result = focusedNodePath("", focusNode("some/path/*.ts"))
+			const result = focusedNodePath([], focusNode("some/path/*.ts"))
 
-			expect(result).toEqual("some/path/*.ts")
+			expect(result).toEqual(["some/path/*.ts"])
 		})
 
-		it("should set default focusedNodePath", () => {
-			const result = focusedNodePath("some/path/*.ts", focusNode())
+		it("should add focusedNodePath", () => {
+			const result = focusedNodePath(["some/path/*.ts"], focusNode("foo.ts"))
 
-			expect(result).toEqual("")
+			expect(result).toEqual(["foo.ts", "some/path/*.ts"])
 		})
 
 		it("should not allow to focus root folder", () => {
-			const result = focusedNodePath("/root", focusNode())
+			const result = focusedNodePath([], focusNode("/root"))
 
-			expect(result).toEqual("")
+			expect(result).toEqual([])
 		})
 	})
 
 	describe("Action: UNFOCUS_NODE", () => {
 		it("should remove focusedNodePath", () => {
-			const result = focusedNodePath("some/path/*.ts", unfocusNode())
+			const result = focusedNodePath(["some/path/*.ts", "foo.ts"], unfocusNode())
 
-			expect(result).toEqual("")
+			expect(result).toEqual(["foo.ts"])
+		})
+	})
+
+	describe("Action: UNFOCUS_ALL_NODES", () => {
+		it("should remove all focusedNodePaths", () => {
+			const result = focusedNodePath(["some/path/*.ts", "foo.ts"], unfocusAllNodes())
+
+			expect(result).toEqual([])
+		})
+	})
+
+	describe("Action: SET_ALL_FOCUSED_NODES", () => {
+		it("should set all focusedNodePaths", () => {
+			const result = focusedNodePath([], setAllFocusedNodes(["some/path/*.ts", "foo.ts"]))
+
+			expect(result).toEqual(["some/path/*.ts", "foo.ts"])
 		})
 	})
 })

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.reducer.ts

@@ -1,12 +1,18 @@
-import { FocusedNodePathAction, FocusedNodePathActions, focusNode } from "./focusedNodePath.actions"
+import { defaultFocusedNodePath, FocusedNodePathAction, FocusedNodePathActions } from "./focusedNodePath.actions"
 import { CodeChartaService } from "../../../../codeCharta.service"
 
-export function focusedNodePath(state = focusNode().payload, action: FocusedNodePathAction) {
+export function focusedNodePath(state = defaultFocusedNodePath, action: FocusedNodePathAction) {
 	switch (action.type) {
-		case FocusedNodePathActions.FOCUS_NODE:
-			return action.payload === CodeChartaService.ROOT_PATH ? state : action.payload
+		case FocusedNodePathActions.FOCUS_NODE: {
+			if (action.payload === CodeChartaService.ROOT_PATH) return state
+			return [action.payload, ...state]
+		}
 		case FocusedNodePathActions.UNFOCUS_NODE:
-			return action.payload
+			return state.slice(1)
+		case FocusedNodePathActions.UNFOCUS_ALL_NODES:
+			return []
+		case FocusedNodePathActions.SET_ALL_FOCUSED_NODES:
+			return [...action.payload]
 		default:
 			return state
 	}

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/store"
+import { dynamicSettingsSelector } from "../dynamicSettings.selector"
+
+export const focusedNodePathSelector = createSelector([dynamicSettingsSelector], dynamicSettings => dynamicSettings.focusedNodePath)

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.service.spec.ts

@@ -57,7 +57,7 @@ describe("FocusedNodePathService", () => {
 
 			focusedNodePathService.onStoreChanged(FocusedNodePathActions.FOCUS_NODE)
 
-			expect($rootScope.$broadcast).toHaveBeenCalledWith("focus-node", { focusedNodePath: "some/path/*.ts" })
+			expect($rootScope.$broadcast).toHaveBeenCalledWith("focus-node", { focusedNodePath: ["some/path/*.ts"] })
 		})
 
 		it("should notify all subscribers with the new focusedNodePath value", () => {
@@ -85,7 +85,7 @@ describe("FocusedNodePathService", () => {
 
 			focusedNodePathService.onFilesSelectionChanged()
 
-			expect(storeService.getState().dynamicSettings.focusedNodePath).toEqual("")
+			expect(storeService.getState().dynamicSettings.focusedNodePath).toEqual([])
 		})
 	})
 })

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.service.ts

@@ -43,7 +43,7 @@ export class FocusedNodePathService implements StoreSubscriber, FilesSelectionSu
 		return this.storeService.getState().dynamicSettings.focusedNodePath
 	}
 
-	private notifyFocus(newState: string) {
+	private notifyFocus(newState: string[]) {
 		this.$rootScope.$broadcast(FocusedNodePathService.FOCUS_NODE_EVENT, { focusedNodePath: newState })
 	}
 

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

@@ -1,14 +1,13 @@
-import { CCAction, MarkedPackage } from "../../../../codeCharta.model"
+import { CCAction, CodeMapNode, MarkedPackage } from "../../../../codeCharta.model"
 
 export enum MarkedPackagesActions {
 	SET_MARKED_PACKAGES = "SET_MARKED_PACKAGES",
-	CALCULATE_MARKED_PACKAGES_FOR_PATHS = "CALCULATE_MARKED_PACKAGES",
 	MARK_PACKAGE = "MARK_PACKAGE",
 	UNMARK_PACKAGE = "UNMARK_PACKAGE"
 }
 
-export interface CalculateMarkedPackagesAction extends CCAction {
-	type: MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS
+export interface MarkPackagesAction extends CCAction {
+	type: MarkedPackagesActions.MARK_PACKAGE
 	payload: MarkedPackage[]
 }
 
@@ -19,14 +18,14 @@ export interface SetMarkedPackagesAction extends CCAction {
 
 export interface UnmarkPackageAction extends CCAction {
 	type: MarkedPackagesActions.UNMARK_PACKAGE
-	payload: number
+	payload: CodeMapNode["path"]
 }
 
-export type MarkedPackagesAction = SetMarkedPackagesAction | UnmarkPackageAction | CalculateMarkedPackagesAction
+export type MarkedPackagesAction = SetMarkedPackagesAction | UnmarkPackageAction | MarkPackagesAction
 
-export function calculateMarkedPackages(packagesToBeMarked: MarkedPackage[]): CalculateMarkedPackagesAction {
+export function markPackages(packagesToBeMarked: MarkedPackage[]): MarkPackagesAction {
 	return {
-		type: MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS,
+		type: MarkedPackagesActions.MARK_PACKAGE,
 		payload: packagesToBeMarked
 	}
 }
@@ -38,10 +37,10 @@ export function setMarkedPackages(markedPackages: MarkedPackage[] = defaultMarke
 	}
 }
 
-export function unmarkPackage(index: number): UnmarkPackageAction {
+export function unmarkPackage(node: Pick<CodeMapNode, "path">): UnmarkPackageAction {
 	return {
 		type: MarkedPackagesActions.UNMARK_PACKAGE,
-		payload: index
+		payload: node.path
 	}
 }
 

package/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.spec.ts

@@ -1,5 +1,5 @@
 import { markedPackages } from "./markedPackages.reducer"
-import { MarkedPackagesAction, setMarkedPackages, calculateMarkedPackages, unmarkPackage } from "./markedPackages.actions"
+import { MarkedPackagesAction, setMarkedPackages, markPackages, unmarkPackage } from "./markedPackages.actions"
 import { MARKED_PACKAGES } from "../../../../util/dataMocks"
 
 describe("markedPackages", () => {
@@ -26,17 +26,47 @@ describe("markedPackages", () => {
 	})
 
 	describe("Action: UNMARK_PACKAGE", () => {
-		it("should remove a marked package from array", () => {
-			const result = markedPackages([MARKED_PACKAGES[0]], unmarkPackage(0))
-
+		it("should remove a marked package", () => {
+			const result = markedPackages([{ path: "/root", color: "#000000" }], unmarkPackage({ path: "/root" }))
 			expect(result).toEqual([])
 		})
+
+		it("should remove nothing, if a parent of a marked node is unmarked", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], unmarkPackage({ path: "/root" }))
+			expect(result).toEqual([{ path: "/root/child", color: "#000000" }])
+		})
 	})
 
-	describe("Action: CALCULATE_MARKED_PACKAGES", () => {
-		it("should add all packages", () => {
-			const result = markedPackages([MARKED_PACKAGES[0]], calculateMarkedPackages(MARKED_PACKAGES.slice(1)))
+	describe("Action: MARK_PACKAGES", () => {
+		it("should add a package", () => {
+			const result = markedPackages([MARKED_PACKAGES[0]], markPackages(MARKED_PACKAGES.slice(1)))
 			expect(result).toEqual(MARKED_PACKAGES)
 		})
+
+		it("should remove the children of a marked package if children marked color is the same", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], markPackages([{ path: "/root", color: "#000000" }]))
+			expect(result.length).toBe(1)
+			expect(result[0]).toEqual({ path: "/root", color: "#000000" })
+		})
+
+		it("should not remove the children of a marked package if color is different", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], markPackages([{ path: "/root", color: "#ffffff" }]))
+			expect(result.length).toBe(2)
+			expect(result[0]).toEqual({ path: "/root/child", color: "#000000" })
+			expect(result[1]).toEqual({ path: "/root", color: "#ffffff" })
+		})
+
+		it("should replace package if it was already marked", () => {
+			const result = markedPackages(
+				[
+					{ path: "/root", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				markPackages([{ path: "/root", color: "#333333" }])
+			)
+			expect(result.length).toBe(2)
+			expect(result[0]).toEqual({ path: "/root", color: "#333333" })
+			expect(result[1]).toEqual({ path: "/root/child", color: "#000000" })
+		})
 	})
 })

package/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts

@@ -1,14 +1,18 @@
 import { MarkedPackagesAction, MarkedPackagesActions, setMarkedPackages } from "./markedPackages.actions"
 import { removeEntryAtIndexFromArray } from "../../../../util/reduxHelper"
 import { addMarkedPackage } from "./util/addMarkedPackage"
+import { findIndexOfMarkedPackageOrParent } from "./util/findIndexOfMarkedPackageOrParent"
 
 export function markedPackages(state = setMarkedPackages().payload, action: MarkedPackagesAction) {
 	switch (action.type) {
 		case MarkedPackagesActions.SET_MARKED_PACKAGES:
 			return action.payload
-		case MarkedPackagesActions.UNMARK_PACKAGE:
-			return removeEntryAtIndexFromArray(state, action.payload)
-		case MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS: {
+		case MarkedPackagesActions.UNMARK_PACKAGE: {
+			const indexOfPackageToBeUnmarked = findIndexOfMarkedPackageOrParent(state, action.payload)
+			if (indexOfPackageToBeUnmarked !== -1) return removeEntryAtIndexFromArray(state, indexOfPackageToBeUnmarked)
+			return state
+		}
+		case MarkedPackagesActions.MARK_PACKAGE: {
 			const markedPackagesMap = new Map(state.map(entry => [entry.path, entry]))
 
 			for (const markedPackage of action.payload) {

package/app/codeCharta/state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent.spec.ts

@@ -0,0 +1,39 @@
+import { findIndexOfMarkedPackageOrParent } from "./findIndexOfMarkedPackageOrParent"
+
+describe("findIndexOfMarkedPackageOrParent", () => {
+	it("should return -1 if given path is neither marked nor a child of a marked package", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child/grandchild", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				"/root/wolf"
+			)
+		).toBe(-1)
+	})
+
+	it("should find exact package even if a children was marked previously", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child/grandchild", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				"/root/child"
+			)
+		).toBe(1)
+	})
+
+	it("should find closest parent if given path is not marked", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child", color: "#000000" },
+					{ path: "/root/child/grandchild", color: "#ffffff" }
+				],
+				"/root/child/grandchild/grandgrandchild"
+			)
+		).toBe(1)
+	})
+})

package/app/codeCharta/state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent.ts

@@ -0,0 +1,19 @@
+import { MarkedPackage } from "../../../../../codeCharta.model"
+
+/** @return index of exact match if there is an exact match. Otherwise return index of parent or -1  */
+export const findIndexOfMarkedPackageOrParent = (markedPackages: MarkedPackage[], nodePath: string) => {
+	const indexOfNodePath = markedPackages.findIndex(mp => mp.path === nodePath)
+	if (indexOfNodePath !== -1) return indexOfNodePath
+
+	let indexOfNearestParent = -1
+	for (let loopIndex = 0; loopIndex < markedPackages.length; loopIndex++) {
+		const markedPackage = markedPackages[loopIndex]
+		if (
+			nodePath.startsWith(markedPackage.path) &&
+			(indexOfNearestParent === -1 || markedPackages[indexOfNearestParent].path.length < markedPackage.path.length)
+		)
+			indexOfNearestParent = loopIndex
+	}
+
+	return indexOfNearestParent
+}

package/app/codeCharta/state/store/state.splitter.spec.ts

@@ -40,7 +40,7 @@ describe("state.splitter", () => {
 		it("should return 1 FOCUS_NODE action", () => {
 			const partialState: RecursivePartial<State> = {
 				dynamicSettings: {
-					focusedNodePath: "/some/path"
+					focusedNodePath: ["/some/path"]
 				}
 			}
 
@@ -48,7 +48,7 @@ describe("state.splitter", () => {
 
 			expect(result.length).toEqual(1)
 
-			expect(result[0].type).toEqual(FocusedNodePathActions.FOCUS_NODE)
+			expect(result[0].type).toEqual(FocusedNodePathActions.SET_ALL_FOCUSED_NODES)
 		})
 
 		it("should return 3 atomic actions from different parts of the state", () => {
@@ -80,13 +80,13 @@ describe("state.splitter", () => {
 	describe("setDynamicSettings", () => {
 		it("should return 1 FOCUS_NODE action", () => {
 			const partialDynamicSettings: RecursivePartial<DynamicSettings> = {
-				focusedNodePath: "/some/path"
+				focusedNodePath: ["/some/path"]
 			}
 
 			const result: CCAction[] = splitStateActions(setDynamicSettings(partialDynamicSettings))
 
 			expect(result.length).toEqual(1)
-			expect(result[0].type).toEqual(FocusedNodePathActions.FOCUS_NODE)
+			expect(result[0].type).toEqual(FocusedNodePathActions.SET_ALL_FOCUSED_NODES)
 			expect(result[0].payload).toEqual(partialDynamicSettings.focusedNodePath)
 		})
 	})

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

@@ -10,7 +10,7 @@ import { setDynamicSettings } from "./store/dynamicSettings/dynamicSettings.acti
 import { setMargin } from "./store/dynamicSettings/margin/margin.actions"
 import { setCamera } from "./store/appSettings/camera/camera.actions"
 import { setIsLoadingMap } from "./store/appSettings/isLoadingMap/isLoadingMap.actions"
-import { setIsLoadingFile } from "./store/appSettings/isLoadingFile/isLoadingFile.actions"
+import { toggleSortingOrderAscending } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
 
 describe("StoreService", () => {
 	let storeService: StoreService
@@ -118,9 +118,9 @@ describe("StoreService", () => {
 			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
 		})
 
-		it("should show not the loading-gif when an action is triggered, that changes the loading-gif state", () => {
+		it("should show not the loading-gif when an action is triggered, that doesn't change the loading-gif state", () => {
 			storeService.dispatch(setIsLoadingMap(false))
-			storeService.dispatch(setIsLoadingFile(false))
+			storeService.dispatch(toggleSortingOrderAscending())
 
 			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
 		})

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

@@ -14,6 +14,7 @@ import { ExperimentalFeaturesEnabledActions } from "./store/appSettings/enableEx
 import { Store } from "./store/store"
 import { ScreenshotToClipboardEnabledActions } from "./store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
 import { HoveredBuildingPathActions } from "./store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
+import { unfocusAllNodes } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
 
 export interface StoreSubscriber {
 	onStoreChanged(actionType: string)
@@ -65,6 +66,10 @@ export class StoreService {
 			this.dispatch(setIsLoadingMap(true))
 		}
 
+		if (isActionOfType(action.type, IsLoadingFileActions)) {
+			this.dispatch(unfocusAllNodes())
+		}
+
 		for (const atomicAction of splitStateActions(action)) {
 			this.originalDispatch(atomicAction)
 			if (!options.silent) {

package/app/codeCharta/ui/artificialIntelligence/__snapshots__/artificialIntelligence.component.spec.ts.snap

@@ -9,38 +9,26 @@ Object {
 }
 `;
 
-exports[`ArtificialIntelligenceController on files selection changed should clear and calculate risk profile for Java map 1`] = `
-Object {
-  "highRisk": 37,
-  "lowRisk": 46,
-  "moderateRisk": 17,
-  "veryHighRisk": 0,
-}
-`;
-
-exports[`ArtificialIntelligenceController on files selection changed should create custom config suggestions sorted by outlierCustomConfigId 1`] = `
+exports[`ArtificialIntelligenceController on files selection changed should calculate suspicious metrics sorted by isOutlier 1`] = `
 Array [
   Object {
     "from": 365,
-    "generalCustomConfigId": "mocked",
+    "isOutlier": true,
     "max": 0,
     "metric": "loc",
     "min": 0,
-    "outlierCustomConfigId": "mocked",
     "to": 554,
   },
   Object {
     "from": 29,
-    "generalCustomConfigId": "mocked",
+    "isOutlier": true,
     "max": 0,
     "metric": "functions",
     "min": 0,
-    "outlierCustomConfigId": "mocked",
     "to": 44,
   },
   Object {
     "from": 48,
-    "generalCustomConfigId": "mocked",
     "max": 0,
     "metric": "mcc",
     "min": 0,
@@ -49,8 +37,17 @@ Array [
 ]
 `;
 
-exports[`ArtificialIntelligenceController on files selection changed should create custom config suggestions sorted by outlierCustomConfigId 2`] = `
+exports[`ArtificialIntelligenceController on files selection changed should calculate suspicious metrics sorted by isOutlier 2`] = `
 Array [
   "rloc (real lines of code)",
 ]
 `;
+
+exports[`ArtificialIntelligenceController on files selection changed should clear and calculate risk profile for Java map 1`] = `
+Object {
+  "highRisk": 37,
+  "lowRisk": 46,
+  "moderateRisk": 17,
+  "veryHighRisk": 0,
+}
+`;

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

@@ -43,8 +43,8 @@
 			<ul class="suspicious-metrics">
 				<li class="suspicious-metric" ng-repeat="item in $ctrl._viewModel.suspiciousMetricSuggestionLinks">
 					<md-button
-						class="metric-button {{ item.outlierCustomConfigId.length > 0 ? 'high-risk' : '' }}"
-						ng-click="$ctrl.applyCustomConfig(item.generalCustomConfigId)"
+						class="metric-button"
+						ng-click="$ctrl.applySuspiciousMetric(item, false)"
 						title="Apply Map Configuration to show files with suspicious metric {{
 							item.metric
 						}} and high risk or very high risk depending on selection"
@@ -54,8 +54,8 @@
 
 					<md-button
 						class="risk-button"
-						ng-click="$ctrl.applyCustomConfig(item.outlierCustomConfigId)"
-						ng-show="item.outlierCustomConfigId.length > 0"
+						ng-click="$ctrl.applySuspiciousMetric(item, true)"
+						ng-show="item.isOutlier"
 						title="Show very high risk files"
 					>
 						<i class="fa fa-exclamation-triangle"></i>

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

@@ -68,10 +68,6 @@
 				padding: 0 12px;
 				text-transform: none;
 				margin: 0;
-
-				&.high-risk {
-					border-radius: 5px 0 0 5px;
-				}
 			}
 
 			.risk-button {