codecharta-visualization 1.119.0 → 1.120.0

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

@@ -1,70 +0,0 @@
-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 { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
-import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrbitControls.service"
-import { VisibleFilesBySelectionMode, visibleFilesBySelectionModeSelector } from "../../visibleFilesBySelectionMode.selector"
-import { CcState } from "../../../../codeCharta.model"
-import { State } from "@ngrx/store"
-
-@Component({
-	templateUrl: "./addCustomConfigDialog.component.html",
-	styleUrls: ["./addCustomDialog.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class AddCustomConfigDialogComponent implements OnInit {
-	customConfigName: UntypedFormControl
-	customConfigNote: string
-
-	constructor(
-		private state: State<CcState>,
-		private threeCameraService: ThreeCameraService,
-		private threeOrbitControlsService: ThreeOrbitControlsService
-	) {}
-
-	ngOnInit(): void {
-		const visibleFilesBySelectionMode = visibleFilesBySelectionModeSelector(this.state.getValue())
-		this.customConfigName = new UntypedFormControl("", [
-			Validators.required,
-			createCustomConfigNameValidator(visibleFilesBySelectionMode)
-		])
-		this.customConfigName.setValue(CustomConfigHelper.getConfigNameSuggestionByFileState(visibleFilesBySelectionMode))
-	}
-
-	getErrorMessage() {
-		if (this.customConfigName.hasError("required")) {
-			return "Please enter a view name."
-		}
-		return this.customConfigName.hasError("Error") ? this.customConfigName.getError("Error") : ""
-	}
-
-	addCustomConfig() {
-		const newCustomConfig = buildCustomConfigFromState(
-			this.customConfigName.value,
-			this.state.getValue(),
-			{
-				camera: this.threeCameraService.camera.position,
-				cameraTarget: this.threeOrbitControlsService.controls.target
-			},
-			this.customConfigNote
-		)
-		CustomConfigHelper.addCustomConfig(newCustomConfig)
-	}
-}
-
-function createCustomConfigNameValidator(visibleFilesBySelectionMode: VisibleFilesBySelectionMode): ValidatorFn {
-	return (control: AbstractControl): { Error: string } => {
-		const desiredConfigName = control.value
-		if (
-			!CustomConfigHelper.hasCustomConfigByName(
-				visibleFilesBySelectionMode.mapSelectionMode,
-				visibleFilesBySelectionMode.assignedMaps,
-				desiredConfigName
-			)
-		) {
-			return null
-		}
-		return { Error: "A Custom View with this name already exists." }
-	}
-}

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

@@ -1,77 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { AddCustomConfigButtonModule } from "../addCustomConfigButton.module"
-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 { Vector3 } from "three"
-import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
-import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrbitControls.service"
-import { MatDialog } from "@angular/material/dialog"
-import { provideMockStore } from "@ngrx/store/testing"
-import { defaultState } from "../../../../state/store/state.manager"
-import { State } from "@ngrx/store"
-
-describe("addCustomConfigDialogComponent", () => {
-	jest.spyOn(CustomConfigHelper, "getConfigNameSuggestionByFileState").mockReturnValue("new custom view name")
-
-	beforeEach(async () => {
-		const mockedDialog = { open: jest.fn() }
-		TestBed.configureTestingModule({
-			imports: [AddCustomConfigButtonModule],
-			providers: [
-				{ provide: MatDialog, useValue: mockedDialog },
-				{ provide: ThreeCameraService, useValue: { camera: { position: new Vector3(0, 300, 1000) } } },
-				{ provide: ThreeOrbitControlsService, useValue: { controls: { target: new Vector3(0, 0, 0) } } },
-				provideMockStore(),
-				{ provide: State, useValue: { getValue: () => defaultState } }
-			]
-		})
-	})
-
-	it("should suggest a valid custom view name and 'add' button is enabled", async () => {
-		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
-
-		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
-		const nameTextField = input[0]
-
-		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.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)
-	})
-
-	it("should show error message when file name already exists and disable 'add' button", async () => {
-		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
-		jest.spyOn(CustomConfigHelper, "hasCustomConfigByName").mockReturnValue(true)
-
-		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,77 +0,0 @@
-@use "../../../../../material/theme";
-
-.cc-add-custom-config-dialog .mat-mdc-dialog-container {
-	padding: 0;
-	width: 500px;
-	overflow: hidden;
-
-	mat-toolbar {
-		&.header {
-			background-color: theme.$cc-primary-color;
-			h2 {
-				color: white;
-			}
-		}
-	}
-
-	.dialog-content {
-		mat-form-field {
-			width: 100%;
-
-			&.custom-config-note {
-				padding-top: 30px;
-			}
-		}
-
-		label {
-			color: rgba(0, 0, 0, 0.54);
-			font-size: 13px;
-		}
-
-		input {
-			margin-top: 12px;
-		}
-	}
-
-	.mat-mdc-dialog-actions {
-		margin: 0;
-		padding: 0 8px;
-		position: relative;
-
-		cc-download-and-purge-configs {
-			text-align: right;
-
-			.exceed-local-storage-message {
-				display: block;
-				text-align: left;
-				padding: 0 16px;
-				color: #b02929;
-			}
-			.exceed-local-storage-button {
-				margin-right: 89px;
-			}
-		}
-
-		.mat-mdc-button {
-			padding: 0 8px;
-			margin: 8px 0 8px 8px;
-
-			&.exceed-local-storage-button {
-				color: #ffffff;
-				background-color: #b02929;
-			}
-
-			&.add-custom-config-button {
-				color: theme.$cc-primary-color;
-				background-color: rgba(138, 132, 132, 0.08);
-				position: absolute;
-				right: 16px;
-				bottom: 0;
-			}
-
-			&.add-custom-config-button[disabled] {
-				color: grey;
-			}
-		}
-	}
-}

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

@@ -1,32 +0,0 @@
-import { CustomConfig, ExportCustomConfig } from "../../../../model/customConfig/customConfig.api.model"
-import { CustomConfigHelper } from "../../../../util/customConfigHelper"
-
-const customConfigAgeLimitInMonths = 6
-
-export function downloadAndCollectPurgeableConfigs() {
-	const purgeableConfigs = new Set<CustomConfig>()
-	const customConfigs = CustomConfigHelper.getCustomConfigs()
-
-	const downloadableConfigs: Map<string, ExportCustomConfig> = new Map()
-	const daysPerMonth = 30
-
-	for (const [key, value] of customConfigs.entries()) {
-		if (value?.creationTime === undefined) {
-			// Fallback, if creationTime property is not present. This can happen because it was released later.
-			value.creationTime = Date.now()
-		}
-
-		// Download e.g. 6 month old or older Configs.
-		const ageInMonth = (Date.now() - value.creationTime) / (1000 * 60 * 60 * 24 * daysPerMonth)
-		if (ageInMonth >= customConfigAgeLimitInMonths) {
-			downloadableConfigs.set(key, CustomConfigHelper.createExportCustomConfigFromConfig(value))
-			purgeableConfigs.add(value)
-		}
-	}
-
-	if (downloadableConfigs.size > 0) {
-		CustomConfigHelper.downloadCustomConfigs(downloadableConfigs)
-	}
-
-	return purgeableConfigs
-}

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

@@ -1,11 +0,0 @@
-<ng-container *ngIf="!isLocalStorageSizeValid">
-	<span class="exceed-local-storage-message">Do you want to download and then purge old unused Configs to make space for new ones?</span>
-	<button
-		mat-button
-		class="exceed-local-storage-button"
-		(click)="showPurgeConfirmDialog()"
-		title="Download old unused Custom Views as a backup file and then delete them in the browser."
-	>
-		DOWNLOAD & PURGE...
-	</button>
-</ng-container>

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

@@ -1,49 +0,0 @@
-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"
-import { MatDialog } from "@angular/material/dialog"
-import { validateLocalStorageSize } from "../validateLocalStorageSize"
-import { downloadAndCollectPurgeableConfigs } from "../downloadAndCollectPurgeableConfigs"
-
-@Component({
-	selector: "cc-download-and-purge-configs",
-	templateUrl: "./downloadAndPurgeConfigs.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class DownloadAndPurgeConfigsComponent implements OnInit {
-	isLocalStorageSizeValid = true
-
-	constructor(private dialog: MatDialog) {}
-
-	ngOnInit(): void {
-		this.isLocalStorageSizeValid = validateLocalStorageSize()
-	}
-
-	showPurgeConfirmDialog() {
-		const purgeableConfigs = downloadAndCollectPurgeableConfigs()
-		if (purgeableConfigs.size === 0) {
-			this.dialog.open(ErrorDialogComponent, {
-				data: {
-					title: "Download Error",
-					message: "Could not download and purge old configs automatically! Please try it by yourself."
-				}
-			})
-			return
-		}
-
-		const dialogReference = this.dialog.open(ConfirmationDialogComponent, {
-			panelClass: "cc-confirmation-dialog",
-			data: {
-				title: "Confirm to purge old Configs",
-				message: "Are you sure to delete old Configs now?"
-			}
-		})
-
-		dialogReference.afterClosed().subscribe(confirmation => {
-			if (confirmation) {
-				CustomConfigHelper.deleteCustomConfigs([...purgeableConfigs])
-			}
-		})
-	}
-}

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

@@ -1,90 +0,0 @@
-import { validateLocalStorageSize } from "../validateLocalStorageSize"
-import { DownloadAndPurgeConfigsComponent } from "./downloadAndPurgeConfigs.component"
-import { render, screen } from "@testing-library/angular"
-import { TestBed } from "@angular/core/testing"
-import { MaterialModule } from "../../../../../../material/material.module"
-import userEvent from "@testing-library/user-event"
-import { ConfirmationDialogComponent } from "../../../../dialogs/confirmationDialog/confirmationDialog.component"
-import { NgModule } from "@angular/core"
-import { ErrorDialogComponent } from "../../../../dialogs/errorDialog/errorDialog.component"
-import { downloadAndCollectPurgeableConfigs } from "../downloadAndCollectPurgeableConfigs"
-import { CustomConfig } from "../../../../../model/customConfig/customConfig.api.model"
-import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
-import { InteractivityChecker } from "@angular/cdk/a11y"
-
-jest.mock("../validateLocalStorageSize", () => ({ validateLocalStorageSize: jest.fn() }))
-const mockedValidateLocalStorageSize = jest.mocked(validateLocalStorageSize)
-
-jest.mock("../downloadAndCollectPurgeableConfigs", () => ({ downloadAndCollectPurgeableConfigs: jest.fn() }))
-const mockedDownloadAndCollectPurgeableOldConfigs = jest.mocked(downloadAndCollectPurgeableConfigs)
-
-describe("downloadAndPurgeConfigsComponent", () => {
-	@NgModule({
-		imports: [MaterialModule],
-		providers: [{ provide: InteractivityChecker, useValue: { isFocusable: () => true, isTabbable: () => true } }],
-		declarations: [ErrorDialogComponent, ConfirmationDialogComponent],
-		entryComponents: [ErrorDialogComponent, ConfirmationDialogComponent]
-	})
-	class TestModule {}
-
-	beforeEach(() => {
-		document.body.innerHTML = ""
-		TestBed.configureTestingModule({
-			imports: [TestModule]
-		})
-	})
-
-	it("should not show 'DOWNLOAD & PURGE' button when local storage size is valid", async () => {
-		mockedValidateLocalStorageSize.mockReturnValue(true)
-		await render(DownloadAndPurgeConfigsComponent)
-
-		expect(screen.queryByText("DOWNLOAD & PURGE...")).toBe(null)
-	})
-
-	it("should show 'DOWNLOAD & PURGE' button when local storage size is invalid", async () => {
-		mockedValidateLocalStorageSize.mockReturnValue(false)
-		await render(DownloadAndPurgeConfigsComponent)
-
-		expect(screen.queryByText("DOWNLOAD & PURGE...")).not.toBeNull()
-	})
-
-	it("should show 'Download Error' dialog when download and purge custom views is not possible", async () => {
-		mockedValidateLocalStorageSize.mockReturnValue(false)
-		mockedDownloadAndCollectPurgeableOldConfigs.mockReturnValue(new Set())
-		await render(DownloadAndPurgeConfigsComponent)
-
-		await userEvent.click(screen.queryByText("DOWNLOAD & PURGE..."))
-
-		expect(screen.queryByText("Download Error")).not.toBeNull()
-	})
-
-	describe("ConfirmationDialogComponent", () => {
-		let spyOnDeleteCustomConfigs
-
-		beforeEach(() => {
-			mockedValidateLocalStorageSize.mockReturnValue(false)
-			mockedDownloadAndCollectPurgeableOldConfigs.mockReturnValue(new Set([{} as CustomConfig]))
-			spyOnDeleteCustomConfigs = jest.spyOn(CustomConfigHelper, "deleteCustomConfigs").mockImplementation(() => undefined)
-		})
-
-		it("should let user abort purging old custom views", async () => {
-			await render(DownloadAndPurgeConfigsComponent)
-
-			await userEvent.click(screen.queryByText("DOWNLOAD & PURGE..."))
-			expect(screen.queryByText("Confirm to purge old Configs")).not.toBeNull()
-			await userEvent.click(screen.queryByText("CANCEL"))
-			expect(screen.queryByText("CANCEL")).toBeNull()
-			expect(spyOnDeleteCustomConfigs).toHaveBeenCalledTimes(0)
-		})
-
-		it("should let user confirm purging old custom views", async () => {
-			await render(DownloadAndPurgeConfigsComponent)
-
-			await userEvent.click(screen.queryByText("DOWNLOAD & PURGE..."))
-			expect(screen.queryByText("Confirm to purge old Configs")).not.toBeNull()
-			await userEvent.click(screen.queryByText("OK"))
-			expect(screen.queryByText("OK")).toBeNull()
-			expect(spyOnDeleteCustomConfigs).toHaveBeenCalledTimes(1)
-		})
-	})
-})

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

@@ -1,16 +0,0 @@
-export const validateLocalStorageSize = () => {
-	const customLocalStorageLimitInKB = 768
-	let allStringsConcatenated = ""
-	for (const [key, value] of Object.entries(localStorage)) {
-		allStringsConcatenated += key + value
-	}
-
-	// It does not exist a limit for the total localStorage size that applies to all browsers.
-	// Usually 2MB - 10MB are available (5MB seems to be very common).
-	// The localStorage size (e.g. 5MB) is assigned per origin.
-	// Multiply localStorage characters by 16 (bits because they are stored in UTF-16).
-	// Add 3KB as it seems there is some default overhead.
-	const localStorageSizeInKB = 3 + (allStringsConcatenated.length * 16) / 8 / 1024
-
-	return localStorageSizeInKB <= customLocalStorageLimitInKB
-}

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

@@ -1,23 +0,0 @@
-import { combineLatest, map } from "rxjs"
-import { CustomConfigHelper } from "../../util/customConfigHelper"
-import { getDownloadableCustomConfigs } from "./downloadCustomConfigsButton/getDownloadableCustomConfigs"
-import { Injectable } from "@angular/core"
-import { getCustomConfigItemGroups } from "./customConfigList/getCustomConfigItemGroups"
-import { visibleFilesBySelectionModeSelector } from "./visibleFilesBySelectionMode.selector"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-
-@Injectable()
-export class CustomConfigHelperService {
-	readonly downloadableCustomConfigs$ = combineLatest([
-		this.store.select(visibleFilesBySelectionModeSelector),
-		CustomConfigHelper.customConfigChange$
-	]).pipe(map(([visibleFilesBySelectionMode]) => getDownloadableCustomConfigs(visibleFilesBySelectionMode)))
-
-	readonly customConfigItemGroups$ = combineLatest([
-		this.store.select(visibleFilesBySelectionModeSelector),
-		CustomConfigHelper.customConfigChange$
-	]).pipe(map(([visibleFilesBySelectionMode]) => getCustomConfigItemGroups(visibleFilesBySelectionMode)))
-
-	constructor(private store: Store<CcState>) {}
-}

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

@@ -1,36 +0,0 @@
-import { CustomConfigItem } from "../../customConfigs.component"
-import { CustomConfigMapSelectionMode } from "../../../../model/customConfig/customConfig.api.model"
-
-import * as getMissingCustomConfigModeAndMaps from "./getMissingCustomConfigModeAndMaps"
-import { CustomConfig2ApplicableColor } from "./customConfig2ApplicableColor.pipe"
-import { CcState } from "../../../../codeCharta.model"
-import { State } from "@ngrx/store"
-
-describe("customConfig2ApplicableColorPipe", () => {
-	const customConfigItem = {
-		assignedMaps: new Map([
-			["checksum1", "file1"],
-			["checksum2", "file2"]
-		]),
-		mapSelectionMode: CustomConfigMapSelectionMode.MULTIPLE
-	} as CustomConfigItem
-	const state = { getValue: jest.fn() } as unknown as State<CcState>
-
-	it("should transform black color", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "",
-			mapNames: []
-		}))
-
-		expect(new CustomConfig2ApplicableColor(state).transform(customConfigItem)).toBe("rgba(0, 0, 0, 0.87)")
-	})
-
-	it("should transform grey color", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "DELTA",
-			mapNames: ["file2"]
-		}))
-
-		expect(new CustomConfig2ApplicableColor(state).transform(customConfigItem)).toBe("rgb(204, 204, 204)")
-	})
-})

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

@@ -1,15 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core"
-import { State } from "@ngrx/store"
-import { CcState } from "../../../../codeCharta.model"
-import { CustomConfigItem } from "../../customConfigs.component"
-import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeAndMaps"
-
-@Pipe({ name: "customConfig2ApplicableColor" })
-export class CustomConfig2ApplicableColor implements PipeTransform {
-	constructor(private state: State<CcState>) {}
-
-	transform(customConfig: CustomConfigItem): string {
-		const { mapSelectionMode, mapNames } = getMissingCustomConfigModeAndMaps(customConfig, this.state.getValue())
-		return mapNames.length > 0 || mapSelectionMode.length > 0 ? "rgb(204, 204, 204)" : "rgba(0, 0, 0, 0.87)"
-	}
-}

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

@@ -1,60 +0,0 @@
-import { CustomConfigItem } from "../../customConfigs.component"
-import { CustomConfigMapSelectionMode } from "../../../../model/customConfig/customConfig.api.model"
-import * as getMissingCustomConfigModeAndMaps from "./getMissingCustomConfigModeAndMaps"
-import { CustomConfig2ApplicableMessage } from "./customConfig2ApplicableMessage.pipe"
-import { defaultState } from "../../../../state/store/state.manager"
-import { State } from "@ngrx/store"
-import { CcState } from "../../../../codeCharta.model"
-
-describe("customConfig2ApplicableMessage", () => {
-	const customConfigItem = {
-		assignedMaps: new Map([
-			["checksum1", "file1"],
-			["checksum2", "file2"]
-		]),
-		mapSelectionMode: CustomConfigMapSelectionMode.MULTIPLE
-	} as CustomConfigItem
-	const state = { getValue: () => defaultState } as State<CcState>
-
-	it("should return 'Apply Custom View' message when there is no map selection mode difference and maps are not missing", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "",
-			mapNames: []
-		}))
-
-		expect(new CustomConfig2ApplicableMessage(state).transform(customConfigItem)).toBe("Apply Custom View")
-	})
-
-	it("should show the map selection mode required to be totally clickable when the mode differs from the custom config", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "DELTA",
-			mapNames: []
-		}))
-
-		expect(new CustomConfig2ApplicableMessage(state).transform(customConfigItem)).toBe(
-			"This view is partially applicable. To complete your view, please switch to the DELTA mode."
-		)
-	})
-
-	it("should show missing maps to be fully clickable if the currently selected maps differ from the custom config", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "",
-			mapNames: ["file1"]
-		}))
-
-		expect(new CustomConfig2ApplicableMessage(state).transform(customConfigItem)).toBe(
-			"To fulfill your view, please select the following map(s): file1."
-		)
-	})
-
-	it("should show the map selection mode and missing maps required for the custom config to be totally clickable if both attributes differ from the config", () => {
-		jest.spyOn(getMissingCustomConfigModeAndMaps, "getMissingCustomConfigModeAndMaps").mockImplementation(() => ({
-			mapSelectionMode: "STANDARD",
-			mapNames: ["file1"]
-		}))
-
-		expect(new CustomConfig2ApplicableMessage(state).transform(customConfigItem)).toBe(
-			"This view is partially applicable. To complete your view, please switch to the STANDARD mode and select the following map(s): file1."
-		)
-	})
-})

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

@@ -1,27 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core"
-import { State } from "@ngrx/store"
-import { CcState } from "../../../../codeCharta.model"
-import { CustomConfigItem } from "../../customConfigs.component"
-import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeAndMaps"
-
-@Pipe({ name: "customConfig2ApplicableMessage" })
-export class CustomConfig2ApplicableMessage implements PipeTransform {
-	constructor(private state: State<CcState>) {}
-
-	transform(customConfig: CustomConfigItem): string {
-		const { mapSelectionMode, mapNames } = getMissingCustomConfigModeAndMaps(customConfig, this.state.getValue())
-
-		if (mapNames.length > 0 && mapSelectionMode.length > 0) {
-			return `This view is partially applicable. To complete your view, please switch to the ${mapSelectionMode} mode and select the following map(s): ${mapNames.join(
-				", "
-			)}.`
-		}
-		if (mapNames.length > 0) {
-			return `To fulfill your view, please select the following map(s): ${mapNames.join(", ")}.`
-		}
-		if (mapSelectionMode.length > 0) {
-			return `This view is partially applicable. To complete your view, please switch to the ${mapSelectionMode} mode.`
-		}
-		return `Apply Custom View`
-	}
-}

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

@@ -1,24 +0,0 @@
-<button
-	mat-dialog-close
-	(click)="applyCustomConfig()"
-	[disabled]="!customConfigItem.isApplicable"
-	[style.color]="customConfigItem | customConfig2ApplicableColor"
-	title="{{ customConfigItem.name }}"
->
-	<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

@@ -1,52 +0,0 @@
-cc-apply-custom-config-button {
-	display: flex;
-	flex: 1;
-
-	button {
-		flex-direction: row;
-		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: 0;
-			text-align: left;
-
-			&.config-name {
-				flex: 1 1 auto;
-				width: 100%;
-			}
-
-			&.config-metric {
-				flex: 0 0 9em;
-			}
-		}
-
-		.color-schema-container {
-			display: flex;
-			align-items: center;
-			gap: 2px;
-
-			.color-swatch-container {
-				.color-swatch {
-					display: inline-block;
-					width: 16px;
-					height: 16px;
-				}
-			}
-		}
-	}
-}