codecharta-visualization 1.88.0 → 1.89.0

package/app/app.module.ts

@@ -19,18 +19,23 @@ import { LegendPanelComponent } from "./codeCharta/ui/legendPanel/legendPanel.co
 import { LegendPanelModule } from "./codeCharta/ui/legendPanel/legendPanel.module"
 import { ColorPickerForMapColorModule } from "./codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.module"
 import { ColorPickerForMapColorComponent } from "./codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component"
-import { FocusButtonsModule } from "./codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.module"
-import { FocusButtonsComponent } from "./codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.component"
 import { FilePanelFileSelectorComponent } from "./codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component"
 import { FilePanelStateButtonsComponent } from "./codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component"
 import { FilePanelDeltaSelectorComponent } from "./codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component"
-import { MarkFolderRowComponent } from "./codeCharta/ui/nodeContextMenu/markFolderRow/markFolderRow.component"
-import { MarkFolderRowModule } from "./codeCharta/ui/nodeContextMenu/markFolderRow/markFolderRow.module"
+import { EffectsModule } from "./codeCharta/state/angular-redux/effects/effects.module"
+import { UnfocusNodesOnLoadingMapEffect } from "./codeCharta/state/effects/unfocusNodesOnLoadingMap.effect"
+import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "./codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
+import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
+import { threeSceneServiceProvider } 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"
 
 @NgModule({
 	imports: [
 		BrowserModule,
 		UpgradeModule,
+		EffectsModule.forRoot([UnfocusNodesOnLoadingMapEffect, AddBlacklistItemsIfNotResultsInEmptyMapEffect, OpenNodeContextMenuEffect]),
 		MapTreeViewModule,
 		MatchingFilesCounterModule,
 		AttributeSideBarModule,
@@ -39,10 +44,16 @@ import { MarkFolderRowModule } from "./codeCharta/ui/nodeContextMenu/markFolderR
 		Export3DMapButtonModule,
 		LegendPanelModule,
 		ColorPickerForMapColorModule,
-		FocusButtonsModule,
-		MarkFolderRowModule
+		NodeContextMenuCardModule
+	],
+	providers: [threeSceneServiceProvider],
+	declarations: [
+		FilePanelFileSelectorComponent,
+		FilePanelStateButtonsComponent,
+		FilePanelDeltaSelectorComponent,
+		InvertAreaOptionComponent,
+		...dialogs
 	],
-	declarations: [FilePanelFileSelectorComponent, FilePanelStateButtonsComponent, FilePanelDeltaSelectorComponent],
 	entryComponents: [
 		MapTreeViewComponent,
 		MatchingFilesCounterComponent,
@@ -51,12 +62,11 @@ import { MarkFolderRowModule } from "./codeCharta/ui/nodeContextMenu/markFolderR
 		LegendPanelComponent,
 		LabelledColorPickerComponent,
 		ColorPickerForMapColorComponent,
-		FocusButtonsComponent,
 		FilePanelFileSelectorComponent,
 		FilePanelStateButtonsComponent,
 		FilePanelDeltaSelectorComponent,
-		FocusButtonsComponent,
-		MarkFolderRowComponent
+		InvertAreaOptionComponent,
+		...dialogs
 	]
 })
 export class AppModule {

package/app/codeCharta/codeCharta.component.html

@@ -22,6 +22,4 @@
 			</h2>
 		</div>
 	</div>
-
-	<node-context-menu-component></node-context-menu-component>
 </div>

package/app/codeCharta/codeCharta.model.ts

@@ -136,6 +136,7 @@ export interface AppSettings {
 	cameraTarget: Vector3
 	hideFlatBuildings: boolean
 	invertHeight: boolean
+	invertArea: boolean
 	dynamicMargin: boolean
 	isWhiteBackground: boolean
 	mapColors: MapColors

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

@@ -0,0 +1,13 @@
+import { InjectionToken, Injector } from "@angular/core"
+
+export const ThreeSceneServiceToken = new InjectionToken("ThreeSceneService")
+
+export function ThreeSceneServiceFactory(injector: Injector) {
+	return injector.get("threeSceneService")
+}
+
+export const threeSceneServiceProvider = {
+	provide: ThreeSceneServiceToken,
+	useFactory: ThreeSceneServiceFactory,
+	deps: ["$injector"]
+}

package/app/codeCharta/state/angular-redux/effects/createEffect.spec.ts

@@ -0,0 +1,37 @@
+import { mocked } from "ts-jest/utils"
+import { Subject } from "rxjs"
+import { Store } from "../../store/store"
+import { createEffect } from "./createEffect"
+
+jest.mock("../../store/store", () => ({
+	Store: {}
+}))
+const MockedStore = mocked(Store)
+
+describe("createEffect", () => {
+	let source
+
+	beforeEach(() => {
+		source = new Subject()
+		MockedStore.dispatch = jest.fn()
+	})
+
+	afterEach(() => {
+		source.complete()
+	})
+
+	it("should observe and dispatch each received value", () => {
+		createEffect(() => source)
+		source.next({ type: "some-action-type" })
+		source.next({ type: "some-other-action-type" })
+		expect(MockedStore.dispatch).toHaveBeenCalledTimes(2)
+		expect(MockedStore.dispatch.mock.calls[0][0]).toEqual({ type: "some-action-type" })
+		expect(MockedStore.dispatch.mock.calls[1][0]).toEqual({ type: "some-other-action-type" })
+	})
+
+	it("should not dispatch if dispatch is set to false", () => {
+		createEffect(() => source, { dispatch: false })
+		source.next({ type: "some-action-type" })
+		expect(MockedStore.dispatch).not.toHaveBeenCalled()
+	})
+})

package/app/codeCharta/state/angular-redux/effects/createEffect.ts

@@ -0,0 +1,25 @@
+import { Action } from "redux"
+import { Observable } from "rxjs"
+import { Store } from "../../store/store"
+
+type DontDispatchConfig = { dispatch: false }
+type DispatchConfig = { dispatch?: true }
+type Config = DispatchConfig | DontDispatchConfig
+
+/** Simple placeholder for NgRx's createEffect. The goal is to provide the
+ * same api as NgRx, so that we can switch to NgRx in the long run.
+ * Please note that its functionality is very minimal so far.
+ */
+export function createEffect(source: () => Observable<unknown>, config?: Config) {
+	source().subscribe(output => {
+		if (config?.dispatch === false) return
+
+		if (!isAction(output)) throw new Error("output must be an action")
+
+		Store.dispatch(output)
+	})
+}
+
+function isAction(something: unknown): something is Action {
+	return something && Object.prototype.hasOwnProperty.call(something, "type")
+}

package/app/codeCharta/state/angular-redux/effects/effects.module.ts

@@ -0,0 +1,36 @@
+import { APP_INITIALIZER, Inject, InjectionToken, ModuleWithProviders, NgModule, Optional, SkipSelf } from "@angular/core"
+import { Action } from "redux"
+import { Observable, Subject } from "rxjs"
+
+export type Actions = Observable<Action>
+export const ActionsToken = new InjectionToken<Actions>("Actions")
+
+/** Simple placeholder for NgRx's EffectsModule. The goal is to provide the
+ * same api as NgRx, so that we can switch to NgRx in the long run.
+ */
+@NgModule({})
+export class EffectsModule {
+	static actions$ = new Subject<Action>()
+
+	constructor(@Optional() @SkipSelf() @Inject(EffectsModule) parentModule?: EffectsModule) {
+		if (parentModule) throw new Error("EffectsModule is already loaded. Import it in the AppModule only")
+	}
+
+	static forRoot(effects = []): ModuleWithProviders<EffectsModule> {
+		return {
+			ngModule: EffectsModule,
+			providers: [
+				{ provide: ActionsToken, useValue: EffectsModule.actions$ },
+				effects,
+				{
+					provide: APP_INITIALIZER,
+					deps: effects,
+					useFactory: () => () => {
+						// initialized effects"
+					},
+					multi: true
+				}
+			]
+		}
+	}
+}

package/app/codeCharta/state/angular-redux/ofType.ts

@@ -0,0 +1,11 @@
+import { Action } from "redux"
+import { filter, map, Observable } from "rxjs"
+
+export function ofType<T extends Action>(type: string) {
+	return function (source: Observable<Action>) {
+		return source.pipe(
+			filter(action => action.type === type),
+			map(action => action as T)
+		)
+	}
+}

package/app/codeCharta/state/angular-redux/state.ts

@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core"
+
+import { Store as PlainStore } from "../store/store"
+
+@Injectable({
+	providedIn: "root"
+})
+export class State {
+	getValue() {
+		return PlainStore.store.getState()
+	}
+}

package/app/codeCharta/state/angular-redux/store.ts

@@ -28,7 +28,7 @@ export class Store {
 	}
 
 	dispatch(action: CCAction) {
-		PlainStore.store.dispatch(action)
+		PlainStore.dispatch(action)
 	}
 }
 

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

@@ -0,0 +1,60 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { MatDialog } from "@angular/material/dialog"
+import { Action } from "redux"
+import { Subject } from "rxjs"
+import { BlacklistType } from "../../../codeCharta.model"
+import { FILE_STATES_JAVA } from "../../../util/dataMocks"
+
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { setFiles } from "../../store/files/files.actions"
+import { addBlacklistItems, addBlacklistItemsIfNotResultsInEmptyMap } from "../../store/fileSettings/blacklist/blacklist.actions"
+import { Store } from "../../store/store"
+import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "./addBlacklistItemsIfNotResultsInEmptyMap.effect"
+
+describe("AddBlacklistItemsIfNotResultsInEmptyMapEffect", () => {
+	const mockedDialog = { open: jest.fn() }
+	let storeDispatchSpy
+
+	beforeEach(async () => {
+		Store["initialize"]()
+		storeDispatchSpy = jest.spyOn(Store, "dispatch")
+		mockedDialog.open = jest.fn()
+
+		EffectsModule.actions$ = new Subject<Action>()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([AddBlacklistItemsIfNotResultsInEmptyMapEffect])],
+			providers: [{ provide: MatDialog, useValue: mockedDialog }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		EffectsModule.actions$.complete()
+	})
+
+	it("should ignore a not relevant action", () => {
+		EffectsModule.actions$.next({ type: "whatever" })
+		expect(storeDispatchSpy).not.toHaveBeenCalled()
+		expect(mockedDialog.open).not.toHaveBeenCalled()
+	})
+
+	it("should not blacklist items if it would lead to an empty map but show error dialog", () => {
+		EffectsModule.actions$.next(addBlacklistItemsIfNotResultsInEmptyMap([{ type: BlacklistType.exclude, path: "foo/bar" }]))
+		expect(storeDispatchSpy).not.toHaveBeenCalledWith(addBlacklistItems([{ type: BlacklistType.exclude, path: "foo/bar" }]))
+		expect(mockedDialog.open).toHaveBeenCalledTimes(1)
+	})
+
+	it("should blacklist items if it doesn't lead to an empty map", () => {
+		Store.dispatch(setFiles(FILE_STATES_JAVA))
+
+		EffectsModule.actions$.next(
+			addBlacklistItemsIfNotResultsInEmptyMap([{ type: BlacklistType.exclude, path: "/root/src/main/file1.java" }])
+		)
+
+		expect(storeDispatchSpy).toHaveBeenCalledWith(
+			addBlacklistItems([{ type: BlacklistType.exclude, path: "/root/src/main/file1.java" }])
+		)
+		expect(mockedDialog.open).not.toHaveBeenCalled()
+	})
+})

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/{ui → state/effects}/nodeContextMenu/focusButtons/focusButtons.component.spec.ts

@@ -3,9 +3,9 @@ import { TestBed } from "@angular/core/testing"
 
 import { FocusButtonsComponent } from "./focusButtons.component"
 import { FocusButtonsModule } from "./focusButtons.module"
-import { focusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
 
-jest.mock("../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector", () => ({
+jest.mock("../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector", () => ({
 	focusedNodePathSelector: jest.fn()
 }))
 const mockedFocusedNodePathSelector = focusedNodePathSelector as jest.Mock

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -1,11 +1,11 @@
 import { Component, Inject, Input } from "@angular/core"
 import { Observable, map } from "rxjs"
 
-import { CodeMapNode } from "../../../codeCharta.model"
-import { Store } from "../../../state/angular-redux/store"
-import { currentFocusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/currentFocused.selector"
-import { focusNode, unfocusAllNodes, unfocusNode } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
-import { focusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+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",

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/focusButtons/focusButtons.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 
-import { MaterialModule } from "../../../../material/material.module"
+import { MaterialModule } from "../../../../../material/material.module"
 import { FocusButtonsComponent } from "./focusButtons.component"
 import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
 

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/focusButtons/isNodeFocused.pipe.ts

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

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>