codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/util/algorithm/treeMapLayout/__snapshots__/treeMapHelper.spec.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeMapHelper build node deltas 1`] = `
-Object {
-  "attributes": Object {
+{
+  "attributes": {
     "theHeight": 100,
   },
   "color": "#666666",
-  "deltas": Object {
+  "deltas": {
     "theHeight": 33,
   },
   "depth": 1,
@@ -41,8 +41,8 @@ Object {
 `;
 
 exports[`TreeMapHelper build node invertHeight 1`] = `
-Object {
-  "attributes": Object {
+{
+  "attributes": {
     "theHeight": 100,
   },
   "color": "#666666",
@@ -79,8 +79,8 @@ Object {
 `;
 
 exports[`TreeMapHelper build node minimal 1`] = `
-Object {
-  "attributes": Object {
+{
+  "attributes": {
     "theHeight": 100,
   },
   "color": "#666666",
@@ -117,8 +117,8 @@ Object {
 `;
 
 exports[`TreeMapHelper build node should set lowest possible height caused by other visible edge pairs 1`] = `
-Object {
-  "attributes": Object {
+{
+  "attributes": {
     "theHeight": 100,
   },
   "color": "#666666",

package/app/codeCharta/util/customConfigBuilder.spec.ts

@@ -20,10 +20,15 @@ describe("CustomConfigBuilder", () => {
 		it("should return a new CustomConfig instance", () => {
 			const state: State = { ...DEFAULT_STATE, appSettings: { experimentalFeaturesEnabled: true } as AppSettings }
 
-			const customConfig = buildCustomConfigFromState("testCustomConfig", state, {
-				camera: new Vector3(1, 2, 3),
-				cameraTarget: new Vector3(4, 5, 6)
-			})
+			const customConfig = buildCustomConfigFromState(
+				"testCustomConfig",
+				state,
+				{
+					camera: new Vector3(1, 2, 3),
+					cameraTarget: new Vector3(4, 5, 6)
+				},
+				"My Custom Note"
+			)
 
 			expect(customConfig.name).toBe("testCustomConfig")
 			expect(customConfig.mapSelectionMode).toBe(CustomConfigMapSelectionMode.MULTIPLE)
@@ -49,6 +54,8 @@ describe("CustomConfigBuilder", () => {
 			expect(customConfig.camera.cameraTarget.x).toBe(4)
 			expect(customConfig.camera.cameraTarget.y).toBe(5)
 			expect(customConfig.camera.cameraTarget.z).toBe(6)
+
+			expect(customConfig.note).toBe("My Custom Note")
 		})
 	})
 })

package/app/codeCharta/util/customConfigBuilder.ts

@@ -5,12 +5,18 @@ import { visibleFilesBySelectionModeSelector } from "../ui/customConfigs/visible
 
 const CUSTOM_CONFIG_API_VERSION = "1.0.0"
 
-export function buildCustomConfigFromState(configName: string, state: State, camera: CustomConfig["camera"]): CustomConfig {
+export function buildCustomConfigFromState(
+	configName: string,
+	state: State,
+	camera: CustomConfig["camera"],
+	note: string | undefined
+): CustomConfig {
 	const { mapSelectionMode, assignedMaps } = visibleFilesBySelectionModeSelector(state)
 
 	const customConfig: CustomConfig = {
 		id: "",
 		name: configName,
+
 		creationTime: Date.now(),
 		mapSelectionMode,
 		assignedMaps,
@@ -20,7 +26,8 @@ export function buildCustomConfigFromState(configName: string, state: State, cam
 			dynamicSettings: undefined,
 			fileSettings: undefined
 		},
-		camera
+		camera,
+		...(note && { note })
 	}
 
 	// Initialize all necessary state settings with default values right here
@@ -48,7 +55,6 @@ function initializeAppSettings(target: CustomConfig) {
 		},
 		amountOfEdgePreviews: 0,
 		amountOfTopLabels: 0,
-		dynamicMargin: false,
 		edgeHeight: 0,
 		hideFlatBuildings: false,
 		invertHeight: false,

package/app/codeCharta/util/customConfigHelper.ts

@@ -65,16 +65,15 @@ export class CustomConfigHelper {
 
 		return ccLocalStorage
 	}
-
-	static addCustomConfigs(newCustomConfigs: CustomConfig[]) {
-		for (const newCustomConfig of newCustomConfigs) {
-			CustomConfigHelper.customConfigs.set(newCustomConfig.id, newCustomConfig)
-		}
+	static addCustomConfig(newCustomConfig: CustomConfig) {
+		CustomConfigHelper.customConfigs.set(newCustomConfig.id, newCustomConfig)
 		CustomConfigHelper.setCustomConfigsToLocalStorage()
 	}
 
-	static addCustomConfig(newCustomConfig: CustomConfig) {
-		CustomConfigHelper.customConfigs.set(newCustomConfig.id, newCustomConfig)
+	static editCustomConfigNote(configId: string, configNote: string) {
+		const config = CustomConfigHelper.customConfigs.get(configId)
+		config.note = configNote
+		CustomConfigHelper.customConfigs.set(configId, config)
 		CustomConfigHelper.setCustomConfigsToLocalStorage()
 	}
 
@@ -139,7 +138,8 @@ export class CustomConfigHelper {
 				customConfigVersion: exportedConfig.customConfigVersion,
 				mapSelectionMode: exportedConfig.mapSelectionMode,
 				stateSettings: exportedConfig.stateSettings,
-				camera: exportedConfig.camera
+				camera: exportedConfig.camera,
+				...(exportedConfig.note && { note: exportedConfig.note })
 			}
 
 			CustomConfigHelper.addCustomConfig(importedCustomConfig)

package/app/codeCharta/util/dataMocks.ts

@@ -1,5 +1,6 @@
 import {
 	AttributeTypeValue,
+	AttributeDescriptors,
 	BlacklistItem,
 	BlacklistType,
 	CCFile,
@@ -32,7 +33,7 @@ import { isLeaf } from "./codeMapHelper"
 import { CustomConfigItemGroup } from "../ui/customConfigs/customConfigs.component"
 import { CustomConfigMapSelectionMode } from "../model/customConfig/customConfig.api.model"
 import { ScenarioItem, ScenarioMetricProperty } from "../ui/ribbonBar/showScenariosButton/scenarioHelper"
-import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.calculator"
 
 const DEFAULT_FILE_META = {
 	projectName: "Sample Project",
@@ -100,7 +101,7 @@ export const TEST_ATTRIBUTE_TYPES = {
 	edges: { test: AttributeTypeValue.absolute }
 }
 
-export const TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED = {
+export const TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED: AttributeDescriptors = {
 	mcc: {
 		title: "Maximum Cyclic Complexity",
 		description: "Maximum cyclic complexity",
@@ -117,6 +118,30 @@ export const TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED = {
 	}
 }
 
+export const TEST_ATTRIBUTE_DESCRIPTORS: AttributeDescriptors = {
+	a: {
+		title: "a_testTitle",
+		description: "a_testDescription",
+		hintHighValue: "",
+		hintLowValue: "",
+		link: ""
+	},
+	b: {
+		title: "b_testTitle",
+		description: "",
+		hintHighValue: "",
+		hintLowValue: "",
+		link: ""
+	},
+	c: {
+		title: undefined,
+		description: "c_testDescription",
+		hintHighValue: undefined,
+		hintLowValue: undefined,
+		link: undefined
+	}
+}
+
 export const VALID_NODE: CodeMapNode = {
 	...DEFAULT_ROOT,
 	children: [
@@ -1607,7 +1632,6 @@ export const STATE: State = {
 		invertHeight: true,
 		invertArea: false,
 		isEdgeMetricVisible: true,
-		dynamicMargin: true,
 		isWhiteBackground: false,
 		isColorMetricLinkedToHeightMetric: false,
 		enableFloorLabels: true,
@@ -1657,7 +1681,6 @@ export const DEFAULT_STATE: State = {
 			neutral: false
 		},
 		edgeHeight: 4,
-		dynamicMargin: true,
 		hideFlatBuildings: false,
 		invertHeight: false,
 		invertArea: false,
@@ -1989,7 +2012,8 @@ export const CUSTOM_CONFIG_ITEM_GROUPS: Map<string, CustomConfigItemGroup> = new
 						negativeDelta: "#ff0E0E"
 					},
 					metrics: { areaMetric: "rloc", heightMetric: "mcc", colorMetric: "functions", edgeMetric: "avgCommits" },
-					isApplicable: true
+					isApplicable: true,
+					note: "a note"
 				},
 				{
 					id: "File_B_File_C_STANDARD_Sample_Map View #2",

package/app/codeCharta/util/debounce.spec.ts

@@ -0,0 +1,16 @@
+import { debounce } from "./debounce"
+import { wait } from "./testUtils/wait"
+
+describe("debounce", () => {
+	it("should debounce given function", async () => {
+		const f = jest.fn()
+		const debouncedF = debounce(f, 1)
+
+		debouncedF()
+		debouncedF()
+		expect(f).not.toHaveBeenCalled()
+
+		await wait(1)
+		expect(f).toHaveBeenCalledTimes(1)
+	})
+})

package/app/codeCharta/util/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<F extends (...arguments_: Parameters<F>) => ReturnType<F>>(this: unknown, function_: F, waitInMS = 0) {
+	let timer
+	return (...arguments_: Parameters<F>) => {
+		clearTimeout(timer)
+		timer = setTimeout(() => {
+			function_.apply(this, arguments_)
+			timer = null
+		}, waitInMS)
+	}
+}

package/app/codeCharta/util/fileDownloader.ts

@@ -13,7 +13,7 @@ import { LoadFileService } from "../services/loadFile/loadFile.service"
 import { ExportCCFile } from "../codeCharta.api.model"
 import { hierarchy } from "d3-hierarchy"
 import { clone } from "./clone"
-import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.calculator"
 
 export type DownloadableSetting = "Nodes" | "AttributeTypes" | "AttributeDescriptors" | "Edges" | "Excludes" | "Flattens" | "MarkedPackages"
 

package/app/codeCharta/util/gameObjectsParser/__snapshots__/gameObjectsImporter.spec.ts.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GameObjectsImporter should parse gameObjects json to cc.json 1`] = `
-Object {
+{
   "checksum": "64ba632559688f092d2adf0dee446d7e",
-  "data": Object {
+  "data": {
     "apiVersion": "1.3",
-    "attributeTypes": Object {
-      "edges": Object {
+    "attributeTypes": {
+      "edges": {
         "coupling": "relative",
       },
     },
-    "edges": Array [
-      Object {
-        "attributes": Object {
+    "edges": [
+      {
+        "attributes": {
           "coupling": 100,
         },
         "fromNodeName": "/base/root/CHANGELOG/CHANGELOG",
@@ -20,28 +20,28 @@ Object {
       },
     ],
     "fileChecksum": "",
-    "nodes": Array [
-      Object {
-        "attributes": Object {},
-        "children": Array [
-          Object {
-            "attributes": Object {},
-            "children": Array [
-              Object {
-                "attributes": Object {},
-                "children": Array [
-                  Object {
-                    "attributes": Object {},
-                    "children": Array [
-                      Object {
-                        "attributes": Object {
+    "nodes": [
+      {
+        "attributes": {},
+        "children": [
+          {
+            "attributes": {},
+            "children": [
+              {
+                "attributes": {},
+                "children": [
+                  {
+                    "attributes": {},
+                    "children": [
+                      {
+                        "attributes": {
                           "height": 1,
                         },
                         "name": "ui",
                         "type": "File",
                       },
                     ],
-                    "fixedPosition": Object {
+                    "fixedPosition": {
                       "height": 3.13,
                       "left": 2.27,
                       "top": 95.63,
@@ -50,18 +50,18 @@ Object {
                     "name": "ui",
                     "type": "Folder",
                   },
-                  Object {
-                    "attributes": Object {},
-                    "children": Array [
-                      Object {
-                        "attributes": Object {
+                  {
+                    "attributes": {},
+                    "children": [
+                      {
+                        "attributes": {
                           "height": 4,
                         },
                         "name": "packageLock",
                         "type": "File",
                       },
                     ],
-                    "fixedPosition": Object {
+                    "fixedPosition": {
                       "height": 1.25,
                       "left": 95.45,
                       "top": 48.13,
@@ -71,7 +71,7 @@ Object {
                     "type": "Folder",
                   },
                 ],
-                "fixedPosition": Object {
+                "fixedPosition": {
                   "height": 95.24,
                   "left": 0.72,
                   "top": 2.38,
@@ -80,18 +80,18 @@ Object {
                 "name": "visualization",
                 "type": "Folder",
               },
-              Object {
-                "attributes": Object {},
-                "children": Array [
-                  Object {
-                    "attributes": Object {
+              {
+                "attributes": {},
+                "children": [
+                  {
+                    "attributes": {
                       "height": 1,
                     },
                     "name": "CHANGELOG",
                     "type": "File",
                   },
                 ],
-                "fixedPosition": Object {
+                "fixedPosition": {
                   "height": 2.98,
                   "left": 98.39,
                   "top": 48.51,
@@ -101,7 +101,7 @@ Object {
                 "type": "Folder",
               },
             ],
-            "fixedPosition": Object {
+            "fixedPosition": {
               "height": 30.05,
               "left": 0,
               "top": 34,

package/app/codeCharta/util/nodeDecorator.spec.ts

@@ -12,7 +12,7 @@ import {
 import { NodeDecorator } from "./nodeDecorator"
 import { HierarchyNode, hierarchy } from "d3-hierarchy"
 import { clone } from "./clone"
-import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.calculator"
 
 describe("nodeDecorator", () => {
 	let file: CCFile
@@ -450,4 +450,17 @@ describe("nodeDecorator", () => {
 			expect(map.attributes["some other attribute"]).not.toBeDefined()
 		})
 	})
+
+	describe("blacklist", () => {
+		it("should calculate flatten and exclude state for every node", () => {
+			NodeDecorator.decorateMap(file.map, { nodeMetricData: [], edgeMetricData: [] }, [
+				{ type: "flatten", path: "small leaf" },
+				{ type: "exclude", path: "other small leaf" }
+			])
+			expect(file.map.children[0].isExcluded).toBe(false)
+			expect(file.map.children[0].isFlattened).toBe(false)
+			expect(file.map.children[1].children[0].isFlattened).toBe(true)
+			expect(file.map.children[1].children[1].isExcluded).toBe(true)
+		})
+	})
 })

package/app/codeCharta/util/nodeDecorator.ts

@@ -1,8 +1,7 @@
-"use strict"
 import { hierarchy } from "d3-hierarchy"
 import { AttributeTypes, AttributeTypeValue, BlacklistItem, CCFile, CodeMapNode, MetricData } from "../codeCharta.model"
 import { isLeaf, isNodeExcludedOrFlattened } from "./codeMapHelper"
-import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { UNARY_METRIC } from "../state/selectors/accumulatedData/metricData/nodeMetricData.calculator"
 
 const enum MedianSelectors {
 	MEDIAN = "MEDIAN",
@@ -17,15 +16,16 @@ const enum EdgeAttributeType {
 }
 
 export const NodeDecorator = {
-	decorateMap(map: CodeMapNode, metricData: MetricData, blacklist: BlacklistItem[]) {
-		for (const item of blacklist) {
-			for (const { data } of hierarchy(map)) {
-				if (blacklist.length > 0) {
-					if (item.type === "flatten") {
-						data.isFlattened = data.isFlattened ? true : isNodeExcludedOrFlattened(data, item.path)
-					} else {
-						data.isExcluded = data.isExcluded ? true : isNodeExcludedOrFlattened(data, item.path) && isLeaf(data)
-					}
+	decorateMap(map: CodeMapNode, metricData: Pick<MetricData, "nodeMetricData" | "edgeMetricData">, blacklist: BlacklistItem[]) {
+		for (const { data } of hierarchy(map)) {
+			data.isFlattened = false
+			data.isExcluded = false
+
+			for (const item of blacklist) {
+				if (item.type === "flatten") {
+					data.isFlattened = data.isFlattened || isNodeExcludedOrFlattened(data, item.path)
+				} else {
+					data.isExcluded = data.isExcluded || (isNodeExcludedOrFlattened(data, item.path) && isLeaf(data))
 				}
 			}
 		}
@@ -33,7 +33,7 @@ export const NodeDecorator = {
 		this.decorateMapWithMetricData(map, metricData)
 	},
 
-	decorateMapWithMetricData(map: CodeMapNode, metricData: MetricData) {
+	decorateMapWithMetricData(map: CodeMapNode, metricData: Pick<MetricData, "nodeMetricData" | "edgeMetricData">) {
 		const { nodeMetricData, edgeMetricData } = metricData
 		let id = 0
 		for (const { data } of hierarchy(map)) {

package/app/codeCharta/util/parseNumberInput.ts

@@ -1,4 +1,4 @@
-export const parseNumberInput = (event: InputEvent, min: number, max: number) => {
+export const parseNumberInput = (event: Event, min: number, max: number) => {
 	const value = Number.parseInt((event.target as HTMLInputElement).value)
 	if (value < min) {
 		return min

package/app/codeCharta/util/reduxHelper.ts

@@ -1,9 +1,9 @@
 import { clone } from "./clone"
-import isEqual from "lodash.isequal"
+import { dequal } from "dequal"
 import { Action } from "redux"
 
 export function removeItemFromArray<T>(array: T[], searchItem: T) {
-	return array.filter(entry => !isEqual(entry, searchItem))
+	return array.filter(entry => !dequal(entry, searchItem))
 }
 
 export function removeEntryAtIndexFromArray<T>(array: T[], index: number) {
@@ -36,5 +36,5 @@ export function isAction<T extends Action>(action: Action, type: string): action
 }
 
 function arrayContainsItem<T>(array: T[], item: T) {
-	return array.some(x => isEqual(x, item))
+	return array.some(x => dequal(x, item))
 }

package/app/codeCharta/util/simplePipes/SimplePipesModule.ts

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core"
+import { RemoveExtensionPipe } from "./removeExtension.pipe"
+import { MetricDescriptorTitlePipe } from "./metricDescriptorTitle.pipe"
+
+@NgModule({
+	declarations: [RemoveExtensionPipe, MetricDescriptorTitlePipe],
+	exports: [RemoveExtensionPipe, MetricDescriptorTitlePipe]
+})
+export class SimplePipesModule {}

package/app/codeCharta/util/simplePipes/metricDescriptorTitle.pipe.spec.ts

@@ -0,0 +1,62 @@
+import { MetricDescriptors } from "app/codeCharta/ui/attributeSideBar/util/metricDescriptors"
+import { MetricDescriptorTitlePipe } from "./metricDescriptorTitle.pipe"
+
+const testKey = "testKey"
+const testTitle = "testTitle"
+const testHighValue = "testHighValue"
+const testLowValue = "testLowValue"
+const testDescription = "testDescription"
+const testLink = "testLink"
+let pipe: MetricDescriptorTitlePipe
+let md: MetricDescriptors
+
+describe("metricDescriptorTitlePipe", () => {
+	beforeEach(() => {
+		md = {
+			key: testKey,
+			title: null,
+			description: null,
+			hintLowValue: null,
+			hintHighValue: null,
+			link: null
+		}
+		pipe = new MetricDescriptorTitlePipe()
+	})
+
+	it("should return empty string for null", () => {
+		expect(pipe.transform(null)).toBe("")
+	})
+
+	it("should return empty string for undefined", () => {
+		expect(pipe.transform(undefined)).toBe("")
+	})
+
+	it("should be key if only key is present", () => {
+		expect(pipe.transform(md)).toBe(testKey)
+	})
+
+	it('should be "title (key)" if present', () => {
+		md.title = testTitle
+		expect(pipe.transform(md)).toBe(`${testTitle} (${testKey})`)
+	})
+
+	it("should contain : if more information available", () => {
+		md.hintLowValue = testLowValue
+		expect(pipe.transform(md)).toContain(":")
+	})
+
+	it("should include full information", () => {
+		md.title = testTitle
+		md.description = testDescription
+		md.hintHighValue = testHighValue
+		md.hintLowValue = testLowValue
+		const result = `${testTitle} (${testKey}):\n${testDescription}\nHigh Values: ${testHighValue}\nLow Values: ${testLowValue}`
+		expect(pipe.transform(md)).toBe(result)
+	})
+
+	it("should not include link", () => {
+		md.description = testDescription
+		md.link = testLink
+		expect(pipe.transform(md)).toBe(`${testKey}:\n${testDescription}`)
+	})
+})

package/app/codeCharta/util/simplePipes/metricDescriptorTitle.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from "@angular/core"
+import { MetricDescriptors } from "../../ui/attributeSideBar/util/metricDescriptors"
+
+@Pipe({ name: "metricDescriptorTitle" })
+export class MetricDescriptorTitlePipe implements PipeTransform {
+	transform(metricDescriptor: MetricDescriptors): string {
+		if (metricDescriptor == null) {
+			return ""
+		}
+		const title: string = metricDescriptor.title ? `${metricDescriptor.title} (${metricDescriptor.key})` : metricDescriptor.key
+
+		let subtitle: string = metricDescriptor.description ? `\n${metricDescriptor.description}` : ""
+		subtitle += metricDescriptor.hintHighValue ? `\nHigh Values: ${metricDescriptor.hintHighValue}` : ""
+		subtitle += metricDescriptor.hintLowValue ? `\nLow Values: ${metricDescriptor.hintLowValue}` : ""
+
+		return subtitle.length > 0 ? `${title}:${subtitle}` : title
+	}
+}

package/app/codeCharta/util/{removeExtension.pipe.ts → simplePipes/removeExtension.pipe.ts}

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from "@angular/core"
 
-import { FileNameHelper } from "./fileNameHelper"
+import { FileNameHelper } from "../fileNameHelper"
 
 @Pipe({ name: "removeExtension" })
 export class RemoveExtensionPipe implements PipeTransform {

package/app/codeCharta/util/truncateText.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+@Pipe({ name: "truncateText" })
+export class TruncateTextPipe implements PipeTransform {
+	transform(textToTruncate: string, limit, replacerString = "...") {
+		return textToTruncate.length > limit ? textToTruncate.slice(0, limit) + replacerString : textToTruncate
+	}
+}

package/app/codeCharta/util/truncateText.spec.ts

@@ -0,0 +1,19 @@
+import { TruncateTextPipe } from "./truncateText.pipe"
+
+describe("TruncateTextPipe", () => {
+	it("should return empty placeholder string if no string given", () => {
+		expect(new TruncateTextPipe().transform("", 0)).toBe("")
+	})
+
+	it("should return a shortened string when given string above limit", () => {
+		expect(new TruncateTextPipe().transform("123456", 5)).toBe("12345...")
+	})
+
+	it("should not modify string if below limit", () => {
+		expect(new TruncateTextPipe().transform("12345", 6)).toBe("12345")
+	})
+
+	it("should allow shortening with a custom string", () => {
+		expect(new TruncateTextPipe().transform("12345", 4, "ab")).toBe("1234ab")
+	})
+})

package/app/index.html

@@ -3,6 +3,7 @@
 	<head>
 		<title>CodeCharta</title>
 		<meta charset="utf-8" />
+		<link rel="icon" type="image/x-icon" href="codeCharta/assets/favicon.ico" />
 	</head>
 
 	<body>