Add configurable floor label depth

visualization/app/codeCharta/codeCharta.model.ts

@@ -173,6 +173,7 @@ export interface AppSettings {
     groupLabelCollisions: boolean
     isColorMetricLinkedToHeightMetric: boolean
     enableFloorLabels: boolean
+    floorLabelDepth: number
 }
 
 export interface MapColors {

visualization/app/codeCharta/features/scenarios/model/scenario.model.ts

@@ -37,6 +37,7 @@ export interface LabelsAndFoldersSection {
     readonly showMetricLabelNameValue: boolean
     readonly showMetricLabelNodeName: boolean
     readonly enableFloorLabels: boolean
+    readonly floorLabelDepth?: number
     readonly colorLabels: ColorLabelOptions
     readonly labelMode: LabelMode
     readonly groupLabelCollisions: boolean

visualization/app/codeCharta/features/scenarios/services/scenarioApplier.service.spec.ts

@@ -53,6 +53,7 @@ const testSections: ScenarioSections = {
         showMetricLabelNameValue: true,
         showMetricLabelNodeName: false,
         enableFloorLabels: true,
+        floorLabelDepth: 4,
         colorLabels: { positive: true, negative: false, neutral: false },
         labelMode: LabelMode.Color,
         groupLabelCollisions: true,
@@ -157,6 +158,7 @@ describe("ScenarioApplierService", () => {
             expect(patches[2].fileSettings?.blacklist).toEqual(testSections.filters.blacklist)
             expect(patches[2].dynamicSettings?.focusedNodePath).toEqual(["/root/src"])
             expect(patches[2].appSettings?.amountOfTopLabels).toBe(5)
+            expect(patches[2].appSettings?.floorLabelDepth).toBe(4)
             expect(patches[2].appSettings?.labelMode).toBe(LabelMode.Color)
             expect(patches[2].appSettings?.groupLabelCollisions).toBe(true)
             expect(patches[2].fileSettings?.markedPackages).toEqual(testSections.labelsAndFolders.markedPackages)

visualization/app/codeCharta/features/scenarios/services/scenarioApplier.service.ts

@@ -197,6 +197,7 @@ export class ScenarioApplierService {
                 showMetricLabelNameValue: labelsAndFolders.showMetricLabelNameValue,
                 showMetricLabelNodeName: labelsAndFolders.showMetricLabelNodeName,
                 enableFloorLabels: labelsAndFolders.enableFloorLabels,
+                ...(labelsAndFolders.floorLabelDepth === undefined ? {} : { floorLabelDepth: labelsAndFolders.floorLabelDepth }),
                 colorLabels: labelsAndFolders.colorLabels,
                 labelMode: labelsAndFolders.labelMode,
                 groupLabelCollisions: labelsAndFolders.groupLabelCollisions

visualization/app/codeCharta/features/scenarios/services/scenarios.service.spec.ts

@@ -168,6 +168,7 @@ describe("ScenariosService", () => {
             // Assert
             expect(sections.labelsAndFolders.amountOfTopLabels).toBe(defaultState.appSettings.amountOfTopLabels)
             expect(sections.labelsAndFolders.labelSize).toBe(defaultState.appSettings.labelSize)
+            expect(sections.labelsAndFolders.floorLabelDepth).toBe(defaultState.appSettings.floorLabelDepth)
             expect(sections.labelsAndFolders.labelMode).toBe(defaultState.appSettings.labelMode)
             expect(sections.labelsAndFolders.groupLabelCollisions).toBe(defaultState.appSettings.groupLabelCollisions)
             expect(sections.labelsAndFolders.markedPackages).toEqual(defaultState.fileSettings.markedPackages)

visualization/app/codeCharta/features/scenarios/services/scenarios.service.ts

@@ -189,6 +189,7 @@ export class ScenariosService {
                 showMetricLabelNameValue: state.appSettings.showMetricLabelNameValue,
                 showMetricLabelNodeName: state.appSettings.showMetricLabelNodeName,
                 enableFloorLabels: state.appSettings.enableFloorLabels,
+                floorLabelDepth: state.appSettings.floorLabelDepth,
                 colorLabels: { ...state.appSettings.colorLabels },
                 labelMode: state.appSettings.labelMode,
                 groupLabelCollisions: state.appSettings.groupLabelCollisions,

visualization/app/codeCharta/services/loadInitialFile/loadInitialFile.service.ts

@@ -60,6 +60,7 @@ import { setScreenshotToClipboardEnabled } from "../../state/store/appSettings/e
 import { setColorLabels } from "../../state/store/appSettings/colorLabels/colorLabels.actions"
 import { setIsColorMetricLinkedToHeightMetricAction } from "../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
 import { setEnableFloorLabels } from "../../state/store/appSettings/enableFloorLabels/enableFloorLabels.actions"
+import { setFloorLabelDepth } from "../../state/store/appSettings/floorLabelDepth/floorLabelDepth.actions"
 import { setLabelMode } from "../../state/store/appSettings/labelMode/labelMode.actions"
 import { setGroupLabelCollisions } from "../../state/store/appSettings/groupLabelCollisions/groupLabelCollisions.actions"
 
@@ -237,7 +238,7 @@ export class LoadInitialFileService {
         return missingDynamicSettings
     }
 
-    private static readonly optionalAppSettingsKeys = new Set(["labelMode", "groupLabelCollisions", "labelSize"])
+    private static readonly optionalAppSettingsKeys = new Set(["labelMode", "groupLabelCollisions", "labelSize", "floorLabelDepth"])
 
     private applyAppSettings(savedAppSettings: AppSettings) {
         const currentAppSettings = (this.state.getValue() as CcState).appSettings
@@ -410,6 +411,9 @@ export class LoadInitialFileService {
             case "enableFloorLabels":
                 this.store.dispatch(setEnableFloorLabels({ value }))
                 break
+            case "floorLabelDepth":
+                this.store.dispatch(setFloorLabelDepth({ value }))
+                break
             case "labelMode":
                 this.store.dispatch(setLabelMode({ value }))
                 break

visualization/app/codeCharta/state/effects/autoFitCodeMapChange/selectorsTriggeringAutoFit.ts

@@ -5,6 +5,7 @@ import { invertAreaSelector } from "../../store/appSettings/invertArea/invertAre
 import { marginSelector } from "../../store/dynamicSettings/margin/margin.selector"
 import { DefaultProjectorFn, MemoizedSelector } from "@ngrx/store"
 import { enableFloorLabelsSelector } from "../../store/appSettings/enableFloorLabels/enableFloorLabels.selector"
+import { floorLabelDepthSelector } from "../../store/appSettings/floorLabelDepth/floorLabelDepth.selector"
 import { areaMetricSelector } from "../../store/dynamicSettings/areaMetric/areaMetric.selector"
 import { isDeltaStateSelector } from "../../selectors/isDeltaState.selector"
 
@@ -15,6 +16,7 @@ export const selectorsTriggeringAutoFit: MemoizedSelector<any, any, DefaultProje
     invertAreaSelector,
     marginSelector,
     enableFloorLabelsSelector,
+    floorLabelDepthSelector,
     areaMetricSelector,
     isDeltaStateSelector
 ]

visualization/app/codeCharta/state/effects/renderCodeMapEffect/actionsRequiringRerender.ts

@@ -31,6 +31,7 @@ import { setMargin } from "../../store/dynamicSettings/margin/margin.actions"
 import { setSearchPattern } from "../../store/dynamicSettings/searchPattern/searchPattern.actions"
 import { setMarkedPackages, markPackages, unmarkPackage } from "../../store/fileSettings/markedPackages/markedPackages.actions"
 import { setEnableFloorLabels } from "../../store/appSettings/enableFloorLabels/enableFloorLabels.actions"
+import { setFloorLabelDepth } from "../../store/appSettings/floorLabelDepth/floorLabelDepth.actions"
 import { setGroupLabelCollisions } from "../../store/appSettings/groupLabelCollisions/groupLabelCollisions.actions"
 import { setLabelMode } from "../../store/appSettings/labelMode/labelMode.actions"
 import { setState } from "../../store/state.actions"
@@ -75,6 +76,7 @@ export const actionsRequiringRerender = [
     markPackages,
     unmarkPackage,
     setEnableFloorLabels,
+    setFloorLabelDepth,
     setGroupLabelCollisions,
     setLabelMode,
     setState

visualization/app/codeCharta/state/store/appSettings/appSettings.actions.ts

@@ -6,6 +6,7 @@ import { setEdgeHeight } from "./edgeHeight/edgeHeight.actions"
 import { setScreenshotToClipboardEnabled } from "./enableClipboard/screenshotToClipboardEnabled.actions"
 import { setExperimentalFeaturesEnabled } from "./enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { setEnableFloorLabels } from "./enableFloorLabels/enableFloorLabels.actions"
+import { setFloorLabelDepth } from "./floorLabelDepth/floorLabelDepth.actions"
 import { setLabelMode } from "./labelMode/labelMode.actions"
 import { setGroupLabelCollisions } from "./groupLabelCollisions/groupLabelCollisions.actions"
 import { setHideFlatBuildings } from "./hideFlatBuildings/hideFlatBuildings.actions"
@@ -60,6 +61,7 @@ export const appSettingsActions = [
     setIsColorMetricLinkedToHeightMetricAction,
     toggleIsColorMetricLinkedToHeightMetric,
     setEnableFloorLabels,
+    setFloorLabelDepth,
     setLabelMode,
     setGroupLabelCollisions
 ]

visualization/app/codeCharta/state/store/appSettings/appSettings.reducer.ts

@@ -37,6 +37,7 @@ import {
     isColorMetricLinkedToHeightMetric
 } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.reducer"
 import { defaultEnableFloorLabels, enableFloorLabels } from "./enableFloorLabels/enableFloorLabels.reducer"
+import { defaultFloorLabelDepth, floorLabelDepth } from "./floorLabelDepth/floorLabelDepth.reducer"
 import { defaultLabelMode, labelMode } from "./labelMode/labelMode.reducer"
 import { defaultGroupLabelCollisions, groupLabelCollisions } from "./groupLabelCollisions/groupLabelCollisions.reducer"
 import { combineReducers } from "@ngrx/store"
@@ -73,6 +74,7 @@ export const appSettings = combineReducers({
     sharpnessMode,
     isColorMetricLinkedToHeightMetric,
     enableFloorLabels,
+    floorLabelDepth,
     labelMode,
     groupLabelCollisions
 })
@@ -107,6 +109,7 @@ export const defaultAppSettings = {
     sharpnessMode: defaultSharpnessMode,
     isColorMetricLinkedToHeightMetric: defaultIsColorMetricLinkedToHeightMetric,
     enableFloorLabels: defaultEnableFloorLabels,
+    floorLabelDepth: defaultFloorLabelDepth,
     labelMode: defaultLabelMode,
     groupLabelCollisions: defaultGroupLabelCollisions
 }

visualization/app/codeCharta/state/store/appSettings/floorLabelDepth/floorLabelDepth.actions.ts

@@ -0,0 +1,3 @@
+import { createAction, props } from "@ngrx/store"
+
+export const setFloorLabelDepth = createAction("SET_FLOOR_LABEL_DEPTH", props<{ value: number }>())

visualization/app/codeCharta/state/store/appSettings/floorLabelDepth/floorLabelDepth.reducer.spec.ts

@@ -0,0 +1,8 @@
+import { setFloorLabelDepth } from "./floorLabelDepth.actions"
+import { floorLabelDepth } from "./floorLabelDepth.reducer"
+
+describe("floorLabelDepth", () => {
+    it("should set new floor label depth", () => {
+        expect(floorLabelDepth(3, setFloorLabelDepth({ value: 4 }))).toEqual(4)
+    })
+})

visualization/app/codeCharta/state/store/appSettings/floorLabelDepth/floorLabelDepth.reducer.ts

@@ -0,0 +1,6 @@
+import { createReducer, on } from "@ngrx/store"
+import { setState } from "../../util/setState.reducer.factory"
+import { setFloorLabelDepth } from "./floorLabelDepth.actions"
+
+export const defaultFloorLabelDepth = 3
+export const floorLabelDepth = createReducer(defaultFloorLabelDepth, on(setFloorLabelDepth, setState(defaultFloorLabelDepth)))

visualization/app/codeCharta/state/store/appSettings/floorLabelDepth/floorLabelDepth.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "@ngrx/store"
+import { appSettingsSelector } from "../appSettings.selector"
+
+export const floorLabelDepthSelector = createSelector(appSettingsSelector, appSettings => appSettings.floorLabelDepth)

visualization/app/codeCharta/ui/codeMap/threeViewer/floorLabels/floorLabelDrawer.spec.ts

@@ -71,6 +71,7 @@ describe("FloorLabelDrawer", () => {
 
     const mapSize = 500
     const scaling: Vector3 = { x: 1, y: 1, z: 1 } as Vector3
+    const floorLabelDepth = 3
 
     describe("draw", () => {
         it("should draw simple and shortened labels on three levels", () => {
@@ -87,7 +88,7 @@ describe("FloorLabelDrawer", () => {
 
             const canvasContextMock = createCanvasMock()
 
-            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, false)
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, floorLabelDepth, false)
             const floorLabelPlanes = floorLabelDrawer.draw()
 
             expect(canvasContextMock.fillText).toHaveBeenCalledTimes(5)
@@ -112,7 +113,7 @@ describe("FloorLabelDrawer", () => {
                 createFakeNode("text_to_be_shortened_to_fit_onto_the_floor", 50, 50, false, 2)
             ]
 
-            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, true)
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, floorLabelDepth, true)
             const floorLabelPlanes = floorLabelDrawer.draw()
 
             expect(floorLabelDrawer.folderGeometryHeight).toBe(68)
@@ -135,13 +136,49 @@ describe("FloorLabelDrawer", () => {
 
             const canvasContextMock = createCanvasMock()
 
-            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, false)
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, floorLabelDepth, false)
             const floorLabelPlanes = floorLabelDrawer.draw()
 
             expect(canvasContextMock.fillText).toHaveBeenCalledTimes(4)
             expect(floorLabelPlanes.length).toBe(3)
         })
 
+        it("should draw on configured floor label depth", () => {
+            initMapCanvas()
+
+            const rootNode = createFakeNode("root", 500, 500, false, 0)
+            const nodes = [
+                rootNode,
+                createFakeNode("simpleLabelNode1", 400, 400, false, 1),
+                createFakeNode("simpleLabelNode2", 200, 200, false, 2),
+                createFakeNode("simpleLabelNode3", 50, 50, false, 3)
+            ]
+
+            const canvasContextMock = createCanvasMock()
+
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, 4, false)
+            const floorLabelPlanes = floorLabelDrawer.draw()
+
+            expect(canvasContextMock.fillText).toHaveBeenCalledTimes(4)
+            expect(floorLabelPlanes.length).toBe(4)
+        })
+
+        it("should skip configured deep labels when their reserved label lane is too small", () => {
+            initMapCanvas()
+
+            const rootNode = createFakeNode("root", 500, 500, false, 0)
+            const nodes = [rootNode, createFakeNode("coveredLabel", 20, 200, false, 3)]
+
+            const canvasContextMock = createCanvasMock()
+
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, 4, false)
+            const floorLabelPlanes = floorLabelDrawer.draw()
+
+            expect(canvasContextMock.fillText).toHaveBeenCalledTimes(1)
+            expect(canvasContextMock.fillText).toHaveBeenCalledWith("root", expect.any(Number), expect.any(Number))
+            expect(floorLabelPlanes.length).toBe(1)
+        })
+
         it("should not draw on more levels than needed'", () => {
             initMapCanvas()
 
@@ -154,7 +191,7 @@ describe("FloorLabelDrawer", () => {
 
             const canvasContextMock = createCanvasMock()
 
-            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, false)
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, floorLabelDepth, false)
             const floorLabelPlanes = floorLabelDrawer.draw()
 
             expect(canvasContextMock.fillText).toHaveBeenCalledTimes(2)
@@ -173,7 +210,7 @@ describe("FloorLabelDrawer", () => {
                 createFakeNode("unlabeledNode", 100, 100, true, 1)
             ]
 
-            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, false)
+            const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling, floorLabelDepth, false)
             const floorLabelPlanes = floorLabelDrawer.draw()
 
             const geometryPositions = floorLabelPlanes[0].geometry.attributes.position.array