codecharta-visualization 1.114.0 → 1.115.1

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

@@ -1,12 +1,13 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { CopyToClipboardService } from "./copyToClipboard.service"
 
 @Component({
 	selector: "cc-copy-to-clipboard-button",
-	template: require("./copyToClipboardButton.component.html")
+	templateUrl: "./copyToClipboardButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class CopyToClipboardButtonComponent {
-	constructor(@Inject(CopyToClipboardService) private service: CopyToClipboardService) {}
+	constructor(private service: CopyToClipboardService) {}
 
 	async copyNamesToClipBoard() {
 		await navigator.clipboard.writeText(this.service.getClipboardText())

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

@@ -1,13 +1,14 @@
 import { TestBed } from "@angular/core/testing"
 import { AddCustomConfigButtonModule } from "./addCustomConfigButton.module"
-import { fireEvent, render, screen } from "@testing-library/angular"
+import { render, screen } from "@testing-library/angular"
 import { AddCustomConfigButtonComponent } from "./addCustomConfigButton.component"
 import userEvent from "@testing-library/user-event"
-import { waitForElementToBeRemoved } from "@testing-library/dom"
 import { CustomConfigHelper } from "../../../util/customConfigHelper"
 import { Vector3 } from "three"
 import { ThreeCameraService } from "../../codeMap/threeViewer/threeCamera.service"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatDialogHarness } from "@angular/material/dialog/testing"
 
 describe("addCustomConfigButtonComponent", () => {
 	beforeEach(async () => {
@@ -21,18 +22,24 @@ describe("addCustomConfigButtonComponent", () => {
 	})
 
 	it("should let a user save a custom config", async () => {
+		const configName = "myCustomConfig"
+		const configNote = "My Custom Note"
 		const addCustomConfigSpy = jest.spyOn(CustomConfigHelper, "addCustomConfig")
-		await render(AddCustomConfigButtonComponent, { excludeComponentDeclaration: true })
+		const { fixture } = await render(AddCustomConfigButtonComponent, { excludeComponentDeclaration: true })
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		let currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(0)
 
-		const button = screen.getByRole("button")
-		fireEvent.click(button)
+		await userEvent.click(screen.getByRole("button"))
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(1)
 
-		await screen.findByText("Add Custom View")
+		await userEvent.type(screen.getAllByRole("textbox")[0], configName)
+		await userEvent.type(screen.getAllByRole("textbox")[1], configNote)
+		await userEvent.click(screen.getByRole("button", { name: "ADD" }))
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
 
-		await userEvent.type(screen.getByRole("textbox"), "myCustomConfig")
-		fireEvent.click(screen.getByRole("button", { name: "ADD" }))
-
-		await waitForElementToBeRemoved(screen.getByText("Add Custom View"))
+		expect(currentlyOpenedDialogs.length).toBe(0)
 		expect(addCustomConfigSpy).toHaveBeenCalledTimes(1)
 	})
 })

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

@@ -1,13 +1,14 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCustomConfigDialog.component"
 
 @Component({
 	selector: "cc-add-custom-config-button",
-	template: require("./addCustomConfigButton.component.html")
+	templateUrl: "./addCustomConfigButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AddCustomConfigButtonComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	showAddCustomConfigDialog() {
 		this.dialog.open(AddCustomConfigDialogComponent, { panelClass: "cc-add-custom-config-dialog" })

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

@@ -5,11 +5,11 @@ import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCusto
 import { FormsModule, ReactiveFormsModule } from "@angular/forms"
 import { CommonModule } from "@angular/common"
 import { DownloadAndPurgeConfigsComponent } from "./addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component"
+import { CustomConfigNoteDialogButtonModule } from "../customConfigNoteDialogButton/customConfigNoteDialogButton.module"
 
 @NgModule({
-	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule],
+	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule, CustomConfigNoteDialogButtonModule],
 	declarations: [AddCustomConfigButtonComponent, AddCustomConfigDialogComponent, DownloadAndPurgeConfigsComponent],
-	exports: [AddCustomConfigButtonComponent],
-	entryComponents: [AddCustomConfigDialogComponent]
+	exports: [AddCustomConfigButtonComponent]
 })
 export class AddCustomConfigButtonModule {}

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="header">
+<mat-toolbar class="header" xmlns="http://www.w3.org/1999/html">
 	<h2>Add Custom View</h2>
 </mat-toolbar>
 
@@ -7,9 +7,21 @@
 		<mat-form-field>
 			<label>Save individual configurations for your map.</label>
 			<input matInput class="custom-config-input" [formControl]="customConfigName" required />
-			<mat-hint align="start">View Name</mat-hint>
+			<mat-hint align="start">Config View Name</mat-hint>
 			<mat-error *ngIf="customConfigName.invalid">{{ getErrorMessage() }}</mat-error>
 		</mat-form-field>
+		<mat-form-field class="custom-config-note">
+			<label>Provide custom note for configuration (optional)</label>
+			<textarea
+				cdkAutosizeMinRows="8"
+				cdkTextareaAutosize
+				matInput
+				class="custom-config-input"
+				[(ngModel)]="customConfigNote"
+				required
+			></textarea>
+			<mat-hint align="start">Config Note</mat-hint>
+		</mat-form-field>
 	</div>
 </mat-dialog-content>
 

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

@@ -1,6 +1,5 @@
-import "./addCustomDialog.component.scss"
-import { Component, Inject, OnInit } from "@angular/core"
-import { FormControl, Validators, AbstractControl, ValidatorFn } from "@angular/forms"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { UntypedFormControl, Validators, AbstractControl, ValidatorFn } from "@angular/forms"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import { buildCustomConfigFromState } from "../../../../util/customConfigBuilder"
 import { State } from "../../../../state/angular-redux/state"
@@ -9,20 +8,26 @@ import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrb
 import { VisibleFilesBySelectionMode, visibleFilesBySelectionModeSelector } from "../../visibleFilesBySelectionMode.selector"
 
 @Component({
-	template: require("./addCustomConfigDialog.component.html")
+	templateUrl: "./addCustomConfigDialog.component.html",
+	styleUrls: ["./addCustomDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AddCustomConfigDialogComponent implements OnInit {
-	customConfigName: FormControl
+	customConfigName: UntypedFormControl
+	customConfigNote: string
 
 	constructor(
-		@Inject(State) private state: State,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private state: State,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {}
 
 	ngOnInit(): void {
 		const visibleFilesBySelectionMode = visibleFilesBySelectionModeSelector(this.state.getValue())
-		this.customConfigName = new FormControl("", [Validators.required, createCustomConfigNameValidator(visibleFilesBySelectionMode)])
+		this.customConfigName = new UntypedFormControl("", [
+			Validators.required,
+			createCustomConfigNameValidator(visibleFilesBySelectionMode)
+		])
 		this.customConfigName.setValue(CustomConfigHelper.getConfigNameSuggestionByFileState(visibleFilesBySelectionMode))
 	}
 
@@ -34,10 +39,15 @@ export class AddCustomConfigDialogComponent implements OnInit {
 	}
 
 	addCustomConfig() {
-		const newCustomConfig = buildCustomConfigFromState(this.customConfigName.value, this.state.getValue(), {
-			camera: this.threeCameraService.camera.position,
-			cameraTarget: this.threeOrbitControlsService.controls.target
-		})
+		const newCustomConfig = buildCustomConfigFromState(
+			this.customConfigName.value,
+			this.state.getValue(),
+			{
+				camera: this.threeCameraService.camera.position,
+				cameraTarget: this.threeOrbitControlsService.controls.target
+			},
+			this.customConfigNote
+		)
 		CustomConfigHelper.addCustomConfig(newCustomConfig)
 	}
 }

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.spec.ts

@@ -4,10 +4,10 @@ import { render, screen } from "@testing-library/angular"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog.component"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import userEvent from "@testing-library/user-event"
-import { MatDialog } from "@angular/material/dialog"
 import { Vector3 } from "three"
 import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
 import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrbitControls.service"
+import { MatDialog } from "@angular/material/dialog"
 
 describe("addCustomConfigDialogComponent", () => {
 	jest.spyOn(CustomConfigHelper, "getConfigNameSuggestionByFileState").mockReturnValue("new custom view name")
@@ -27,18 +27,30 @@ describe("addCustomConfigDialogComponent", () => {
 	it("should suggest a valid custom view name and 'add' button is enabled", async () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
 
-		expect(input.value).toBe("new custom view name")
+		expect(nameTextField.value).toBe("new custom view name")
+		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(false)
+	})
+
+	it("should show an empty comment text field, with optional entry", async () => {
+		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
+
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const commentTextField = input[1]
+
+		expect(commentTextField.value).toBe("")
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(false)
 	})
 
 	it("should show error message when input field is empty and disable 'add' button", async () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
-		await userEvent.clear(input)
-		input.blur()
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
+		await userEvent.clear(nameTextField)
+		nameTextField.blur()
 
 		expect(await screen.findByText("Please enter a view name.")).not.toBeNull()
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true)
@@ -48,9 +60,11 @@ describe("addCustomConfigDialogComponent", () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 		jest.spyOn(CustomConfigHelper, "hasCustomConfigByName").mockReturnValue(true)
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
-		await userEvent.type(input, "file name already exists")
-		input.blur()
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
+
+		await userEvent.type(nameTextField, "file name already exists")
+		nameTextField.blur()
 
 		expect(await screen.findByText("A Custom View with this name already exists.")).not.toBeNull()
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true)

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomDialog.component.scss

@@ -1,6 +1,6 @@
 @use "../../../../../material/theme";
 
-.cc-add-custom-config-dialog .mat-dialog-container {
+.cc-add-custom-config-dialog .mat-mdc-dialog-container {
 	padding: 0;
 	width: 500px;
 	overflow: hidden;
@@ -15,11 +15,12 @@
 	}
 
 	.dialog-content {
-		padding: 0 24px;
-		margin: 10px 0;
-
 		mat-form-field {
 			width: 100%;
+
+			&.custom-config-note {
+				padding-top: 30px;
+			}
 		}
 
 		label {
@@ -32,7 +33,7 @@
 		}
 	}
 
-	.mat-dialog-actions {
+	.mat-mdc-dialog-actions {
 		margin: 0;
 		padding: 0 8px;
 		position: relative;
@@ -51,7 +52,7 @@
 			}
 		}
 
-		.mat-button {
+		.mat-mdc-button {
 			padding: 0 8px;
 			margin: 8px 0 8px 8px;
 

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { ErrorDialogComponent } from "../../../../dialogs/errorDialog/errorDialog.component"
 import { ConfirmationDialogComponent } from "../../../../dialogs/confirmationDialog/confirmationDialog.component"
 import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
@@ -7,13 +7,14 @@ import { validateLocalStorageSize } from "../validateLocalStorageSize"
 import { downloadAndCollectPurgeableConfigs } from "../downloadAndCollectPurgeableConfigs"
 
 @Component({
-	template: require("./downloadAndPurgeConfigs.component.html"),
-	selector: "cc-download-and-purge-configs"
+	selector: "cc-download-and-purge-configs",
+	templateUrl: "./downloadAndPurgeConfigs.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadAndPurgeConfigsComponent implements OnInit {
 	isLocalStorageSizeValid = true
 
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	ngOnInit(): void {
 		this.isLocalStorageSizeValid = validateLocalStorageSize()

package/app/codeCharta/ui/customConfigs/customConfigHelper.service.ts

@@ -1,7 +1,7 @@
 import { combineLatest, map } from "rxjs"
 import { CustomConfigHelper } from "../../util/customConfigHelper"
 import { getDownloadableCustomConfigs } from "./downloadCustomConfigsButton/getDownloadableCustomConfigs"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { getCustomConfigItemGroups } from "./customConfigList/getCustomConfigItemGroups"
 import { visibleFilesBySelectionModeSelector } from "./visibleFilesBySelectionMode.selector"
@@ -18,5 +18,5 @@ export class CustomConfigHelperService {
 		CustomConfigHelper.customConfigChange$
 	]).pipe(map(([visibleFilesBySelectionMode]) => getCustomConfigItemGroups(visibleFilesBySelectionMode)))
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

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

@@ -1,11 +1,11 @@
-import { Inject, Pipe, PipeTransform } from "@angular/core"
+import { Pipe, PipeTransform } from "@angular/core"
 import { State } from "../../../../state/angular-redux/state"
 import { CustomConfigItem } from "../../customConfigs.component"
 import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeAndMaps"
 
 @Pipe({ name: "customConfig2ApplicableColor" })
 export class CustomConfig2ApplicableColor 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/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;
+		}
+	}
+}