codecharta-visualization 1.113.0 → 1.115.0

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

@@ -1,17 +1,18 @@
-import "./linkColorMetricToHeightMetricButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isColorMetricLinkedToHeightMetricSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.selector"
 import { toggleIsColorMetricLinkedToHeightMetric } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
 
 @Component({
 	selector: "cc-link-color-metric-to-height-metric-button",
-	template: require("./linkColorMetricToHeightMetricButton.component.html")
+	templateUrl: "./linkColorMetricToHeightMetricButton.component.html",
+	styleUrls: ["./linkColorMetricToHeightMetricButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LinkColorMetricToHeightMetricButtonComponent {
 	isColorMetricLinkedToHeightMetric$ = this.store.select(isColorMetricLinkedToHeightMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	toggleIsColorMetricLinkedToHeightMetric() {
 		this.store.dispatch(toggleIsColorMetricLinkedToHeightMetric())

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

@@ -1,6 +1,6 @@
 <cc-search-panel></cc-search-panel>
 
-<mat-card class="scenario-card" id="scenario-card">
+<mat-card appearance="outlined" class="scenario-card" id="scenario-card">
 	<div class="section">
 		<div class="section-header">
 			<cc-show-scenarios-button></cc-show-scenarios-button>
@@ -9,7 +9,7 @@
 	</div>
 </mat-card>
 
-<mat-card id="custom-configs-card" class="custom-configs-card">
+<mat-card appearance="outlined" id="custom-configs-card" class="custom-configs-card">
 	<span class="badge-custom-configs">New</span>
 	<div class="section">
 		<div class="section-header">
@@ -19,7 +19,8 @@
 	</div>
 </mat-card>
 
-<mat-card *ngIf="experimentalFeaturesEnabled$ | async" id="ai-card" class="ai-card">
+<mat-card appearance="outlined" id="ai-card" class="ai-card">
+	<span class="badge-ai">New</span>
 	<div class="section">
 		<div class="section-header">
 			<cc-artificial-intelligence></cc-artificial-intelligence>
@@ -28,7 +29,12 @@
 	</div>
 </mat-card>
 
-<mat-card id="area-metric-card" class="area-metric-card metric-card" [class.expanded]="panelSelection === 'AREA_PANEL_OPEN'">
+<mat-card
+	appearance="outlined"
+	id="area-metric-card"
+	class="area-metric-card metric-card"
+	[class.expanded]="panelSelection === 'AREA_PANEL_OPEN'"
+>
 	<div class="section">
 		<div class="section-header" id="area-metric-header-section">
 			<cc-area-metric-chooser></cc-area-metric-chooser>
@@ -40,8 +46,13 @@
 	<cc-area-settings-panel class="cc-metric-settings-panel" [class.hidden]="panelSelection !== 'AREA_PANEL_OPEN'"></cc-area-settings-panel>
 </mat-card>
 
-<mat-card id="height-and-color-metric-container">
-	<mat-card id="height-metric-card" class="height-metric-card metric-card" [class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'">
+<mat-card appearance="outlined" id="height-and-color-metric-container">
+	<mat-card
+		appearance="outlined"
+		id="height-metric-card"
+		class="height-metric-card metric-card"
+		[class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'"
+	>
 		<div class="section" id="height-metric-section">
 			<div class="section-header" id="height-metric-header-section">
 				<cc-height-metric-chooser></cc-height-metric-chooser>
@@ -56,11 +67,12 @@
 		></cc-height-settings-panel>
 	</mat-card>
 
-	<mat-card *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
+	<mat-card appearance="outlined" *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
 		<cc-link-color-metric-to-height-metric-button></cc-link-color-metric-to-height-metric-button>
 	</mat-card>
 
 	<mat-card
+		appearance="outlined"
 		*ngIf="!(isDeltaState$ | async)"
 		id="color-metric-card"
 		class="color-metric-card metric-card"
@@ -82,6 +94,7 @@
 </mat-card>
 
 <mat-card
+	appearance="outlined"
 	*ngIf="hasEdgeMetric$ | async"
 	id="edge-metric-card"
 	class="edge-metric-card metric-card"
@@ -101,7 +114,7 @@
 	</div>
 </mat-card>
 
-<mat-card *ngIf="isDeltaState$ | async" id="color-settings-card">
+<mat-card appearance="outlined" *ngIf="isDeltaState$ | async" id="color-settings-card">
 	<div class="delta-color-section" (click)="updatePanelSelection('COLOR_PANEL_OPEN')" title="Show color settings">
 		<i class="fa fa-paint-brush color-icon"></i>
 		Color Settings

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

@@ -17,7 +17,7 @@ cc-ribbon-bar {
 		border: none;
 		flex: 2.5 2.5 0;
 
-		.mat-card {
+		.mat-mdc-card {
 			box-shadow: none;
 		}
 	}
@@ -33,6 +33,17 @@ cc-ribbon-bar {
 		line-height: 10px;
 	}
 
+	.badge-ai {
+		position: absolute;
+		top: -5px;
+		padding: 4px 6px;
+		border-radius: 50%;
+		background: red;
+		color: white;
+		font-size: 10px;
+		line-height: 10px;
+	}
+
 	.cc-ribbon-bar-menu-button {
 		height: 22px;
 		line-height: 22px;
@@ -60,7 +71,7 @@ cc-ribbon-bar {
 		}
 	}
 
-	.mat-card {
+	.mat-mdc-card {
 		padding: 0;
 		height: ($heightCollapsed + 8) + px;
 		border-radius: 0;
@@ -174,7 +185,6 @@ cc-ribbon-bar {
 			}
 		}
 	}
-
 	mat-card,
 	.section .section-header,
 	.section .section-body,
@@ -187,13 +197,11 @@ cc-ribbon-bar {
 		max-width: 120px;
 		min-width: 120px;
 	}
-
 	mat-card.link-color-metric-to-height-metric-card {
 		display: flex;
 		justify-content: center;
 		flex-grow: 0;
 	}
-
 	mat-card.scenario-card {
 		max-width: 100px;
 		min-width: 100px;
@@ -204,7 +212,8 @@ cc-ribbon-bar {
 	cc-color-metric-chooser,
 	cc-edge-metric-chooser {
 		display: flex;
-		margin: 4px;
+		align-items: center;
+		margin: auto;
 
 		i {
 			margin-right: 8px;
@@ -212,12 +221,13 @@ cc-ribbon-bar {
 	}
 
 	.cc-metric-settings-panel {
-		display: block;
+		display: flex;
+		flex-direction: column;
 		position: absolute;
 		top: 45px;
 		right: 0;
 		padding: 8px;
-		width: 240px;
+		width: 280px;
 		background: white;
 		border: 1px solid #b5b5b5;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);

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

@@ -1,30 +1,38 @@
 import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
-import { mocked } from "ts-jest/utils"
 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 = mocked(isDeltaStateSelector)
-jest.mock("../../state/selectors/accumulatedData/metricData/edgeMetricData.selector", () => ({
-	edgeMetricDataSelector: jest.fn(() => [])
+const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
+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 = 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: [
@@ -66,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)
@@ -98,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.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
 import { MaterialModule } from "../../../../material/material.module"
-import { BlacklistType } from "../../../codeCharta.model"
 import { setBlacklist } from "../../../state/store/fileSettings/blacklist/blacklist.actions"
 import { Store } from "../../../state/store/store"
 import { BlacklistPanelComponent } from "./blacklistPanel.component"
@@ -25,8 +24,8 @@ describe("blacklistPanel", () => {
 	it("should display all flattened and excluded items in the correct section and remove an item on click", async () => {
 		Store.dispatch(
 			setBlacklist([
-				{ type: BlacklistType.flatten, path: "some/flattened/building.ts" },
-				{ type: BlacklistType.exclude, path: "some/excluded/building.ts" }
+				{ type: "flatten", path: "some/flattened/building.ts" },
+				{ type: "exclude", path: "some/excluded/building.ts" }
 			])
 		)
 		await render(BlacklistPanelComponent)
@@ -37,7 +36,7 @@ describe("blacklistPanel", () => {
 
 		await userEvent.click(screen.getByText("some/excluded/building.ts"))
 		expect(Store.store.getState().fileSettings.blacklist).not.toContainEqual({
-			type: BlacklistType.exclude,
+			type: "exclude",
 			path: "some/excluded/building.ts"
 		})
 	})

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

@@ -1,19 +1,20 @@
-import "./blacklistPanel.component.scss"
-import { Component, Inject } from "@angular/core"
-import { BlacklistItem, BlacklistType } from "../../../codeCharta.model"
+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"
 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(BlacklistType.flatten))
-	excludedItems$ = this.store.select(createBlacklistItemSelector(BlacklistType.exclude))
+	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/blacklistPanel/createBlacklistItemSelector.spec.ts

@@ -1,21 +1,21 @@
-import { BlacklistType } from "../../../codeCharta.model"
+import { BlacklistItem } from "../../../codeCharta.model"
 import { _getFilteredAndSortedItems } from "./createBlacklistItemSelector"
 
 describe("createBlacklistItemSelector _getItems", () => {
 	it("should filter by type", () => {
-		const blacklist = [
-			{ type: BlacklistType.exclude, path: "something.ts" },
-			{ type: BlacklistType.flatten, path: "something-else.ts" }
+		const blacklist: BlacklistItem[] = [
+			{ type: "exclude", path: "something.ts" },
+			{ type: "flatten", path: "something-else.ts" }
 		]
-		expect(_getFilteredAndSortedItems(BlacklistType.flatten, blacklist)).toEqual([blacklist[1]])
+		expect(_getFilteredAndSortedItems("flatten", blacklist)).toEqual([blacklist[1]])
 	})
 
 	it("should sort by path", () => {
-		const blacklist = [
-			{ type: BlacklistType.flatten, path: "something.ts" },
-			{ type: BlacklistType.flatten, path: "another-something.ts" },
-			{ type: BlacklistType.flatten, path: "really/something-else.ts" }
+		const blacklist: BlacklistItem[] = [
+			{ type: "flatten", path: "something.ts" },
+			{ type: "flatten", path: "another-something.ts" },
+			{ type: "flatten", path: "really/something-else.ts" }
 		]
-		expect(_getFilteredAndSortedItems(BlacklistType.flatten, blacklist)).toEqual([blacklist[1], blacklist[2], blacklist[0]])
+		expect(_getFilteredAndSortedItems("flatten", blacklist)).toEqual([blacklist[1], blacklist[2], blacklist[0]])
 	})
 })