Implement fixate file explorer #2788

visualization/app/codeCharta/codeCharta.model.ts

@@ -151,6 +151,7 @@ export interface AppSettings {
 	isLoadingMap: boolean
 	isLoadingFile: boolean
 	sortingOrderAscending: boolean
+	isFileExplorerPinned: boolean
 	showMetricLabelNameValue: boolean
 	showMetricLabelNodeName: boolean
 	layoutAlgorithm: LayoutAlgorithm

visualization/app/codeCharta/state/store/appSettings/appSettings.reducer.ts

@@ -35,6 +35,7 @@ import {
 	defaultIsColorMetricLinkedToHeightMetric,
 	isColorMetricLinkedToHeightMetric
 } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.reducer"
+import { defaultIsFileExplorerPinned, isFileExplorerPinned } from "./isFileExplorerPinned/isFileExplorerPinned.reducer"
 import { defaultEnableFloorLabels, enableFloorLabels } from "./enableFloorLabels/enableFloorLabels.reducer"
 import { combineReducers } from "@ngrx/store"
 
@@ -43,6 +44,7 @@ export const appSettings = combineReducers({
 	showMetricLabelNodeName,
 	showMetricLabelNameValue,
 	sortingOrderAscending,
+	isFileExplorerPinned,
 	isLoadingFile,
 	isLoadingMap,
 	mapColors,
@@ -72,6 +74,7 @@ export const defaultAppSettings = {
 	showMetricLabelNodeName: defaultShowMetricLabelNodeName,
 	showMetricLabelNameValue: defaultShowMetricLabelNameValue,
 	sortingOrderAscending: defaultSortingOrderAscending,
+	isFileExplorerPinned: defaultIsFileExplorerPinned,
 	isLoadingFile: defaultIsLoadingFile,
 	isLoadingMap: defaultIsLoadingMap,
 	mapColors: defaultMapColors,

visualization/app/codeCharta/state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.actions.ts

@@ -0,0 +1,4 @@
+import { createAction, props } from "@ngrx/store"
+
+export const setIsFileExplorerPinned = createAction("SET_IS_FILE_EXPLORER_PINNED", props<{ value: boolean }>())
+export const toggleIsFileExplorerPinned = createAction("TOGGLE_IS_FILE_EXPLORER_PINNED")

visualization/app/codeCharta/state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.reducer.spec.ts

@@ -0,0 +1,21 @@
+import { isFileExplorerPinned } from "./isFileExplorerPinned.reducer"
+import { setIsFileExplorerPinned, toggleIsFileExplorerPinned } from "./isFileExplorerPinned.actions"
+
+describe("isFileExplorerPinned", () => {
+	describe("Action: SET_IS_FILE_EXPLORER_PINNED", () => {
+		it("should set new isFileExplorerPinned", () => {
+			const result = isFileExplorerPinned(false, setIsFileExplorerPinned({ value: true }))
+
+			expect(result).toEqual(true)
+		})
+	})
+
+	describe("Action: TOGGLE_IS_FILE_EXPLORER_PINNED", () => {
+		it("should toggle state", () => {
+			const result = isFileExplorerPinned(false, setIsFileExplorerPinned({ value: true }))
+			const toggledResult = isFileExplorerPinned(result, toggleIsFileExplorerPinned())
+
+			expect(toggledResult).toBe(!result)
+		})
+	})
+})

visualization/app/codeCharta/state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.reducer.ts

@@ -0,0 +1,10 @@
+import { createReducer, on } from "@ngrx/store"
+import { setIsFileExplorerPinned, toggleIsFileExplorerPinned } from "./isFileExplorerPinned.actions"
+import { setState } from "../../util/setState.reducer.factory"
+
+export const defaultIsFileExplorerPinned = false
+export const isFileExplorerPinned = createReducer(
+	defaultIsFileExplorerPinned,
+	on(setIsFileExplorerPinned, setState(defaultIsFileExplorerPinned)),
+	on(toggleIsFileExplorerPinned, state => !state)
+)

visualization/app/codeCharta/state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "@ngrx/store"
+import { appSettingsSelector } from "../appSettings.selector"
+
+export const isFileExplorerPinnedSelector = createSelector(appSettingsSelector, appSettings => appSettings.isFileExplorerPinned)

visualization/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.html

@@ -7,7 +7,10 @@
 		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="codeCharta/assets/flatten.png" />
 	</span>
 	<span class="box-rounded node-count" title="Files excluded">{{ matchingFileCounters.excludeCount }}<i class="fa fa-ban"></i></span>
-	<div class="sort-component">
+	<div class="clickable-component">
+		<cc-thumb-tack-button></cc-thumb-tack-button>
+	</div>
+	<div class="clickable-component">
 		<cc-sorting-button></cc-sorting-button>
 		<cc-sorting-option></cc-sorting-option>
 	</div>

visualization/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.scss

@@ -27,6 +27,12 @@ cc-matching-files-counter {
 		margin-left: 6px;
 	}
 
+	cc-thumb-tack-button button {
+		height: 25px;
+		background: #e6e6e6;
+		padding: 1px 8px;
+	}
+
 	cc-sorting-button button {
 		height: 25px;
 		background: #e6e6e6;
@@ -41,9 +47,9 @@ cc-matching-files-counter {
 		font-size: 10pt;
 	}
 
-	.sort-component {
-		margin-right: 3px;
+	.clickable-component {
 		display: inline-block;
 		color: black;
+		margin-left: -9px;
 	}
 }

visualization/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.module.ts

@@ -4,11 +4,12 @@ import { NgModule } from "@angular/core"
 import { MaterialModule } from "../../../../material/material.module"
 import { SortingButtonComponent } from "../sortingButton/sortingButton.component"
 import { SortingOptionComponent } from "../sortingOption/sortingOption.component"
+import { ThumbTackButtonComponent } from "../thumbTackButton/thumbTackButton.component"
 import { MatchingFilesCounterComponent } from "./matchingFilesCounter.component"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule],
-	declarations: [MatchingFilesCounterComponent, SortingButtonComponent, SortingOptionComponent],
+	declarations: [MatchingFilesCounterComponent, SortingButtonComponent, SortingOptionComponent, ThumbTackButtonComponent],
 	exports: [MatchingFilesCounterComponent]
 })
 export class MatchingFilesCounterModule {}

visualization/app/codeCharta/ui/searchPanel/searchPanel.component.ts

@@ -1,4 +1,8 @@
-import { Component, ViewEncapsulation } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { Store } from "@ngrx/store"
+import { CcState } from "app/codeCharta/codeCharta.model"
+import { isFileExplorerPinnedSelector } from "app/codeCharta/state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.selector"
+import { Subscription } from "rxjs"
 
 export type SearchPanelMode = "minimized" | "treeView" | "blacklist"
 
@@ -8,8 +12,22 @@ export type SearchPanelMode = "minimized" | "treeView" | "blacklist"
 	styleUrls: ["./searchPanel.component.scss"],
 	encapsulation: ViewEncapsulation.None
 })
-export class SearchPanelComponent {
+export class SearchPanelComponent implements OnInit {
 	searchPanelMode: SearchPanelMode = "minimized"
+	isFileExplorerPinned: boolean
+	isFileExplorerPinnedSubscription: Subscription
+
+	constructor(private store: Store<CcState>) {}
+
+	ngOnInit(): void {
+		this.isFileExplorerPinnedSubscription = this.store.select(isFileExplorerPinnedSelector).subscribe(isFileExplorerPinned => {
+			this.isFileExplorerPinned = isFileExplorerPinned
+		})
+	}
+
+	ngOnDestroy(): void {
+		this.isFileExplorerPinnedSubscription.unsubscribe()
+	}
 
 	updateSearchPanelMode = (searchPanelMode: SearchPanelMode) => {
 		this.setSearchPanelMode(this.searchPanelMode === searchPanelMode ? "minimized" : searchPanelMode)
@@ -20,7 +38,7 @@ export class SearchPanelComponent {
 	}
 
 	private closeSearchPanelOnOutsideClick = (event: MouseEvent) => {
-		if (this.isOutside(event)) {
+		if (this.isOutside(event) && !this.isFileExplorerPinned) {
 			this.setSearchPanelMode("minimized")
 		}
 	}

visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.html

@@ -0,0 +1,3 @@
+<button class="box-rounded" (click)="onClick()" title="Pin file explorer" [className]="(isFileExplorerPinned$ | async) ? 'pinned' : ''">
+	<i class="fa fa-thumb-tack"></i>
+</button>

visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.scss

@@ -0,0 +1,3 @@
+.pinned {
+	background-color: rgba($color: #979797, $alpha: 1);
+}

visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.spec.ts

@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from "@testing-library/angular"
+import { MockStore, provideMockStore } from "@ngrx/store/testing"
+import { TestBed } from "@angular/core/testing"
+
+import { ThumbTackButtonComponent } from "./thumbTackButton.component"
+import { isFileExplorerPinnedSelector } from "../../../state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.selector"
+import { toggleIsFileExplorerPinned } from "../../../state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.actions"
+
+describe("ThumbTackButtonComponent", () => {
+	it("should toggle isFileExplorerPinned on click", async () => {
+		const { detectChanges } = await render(ThumbTackButtonComponent, {
+			providers: [provideMockStore({ selectors: [{ selector: isFileExplorerPinnedSelector, value: true }] })]
+		})
+		const store = TestBed.inject(MockStore)
+
+		expect(screen.getByTitle("Pin file explorer")).toBeTruthy()
+
+		const dispatchSpy = jest.spyOn(store, "dispatch")
+		const button = screen.getByRole("button")
+		fireEvent.click(button)
+		expect(dispatchSpy).toHaveBeenCalledWith(toggleIsFileExplorerPinned())
+
+		store.overrideSelector(isFileExplorerPinnedSelector, false)
+		store.refreshState()
+		detectChanges()
+
+		expect(screen.getByTitle("Pin file explorer")).toBeTruthy()
+	})
+})

visualization/app/codeCharta/ui/searchPanel/thumbTackButton/thumbTackButton.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { Store } from "@ngrx/store"
+import { Observable } from "rxjs"
+import { CcState } from "../../../codeCharta.model"
+
+import { toggleIsFileExplorerPinned } from "../../../state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.actions"
+import { isFileExplorerPinnedSelector } from "../../../state/store/appSettings/isFileExplorerPinned/isFileExplorerPinned.selector"
+
+@Component({
+	selector: "cc-thumb-tack-button",
+	templateUrl: "./thumbTackButton.component.html",
+	styleUrls: ["./thumbTackButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
+})
+export class ThumbTackButtonComponent implements OnInit {
+	isFileExplorerPinned$: Observable<boolean>
+
+	constructor(private store: Store<CcState>) {}
+
+	ngOnInit(): void {
+		this.isFileExplorerPinned$ = this.store.select(isFileExplorerPinnedSelector)
+	}
+
+	onClick() {
+		this.store.dispatch(toggleIsFileExplorerPinned())
+	}
+}

visualization/app/codeCharta/util/customConfigBuilder.ts

@@ -68,6 +68,7 @@ function initializeAppSettings(target: CustomConfig) {
 		showOnlyBuildingsWithEdges: false,
 		isEdgeMetricVisible: true,
 		sortingOrderAscending: false,
+		isFileExplorerPinned: false,
 		experimentalFeaturesEnabled: false,
 		screenshotToClipboardEnabled: false,
 		layoutAlgorithm: undefined,