Feature/2708/show changed files in delta mode

CHANGELOG.md

@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Added 🚀
 
 -   Add a description for the statements metric [#2883](https://github.com/MaibornWolff/codecharta/pull/2883)
+-   Add display of changed files in delta mode (changed := metric values changed or list of applied metrics changed) [#2890](https://github.com/MaibornWolff/codecharta/pull/2890)
 
 ### Changed
 

visualization/app/codeCharta/codeCharta.model.ts

@@ -37,6 +37,7 @@ export interface FileCount {
 	all?: number
 	added: number
 	removed: number
+	changed: number
 }
 
 interface squarifiedNode {

visualization/app/codeCharta/codeCharta.service.spec.ts

@@ -82,7 +82,7 @@ describe("codeChartaService", () => {
 				children: [
 					{
 						attributes: { functions: 10, mcc: 1, rloc: 100 },
-						link: "http://www.google.de",
+						link: "https://www.google.de",
 						name: "big leaf",
 						path: "/root/big leaf",
 						type: NodeType.FILE,

visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/attributeSideBarHeaderSection.component.scss

@@ -55,6 +55,10 @@ cc-attribute-side-bar-header-section {
 			.removed-files {
 				color: rgb(255, 14, 14);
 			}
+
+			.changed-files {
+				color: rgb(14, 46, 255);
+			}
 		}
 	}
 

visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/fileCount.selector.spec.ts

@@ -8,11 +8,11 @@ describe("getFileCount", () => {
 
 	it("should return file count object with default values when it receives a building with no attributes and changed files", () => {
 		const node = {}
-		expect(getFileCount(node)).toEqual({ all: 0, added: 0, removed: 0 })
+		expect(getFileCount(node)).toEqual({ all: 0, added: 0, removed: 0, changed: 0 })
 	})
 
 	it("should return file count object that has the same values as the value assignments of the received attributes and changed files", () => {
-		const node = { attributes: { unary: 4 }, fileCount: { added: 2, removed: 1 } }
-		expect(getFileCount(node)).toEqual({ all: 4, added: 2, removed: 1 })
+		const node = { attributes: { unary: 4 }, fileCount: { added: 2, removed: 1, changed: 3 } }
+		expect(getFileCount(node)).toEqual({ all: 4, added: 2, removed: 1, changed: 3 })
 	})
 })

visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/fileCountSelector.ts

@@ -10,7 +10,8 @@ export const getFileCount = (node?: Pick<CodeMapNode, "attributes" | "fileCount"
 	return {
 		all: node.attributes?.unary ?? 0,
 		added: node.fileCount?.added ?? 0,
-		removed: node.fileCount?.removed ?? 0
+		removed: node.fileCount?.removed ?? 0,
+		changed: node.fileCount?.changed ?? 0
 	}
 }
 

visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/nodePath.component.html

@@ -3,12 +3,11 @@
 		{{ node.path }}
 		<span *ngIf="node.children?.length && fileCount$ | async as fileCount" class="cc-node-file-count">
 			(
-			{{ fileCount.all > 1 ? fileCount.all + " files" : fileCount.all + " file" }}
+			{{ fileCount.all }} {{ fileCount.all === 1 ? "file" : "files" }}
 			<span *ngIf="node.children?.length && (isDeltaMode$ | async)" class="cc-node-file-count">
 				| <span class="added-files" title="Number of added files"> Δ{{ fileCount.added }}</span> |
-				<span class="removed-files" title="Number of removed files">
-					Δ{{ fileCount.removed > 0 ? -fileCount.removed : 0 }}</span
-				></span
+				<span class="removed-files" title="Number of removed files"> Δ{{ fileCount.removed > 0 ? -fileCount.removed : 0 }}</span> |
+				<span class="files-with-metric-changes" title="Number of files with metric changes"> Δ{{ fileCount.changed }}</span> </span
 			>)
 		</span>
 	</span>

visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/nodePath.component.spec.ts

@@ -54,14 +54,50 @@ describe("nodePathComponent", () => {
 			attributes: { unary: 2 },
 			fileCount: {
 				added: 1,
-				removed: 2
+				removed: 2,
+				changed: 3
+			}
+		}
+		isDeltaStateSelectorMock.mockImplementationOnce(() => true)
+		selectedNodeSelectorMock.mockImplementation(() => node)
+
+		const { container } = await render(NodePathComponent, { componentProperties: { node } })
+
+		expect(container.textContent.replace(/\s+/g, " ")).toContain("some/folder ( 2 files | Δ1 | Δ-2 | Δ3)")
+	})
+	it("should display amount of files with correct english grammar, when an empty folder is selected and delta mode is enabled", async () => {
+		const node = {
+			children: [{}] as CodeMapNode[],
+			path: "some/emptyFolder",
+			attributes: { unary: 0 },
+			fileCount: {
+				added: 0,
+				removed: 2,
+				changed: 0
+			}
+		}
+		isDeltaStateSelectorMock.mockImplementationOnce(() => true)
+		selectedNodeSelectorMock.mockImplementation(() => node)
+
+		const { container } = await render(NodePathComponent, { componentProperties: { node } })
+
+		expect(container.textContent).toContain(" 0 files ") // because "zero file" is not grammatically correct
+	})
+	it("should display amount of files with correct english grammar, when a folder with 1 file is selected and delta mode is enabled", async () => {
+		const node = {
+			children: [{}] as CodeMapNode[],
+			path: "some/folderWithOneFile",
+			attributes: { unary: 1 },
+			fileCount: {
+				added: 1,
+				removed: 0
 			}
 		}
 		isDeltaStateSelectorMock.mockImplementationOnce(() => true)
 		selectedNodeSelectorMock.mockImplementation(() => node)
 
 		const { container } = await render(NodePathComponent, { componentProperties: { node } })
 
-		expect(container.textContent.replace(/\s+/g, " ")).toContain("some/folder ( 2 files | Δ1 | Δ-2)")
+		expect(container.textContent).toContain(" 1 file ") // because "one files" is not grammatically correct
 	})
 })

visualization/app/codeCharta/ui/codeMap/__snapshots__/codeMap.preRender.service.spec.ts.snap

@@ -30,7 +30,7 @@ Object {
       "id": 1,
       "isExcluded": false,
       "isFlattened": false,
-      "link": "http://www.google.de",
+      "link": "https://www.google.de",
       "name": "big leaf",
       "path": "/root/big leaf",
       "type": "File",

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

@@ -61,7 +61,7 @@ Array [
     },
     "isLeaf": true,
     "length": 911.751015307185,
-    "link": "http://www.google.de",
+    "link": "https://www.google.de",
     "mapNodeDepth": 1,
     "markingColor": undefined,
     "name": "big leaf",

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

@@ -9,7 +9,7 @@ jest.mock("../../../../state/selectors/accumulatedData/accumulatedData.selector"
 			type: "Folder",
 			path: "/root",
 			children: [
-				{ name: "big leaf", type: "File", path: "/root/big leaf", link: "http://www.google.de" },
+				{ name: "big leaf", type: "File", path: "/root/big leaf", link: "https://www.google.de" },
 				{
 					name: "Parent Leaf",
 					type: "Folder",

visualization/app/codeCharta/util/__snapshots__/aggregationGenerator.spec.ts.snap

@@ -30,7 +30,7 @@ Object {
               "mcc": 1,
               "rloc": 100,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file1/file1/big leaf",
             "type": "File",
@@ -76,7 +76,7 @@ Object {
               "mcc": 2,
               "rloc": 200,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file2/file2/big leaf",
             "type": "File",
@@ -121,7 +121,7 @@ Object {
               "mcc": 1,
               "rloc": 100,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file1/file1/big leaf",
             "type": "File",
@@ -167,7 +167,7 @@ Object {
               "mcc": 2,
               "rloc": 200,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file2/file2/big leaf",
             "type": "File",
@@ -248,7 +248,7 @@ Object {
               "mcc": 1,
               "rloc": 100,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file1/big leaf",
             "type": "File",
@@ -294,7 +294,7 @@ Object {
               "mcc": 2,
               "rloc": 200,
             },
-            "link": "http://www.google.de",
+            "link": "https://www.google.de",
             "name": "big leaf",
             "path": "/root/file2/big leaf",
             "type": "File",
@@ -367,7 +367,7 @@ Object {
           "mcc": 1,
           "rloc": 100,
         },
-        "link": "http://www.google.de",
+        "link": "https://www.google.de",
         "name": "big leaf",
         "path": "/root/big leaf",
         "type": "File",