codecharta-visualization 1.88.0 → 1.89.0

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/ui.ts

@@ -26,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"
@@ -74,7 +73,6 @@ angular
 		"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",

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

@@ -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/customConfigBuilder.ts

@@ -57,6 +57,7 @@ function initializeAppSettings(target: CustomConfig) {
 		edgeHeight: 0,
 		hideFlatBuildings: false,
 		invertHeight: false,
+		invertArea: false,
 		isAttributeSideBarVisible: false,
 		isLoadingFile: false,
 		isLoadingMap: false,

package/app/codeCharta/util/dataMocks.ts

@@ -1772,6 +1772,7 @@ export const STATE: State = {
 		cameraTarget: new Vector3(177, 0, 299),
 		hideFlatBuildings: true,
 		invertHeight: true,
+		invertArea: false,
 		dynamicMargin: true,
 		isWhiteBackground: false,
 		mapColors: {
@@ -1838,6 +1839,7 @@ export const DEFAULT_STATE: State = {
 		dynamicMargin: true,
 		hideFlatBuildings: false,
 		invertHeight: false,
+		invertArea: false,
 		isWhiteBackground: false,
 		mapColors: {
 			angularGreen: "#00BFA5",

package/app/codeCharta/util/reduxHelper.ts

@@ -1,5 +1,6 @@
 import { clone } from "./clone"
 import isEqual from "lodash.isequal"
+import { Action } from "redux"
 
 export function removeItemFromArray<T>(array: T[], searchItem: T) {
 	return array.filter(entry => !isEqual(entry, searchItem))
@@ -16,10 +17,20 @@ export function addItemToArray<T>(array: T[], item: T) {
 	return array
 }
 
+export function addItemsToArray<T>(array: T[], items: T[]) {
+	const newArray = [...array]
+	for (const item of items) if (!arrayContainsItem(newArray, item)) newArray.push(item)
+	return newArray
+}
+
 export function isActionOfType(actionType: string, actions) {
 	return actions[actionType] !== undefined
 }
 
+export function isAction<T extends Action>(action: Action, type: string): action is T {
+	return action.type === type
+}
+
 function arrayContainsItem<T>(array: T[], item: T) {
 	return array.some(x => isEqual(x, item))
 }

package/app/material/material.module.ts

@@ -6,8 +6,24 @@ import { MatButtonModule } from "@angular/material/button"
 import { MatDividerModule } from "@angular/material/divider"
 import { MatTooltipModule } from "@angular/material/tooltip"
 import { MatIconModule } from "@angular/material/icon"
+import { MatButtonToggleModule } from "@angular/material/button-toggle"
+import { MatDialogModule } from "@angular/material/dialog"
+import { MatCardModule } from "@angular/material/card"
+import { MatCheckboxModule } from "@angular/material/checkbox"
 
-const materialModules = [MatSelectModule, MatMenuModule, MatButtonModule, MatDividerModule, MatTooltipModule, MatIconModule]
+const materialModules = [
+	MatSelectModule,
+	MatMenuModule,
+	MatButtonModule,
+	MatDividerModule,
+	MatTooltipModule,
+	MatIconModule,
+	MatDialogModule,
+	MatCardModule,
+	MatButtonToggleModule,
+	MatDialogModule,
+	MatCheckboxModule
+]
 
 @NgModule({
 	imports: [BrowserAnimationsModule, materialModules],

package/conf/webpack.loaders.js

@@ -9,7 +9,10 @@ module.exports = {
 		},
 		{
 			test: /\.html$/,
-			use: ["html-loader"]
+			loader: "html-loader",
+			options: {
+				esModule: false
+			}
 		},
 		{
 			test: /\.css$/,