codecharta-visualization 1.86.0 → 1.89.0

package/package.json

@@ -10,7 +10,7 @@
 		"url": "https://github.com/MaibornWolff/codecharta.git"
 	},
 	"name": "codecharta-visualization",
-	"version": "1.86.0",
+	"version": "1.89.0",
 	"engines": {
 		"node": ">=16"
 	},
@@ -133,6 +133,7 @@
 		"remark": "^13.0.0",
 		"remark-html": "^13.0.1",
 		"remark-loader": "^4.0.0",
+		"rxjs": "^7.5.1",
 		"shelljs": "^0.8.4",
 		"three": "^0.126.1",
 		"three-orbit-controls": "^82.1.0",
@@ -157,8 +158,8 @@
 		"@types/node": "^16.0.0",
 		"@types/puppeteer": "^5.4.3",
 		"@types/three": "^0.126.0",
-		"@typescript-eslint/eslint-plugin": "^4.22.0",
-		"@typescript-eslint/parser": "^4.22.0",
+		"@typescript-eslint/eslint-plugin": "^5.0.0",
+		"@typescript-eslint/parser": "^5.0.0",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-angularjs-annotate": "^0.10.0",
 		"bestzip": "^2.2.0",
@@ -166,11 +167,11 @@
 		"clean-webpack-plugin": "^4.0.0",
 		"cross-env": "^7.0.3",
 		"css-loader": "^6.0.0",
-		"eslint": "^7.28.0",
+		"eslint": "^8.0.0",
 		"eslint-config-prettier": "^8.2.0",
-		"eslint-plugin-unicorn": "^36.0.0",
+		"eslint-plugin-unicorn": "^40.0.0",
 		"file-loader": "^6.2.0",
-		"html-loader": "^1.1.0",
+		"html-loader": "^3.0.0",
 		"html-loader-jest": "^0.2.1",
 		"html-webpack-plugin": "^5.3.1",
 		"jest": "^26.6.3",

package/app/codeCharta/state/store/dynamicSettings/focusedNodePath/focusedNodePath.splitter.ts

@@ -1,8 +0,0 @@
-import { focusNode, unfocusNode } from "./focusedNodePath.actions"
-
-export function splitFocusedNodePathAction(payload: string) {
-	if (payload === "") {
-		return unfocusNode()
-	}
-	return focusNode(payload)
-}

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/aggregationSymbol.pipe.spec.ts

@@ -1,19 +0,0 @@
-import { AttributeTypeValue } from "../../../codeCharta.model"
-import { AggregationSymbolPipe } from "./aggregationSymbol.pipe"
-
-describe("aggregationSymbolPipe", () => {
-	it("should map `AttributeTypeValue.relative` to x͂", () => {
-		const getAttributeTypeOfNodesByMetricSelector = () => AttributeTypeValue.relative
-		expect(new AggregationSymbolPipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("x͂")
-	})
-
-	it("should map `AttributeTypeValue.absolute` to Σ", () => {
-		const getAttributeTypeOfNodesByMetricSelector = () => AttributeTypeValue.absolute
-		expect(new AggregationSymbolPipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("Σ")
-	})
-
-	it("should default to Σ", () => {
-		const getAttributeTypeOfNodesByMetricSelector = () => "" as AttributeTypeValue
-		expect(new AggregationSymbolPipe().transform("some-metric-name", getAttributeTypeOfNodesByMetricSelector)).toBe("Σ")
-	})
-})

package/app/codeCharta/ui/codeMap/codeMap.actions.service.spec.ts

@@ -1,147 +0,0 @@
-import "./codeMap.module"
-import "../../codeCharta.module"
-import { CodeMapActionsService } from "./codeMap.actions.service"
-import { getService, instantiateModule } from "../../../../mocks/ng.mockhelper"
-import { CodeMapNode } from "../../codeCharta.model"
-import { VALID_NODE_WITH_PATH } from "../../util/dataMocks"
-import { StoreService } from "../../state/store.service"
-import { setMarkedPackages } from "../../state/store/fileSettings/markedPackages/markedPackages.actions"
-import { EdgeMetricDataService } from "../../state/store/metricData/edgeMetricData/edgeMetricData.service"
-import { clone } from "../../util/clone"
-
-describe("CodeMapActionService", () => {
-	let codeMapActionsService: CodeMapActionsService
-	let edgeMetricDataService: EdgeMetricDataService
-	let storeService: StoreService
-
-	let nodeA: CodeMapNode
-
-	function restartSystem() {
-		instantiateModule("app.codeCharta.ui.codeMap")
-
-		edgeMetricDataService = getService<EdgeMetricDataService>("edgeMetricDataService")
-		storeService = getService<StoreService>("storeService")
-
-		nodeA = clone(VALID_NODE_WITH_PATH)
-		storeService.dispatch(setMarkedPackages())
-	}
-
-	function rebuildService() {
-		codeMapActionsService = new CodeMapActionsService(edgeMetricDataService, storeService)
-	}
-
-	beforeEach(() => {
-		restartSystem()
-		rebuildService()
-	})
-
-	describe("markFolder", () => {
-		it("should mark a folder that is not marked yet and has no marked children packages", () => {
-			const expected = [{ color: "0x000000", path: "/root" }]
-
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(1)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual(expected)
-		})
-
-		it("should remove the children of a marked package if color is the same", () => {
-			const expected = [{ color: "0x000000", path: "/root" }]
-
-			codeMapActionsService.markFolder(nodeA.children[0], "0x000000")
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(1)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual(expected)
-		})
-
-		it("should not remove the children of a marked package if color is different", () => {
-			const expected = [
-				{ color: "0x000000", path: "/root" },
-				{ color: "0x000001", path: "/root/big leaf" }
-			]
-
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-			codeMapActionsService.markFolder(nodeA.children[0], "0x000001")
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(2)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual(expected)
-		})
-
-		it("should not mark with a new color if sub-nodes are already marked", () => {
-			const expected = [
-				{ color: "0x000003", path: "/root" },
-				{ color: "0x000001", path: "/root/big leaf" },
-				{ color: "0x000002", path: "/root/Parent Leaf" }
-			]
-
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-			codeMapActionsService.markFolder(nodeA.children[0], "0x000001")
-			codeMapActionsService.markFolder(nodeA.children[1], "0x000002")
-
-			codeMapActionsService.markFolder(nodeA, "0x000003")
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(3)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual(expected)
-		})
-	})
-
-	describe("unmarkFolder", () => {
-		it("should unmark a folder that is marked and has no marked children packages", () => {
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-
-			codeMapActionsService.unmarkFolder(nodeA)
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(0)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual([])
-		})
-
-		it("should not unmark marked children nodes", () => {
-			const expected = [
-				{ color: "0x000000", path: "/root/big leaf" },
-				{ color: "0x000000", path: "/root/Parent Leaf" }
-			]
-
-			codeMapActionsService.markFolder(nodeA.children[0], "0x000000")
-			codeMapActionsService.markFolder(nodeA.children[1], "0x000000")
-
-			codeMapActionsService.unmarkFolder(nodeA)
-
-			expect(storeService.getState().fileSettings.markedPackages).toHaveLength(2)
-			expect(storeService.getState().fileSettings.markedPackages).toEqual(expected)
-		})
-	})
-
-	describe("getParentMarkedPackageIndex", () => {
-		it("should return null if there are no marked packages", () => {
-			const result = codeMapActionsService.getParentMarkedPackageIndex(nodeA.path)
-
-			expect(result).toEqual(-1)
-		})
-
-		it("should return null if node is a marked package", () => {
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-
-			const result = codeMapActionsService.getParentMarkedPackageIndex(nodeA.path)
-
-			expect(result).toEqual(-1)
-		})
-
-		it("should return marked package of root", () => {
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-
-			const result = codeMapActionsService.getParentMarkedPackageIndex(nodeA.children[0].path)
-
-			expect(result).toEqual(0)
-		})
-
-		it("should return the correct parent marked package", () => {
-			codeMapActionsService.markFolder(nodeA, "0x000000")
-			codeMapActionsService.markFolder(nodeA.children[1], "0x000001")
-
-			const result = codeMapActionsService.getParentMarkedPackageIndex(nodeA.children[1].children[0].path)
-
-			expect(result).toEqual(1)
-		})
-	})
-})

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component.html

@@ -1,5 +0,0 @@
-<div class="cc-color-picker-trigger fa fa-paint-brush" [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></div>
-
-<mat-menu #menu="matMenu" [hasBackdrop]="false" class="cc-color-picker-menu">
-	<cc-color-picker [hexColor]="'#ff0000'" (onColorChange)="markFolder($event)"></cc-color-picker>
-</mat-menu>

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component.scss

@@ -1,13 +0,0 @@
-cc-mark-folder-color-picker {
-	display: inline-block;
-
-	:hover {
-		cursor: pointer;
-	}
-
-	.cc-color-picker-trigger {
-		width: 32px;
-		height: 32px;
-		font-size: 25px;
-	}
-}

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component.ts

@@ -1,30 +0,0 @@
-import { Component, HostListener, Input, ViewChild } from "@angular/core"
-import { MatMenuTrigger } from "@angular/material/menu"
-
-import "./markFolderColorPicker.component.scss"
-
-@Component({
-	selector: "cc-mark-folder-color-picker",
-	template: require("./markFolderColorPicker.component.html")
-})
-export class MarkFolderColorPickerComponent {
-	@Input() markFolder: (hexColor: string) => void
-
-	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
-
-	private isClickInside = false
-
-	@HostListener("click")
-	onClick() {
-		this.isClickInside = true
-	}
-
-	@HostListener("document:click")
-	handleDocumentClick() {
-		if (!this.isClickInside && this.colorPickerMenuTrigger && this.colorPickerMenuTrigger.menuOpen) {
-			this.colorPickerMenuTrigger.closeMenu()
-		}
-
-		this.isClickInside = false
-	}
-}

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-
-import { MaterialModule } from "../../../../material/material.module"
-import { ColorPickerModule } from "../../colorPicker/colorPicker.module"
-import { MarkFolderColorPickerComponent } from "./markFolderColorPicker.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule, ColorPickerModule],
-	declarations: [MarkFolderColorPickerComponent],
-	exports: [MarkFolderColorPickerComponent]
-})
-export class MarkFolderColorPickerModule {}

package/app/codeCharta/ui/nodeContextMenu/nodeContextMenu.component.html

@@ -1,68 +0,0 @@
-<md-card id="codemap-context-menu" ng-show="$ctrl._viewModel.showNodeContextMenu">
-	<div ng-if="$ctrl.nodeIsFolder()">
-		<div layout="row" layout-align="center center">
-			<md-button
-				ng-repeat="color in $ctrl._viewModel.markingColors track by $index"
-				ng-style="{ 'background-color': '{{ color }}' }"
-				ng-disabled="primary === color && !isPrimary"
-				ng-click="$ctrl.clickColor(color)"
-				class="colorButton"
-				title="Colorize folder"
-			>
-				<i class="fa fa-times" ng-if="$ctrl.isNodeOrParentMarked(color)"></i>
-			</md-button>
-
-			<cc-mark-folder-color-picker [mark-folder]="$ctrl.markFolder"></cc-mark-folder-color-picker>
-		</div>
-		<md-divider></md-divider>
-	</div>
-
-	<div class="button-group">
-		<md-button ng-disabled="true" title="{{ $ctrl._viewModel.nodePath }}">
-			{{ $ctrl._viewModel.lastPartOfNodePath }}
-		</md-button>
-		<md-button
-			ng-show="!$ctrl.isNodeFocused()"
-			ng-click="$ctrl.focusNode()"
-			id="focus-button"
-			title="Only show selected nodes with children-nodes"
-			><i class="fa fa-bullseye"></i> Focus</md-button
-		>
-		<unfocus-button-component
-			is-node-focused="$ctrl._viewModel.isNodeFocused"
-			is-parent-focused="$ctrl._viewModel.isParentFocused"
-			ng-show="$ctrl.isNodeOrParentFocused()"
-		></unfocus-button-component>
-		<md-button
-			ng-if="!$ctrl._viewModel.codeMapNode.isFlattened"
-			ng-click="$ctrl.flattenNode()"
-			id="flatten-button"
-			title="Flatten node and children-nodes, but keep an empty space"
-		>
-			<img alt="flattenIcon" class="png-icon" src="../../../assets/flatten.png" style="width: 17px; height: 17px" />
-			Flatten
-		</md-button>
-		<md-button
-			ng-if="$ctrl._viewModel.codeMapNode.isFlattened"
-			ng-click="$ctrl.showFlattenedNode()"
-			title="Show node and children-nodes"
-			><img alt="flattenIcon" class="png-icon" src="../../../assets/flatten.png" style="width: 17px; height: 17px" /> Show</md-button
-		>
-		<md-button
-			ng-if="!$ctrl.isNodeConstantlyHighlighted()"
-			title="Highlight node constantly"
-			ng-click="$ctrl.addNodeToConstantHighlight()"
-			><i class="fa fa-cubes"></i> Keep Highlight</md-button
-		>
-		<md-button
-			ng-if="$ctrl.isNodeConstantlyHighlighted()"
-			title="Remove constant highlight"
-			ng-click="$ctrl.removeNodeFromConstantHighlight()"
-			><i class="fa fa-cubes"></i> Remove Highlight</md-button
-		>
-
-		<md-button ng-click="$ctrl.excludeNode()" id="exclude-button" title="Exclude node and children-nodes and reorder the CodeMap"
-			><i class="fa fa-ban"></i> Exclude</md-button
-		>
-	</div>
-</md-card>

package/app/codeCharta/ui/nodeContextMenu/nodeContextMenu.component.scss

@@ -1,52 +0,0 @@
-.cdk-overlay-container {
-	/* overwrite z-index of below #codemap-context-menu */
-	z-index: 2000 !important;
-}
-
-node-context-menu-component {
-	#codemap-context-menu {
-		position: absolute;
-		z-index: 2000;
-	}
-
-	.button-group {
-		display: inline-grid;
-	}
-
-	.png-icon {
-		margin: 5px auto auto;
-		padding: 0;
-		display: inline-block;
-		background-repeat: no-repeat no-repeat;
-		pointer-events: none;
-	}
-	.md-button:not(.colorButton) {
-		text-align: left;
-		margin-top: 0;
-		line-height: 30px;
-		min-height: 30px;
-
-		i {
-			min-width: 15px;
-		}
-
-		&:not(:last-child) {
-			margin-bottom: 0;
-		}
-	}
-
-	.colorButton {
-		width: 32px !important;
-		height: 32px !important;
-		min-width: 32px !important;
-		min-height: 32px !important;
-
-		i {
-			font-size: 25px;
-			margin-left: 0;
-			margin-top: 3px;
-			color: red;
-			text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
-		}
-	}
-}