codecharta-visualization 1.86.0 → 1.89.0

package/app/codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect.ts

@@ -0,0 +1,56 @@
+import { Inject, Injectable } from "@angular/core"
+import { Actions, ActionsToken } from "../../angular-redux/effects/effects.module"
+import { MatDialog } from "@angular/material/dialog"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { filter, map, tap, withLatestFrom } from "rxjs"
+import {
+	addBlacklistItems,
+	AddBlacklistItemsIfNotResultsInEmptyMapAction,
+	BlacklistActions
+} from "../../store/fileSettings/blacklist/blacklist.actions"
+import { visibleFileStatesSelector } from "../../selectors/visibleFileStates.selector"
+import { blacklistSelector } from "../../store/fileSettings/blacklist/blacklist.selector"
+import { Store } from "../../angular-redux/store"
+import { resultsInEmptyMap } from "./resultsInEmptyMap"
+import { ErrorDialogComponent } from "../../../ui/dialogs/errorDialog/errorDialog.component"
+import { ofType } from "../../angular-redux/ofType"
+
+@Injectable()
+export class AddBlacklistItemsIfNotResultsInEmptyMapEffect {
+	constructor(
+		@Inject(ActionsToken) private actions$: Actions,
+		@Inject(Store) private store: Store,
+		@Inject(MatDialog) private dialog: MatDialog
+	) {}
+
+	private visibleFiles$ = this.store.select(visibleFileStatesSelector)
+	private blacklist$ = this.store.select(blacklistSelector)
+	private doBlacklistItemsResultInEmptyMap$ = this.actions$.pipe(
+		ofType<AddBlacklistItemsIfNotResultsInEmptyMapAction>(BlacklistActions.ADD_BLACKLIST_ITEMS_IF_NOT_RESULTS_IN_EMPTY_MAP),
+		withLatestFrom(this.visibleFiles$, this.blacklist$),
+		map(([addBlacklistItemsIfNotResultsInEmptyMapAction, visibleFiles, blacklist]) => ({
+			items: addBlacklistItemsIfNotResultsInEmptyMapAction.payload,
+			resultsInEmptyMap: resultsInEmptyMap(visibleFiles, blacklist, addBlacklistItemsIfNotResultsInEmptyMapAction.payload)
+		}))
+	)
+
+	showErrorDialogIfBlacklistItemsResultInEmptyMap$ = createEffect(
+		() =>
+			this.doBlacklistItemsResultInEmptyMap$.pipe(
+				filter(event => event.resultsInEmptyMap),
+				tap(() => {
+					this.dialog.open(ErrorDialogComponent, {
+						data: { title: "Blacklist Error", message: "Excluding all buildings is not possible." }
+					})
+				})
+			),
+		{ dispatch: false }
+	)
+
+	addBlacklistItems$ = createEffect(() =>
+		this.doBlacklistItemsResultInEmptyMap$.pipe(
+			filter(event => !event.resultsInEmptyMap),
+			map(event => addBlacklistItems(event.items))
+		)
+	)
+}

package/app/codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap.ts

@@ -0,0 +1,22 @@
+import { hierarchy, HierarchyNode } from "d3-hierarchy"
+import { BlacklistItem, BlacklistType, CCFile, CodeMapNode } from "../../../codeCharta.model"
+import { FileState } from "../../../model/files/files"
+import { isLeaf, isPathBlacklisted } from "../../../util/codeMapHelper"
+
+export const resultsInEmptyMap = (
+	visibleFiles: FileState[],
+	currentBlacklist: BlacklistItem[],
+	itemsToBeBlackListened: BlacklistItem[]
+) => {
+	const newBlacklist = [...currentBlacklist, ...itemsToBeBlackListened]
+	for (const { file } of visibleFiles) if (!resultsInEmptyFile(file, newBlacklist)) return false
+	return true
+}
+
+const resultsInEmptyFile = (file: CCFile, blacklist: BlacklistItem[]) => {
+	for (const node of hierarchy(file.map)) if (isNodeIncluded(node, blacklist)) return false
+	return true
+}
+
+const isNodeIncluded = (node: HierarchyNode<CodeMapNode>, blacklist: Array<BlacklistItem>) =>
+	isLeaf(node) && node.data.path && !isPathBlacklisted(node.data.path, blacklist, BlacklistType.exclude)

package/app/codeCharta/state/effects/nodeContextMenu/excludeButton/excludeButton.component.html

@@ -0,0 +1,3 @@
+<button mat-button (click)="excludeNode()" id="exclude-button" title="Exclude node and children-nodes and reorder the CodeMap">
+	<i class="fa fa-ban"></i> EXCLUDE
+</button>

package/app/codeCharta/state/effects/nodeContextMenu/excludeButton/excludeButton.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject, Input } from "@angular/core"
+import { BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
+import { Store } from "../../../angular-redux/store"
+import { addBlacklistItemsIfNotResultsInEmptyMap } from "../../../store/fileSettings/blacklist/blacklist.actions"
+
+@Component({
+	selector: "cc-exclude-button",
+	template: require("./excludeButton.component.html")
+})
+export class ExcludeButtonComponent {
+	@Input() codeMapNode: Pick<CodeMapNode, "path" | "type">
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	excludeNode() {
+		this.store.dispatch(
+			addBlacklistItemsIfNotResultsInEmptyMap([
+				{
+					path: this.codeMapNode.path,
+					type: BlacklistType.exclude,
+					nodeType: this.codeMapNode.type
+				}
+			])
+		)
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.html

@@ -0,0 +1,13 @@
+<button
+	mat-button
+	*ngIf="!codeMapNode?.isFlattened"
+	(click)="flattenNode()"
+	title="Flatten node and children-nodes, but keep an empty space"
+>
+	<img alt="flattenIcon" class="png-icon" src="../../../../../assets/flatten.png" />
+	FLATTEN
+</button>
+<button mat-button *ngIf="codeMapNode?.isFlattened" (click)="unFlattenNode()" title="Show node and children-nodes">
+	<img alt="flattenIcon" class="png-icon" src="../../../../../assets/flatten.png" />
+	SHOW
+</button>

package/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.spec.ts

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+import { FlattenButtonsComponent } from "./flattenButtons.component"
+import { FlattenButtonsModule } from "./flattenButtons.module"
+import { BlacklistType, NodeType } from "../../../../codeCharta.model"
+import userEvent from "@testing-library/user-event"
+import { Store } from "../../../store/store"
+
+describe("flattenButtonsComponent", () => {
+	beforeEach(() => {
+		Store["initialize"]()
+		TestBed.configureTestingModule({
+			imports: [FlattenButtonsModule]
+		})
+	})
+
+	it("should show flatten button for a not flattened node", async () => {
+		await render(FlattenButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo.ts", type: NodeType.FILE, isFlattened: false } }
+		})
+
+		expect(screen.queryByText("SHOW")).toBe(null)
+		expect(screen.queryByText("FLATTEN")).not.toBe(null)
+
+		userEvent.click(screen.queryByText("FLATTEN"))
+		expect(Store.store.getState().fileSettings.blacklist).toContainEqual({
+			nodeType: NodeType.FILE,
+			path: "/root/foo.ts",
+			type: BlacklistType.flatten
+		})
+	})
+
+	it("should show un-flatten button for a flattened node", async () => {
+		Store.store.getState().fileSettings.blacklist.push({
+			nodeType: NodeType.FILE,
+			path: "/root/foo.ts",
+			type: BlacklistType.flatten
+		})
+		await render(FlattenButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo.ts", type: NodeType.FILE, isFlattened: true } }
+		})
+
+		expect(screen.queryByText("FLATTEN")).toBe(null)
+		expect(screen.queryByText("SHOW")).not.toBe(null)
+
+		userEvent.click(screen.queryByText("SHOW"))
+		expect(Store.store.getState().fileSettings.blacklist).not.toContainEqual({
+			nodeType: NodeType.FILE,
+			path: "/root/foo.ts",
+			type: BlacklistType.flatten
+		})
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.ts

@@ -0,0 +1,34 @@
+import { Component, Inject, Input } from "@angular/core"
+import { BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
+import { Store } from "../../../angular-redux/store"
+import { addBlacklistItem, removeBlacklistItem } from "../../../store/fileSettings/blacklist/blacklist.actions"
+
+@Component({
+	selector: "cc-flatten-buttons",
+	template: require("./flattenButtons.component.html")
+})
+export class FlattenButtonsComponent {
+	@Input() codeMapNode: Pick<CodeMapNode, "path" | "type" | "isFlattened">
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	flattenNode() {
+		this.store.dispatch(
+			addBlacklistItem({
+				path: this.codeMapNode.path,
+				type: BlacklistType.flatten,
+				nodeType: this.codeMapNode.type
+			})
+		)
+	}
+
+	unFlattenNode() {
+		this.store.dispatch(
+			removeBlacklistItem({
+				path: this.codeMapNode.path,
+				type: BlacklistType.flatten,
+				nodeType: this.codeMapNode.type
+			})
+		)
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { FlattenButtonsComponent } from "./flattenButtons.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [FlattenButtonsComponent],
+	exports: [FlattenButtonsComponent]
+})
+export class FlattenButtonsModule {}

package/app/codeCharta/state/effects/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>

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.spec.ts

@@ -0,0 +1,55 @@
+import { render } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+
+import { FocusButtonsComponent } from "./focusButtons.component"
+import { FocusButtonsModule } from "./focusButtons.module"
+import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+
+jest.mock("../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector", () => ({
+	focusedNodePathSelector: jest.fn()
+}))
+const mockedFocusedNodePathSelector = focusedNodePathSelector as jest.Mock
+
+describe("focusButton", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [FocusButtonsModule]
+		})
+	})
+	it("should render only 'focus' button if neither node nor one of its parents is focused", async () => {
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(1)
+		expect(buttons[0].textContent).toMatch(" FOCUS ")
+	})
+
+	it("should render 'focus' and 'unfocus parent' buttons if a parent is focused", async () => {
+		mockedFocusedNodePathSelector.mockImplementation(() => ["/root/foo"])
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo/bar" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(2)
+		expect(buttons[0].textContent).toMatch(" FOCUS ")
+		expect(buttons[1].textContent).toMatch("UNFOCUS PARENT")
+	})
+
+	it("should render 'unfocus' and 'unfocus all' buttons if node is focused and there was node focused before", async () => {
+		mockedFocusedNodePathSelector.mockImplementation(() => ["/root/foo", "/root/bar"])
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(2)
+		expect(buttons[0].textContent).toMatch("UNFOCUS")
+		expect(buttons[1].textContent).toMatch("UNFOCUS ALL")
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject, Input } from "@angular/core"
+import { Observable, map } from "rxjs"
+
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { Store } from "../../../angular-redux/store"
+import { currentFocusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/currentFocused.selector"
+import { focusNode, unfocusAllNodes, unfocusNode } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
+import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+
+@Component({
+	selector: "cc-focus-buttons",
+	template: require("./focusButtons.component.html")
+})
+export class FocusButtonsComponent {
+	@Input() codeMapNode: Pick<CodeMapNode, "path">
+
+	currentFocusedNodePath$: Observable<string | undefined>
+	hasPreviousFocusedNodePath$: Observable<boolean>
+
+	constructor(@Inject(Store) private store: Store) {
+		this.currentFocusedNodePath$ = this.store.select(currentFocusedNodePathSelector)
+		this.hasPreviousFocusedNodePath$ = this.store
+			.select(focusedNodePathSelector)
+			.pipe(map(focusedNodePaths => focusedNodePaths.length > 1))
+	}
+
+	handleFocusNodeClicked() {
+		this.store.dispatch(focusNode(this.codeMapNode.path))
+	}
+
+	handleUnfocusNodeClicked() {
+		this.store.dispatch(unfocusNode())
+	}
+
+	handleUnfocusAllNodesClicked() {
+		this.store.dispatch(unfocusAllNodes())
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+
+import { MaterialModule } from "../../../../../material/material.module"
+import { FocusButtonsComponent } from "./focusButtons.component"
+import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [FocusButtonsComponent, IsNodeFocusedPipe],
+	exports: [FocusButtonsComponent]
+})
+export class FocusButtonsModule {}

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/isNodeFocused.pipe.spec.ts

@@ -0,0 +1,31 @@
+import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
+
+describe("isNodeFocused pipe", () => {
+	it("should return not focused if there is no focused node path", () => {
+		expect(new IsNodeFocusedPipe().transform(undefined, { path: "/root" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: false
+		})
+	})
+
+	it("should return not focused if focused node path isn't given node nor a parent", () => {
+		expect(new IsNodeFocusedPipe().transform("root/foo", { path: "/root/bar" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: false
+		})
+	})
+
+	it("should mark node as focused", () => {
+		expect(new IsNodeFocusedPipe().transform("/root/foo", { path: "/root/foo" })).toEqual({
+			isNodeFocused: true,
+			isParentFocused: false
+		})
+	})
+
+	it("should mark parent as focused", () => {
+		expect(new IsNodeFocusedPipe().transform("/root/foo", { path: "/root/foo/bar" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: true
+		})
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/focusButtons/isNodeFocused.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+import { CodeMapNode } from "../../../../codeCharta.model"
+
+type IsNodeFocusedType = {
+	isNodeFocused: boolean
+	isParentFocused: boolean
+}
+
+@Pipe({ name: "isNodeFocused" })
+export class IsNodeFocusedPipe implements PipeTransform {
+	transform(focusedNodePath: string | undefined, node: Pick<CodeMapNode, "path">): IsNodeFocusedType {
+		if (!focusedNodePath || !node)
+			return {
+				isNodeFocused: false,
+				isParentFocused: false
+			}
+
+		const isNodeFocused = focusedNodePath === node.path
+		return {
+			isNodeFocused,
+			isParentFocused: !isNodeFocused && node.path.startsWith(focusedNodePath)
+		}
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.html

@@ -0,0 +1,6 @@
+<button mat-button *ngIf="!isHighlighted" title="Highlight node constantly" (click)="addNodeToConstantHighlight()">
+	<i class="fa fa-cubes"></i> KEEP HIGHLIGHT
+</button>
+<button mat-button *ngIf="isHighlighted" title="Remove constant highlight" (click)="removeNodeFromConstantHighlight()">
+	<i class="fa fa-cubes"></i> REMOVE HIGHLIGHT
+</button>

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.spec.ts

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+import userEvent from "@testing-library/user-event"
+import { HighlightButtonsModule } from "./highlightButtons.module"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { HighlightButtonsComponent } from "./highlightButtons.component"
+import { VALID_FILE_NODE_WITH_ID as codeMapNode } from "../../../../util/dataMocks"
+import { State } from "../../../angular-redux/state"
+import { CodeMapNode } from "../../../../codeCharta.model"
+
+describe("flattenButtonsComponent", () => {
+	let threeSceneService
+	let state
+
+	beforeEach(() => {
+		threeSceneService = createMockedThreeSceneService()
+		state = createMockedState()
+		TestBed.configureTestingModule({
+			imports: [HighlightButtonsModule],
+			providers: [
+				{ provide: ThreeSceneServiceToken, useValue: threeSceneService },
+				{ provide: State, useValue: state }
+			]
+		})
+	})
+
+	it("should let a user permanently highlight and remove permanently highlight of a node", async () => {
+		state.getValue().lookUp.idToBuilding.set(codeMapNode.id, { id: codeMapNode.id, node: codeMapNode })
+
+		const { rerender } = await render(HighlightButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode }
+		})
+
+		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
+		userEvent.click(screen.getByText("KEEP HIGHLIGHT"))
+
+		rerender({ codeMapNode: null })
+		rerender({ codeMapNode })
+
+		expect(screen.queryByText("KEEP HIGHLIGHT")).toBe(null)
+		userEvent.click(screen.getByText("REMOVE HIGHLIGHT"))
+
+		rerender({ codeMapNode: null })
+		rerender({ codeMapNode })
+
+		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
+		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)
+	})
+
+	function createMockedThreeSceneService() {
+		const highlighted = new Map()
+		return {
+			addNodeAndChildrenToConstantHighlight: (node: CodeMapNode) => highlighted.set(node.id, node),
+			removeNodeAndChildrenFromConstantHighlight: (node: CodeMapNode) => highlighted.delete(node.id),
+			getConstantHighlight: () => highlighted
+		}
+	}
+
+	function createMockedState() {
+		const idToBuilding = new Map()
+		return { getValue: () => ({ lookUp: { idToBuilding } }) }
+	}
+})

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.ts

@@ -0,0 +1,39 @@
+import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { State } from "../../../angular-redux/state"
+import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
+
+@Component({
+	selector: "cc-highlight-buttons",
+	template: require("./highlightButtons.component.html")
+})
+export class HighlightButtonsComponent implements OnChanges {
+	@Input() codeMapNode: CodeMapNode
+
+	isHighlighted: boolean
+
+	constructor(@Inject(ThreeSceneServiceToken) private threeSceneService: ThreeSceneService, @Inject(State) private state: State) {}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.codeMapNode) this.isHighlighted = this.calculateIsHighlighted()
+	}
+
+	addNodeToConstantHighlight() {
+		this.threeSceneService.addNodeAndChildrenToConstantHighlight(this.codeMapNode)
+	}
+
+	removeNodeFromConstantHighlight() {
+		this.threeSceneService.removeNodeAndChildrenFromConstantHighlight(this.codeMapNode)
+	}
+
+	private calculateIsHighlighted() {
+		if (!this.codeMapNode) return false
+
+		const { lookUp } = this.state.getValue()
+		const codeMapBuilding = lookUp.idToBuilding.get(this.codeMapNode.id)
+		if (!codeMapBuilding) return false
+
+		return this.threeSceneService.getConstantHighlight().has(codeMapBuilding.id)
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { HighlightButtonsComponent } from "./highlightButtons.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [HighlightButtonsComponent],
+	exports: [HighlightButtonsComponent]
+})
+export class HighlightButtonsModule {}

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.html

@@ -0,0 +1,22 @@
+<div class="row" *ngIf="codeMapNode$ | async as codeMapNode">
+	<ng-container *ngFor="let markFolderItem of markFolderItems$ | async">
+		<button
+			[style.background-color]="markFolderItem.color"
+			(click)="markFolderItem.isMarked ? unmarkFolder(codeMapNode.path) : markFolder(codeMapNode.path, markFolderItem.color)"
+			class="colorButton"
+			title="Colorize folder"
+		>
+			<i class="fa fa-times" *ngIf="markFolderItem.isMarked"></i>
+		</button>
+	</ng-container>
+
+	<cc-color-picker
+		[hexColor]="'#ff0000'"
+		(onColorChange)="markFolder(codeMapNode.path, $event)"
+		[triggerTemplate]="colorPickerTriggerTemplate"
+	></cc-color-picker>
+</div>
+
+<ng-template #colorPickerTriggerTemplate>
+	<div class="cc-color-picker-trigger fa fa-paint-brush"></div>
+</ng-template>

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.scss

@@ -0,0 +1,31 @@
+cc-mark-folder-row {
+	.row {
+		display: flex;
+	}
+
+	:hover {
+		cursor: pointer;
+	}
+
+	.colorButton {
+		width: 32px;
+		height: 32px;
+
+		i {
+			font-size: 25px;
+			display: block;
+			color: red;
+			text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+		}
+	}
+
+	cc-color-picker {
+		width: 32px;
+		height: 32px;
+
+		.cc-color-picker-trigger {
+			font-size: 25px;
+			margin-top: 8px;
+		}
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from "@angular/core/testing"
+import { fireEvent, render } from "@testing-library/angular"
+import { MarkFolderRowComponent } from "./markFolderRow.component"
+import { MarkFolderRowModule } from "./markFolderRow.module"
+
+jest.mock("../rightClickedCodeMapNode.selector", () => ({
+	rightClickedCodeMapNodeSelector: () => ({ path: "/root" })
+}))
+
+describe("markFolderRow component", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [MarkFolderRowModule]
+		})
+	})
+
+	it("should let a user mark and unmark a node", async () => {
+		const { container } = await render(MarkFolderRowComponent, { excludeComponentDeclaration: true })
+
+		expect(container.querySelectorAll("button").length).toBe(5)
+		expect(container.querySelectorAll("cc-color-picker").length).toBe(1)
+		expect(container.querySelectorAll(".fa-times").length).toBe(0)
+
+		fireEvent.click(getFirstColorButton(container))
+		expect(container.querySelectorAll(".fa-times").length).toBe(1)
+		expect(getFirstColorButton(container).querySelector(".fa-times")).not.toBe(null)
+
+		fireEvent.click(getFirstColorButton(container))
+		expect(container.querySelectorAll(".fa-times").length).toBe(0)
+
+		function getFirstColorButton(container: Element) {
+			return container.querySelectorAll("button[title='Colorize folder']")[0]
+		}
+	})
+})