codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/fileExtensionBar/selectors/fileExtensionCalculator.spec.ts

@@ -1,5 +1,5 @@
 import { FileExtensionCalculator, MetricDistribution } from "./fileExtensionCalculator"
-import { BlacklistType, CodeMapNode, NodeType } from "../../../codeCharta.model"
+import { CodeMapNode, NodeType } from "../../../codeCharta.model"
 import { VALID_NODE_WITH_PATH_AND_EXTENSION, VALID_NODE_WITHOUT_RLOC_METRIC, setIsBlacklisted } from "../../../util/dataMocks"
 import { clone } from "../../../util/clone"
 
@@ -13,9 +13,9 @@ describe("FileExtensionCalculator", () => {
 	describe("getFileExtensionDistribution", () => {
 		it("should get correct absolute distribution of file-extensions for given metric", () => {
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 40%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -30,12 +30,12 @@ describe("FileExtensionCalculator", () => {
 		})
 
 		it("should get correct absolute distribution of file-extensions for given metric with hidden node", () => {
-			setIsBlacklisted([map.children[0].path], map, BlacklistType.flatten)
+			setIsBlacklisted([map.children[0].path], map, "flatten")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 40%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -50,17 +50,17 @@ describe("FileExtensionCalculator", () => {
 		})
 
 		it("should get correct absolute distribution of file-extensions for given metric with excluded node", () => {
-			setIsBlacklisted([map.children[0].path], map, BlacklistType.exclude)
+			setIsBlacklisted([map.children[0].path], map, "exclude")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 58.483_754_512_635_38, color: "hsl(58, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 58.483_754_512_635_38, color: "hsl(58, 60%, 50%)" },
 				{
 					fileExtension: "json",
 					absoluteMetricValue: 70,
 					relativeMetricValue: 25.270_758_122_743_683,
-					color: "hsl(232, 40%, 50%)"
+					color: "hsl(232, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 30, relativeMetricValue: 10.830_324_909_747_292, color: "hsl(321, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 30, relativeMetricValue: 10.830_324_909_747_292, color: "hsl(321, 60%, 50%)" },
 				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 5.415_162_454_873_646, color: "#676867" }
 			]
 
@@ -70,11 +70,11 @@ describe("FileExtensionCalculator", () => {
 		})
 
 		it("should get correct absolute distribution of file-extensions for given metric with excluded path", () => {
-			setIsBlacklisted(["/root/another big leaf.java", "/root/Parent Leaf/another leaf.java"], map, BlacklistType.exclude)
+			setIsBlacklisted(["/root/another big leaf.java", "/root/Parent Leaf/another leaf.java"], map, "exclude")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 60.465_116_279_069_77, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 32.558_139_534_883_72, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 60.465_116_279_069_77, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 32.558_139_534_883_72, color: "hsl(232, 60%, 50%)" },
 				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 6.976_744_186_046_512, color: "#676867" }
 			]
 
@@ -89,10 +89,10 @@ describe("FileExtensionCalculator", () => {
 					fileExtension: "java",
 					absoluteMetricValue: 162,
 					relativeMetricValue: 42.970_822_281_167_11,
-					color: "hsl(58, 40%, 50%)"
+					color: "hsl(58, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -158,14 +158,14 @@ describe("FileExtensionCalculator", () => {
 					fileExtension: "java",
 					absoluteMetricValue: 162,
 					relativeMetricValue: 40.806_045_340_050_375,
-					color: "hsl(58, 40%, 50%)"
+					color: "hsl(58, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 32.745_591_939_546_6, color: "hsl(321, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 32.745_591_939_546_6, color: "hsl(321, 60%, 50%)" },
 				{
 					fileExtension: "json",
 					absoluteMetricValue: 70,
 					relativeMetricValue: 17.632_241_813_602_015,
-					color: "hsl(232, 40%, 50%)"
+					color: "hsl(232, 60%, 50%)"
 				},
 				{
 					fileExtension: "None",
@@ -173,7 +173,7 @@ describe("FileExtensionCalculator", () => {
 					relativeMetricValue: 3.778_337_531_486_146_3,
 					color: "#676867"
 				},
-				{ fileExtension: "xml", absoluteMetricValue: 8, relativeMetricValue: 2.015_113_350_125_944_6, color: "hsl(7, 40%, 50%)" },
+				{ fileExtension: "xml", absoluteMetricValue: 8, relativeMetricValue: 2.015_113_350_125_944_6, color: "hsl(7, 60%, 50%)" },
 				{
 					fileExtension: "other",
 					absoluteMetricValue: 12,

package/app/codeCharta/ui/fileExtensionBar/selectors/fileExtensionCalculator.ts

@@ -118,6 +118,6 @@ export class FileExtensionCalculator {
 		for (let index = 0; index < fileExtension.length; index++) {
 			hash = fileExtension.codePointAt(index) + ((hash << 5) - hash)
 		}
-		return new HSL(hash % 360, 40, 50).toString()
+		return new HSL(hash % 360, 60, 50).toString()
 	}
 }

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

@@ -1,3 +1,3 @@
 <cc-file-panel-state-buttons></cc-file-panel-state-buttons>
-<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)" style="display: inline-block; width: 200px"></cc-file-panel-file-selector>
+<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)"></cc-file-panel-file-selector>
 <cc-file-panel-delta-selector *ngIf="isDeltaState$ | async"></cc-file-panel-delta-selector>

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

@@ -1,20 +1,13 @@
 @use "../../../material/theme";
 
 cc-file-panel {
-	width: calc(100% - 150px);
-	min-width: 400px;
-	display: inline-block;
+	display: flex;
+	gap: inherit;
 
 	&.hidden {
 		display: none;
 	}
 
-	.mode-chooser {
-		display: inline-flex;
-		vertical-align: middle;
-		margin-left: 10px;
-	}
-
 	.state-selector-button {
 		&.mode-selector {
 			height: 24px;
@@ -27,21 +20,12 @@ cc-file-panel {
 			}
 
 			&.current {
-				background-color: rgb(0, 150, 136);
+				background-color: theme.$cc-primary-color;
 				color: #ffffff;
 			}
-			&.current:hover {
-				background-color: rgb(0, 150, 136);
-			}
-			.text {
-				display: block;
-				margin-top: -5px;
-				margin-right: 0px;
 
-				&:active {
-					padding: -5px;
-					margin: -5px;
-				}
+			&.current:hover {
+				background-color: theme.$cc-primary-color;
 			}
 		}
 	}
@@ -70,6 +54,7 @@ cc-file-panel {
 			color: rgb(255, 255, 255);
 		}
 	}
+
 	.pictogram {
 		display: inline-flex;
 		width: 10px;
@@ -81,13 +66,8 @@ cc-file-panel {
 		vertical-align: bottom;
 	}
 
+	.standard-select,
 	.delta-select {
 		width: 200px;
-		margin: 0 10px 0 10px;
-		vertical-align: bottom;
-	}
-
-	.standard-select {
-		margin: 0 10px 0 10px;
 	}
 }

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

@@ -1,5 +1,4 @@
 import { FilePanelComponent } from "./filePanel.component"
-import { mocked } from "ts-jest/utils"
 import { TestBed } from "@angular/core/testing"
 import { FilePanelModule } from "./filePanel.module"
 import { render } from "@testing-library/angular"
@@ -8,7 +7,7 @@ import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selecto
 jest.mock("../../state/selectors/isDeltaState.selector", () => ({
 	isDeltaStateSelector: jest.fn()
 }))
-const mockedIsDeltaStateSelector = mocked(isDeltaStateSelector)
+const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
 
 describe("filePanelComponent", () => {
 	beforeEach(() => {

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

@@ -1,14 +1,15 @@
-import "./filePanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 
 @Component({
 	selector: "cc-file-panel",
-	template: require("./filePanel.component.html")
+	templateUrl: "./filePanel.component.html",
+	styleUrls: ["./filePanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/filePanel/filePanel.module.ts

@@ -6,12 +6,12 @@ import { NgModule } from "@angular/core"
 import { CommonModule } from "@angular/common"
 import { MaterialModule } from "../../../material/material.module"
 import { FormsModule } from "@angular/forms"
-import { RemoveExtensionModule } from "../../util/removeExtensionModule"
+import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 import { FileSelectionModeService } from "./fileSelectionMode.service"
 import { FilePanelComponent } from "./filePanel.component"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule, RemoveExtensionModule],
+	imports: [CommonModule, MaterialModule, FormsModule, SimplePipesModule],
 	declarations: [
 		FilePanelDeltaSelectorComponent,
 		FilePanelFileSelectorComponent,

package/app/codeCharta/ui/filePanel/filePanel.po.ts

@@ -2,14 +2,16 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export class FilePanelPageObject {
 	async getSelectedName() {
-		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span")
-		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span", element => element["innerText"])
+		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span")
+		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span", element => element["innerText"])
 	}
 
 	async getAllNames() {
 		await clickButtonOnPageElement("cc-file-panel cc-file-panel-file-selector mat-select")
-		await page.waitForSelector(".mat-select-panel")
-		const content = await page.$$eval(".mat-select-panel .mat-option-text", element => element.map(item => item["innerText"]))
+		await page.waitForSelector(".mat-mdc-select-panel")
+		const content = await page.$$eval(".mat-mdc-select-panel .mdc-list-item__primary-text", element =>
+			element.map(item => item["innerText"].trim())
+		)
 		return content
 	}
 }

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.html

@@ -1,25 +1,27 @@
-<mat-select class="delta-select" [value]="referenceFile$ | async" (selectionChange)="handleDeltaReferenceFileChange($event.value)">
-	<mat-option *ngFor="let file of files$ | async" [value]="file.file">
-		{{ file.file.fileMeta.fileName | removeExtension }}
-	</mat-option>
-</mat-select>
-<button
-	class="reference-comparison-switch"
-	[disabled]="(comparisonFile$ | async) === undefined"
-	(click)="switchReferenceAndComparison()"
-	title="Switch reference and comparison file"
->
-	<i class="fa fa-arrows-h"></i>
-</button>
+<div class="delta-select-wrapper">
+	<mat-select class="delta-select" [value]="referenceFile$ | async" (selectionChange)="handleDeltaReferenceFileChange($event.value)">
+		<mat-option *ngFor="let file of files$ | async" [value]="file.file">
+			{{ file.file.fileMeta.fileName | removeExtension }}
+		</mat-option>
+	</mat-select>
+	<button
+		class="reference-comparison-switch"
+		[disabled]="(comparisonFile$ | async) === undefined"
+		(click)="switchReferenceAndComparison()"
+		title="Switch reference and comparison file"
+	>
+		<i class="fa fa-arrows-h"></i>
+	</button>
 
-<mat-select
-	class="delta-select"
-	placeholder="select comparison file"
-	[value]="comparisonFile$ | async"
-	(selectionChange)="handleDeltaComparisonFileChange($event.value)"
->
-	<mat-option *ngFor="let file of possibleComparisonFiles$ | async" [value]="file.file">
-		{{ file.file.fileMeta.fileName | removeExtension }}
-	</mat-option>
-</mat-select>
-<div class="pictogram" [style.background]="pictogramBackground$ | async"></div>
+	<mat-select
+		class="delta-select"
+		placeholder="select comparison file"
+		[value]="comparisonFile$ | async"
+		(selectionChange)="handleDeltaComparisonFileChange($event.value)"
+	>
+		<mat-option *ngFor="let file of possibleComparisonFiles$ | async" [value]="file.file">
+			{{ file.file.fileMeta.fileName | removeExtension }}
+		</mat-option>
+	</mat-select>
+	<div class="pictogram" [style.background]="pictogramBackground$ | async"></div>
+</div>

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.scss

@@ -0,0 +1,6 @@
+cc-file-panel-delta-selector {
+	.delta-select-wrapper {
+		display: flex;
+		gap: 12px;
+	}
+}

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { map } from "rxjs"
 import { CCFile } from "../../../codeCharta.model"
 import { FileSelectionState } from "../../../model/files/files"
@@ -10,7 +10,9 @@ import { pictogramBackgroundSelector } from "./pictogramBackground.selector"
 
 @Component({
 	selector: "cc-file-panel-delta-selector",
-	template: require("./filePanelDeltaSelector.component.html")
+	templateUrl: "./filePanelDeltaSelector.component.html",
+	styleUrls: ["./filePanelDeltaSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelDeltaSelectorComponent {
 	files$ = this.store.select(filesSelector)
@@ -19,7 +21,7 @@ export class FilePanelDeltaSelectorComponent {
 	possibleComparisonFiles$ = this.files$.pipe(map(files => files.filter(file => file.selectedAs !== FileSelectionState.Reference)))
 	pictogramBackground$ = this.store.select(pictogramBackgroundSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleDeltaReferenceFileChange(file: CCFile) {
 		this.store.dispatch(setDeltaReference(file))

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -3,6 +3,7 @@
 	[(value)]="selectedFilesInUI"
 	(selectionChange)="handleSelectedFilesChanged($event.value)"
 	(openedChange)="handleOpenedChanged($event)"
+	class="standard-select"
 	multiple
 >
 	<div class="actions">

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -1,12 +1,5 @@
 .file-select {
-	&.mat-select-panel {
-		max-width: max-content;
-	}
-}
-
-.filenames {
-	.mat-option-text {
-		display: flex;
-		justify-content: space-between;
+	&.mat-mdc-select-panel {
+		min-width: max-content;
 	}
 }

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.spec.ts

@@ -20,7 +20,7 @@ describe("filePanelFileSelectorComponent", () => {
 		expect(fixture.componentInstance["selectedFilesInUI"].length).toBe(1)
 		expect(fixture.componentInstance["selectedFilesInUI"][0]).toEqual(TEST_FILE_DATA)
 
-		const selectFilesElement = screen.getByRole("combobox").querySelector(".mat-select-trigger")
+		const selectFilesElement = screen.getByRole("combobox").querySelector(".mat-mdc-select-trigger")
 		fireEvent.click(selectFilesElement)
 		const deselectAllButton = screen.getByText("None")
 		fireEvent.click(deselectAllButton)

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.ts

@@ -1,5 +1,4 @@
-import "./filePanelFileSelector.component.scss"
-import { Component, Inject, OnDestroy } from "@angular/core"
+import { Component, OnDestroy, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { filesSelector } from "../../../state/store/files/files.selector"
 import { invertStandard, setAll, setStandard } from "../../../state/store/files/files.actions"
@@ -8,7 +7,9 @@ import { FileSelectionState, FileState } from "../../../model/files/files"
 
 @Component({
 	selector: "cc-file-panel-file-selector",
-	template: require("./filePanelFileSelector.component.html")
+	templateUrl: "./filePanelFileSelector.component.html",
+	styleUrls: ["./filePanelFileSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelFileSelectorComponent implements OnDestroy {
 	fileStates: FileState[] = []
@@ -20,7 +21,7 @@ export class FilePanelFileSelectorComponent implements OnDestroy {
 		this.selectedFilesInUI = this.selectedFilesInStore
 	})
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnDestroy(): void {
 		this.filesSubscription.unsubscribe()

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss

@@ -1,5 +1,5 @@
 cc-remove-file-button {
-	.mat-button {
+	.mat-mdc-button {
 		border-radius: 50%;
 		margin: 0;
 		min-width: 0;

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts

@@ -1,16 +1,17 @@
-import "./removeFileButton.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../../state/angular-redux/store"
 import { removeFile } from "../../../../state/store/files/files.actions"
 
 @Component({
 	selector: "cc-remove-file-button",
-	template: require("./removeFileButton.component.html")
+	templateUrl: "./removeFileButton.component.html",
+	styleUrls: ["./removeFileButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class RemoveFileButtonComponent {
 	@Input() filename: string
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	onRemoveFile(filename: string, $event: MouseEvent) {
 		this.store.dispatch(removeFile(filename))

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.html

@@ -1,4 +1,4 @@
-<div class="mode-chooser">
+<div>
 	<button
 		mat-button
 		class="state-selector-button mode-selector left"

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.ts

@@ -1,17 +1,15 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
 import { FileSelectionModeService } from "../fileSelectionMode.service"
 
 @Component({
 	selector: "cc-file-panel-state-buttons",
-	template: require("./filePanelStateButtons.component.html")
+	templateUrl: "./filePanelStateButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelStateButtonsComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(
-		@Inject(Store) private store,
-		@Inject(FileSelectionModeService) public fileSelectionModeService: FileSelectionModeService
-	) {}
+	constructor(private store: Store, public fileSelectionModeService: FileSelectionModeService) {}
 }

package/app/codeCharta/ui/filePanel/fileSelectionMode.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, OnDestroy } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { pairwise, tap, filter } from "rxjs"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { isDeltaState, isEqual } from "../../model/files/files.helper"
@@ -22,7 +22,7 @@ export class FileSelectionModeService implements OnDestroy {
 		)
 		.subscribe()
 
-	constructor(@Inject(Store) private store: Store, @Inject(State) private state: State) {}
+	constructor(private store: Store, private state: State) {}
 
 	ngOnDestroy(): void {
 		this.subscription.unsubscribe()

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

@@ -17,7 +17,7 @@
 			</span>
 		</div>
 		<div class="cc-labelled-color-picker-label">
-			<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
+			<span *ngFor="let label of labels; let last = last"> {{ label }} <br *ngIf="!last" /></span>
 		</div>
 	</div>
 </ng-template>

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

@@ -1,8 +1,8 @@
 cc-labelled-color-picker {
 	.cc-labelled-color-picker-container {
 		display: flex;
+		height: 40px;
 		align-items: center;
-		margin: 4px 0;
 
 		&:hover {
 			cursor: pointer;
@@ -10,25 +10,29 @@ cc-labelled-color-picker {
 
 		.cc-color-swatch-container {
 			position: relative;
-			margin-right: 8px;
+			margin: 0px 11px; // Exactly 11px to match the mat-checkbox margin
+			width: 18px;
+			height: 18px;
 
-			.cc-color-swatch,
-			.cc-color-brush {
+			.cc-color-swatch {
 				display: inline-block;
-				width: 16px;
-				height: 16px;
+				width: inherit;
+				height: inherit;
+				border-radius: 2px;
 			}
 
 			.cc-color-brush {
 				position: absolute;
-				left: 0;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
 				opacity: 0; // handled by component
 			}
 		}
 	}
 }
 
-.mat-menu-panel.cc-color-picker-menu .mat-menu-content {
+.mat-mdc-menu-panel.cc-color-picker-menu .mat-mdc-menu-content {
 	padding: 0;
 }
 

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

@@ -36,8 +36,8 @@ describe("labelledColorPicker", () => {
 		const colorPicker = screen.getByRole("colorpicker")
 		expectBrushVisibility(container, true)
 
-		// @ts-ignore
-		ng.probe(colorPicker).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
+		// @ts-expect-error
+		ng.getComponent(colorPicker).onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
 		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
 
 		fireEvent.mouseLeave(colorPickerTrigger)

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

@@ -1,9 +1,10 @@
-import "./labelledColorPicker.component.scss"
-import { Component, EventEmitter, Input, Output } from "@angular/core"
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-labelled-color-picker",
-	template: require("./labelledColorPicker.component.html")
+	templateUrl: "./labelledColorPicker.component.html",
+	styleUrls: ["./labelledColorPicker.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LabelledColorPickerComponent {
 	@Input() hexColor: string

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.html

@@ -1,20 +1,20 @@
-<ng-container *ngIf="legendMetric.title; then titleExists; else onlyShowName" class="legend-block"></ng-container>
+<ng-container *ngIf="metricDecorations.title; then titleExists; else onlyShowName" class="legend-block"></ng-container>
 <ng-template #titleExists>
-	<ng-container *ngIf="legendMetric.description; then showTitleAndDescription; else showTitle"></ng-container>
+	<ng-container *ngIf="metricDecorations.description; then showTitleAndDescription; else showTitle"></ng-container>
 </ng-template>
 
 <ng-template #showTitleAndDescription>
-	<div title="{{ legendMetric.key + ': ' + legendMetric.description }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.title }}</span> ({{ legendMetric.key }})
+	<div title="{{ metricDecorations.description }}">
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
 	</div>
 </ng-template>
 <ng-template #showTitle>
-	<div title="{{ legendMetric.key }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.title }}</span> ({{ legendMetric.key }})
+	<div>
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
 	</div>
 </ng-template>
 <ng-template #onlyShowName>
-	<div title="{{ legendMetric.key }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.key }}</span>
+	<div>
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.key }}</span>
 	</div>
 </ng-template>

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.ts

@@ -1,11 +1,12 @@
-import { Component, Input } from "@angular/core"
-import { LegendMetric } from "../selectors/legendMetric"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
 
 @Component({
 	selector: "cc-legend-block",
-	template: require("./legendBlock.component.html")
+	templateUrl: "./legendBlock.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendBlockComponent {
 	@Input() metricFor: string
-	@Input() legendMetric: LegendMetric
+	@Input() metricDecorations: MetricDescriptors
 }