Feature/2584/adjust default number of displayed labels

CHANGELOG.md

@@ -13,7 +13,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Changed
 
--   Change default behaviour of GitLogParser to use new subcommands [#3026](https://github.com/MaibornWolff/codecharta/pull/3026)
+-   Change default behaviour of GitLogParser to use new
+    subcommands [#3026](https://github.com/MaibornWolff/codecharta/pull/3026)
+-   Set default value for displaying labels 1 per 100 buildings with a maximum of 10
+    labels [#3046](https://github.com/MaibornWolff/codecharta/pull/3046)
 
 ### Fixed 🐞
 

visualization/app/app.module.ts

@@ -46,6 +46,7 @@ import { ViewCubeModule } from "./codeCharta/ui/viewCube/viewCube.module"
 import { ToolBarModule } from "./codeCharta/ui/toolBar/toolBar.module"
 import { RenderCodeMapEffect } from "./codeCharta/state/effects/renderCodeMapEffect/renderCodeMap.effect"
 import { AutoFitCodeMapOnFileSelectionChangeEffect } from "./codeCharta/state/effects/autoFitCodeMapOnFileSelectionChange/autoFitCodeMapOnFileSelectionChange.effect"
+import { UpdateVisibleTopLabelsEffect } from "./codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect"
 
 @NgModule({
 	imports: [
@@ -62,7 +63,8 @@ import { AutoFitCodeMapOnFileSelectionChangeEffect } from "./codeCharta/state/ef
 			ResetChosenMetricsEffect,
 			UpdateEdgePreviewsEffect,
 			RenderCodeMapEffect,
-			AutoFitCodeMapOnFileSelectionChangeEffect
+			AutoFitCodeMapOnFileSelectionChangeEffect,
+			UpdateVisibleTopLabelsEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,

visualization/app/codeCharta/state/effects/updateVisibleTopLabels/getNumberOfTopLabels.ts

@@ -0,0 +1,13 @@
+import { defaultAmountOfTopLabels } from "../../store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
+import { CodeMapNode } from "../../../codeCharta.model"
+
+const BUILDINGS_PER_LABEL = 100
+const MAX_NUMBER_OF_LABELS = 10
+
+export const getNumberOfTopLabels = (codeMapNodes: CodeMapNode[]) => {
+	const numberOfLabels = Math.floor(codeMapNodes.length / BUILDINGS_PER_LABEL)
+	if (numberOfLabels <= defaultAmountOfTopLabels) {
+		return defaultAmountOfTopLabels
+	}
+	return Math.min(numberOfLabels, MAX_NUMBER_OF_LABELS)
+}

visualization/app/codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect.spec.ts

@@ -0,0 +1,70 @@
+import { TestBed } from "@angular/core/testing"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { ApplicationInitStatus } from "@angular/core"
+import { UpdateVisibleTopLabelsEffect } from "./updateVisibleTopLabels.effect"
+import { setAmountOfTopLabels } from "../../store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
+import { codeMapNodesSelector } from "../../selectors/accumulatedData/codeMapNodesSelector"
+import { Subject } from "rxjs"
+
+import { visibleFileStatesSelector } from "../../selectors/visibleFileStates.selector"
+import { FileState } from "../../../model/files/files"
+import { Store } from "../../angular-redux/store"
+import { CodeMapNode } from "../../../codeCharta.model"
+
+describe("updateVisibleTopLabelsEffect", () => {
+	let mockedVisibleFileStatesSelector = new Subject()
+	let mockedCodeMapNodesSelector = new Subject()
+
+	const mockedStore = {
+		select: (selector: unknown) => {
+			switch (selector) {
+				case visibleFileStatesSelector:
+					return mockedVisibleFileStatesSelector
+				case codeMapNodesSelector:
+					return mockedCodeMapNodesSelector
+				default:
+					throw new Error("selector is not mocked")
+			}
+		},
+		dispatch: jest.fn()
+	}
+
+	beforeEach(async () => {
+		mockedStore.dispatch = jest.fn()
+		mockedVisibleFileStatesSelector = new Subject()
+		mockedCodeMapNodesSelector = new Subject()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([UpdateVisibleTopLabelsEffect])],
+			providers: [{ provide: Store, useValue: mockedStore }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		mockedVisibleFileStatesSelector.complete()
+		mockedCodeMapNodesSelector.complete()
+	})
+
+	it("should ignore a not relevant action", () => {
+		//not implemented yet
+		expect(mockedStore.dispatch).not.toHaveBeenCalled()
+	})
+
+	it("should set setAmountOfTopLabels to 1 on FileState change when number of nodes are equal or less than 100", () => {
+		mockedVisibleFileStatesSelector.next([] as FileState[])
+		mockedCodeMapNodesSelector.next(Array.from({ length: 10 }).fill({}) as CodeMapNode[])
+		expect(mockedStore.dispatch).toHaveBeenCalledWith(setAmountOfTopLabels(1))
+	})
+
+	it("should set setAmountOfTopLabels to 2 on FileState change when number of nodes are greater than or equal to 200 and less than 300", () => {
+		mockedVisibleFileStatesSelector.next([] as FileState[])
+		mockedCodeMapNodesSelector.next(Array.from({ length: 200 }).fill({}) as CodeMapNode[])
+		expect(mockedStore.dispatch).toHaveBeenCalledWith(setAmountOfTopLabels(5))
+	})
+
+	it("should set setAmountOfTopLabels to 10 (max limit for displayed top labels) on FileState change when number of nodes are greater than 1000", () => {
+		mockedVisibleFileStatesSelector.next([] as FileState[])
+		mockedCodeMapNodesSelector.next(Array.from({ length: 1001 }).fill({}) as CodeMapNode[])
+		expect(mockedStore.dispatch).toHaveBeenCalledWith(setAmountOfTopLabels(5))
+	})
+})

visualization/app/codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect.ts

@@ -0,0 +1,22 @@
+import { Inject, Injectable } from "@angular/core"
+import { Store } from "../../angular-redux/store"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { map, withLatestFrom } from "rxjs"
+import { visibleFileStatesSelector } from "../../selectors/visibleFileStates.selector"
+import { codeMapNodesSelector } from "../../selectors/accumulatedData/codeMapNodesSelector"
+import { setAmountOfTopLabels } from "../../store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
+import { getNumberOfTopLabels } from "./getNumberOfTopLabels"
+
+@Injectable()
+export class UpdateVisibleTopLabelsEffect {
+	constructor(@Inject(Store) private store: Store) {}
+
+	updateVisibleTopLabels$ = createEffect(() =>
+		this.store.select(visibleFileStatesSelector).pipe(
+			withLatestFrom(this.store.select(codeMapNodesSelector)),
+			map(([, codeMapNodes]) => {
+				return setAmountOfTopLabels(getNumberOfTopLabels(codeMapNodes))
+			})
+		)
+	)
+}

visualization/app/codeCharta/state/selectors/accumulatedData/codeMapNodesSelector.ts

@@ -0,0 +1,10 @@
+import { AccumulatedData, accumulatedDataSelector } from "./accumulatedData.selector"
+import { createSelector } from "../../angular-redux/createSelector"
+import { getAllNodes } from "../../../util/codeMapHelper"
+import { CodeMapNode } from "../../../codeCharta.model"
+
+export const getCodeMapNodes = (accumulatedData: Pick<AccumulatedData, "unifiedMapNode">): CodeMapNode[] => {
+	return getAllNodes(accumulatedData.unifiedMapNode)
+}
+
+export const codeMapNodesSelector = createSelector([accumulatedDataSelector], getCodeMapNodes)

visualization/app/codeCharta/ui/searchPanel/matchingFilesCounter/selectors/matchingFilesCounter.selector.ts

@@ -1,10 +1,10 @@
 import { BlacklistItem, BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
 import { createSelector } from "../../../../state/angular-redux/store"
-import { accumulatedDataSelector } from "../../../../state/selectors/accumulatedData/accumulatedData.selector"
 import { searchedNodesSelector } from "../../../../state/selectors/searchedNodes/searchedNodes.selector"
 import { blacklistSelector } from "../../../../state/store/fileSettings/blacklist/blacklist.selector"
 import { CcState } from "../../../../state/store/store"
-import { getAllNodes, isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
+import { isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
+import { codeMapNodesSelector } from "../../../../state/selectors/accumulatedData/codeMapNodesSelector"
 
 const getBlacklistedFileCount = (blacklistType: BlacklistType, nodes: CodeMapNode[], blacklist: BlacklistItem[]) =>
 	nodes.reduce((count, node) => (isPathBlacklisted(node.path, blacklist, blacklistType) ? count + 1 : count), 0)
@@ -16,9 +16,8 @@ export type MatchingFilesCounter = {
 }
 
 export const matchingFilesCounterSelector: (state: CcState) => MatchingFilesCounter = createSelector(
-	[accumulatedDataSelector, searchedNodesSelector, blacklistSelector],
-	(accumulatedData, searchedNodes, blacklist) => {
-		const allNodes = getAllNodes(accumulatedData.unifiedMapNode)
+	[searchedNodesSelector, blacklistSelector, codeMapNodesSelector],
+	(searchedNodes, blacklist, allNodes) => {
 		const searchedNodeLeaves = searchedNodes.filter(node => isLeaf(node))
 		return {
 			fileCount: `${searchedNodeLeaves.length}/${allNodes.length}`,

visualization/app/codeCharta/util/codeMapHelper.ts

@@ -26,7 +26,7 @@ export function transformPath(toTransform: string) {
 	return toTransform.slice(removeNumberOfCharactersFromStart)
 }
 
-export function getAllNodes(root: CodeMapNode) {
+export function getAllNodes(root: CodeMapNode): CodeMapNode[] {
 	const filtered = []
 	if (root !== undefined) {
 		for (const { data } of hierarchy(root)) {