codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfig2ApplicableMessage.pipe.ts

@@ -1,11 +1,11 @@
-import { Inject, Pipe, PipeTransform } from "@angular/core"
+import { Pipe, PipeTransform } from "@angular/core"
 import { CustomConfigItem } from "../../customConfigs.component"
 import { State } from "../../../../state/angular-redux/state"
 import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeAndMaps"
 
 @Pipe({ name: "customConfig2ApplicableMessage" })
 export class CustomConfig2ApplicableMessage implements PipeTransform {
-	constructor(@Inject(State) private state: State) {}
+	constructor(private state: State) {}
 
 	transform(customConfig: CustomConfigItem): string {
 		const { mapSelectionMode, mapNames } = getMissingCustomConfigModeAndMaps(customConfig, this.state)

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.html

@@ -3,19 +3,22 @@
 	(click)="applyCustomConfig()"
 	[disabled]="!customConfigItem.isApplicable"
 	[style.color]="customConfigItem | customConfig2ApplicableColor"
+	title="{{ customConfigItem.name }}"
 >
-	<p class="config-name" title="{{ customConfigItem.name }}">
-		<b>{{ customConfigItem.name }}</b>
-	</p>
-	<p class="config-metric"><i class="fa fa-arrows-alt"></i> {{ customConfigItem.metrics.areaMetric }}</p>
-	<p class="config-metric"><i class="fa fa-arrows-v"></i> {{ customConfigItem.metrics.heightMetric }}</p>
-	<p class="config-metric"><i class="fa fa-paint-brush"></i> {{ customConfigItem.metrics.colorMetric }}</p>
-	<p class="config-metric" *ngIf="customConfigItem.metrics.edgeMetric">
-		<i class="fa fa-exchange"></i> {{ customConfigItem.metrics.edgeMetric }}
-	</p>
-	<div class="color-schema-container">
-		<div class="color-swatch-container" *ngFor="let mapColor of customConfigItem | customConfigColorSchemaBySelectionMode">
-			<span class="color-swatch" [style.background-color]="customConfigItem.isApplicable ? mapColor : 'rgb(204, 204, 204)'"></span>
+	<div class="config-metric-list">
+		<p class="config-metric"><i class="fa fa-arrows-alt"></i> {{ customConfigItem.metrics.areaMetric }}</p>
+		<p class="config-metric"><i class="fa fa-arrows-v"></i> {{ customConfigItem.metrics.heightMetric }}</p>
+		<p class="config-metric"><i class="fa fa-paint-brush"></i> {{ customConfigItem.metrics.colorMetric }}</p>
+		<p class="config-metric" *ngIf="customConfigItem.metrics.edgeMetric">
+			<i class="fa fa-exchange"></i> {{ customConfigItem.metrics.edgeMetric }}
+		</p>
+		<div class="color-schema-container">
+			<div class="color-swatch-container" *ngFor="let mapColor of customConfigItem | customConfigColorSchemaBySelectionMode">
+				<span
+					class="color-swatch"
+					[style.background-color]="customConfigItem.isApplicable ? mapColor : 'rgb(204, 204, 204)'"
+				></span>
+			</div>
 		</div>
 	</div>
 </button>

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.scss

@@ -4,30 +4,34 @@ cc-apply-custom-config-button {
 
 	button {
 		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
-		display: flex;
-		flex: 1;
-		gap: 10px;
+		width: 100%;
+		margin: 0;
 
 		&:disabled {
 			cursor: default;
 		}
 
+		.config-metric-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+
 		p {
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
 			font-size: 15px;
-			margin: 5px 0;
+			margin: 0;
 			text-align: left;
 
 			&.config-name {
-				flex: 0 0 22em;
+				flex: 1 1 auto;
+				width: 100%;
 			}
 
 			&.config-metric {
-				flex: 0 0 8em;
+				flex: 0 0 9em;
 			}
 		}
 

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

@@ -1,5 +1,4 @@
-import "./applyCustomConfigButton.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { CustomConfigItem } from "../../../customConfigs.component"
 import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
 import { Store } from "../../../../../state/angular-redux/store"
@@ -8,15 +7,17 @@ import { ThreeOrbitControlsService } from "../../../../codeMap/threeViewer/three
 
 @Component({
 	selector: "cc-apply-custom-config-button",
-	template: require("./applyCustomConfigButton.component.html")
+	templateUrl: "./applyCustomConfigButton.component.html",
+	styleUrls: ["./applyCustomConfigButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ApplyCustomConfigButtonComponent {
 	@Input() customConfigItem: CustomConfigItem
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private store: Store,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {}
 
 	applyCustomConfig() {

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.spec.ts

@@ -8,16 +8,12 @@ import { ThreeCameraService } from "../../../../codeMap/threeViewer/threeCamera.
 import { ThreeOrbitControlsService } from "../../../../codeMap/threeViewer/threeOrbitControls.service"
 import { CUSTOM_CONFIG_ITEM_GROUPS } from "../../../../../util/dataMocks"
 import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
-import { MatDialogRef } from "@angular/material/dialog"
 
 describe("applyCustomConfigButtonComponent", () => {
-	const mockedDialogReference = { close: jest.fn() }
-
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			imports: [CustomConfigsModule],
 			providers: [
-				{ provide: MatDialogRef, useValue: mockedDialogReference },
 				{ provide: ThreeCameraService, useValue: {} },
 				{ provide: ThreeOrbitControlsService, useValue: {} }
 			]
@@ -39,7 +35,6 @@ describe("applyCustomConfigButtonComponent", () => {
 		expect(getComputedStyle(colorSwatchElements[2]).backgroundColor).toBe("rgb(130, 14, 14)")
 		expect(getComputedStyle(colorSwatchElements[3]).backgroundColor).toBe("rgb(235, 131, 25)")
 
-		expect(screen.getByText("SampleMap View #1")).not.toBeNull()
 		expect(screen.getByText("rloc")).not.toBeNull()
 		expect(screen.getByText("mcc")).not.toBeNull()
 		expect(screen.getByText("functions")).not.toBeNull()
@@ -63,7 +58,6 @@ describe("applyCustomConfigButtonComponent", () => {
 		const applyCustomConfigButton = screen.getByRole("button") as HTMLButtonElement
 
 		expect(getComputedStyle(applyCustomConfigButton).color).toBe("rgb(204, 204, 204)")
-		expect(screen.getByText("SampleMap View #1")).not.toBeNull()
 		expect(screen.getByText("rloc")).not.toBeNull()
 		expect(screen.getByText("mcc")).not.toBeNull()
 		expect(screen.getByText("functions")).not.toBeNull()

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

@@ -5,17 +5,34 @@
 	*ngFor="let customConfigItemGroup of customConfigItemGroups | keyvalue"
 >
 	<mat-expansion-panel-header>
-		<mat-panel-title>
+		<mat-panel-title class="custom-config-item-group-title">
 			Custom View(s) in
-			<span class="highlight-mode"> {{ customConfigItemGroup.value.mapSelectionMode | titlecase }} </span>
+			<strong> {{ customConfigItemGroup.value.mapSelectionMode | titlecase }} </strong>
 			mode for
 			{{ customConfigItemGroup.value.mapNames }}
 		</mat-panel-title>
 	</mat-expansion-panel-header>
 	<mat-list *ngFor="let customConfig of customConfigItemGroup.value.customConfigItems">
 		<mat-list-item title="{{ customConfig | customConfig2ApplicableMessage }}">
-			<cc-apply-custom-config-button [customConfigItem]="customConfig"></cc-apply-custom-config-button>
-			<div>
+			<div class="metrics-box">
+				<p class="config-item-name" title="{{ customConfig.name }}">
+					<strong>
+						<span (click)="applyCustomConfig(customConfig.id)" mat-dialog-close>
+							{{ customConfig.name | truncateText: 75 }}
+						</span>
+					</strong>
+				</p>
+			</div>
+			<div class="custom-config-note">
+				<p class="custom-config-note-content">
+					<span (click)="applyCustomConfig(customConfig.id)" mat-dialog-close>
+						{{ customConfig.note ? (customConfig.note | truncateText: 95) : "Add Note" }}
+					</span>
+				</p>
+				<cc-custom-config-note-dialog-button [customConfigItem]="customConfig"></cc-custom-config-note-dialog-button>
+			</div>
+			<div class="custom-config-action-buttons">
+				<cc-apply-custom-config-button [customConfigItem]="customConfig"></cc-apply-custom-config-button>
 				<button class="remove-button" title="Remove Custom View" (click)="removeCustomConfig(customConfig.id)">
 					<i class="fa fa-trash"></i>
 				</button>

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

@@ -0,0 +1,38 @@
+@use "../../../../../material/theme";
+
+cc-custom-config-item-group {
+	.custom-config-item-group-title {
+		color: theme.$cc-font-color;
+		display: inline-block;
+	}
+
+	div {
+		.metrics-box {
+			margin-top: 10px;
+		}
+
+		.custom-config-note {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			margin-top: 5px;
+		}
+
+		.custom-config-action-buttons {
+			display: flex;
+			align-items: center;
+			margin-bottom: 5px;
+		}
+	}
+
+	p {
+		font-size: 15px;
+		margin: 0;
+		white-space: pre-line;
+
+		&.custom-config-note-content {
+			margin-right: 7px;
+			font-size: 13px;
+		}
+	}
+}

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/customConfigItemGroup/getMissingCustomConfigModeAndMaps.spec.ts

@@ -2,14 +2,13 @@ import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeA
 import { CustomConfigMapSelectionMode } from "../../../../model/customConfig/customConfig.api.model"
 import { CustomConfigItem } from "../../customConfigs.component"
 import { Store as PlainStore } from "../../../../state/store/store"
-import { mocked } from "ts-jest/utils"
 import { expect } from "@jest/globals"
 import { visibleFilesBySelectionModeSelector } from "../../visibleFilesBySelectionMode.selector"
 
 jest.mock("../../visibleFilesBySelectionMode.selector", () => ({
 	visibleFilesBySelectionModeSelector: jest.fn()
 }))
-const mockedVisibleFilesBySelectionModeSelector = mocked(visibleFilesBySelectionModeSelector)
+const mockedVisibleFilesBySelectionModeSelector = jest.mocked(visibleFilesBySelectionModeSelector)
 
 describe("getMissingCustomConfigModeAndMaps", () => {
 	const customConfigItem = {

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>