Feat/3780/buildings without area

visualization/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 - Add thousands separation for big numbers [#3758](https://github.com/MaibornWolff/codecharta/pull/3758)
 - Add popup when comparing files with different complexity metrics [#3773](https://github.com/MaibornWolff/codecharta/pull/3773)
 - Add experimental feature: dynamic floor lable height for large maps [#3778](https://github.com/MaibornWolff/codecharta/pull/3778)
+- Add experimental feature: show buildings with an area metric value of 0 [#3789](https://github.com/MaibornWolff/codecharta/pull/3789)
 
 ### Fixed 🐞
 

visualization/app/codeCharta/resources/sample1_with_rloc_0.cc.json

@@ -0,0 +1,108 @@
+{
+  "projectName": "Sample Project with Edges",
+  "apiVersion": "1.2",
+  "fileChecksum": "valid-md5-sample1-with-rloc-0",
+  "nodes": [
+    {
+      "name": "root",
+      "type": "Folder",
+      "attributes": {},
+      "children": [
+        {
+          "name": "sample1OnlyLeaf.scss",
+          "type": "File",
+          "attributes": {
+            "rloc": 400,
+            "functions": 10,
+            "sonar_complexity": 100,
+            "pairingRate": 32,
+            "avgCommits": 17
+          },
+          "link": "http://www.google.de"
+        },
+        {
+          "name": "bigLeaf.ts",
+          "type": "File",
+          "attributes": {
+            "rloc": 100,
+            "functions": 10,
+            "sonar_complexity": 1,
+            "pairingRate": 77,
+            "avgCommits": 56
+          },
+          "link": "http://www.google.de"
+        },
+        {
+          "name": "ParentLeaf",
+          "type": "Folder",
+          "attributes": {},
+          "children": [
+            {
+              "name": "smallLeaf.html",
+              "type": "File",
+              "attributes": {
+                "rloc": 30,
+                "functions": 100,
+                "sonar_complexity": 100,
+                "pairingRate": 60,
+                "avgCommits": 51
+              }
+            },
+            {
+              "name": "otherSmallLeaf.ts",
+              "type": "File",
+              "attributes": {
+                "rloc": 0,
+                "functions": 1000,
+                "sonar_complexity": 10,
+                "pairingRate": 65,
+                "avgCommits": 22
+              }
+            },
+            {
+              "name": "middleSmallLeaf.ts",
+              "type": "File",
+              "attributes": {
+                "rloc": 0,
+                "functions": 1000,
+                "sonar_complexity": 0,
+                "pairingRate": 65,
+                "avgCommits": 0
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "edges": [
+    {
+      "fromNodeName": "/root/bigLeaf.ts",
+      "toNodeName": "/root/ParentLeaf/smallLeaf.html",
+      "attributes": {
+        "pairingRate": 89,
+        "avgCommits": 34
+      }
+    },
+    {
+      "fromNodeName": "/root/sample1OnlyLeaf.scss",
+      "toNodeName": "/root/ParentLeaf/smallLeaf.html",
+      "attributes": {
+        "pairingRate": 32,
+        "avgCommits": 17
+      }
+    },
+    {
+      "fromNodeName": "/root/ParentLeaf/otherSmallLeaf.ts",
+      "toNodeName": "/root/bigLeaf.ts",
+      "attributes": {
+        "pairingRate": 65,
+        "avgCommits": 22
+      }
+    }
+  ],
+  "attributeTypes": {
+    "nodes": { "rloc": "absolute", "functions": "absolute", "sonar_complexity": "absolute", "pairingRate": "relative" },
+    "edges": { "pairingRate": "relative", "avgCommits": "absolute" }
+  }
+}

visualization/app/codeCharta/ui/codeMap/codeMap.render.service.spec.ts

@@ -12,6 +12,7 @@ import {
     STATE,
     TEST_FILE_WITH_PATHS,
     TEST_NODE_LEAF,
+    TEST_NODE_LEAF_0_LENGTH,
     TEST_NODE_ROOT,
     TEST_NODES,
     VALID_EDGES
@@ -233,6 +234,44 @@ describe("codeMapRenderService", () => {
         })
     })
 
+    describe("sortNodes", () => {
+        it("should return nodes with length of 0 and set min length if experimental features are enabled", () => {
+            const newState = {
+                ...state.getValue(),
+                appSettings: {
+                    ...state.getValue().appSettings,
+                    experimentalFeaturesEnabled: true
+                }
+            }
+            store.dispatch(setState({ value: newState }))
+
+            const nodes = klona(TEST_NODES)
+            const sortedNodes: Node[] = codeMapRenderService["sortNodes"](nodes)
+
+            const updatedNode = klona(TEST_NODE_LEAF_0_LENGTH)
+            updatedNode.length = 2
+            const result: Node[] = [TEST_NODE_ROOT, TEST_NODE_LEAF, updatedNode]
+            expect(sortedNodes).toEqual(result)
+        })
+
+        it("should return nodes with length and width > 0 if experimental features are not enabled", () => {
+            const newState = {
+                ...state.getValue(),
+                appSettings: {
+                    ...state.getValue().appSettings,
+                    experimentalFeaturesEnabled: false
+                }
+            }
+            store.dispatch(setState({ value: newState }))
+
+            const nodes = klona(TEST_NODES)
+            const sortedNodes: Node[] = codeMapRenderService["sortNodes"](nodes)
+
+            const result: Node[] = [TEST_NODE_ROOT, TEST_NODE_LEAF]
+            expect(sortedNodes).toEqual(result)
+        })
+    })
+
     describe("setLabels", () => {
         let nodes: Node[]
 
@@ -256,7 +295,7 @@ describe("codeMapRenderService", () => {
         it("should call codeMapLabelService.addLeafLabel for each shown leaf label", () => {
             codeMapRenderService["setLabels"](nodes)
 
-            expect(codeMapLabelService.addLeafLabel).toHaveBeenCalledTimes(2)
+            expect(codeMapLabelService.addLeafLabel).toHaveBeenCalledTimes(3)
         })
 
         it("should not generate labels when showMetricLabelNodeName and showMetricLabelNameValue are both false", () => {

visualization/app/codeCharta/ui/codeMap/codeMap.render.service.ts

@@ -4,15 +4,17 @@ import { createTreemapNodes } from "../../util/algorithm/treeMapLayout/treeMapGe
 import { CodeMapLabelService } from "./codeMap.label.service"
 import { ThreeSceneService } from "./threeViewer/threeSceneService"
 import { CodeMapArrowService } from "./arrow/codeMap.arrow.service"
-import { CodeMapNode, LayoutAlgorithm, Node, CcState } from "../../codeCharta.model"
+import { CcState, CodeMapNode, LayoutAlgorithm, Node } from "../../codeCharta.model"
 import { isDeltaState } from "../../model/files/files.helper"
 import { StreetLayoutGenerator } from "../../util/algorithm/streetLayout/streetLayoutGenerator"
 import { ThreeStatsService } from "./threeViewer/threeStats.service"
 import { CodeMapMouseEventService } from "./codeMap.mouseEvent.service"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
 import { Subscription, tap } from "rxjs"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
-import { Store, State } from "@ngrx/store"
+import { State, Store } from "@ngrx/store"
+
+const MIN_BUILDING_LENGTH = 2
 
 @Injectable({ providedIn: "root" })
 export class CodeMapRenderService implements OnDestroy {
@@ -94,9 +96,22 @@ export class CodeMapRenderService implements OnDestroy {
     }
 
     sortNodes(nodes: Node[]) {
+        const experimentalFeaturesEnabled = this.state.getValue().appSettings.experimentalFeaturesEnabled
+        if (experimentalFeaturesEnabled) {
+            this.setMinBuildingLength(nodes)
+            return nodes.filter(node => node.width > 0).sort((a, b) => b.height - a.height)
+        }
         return nodes.filter(node => node.length > 0 && node.width > 0).sort((a, b) => b.height - a.height)
     }
 
+    private setMinBuildingLength(nodes: Node[]) {
+        for (const node of nodes) {
+            if (node.length <= 0) {
+                node.length = MIN_BUILDING_LENGTH
+            }
+        }
+    }
+
     private getNodesMatchingColorSelector(sortedNodes: Node[]) {
         const dynamicSettings = this.state.getValue().dynamicSettings
 

visualization/app/codeCharta/ui/metricChooser/nodeselection.service.spec.ts

@@ -6,7 +6,7 @@ import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/a
 import { hoveredNodeSelector } from "../../state/selectors/hoveredNode.selector"
 import { selectedNodeSelector } from "../../state/selectors/selectedNode.selector"
 import { defaultState } from "../../state/store/state.manager"
-import { TEST_DELTA_MAP_A, TEST_NODES, TEST_NODE_LEAF, VALID_NODE_WITH_MCC } from "../../util/dataMocks"
+import { TEST_DELTA_MAP_A, TEST_NODE_LEAF_0_LENGTH, TEST_NODES, VALID_NODE_WITH_MCC } from "../../util/dataMocks"
 import { CodeMapRenderService } from "../codeMap/codeMap.render.service"
 import { NodeSelectionService } from "./nodeSelection.service"
 
@@ -91,7 +91,7 @@ describe("LoadInitialFileService", () => {
         store.refreshState()
 
         nodeSelectionService.createNodeObservable().subscribe(node => {
-            expect(node).toEqual(TEST_NODE_LEAF)
+            expect(node).toEqual(TEST_NODE_LEAF_0_LENGTH)
             done()
         })
     })

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.html

@@ -21,7 +21,8 @@ <h2>Global Configuration</h2>
             [checked]="experimentalFeaturesEnabled$ | async"
             (change)="handleExperimentalFeaturesEnabledChanged($event)"
             title="Current experimental features:
-Dynamic Floor Label Height: Raises folder labels further up to reduce flickering on large maps (Needs site refresh)"
+Dynamic Floor Label Height: Raises folder labels further up to reduce flickering on large maps (Needs site refresh)
+Visibility of buildings without area metric: Show buildings without area metric in the map (Needs site refresh)"
         >
             Enable Experimental Features <i class="fa fa-info-circle"></i>
         </mat-slide-toggle>

visualization/app/codeCharta/util/algorithm/treeMapLayout/treeMapGenerator.spec.ts

@@ -207,11 +207,17 @@ describe("treeMapGenerator", () => {
 
     describe("calculateAreaValue", () => {
         it("should return 0 if node has children, not blacklisted and not only visible in comparison map", () => {
-            const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode, state, 400)
+            const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode, state, 400, false)
 
             expect(actual).toBe(0)
         })
 
+        it("should return 0.5 if experimentalFeaturesEnabled is true and node has children, not blacklisted and not only visible in comparison map", () => {
+            const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode, state, 400, true)
+
+            expect(actual).toBe(0.5)
+        })
+
         it("should invert area when areametric indicates a positive direction", () => {
             state.dynamicSettings.areaMetric = "branch_coverage"
             state.fileSettings.attributeDescriptors = {
@@ -225,7 +231,7 @@ describe("treeMapGenerator", () => {
                 }
             }
             codeMapNode.children[0].attributes = { branch_coverage: 0.9 }
-            const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode.children[0], state, 400)
+            const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode.children[0], state, 400, false)
 
             expect(actual).toBe(400 - 0.9)
         })

visualization/app/codeCharta/util/algorithm/treeMapLayout/treeMapGenerator.ts

@@ -159,7 +159,7 @@ function scaleRoot(root: Node, scaleLength: number, scaleWidth: number) {
 function getSquarifiedTreeMap(map: CodeMapNode, state: CcState, mapSizeResolutionScaling: number, maxWidth: number): SquarifiedTreeMap {
     const hierarchyNode = hierarchy(map)
     const nodesPerSide = getEstimatedNodesPerSide(hierarchyNode)
-    const { enableFloorLabels } = state.appSettings
+    const { enableFloorLabels, experimentalFeaturesEnabled } = state.appSettings
     const { margin } = state.dynamicSettings
     const padding = margin * PADDING_SCALING_FACTOR * mapSizeResolutionScaling
 
@@ -228,7 +228,9 @@ function getSquarifiedTreeMap(map: CodeMapNode, state: CcState, mapSizeResolutio
         })
 
     return {
-        treeMap: treeMap(hierarchyNode.sum(node => calculateAreaValue(node, state, maxWidth) * mapSizeResolutionScaling)),
+        treeMap: treeMap(
+            hierarchyNode.sum(node => calculateAreaValue(node, state, maxWidth, experimentalFeaturesEnabled) * mapSizeResolutionScaling)
+        ),
         height,
         width
     }
@@ -256,7 +258,12 @@ function isOnlyVisibleInComparisonMap(node: CodeMapNode, dynamicSettings: Dynami
 }
 
 // Only exported for testing.
-export function calculateAreaValue(node: CodeMapNode, { dynamicSettings, appSettings, fileSettings }: CcState, maxWidth: number) {
+export function calculateAreaValue(
+    node: CodeMapNode,
+    { dynamicSettings, appSettings, fileSettings }: CcState,
+    maxWidth: number,
+    experimentalFeaturesEnabled: boolean
+) {
     if (node.isExcluded) {
         return 0
     }
@@ -277,5 +284,5 @@ export function calculateAreaValue(node: CodeMapNode, { dynamicSettings, appSett
         }
         return appSettings.invertArea ? maxWidth - node.attributes[dynamicSettings.areaMetric] : node.attributes[dynamicSettings.areaMetric]
     }
-    return 0
+    return experimentalFeaturesEnabled ? 0.5 : 0
 }

visualization/app/codeCharta/util/dataMocks.ts

@@ -2583,6 +2583,32 @@ export const TEST_NODE_LEAF: Node = {
     outgoingEdgePoint: new Vector3()
 }
 
+export const TEST_NODE_LEAF_0_LENGTH: Node = {
+    name: "root/big leaf.ts",
+    id: 1,
+    width: 1,
+    height: 2,
+    length: 0,
+    depth: 4,
+    mapNodeDepth: 2,
+    x0: 5,
+    z0: 6,
+    y0: 7,
+    isLeaf: true,
+    deltas: { a: 1, b: 2 },
+    attributes: { a: 20, b: 15, mcc: 20 },
+    edgeAttributes: { a: { incoming: 2, outgoing: 666 } },
+    heightDelta: 20,
+    visible: true,
+    path: "/root/big leaf",
+    link: "NO_LINK",
+    markingColor: "0xFFFFFF",
+    flat: false,
+    color: "#ddcc00",
+    incomingEdgePoint: new Vector3(),
+    outgoingEdgePoint: new Vector3()
+}
+
 export const TEST_NODE_FOLDER: Node = {
     name: "root",
     id: 1,
@@ -2608,7 +2634,7 @@ export const TEST_NODE_FOLDER: Node = {
     outgoingEdgePoint: new Vector3()
 }
 
-export const TEST_NODES: Node[] = [TEST_NODE_ROOT, TEST_NODE_LEAF]
+export const TEST_NODES: Node[] = [TEST_NODE_ROOT, TEST_NODE_LEAF, TEST_NODE_LEAF_0_LENGTH]
 
 export const INCOMING_NODE: Node = {
     name: "root/small leaf",