codecharta-visualization 1.86.0 → 1.89.0

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.html

@@ -3,7 +3,7 @@
 		id="{{ node.path }}"
 		class="tree-element-label-{{ depth }} tree-element-label"
 		[class.hovered]="(hoveredBuildingPath$ | async) === node.path"
-		[class.marked]="isContextMenuOpenForNode"
+		[class.marked]="(rightClickedNodeData$ | async)?.nodeId === node.id"
 		(mouseenter)="onMouseEnter()"
 		(mouseleave)="onMouseLeave()"
 		(click)="toggleOpen()"

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.spec.ts

@@ -4,17 +4,10 @@ import userEvent from "@testing-library/user-event"
 
 import { searchedNodePathsSelector } from "../../../state/selectors/searchedNodes/searchedNodePaths.selector"
 import { Store } from "../../../state/store/store"
-import { NodeContextMenuController } from "../../nodeContextMenu/nodeContextMenu.component"
 import { MapTreeViewModule } from "../mapTreeView.module"
 import { MapTreeViewLevelComponent } from "./mapTreeViewLevel.component"
 import { rootNode } from "./mocks"
 
-jest.mock("../../nodeContextMenu/nodeContextMenu.component", () => ({
-	NodeContextMenuController: {
-		subscribeToHideNodeContextMenu: () => {},
-		broadcastShowEvent: jest.fn()
-	}
-}))
 jest.mock("../../../state/selectors/searchedNodes/searchedNodePaths.selector", () => ({
 	searchedNodePathsSelector: jest.fn(
 		jest.requireActual("../../../state/selectors/searchedNodes/searchedNodePaths.selector").searchedNodePathsSelector
@@ -76,21 +69,18 @@ describe("mapTreeViewLevel", () => {
 		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeTruthy()
 	})
 
-	it("should open nodeContextMenu when options button clicked and be marked afterwards", async () => {
-		const nodeContextMenuSpy = jest.spyOn(NodeContextMenuController, "broadcastShowEvent")
-
+	it("should show option button on hover and be marked after context menu was opened", async () => {
 		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
+
 		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
+		let optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		expect(optionsButton).toBe(null)
 
 		userEvent.hover(firstLevelFolder)
-		const optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		expect(optionsButton).not.toBe(null)
 		fireEvent.click(optionsButton.querySelector("[title='Open Node-Context-Menu']"))
 
-		expect(nodeContextMenuSpy).toHaveBeenCalled()
-		const argumentsToNodeContextMenu = nodeContextMenuSpy.mock.calls[0]
-		expect(argumentsToNodeContextMenu[1]).toBe("/root/ParentLeaf")
-		expect(argumentsToNodeContextMenu[2]).toBe("Folder")
-
 		const isMarked = container.querySelector("#\\/root\\/ParentLeaf.marked")
 		expect(isMarked).toBeTruthy()
 	})

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.ts

@@ -5,7 +5,11 @@ import { Store } from "../../../state/angular-redux/store"
 import { CodeMapNode } from "../../../codeCharta.model"
 import { hoveredBuildingPathSelector } from "../../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.selector"
 import { setHoveredBuildingPath } from "../../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
-import { NodeContextMenuController } from "../../nodeContextMenu/nodeContextMenu.component"
+import {
+	RightClickedNodeData,
+	setRightClickedNodeData
+} from "../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { rightClickedNodeDataSelector } from "../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
 
 @Component({
 	selector: "cc-map-tree-view-level",
@@ -16,14 +20,13 @@ export class MapTreeViewLevelComponent implements OnInit {
 	@Input() depth: number
 
 	hoveredBuildingPath$: Observable<string | null>
+	rightClickedNodeData$: Observable<RightClickedNodeData>
 
 	isOpen = false
-	isContextMenuOpenForNode = false
 
 	constructor(@Inject(Store) private store: Store) {
 		this.hoveredBuildingPath$ = this.store.select(hoveredBuildingPathSelector)
-
-		NodeContextMenuController.subscribeToHideNodeContextMenu(undefined, this)
+		this.rightClickedNodeData$ = this.store.select(rightClickedNodeDataSelector)
 	}
 
 	ngOnInit(): void {
@@ -33,10 +36,6 @@ export class MapTreeViewLevelComponent implements OnInit {
 		}
 	}
 
-	onHideNodeContextMenu() {
-		this.isContextMenuOpenForNode = false
-	}
-
 	onMouseEnter() {
 		this.store.dispatch(setHoveredBuildingPath(this.node.path))
 	}
@@ -49,8 +48,13 @@ export class MapTreeViewLevelComponent implements OnInit {
 		$event.stopPropagation()
 		$event.preventDefault()
 
-		this.isContextMenuOpenForNode = true
-		NodeContextMenuController.broadcastShowEvent(undefined, this.node.path, this.node.type, $event.clientX, $event.clientY)
+		this.store.dispatch(
+			setRightClickedNodeData({
+				nodeId: this.node.id,
+				xPositionOfRightClickEvent: $event.clientX,
+				yPositionOfRightClickEvent: $event.clientY
+			})
+		)
 
 		document.querySelector(".tree-element-0").addEventListener("scroll", this.scrollFunction)
 	}
@@ -60,7 +64,7 @@ export class MapTreeViewLevelComponent implements OnInit {
 	}
 
 	private scrollFunction = () => {
-		NodeContextMenuController.broadcastHideEvent()
+		this.store.dispatch(setRightClickedNodeData(null))
 		document.querySelector(".tree-element-0").removeEventListener("scroll", this.scrollFunction)
 	}
 }

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

@@ -14,7 +14,7 @@
 		<div class="section-header">
 			<custom-configs-component></custom-configs-component>
 		</div>
-		<span class="section-title no-hover">Map Configurations</span>
+		<span class="section-title no-hover">Custom Views</span>
 	</div>
 </md-card>
 
@@ -45,11 +45,11 @@
 			>Area Metric Options <i class="fa fa-angle-down"></i
 		></span>
 	</div>
-	<area-settings-panel-component
+	<cc-area-settings-panel
 		ng-class="{
 			hidden: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.AREA_PANEL_OPEN
 		}"
-	></area-settings-panel-component>
+	></cc-area-settings-panel>
 </md-card>
 
 <md-card

package/app/codeCharta/ui/ribbonBar/ribbonBar.e2e.ts

@@ -47,7 +47,7 @@ describe("RibbonBar", () => {
 	})
 
 	describe("opening and closing ribbon-bar cards", () => {
-		it("searchPanel", async () => {
+		it("search-panel-card", async () => {
 			let isSearchPanelOpen = await searchPanel.toggle()
 			expect(isSearchPanelOpen).toBeTruthy()
 
@@ -55,7 +55,7 @@ describe("RibbonBar", () => {
 			expect(isSearchPanelOpen).toBeFalsy()
 		})
 
-		it("height-metric cad", async () => {
+		it("height-metric card", async () => {
 			const panel = "height-metric"
 
 			let isHeightSettingsPanelOpen = await ribbonBar.togglePanel(panel)
@@ -85,7 +85,7 @@ describe("RibbonBar", () => {
 			expect(isColorSettingsPanelOpen).toBeFalsy()
 		})
 
-		it("edge-metric", async () => {
+		it("edge-metric card", async () => {
 			const panel = "edge-metric"
 
 			let isEdgeSettingsPanelOpen = await ribbonBar.togglePanel(panel)

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

@@ -9,6 +9,11 @@
 		ng-model="$ctrl._viewModel.searchPattern"
 		ng-change="$ctrl.handleSearchPatternChange()"
 	/>
+	<span class="small-action-button transparent clear-icon" ng-if="!$ctrl.isSearchPatternEmpty()">
+		<md-button class="md-fab" ng-click="$ctrl.resetSearchPattern()">
+			<i class="fa fa-times"></i>
+		</md-button>
+	</span>
 </md-input-container>
 
 <md-menu>

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

@@ -21,6 +21,17 @@ search-bar-component {
 			vertical-align: middle;
 			display: inline-block;
 		}
+
+		#searchInput {
+			padding-right: 24px;
+		}
+
+		.clear-icon {
+			position: absolute;
+			right: 0;
+			margin: 0;
+			margin-top: 2px;
+		}
 	}
 
 	.small-action-button {

package/app/codeCharta/ui/searchBar/searchBar.component.spec.ts

@@ -213,4 +213,14 @@ describe("SearchBarController", () => {
 			}, SearchBarController["DEBOUNCE_TIME"] + SOME_EXTRA_TIME)
 		})
 	})
+
+	describe("resetSearchPattern", () => {
+		it("should clear the SearchPattern", () => {
+			searchBarController["_viewModel"].searchPattern = "pattern"
+
+			searchBarController.resetSearchPattern()
+
+			expect(searchBarController.isSearchPatternEmpty()).toBeTruthy()
+		})
+	})
 })

package/app/codeCharta/ui/searchBar/searchBar.component.ts

@@ -132,7 +132,7 @@ export class SearchBarController implements BlacklistSubscriber, SearchPatternSu
 		return path
 	}
 
-	private resetSearchPattern() {
+	resetSearchPattern() {
 		this._viewModel.searchPattern = ""
 		this.updateSearchPattern()
 	}

package/app/codeCharta/ui/sortingOption/sortingOption.component.spec.ts

@@ -17,7 +17,7 @@ describe("SortingOptionComponent", () => {
 
 	it("should have an explaining title", async () => {
 		await render(SortingOptionComponent)
-		expect(screen.findByLabelText("Sort by")).toBeTruthy()
+		expect(await screen.findByTitle("Sort by")).toBeTruthy()
 	})
 
 	it("should be a select for the sorting option", async () => {

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

@@ -4,7 +4,7 @@
 	<screenshot-button-component></screenshot-button-component>
 	<cc-export-threed-map-button></cc-export-threed-map-button>
 
-	<file-panel-component ng-class="{ hidden: $ctrl._viewModel.isNodeHovered }"></file-panel-component>
+	<cc-file-panel ng-class="{ hidden: $ctrl._viewModel.isNodeHovered }"></cc-file-panel>
 	<node-path-panel-component ng-class="{ hidden: !$ctrl._viewModel.isNodeHovered }"></node-path-panel-component>
 
 	<div class="right-aligned">

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

@@ -35,11 +35,11 @@ tool-bar-component {
 		display: inline-flex;
 		align-items: center;
 		width: 400px;
+		justify-content: space-between;
 	}
 
 	span {
 		font-size: 10pt;
-		margin-right: 8px;
 	}
 
 	loading-gif-map-component {

package/app/codeCharta/ui/ui.ts

@@ -3,7 +3,6 @@ import { downgradeComponent } from "@angular/upgrade/static"
 
 import "./artificialIntelligence/artificialIntelligence.module"
 import "./customConfigs/customConfigs.module"
-import "./unfocusButton/unfocusButton.module"
 import "./metricValueHovered/metricValueHovered.module"
 import "./downloadButton/downloadButton.module"
 import "./screenshotButton/screenshotButton.module"
@@ -27,7 +26,6 @@ import "./heightSettingsPanel/heightSettingsPanel.module"
 import "./loadingGif/loadingGif.module"
 import "./metricChooser/metricChooser.module"
 import "./metricType/metricType.module"
-import "./nodeContextMenu/nodeContextMenu.module"
 import "./rangeSlider/rangeSlider.module"
 import "./resetSettingsButton/resetSettingsButton.module"
 import "./filePanel/filePanel.module"
@@ -51,7 +49,6 @@ angular
 	.module("app.codeCharta.ui", [
 		"app.codeCharta.ui.artificialIntelligence",
 		"app.codeCharta.ui.customConfigs",
-		"app.codeCharta.ui.unfocusButton",
 		"app.codeCharta.ui.metricValueHovered",
 		"app.codeCharta.ui.downloadButton",
 		"app.codeCharta.ui.screenshotButton",
@@ -72,12 +69,10 @@ angular
 		"app.codeCharta.ui.dialog",
 		"app.codeCharta.ui.fileChooser",
 		"app.codeCharta.ui.fileExtensionBar",
-		"app.codeCharta.ui.filePanel",
 		"app.codeCharta.ui.heightSettingsPanel",
 		"app.codeCharta.ui.loadingGif",
 		"app.codeCharta.ui.metricChooser",
 		"app.codeCharta.ui.metricType",
-		"app.codeCharta.ui.nodeContextMenu",
 		"app.codeCharta.ui.rangeSlider",
 		"app.codeCharta.ui.resetSettingsButton",
 		"app.codeCharta.ui.ribbonBar",
@@ -86,7 +81,8 @@ angular
 		"app.codeCharta.ui.viewCube",
 		"app.codeCharta.ui.layoutSelection",
 		"app.codeCharta.ui.sharpnessModeSelector",
-		"app.codeCharta.ui.maxTreeMapFiles"
+		"app.codeCharta.ui.maxTreeMapFiles",
+		"app.codeCharta.ui.filePanel"
 	])
 	.directive("ccSortingButton", downgradeComponent({ component: SortingButtonComponent }))
 	.directive("ccSortingOption", downgradeComponent({ component: SortingOptionComponent }))

package/app/codeCharta/util/algorithm/streetLayout/strip/strip.ts

@@ -10,7 +10,7 @@ export default abstract class Strip {
 		this.nodes = nodes
 	}
 
-	public abstract layout(
+	abstract layout(
 		rect: Rectangle,
 		rootSize: number,
 		metricName: string,
@@ -19,7 +19,7 @@ export default abstract class Strip {
 		order?: number
 	): CodeMapNode[]
 
-	public abstract worstAspectRatio(nodes: CodeMapNode[], rect: Rectangle, rootSize: number, metricName: string): number
+	protected abstract worstAspectRatio(nodes: CodeMapNode[], rect: Rectangle, rootSize: number, metricName: string): number
 
 	totalScaledSize(nodes: CodeMapNode[], metricName: string, rootSize: number, rootArea: number): number {
 		return nodes.reduce((total, n) => total + this.scaledSize(n, rootSize, rootArea, metricName), 0)

package/app/codeCharta/util/algorithm/streetLayout/treeMap.ts

@@ -11,7 +11,7 @@ export default abstract class Treemap extends BoundingBox {
 		super(rootNode)
 	}
 
-	public abstract layout(margin: number, origin: Vector2): CodeMapNode[]
+	abstract layout(margin: number, origin: Vector2): CodeMapNode[]
 
 	calculateDimension(metricName: string): void {
 		this.metricName = metricName

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

@@ -34,7 +34,7 @@ describe("treeMapGenerator", () => {
 		codeMapNode = klona(VALID_NODE_WITH_PATH)
 		metricData = klona(METRIC_DATA)
 		isDeltaState = false
-		state.dynamicSettings.focusedNodePath = ""
+		state.dynamicSettings.focusedNodePath = []
 	}
 
 	describe("create Treemap nodes", () => {
@@ -181,7 +181,7 @@ 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)
+			const actual = SquarifiedLayoutGenerator.calculateAreaValue(codeMapNode, state, 400)
 
 			expect(actual).toBe(0)
 		})

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

@@ -12,6 +12,7 @@ const DEFAULT_PADDING_FLOOR_LABEL_FROM_LEVEL_2 = 95
 export function createTreemapNodes(map: CodeMapNode, state: State, metricData: NodeMetricData[], isDeltaState: boolean): Node[] {
 	const mapSizeResolutionScaling = getMapResolutionScaleFactor(state.files)
 	const maxHeight = metricData.find(x => x.name === state.dynamicSettings.heightMetric).maxValue * mapSizeResolutionScaling
+	const maxWidth = metricData.find(x => x.name === state.dynamicSettings.areaMetric).maxValue * mapSizeResolutionScaling
 	const heightScale = (state.treeMap.mapSize * 2) / maxHeight
 
 	if (hasFixedFolders(map)) {
@@ -42,14 +43,14 @@ export function createTreemapNodes(map: CodeMapNode, state: State, metricData: N
 				0,
 				heightScale,
 				maxHeight,
+				maxWidth,
 				isDeltaState,
 				mapSizeResolutionScaling
 			)
 		]
 	}
 
-	const squarifiedTreeMap = getSquarifiedTreeMap(map, state, mapSizeResolutionScaling)
-
+	const squarifiedTreeMap = getSquarifiedTreeMap(map, state, mapSizeResolutionScaling, maxWidth)
 	const nodes: Node[] = []
 	for (const squarifiedNode of squarifiedTreeMap.treeMap) {
 		nodes.push(TreeMapHelper.buildNodeFrom(squarifiedNode, heightScale, maxHeight, state, isDeltaState))
@@ -66,6 +67,7 @@ function buildSquarifiedTreeMapsForFixedFolders(
 	offsetY0: number,
 	heightScale: number,
 	maxHeight: number,
+	maxWidth: number,
 	isDeltaState: boolean,
 	mapSizeResolutionScaling: number
 ) {
@@ -73,7 +75,7 @@ function buildSquarifiedTreeMapsForFixedFolders(
 
 	for (const fixedFolder of hierarchyNode.children) {
 		const fixedPosition = fixedFolder.data.fixedPosition
-		const squarified = getSquarifiedTreeMap(fixedFolder.data, state, mapSizeResolutionScaling)
+		const squarified = getSquarifiedTreeMap(fixedFolder.data, state, mapSizeResolutionScaling, maxWidth)
 
 		for (const squarifiedNode of squarified.treeMap.descendants()) {
 			// squarified.width/height is a sum of the fixedPosition.width/height and applied margins
@@ -119,6 +121,7 @@ function buildSquarifiedTreeMapsForFixedFolders(
 						squarifiedNode.y0,
 						heightScale,
 						maxHeight,
+						maxWidth,
 						isDeltaState,
 						mapSizeResolutionScaling
 					)
@@ -150,7 +153,7 @@ function scaleRoot(root: Node, scaleLength: number, scaleWidth: number) {
 	root.length *= scaleLength
 }
 
-function getSquarifiedTreeMap(map: CodeMapNode, state: State, mapSizeResolutionScaling: number): SquarifiedTreeMap {
+function getSquarifiedTreeMap(map: CodeMapNode, state: State, mapSizeResolutionScaling: number, maxWidth: number): SquarifiedTreeMap {
 	const hierarchyNode = hierarchy(map)
 	const nodesPerSide = getEstimatedNodesPerSide(hierarchyNode)
 	const padding = state.dynamicSettings.margin * PADDING_SCALING_FACTOR * mapSizeResolutionScaling
@@ -216,7 +219,11 @@ function getSquarifiedTreeMap(map: CodeMapNode, state: State, mapSizeResolutionS
 			return padding
 		})
 
-	return { treeMap: treeMap(hierarchyNode.sum(node => calculateAreaValue(node, state) * mapSizeResolutionScaling)), height, width }
+	return {
+		treeMap: treeMap(hierarchyNode.sum(node => calculateAreaValue(node, state, maxWidth) * mapSizeResolutionScaling)),
+		height,
+		width
+	}
 }
 
 function getEstimatedNodesPerSide(hierarchyNode: HierarchyNode<CodeMapNode>) {
@@ -241,7 +248,7 @@ function isOnlyVisibleInComparisonMap(node: CodeMapNode, dynamicSettings: Dynami
 }
 
 // Only exported for testing.
-export function calculateAreaValue(node: CodeMapNode, { dynamicSettings }: State) {
+export function calculateAreaValue(node: CodeMapNode, { dynamicSettings, appSettings }: State, maxWidth: number) {
 	if (node.isExcluded) {
 		return 0
 	}
@@ -251,7 +258,7 @@ export function calculateAreaValue(node: CodeMapNode, { dynamicSettings }: State
 	}
 
 	if (isLeaf(node) && node.attributes?.[dynamicSettings.areaMetric]) {
-		return node.attributes[dynamicSettings.areaMetric]
+		return appSettings.invertArea ? maxWidth - node.attributes[dynamicSettings.areaMetric] : node.attributes[dynamicSettings.areaMetric]
 	}
 	return 0
 }

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

@@ -48,7 +48,7 @@ describe("TreeMapHelper", () => {
 			state.dynamicSettings.margin = 15
 			state.dynamicSettings.heightMetric = "theHeight"
 			state.appSettings.invertHeight = false
-			state.dynamicSettings.focusedNodePath = ""
+			state.dynamicSettings.focusedNodePath = []
 		})
 
 		function buildNode() {
@@ -117,7 +117,7 @@ describe("TreeMapHelper", () => {
 		})
 
 		it("should be visible if it's a children of the focused node path", () => {
-			state.dynamicSettings.focusedNodePath = "/root"
+			state.dynamicSettings.focusedNodePath = ["/root"]
 			expect(buildNode().visible).toBeTruthy()
 		})
 

package/app/codeCharta/util/algorithm/treeMapLayout/treeMapHelper.ts

@@ -144,7 +144,7 @@ export function isVisible(squaredNode: CodeMapNode, isNodeLeaf: boolean, state:
 	}
 
 	if (state.dynamicSettings.focusedNodePath.length > 0) {
-		return squaredNode.path.startsWith(state.dynamicSettings.focusedNodePath)
+		return squaredNode.path.startsWith(state.dynamicSettings.focusedNodePath[0])
 	}
 
 	return true

package/app/codeCharta/util/customConfigBuilder.ts

@@ -57,6 +57,7 @@ function initializeAppSettings(target: CustomConfig) {
 		edgeHeight: 0,
 		hideFlatBuildings: false,
 		invertHeight: false,
+		invertArea: false,
 		isAttributeSideBarVisible: false,
 		isLoadingFile: false,
 		isLoadingMap: false,
@@ -99,7 +100,7 @@ function initializeDynamicSettings(target: CustomConfig) {
 		colorMetric: "",
 		distributionMetric: "",
 		edgeMetric: "",
-		focusedNodePath: undefined,
+		focusedNodePath: [],
 		heightMetric: "",
 		margin: 0,
 		searchPattern: "",