codecharta-visualization 1.86.0 → 1.87.0

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

@@ -34,8 +34,17 @@
 				<md-button disabled>It is time to add your first CustomConfig.</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
 						<strong>{{ customConfigItemGroup.mapNames }}</strong>
@@ -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 CustomConfigs" : "Show non-applicable CustomConfigs" }}
+				<i ng-class="$ctrl.isExpanded() ? 'fa fa-angle-up' : 'fa fa-angle-down'"></i>
+			</button>
 		</md-menu-content>
 	</md-menu>
 

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

@@ -69,6 +69,7 @@
 			font-size: 10px;
 			line-height: 48px;
 			vertical-align: top;
+			color: black;
 		}
 
 		.action-button {

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

@@ -13,6 +13,7 @@ import { CustomConfigHelper } from "../../util/customConfigHelper"
 import { setState } from "../../state/store/state.actions"
 import { CustomConfig, ExportCustomConfig } from "../../model/customConfig/customConfig.api.model"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCameraService"
+import { klona } from "klona"
 
 describe("CustomConfigsController", () => {
 	let customConfigsController: CustomConfigsController
@@ -133,12 +134,60 @@ describe("CustomConfigsController", () => {
 
 	describe("removeCustomConfig", () => {
 		it("should call deleteCustomConfig", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(klona(CUSTOM_CONFIG_ITEM_GROUPS))
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
+			CustomConfigHelper.deleteCustomConfig = jest.fn()
+			const configIdToRemove = "SINGLEfileASampleMap View #1"
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
+
+			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+		})
+
+		it("should delete element from customConfigItemGroup in dropDownCustomConfigItemGroups when removing a custom config", () => {
+			const testDropDownConfigItemGroup = [klona(CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBSINGLE"))]
+			const configIdToRemove = "SINGLEfileASampleMap View #1"
+
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testDropDownConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
+			CustomConfigHelper.deleteCustomConfig = jest.fn()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(2)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
+
+			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should delete element from dropDownCustomConfigItemGroups when removing a custom config", () => {
+			const testDropDownConfigItemGroup = [klona(CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple"))]
+			testDropDownConfigItemGroup[0].customConfigItems.pop()
+			const configIdToRemove = "MULTIPLEfileESampleMap View #1"
+
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue([testDropDownConfigItemGroup])
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testDropDownConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+			customConfigsController.initView()
 			CustomConfigHelper.deleteCustomConfig = jest.fn()
 
-			const configIdToRemove = 1
-			customConfigsController.removeCustomConfig(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups[0].customConfigItems).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
+
+			customConfigsController.removeCustomConfig(configIdToRemove, 0, 0)
 
 			expect(CustomConfigHelper.deleteCustomConfig).toHaveBeenCalledWith(configIdToRemove)
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(0)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(0)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
 		})
 	})
 
@@ -214,4 +263,76 @@ describe("CustomConfigsController", () => {
 			expect(customConfigsController["_viewModel"].hasDownloadableConfigs).toBe(true)
 		})
 	})
+
+	describe("collapse and expand non applicable custom configs", () => {
+		it("should not show configs that are not applicable by default", () => {
+			const testConfigItemGroups = [[...CUSTOM_CONFIG_ITEM_GROUPS][0], [...CUSTOM_CONFIG_ITEM_GROUPS][2]]
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testConfigItemGroups)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(2)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(0)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should show all configs that are applicable by default", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should hide expand button when only applicable custom configs are loaded", () => {
+			const testConfigItemGroup = [CUSTOM_CONFIG_ITEM_GROUPS.get("fileAfileBMultiple")]
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(testConfigItemGroup)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(1)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeFalsy()
+		})
+
+		it("should show all custom configs when 'show non-applicable CustomConfigs' button is clicked", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.toggleNonApplicableItems()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(3)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+
+		it("should hide all configs that are not applicable when 'show non-applicable CustomConfigs' button is clicked", () => {
+			CustomConfigHelper.getCustomConfigItemGroups = jest.fn().mockReturnValue(CUSTOM_CONFIG_ITEM_GROUPS)
+			CustomConfigHelper.getCustomConfigs = jest.fn().mockReturnValue(new Map())
+
+			customConfigsController.initView()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+
+			customConfigsController.toggleNonApplicableItems()
+			customConfigsController.toggleNonApplicableItems()
+
+			expect(customConfigsController["_viewModel"].dropDownCustomConfigItemGroups).toHaveLength(3)
+			expect(customConfigsController["_viewModel"].visibleEntries).toBe(1)
+			expect(customConfigsController["_viewModel"].showNonApplicableButton).toBeTruthy()
+		})
+	})
 })

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

@@ -29,13 +29,19 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 	private _viewModel: {
 		dropDownCustomConfigItemGroups: CustomConfigItemGroup[]
 		hasDownloadableConfigs: boolean
+		showNonApplicableButton: boolean
+		visibleEntries: number
 	} = {
 		dropDownCustomConfigItemGroups: [],
-		hasDownloadableConfigs: false
+		hasDownloadableConfigs: false,
+		showNonApplicableButton: false,
+		visibleEntries: 0
 	}
 
 	private customConfigFileStateConnector: CustomConfigFileStateConnector
 	private downloadableConfigs: Map<string, ExportCustomConfig> = new Map()
+	private previousEntries
+	private applicableEntries = 0
 
 	constructor(
 		private $rootScope: IRootScopeService,
@@ -57,6 +63,7 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 	initView() {
 		this.loadCustomConfigs()
 		this.preloadDownloadableConfigs()
+		this.initVisibleEntries()
 	}
 
 	loadCustomConfigs() {
@@ -74,8 +81,41 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 		CustomConfigHelper.applyCustomConfig(configId, this.storeService, this.threeCameraService, this.threeOrbitControlsService)
 	}
 
-	removeCustomConfig(configId) {
+	removeCustomConfig(configId, customConfigItemIndex, dropDownCustomConfigItemGroupIndex) {
+		const { dropDownCustomConfigItemGroups } = this._viewModel
+
 		CustomConfigHelper.deleteCustomConfig(configId)
+		dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].customConfigItems.splice(customConfigItemIndex, 1)
+
+		if (dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].customConfigItems.length === 0) {
+			if (dropDownCustomConfigItemGroups[dropDownCustomConfigItemGroupIndex].hasApplicableItems) {
+				this.applicableEntries--
+			}
+
+			dropDownCustomConfigItemGroups.splice(dropDownCustomConfigItemGroupIndex, 1)
+			this._viewModel.visibleEntries--
+			this.previousEntries--
+			this.updateButtonVisibility()
+		}
+	}
+
+	private initVisibleEntries() {
+		this.applicableEntries = 0
+		while (this._viewModel.dropDownCustomConfigItemGroups[this.applicableEntries]?.hasApplicableItems) {
+			this.applicableEntries++
+		}
+
+		this._viewModel.visibleEntries = this.applicableEntries
+		this.updateButtonVisibility()
+	}
+
+	toggleNonApplicableItems() {
+		if (!this.isExpanded()) {
+			this.previousEntries = this._viewModel.visibleEntries
+			this._viewModel.visibleEntries = this._viewModel.dropDownCustomConfigItemGroups.length
+		} else {
+			this._viewModel.visibleEntries = this.previousEntries
+		}
 	}
 
 	downloadPreloadedCustomConfigs() {
@@ -109,6 +149,20 @@ export class CustomConfigsController implements FilesSelectionSubscriber {
 		}
 		return false
 	}
+
+	private isExpanded(): boolean {
+		return this._viewModel.visibleEntries === this._viewModel.dropDownCustomConfigItemGroups.length
+	}
+
+	private updateButtonVisibility() {
+		if (this._viewModel.dropDownCustomConfigItemGroups.length === 0) {
+			this._viewModel.showNonApplicableButton = false
+		} else if (this.applicableEntries < this._viewModel.dropDownCustomConfigItemGroups.length) {
+			this._viewModel.showNonApplicableButton = true
+		} else {
+			this._viewModel.showNonApplicableButton = false
+		}
+	}
 }
 
 export const customConfigsComponent = {

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

@@ -1,15 +1,23 @@
-<span [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></span>
+<cc-color-picker
+	[hexColor]="hexColor"
+	(onColorChange)="handleColorChange($event)"
+	[openXPosition]="'before'"
+	[triggerTemplate]="colorPickerTriggerTemplate"
+></cc-color-picker>
 
-<div class="cc-labelled-color-picker-container">
-	<div class="cc-color-swatch-container">
-		<span class="cc-color-swatch" [style.background-color]="hexColor"></span>
-		<span #brush [style.color]="hexColor | readableColorForBackground" class="cc-color-brush fa fa-paint-brush"></span>
+<ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">
+	<div class="cc-labelled-color-picker-container">
+		<div class="cc-color-swatch-container">
+			<span class="cc-color-swatch" [style.background-color]="hexColor"></span>
+			<span
+				class="cc-color-brush fa fa-paint-brush"
+				[style.color]="hexColor | readableColorForBackground"
+				[style.opacity]="isHovered || isOpen ? '1' : '0'"
+			>
+			</span>
+		</div>
+		<div>
+			<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
+		</div>
 	</div>
-	<div>
-		<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
-	</div>
-</div>
-
-<mat-menu #menu="matMenu" xPosition="before" [hasBackdrop]="false" class="cc-color-picker-menu">
-	<cc-color-picker [hexColor]="hexColor" (onColorChange)="handleColorChange($event)"></cc-color-picker>
-</mat-menu>
+</ng-template>

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
-import { render, fireEvent, screen, waitForElementToBeRemoved, waitFor } from "@testing-library/angular"
+import { render, fireEvent, screen, waitForElementToBeRemoved } from "@testing-library/angular"
 
 import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
 import { LabelledColorPickerModule } from "./labelledColorPicker.module"
@@ -15,7 +15,7 @@ describe("labelledColorPicker", () => {
 		})
 	})
 
-	it("should let a user change a color within a menu", async () => {
+	it("should display label and handle brush visibility", async () => {
 		const { container } = await render(LabelledColorPickerComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: {
@@ -24,41 +24,28 @@ describe("labelledColorPicker", () => {
 				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
 			}
 		})
+		const colorPickerTrigger = container.querySelector("cc-color-picker")
 
 		expect(container.textContent).toMatch("pretty color")
 
-		fireEvent.click(container)
-		const colorPicker = await waitFor(() => screen.getByRole("colorpicker"))
+		fireEvent.mouseEnter(colorPickerTrigger)
+		expectBrushVisibility(container, true)
+
+		fireEvent.click(colorPickerTrigger)
+		const colorPicker = screen.getByRole("colorpicker")
 		expectBrushVisibility(container, true)
 
 		// @ts-ignore
 		ng.probe(colorPicker).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
 		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
 
-		fireEvent.click(document)
+		fireEvent.mouseLeave(colorPickerTrigger)
+		expectBrushVisibility(container, true) // still true as color picker is still open
 
+		fireEvent.click(document)
 		await waitForElementToBeRemoved(screen.getByRole("colorpicker"))
 		expectBrushVisibility(container, false)
 	})
-
-	it("should add/remove brush on mouseenter/mouseleave", async () => {
-		const { container } = await render(LabelledColorPickerComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				hexColor: "#000000",
-				labels: ["pretty color"],
-				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
-			}
-		})
-
-		expectBrushVisibility(container, false)
-
-		fireEvent.mouseEnter(container)
-		expectBrushVisibility(container, true)
-
-		fireEvent.mouseLeave(container)
-		expectBrushVisibility(container, false)
-	})
 })
 
 function expectBrushVisibility(container: Element, isVisible: boolean) {

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

@@ -1,6 +1,5 @@
 import "./labelledColorPicker.component.scss"
-import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from "@angular/core"
-import { MatMenuTrigger } from "@angular/material/menu"
+import { Component, EventEmitter, Input, Output } from "@angular/core"
 
 @Component({
 	selector: "cc-labelled-color-picker",
@@ -12,44 +11,6 @@ export class LabelledColorPickerComponent {
 
 	@Output() onColorChange = new EventEmitter<string>()
 
-	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
-	@ViewChild("brush") brush: ElementRef
-
-	private isClickInside = false
-
-	@HostListener("mouseenter") onMouseEnter() {
-		this.brush.nativeElement.style.opacity = "1"
-	}
-
-	@HostListener("mouseleave") onMouseLeave() {
-		if (!this.colorPickerMenuTrigger.menuOpen) this.brush.nativeElement.style.opacity = "0"
-	}
-
-	@HostListener("click")
-	onClick() {
-		this.isClickInside = true
-
-		const menuOpenedSubscription = this.colorPickerMenuTrigger.menuOpened.subscribe(() => {
-			this.brush.nativeElement.style.opacity = "1"
-			menuOpenedSubscription.unsubscribe()
-		})
-		const menuClosedSubscription = this.colorPickerMenuTrigger.menuClosed.subscribe(() => {
-			this.brush.nativeElement.style.opacity = "0"
-			menuClosedSubscription.unsubscribe()
-		})
-
-		this.colorPickerMenuTrigger.openMenu()
-	}
-
-	@HostListener("document:click")
-	handleDocumentClick() {
-		if (!this.isClickInside && this.colorPickerMenuTrigger && this.colorPickerMenuTrigger.menuOpen) {
-			this.colorPickerMenuTrigger.closeMenu()
-		}
-
-		this.isClickInside = false
-	}
-
 	handleColorChange(hexColor: string) {
 		this.onColorChange.emit(hexColor)
 	}

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

@@ -1,13 +1,12 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 
-import { MaterialModule } from "../../../material/material.module"
 import { ColorPickerModule } from "../colorPicker/colorPicker.module"
 import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
 import { ReadableColorForBackgroundPipe } from "./readableColorForBackground.pipe"
 
 @NgModule({
-	imports: [CommonModule, ColorPickerModule, MaterialModule],
+	imports: [CommonModule, ColorPickerModule],
 	declarations: [LabelledColorPickerComponent, ReadableColorForBackgroundPipe],
 	exports: [LabelledColorPickerComponent]
 })

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts

@@ -5,7 +5,7 @@ import { KeyValue } from "@angular/common"
 
 import { Store } from "../../../state/angular-redux/store"
 import { legendMarkedPackagesSelector, MarkedPackagesMap } from "./legendMarkedPackages.selector"
-import { calculateMarkedPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
+import { markPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
 
 type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackagesMap[keyof MarkedPackagesMap]>
 
@@ -24,7 +24,7 @@ export class LegendMarkedPackagesComponent {
 
 	handleColorChange(newHexColor: string, paths: string[]) {
 		this.store.dispatch(
-			calculateMarkedPackages(
+			markPackages(
 				paths.map(path => ({
 					color: newHexColor,
 					path

package/app/codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.component.html

@@ -0,0 +1,24 @@
+<ng-container *ngIf="currentFocusedNodePath$ | async | isNodeFocused: codeMapNode; let isNodeFocused">
+	<ng-container *ngIf="!isNodeFocused.isNodeFocused">
+		<button mat-button (click)="handleFocusNodeClicked()" id="focus-button" title="Only show selected nodes with children-nodes">
+			<i class="fa fa-bullseye"></i> FOCUS
+		</button>
+	</ng-container>
+
+	<ng-container *ngIf="isNodeFocused.isNodeFocused || isNodeFocused.isParentFocused">
+		<button mat-button aria-label="Remove Focus from node" (click)="handleUnfocusNodeClicked()" title="Show previous focused node">
+			<i class="fa fa-bullseye"></i>
+			{{ isNodeFocused.isParentFocused ? "UNFOCUS PARENT" : "UNFOCUS" }}
+		</button>
+		<button
+			mat-button
+			*ngIf="hasPreviousFocusedNodePath$ | async"
+			aria-label="Remove Focus from all nodes"
+			(click)="handleUnfocusAllNodesClicked()"
+			title="Show complete map"
+		>
+			<i class="fa fa-bullseye"></i>
+			UNFOCUS ALL
+		</button>
+	</ng-container>
+</ng-container>