codecharta-visualization 1.114.0 → 1.115.0

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

@@ -2,28 +2,37 @@ import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
 import { EdgeMetricData } from "../../codeCharta.model"
-import { edgeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { setExperimentalFeaturesEnabled } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
-import { Store } from "../../state/store/store"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
 import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
 import { RibbonBarComponent } from "./ribbonBar.component"
 import { RibbonBarModule } from "./ribbonBar.module"
+import { VALID_NODE_WITH_PATH_AND_EXTENSION } from "../../util/dataMocks"
 
 jest.mock("../../state/selectors/isDeltaState.selector", () => ({
 	isDeltaStateSelector: jest.fn()
 }))
 const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
-jest.mock("../../state/selectors/accumulatedData/metricData/edgeMetricData.selector", () => ({
-	edgeMetricDataSelector: jest.fn(() => [])
+jest.mock("../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: jest.fn()
+}))
+const mockMetricDataSelector = jest.mocked(metricDataSelector)
+
+jest.mock("../../state/store/dynamicSettings/areaMetric/areaMetric.selector", () => ({
+	areaMetricSelector: () => "rloc"
+}))
+
+const mockedAccumulatedData = {}
+jest.mock("../../state/selectors/accumulatedData/accumulatedData.selector", () => ({
+	accumulatedDataSelector: () => mockedAccumulatedData
 }))
-const mockEdgeMetricDataSelector = jest.mocked(edgeMetricDataSelector)
 
 describe("RibbonBarComponent", () => {
 	beforeEach(() => {
+		mockedAccumulatedData["unifiedMapNode"] = VALID_NODE_WITH_PATH_AND_EXTENSION
 		mockedIsDeltaStateSelector.mockImplementation(() => false)
-		mockEdgeMetricDataSelector.mockImplementation(() => [])
+		mockMetricDataSelector.mockImplementation(() => ({ edgeMetricData: [], nodeMetricData: [], nodeEdgeMetricsMap: new Map() }))
 		TestBed.configureTestingModule({
 			imports: [RibbonBarModule],
 			providers: [
@@ -65,20 +74,6 @@ describe("RibbonBarComponent", () => {
 		})
 	})
 
-	describe("experimental features", () => {
-		it("should hide experimental features when they are disabled", async () => {
-			Store.dispatch(setExperimentalFeaturesEnabled(false))
-			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(screen.queryByText("Suspicious Metrics")).toBe(null)
-		})
-
-		it("should show experimental features when they are enabled", async () => {
-			Store.dispatch(setExperimentalFeaturesEnabled(true))
-			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(screen.getByText("Suspicious Metrics")).toBeTruthy()
-		})
-	})
-
 	describe("delta state", () => {
 		it("should not show cc-color-metric-chooser and cc-link-color-metric-to-height-metric-button when in delta mode", async () => {
 			mockedIsDeltaStateSelector.mockImplementation(() => true)
@@ -97,13 +92,17 @@ describe("RibbonBarComponent", () => {
 
 	describe("edge metric chooser", () => {
 		it("should show edge metrics when there are some available", async () => {
-			mockEdgeMetricDataSelector.mockImplementation(() => [{} as EdgeMetricData])
+			mockMetricDataSelector.mockImplementation(() => ({
+				edgeMetricData: [{} as EdgeMetricData],
+				nodeMetricData: [],
+				nodeEdgeMetricsMap: new Map()
+			}))
+
 			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
 			expect(screen.getByText("Edge Metric Options")).toBeTruthy()
 		})
 
 		it("should hide edge metrics when there aren't any available", async () => {
-			mockEdgeMetricDataSelector.mockImplementation(() => [])
 			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
 			expect(screen.queryByText("Edge Metric Options")).toBe(null)
 		})

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

@@ -1,23 +1,24 @@
-import "./ribbonBar.component.scss"
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core"
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { edgeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
 import { map } from "rxjs"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 type PanelSelection = "NONE" | "AREA_PANEL_OPEN" | "HEIGHT_PANEL_OPEN" | "COLOR_PANEL_OPEN" | "EDGE_PANEL_OPEN"
 
 @Component({
 	selector: "cc-ribbon-bar",
-	template: require("./ribbonBar.component.html")
+	templateUrl: "./ribbonBar.component.html",
+	styleUrls: ["./ribbonBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class RibbonBarComponent implements OnInit, OnDestroy {
 	panelSelection: PanelSelection = "NONE"
 	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
-	hasEdgeMetric$ = this.store.select(edgeMetricDataSelector).pipe(map(edgeMetricData => edgeMetricData.length > 0))
-	constructor(@Inject(Store) private store: Store) {}
+	hasEdgeMetric$ = this.store.select(metricDataSelector).pipe(map(metricData => metricData.edgeMetricData.length > 0))
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		document.addEventListener("mousedown", this.closePanelSelectionOnOutsideClick)

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

@@ -9,7 +9,7 @@
 
 	<p>The scenario includes:</p>
 
-	<div>
+	<div class="cc-add-custon-scenario-toggles">
 		<mat-slide-toggle
 			*ngFor="let property of scenarioContent"
 			[checked]="property.isSelected"

package/app/codeCharta/ui/ribbonBar/showScenariosButton/addCustomScenario/addCustomScenario.component.scss

@@ -1,18 +1,20 @@
-.cc-add-custom-scenario .mat-dialog-container {
+.cc-add-custom-scenario .mat-mdc-dialog-container {
 	width: 50vw;
 	padding: 0;
 
 	.cc-add-custom-scenario-content {
-		margin: 8px;
-
+		.cc-add-custon-scenario-toggles {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			mat-slide-toggle {
+				display: block;
+			}
+		}
 		.cc-add-custom-scenario-name-field {
 			width: 75%;
 		}
 
-		mat-slide-toggle {
-			display: block;
-		}
-
 		.cc-add-custom-scenario-buttons {
 			display: flex;
 			justify-content: flex-end;

package/app/codeCharta/ui/ribbonBar/showScenariosButton/addCustomScenario/addCustomScenario.component.spec.ts

@@ -1,5 +1,8 @@
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
 import { TestBed } from "@angular/core/testing"
 import { MatDialogRef } from "@angular/material/dialog"
+import { MatInputHarness } from "@angular/material/input/testing"
+import { MatButtonHarness } from "@angular/material/button/testing"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
 import { Vector3 } from "three"
@@ -27,11 +30,15 @@ describe("AddCustomScenarioComponent", () => {
 	it("should enable the user to add a custom scenario, with all properties set initially", async () => {
 		ScenarioHelper.addScenario = jest.fn()
 		Store.dispatch(setState(STATE))
-		const { container } = await render(AddCustomScenarioComponent, { excludeComponentDeclaration: true })
+		const { fixture } = await render(AddCustomScenarioComponent, { excludeComponentDeclaration: true })
+		const loader = TestbedHarnessEnvironment.loader(fixture)
+
 		const closeDialog = TestBed.inject(MatDialogRef).close
+		const nameInput = await loader.getHarness(MatInputHarness)
+		const createButton = await loader.getHarness(MatButtonHarness.with({ text: "ADD" }))
 
-		await userEvent.type(container.querySelector("input"), "my-custom-scenario")
-		await userEvent.click(container.querySelector("button"))
+		await nameInput.setValue("my-custom-scenario")
+		await createButton.click()
 
 		expect(ScenarioHelper.addScenario).toHaveBeenCalled()
 		expect((ScenarioHelper.addScenario as jest.Mock).mock.calls[0][0]).toBe("my-custom-scenario")

package/app/codeCharta/ui/ribbonBar/showScenariosButton/addCustomScenario/addCustomScenario.component.ts

@@ -1,6 +1,5 @@
-import "./addCustomScenario.component.scss"
-import { Component, Inject } from "@angular/core"
-import { FormControl } from "@angular/forms"
+import { Component, ViewEncapsulation } from "@angular/core"
+import { UntypedFormControl } from "@angular/forms"
 import { State } from "../../../../state/angular-redux/state"
 import { ScenarioHelper, ScenarioMetricProperty } from "../scenarioHelper"
 import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
@@ -9,19 +8,17 @@ import { customScenarioNameValidator } from "./utils/customScenarioName.validato
 import { getInitialScenarioMetricProperties } from "./utils/getInitialScenarioMetricProperties"
 
 @Component({
-	template: require("./addCustomScenario.component.html")
+	templateUrl: "./addCustomScenario.component.html",
+	styleUrls: ["./addCustomScenario.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AddCustomScenarioComponent {
-	scenarioName = new FormControl("", [customScenarioNameValidator()])
+	scenarioName = new UntypedFormControl("", [customScenarioNameValidator()])
 	scenarioNameErrorField: string | null = "Scenario name is required"
 	scenarioContent: ScenarioMetricProperty[]
 	areAnyScenarioMetricPropertiesSelected = true
 
-	constructor(
-		@Inject(State) private state: State,
-		@Inject(ThreeCameraService) threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) threeOrbitControlsService: ThreeOrbitControlsService
-	) {
+	constructor(private state: State, threeCameraService: ThreeCameraService, threeOrbitControlsService: ThreeOrbitControlsService) {
 		this.scenarioContent = getInitialScenarioMetricProperties(this.state.getValue(), {
 			camera: threeCameraService.camera.position,
 			cameraTarget: threeOrbitControlsService.controls.target

package/app/codeCharta/ui/ribbonBar/showScenariosButton/addCustomScenario/addCustomScenario.module.ts

@@ -6,7 +6,6 @@ import { AddCustomScenarioComponent } from "./addCustomScenario.component"
 
 @NgModule({
 	imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
-	declarations: [AddCustomScenarioComponent],
-	entryComponents: [AddCustomScenarioComponent]
+	declarations: [AddCustomScenarioComponent]
 })
 export class AddCustomScenarioModule {}

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenario.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { ColorRange, MapColors } from "../../../codeCharta.model"
 import { State } from "../../../state/angular-redux/state"
@@ -15,11 +15,11 @@ import { ErrorDialogComponent } from "../../dialogs/errorDialog/errorDialog.comp
 @Injectable()
 export class ScenarioService {
 	constructor(
-		@Inject(State) private state: State,
-		@Inject(Store) private store: Store,
-		@Inject(MatDialog) private dialog: MatDialog,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private state: State,
+		private store: Store,
+		private dialog: MatDialog,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {}
 
 	getScenarios() {

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarios/scenarios.component.scss

@@ -1,10 +1,10 @@
 @use "../../../../../material/theme";
 
-.mat-menu-panel.cc-scenarios-menu {
+.mat-mdc-menu-panel.cc-scenarios-menu {
 	width: 420px;
 	max-width: unset;
 
-	.mat-menu-content {
+	.mat-mdc-menu-content {
 		padding: 0;
 	}
 

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarios/scenarios.component.ts

@@ -1,5 +1,4 @@
-import "./scenarios.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { ScenarioService } from "../scenario.service"
 import { ScenarioItem } from "../scenarioHelper"
@@ -7,12 +6,14 @@ import { AddCustomScenarioComponent } from "../addCustomScenario/addCustomScenar
 
 @Component({
 	selector: "cc-scenarios",
-	template: require("./scenarios.component.html")
+	templateUrl: "./scenarios.component.html",
+	styleUrls: ["./scenarios.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ScenariosComponent {
 	@Input() scenarios: ScenarioItem[] = []
 
-	constructor(@Inject(ScenarioService) public scenarioService: ScenarioService, @Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(public scenarioService: ScenarioService, private dialog: MatDialog) {}
 
 	addScenario() {
 		this.dialog.open(AddCustomScenarioComponent, { panelClass: "cc-add-custom-scenario" })

package/app/codeCharta/ui/ribbonBar/showScenariosButton/showScenariosButton.component.ts

@@ -1,16 +1,17 @@
-import "./showScenariosButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { ScenarioService } from "./scenario.service"
 import { ScenarioItem } from "./scenarioHelper"
 
 @Component({
 	selector: "cc-show-scenarios-button",
-	template: require("./showScenariosButton.component.html")
+	templateUrl: "./showScenariosButton.component.html",
+	styleUrls: ["./showScenariosButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ShowScenariosButtonComponent {
 	scenarios: ScenarioItem[] = []
 
-	constructor(@Inject(ScenarioService) public scenarioService: ScenarioService) {}
+	constructor(public scenarioService: ScenarioService) {}
 
 	loadScenarios() {
 		this.scenarios = this.scenarioService.getScenarios()

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

@@ -4,7 +4,7 @@ import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
 import hotkeys from "hotkeys-js"
 
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { State } from "../../state/angular-redux/state"
 import { Store } from "../../state/angular-redux/store"
 import { screenshotToClipboardEnabledSelector } from "../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.selector"
@@ -12,7 +12,8 @@ import { ThreeRendererService } from "../codeMap/threeViewer/threeRenderer.servi
 
 @Component({
 	selector: "cc-screenshot-button",
-	template: require("./screenshotButton.component.html")
+	templateUrl: "./screenshotButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ScreenshotButtonComponent {
 	SCREENSHOT_HOTKEY_TO_FILE = "Ctrl+Alt+S"
@@ -20,11 +21,11 @@ export class ScreenshotButtonComponent {
 	isScreenshotToClipboardEnabled$ = this.store.select(screenshotToClipboardEnabledSelector)
 
 	constructor(
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService,
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State
+		private threeCameraService: ThreeCameraService,
+		private threeSceneService: ThreeSceneService,
+		private threeRendererService: ThreeRendererService,
+		private store: Store,
+		private state: State
 	) {
 		hotkeys(this.SCREENSHOT_HOTKEY_TO_FILE, () => {
 			this.makeScreenshotToFile()

package/app/codeCharta/ui/searchPanel/blacklistPanel/blacklistPanel.component.scss

@@ -4,10 +4,10 @@ cc-blacklist-panel {
 		margin: 0 0.25em 0 0;
 	}
 
-	mat-list.mat-list.mat-list-base mat-list-item {
+	mat-list.mat-mdc-list.mat-mdc-list-base mat-list-item {
 		border-top: 1px solid rgba(0, 0, 0, 0.12);
 
-		.mat-list-item-content {
+		.mdc-list-item__content {
 			padding: 0;
 
 			button {

package/app/codeCharta/ui/searchPanel/blacklistPanel/blacklistPanel.component.ts

@@ -1,5 +1,4 @@
-import "./blacklistPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { BlacklistItem } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
 import { removeBlacklistItem } from "../../../state/store/fileSettings/blacklist/blacklist.actions"
@@ -7,13 +6,15 @@ import { createBlacklistItemSelector } from "./createBlacklistItemSelector"
 
 @Component({
 	selector: "cc-blacklist-panel",
-	template: require("./blacklistPanel.component.html")
+	templateUrl: "./blacklistPanel.component.html",
+	styleUrls: ["./blacklistPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class BlacklistPanelComponent {
 	flattenedItems$ = this.store.select(createBlacklistItemSelector("flatten"))
 	excludedItems$ = this.store.select(createBlacklistItemSelector("exclude"))
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	removeBlacklistEntry(item: BlacklistItem) {
 		this.store.dispatch(removeBlacklistItem(item))

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeView.component.scss

@@ -65,19 +65,22 @@ cc-map-tree-view {
 				color: gray;
 			}
 
-			.small-action-button {
-				.md-fab {
-					i {
-						top: 2px;
-					}
+			.small-action-button button {
+				min-height: 0;
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				background-color: transparent;
+				box-shadow: none;
 
-					&:hover {
-						background-color: transparent !important;
-					}
+				&:hover {
+					background-color: #ddd;
+				}
 
-					.md-ripple-container {
-						display: none;
-					}
+				i {
+					position: absolute;
+					top: 2px;
+					left: 6px;
 				}
 			}
 		}

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

@@ -1,20 +1,20 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { CodeMapNode } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
 import { mapTreeViewNodeSelector } from "./mapTreeViewNodeSelector/mapTreeViewNode.selector"
 
-import "./mapTreeView.component.scss"
-
 @Component({
 	selector: "cc-map-tree-view",
-	template: require("./mapTreeView.component.html")
+	templateUrl: "./mapTreeView.component.html",
+	styleUrls: ["./mapTreeView.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewComponent {
 	mapTreeViewNode$: Observable<CodeMapNode>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.mapTreeViewNode$ = store.select(mapTreeViewNodeSelector)
 	}
 }

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

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

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -9,7 +9,8 @@ import { areaMetricSelector } from "../../../../state/store/dynamicSettings/area
 
 @Component({
 	selector: "cc-map-tree-view-item-name",
-	template: require("./mapTreeViewItemName.component.html")
+	templateUrl: "./mapTreeViewItemName.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewItemNameComponent {
 	@Input() node: CodeMapNode
@@ -21,7 +22,7 @@ export class MapTreeViewItemNameComponent {
 	rootUnary$: Observable<number>
 	areaMetric$: Observable<string>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		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,8 +1,8 @@
 <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 transparent">
-		<button class="md-fab" (click)="openNodeContextMenu($event)" title="Open Node-Context-Menu">
+	<div class="small-action-button">
+		<button (click)="openNodeContextMenu($event)" title="Open Node-Context-Menu">
 			<i class="fa fa-ellipsis-h"></i>
 		</button>
 	</div>

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

@@ -1,8 +1,9 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-map-tree-view-item-option-buttons",
-	template: require("./mapTreeViewItemOptionButtons.component.html")
+	templateUrl: "./mapTreeViewItemOptionButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewItemOptionButtonsComponent {
 	@Input() isFlattened: boolean

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from "@angular/core"
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
 
 import { Store } from "../../../../state/angular-redux/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -10,7 +10,8 @@ import { areaMetricSelector } from "../../../../state/store/dynamicSettings/area
 
 @Component({
 	selector: "cc-map-tree-view-level",
-	template: require("./mapTreeViewLevel.component.html")
+	templateUrl: "./mapTreeViewLevel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewLevelComponent implements OnInit {
 	@Input() node: CodeMapNode
@@ -24,7 +25,7 @@ export class MapTreeViewLevelComponent implements OnInit {
 
 	areMetricGreaterZero = false
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		// open root folder initially

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.html

@@ -4,7 +4,7 @@
 	></span>
 	<span class="box-rounded node-count" style="display: inline-flex" title="Files flattened"
 		>{{ matchingFileCounters.flattenCount
-		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="../../../../assets/flatten.png" />
+		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="codeCharta/assets/flatten.png" />
 	</span>
 	<span class="box-rounded node-count" title="Files excluded">{{ matchingFileCounters.excludeCount }}<i class="fa fa-ban"></i></span>
 	<div class="sort-component">

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.scss

@@ -33,7 +33,7 @@ cc-matching-files-counter {
 		padding: 1px 8px;
 	}
 
-	cc-sorting-option .mat-select {
+	cc-sorting-option .mat-mdc-select {
 		width: 105px;
 		padding: 2px 8px;
 		font-weight: normal;
@@ -43,7 +43,7 @@ cc-matching-files-counter {
 
 	.sort-component {
 		margin-right: 3px;
-		float: right;
+		display: inline-block;
 		color: black;
 	}
 }

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.ts

@@ -1,17 +1,18 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
-import "./matchingFilesCounter.component.scss"
 import { MatchingFilesCounter, matchingFilesCounterSelector } from "./selectors/matchingFilesCounter.selector"
 
 @Component({
 	selector: "cc-matching-files-counter",
-	template: require("./matchingFilesCounter.component.html")
+	templateUrl: "./matchingFilesCounter.component.html",
+	styleUrls: ["./matchingFilesCounter.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MatchingFilesCounterComponent {
 	matchingFileCounters$: Observable<MatchingFilesCounter>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.matchingFileCounters$ = store.select(matchingFilesCounterSelector)
 	}
 }

package/app/codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect.ts

@@ -25,8 +25,7 @@ export const blacklistSearchPattern = (type: BlacklistType): BlacklistSearchPatt
 export class BlacklistSearchPatternEffect {
 	constructor(
 		@Inject(ActionsToken) private actions$: Actions,
-		@Inject(Store) private store: Store,
-		@Inject(AddBlacklistItemsIfNotResultsInEmptyMapEffect)
+		private store: Store,
 		private addBlacklistItemsIfNotResultsInEmptyMapEffect: AddBlacklistItemsIfNotResultsInEmptyMapEffect
 	) {}
 

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

@@ -2,8 +2,6 @@ cc-search-bar {
 	display: inline-block;
 
 	.search-icon {
-		display: inline-block;
-		vertical-align: text-top;
 		margin-right: 8px;
 		min-width: 16px;
 	}
@@ -42,7 +40,6 @@ cc-search-bar {
 
 	.small-action-button {
 		margin: 0px 5px 0px 5px;
-		display: inline-block;
 	}
 
 	button {

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

@@ -10,8 +10,8 @@ import { EffectsModule } from "../../../state/angular-redux/effects/effects.modu
 import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
 import { Subject } from "rxjs"
 import { Action } from "redux"
-import { MatDialog } from "@angular/material/dialog"
 import { resultsInEmptyMap } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap"
+import { MatDialog } from "@angular/material/dialog"
 
 jest.mock("../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap", () => ({
 	resultsInEmptyMap: jest.fn()