codecharta-visualization 1.119.1 → 1.120.1

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeView.level.e2e.ts

@@ -1,46 +0,0 @@
-import { goto } from "../../../../puppeteer.helper"
-import { MapTreeViewLevelPageObject } from "./mapTreeView.level.po"
-import { SearchPanelModeSelectorPageObject } from "../searchPanelModeSelector/searchPanelModeSelector.po"
-import { NodeContextMenuPageObject } from "../../../state/effects/nodeContextMenu/nodeContextMenu.po"
-
-describe("MapTreeViewLevel", () => {
-	let mapTreeViewLevel: MapTreeViewLevelPageObject
-	let searchPanelModeSelector: SearchPanelModeSelectorPageObject
-	let nodeContextMenu: NodeContextMenuPageObject
-
-	beforeEach(async () => {
-		mapTreeViewLevel = new MapTreeViewLevelPageObject()
-		searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
-		nodeContextMenu = new NodeContextMenuPageObject()
-
-		await goto()
-	})
-
-	describe("Blacklist", () => {
-		it("excluding a building should exclude it from the tree-view as well", async () => {
-			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
-
-			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
-			await mapTreeViewLevel.openContextMenu(filePath)
-			await nodeContextMenu.exclude()
-
-			expect(await mapTreeViewLevel.nodeExists(filePath)).toBeFalsy()
-		})
-	})
-
-	describe("NodeContextMenu", () => {
-		it("NodeContextMenu path should remain marked when hovering over another mapTreeView Element", async () => {
-			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
-
-			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
-			await mapTreeViewLevel.openContextMenu(filePath)
-			await mapTreeViewLevel.hoverNode("/root/sample1.cc.json/sample1OnlyLeaf.scss")
-
-			expect(await mapTreeViewLevel.isNodeMarked(filePath)).toBeTruthy()
-		})
-	})
-})

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeView.level.po.ts

@@ -1,32 +0,0 @@
-import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
-
-export class MapTreeViewLevelPageObject {
-	async openContextMenu(path: string) {
-		await clickButtonOnPageElement(`[id='${path}']`, { button: "right" })
-		await page.waitForSelector("#codemap-context-menu", { visible: true })
-		await page.waitForSelector(".tree-element-label.marked")
-	}
-
-	async openFolder(path: string) {
-		await clickButtonOnPageElement(`[id='${path}']`)
-		await page.waitForSelector(`[id='${path}'] span.fa.fa-folder-open`)
-	}
-
-	async hoverNode(path: string) {
-		await page.waitForSelector(`[id='${path}']`)
-		await page.hover(`[id='${path}']`)
-		await page.waitForSelector(`[id='${path}'].hovered`)
-	}
-
-	async nodeExists(path: string) {
-		return Boolean(await page.$(`[id='${path}']`))
-	}
-
-	async isNodeMarked(path: string) {
-		return page.waitForSelector(`[id='${path}'].marked`)
-	}
-
-	async getNumberOfFiles(path: string) {
-		return page.$eval(`[id='${path}'] .unary-number`, element => Number(element["innerText"].split(" ")[0]))
-	}
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeView.module.ts

@@ -1,27 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-
-import { IsNodeLeafPipe } from "./isNodeLeaf.pipe"
-import { MapTreeViewComponent } from "./mapTreeView.component"
-import { MapTreeViewItemIconComponent } from "./mapTreeViewItemIcon/mapTreeViewItemIcon.component"
-import { MapTreeViewItemIconClassPipe } from "./mapTreeViewItemIcon/mapTreeViewItemIconClass.pipe"
-import { MapTreeViewItemIconColorPipe } from "./mapTreeViewItemIcon/mapTreeViewItemIconColor.pipe"
-import { MapTreeViewItemNameComponent } from "./mapTreeViewItemName/mapTreeViewItemName.component"
-import { MapTreeViewItemOptionButtonsComponent } from "./mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component"
-import { MapTreeViewLevelComponent } from "./mapTreeViewLevel/mapTreeViewLevel.component"
-
-@NgModule({
-	imports: [CommonModule],
-	declarations: [
-		MapTreeViewItemIconComponent,
-		MapTreeViewItemNameComponent,
-		MapTreeViewItemOptionButtonsComponent,
-		MapTreeViewLevelComponent,
-		MapTreeViewComponent,
-		IsNodeLeafPipe,
-		MapTreeViewItemIconClassPipe,
-		MapTreeViewItemIconColorPipe
-	],
-	exports: [MapTreeViewComponent]
-})
-export class MapTreeViewModule {}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIcon.component.html

@@ -1,6 +0,0 @@
-<span
-	role="img"
-	[class]="node | mapTreeViewItemIconClass: isOpen"
-	[style.color]="node | mapTreeViewItemIconColor"
-	aria-hidden="true"
-></span>

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIcon.component.ts

@@ -1,12 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { CodeMapNode } from "../../../../codeCharta.model"
-
-@Component({
-	selector: "cc-map-tree-view-item-icon",
-	templateUrl: "./mapTreeViewItemIcon.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MapTreeViewItemIconComponent {
-	@Input() node: CodeMapNode
-	@Input() isOpen: boolean
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIconClass.pipe.spec.ts

@@ -1,19 +0,0 @@
-import { CodeMapNode } from "../../../../codeCharta.model"
-import { MapTreeViewItemIconClassPipe } from "./mapTreeViewItemIconClass.pipe"
-
-describe("MapTreeViewItemIconClassPipe", () => {
-	it("should return 'fa fa-file-o' for leaf nodes", () => {
-		const fakeNode = {} as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconClassPipe().transform(fakeNode, true)).toBe("fa fa-file-o")
-	})
-
-	it("should return 'fa fa-folder-open' for open folders", () => {
-		const fakeNode = { children: [{}] } as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconClassPipe().transform(fakeNode, true)).toBe("fa fa-folder-open")
-	})
-
-	it("should return 'fa fa-folder' for closed folders", () => {
-		const fakeNode = { children: [{}] } as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconClassPipe().transform(fakeNode, false)).toBe("fa fa-folder")
-	})
-})

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIconClass.pipe.ts

@@ -1,17 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core"
-
-import { CodeMapNode } from "../../../../codeCharta.model"
-import { isLeaf } from "../../../../util/codeMapHelper"
-
-@Pipe({ name: "mapTreeViewItemIconClass" })
-export class MapTreeViewItemIconClassPipe implements PipeTransform {
-	transform(value: CodeMapNode, isOpen: boolean): string {
-		if (isLeaf(value)) {
-			return "fa fa-file-o"
-		}
-		if (isOpen) {
-			return "fa fa-folder-open"
-		}
-		return "fa fa-folder"
-	}
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIconColor.pipe.spec.ts

@@ -1,44 +0,0 @@
-import { State } from "@ngrx/store"
-import { CcState, CodeMapNode } from "../../../../codeCharta.model"
-import * as codeMapHelper from "../../../../util/codeMapHelper"
-import { MapTreeViewItemIconColorPipe } from "./mapTreeViewItemIconColor.pipe"
-
-describe("MapTreeViewItemIconColorPipe", () => {
-	const state = {
-		getValue: () => ({
-			dynamicSettings: {
-				areaMetric: "unary"
-			},
-			fileSettings: {
-				markedPackages: []
-			}
-		})
-	} as State<CcState>
-
-	it("should return undefined for leaf nodes", () => {
-		const fakeNode = { attributes: { unary: 1 } } as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconColorPipe(state).transform(fakeNode)).toBe(undefined)
-	})
-
-	it("should return default color if getMarkingColor returns undefined", () => {
-		const fakeNode = { children: [{}], attributes: { unary: 1 } } as unknown as CodeMapNode
-		jest.spyOn(codeMapHelper, "getMarkingColor").mockImplementation(() => {})
-		expect(new MapTreeViewItemIconColorPipe(state).transform(fakeNode)).toBe(MapTreeViewItemIconColorPipe.defaultColor)
-	})
-
-	it("should return color of getMarkingColor", () => {
-		const fakeNode = { children: [{}], attributes: { unary: 1 } } as unknown as CodeMapNode
-		jest.spyOn(codeMapHelper, "getMarkingColor").mockImplementation(() => "#123456")
-		expect(new MapTreeViewItemIconColorPipe(state).transform(fakeNode)).toBe("#123456")
-	})
-
-	it("should return constant gray color if node has no area metric entry", () => {
-		const fakeNode = { children: [{}], attributes: {} } as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconColorPipe(state).transform(fakeNode)).toBe(MapTreeViewItemIconColorPipe.areMetricZeroColor)
-	})
-
-	it("should return constant gray color if node has a value of zero for area metric entry", () => {
-		const fakeNode = { children: [{}], attributes: { unary: 0 } } as unknown as CodeMapNode
-		expect(new MapTreeViewItemIconColorPipe(state).transform(fakeNode)).toBe(MapTreeViewItemIconColorPipe.areMetricZeroColor)
-	})
-})

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemIcon/mapTreeViewItemIconColor.pipe.ts

@@ -1,27 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core"
-import { State } from "@ngrx/store"
-
-import { CodeMapNode, CcState } from "../../../../codeCharta.model"
-import { getMarkingColor, isLeaf } from "../../../../util/codeMapHelper"
-
-@Pipe({ name: "mapTreeViewItemIconColor", pure: false })
-export class MapTreeViewItemIconColorPipe implements PipeTransform {
-	static defaultColor = "#000000"
-	static areMetricZeroColor = "#BDBDBD"
-
-	constructor(private state: State<CcState>) {}
-
-	transform(value: CodeMapNode): string | undefined {
-		const { areaMetric } = this.state.getValue().dynamicSettings
-
-		if (!value.attributes[areaMetric]) {
-			return MapTreeViewItemIconColorPipe.areMetricZeroColor
-		}
-		if (isLeaf(value)) {
-			return undefined
-		}
-
-		const markingColor = getMarkingColor(value, this.state.getValue().fileSettings.markedPackages)
-		return markingColor || MapTreeViewItemIconColorPipe.defaultColor
-	}
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemName/mapTreeViewItemName.component.html

@@ -1,17 +0,0 @@
-<span
-	class="node-name"
-	[class.flattened]="node.isFlattened"
-	[class.noAreaMetric]="!(node.attributes[areaMetric$ | async] > 0)"
-	[class.angular-green]="(searchedNodePaths$ | async).has(node.path)"
->
-	{{ node.name }}
-</span>
-
-<span class="unary-number" *ngIf="!(node | isNodeLeaf)">
-	<span *ngIf="!isHovered">{{ ((100 * unaryValue) / (rootUnary$ | async)).toFixed(0) }}%</span>
-	<span *ngIf="isHovered" [ngPlural]="unaryValue">
-		{{ unaryValue }}
-		<ng-template ngPluralCase="=1">File</ng-template>
-		<ng-template ngPluralCase="other">Files</ng-template>
-	</span>
-</span>

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemName/mapTreeViewItemName.component.spec.ts

@@ -1,62 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render } from "@testing-library/angular"
-import { CodeMapNode } from "../../../../codeCharta.model"
-import { MapTreeViewModule } from "../mapTreeView.module"
-import { MapTreeViewItemNameComponent } from "./mapTreeViewItemName.component"
-import { provideMockStore } from "@ngrx/store/testing"
-import { areaMetricSelector } from "../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-import { rootUnarySelector } from "../../../../state/selectors/accumulatedData/rootUnary.selector"
-import { searchedNodePathsSelector } from "../../../../state/selectors/searchedNodes/searchedNodePaths.selector"
-
-describe("mapTreeViewItemNameComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [MapTreeViewModule],
-			providers: [
-				provideMockStore({
-					selectors: [
-						{ selector: areaMetricSelector, value: "rloc" },
-						{ selector: rootUnarySelector, value: 42 },
-						{ selector: searchedNodePathsSelector, value: new Set() }
-					]
-				})
-			]
-		})
-	})
-
-	it("shouldn't have class 'noAreaMetric' when node's area metric is bigger than 0", async () => {
-		const { container } = await render(MapTreeViewItemNameComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				node: { attributes: { rloc: 2 } } as unknown as CodeMapNode
-			}
-		})
-
-		const nodeNameWrapper = container.querySelector(".node-name")
-		expect(nodeNameWrapper.classList).not.toContain("noAreaMetric")
-	})
-
-	it("should have class 'noAreaMetric' when node's area metric is 0", async () => {
-		const { container } = await render(MapTreeViewItemNameComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				node: { attributes: { rloc: 0 } } as unknown as CodeMapNode
-			}
-		})
-
-		const nodeNameWrapper = container.querySelector(".node-name")
-		expect(nodeNameWrapper.classList).toContain("noAreaMetric")
-	})
-
-	it("should have class 'noAreaMetric' when node's area metric doesn't exist", async () => {
-		const { container } = await render(MapTreeViewItemNameComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				node: { attributes: {} } as unknown as CodeMapNode
-			}
-		})
-
-		const nodeNameWrapper = container.querySelector(".node-name")
-		expect(nodeNameWrapper.classList).toContain("noAreaMetric")
-	})
-})

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemName/mapTreeViewItemName.component.ts

@@ -1,30 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { Observable } from "rxjs"
-
-import { CodeMapNode, CcState } from "../../../../codeCharta.model"
-import { rootUnarySelector } from "../../../../state/selectors/accumulatedData/rootUnary.selector"
-import { searchedNodePathsSelector } from "../../../../state/selectors/searchedNodes/searchedNodePaths.selector"
-import { areaMetricSelector } from "../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-
-@Component({
-	selector: "cc-map-tree-view-item-name",
-	templateUrl: "./mapTreeViewItemName.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MapTreeViewItemNameComponent {
-	@Input() node: CodeMapNode
-	@Input() isHovered: boolean
-	@Input() unaryValue: number
-	@Input() unaryPercentage: number
-
-	searchedNodePaths$: Observable<Set<string>>
-	rootUnary$: Observable<number>
-	areaMetric$: Observable<string>
-
-	constructor(store: Store<CcState>) {
-		this.searchedNodePaths$ = store.select(searchedNodePathsSelector)
-		this.rootUnary$ = store.select(rootUnarySelector)
-		this.areaMetric$ = store.select(areaMetricSelector)
-	}
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.html

@@ -1,9 +0,0 @@
-<span role="button" class="right-aligned" aria-hidden="true">
-	<i class="flattened fa fa-eye-slash" *ngIf="isFlattened" title="Flattened"></i>
-
-	<div class="small-action-button">
-		<button (click)="openNodeContextMenu($event)" title="Open Node-Context-Menu">
-			<i class="fa fa-ellipsis-h"></i>
-		</button>
-	</div>
-</span>

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-
-@Component({
-	selector: "cc-map-tree-view-item-option-buttons",
-	templateUrl: "./mapTreeViewItemOptionButtons.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MapTreeViewItemOptionButtonsComponent {
-	@Input() isFlattened: boolean
-	@Input() openNodeContextMenu: (event: MouseEvent) => unknown
-}

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

@@ -1,31 +0,0 @@
-<div *ngIf="!node.isExcluded" class="tree-element-{{ depth }} {{ (node | isNodeLeaf) ? 'tree-leaf' : 'tree-parent' }}">
-	<div
-		id="{{ node.path }}"
-		class="tree-element-label-{{ depth }} tree-element-label"
-		[class.hovered]="(hoveredNodeId$ | async) === node.id"
-		[class.marked]="(rightClickedNodeData$ | async)?.nodeId === node.id"
-		(mouseenter)="onMouseEnter()"
-		(mouseleave)="onMouseLeave()"
-		(click)="toggleOpen()"
-		(contextmenu)="openNodeContextMenu($event)"
-		[title]="node.attributes[areaMetric$ | async] > 0 ? '' : 'No Node Area for Chosen Metric'"
-	>
-		<cc-map-tree-view-item-icon [node]="node" [isOpen]="isOpen"></cc-map-tree-view-item-icon>
-		<cc-map-tree-view-item-name [node]="node" [isHovered]="(hoveredNodeId$ | async) === node.id" [unaryValue]="node.attributes.unary">
-		</cc-map-tree-view-item-name>
-
-		<cc-map-tree-view-item-option-buttons
-			*ngIf="(hoveredNodeId$ | async) === node.id && node.attributes[areaMetric$ | async] > 0"
-			[isFlattened]="node.isFlattened"
-			[openNodeContextMenu]="openNodeContextMenu"
-		></cc-map-tree-view-item-option-buttons>
-	</div>
-
-	<div class="tree-element-children tree-element-children-{{ depth }}">
-		<ng-container *ngIf="isOpen">
-			<div *ngFor="let childNode of node.children">
-				<cc-map-tree-view-level [node]="childNode" [depth]="depth + 1"></cc-map-tree-view-level>
-			</div>
-		</ng-container>
-	</div>
-</div>

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

@@ -1,156 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen, fireEvent } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-
-import { searchedNodePathsSelector } from "../../../../state/selectors/searchedNodes/searchedNodePaths.selector"
-import { MapTreeViewModule } from "../mapTreeView.module"
-import { MapTreeViewLevelComponent } from "./mapTreeViewLevel.component"
-import { rootNode } from "./mocks"
-import { appReducers, setStateMiddleware } from "../../../../state/store/state.manager"
-import { StoreModule } from "@ngrx/store"
-import { areaMetricSelector } from "../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-
-jest.mock("../../../../state/selectors/searchedNodes/searchedNodePaths.selector", () => ({
-	searchedNodePathsSelector: jest.fn(
-		jest.requireActual("../../../../state/selectors/searchedNodes/searchedNodePaths.selector").searchedNodePathsSelector
-	)
-}))
-const searchedNodePathsSelectorMock = searchedNodePathsSelector as unknown as jest.Mock<ReturnType<typeof searchedNodePathsSelector>>
-
-jest.mock("../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector", () => ({
-	areaMetricSelector: jest.fn(() => "unary")
-}))
-const areaMetricSelectorMock = areaMetricSelector as unknown as jest.Mock<ReturnType<typeof areaMetricSelector>>
-
-describe("mapTreeViewLevel", () => {
-	const componentProperties = {
-		depth: 0,
-		node: rootNode
-	}
-
-	beforeEach(() => {
-		areaMetricSelectorMock.mockImplementation(() => "unary")
-		TestBed.configureTestingModule({
-			imports: [MapTreeViewModule, StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })]
-		})
-	})
-
-	it("should show root and first level folder and files initially", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-
-		expect(container.getElementsByClassName("tree-element-0").length).toBe(1)
-		expect(screen.getByText("root")).toBeTruthy()
-
-		expect(container.getElementsByClassName("tree-element-1").length).toBe(2)
-		expect(screen.getByText("bigLeaf")).toBeTruthy()
-		expect(screen.getByText("ParentLeaf")).toBeTruthy()
-
-		const isBigLeafRenderedAsFile = container.querySelector("#\\/root\\/bigLeaf .fa-file-o")
-		expect(isBigLeafRenderedAsFile).toBeTruthy()
-		const isParentLeafRenderedAsFolder = container.querySelector("#\\/root\\/ParentLeaf .fa-folder")
-		expect(isParentLeafRenderedAsFolder).toBeTruthy()
-	})
-
-	it("should render first level folder closed initially and open it on click", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-
-		expect(firstLevelFolder).toBeTruthy()
-		expect(firstLevelFolder.querySelector(".fa-folder")).toBeTruthy()
-		expect(container.querySelector("#\\/root\\/ParentLeaf\\/smallLeaf")).toBeFalsy()
-
-		fireEvent.click(firstLevelFolder)
-		expect(firstLevelFolder.querySelector(".fa-folder-open")).toBeTruthy()
-		expect(container.querySelector("#\\/root\\/ParentLeaf\\/smallLeaf")).toBeTruthy()
-	})
-
-	it("should display option buttons on hover", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-
-		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeFalsy()
-
-		await userEvent.hover(firstLevelFolder)
-
-		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeTruthy()
-	})
-
-	it("should not display option buttons on hover when area metric is unavailable", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-		fireEvent.click(firstLevelFolder)
-
-		const smallLeaf = container.querySelector("#\\/root\\/ParentLeaf\\/smallLeaf")
-
-		await userEvent.hover(smallLeaf)
-
-		expect(smallLeaf.querySelector("cc-map-tree-view-item-option-buttons")).toBeFalsy()
-	})
-
-	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)
-
-		await userEvent.hover(firstLevelFolder)
-		optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
-		expect(optionsButton).not.toBe(null)
-		fireEvent.click(optionsButton.querySelector("[title='Open Node-Context-Menu']"))
-
-		const isMarked = container.querySelector("#\\/root\\/ParentLeaf.marked")
-		expect(isMarked).toBeTruthy()
-	})
-
-	it("should display root unary percentage for folders and toggle to total unary on hover", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-
-		const showsPercentage = firstLevelFolder.textContent.includes("%")
-		expect(showsPercentage).toBe(true)
-
-		await userEvent.hover(firstLevelFolder)
-
-		const showsPercentageAfterHover = firstLevelFolder.textContent.includes("%")
-		expect(showsPercentageAfterHover).toBe(false)
-	})
-
-	it("should make searched items 'angular-green'", async () => {
-		searchedNodePathsSelectorMock.mockImplementationOnce(() => new Set(["/root/bigLeaf"]))
-		const { container, detectChanges } = await render(MapTreeViewLevelComponent, {
-			componentProperties,
-			excludeComponentDeclaration: true
-		})
-
-		detectChanges()
-
-		const bigLeaf = container.querySelector("#\\/root\\/bigLeaf")
-		const isAngularGreen = bigLeaf.querySelector(".angular-green")
-		expect(isAngularGreen).toBeTruthy()
-	})
-
-	it("should change text color to gray if node has no area metric", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-		fireEvent.click(firstLevelFolder)
-
-		const smallLeaf = container.querySelector("#\\/root\\/ParentLeaf\\/smallLeaf")
-
-		expect(smallLeaf.querySelector(".noAreaMetric")).toBeTruthy()
-	})
-
-	it("should change text color and stop displaying option buttons on hover when area metric is changed to not exist", async () => {
-		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
-		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
-		await userEvent.hover(firstLevelFolder)
-
-		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeTruthy()
-
-		areaMetricSelectorMock.mockImplementation(() => "mcc")
-		await userEvent.hover(firstLevelFolder)
-
-		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeFalsy()
-		expect(firstLevelFolder.querySelector(".noAreaMetric")).toBeTruthy()
-	})
-})

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

@@ -1,77 +0,0 @@
-import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
-
-import { CodeMapNode, CcState } from "../../../../codeCharta.model"
-import { setHoveredNodeId } from "../../../../state/store/appStatus/hoveredNodeId/hoveredNodeId.actions"
-import { setRightClickedNodeData } from "../../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
-import { rightClickedNodeDataSelector } from "../../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
-import { hoveredNodeIdSelector } from "../../../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
-import { areaMetricSelector } from "../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-import { Store } from "@ngrx/store"
-
-@Component({
-	selector: "cc-map-tree-view-level",
-	templateUrl: "./mapTreeViewLevel.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MapTreeViewLevelComponent implements OnInit {
-	@Input() node: CodeMapNode
-	@Input() depth: number
-
-	hoveredNodeId$ = this.store.select(hoveredNodeIdSelector)
-	rightClickedNodeData$ = this.store.select(rightClickedNodeDataSelector)
-	areaMetric$ = this.store.select(areaMetricSelector)
-
-	isOpen = false
-
-	areMetricGreaterZero = false
-
-	constructor(private store: Store<CcState>) {}
-
-	ngOnInit(): void {
-		// open root folder initially
-		this.isOpen = this.depth === 0
-	}
-
-	onMouseEnter() {
-		this.store.dispatch(setHoveredNodeId({ value: this.node.id }))
-	}
-
-	onMouseLeave() {
-		this.store.dispatch(setHoveredNodeId({ value: null }))
-	}
-
-	openNodeContextMenu = $event => {
-		$event.preventDefault()
-		$event.stopPropagation()
-
-		this.areaMetric$
-			.subscribe(
-				areaMetricName =>
-					(this.areMetricGreaterZero = this.node.attributes[areaMetricName] && this.node.attributes[areaMetricName] !== 0)
-			)
-			.unsubscribe()
-
-		if (this.areMetricGreaterZero) {
-			this.store.dispatch(
-				setRightClickedNodeData({
-					value: {
-						nodeId: this.node.id,
-						xPositionOfRightClickEvent: $event.clientX,
-						yPositionOfRightClickEvent: $event.clientY
-					}
-				})
-			)
-
-			document.querySelector(".tree-element-0").addEventListener("scroll", this.scrollFunction)
-		}
-	}
-
-	toggleOpen() {
-		this.isOpen = !this.isOpen
-	}
-
-	private scrollFunction = () => {
-		this.store.dispatch(setRightClickedNodeData({ value: null }))
-		document.querySelector(".tree-element-0").removeEventListener("scroll", this.scrollFunction)
-	}
-}