codecharta-visualization 1.113.0 → 1.115.0

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, BlacklistType, CCFile, CodeMapNode, MetricData } from "../codeCharta.model"
+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 === BlacklistType.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/nodePathHelper.ts

@@ -1,4 +1,4 @@
-import { LoadFileService } from "../services/loadFile/loadFile.service"
+import { fileRoot } from "../services/loadFile/fileRoot"
 
 export function getUpdatedBlacklistItemPath(fileName: string, path: string) {
 	if (isAbsoluteRootPath(path)) {
@@ -8,13 +8,13 @@ export function getUpdatedBlacklistItemPath(fileName: string, path: string) {
 }
 
 export function getUpdatedPath(fileName: string, path: string) {
-	const length = LoadFileService.ROOT_PATH.length + 1
+	const length = fileRoot.rootPath.length + 1
 	const end = path.length <= length ? "" : `/${path.slice(length)}`
-	return `${LoadFileService.ROOT_PATH}/${fileName}${end}`
+	return `${fileRoot.rootPath}/${fileName}${end}`
 }
 
 function isAbsoluteRootPath(path: string) {
-	return path.startsWith(`${LoadFileService.ROOT_PATH}/`)
+	return path.startsWith(`${fileRoot.rootPath}/`)
 }
 
 export function getParent<T>(hashMap: Map<string, T>, path: string): T {
@@ -26,5 +26,5 @@ export function getParent<T>(hashMap: Map<string, T>, path: string): T {
 		if (node) {
 			return node
 		}
-	} while (path !== LoadFileService.ROOT_PATH && path.length > 0)
+	} while (path !== fileRoot.rootPath && path.length > 0)
 }

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>

package/app/material/_theme.scss

@@ -1,24 +1,24 @@
-@use "~@angular/material" as mat;
+@use "@angular/material" as mat;
 
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
 
 @include mat.core();
 
 $cc-palette: (
-	50: #e0f2f1,
-	100: #b2dfdb,
-	200: #80cbc4,
-	300: #4db6ac,
-	400: #26a69a,
-	500: #009688,
-	600: #00897b,
-	700: #00796b,
-	800: #00695c,
-	900: #004d40,
-	A100: #a7ffeb,
-	A200: #64ffda,
-	A400: #1de9b6,
-	A700: #00bfa5,
+	50: #c3e5fe,
+	100: #9bd3fe,
+	200: #76c3fd,
+	300: #55b5fc,
+	400: #37a8fc,
+	500: #1b9cfc,
+	600: #038ff8,
+	700: #0381df,
+	800: #0374c9,
+	900: #0368b5,
+	A100: #a0d5ff,
+	A200: #a0d5ff,
+	A400: #7ac5ff,
+	A700: #58b6ff,
 	contrast: (
 		50: #000000,
 		100: #000000,
@@ -49,5 +49,16 @@ $cc-theme: mat.define-light-theme(
 );
 
 $cc-primary-color: mat-color($cc-primary);
-$cc-emphasized-color: rgb(0, 124, 112);
+$cc-emphasized-color: #0374c9;
 $cc-disabled-color: rgb(204, 204, 204);
+$cc-font-color: rgba(0, 0, 0, 0.87);
+
+// For the lack of a better way of doing this
+// please remove this
+// if a method is found how to change the checkmark colors directly in theme
+// or you wish to keep the default black
+:root {
+	.mat-mdc-checkbox.mat-accent {
+		--mdc-checkbox-selected-checkmark-color: #fff !important;
+	}
+}

package/app/material/matDialog.scss

@@ -1,3 +1,3 @@
-.mat-dialog-container {
+.mat-mdc-dialog-container {
 	min-width: 320px;
 }

package/app/material/matMenu.scss

@@ -1,4 +1,4 @@
-.mat-menu-content {
+.mat-mdc-menu-content {
 	// overwrite global app.scss style
 	button {
 		margin: unset;
@@ -10,7 +10,7 @@
 		line-height: 20px;
 	}
 
-	.mat-menu-item {
+	.mat-mdc-menu-item {
 		font-size: 16px;
 	}
 }

package/app/material/material.module.ts

@@ -1,5 +1,6 @@
+import { FormsModule } from "@angular/forms"
 import { NgModule } from "@angular/core"
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
+import { NoopAnimationsModule } from "@angular/platform-browser/animations"
 import { MatSelectModule } from "@angular/material/select"
 import { MatMenuModule } from "@angular/material/menu"
 import { MatButtonModule } from "@angular/material/button"
@@ -37,11 +38,12 @@ const materialModules = [
 	MatExpansionModule,
 	MatSliderModule,
 	MatSlideToggleModule,
-	BrowserAnimationsModule
+	NoopAnimationsModule,
+	FormsModule
 ]
 
 @NgModule({
-	imports: [BrowserAnimationsModule, materialModules],
+	imports: [NoopAnimationsModule, materialModules],
 	exports: [materialModules]
 })
 export class MaterialModule {}

package/app/material/material.scss

@@ -1,4 +1,4 @@
-@use "~@angular/material" as mat;
+@use "@angular/material" as mat;
 @use "./theme";
 
 @include mat.core-theme(theme.$cc-theme);
@@ -19,10 +19,5 @@
 @include mat.slider-theme(theme.$cc-theme);
 @include mat.slide-toggle-theme(theme.$cc-theme);
 
-@import "./matSelect.scss";
 @import "./matMenu.scss";
 @import "./matDialog.scss";
-
-.cc-mat-raised {
-	background-color: theme.$cc-primary-color;
-}

package/app/polyfills.ts

@@ -0,0 +1,28 @@
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js" // Included with Angular CLI.

package/conf/jestE2E.config.json

@@ -5,18 +5,16 @@
 	"collectCoverageFrom": ["<rootDir>/app/**/*.ts", "!**/node_modules/**"],
 	"coveragePathIgnorePatterns": ["\\.(spec|e2e|po)\\.ts$", "<rootDir>/app/puppeteer.helper.ts"],
 	"transform": {
-		"\\.(m?js)$": "babel-jest",
 		"\\.(ts|tsx)$": "ts-jest"
 	},
 	"transformIgnorePatterns": ["/node_modules/(?!(three|ngx-color/fesm2020))"],
 	"roots": ["<rootDir>/app"],
 	"testMatch": ["**/*.e2e.ts"],
-	"moduleFileExtensions": ["js", "json", "ts", "tsx", "mjs"],
+	"moduleFileExtensions": ["js", "json", "ts", "mjs"],
 	"moduleDirectories": ["node_modules", "<rootDir>/app"],
 	"globals": {
 		"ts-jest": {
-			"tsconfig": "tsconfig.json",
-			"babelConfig": true
+			"tsconfig": "tsconfig.spec.json"
 		}
 	},
 	"preset": "./conf/jestE2E-preset.js",

package/conf/jestUnit.config.json

@@ -4,29 +4,18 @@
 	"coverageDirectory": "<rootDir>/dist/coverage",
 	"collectCoverageFrom": ["<rootDir>/app/**/*.ts", "!**/node_modules/**"],
 	"coveragePathIgnorePatterns": ["\\.(spec|e2e|po)\\.ts$", "<rootDir>/app/puppeteer.helper.ts"],
+	"preset": "jest-preset-angular",
 	"transform": {
-		"\\.(m?js)$": "babel-jest",
-		"\\.(ts|tsx)$": "ts-jest",
-		"\\.glsl$": "<rootDir>/mocks/fileTransformer.js",
-		"\\.html$": "html-loader-jest"
+		"\\.glsl$": "<rootDir>/mocks/fileTransformer.js"
 	},
-	"transformIgnorePatterns": ["/node_modules/(?!(three|ngx-color/fesm2020))"],
+	"transformIgnorePatterns": ["/node_modules/(?!(three|ngx-color/fesm2020|.*\\.mjs$))"],
 	"moduleNameMapper": {
-		"\\.png$": "<rootDir>/mocks/fileMock.js",
-		"\\.(css|scss)$": "<rootDir>/mocks/styleMock.js",
-		"\\CHANGELOG.(md)$": "<rootDir>/mocks/changelogMock.js",
-		"ngx-color/chrome": "<rootDir>/node_modules/ngx-color/fesm2020/ngx-color-chrome.mjs",
-		"ngx-color": "<rootDir>/node_modules/ngx-color/fesm2020/ngx-color.mjs"
+		"\\CHANGELOG.(md)$": "<rootDir>/mocks/changelogMock.js"
 	},
 	"roots": ["<rootDir>/app"],
-	"moduleFileExtensions": ["js", "json", "ts", "tsx", "mjs"],
+	"moduleFileExtensions": ["js", "json", "ts", "mjs"],
 	"moduleDirectories": ["node_modules", "<rootDir>/app"],
-	"globals": {
-		"ts-jest": {
-			"tsconfig": "tsconfig.json",
-			"babelConfig": true
-		}
-	},
 	"setupFiles": ["<rootDir>/mocks/localStorageMock.js"],
-	"setupFilesAfterEnv": ["<rootDir>/conf/setupJestUnit.ts"]
+	"setupFilesAfterEnv": ["<rootDir>/conf/setupJestUnit.ts", "jest-canvas-mock"],
+	"testEnvironment": "jsdom"
 }