Refactor/2734/migrate custom configs list

visualization/app/app.module.ts

@@ -23,12 +23,15 @@ import { UnfocusNodesOnLoadingMapEffect } from "./codeCharta/state/effects/unfoc
 import { TrackEventUsageDataEffect } from "./codeCharta/state/effects/trackEventUsageData/trackEventUsageData.effect"
 import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "./codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
 import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
-import { threeSceneServiceProvider, codeChartaServiceProvider } from "./codeCharta/services/ajs-upgraded-providers"
+import {
+	threeSceneServiceProvider,
+	codeChartaServiceProvider,
+	threeOrbitControlsServiceProvider,
+	threeCameraServiceProvider
+} from "./codeCharta/services/ajs-upgraded-providers"
 import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module"
 import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
 import { InvertAreaOptionComponent } from "./codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component"
-import { AddCustomConfigButtonComponent } from "./codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.component"
-import { AddCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.module"
 import { RemoveFileButtonComponent } from "./codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component"
 import { FocusButtonsComponent } from "./codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component"
 import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuilding.service"
@@ -40,14 +43,13 @@ import { BlacklistSearchPatternEffect } from "./codeCharta/ui/searchPanel/search
 import { EdgeMetricToggleComponent } from "./codeCharta/ui/edgeSettingsPanel/edgeMetricToggle/edgeMetricToggle.component"
 import { SearchPanelComponent } from "./codeCharta/ui/searchPanel/searchPanel.component"
 import { SearchPanelModule } from "./codeCharta/ui/searchPanel/searchPanel.module"
-import { DownloadCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigButton.module"
 import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricValueHovered/metricValueHovered.module"
-import { UploadCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.module"
 import { UploadFilesButtonComponent } from "./codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component"
 import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooser/metricTypeHovered/metricTypeHovered.module"
 import { SliderModule } from "./codeCharta/ui/slider/slider.module"
 import { HeightSettingsPanelModule } from "./codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.module"
 import { ResetSettingsButtonModule } from "./codeCharta/ui/resetSettingsButton/resetSettingsButton.module"
+import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs.module"
 
 @NgModule({
 	imports: [
@@ -68,19 +70,23 @@ import { ResetSettingsButtonModule } from "./codeCharta/ui/resetSettingsButton/r
 		LegendPanelModule,
 		ColorPickerForMapColorModule,
 		NodeContextMenuCardModule,
-		AddCustomConfigButtonModule,
 		ReactiveFormsModule,
 		LoadingFileProgressSpinnerModule,
 		LoadingMapProgressSpinnerModule,
 		SearchPanelModule,
 		MetricTypeHoveredModule,
-		DownloadCustomConfigButtonModule,
 		MetricValueHoveredModule,
-		UploadCustomConfigButtonModule,
+		CustomConfigsModule,
 		HeightSettingsPanelModule,
 		ResetSettingsButtonModule
 	],
-	providers: [threeSceneServiceProvider, codeChartaServiceProvider, IdToBuildingService],
+	providers: [
+		threeSceneServiceProvider,
+		codeChartaServiceProvider,
+		IdToBuildingService,
+		threeCameraServiceProvider,
+		threeOrbitControlsServiceProvider
+	],
 	declarations: [
 		FilePanelFileSelectorComponent,
 		FilePanelStateButtonsComponent,
@@ -101,7 +107,6 @@ import { ResetSettingsButtonModule } from "./codeCharta/ui/resetSettingsButton/r
 		FilePanelStateButtonsComponent,
 		FilePanelDeltaSelectorComponent,
 		InvertAreaOptionComponent,
-		AddCustomConfigButtonComponent,
 		FocusButtonsComponent,
 		RemoveFileButtonComponent,
 		LoadingFileProgressSpinnerComponent,

visualization/app/codeCharta/services/ajs-upgraded-providers.ts

@@ -17,3 +17,21 @@ export const codeChartaServiceProvider = {
 	},
 	deps: ["$injector"]
 }
+
+export const ThreeCameraServiceToken = new InjectionToken("ThreeCameraService")
+export const threeCameraServiceProvider = {
+	provide: ThreeCameraServiceToken,
+	useFactory: function ThreeCameraServiceFactory(injector: Injector) {
+		return injector.get("threeCameraService")
+	},
+	deps: ["$injector"]
+}
+
+export const ThreeOrbitControlsServiceToken = new InjectionToken("ThreeOrbitControlsService")
+export const threeOrbitControlsServiceProvider = {
+	provide: ThreeOrbitControlsServiceToken,
+	useFactory: function ThreeOrbitControlsServiceFactory(injector: Injector) {
+		return injector.get("threeOrbitControlsService")
+	},
+	deps: ["$injector"]
+}

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

@@ -0,0 +1,23 @@
+import { combineLatest, map } from "rxjs"
+import { visibleFileStatesSelector } from "../../state/selectors/visibleFileStates.selector"
+import { CustomConfigHelper } from "../../util/customConfigHelper"
+import { getDownloadableCustomConfigs } from "./downloadCustomConfigsButton/getDownloadableCustomConfigs"
+import { Inject, Injectable } from "@angular/core"
+import { Store } from "../../state/angular-redux/store"
+import { getCustomConfigItemGroups } from "./customConfigList/getCustomConfigItemGroups"
+import { fileMapCheckSumsSelector } from "./customConfigList/fileMapCheckSums.selector"
+
+@Injectable()
+export class CustomConfigHelperService {
+	readonly downloadableCustomConfigs$ = combineLatest([
+		this.store.select(visibleFileStatesSelector),
+		CustomConfigHelper.customConfigChange$
+	]).pipe(map(([visibleFileStates]) => getDownloadableCustomConfigs(visibleFileStates)))
+
+	readonly customConfigItemGroups$ = combineLatest([
+		this.store.select(fileMapCheckSumsSelector),
+		CustomConfigHelper.customConfigChange$
+	]).pipe(map(([fileMapCheckSumsByMapSelectionMode]) => getCustomConfigItemGroups(fileMapCheckSumsByMapSelectionMode)))
+
+	constructor(@Inject(Store) private store: Store) {}
+}

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

@@ -0,0 +1,26 @@
+<mat-expansion-panel *ngFor="let customConfigItemGroup of customConfigItemGroups | keyvalue">
+	<mat-expansion-panel-header>
+		<mat-panel-title>
+			Custom View(s) in
+			<span class="highlight-mode"> {{ customConfigItemGroup.value.mapSelectionMode | lowercase }} </span>
+			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.isApplicable
+					? 'Apply Custom Config'
+					: 'This one is applicable for map(s) ' + customConfig.mapNames + ' in ' + customConfig.mapSelectionMode + ' mode only.'
+			}}"
+		>
+			<button mat-dialog-close [disabled]="!customConfig.isApplicable" (click)="applyCustomConfig(customConfig.id)">
+				{{ customConfig.name }}
+			</button>
+			<button class="remove-button" title="Remove Custom Config" (click)="removeCustomConfig(customConfig.id)">
+				<i class="fa fa-minus-square"></i>
+			</button>
+		</mat-list-item>
+	</mat-list>
+</mat-expansion-panel>

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

@@ -0,0 +1,57 @@
+import { TestBed } from "@angular/core/testing"
+import { CustomConfigsModule } from "../customConfigs.module"
+import { MatDialog, MatDialogRef } from "@angular/material/dialog"
+import { ThreeCameraServiceToken, ThreeOrbitControlsServiceToken } from "../../../services/ajs-upgraded-providers"
+import { fireEvent, render, screen } from "@testing-library/angular"
+import { CustomConfigItemGroupComponent } from "./customConfigItemGroup.component"
+import { CUSTOM_CONFIG_ITEM_GROUPS } from "../../../util/dataMocks"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+
+describe("customConfigItemGroupComponent", () => {
+	let mockedDialog = { open: jest.fn() }
+	let mockedDialogReference = { close: jest.fn() }
+
+	beforeEach(() => {
+		mockedDialog = { open: jest.fn() }
+		mockedDialogReference = { close: jest.fn() }
+
+		TestBed.configureTestingModule({
+			imports: [CustomConfigsModule],
+			providers: [
+				{ provide: MatDialogRef, useValue: mockedDialogReference },
+				{ provide: MatDialog, useValue: mockedDialog },
+				{ provide: ThreeCameraServiceToken, useValue: {} },
+				{ provide: ThreeOrbitControlsServiceToken, useValue: {} }
+			]
+		})
+	})
+
+	it("should apply a custom Config and close custom config dialog", async () => {
+		CustomConfigHelper.applyCustomConfig = jest.fn()
+		const customConfigItemGroups = new Map([["fileAfileBMultiple", CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple")]])
+		await render(CustomConfigItemGroupComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItemGroups }
+		})
+
+		fireEvent.click(screen.getByText("SampleMap View #1"))
+
+		expect(CustomConfigHelper.applyCustomConfig).toHaveBeenCalledTimes(1)
+		expect(mockedDialogReference.close).toHaveBeenCalledTimes(1)
+	})
+
+	it("should remove a custom Config and not close custom config dialog", async () => {
+		CustomConfigHelper.deleteCustomConfig = jest.fn()
+		const customConfigItemGroups = new Map([["fileAfileBMultiple", CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple")]])
+		await render(CustomConfigItemGroupComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItemGroups }
+		})
+
+		fireEvent.click(screen.getAllByTitle("Remove Custom Config")[0])
+
+		expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledTimes(1)
+		expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith("MULTIPLEfileCSampleMap View #1")
+		expect(mockedDialogReference.close).toHaveBeenCalledTimes(0)
+	})
+})

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

@@ -0,0 +1,30 @@
+import { Component, Inject, Input } from "@angular/core"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+import { CustomConfigItemGroup } from "../customConfigs.component"
+import { Store } from "../../../state/angular-redux/store"
+import { ThreeCameraServiceToken, ThreeOrbitControlsServiceToken } from "../../../services/ajs-upgraded-providers"
+import { ThreeCameraService } from "../../codeMap/threeViewer/threeCameraService"
+import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControlsService"
+
+@Component({
+	selector: "cc-custom-config-item-group",
+	template: require("./customConfigItemGroup.component.html")
+})
+export class CustomConfigItemGroupComponent {
+	@Input() customConfigItemGroups: Map<string, CustomConfigItemGroup>
+	isCollapsed = false
+
+	constructor(
+		@Inject(Store) private store: Store,
+		@Inject(ThreeCameraServiceToken) private threeCameraService: ThreeCameraService,
+		@Inject(ThreeOrbitControlsServiceToken) private threeOrbitControlsService: ThreeOrbitControlsService
+	) {}
+
+	applyCustomConfig(configId: string) {
+		CustomConfigHelper.applyCustomConfig(configId, this.store, this.threeCameraService, this.threeOrbitControlsService)
+	}
+
+	removeCustomConfig(configId: string) {
+		CustomConfigHelper.deleteCustomConfig(configId)
+	}
+}

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

@@ -0,0 +1,37 @@
+<mat-dialog-content class="content">
+	<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>
+	<mat-divider></mat-divider>
+	<div
+		class="no-custom-configs-box"
+		*ngIf="dropDownCustomConfigItemGroups.applicableItems.size === 0 && dropDownCustomConfigItemGroups.nonApplicableItems.size === 0"
+	>
+		<span>It is time to add your first Custom View!</span>
+	</div>
+	<mat-accordion class="custom-config-container" [multi]="true">
+		<cc-custom-config-item-group
+			[customConfigItemGroups]="dropDownCustomConfigItemGroups.applicableItems"
+		></cc-custom-config-item-group>
+		<cc-custom-config-item-group
+			*ngIf="!isCollapsed"
+			class="non-applicable-group"
+			[customConfigItemGroups]="dropDownCustomConfigItemGroups.nonApplicableItems"
+		></cc-custom-config-item-group>
+		<button
+			class="toggle-non-applicable-configs-button"
+			*ngIf="dropDownCustomConfigItemGroups.nonApplicableItems.size > 0"
+			(click)="toggleNonApplicableCustomConfigsList()"
+		>
+			{{ isCollapsed ? "Show non-applicable Custom Views" : "Hide non-applicable Custom Views" }}
+			<i [ngClass]="isCollapsed ? 'fa fa-angle-down' : 'fa fa-angle-up'"></i>
+		</button>
+	</mat-accordion>
+</mat-dialog-content>