codecharta-visualization 1.114.0 → 1.115.1

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { CustomConfigsModule } from "../../customConfigs.module"
-import { MatDialog, MatDialogRef } from "@angular/material/dialog"
 import { render, screen } from "@testing-library/angular"
 import { CustomConfigItemGroupComponent } from "./customConfigItemGroup.component"
 import { CUSTOM_CONFIG_ITEM_GROUPS } from "../../../../util/dataMocks"
@@ -11,6 +10,7 @@ import userEvent from "@testing-library/user-event"
 import { expect } from "@jest/globals"
 import { CustomConfigMapSelectionMode } from "../../../../model/customConfig/customConfig.api.model"
 import { visibleFilesBySelectionModeSelector } from "../../visibleFilesBySelectionMode.selector"
+import { MatDialog, MatDialogRef } from "@angular/material/dialog"
 
 jest.mock("../../visibleFilesBySelectionMode.selector", () => ({
 	visibleFilesBySelectionModeSelector: jest.fn()
@@ -53,11 +53,9 @@ describe("customConfigItemGroupComponent", () => {
 			excludeComponentDeclaration: true,
 			componentProperties: { customConfigItemGroups }
 		})
-		const applyCustomConfigButton = screen.getByText("SampleMap View #1").closest("button") as HTMLButtonElement
-
+		const applyCustomConfigButton = screen.getAllByText("mcc")[0].closest("button")
 		await userEvent.click(applyCustomConfigButton)
 
-		expect(screen.getAllByTitle("Apply Custom View").length).toBe(2)
 		expect(applyCustomConfigButton.disabled).toBe(false)
 		expect(CustomConfigHelper.applyCustomConfig).toHaveBeenCalledTimes(1)
 		expect(mockedDialogReference.close).toHaveBeenCalledTimes(1)
@@ -87,6 +85,31 @@ describe("customConfigItemGroupComponent", () => {
 		expect(mockedDialogReference.close).toHaveBeenCalledTimes(0)
 	})
 
+	it("should apply a custom config and close custom config dialog when clicking on config name", async () => {
+		mockedVisibleFilesBySelectionModeSelector.mockImplementation(() => {
+			return {
+				mapSelectionMode: CustomConfigMapSelectionMode.MULTIPLE,
+				assignedMaps: new Map([
+					["md5_fileB", "fileB"],
+					["md5_fileC", "fileC"]
+				])
+			}
+		})
+		const customConfigItemGroups = new Map([["File_B_File_C_STANDARD", CUSTOM_CONFIG_ITEM_GROUPS.get("File_B_File_C_STANDARD")]])
+		await render(CustomConfigItemGroupComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItemGroups }
+		})
+
+		CustomConfigHelper.applyCustomConfig = jest.fn()
+		const applyCustomConfigButton = screen.getByText("SampleMap View #1").closest("span") as HTMLElement
+
+		await userEvent.click(applyCustomConfigButton)
+
+		expect(CustomConfigHelper.applyCustomConfig).toHaveBeenCalledTimes(1)
+		expect(mockedDialogReference.close).toHaveBeenCalledTimes(1)
+	})
+
 	it("should show tooltip with missing maps and correct selection mode if selected custom config is not fully applicable", async () => {
 		mockedVisibleFilesBySelectionModeSelector.mockImplementation(() => {
 			return {
@@ -100,7 +123,7 @@ describe("customConfigItemGroupComponent", () => {
 			componentProperties: { customConfigItemGroups }
 		})
 
-		const applyCustomConfigButton = screen.getByText("SampleMap View #1").closest("button")
+		const applyCustomConfigButton = screen.getAllByText("mcc")[0].closest("button")
 
 		expect(
 			screen.getAllByTitle(
@@ -110,7 +133,7 @@ describe("customConfigItemGroupComponent", () => {
 		expect(getComputedStyle(applyCustomConfigButton).color).toBe("rgb(204, 204, 204)")
 	})
 
-	it("should not be clickable for non-applicable custom configs", async () => {
+	it("should not be clickable for non-applicable custom configs, but can still change notes of custom configs", async () => {
 		CustomConfigHelper.applyCustomConfig = jest.fn()
 		CustomConfigHelper.applyCustomConfig = jest.fn()
 		mockedVisibleFilesBySelectionModeSelector.mockImplementation(() => {
@@ -127,9 +150,11 @@ describe("customConfigItemGroupComponent", () => {
 			excludeComponentDeclaration: true,
 			componentProperties: { customConfigItemGroups }
 		})
-		const applyCustomConfigButton = screen.getByText("SampleMap View #1").closest("button") as HTMLButtonElement
+		const editNoteArea = screen.getAllByTitle("Edit/View Note")[0] as HTMLButtonElement
+		const applyCustomConfigButton = screen.getAllByText("mcc")[0].closest("button") as HTMLButtonElement
 
 		expect(applyCustomConfigButton.disabled).toBe(true)
+		expect(editNoteArea.disabled).toBe(false)
 		expect(getComputedStyle(applyCustomConfigButton).color).toBe("rgb(204, 204, 204)")
 	})
 })

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.ts

@@ -1,16 +1,31 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import { CustomConfigItemGroup } from "../../customConfigs.component"
+import { Store } from "../../../../state/angular-redux/store"
+import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
+import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrbitControls.service"
 
 @Component({
 	selector: "cc-custom-config-item-group",
-	template: require("./customConfigItemGroup.component.html")
+	templateUrl: "./customConfigItemGroup.component.html",
+	styleUrls: ["./customConfigItemGroup.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CustomConfigItemGroupComponent {
 	@Input() customConfigItemGroups: Map<string, CustomConfigItemGroup>
 	isExpanded = false
 
+	constructor(
+		private store: Store,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
+	) {}
+
 	removeCustomConfig(configId: string) {
 		CustomConfigHelper.deleteCustomConfig(configId)
 	}
+
+	applyCustomConfig(configId: string) {
+		CustomConfigHelper.applyCustomConfig(configId, this.store, this.threeCameraService, this.threeOrbitControlsService)
+	}
 }

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.html

@@ -1,18 +1,18 @@
-<mat-dialog-content class="content" *ngIf="customConfigService.customConfigItemGroups$ | async; let dropDownCustomConfigItemGroups">
+<mat-toolbar color="primary"
+	>Custom Views
 	<div class="row">
-		<div class="title">
-			<h3>Custom Views</h3>
-		</div>
 		<div class="action-buttons">
 			<cc-upload-custom-config-button></cc-upload-custom-config-button>
 			<cc-download-custom-configs-button></cc-download-custom-configs-button>
 			<cc-add-custom-config-button class="custom-configs-button-in-custom-views"></cc-add-custom-config-button>
-		</div>
-	</div>
-	<div class="custom-config-documentation-hint">
+		</div></div
+></mat-toolbar>
+
+<mat-dialog-content class="content" *ngIf="customConfigService.customConfigItemGroups$ | async; let dropDownCustomConfigItemGroups">
+	<p class="custom-config-documentation-hint">
 		Custom Views allow you to save and upload your individual configurations for certain maps. Find out more about Custom Views in the
 		<a href="https://maibornwolff.github.io/codecharta/docs/custom-view/" target="_blank" rel="noopener noreferrer">documentation</a>.
-	</div>
+	</p>
 	<mat-divider></mat-divider>
 	<div
 		class="no-custom-configs-box"

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss

@@ -1,33 +1,36 @@
 @use "../../../../material/theme";
 
-.cc-custom-config-list .mat-dialog-container {
-	padding: 5px 16px;
-	max-height: 90vh;
+.cc-custom-config-list {
+	width: 850px;
 
-	.mat-dialog-content.content {
-		max-height: 100%;
-		margin: 0;
-		padding: 0;
+	.mat-mdc-dialog-content {
+		padding: 16px;
+		max-height: 90vh;
 	}
 
 	.row {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		margin-left: auto;
 	}
 
 	.custom-config-documentation-hint {
 		margin: 10px 0 20px 0;
+		font-size: 1.4em;
+		line-height: 1.4em;
+		color: theme.$cc-font-color;
 	}
 
 	.action-buttons button {
 		margin: 0 3px;
 		min-width: 12%;
 		height: 48px;
-		width: 65px;
+		width: 48px;
+		border-radius: 100%;
 		line-height: 48px;
-		background-color: theme.$cc-primary-color;
-		color: #ffffff;
+		background-color: #ffffff;
+		color: theme.$cc-primary-color;
 
 		&:disabled,
 		&[disabled] {
@@ -51,11 +54,6 @@
 			margin: 0;
 		}
 
-		.highlight-mode {
-			font-weight: bold;
-			white-space: break-spaces;
-		}
-
 		.mat-expansion-panel-body {
 			padding: 0 16px;
 		}
@@ -69,18 +67,22 @@
 		}
 
 		&.non-applicable-group {
-			.mat-expansion-panel-header-title,
-			.mat-list-item-content {
+			.mat-expansion-panel-header-title {
 				color: rgba(0, 0, 0, 0.3);
 			}
 		}
 
-		.mat-list-item-content {
-			display: flex;
-			justify-content: space-between;
+		.mdc-list-item__content {
+			width: 100%;
 			border-bottom: 1px solid #000000;
 			padding: 0 5px;
 
+			.mdc-list-item__primary-text {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+			}
+
 			&:hover {
 				background-color: rgba(0, 0, 0, 0.04);
 			}
@@ -88,10 +90,11 @@
 			button {
 				background-color: transparent;
 
-				&.remove-button {
+				&.remove-button,
+				&.custom-config-note-dialog-button {
 					font-size: 16px;
 					padding: 8px 10px;
-					margin: 0;
+					margin: 0px;
 
 					&:hover {
 						background-color: rgba(0, 0, 0, 0.05);
@@ -103,24 +106,17 @@
 		}
 	}
 
-	.mat-accordion > .mat-expansion-panel-spacing:last-child,
-	.mat-accordion > *:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing,
-	.mat-accordion > .mat-expansion-panel-spacing:first-child,
-	.mat-accordion > *:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing {
-		margin: 2px 0;
-	}
-
 	.toggle-non-applicable-configs-button {
 		width: 100%;
 		height: 30px;
 		margin: 5px 0;
 	}
 
-	.mat-list-base {
+	.mat-mdc-list-base {
 		padding: 0;
 	}
 
-	.mat-list-item {
+	.mat-mdc-list-item {
 		height: max-content;
 	}
 }

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.spec.ts

@@ -1,7 +1,6 @@
 import { Store } from "../../../state/store/store"
 import { TestBed } from "@angular/core/testing"
 import { CustomConfigsModule } from "../customConfigs.module"
-import { MatDialog } from "@angular/material/dialog"
 import { CustomConfigListComponent } from "./customConfigList.component"
 import { render, screen } from "@testing-library/angular"
 import { CustomConfigHelperService } from "../customConfigHelper.service"
@@ -15,6 +14,7 @@ import { ThreeSceneService } from "../../codeMap/threeViewer/threeSceneService"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
 import userEvent from "@testing-library/user-event"
 import { expect } from "@jest/globals"
+import { MatDialog } from "@angular/material/dialog"
 
 const mockedCustomConfigHelperService = {
 	customConfigItemGroups$: of({
@@ -106,7 +106,9 @@ describe("customConfigListComponent", () => {
 
 		expect(container.querySelectorAll("mat-list-item").length).toBe(2)
 		expect(screen.getByText("SampleMap View #1")).not.toBeNull()
+		expect(screen.getByText("a note")).not.toBeNull()
 		expect(screen.getByText("SampleMap View #2")).not.toBeNull()
+		expect(screen.getByText("Add Note")).not.toBeNull()
 	})
 
 	it("should disable button for all custom configs belonging to a non-applicable custom config item group", async () => {
@@ -123,7 +125,8 @@ describe("customConfigListComponent", () => {
 
 		await userEvent.click(customConfigItemGroupElement)
 
-		expect(screen.getByText("SampleMap Delta View #1")).not.toBeNull()
-		expect((screen.getByText("SampleMap Delta View #1").closest("button") as HTMLButtonElement).disabled).toBe(true)
+		expect((screen.getAllByTitle("SampleMap Delta View #1", { exact: false })[1].closest("button") as HTMLButtonElement).disabled).toBe(
+			true
+		)
 	})
 })

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.ts

@@ -1,14 +1,15 @@
-import "./customConfigList.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { CustomConfigHelperService } from "../customConfigHelper.service"
 
 @Component({
-	template: require("./customConfigList.component.html")
+	templateUrl: "./customConfigList.component.html",
+	styleUrls: ["./customConfigList.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CustomConfigListComponent {
 	isCollapsed = true
 
-	constructor(@Inject(CustomConfigHelperService) public customConfigService: CustomConfigHelperService) {}
+	constructor(public customConfigService: CustomConfigHelperService) {}
 
 	toggleNonApplicableCustomConfigsList() {
 		this.isCollapsed = !this.isCollapsed

package/app/codeCharta/ui/customConfigs/customConfigList/getCustomConfigItemGroups.spec.ts

@@ -30,7 +30,8 @@ describe("getCustomConfigItemGroups", () => {
 				colorMetric: "mcc",
 				edgeMetric: "avgCommits"
 			}
-		}
+		},
+		note: "Custom Note 1"
 	} as CustomConfig
 
 	const customConfigStub2 = {
@@ -75,6 +76,7 @@ describe("getCustomConfigItemGroups", () => {
 		const applicableGroup = actualCustomConfigItemGroups.applicableItems.get("map1_map2_STANDARD")
 		expect(applicableGroup.customConfigItems[0].name).toBe("config1")
 		expect(applicableGroup.customConfigItems[0].isApplicable).toBe(true)
+		expect(applicableGroup.customConfigItems[0].note).toBe("Custom Note 1")
 		expect(applicableGroup.customConfigItems[0].metrics).toEqual({
 			heightMetric: "mcc",
 			areaMetric: "rloc",
@@ -89,6 +91,7 @@ describe("getCustomConfigItemGroups", () => {
 			negativeDelta: "red",
 			positiveDelta: "green"
 		})
+		expect(applicableGroup.customConfigItems[0].note).toBe("Custom Note 1")
 	})
 
 	it("should set applicable-flags to false when current assigned map names, checksums and selection mode are not matching a custom config", () => {
@@ -107,6 +110,7 @@ describe("getCustomConfigItemGroups", () => {
 
 		const nonApplicableGroup = actualCustomConfigItemGroups.nonApplicableItems.get("map3_STANDARD")
 		expect(nonApplicableGroup.customConfigItems[0].name).toBe("config2")
+		expect(nonApplicableGroup.customConfigItems[0].note).toBeUndefined()
 		expect(nonApplicableGroup.customConfigItems[0].isApplicable).toBe(false)
 	})
 

package/app/codeCharta/ui/customConfigs/customConfigList/getCustomConfigItemGroups.ts

@@ -38,7 +38,8 @@ export function getCustomConfigItemGroups({ assignedMaps }: VisibleFilesBySelect
 			mapSelectionMode: customConfig.mapSelectionMode,
 			metrics: { areaMetric, heightMetric, colorMetric, edgeMetric },
 			mapColors: { positive, neutral, negative, selected, positiveDelta, negativeDelta },
-			isApplicable: isCustomConfigItemApplicable
+			isApplicable: isCustomConfigItemApplicable,
+			...(customConfig.note && { note: customConfig.note })
 		})
 
 		if (customConfigItemGroups.get(groupKey).hasApplicableItems) {

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.html

@@ -0,0 +1,12 @@
+<div class="custom-config-note-dialog-container">
+	<div mat-dialog-content class="note-input-container">
+		<mat-form-field class="note-input" appearance="fill">
+			<mat-label>Custom Note</mat-label>
+			<textarea matInput cdkAutosizeMinRows="10" cdkTextareaAutosize [(ngModel)]="data"></textarea>
+		</mat-form-field>
+	</div>
+	<div mat-dialog-actions class="note-dialog-action-buttons">
+		<button [mat-dialog-close]>Cancel</button>
+		<button [mat-dialog-close]="data">Ok</button>
+	</div>
+</div>

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.scss

@@ -0,0 +1,31 @@
+@use "app/material/theme";
+
+cc-custom-config-note-dialog {
+	.custom-config-note-dialog-container {
+		padding: 20px 24px;
+
+		.note-input-container {
+			padding: 0;
+
+			.note-input {
+				width: 100%;
+			}
+		}
+		.note-dialog-action-buttons {
+			justify-content: flex-end;
+			padding: 0;
+		}
+
+		button {
+			padding: 12px;
+			margin: 0 0 0 10px;
+			color: theme.$cc-primary-color;
+			background-color: rgba(138, 132, 132, 0.08);
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+				color: theme.$cc-primary-color;
+			}
+		}
+	}
+}

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { MAT_DIALOG_DATA } from "@angular/material/dialog"
+
+@Component({
+	selector: "cc-custom-config-note-dialog",
+	templateUrl: "./customConfigNoteDialog.component.html",
+	styleUrls: ["./customConfigNoteDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
+})
+export class CustomConfigNoteDialogComponent {
+	constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
+}

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.component.html

@@ -0,0 +1,3 @@
+<button class="custom-config-note-dialog-button" title="Edit/View Note" (click)="openDialog()">
+	<i class="fa fa-pencil"></i>
+</button>

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.component.spec.ts

@@ -0,0 +1,90 @@
+import { TestBed } from "@angular/core/testing"
+
+import { render, screen } from "@testing-library/angular"
+import { CustomConfigNoteDialogButtonComponent } from "./customConfigNoteDialogButton.component"
+import userEvent from "@testing-library/user-event"
+import { CustomConfigItem } from "../customConfigs.component"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+import { CustomConfigNoteDialogButtonModule } from "./customConfigNoteDialogButton.module"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatDialogHarness } from "@angular/material/dialog/testing"
+
+describe("customConfigNoteDialogComponent", () => {
+	let editCustomConfigNoteSpy: jest.SpyInstance
+
+	beforeEach(() => {
+		editCustomConfigNoteSpy = jest.spyOn(CustomConfigHelper, "editCustomConfigNote").mockImplementation(() => {})
+		TestBed.configureTestingModule({
+			imports: [CustomConfigNoteDialogButtonModule]
+		})
+	})
+
+	afterEach(() => {
+		editCustomConfigNoteSpy.mockRestore()
+	})
+
+	it("should render a clickable button and open a dialog to add and submit a note", async () => {
+		const newNote = "Some other note"
+		const customConfigItem = {
+			id: "configID",
+			note: ""
+		} as CustomConfigItem
+		const { fixture } = await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		let currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+
+		expect(currentlyOpenedDialogs.length).toBe(0)
+		await userEvent.click(screen.getByTitle("Edit/View Note"))
+
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(1)
+
+		await userEvent.type(screen.getByRole("textbox"), newNote)
+		await userEvent.click(screen.getByText("Ok"))
+
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(0)
+
+		expect(editCustomConfigNoteSpy).toHaveBeenCalledWith("configID", newNote)
+	})
+
+	it("should render a clickable button and open a dialog and and not change the note when the same note is submitted", async () => {
+		const customConfigItem = {
+			id: "configID",
+			note: "a note"
+		} as CustomConfigItem
+		await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+
+		const editNoteButton = screen.getByTitle("Edit/View Note")
+		await userEvent.click(editNoteButton)
+		await userEvent.click(screen.getByText("Ok"))
+
+		expect(editCustomConfigNoteSpy).not.toHaveBeenCalled()
+	})
+
+	it("should render a clickable button and open a dialog and and not change the note when cancel button is clicked", async () => {
+		const customConfigItem = {
+			id: "configID",
+			note: "a note"
+		} as CustomConfigItem
+		const { fixture } = await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		const editNoteButton = screen.getByTitle("Edit/View Note")
+
+		await userEvent.click(editNoteButton)
+		await userEvent.click(screen.getByText("Cancel"))
+		const currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+
+		expect(currentlyOpenedDialogs.length).toBe(0)
+		expect(editCustomConfigNoteSpy).not.toHaveBeenCalled()
+	})
+})

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from "@angular/core"
+import { MatDialog } from "@angular/material/dialog"
+import { CustomConfigNoteDialogComponent } from "./customConfigNoteDialog/customConfigNoteDialog.component"
+import { CustomConfigItem } from "../customConfigs.component"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+
+@Component({
+	selector: "cc-custom-config-note-dialog-button",
+	templateUrl: "./customConfigNoteDialogButton.component.html"
+})
+export class CustomConfigNoteDialogButtonComponent {
+	@Input() customConfigItem: CustomConfigItem
+
+	customConfigNote: string
+
+	constructor(private dialog: MatDialog) {}
+
+	openDialog(): void {
+		this.customConfigNote = this.customConfigItem.note
+
+		const dialogReference = this.dialog.open(CustomConfigNoteDialogComponent, {
+			width: "600px",
+			data: this.customConfigNote
+		})
+
+		dialogReference.afterClosed().subscribe(result => {
+			if (result !== undefined && this.customConfigNote !== result) {
+				this.customConfigNote = result
+				CustomConfigHelper.editCustomConfigNote(this.customConfigItem.id, result)
+			}
+		})
+	}
+}

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../material/material.module"
+import { FormsModule, ReactiveFormsModule } from "@angular/forms"
+import { CommonModule } from "@angular/common"
+import { CustomConfigNoteDialogButtonComponent } from "./customConfigNoteDialogButton.component"
+import { CustomConfigNoteDialogComponent } from "./customConfigNoteDialog/customConfigNoteDialog.component"
+import { A11yModule } from "@angular/cdk/a11y"
+
+@NgModule({
+	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule, A11yModule],
+	declarations: [CustomConfigNoteDialogButtonComponent, CustomConfigNoteDialogComponent],
+	exports: [CustomConfigNoteDialogButtonComponent]
+})
+export class CustomConfigNoteDialogButtonModule {}

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

@@ -1,11 +1,12 @@
 import { Store } from "../../state/store/store"
 import { TestBed } from "@angular/core/testing"
-import { MatDialog } from "@angular/material/dialog"
-import { fireEvent, render, screen } from "@testing-library/angular"
+import { render, screen } from "@testing-library/angular"
 import { CustomConfigsComponent } from "./customConfigs.component"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component"
 import { CustomConfigListComponent } from "./customConfigList/customConfigList.component"
 import { CustomConfigsModule } from "./customConfigs.module"
+import { MatDialog } from "@angular/material/dialog"
+import userEvent from "@testing-library/user-event"
 
 describe("CustomConfigsComponent", () => {
 	let mockedDialog = { open: jest.fn() }
@@ -23,7 +24,7 @@ describe("CustomConfigsComponent", () => {
 		await render(CustomConfigsComponent, { excludeComponentDeclaration: true })
 
 		const addButton = screen.getByTitle("Create new Custom View")
-		fireEvent.click(addButton)
+		await userEvent.click(addButton)
 
 		expect(mockedDialog.open).toHaveBeenCalledTimes(1)
 		expect(mockedDialog.open).toHaveBeenCalledWith(AddCustomConfigDialogComponent, { panelClass: "cc-add-custom-config-dialog" })
@@ -33,7 +34,7 @@ describe("CustomConfigsComponent", () => {
 		await render(CustomConfigsComponent, { excludeComponentDeclaration: true })
 
 		const openCustomConfigsButton = screen.getByTitle("Open your saved Custom Views")
-		fireEvent.click(openCustomConfigsButton)
+		await userEvent.click(openCustomConfigsButton)
 
 		expect(mockedDialog.open).toHaveBeenCalledTimes(1)
 		expect(mockedDialog.open).toHaveBeenCalledWith(CustomConfigListComponent, { panelClass: "cc-custom-config-list" })

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

@@ -1,5 +1,4 @@
-import "./customConfigs.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { CustomConfigListComponent } from "./customConfigList/customConfigList.component"
 import { CustomConfigMapSelectionMode } from "../../model/customConfig/customConfig.api.model"
@@ -15,6 +14,7 @@ export interface CustomConfigItem {
 	metrics: Pick<PrimaryMetrics, "areaMetric" | "heightMetric" | "colorMetric" | "edgeMetric">
 	mapColors: CustomConfigColors
 	isApplicable: boolean
+	note?: string
 }
 
 export interface CustomConfigItemGroup {
@@ -26,10 +26,12 @@ export interface CustomConfigItemGroup {
 
 @Component({
 	selector: "cc-custom-configs",
-	template: require("./customConfigs.component.html")
+	templateUrl: "./customConfigs.component.html",
+	styleUrls: ["./customConfigs.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CustomConfigsComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	openCustomConfigDialog() {
 		this.dialog.open(CustomConfigListComponent, {