codecharta-visualization 1.86.0 → 1.89.0

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.html

@@ -1,12 +1,4 @@
-<div class="small-action-button transparent">
-	<button mat-button [matMenuTriggerFor]="menu" title="Select attribute type" class="menu-button">
-		<span class="symbol">{{ metricName | aggregationSymbolPipe: (getAttributeTypeOfNodesByMetric$ | async) }}</span>
-	</button>
-</div>
-
-<mat-menu #menu>
-	<div class="menu-header" mat-menu-item disabled>Set global aggregation for rloc</div>
-	<mat-divider></mat-divider>
-	<button mat-menu-item (click)="setToAbsolute()">Σ Sum</button>
-	<button mat-menu-item (click)="setToRelative()">x͂ Median</button>
-</mat-menu>
+<mat-button-toggle-group [value]="metricName | aggregationTypePipe: (getAttributeTypeOfNodesByMetric$ | async)">
+	<mat-button-toggle title="Select Sum" (click)="setToAbsolute()" value="sum">Σ</mat-button-toggle>
+	<mat-button-toggle title="Select Median" (click)="setToRelative()" value="median">x͂</mat-button-toggle>
+</mat-button-toggle-group>

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss

@@ -1,25 +1,16 @@
 cc-attribute-type-selector {
-	display: inline-block;
-	background-color: white;
-	border-radius: 12px;
-
-	.menu-button {
-		height: 24px;
-		width: 24px;
-		min-width: 0;
-		padding: 0;
-		border-radius: 12px;
-		vertical-align: top;
-		transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+	.mat-button-toggle-group {
+		height: 18px;
+		align-items: center;
+		justify-content: space-evenly;
+	}
 
-		&:hover {
-			background-color: #c8c8c8;
-		}
+	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+		padding: 0 7px 0 7px;
+	}
 
-		.symbol {
-			position: absolute;
-			top: -5px;
-			left: 8px;
-		}
+	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
+	.mat-button-toggle-group-appearance-standard {
+		border: 0.1px solid darkgrey;
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from "@angular/core/testing"
-import { render, screen, fireEvent, waitForElementToBeRemoved } from "@testing-library/angular"
+import { render, screen, fireEvent } from "@testing-library/angular"
 
 import { AttributeTypeSelectorModule } from "./attributeTypeSelector.module"
 import { Store } from "../../../state/store/store"
@@ -27,20 +27,12 @@ describe("attributeTypeSelector", () => {
 			excludeComponentDeclaration: true
 		})
 
-		const initialDisplayedElement = await screen.findByText("Σ")
-		expect(initialDisplayedElement).toBeTruthy()
+		const initialDisplayedElement = await screen.getByRole("button", { pressed: true })
+		expect(initialDisplayedElement.textContent).toBe("Σ")
 
-		fireEvent.click(initialDisplayedElement)
-		const medianMenuItem = await screen.findByText("x͂ Median")
-		expect(medianMenuItem).toBeTruthy()
-
-		fireEvent.click(medianMenuItem)
-		await waitForElementToBeRemoved(() => {
-			const medianMenuItem = screen.queryByText("x͂ Median")
-			return medianMenuItem
-		})
-		const updatedDisplayedElement = await screen.findByText("x͂")
-		expect(updatedDisplayedElement).toBeTruthy()
+		fireEvent.click(screen.getByText("x͂"))
+		const medianMenuItem = await screen.getByRole("button", { pressed: true })
+		expect(medianMenuItem.textContent).toBe("x͂")
 	})
 
 	it("should set aggregation symbol to absolute if attributeType is not available", async () => {
@@ -48,6 +40,7 @@ describe("attributeTypeSelector", () => {
 			componentProperties: { metricName: "non-existing" },
 			excludeComponentDeclaration: true
 		})
-		expect(await screen.findByText("Σ")).toBeTruthy()
+		const initialDisplayedElement = await screen.getByRole("button", { pressed: true })
+		expect(initialDisplayedElement.textContent).toBe("Σ")
 	})
 })

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.module.ts

@@ -3,11 +3,11 @@ import { CommonModule } from "@angular/common"
 
 import { AttributeTypeSelectorComponent } from "./attributeTypeSelector.component"
 import { MaterialModule } from "../../../../material/material.module"
-import { AggregationSymbolPipe } from "./aggregationSymbol.pipe"
+import { AggregationTypePipePipe } from "./aggregationType.pipe"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule],
-	declarations: [AttributeTypeSelectorComponent, AggregationSymbolPipe],
+	declarations: [AttributeTypeSelectorComponent, AggregationTypePipePipe],
 	exports: [AttributeTypeSelectorComponent]
 })
 export class AttributeTypeSelectorModule {}

package/app/codeCharta/ui/codeMap/__snapshots__/codeMap.arrow.service.spec.ts.snap

@@ -149,8 +149,8 @@ CodeMapBuilding {
   },
   "_color": "#EB8319",
   "_defaultColor": "#ddcc00",
-  "_defaultDeltaColor": "#000000",
-  "_deltaColor": "#000000",
+  "_defaultDeltaColor": "#EB8319",
+  "_deltaColor": "#EB8319",
   "_id": 1,
   "_node": Object {
     "attributes": Object {

package/app/codeCharta/ui/codeMap/codeMap.actions.service.ts

@@ -1,8 +1,6 @@
-import { CodeMapNode, EdgeVisibility, MarkedPackage } from "../../codeCharta.model"
+import { EdgeVisibility } from "../../codeCharta.model"
 import { StoreService } from "../../state/store.service"
 import { setEdges } from "../../state/store/fileSettings/edges/edges.actions"
-import { unmarkPackage, setMarkedPackages } from "../../state/store/fileSettings/markedPackages/markedPackages.actions"
-import { addMarkedPackage } from "../../state/store/fileSettings/markedPackages/util/addMarkedPackage"
 import { EdgeMetricDataService } from "../../state/store/metricData/edgeMetricData/edgeMetricData.service"
 
 export class CodeMapActionsService {
@@ -10,26 +8,6 @@ export class CodeMapActionsService {
 		"ngInject"
 	}
 
-	markFolder({ path }: { path?: string }, color: string) {
-		const { markedPackages } = this.storeService.getState().fileSettings
-		const markedPackagesMap = new Map(markedPackages.map(entry => [entry.path, entry]))
-		addMarkedPackage(markedPackagesMap, { path, color })
-
-		this.storeService.dispatch(setMarkedPackages([...markedPackagesMap.values()]))
-	}
-
-	unmarkFolder(node: CodeMapNode) {
-		let index = this.storeService.getState().fileSettings.markedPackages.findIndex(mp => mp.path === node.path)
-
-		if (index === -1) {
-			index = this.getParentMarkedPackageIndex(node.path)
-		}
-
-		if (index !== -1) {
-			this.storeService.dispatch(unmarkPackage(index))
-		}
-	}
-
 	updateEdgePreviews() {
 		const state = this.storeService.getState()
 		const { edges } = state.fileSettings
@@ -58,21 +36,4 @@ export class CodeMapActionsService {
 
 		this.storeService.dispatch(setEdges(edges))
 	}
-
-	getParentMarkedPackageIndex(path: string) {
-		const markedPackages: MarkedPackage[] = this.storeService.getState().fileSettings.markedPackages
-		let index = -1
-		for (let loopIndex = 0; loopIndex < markedPackages.length; loopIndex++) {
-			const markedPackage = markedPackages[loopIndex]
-			if (
-				path.startsWith(markedPackage.path) &&
-				path !== markedPackage.path &&
-				(index === -1 || markedPackages[index].path.length < markedPackage.path.length)
-			) {
-				index = loopIndex
-			}
-		}
-
-		return index
-	}
 }

package/app/codeCharta/ui/codeMap/codeMap.mouseEvent.service.ts

@@ -18,6 +18,7 @@ import { CodeMapPreRenderService } from "./codeMap.preRender.service"
 import { ThreeViewerService } from "./threeViewer/threeViewerService"
 import { setHoveredBuildingPath } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { hoveredBuildingPathSelector } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.selector"
+import { setRightClickedNodeData } from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 interface Coordinates {
 	x: number
@@ -32,10 +33,6 @@ export interface BuildingUnhoveredSubscriber {
 	onBuildingUnhovered()
 }
 
-export interface BuildingRightClickedEventSubscriber {
-	onBuildingRightClicked(building: CodeMapBuilding, x: number, y: number)
-}
-
 export enum ClickType {
 	LeftClick = 0,
 	RightClick = 2
@@ -51,7 +48,6 @@ export enum CursorType {
 export class CodeMapMouseEventService implements ViewCubeEventPropagationSubscriber, FilesSelectionSubscriber, BlacklistSubscriber {
 	private static readonly BUILDING_HOVERED_EVENT = "building-hovered"
 	private static readonly BUILDING_UNHOVERED_EVENT = "building-unhovered"
-	private static readonly BUILDING_RIGHT_CLICKED_EVENT = "building-right-clicked"
 	private readonly THRESHOLD_FOR_MOUSE_MOVEMENT_TRACKING = 3
 
 	private highlightedInTreeView: CodeMapBuilding
@@ -115,12 +111,6 @@ export class CodeMapMouseEventService implements ViewCubeEventPropagationSubscri
 		})
 	}
 
-	static subscribeToBuildingRightClickedEvents($rootScope: IRootScopeService, subscriber: BuildingRightClickedEventSubscriber) {
-		$rootScope.$on(this.BUILDING_RIGHT_CLICKED_EVENT, (_event, data) => {
-			subscriber.onBuildingRightClicked(data.building, data.x, data.y)
-		})
-	}
-
 	start() {
 		// TODO: Check if these event listeners should ever be removed again.
 		this.threeRendererService.renderer.domElement.addEventListener("mousemove", event => this.onDocumentMouseMove(event))
@@ -365,11 +355,13 @@ export class CodeMapMouseEventService implements ViewCubeEventPropagationSubscri
 		// Check if mouse moved to prevent the node context menu to show up
 		// after moving the map, when the cursor ends on a building.
 		if (building && !this.hasMouseMovedMoreThanThreePixels(this.mouseOnLastClick)) {
-			this.$rootScope.$broadcast(CodeMapMouseEventService.BUILDING_RIGHT_CLICKED_EVENT, {
-				building,
-				x: this.mouse.x,
-				y: this.mouse.y
-			})
+			this.storeService.dispatch(
+				setRightClickedNodeData({
+					nodeId: building.node.id,
+					xPositionOfRightClickEvent: this.mouse.x,
+					yPositionOfRightClickEvent: this.mouse.y
+				})
+			)
 		}
 		this.threeUpdateCycleService.update()
 	}

package/app/codeCharta/ui/codeMap/codeMap.preRender.service.spec.ts

@@ -15,7 +15,6 @@ import { IsLoadingMapActions } from "../../state/store/appSettings/isLoadingMap/
 import { addFile, resetFiles, setDelta, setMultiple, setSingleByName } from "../../state/store/files/files.actions"
 import { addBlacklistItem, BlacklistActions, setBlacklist } from "../../state/store/fileSettings/blacklist/blacklist.actions"
 import { hierarchy } from "d3-hierarchy"
-import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { MetricDataService } from "../../state/store/metricData/metricData.service"
 import { getCCFiles } from "../../model/files/files.helper"
 import { clone } from "../../util/clone"
@@ -29,7 +28,6 @@ describe("codeMapPreRenderService", () => {
 	let codeMapPreRenderService: CodeMapPreRenderService
 	let $rootScope: IRootScopeService
 	let storeService: StoreService
-	let nodeMetricDataService: NodeMetricDataService
 	let codeMapRenderService: CodeMapRenderService
 
 	let fileMeta: FileMeta
@@ -40,7 +38,6 @@ describe("codeMapPreRenderService", () => {
 		rebuildService()
 		withMockedEventMethods($rootScope)
 		withMockedCodeMapRenderService()
-		withMockedMetricService()
 		withUnifiedMapAndFileMeta()
 		storeService.dispatch(setDynamicSettings(STATE.dynamicSettings))
 	})
@@ -50,7 +47,6 @@ describe("codeMapPreRenderService", () => {
 
 		$rootScope = getService<IRootScopeService>("$rootScope")
 		storeService = getService<StoreService>("storeService")
-		nodeMetricDataService = getService<NodeMetricDataService>("nodeMetricDataService")
 		codeMapRenderService = getService<CodeMapRenderService>("codeMapRenderService")
 
 		fileMeta = clone(FILE_STATES[0].file.fileMeta)
@@ -73,7 +69,7 @@ describe("codeMapPreRenderService", () => {
 	}
 
 	function rebuildService() {
-		codeMapPreRenderService = new CodeMapPreRenderService($rootScope, storeService, nodeMetricDataService, codeMapRenderService)
+		codeMapPreRenderService = new CodeMapPreRenderService($rootScope, storeService, codeMapRenderService)
 	}
 
 	function withMockedCodeMapRenderService() {
@@ -81,10 +77,6 @@ describe("codeMapPreRenderService", () => {
 		codeMapRenderService.scaleMap = jest.fn()
 	}
 
-	function withMockedMetricService() {
-		nodeMetricDataService.isMetricAvailable = jest.fn().mockReturnValue(true)
-	}
-
 	function withUnifiedMapAndFileMeta() {
 		codeMapPreRenderService["unifiedMap"] = map
 		codeMapPreRenderService["unifiedFileMeta"] = fileMeta

package/app/codeCharta/ui/codeMap/codeMap.preRender.service.ts

@@ -18,7 +18,6 @@ import { fileStatesAvailable } from "../../model/files/files.helper"
 import { PanelSelectionActions } from "../../state/store/appSettings/panelSelection/panelSelection.actions"
 import { PresentationModeActions } from "../../state/store/appSettings/isPresentationMode/isPresentationMode.actions"
 import { MetricDataService, MetricDataSubscriber } from "../../state/store/metricData/metricData.service"
-import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { ExperimentalFeaturesEnabledActions } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { LayoutAlgorithmService, LayoutAlgorithmSubscriber } from "../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
 import { trackEventUsageData, trackMapMetaData } from "../../util/usageDataTracker"
@@ -31,7 +30,8 @@ import { FocusedNodePathActions } from "../../state/store/dynamicSettings/focuse
 import { ColorRangeFromSubscriber, ColorRangeToSubscriber, RangeSliderController } from "../rangeSlider/rangeSlider.component"
 import { HoveredBuildingPathActions } from "../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { areAllNecessaryRenderDataAvailableSelector } from "../../state/selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector"
+import { RightClickedNodeDataActions } from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export interface CodeMapPreRenderServiceSubscriber {
 	onRenderMapChanged(map: CodeMapNode)
@@ -59,7 +59,6 @@ export class CodeMapPreRenderService
 	constructor(
 		private $rootScope: IRootScopeService,
 		private storeService: StoreService,
-		private nodeMetricDataService: NodeMetricDataService,
 		private codeMapRenderService: CodeMapRenderService
 	) {
 		"ngInject"
@@ -89,13 +88,7 @@ export class CodeMapPreRenderService
 	}
 
 	onStoreChanged(actionType: string) {
-		if (isActionOfType(actionType, HoveredBuildingPathActions)) {
-			// temporary hack:
-			// this.debounceRendering() leads to a new MapMesh, which leads to a new render, which would revert hover
-			// TODO We definitely need to improve this
-			return
-		}
-
+		// TODO: Get rid of this if else block. Why do we sometimes call this.debounceRendering() and sometimes this.codeMapRenderService.update()?
 		if (
 			this.allNecessaryRenderDataAvailable() &&
 			!isActionOfType(actionType, ScalingActions) &&
@@ -107,7 +100,9 @@ export class CodeMapPreRenderService
 			!isActionOfType(actionType, IsAttributeSideBarVisibleActions) &&
 			!isActionOfType(actionType, PanelSelectionActions) &&
 			!isActionOfType(actionType, PresentationModeActions) &&
-			!isActionOfType(actionType, ExperimentalFeaturesEnabledActions)
+			!isActionOfType(actionType, ExperimentalFeaturesEnabledActions) &&
+			!isActionOfType(actionType, HoveredBuildingPathActions) &&
+			!isActionOfType(actionType, RightClickedNodeDataActions)
 		) {
 			this.debounceRendering()
 			this.debounceTracking(actionType)
@@ -175,30 +170,12 @@ export class CodeMapPreRenderService
 	}
 
 	private allNecessaryRenderDataAvailable() {
-		return (
-			nodeMetricDataSelector(this.storeService.getState()) !== null &&
-			fileStatesAvailable(this.storeService.getState().files) &&
-			this.areChosenMetricsInMetricData() &&
-			Object.values(this.storeService.getState().dynamicSettings).every(x => {
-				return x !== null && Object.values(x).every(v => v !== null)
-			})
-		)
-	}
-
-	private areChosenMetricsInMetricData() {
-		const { dynamicSettings } = this.storeService.getState()
-		return (
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.areaMetric) &&
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.colorMetric) &&
-			this.nodeMetricDataService.isMetricAvailable(dynamicSettings.heightMetric)
-		)
+		return areAllNecessaryRenderDataAvailableSelector(this.storeService.getState())
 	}
 
 	private removeLoadingGifs() {
-		if (this.storeService.getState().appSettings.isLoadingFile) {
-			this.storeService.dispatch(setIsLoadingFile(false))
-		}
-		this.storeService.dispatch(setIsLoadingMap(false))
+		if (this.storeService.getState().appSettings.isLoadingFile) this.storeService.dispatch(setIsLoadingFile(false))
+		if (this.storeService.getState().appSettings.isLoadingMap) this.storeService.dispatch(setIsLoadingMap(false))
 	}
 
 	private showLoadingMapGif() {

package/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts

@@ -47,6 +47,7 @@ export class CodeMapMesh {
 
 	selectBuilding(building: CodeMapBuilding, color: string) {
 		building.setColor(color)
+		building.setDeltaColor(color)
 		this.setVertexColor(building.id, building.getColorVector(), building.getDefaultDeltaColorVector())
 		this.updateVertices()
 	}

package/app/codeCharta/ui/colorPicker/colorPicker.component.html

@@ -1,7 +1,16 @@
-<color-chrome
-	role="colorpicker"
-	(click)="$event.stopPropagation()"
-	[disableAlpha]="true"
-	[color]="hexColor"
-	(onChangeComplete)="handleChangeComplete($event.color.hex)"
-></color-chrome>
+<ng-container
+	[ngTemplateOutlet]="triggerTemplate"
+	[ngTemplateOutletContext]="{ isOpen: colorPickerMenuTrigger.menuOpen, isHovered: isHovered }"
+>
+</ng-container>
+
+<span [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></span>
+<mat-menu #menu="matMenu" class="cc-color-picker-menu" [xPosition]="openXPosition" [hasBackdrop]="false">
+	<color-chrome
+		role="colorpicker"
+		(click)="$event.stopPropagation()"
+		[disableAlpha]="true"
+		[color]="hexColor"
+		(onChangeComplete)="handleChangeComplete($event.color.hex)"
+	></color-chrome>
+</mat-menu>

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

@@ -1,32 +1,71 @@
-import { EventEmitter } from "@angular/core"
+import { Component } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
+import { fireEvent, render, screen, waitFor } from "@testing-library/angular"
 
-import { ColorPickerComponent } from "./colorPicker.component"
 import { ColorPickerModule } from "./colorPicker.module"
 
 describe("colorPicker", () => {
-	const handleColorChange = jest.fn()
+	@Component({
+		selector: "test-color-picker",
+		template: `
+			<cc-color-picker
+				[hexColor]="hexColor"
+				(onColorChange)="hexColor = $event"
+				[triggerTemplate]="colorPickerTriggerTemplate"
+			></cc-color-picker>
+			<ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">
+				<div>isOpen: {{ isOpen }}</div>
+				<div>isHovered: {{ isHovered }}</div>
+				<div>color: {{ hexColor }}</div>
+			</ng-template>
+		`
+	})
+	class TestColorPicker {
+		hexColor = "#ffffff"
+	}
 
 	beforeEach(() => {
-		handleColorChange.mockReset()
 		TestBed.configureTestingModule({
 			imports: [ColorPickerModule]
 		})
 	})
 
-	it("should let a user change a color", async () => {
-		await render(ColorPickerComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				hexColor: "#000000",
-				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
-			}
-		})
+	it("should let a user change a color within a menu", async () => {
+		const { container } = await render(TestColorPicker)
+
+		expectColorPickerInDom(false)
+		expect(screen.queryByText("isOpen: false")).toBeTruthy()
+		expect(screen.queryByText("color: #ffffff")).toBeTruthy()
+
+		fireEvent.click(container.querySelector("cc-color-picker"))
+		expectColorPickerInDom(true)
+		expect(screen.queryByText("isOpen: true")).toBeTruthy()
 
-		const colorPicker = screen.getByRole("colorpicker")
 		// @ts-ignore
-		ng.probe(colorPicker).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
-		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
+		ng.probe(screen.queryByRole("colorpicker")).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#000000" } })
+		expect(await screen.findByText("color: #000000")).toBeTruthy()
+
+		fireEvent.click(document)
+		await waitFor(() => expectColorPickerInDom(false))
+		expect(screen.queryByText("isOpen: false")).toBeTruthy()
 	})
+
+	it("should pass `isHovered` into template", async () => {
+		const { container } = await render(TestColorPicker)
+		const colorPicker = container.querySelector("cc-color-picker")
+
+		expect(screen.queryByText("isHovered: false")).toBeTruthy()
+
+		fireEvent.mouseEnter(colorPicker)
+		expect(screen.queryByText("isHovered: true")).toBeTruthy()
+
+		fireEvent.mouseLeave(colorPicker)
+		expect(screen.queryByText("isHovered: false")).toBeTruthy()
+	})
+
+	function expectColorPickerInDom(isOpen: boolean) {
+		const colorPickerElement = screen.queryByRole("colorpicker")
+		if (isOpen) expect(colorPickerElement).not.toBe(null)
+		else expect(colorPickerElement).toBe(null)
+	}
 })

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

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core"
+import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from "@angular/core"
+import { MatMenuTrigger, MenuPositionX } from "@angular/material/menu"
 
 @Component({
 	selector: "cc-color-picker",
@@ -6,10 +7,40 @@ import { Component, EventEmitter, Input, Output } from "@angular/core"
 })
 export class ColorPickerComponent {
 	@Input() hexColor: string
+	@Input() openXPosition: MenuPositionX = "after"
+	@Input() triggerTemplate: TemplateRef<unknown>
 
 	@Output() onColorChange = new EventEmitter<string>()
 
+	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
+
+	isHovered = false
+
+	private isClickInside = false
+
 	handleChangeComplete(hexColor: string) {
 		this.onColorChange.emit(hexColor)
 	}
+
+	@HostListener("mouseenter") onMouseEnter() {
+		this.isHovered = true
+	}
+
+	@HostListener("mouseleave") onMouseLeave() {
+		this.isHovered = false
+	}
+
+	@HostListener("click") onClick() {
+		this.isClickInside = true
+		this.colorPickerMenuTrigger.openMenu()
+	}
+
+	@HostListener("document:click")
+	handleDocumentClick() {
+		if (!this.isClickInside && this.colorPickerMenuTrigger.menuOpen) {
+			this.colorPickerMenuTrigger.closeMenu()
+		}
+
+		this.isClickInside = false
+	}
 }

package/app/codeCharta/ui/colorPicker/colorPicker.module.ts

@@ -1,10 +1,12 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 import { ColorChromeModule } from "ngx-color/chrome"
+
+import { MaterialModule } from "../../../material/material.module"
 import { ColorPickerComponent } from "./colorPicker.component"
 
 @NgModule({
-	imports: [CommonModule, ColorChromeModule],
+	imports: [CommonModule, ColorChromeModule, MaterialModule],
 	declarations: [ColorPickerComponent],
 	exports: [ColorPickerComponent]
 })

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

@@ -1,17 +1,17 @@
 <div class="custom-configs">
 	<md-menu class="custom-configs-component">
-		<md-button class="custom-configs-button" ng-click="$ctrl.initView(); $mdMenu.open($event);" title="Open your saved Custom Configs">
+		<md-button class="custom-configs-button" ng-click="$ctrl.initView(); $mdMenu.open($event);" title="Open your saved Custom Views">
 			<i class="fa fa-cogs"></i>
 		</md-button>
 
 		<md-menu-content class="custom-configs-drop-down" width="7">
 			<md-menu-item class="custom-configs-item">
-				<md-button class="custom-configs-dialog-name" ng-disabled="true">Custom Configs</md-button>
+				<md-button class="custom-configs-dialog-name" ng-disabled="true">Custom Views</md-button>
 
 				<md-button
 					class="action-button"
 					onclick="document.getElementById('input-file-id').click()"
-					title="Upload Custom Configs (.cc.config.json file)."
+					title="Upload Custom View (.cc.config.json file)."
 				>
 					<i class="fa fa-folder-open" aria-hidden="true"></i>
 				</md-button>
@@ -19,11 +19,11 @@
 					ng-click="$ctrl.downloadPreloadedCustomConfigs()"
 					ng-disabled="!$ctrl._viewModel.hasDownloadableConfigs"
 					class="action-button"
-					title="Download Custom Configs related to currently uploaded maps, if any."
+					title="Download Custom View related to currently uploaded maps, if any."
 				>
 					<i class="fa fa-download" aria-hidden="true"></i>
 				</md-button>
-				<md-button ng-click="$ctrl.showAddCustomConfigSettings()" class="action-button" title="Create new Custom Config">
+				<md-button ng-click="$ctrl.showAddCustomConfigSettings()" class="action-button" title="Create new Custom View">
 					<i class="fa fa-plus" aria-hidden="true"></i>
 				</md-button>
 			</md-menu-item>
@@ -31,13 +31,22 @@
 			<md-divider></md-divider>
 
 			<md-menu-item ng-if="!$ctrl._viewModel.dropDownCustomConfigItemGroups.length" class="custom-configs-item">
-				<md-button disabled>It is time to add your first CustomConfig.</md-button>
+				<md-button disabled>It is time to add your first Custom View.</md-button>
 			</md-menu-item>
 
-			<md-menu-item class="custom-configs-item" ng-repeat="customConfigItemGroup in $ctrl._viewModel.dropDownCustomConfigItemGroups">
-				<md-button class="button-hovering" ng-click="collapsed=!collapsed" md-prevent-menu-close="md-prevent-menu-close">
+			<md-menu-item
+				class="custom-configs-item"
+				ng-repeat="customConfigItemGroup in $ctrl._viewModel.dropDownCustomConfigItemGroups |
+                     limitTo: $ctrl._viewModel.visibleEntries"
+			>
+				<md-button
+					class="button-hovering"
+					ng-click="collapsed=!collapsed"
+					ng-style="!customConfigItemGroup.hasApplicableItems && { color: 'rgba(0,0,0,0.3)' }"
+					md-prevent-menu-close="md-prevent-menu-close"
+				>
 					<span class="collapse-trigger">
-						Custom Configs in <strong>{{ customConfigItemGroup.mapSelectionMode | lowercase }}</strong> mode for
+						Custom View(s) in <strong>{{ customConfigItemGroup.mapSelectionMode | lowercase }}</strong> mode for
 						<strong>{{ customConfigItemGroup.mapNames }}</strong>
 					</span>
 					<i ng-show="!collapsed" class="collapse-icon fa fa-arrow-down"></i>
@@ -64,7 +73,8 @@
 						</md-button>
 
 						<md-button
-							ng-click="$ctrl.removeCustomConfig(customConfig.id)"
+							ng-click="$ctrl.removeCustomConfig(customConfig.id, $index, $parent.$index)"
+							md-prevent-menu-close="md-prevent-menu-close"
 							class="action-button remove button-hovering"
 							title="Remove Custom Config"
 						>
@@ -73,6 +83,14 @@
 					</div>
 				</div>
 			</md-menu-item>
+			<button
+				ng-show="$ctrl._viewModel.showNonApplicableButton"
+				ng-click="$ctrl.toggleNonApplicableItems();"
+				md-prevent-menu-close="md-prevent-menu-close"
+			>
+				{{ $ctrl.isExpanded() ? "Hide non-applicable Custom Views" : "Show non-applicable Custom Views" }}
+				<i ng-class="$ctrl.isExpanded() ? 'fa fa-angle-up' : 'fa fa-angle-down'"></i>
+			</button>
 		</md-menu-content>
 	</md-menu>
 
@@ -80,7 +98,7 @@
 		<md-button
 			class="custom-configs-button plus"
 			ng-click="$ctrl.showAddCustomConfigSettings();"
-			title="Quick save current view as a Custom Config"
+			title="Quick save current view as a Custom View"
 		>
 			<i class="fa fa-plus"></i>
 		</md-button>