codecharta-visualization 1.119.0 → 1.120.0

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.scss

@@ -1,63 +0,0 @@
-@use "../../../../material/theme";
-
-cc-global-configuration-button button {
-	margin: 0;
-	padding: 0;
-
-	cc-action-icon {
-		margin-left: 12px;
-	}
-
-	&:hover cc-action-icon {
-		background-color: theme.$cc-emphasized-color;
-	}
-}
-
-.cc-global-configuration-dialog .mat-mdc-dialog-container {
-	width: 36vw;
-	min-width: 600px;
-
-	.cc-global-configuration-dialog-content {
-		padding: 0 16px;
-		display: flex;
-		flex-direction: column;
-		gap: 26px;
-	}
-
-	cc-map-layout-selection,
-	cc-display-quality-selection {
-		> mat-form-field {
-			width: 100%;
-
-			.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
-				display: none;
-			}
-		}
-
-		.cc-tree-maps-max-tree-map-files {
-			display: inline-block;
-			padding-left: 16px;
-		}
-	}
-
-	.cc-global-configuration-toggle-option {
-		display: flex;
-		flex-direction: column;
-		gap: inherit;
-	}
-
-	.cc-global-configuration-links-list {
-		display: flex;
-		gap: 16px;
-
-		.weblink {
-			display: block;
-			color: rgba(0, 0, 0, 0.870588);
-			text-decoration: none;
-
-			.fa {
-				margin: 8px;
-			}
-		}
-	}
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.ts

@@ -1,19 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { MatDialog } from "@angular/material/dialog"
-import { GlobalConfigurationDialogComponent } from "./globalConfigurationDialog/globalConfigurationDialog.component"
-
-@Component({
-	selector: "cc-global-configuration-button",
-	templateUrl: "./globalConfigurationButton.component.html",
-	styleUrls: ["./globalConfigurationButton.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class GlobalConfigurationButtonComponent {
-	constructor(private dialog: MatDialog) {}
-
-	showGlobalConfiguration() {
-		this.dialog.open(GlobalConfigurationDialogComponent, {
-			panelClass: "cc-global-configuration-dialog"
-		})
-	}
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../../material/material.module"
-import { ActionIconModule } from "../../actionIcon/actionIcon.module"
-import { ResetSettingsButtonModule } from "../../resetSettingsButton/resetSettingsButton.module"
-import { GlobalConfigurationButtonComponent } from "./globalConfigurationButton.component"
-import { DisplayQualitySelectionModule } from "./globalConfigurationDialog/displayQualitySelection/displayQualitySelection.module"
-import { GlobalConfigurationDialogComponent } from "./globalConfigurationDialog/globalConfigurationDialog.component"
-import { MapLayoutSelectionModule } from "./globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.module"
-
-@NgModule({
-	imports: [MaterialModule, ResetSettingsButtonModule, MapLayoutSelectionModule, DisplayQualitySelectionModule, ActionIconModule],
-	declarations: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent],
-	exports: [GlobalConfigurationButtonComponent]
-})
-export class GlobalConfigurationButtonModule {}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.component.html

@@ -1,8 +0,0 @@
-<mat-form-field appearance="outline">
-	<mat-label>Display Quality</mat-label>
-	<mat-select [value]="sharpnessMode$ | async" (selectionChange)="handleSelectedSharpnessModeChanged($event)">
-		<mat-option *ngFor="let sharpnessMode of sharpnessModes" [value]="sharpnessMode">
-			{{ sharpnessMode }}
-		</mat-option>
-	</mat-select>
-</mat-form-field>

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.component.spec.ts

@@ -1,36 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/angular"
-import { provideMockStore, MockStore } from "@ngrx/store/testing"
-import { DisplayQualitySelectionComponent } from "./displayQualitySelection.component"
-import { DisplayQualitySelectionModule } from "./displayQualitySelection.module"
-import { sharpnessModeSelector } from "../../../../../state/store/appSettings/sharpnessMode/sharpnessMode.selector"
-import { SharpnessMode } from "../../../../../codeCharta.model"
-import { getLastAction } from "../../../../../util/testUtils/store.utils"
-import { setSharpnessMode } from "../../../../../state/store/appSettings/sharpnessMode/sharpnessMode.actions"
-
-describe("DisplayQualitySelectionComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [DisplayQualitySelectionModule],
-			providers: [
-				provideMockStore({
-					selectors: [{ selector: sharpnessModeSelector, value: SharpnessMode.Standard }]
-				})
-			]
-		})
-	})
-
-	it("should change display quality selection", async () => {
-		const { detectChanges } = await render(DisplayQualitySelectionComponent, { excludeComponentDeclaration: true })
-		const store = TestBed.inject(MockStore)
-		detectChanges()
-
-		const initialDisplayQualitySelection = screen.getByText("High")
-
-		fireEvent.click(initialDisplayQualitySelection)
-		const anotherDisplayQualityOption = screen.getByText("Low")
-		fireEvent.click(anotherDisplayQualityOption)
-		await waitForElementToBeRemoved(() => screen.getByRole("listbox"))
-		expect(await getLastAction(store)).toEqual(setSharpnessMode({ value: SharpnessMode.PixelRatioNoAA }))
-	})
-})

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.component.ts

@@ -1,21 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { SharpnessMode, CcState } from "../../../../../codeCharta.model"
-import { setSharpnessMode } from "../../../../../state/store/appSettings/sharpnessMode/sharpnessMode.actions"
-import { sharpnessModeSelector } from "../../../../../state/store/appSettings/sharpnessMode/sharpnessMode.selector"
-
-@Component({
-	selector: "cc-display-quality-selection",
-	templateUrl: "./displayQualitySelection.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class DisplayQualitySelectionComponent {
-	sharpnessModes = Object.values(SharpnessMode)
-	sharpnessMode$ = this.store.select(sharpnessModeSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	handleSelectedSharpnessModeChanged(event: { value: SharpnessMode }) {
-		this.store.dispatch(setSharpnessMode({ value: event.value }))
-	}
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.module.ts

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

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.html

@@ -1,54 +0,0 @@
-<mat-toolbar color="primary">Global Configuration</mat-toolbar>
-
-<div class="cc-global-configuration-dialog-content">
-	<div class="cc-global-configuration-align-right"></div>
-
-	<cc-map-layout-selection></cc-map-layout-selection>
-	<cc-display-quality-selection></cc-display-quality-selection>
-
-	<div class="cc-global-configuration-toggle-option">
-		<mat-slide-toggle [checked]="hideFlatBuildings$ | async" (change)="handleHideFlatBuildingsChanged($event)">
-			Hide Flattened Buildings
-		</mat-slide-toggle>
-		<mat-slide-toggle [checked]="resetCameraIfNewFileIsLoaded$ | async" (change)="handleResetCameraIfNewFileIsLoadedChanged($event)">
-			Reset Camera when changing map
-		</mat-slide-toggle>
-		<mat-slide-toggle [checked]="isWhiteBackground$ | async" (change)="handleIsWhiteBackgroundChanged($event)">
-			White Background
-		</mat-slide-toggle>
-		<mat-slide-toggle [checked]="experimentalFeaturesEnabled$ | async" (change)="handleExperimentalFeaturesEnabledChanged($event)">
-			Enable Experimental Features
-		</mat-slide-toggle>
-		<mat-slide-toggle [checked]="screenshotToClipboardEnabled$ | async" (change)="handleScreenshotToClipboardEnabledChanged($event)">
-			Screenshot to clipboard
-		</mat-slide-toggle>
-	</div>
-
-	<cc-reset-settings-button
-		[settingsKeys]="[
-			'appSettings.hideFlatBuildings',
-			'appSettings.isWhiteBackground',
-			'appSettings.resetCameraIfNewFileIsLoaded',
-			'appSettings.layoutAlgorithm',
-			'appSettings.maxTreeMapFiles'
-		]"
-		tooltip="Reset global settings to their defaults"
-		label="Reset global settings"
-	></cc-reset-settings-button>
-
-	<div class="cc-global-configuration-links-list">
-		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/blob/main/README.md" target="_blank" rel="noopener noreferrer">
-			<em class="fa fa-external-link icon-link"></em>How-to
-		</a>
-		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/" target="_blank" rel="noopener noreferrer">
-			<em class="fa fa-external-link icon-link"></em>Github
-		</a>
-		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/wiki" target="_blank" rel="noopener noreferrer">
-			<em class="fa fa-external-link icon-link"></em>Wiki
-		</a>
-	</div>
-
-	<mat-dialog-actions align="end">
-		<button mat-button mat-dialog-close cdkFocusInitial>Close</button>
-	</mat-dialog-actions>
-</div>

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { GlobalSettingsHelper } from "../../../../util/globalSettingsHelper"
-import { GlobalConfigurationButtonModule } from "../globalConfigurationButton.module"
-import { GlobalConfigurationDialogComponent } from "./globalConfigurationDialog.component"
-import { provideMockStore } from "@ngrx/store/testing"
-import { isWhiteBackgroundSelector } from "../../../../state/store/appSettings/isWhiteBackground/isWhiteBackground.selector"
-import { State } from "@ngrx/store"
-import { defaultState } from "../../../../state/store/state.manager"
-
-describe("globalConfigurationDialogComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [GlobalConfigurationButtonModule],
-			providers: [
-				provideMockStore({ selectors: [{ selector: isWhiteBackgroundSelector, value: false }], initialState: defaultState }),
-				{ provide: State, useValue: {} }
-			]
-		})
-	})
-
-	it("should sync its settings in local storage", async () => {
-		const setGlobalSettingsInLocalStorageSpy = jest.spyOn(GlobalSettingsHelper, "setGlobalSettingsInLocalStorage")
-		await render(GlobalConfigurationDialogComponent, { excludeComponentDeclaration: true })
-
-		await userEvent.click(screen.getByText("White Background"))
-
-		expect(setGlobalSettingsInLocalStorageSpy).toHaveBeenCalledWith({ isWhiteBackground: true })
-	})
-})

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.ts

@@ -1,54 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { MatSlideToggleChange } from "@angular/material/slide-toggle"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../../codeCharta.model"
-import { setScreenshotToClipboardEnabled } from "../../../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
-import { screenshotToClipboardEnabledSelector } from "../../../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.selector"
-import { setExperimentalFeaturesEnabled } from "../../../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
-import { experimentalFeaturesEnabledSelector } from "../../../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
-import { setHideFlatBuildings } from "../../../../state/store/appSettings/hideFlatBuildings/hideFlatBuildings.actions"
-import { hideFlatBuildingsSelector } from "../../../../state/store/appSettings/hideFlatBuildings/hideFlatBuildings.selector"
-import { setIsWhiteBackground } from "../../../../state/store/appSettings/isWhiteBackground/isWhiteBackground.actions"
-import { isWhiteBackgroundSelector } from "../../../../state/store/appSettings/isWhiteBackground/isWhiteBackground.selector"
-import { setResetCameraIfNewFileIsLoaded } from "../../../../state/store/appSettings/resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.actions"
-import { resetCameraIfNewFileIsLoadedSelector } from "../../../../state/store/appSettings/resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.selector"
-import { GlobalSettingsHelper } from "../../../../util/globalSettingsHelper"
-
-@Component({
-	templateUrl: "./globalConfigurationDialog.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class GlobalConfigurationDialogComponent {
-	screenshotToClipboardEnabled$ = this.store.select(screenshotToClipboardEnabledSelector)
-	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
-	isWhiteBackground$ = this.store.select(isWhiteBackgroundSelector)
-	hideFlatBuildings$ = this.store.select(hideFlatBuildingsSelector)
-	resetCameraIfNewFileIsLoaded$ = this.store.select(resetCameraIfNewFileIsLoadedSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	handleResetCameraIfNewFileIsLoadedChanged(event: MatSlideToggleChange) {
-		this.store.dispatch(setResetCameraIfNewFileIsLoaded({ value: event.checked }))
-		GlobalSettingsHelper.setGlobalSettingsInLocalStorage({ resetCameraIfNewFileIsLoaded: event.checked })
-	}
-
-	handleHideFlatBuildingsChanged(event: MatSlideToggleChange) {
-		this.store.dispatch(setHideFlatBuildings({ value: event.checked }))
-		GlobalSettingsHelper.setGlobalSettingsInLocalStorage({ hideFlatBuildings: event.checked })
-	}
-
-	handleIsWhiteBackgroundChanged(event: MatSlideToggleChange) {
-		this.store.dispatch(setIsWhiteBackground({ value: event.checked }))
-		GlobalSettingsHelper.setGlobalSettingsInLocalStorage({ isWhiteBackground: event.checked })
-	}
-
-	handleExperimentalFeaturesEnabledChanged(event: MatSlideToggleChange) {
-		this.store.dispatch(setExperimentalFeaturesEnabled({ value: event.checked }))
-		GlobalSettingsHelper.setGlobalSettingsInLocalStorage({ experimentalFeaturesEnabled: event.checked })
-	}
-
-	handleScreenshotToClipboardEnabledChanged(event: MatSlideToggleChange) {
-		this.store.dispatch(setScreenshotToClipboardEnabled({ value: event.checked }))
-		GlobalSettingsHelper.setGlobalSettingsInLocalStorage({ screenshotToClipboardEnabled: event.checked })
-	}
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.html

@@ -1,18 +0,0 @@
-<mat-form-field appearance="outline">
-	<mat-label>Map Layout</mat-label>
-	<mat-select [value]="layoutAlgorithm$ | async" (selectionChange)="handleSelectedLayoutAlgorithmChanged($event)">
-		<mat-option *ngFor="let layoutAlgorithm of layoutAlgorithms" [value]="layoutAlgorithm">
-			{{ layoutAlgorithm }}
-		</mat-option>
-	</mat-select>
-</mat-form-field>
-
-<cc-slider
-	class="cc-tree-maps-max-tree-map-files"
-	*ngIf="(layoutAlgorithm$ | async) === 'TreeMapStreet'"
-	[label]="'Maximum TreeMap Files'"
-	[min]="1"
-	[max]="1000"
-	[value]="maxTreeMapFiles$ | async"
-	[onChange]="handleChangeMaxTreeMapFiles"
-></cc-slider>

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.spec.ts

@@ -1,69 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing"
-import { screen } from "@testing-library/angular"
-import { LayoutAlgorithm } from "../../../../../codeCharta.model"
-import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
-import { provideMockStore, MockStore } from "@ngrx/store/testing"
-import { MapLayoutSelectionComponent } from "./mapLayoutSelection.component"
-import { MapLayoutSelectionModule } from "./mapLayoutSelection.module"
-import { HarnessLoader } from "@angular/cdk/testing"
-import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
-import { MatSelectHarness } from "@angular/material/select/testing"
-import { MatInputHarness } from "@angular/material/input/testing"
-import { layoutAlgorithmSelector } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
-import { maxTreeMapFilesSelector } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.selector"
-import { getLastAction } from "../../../../../util/testUtils/store.utils"
-import { setMaxTreeMapFiles } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.actions"
-
-let loader: HarnessLoader
-let fixture: ComponentFixture<MapLayoutSelectionComponent>
-
-describe("MapLayoutSelectionComponent", () => {
-	let store: MockStore
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [MapLayoutSelectionModule],
-			declarations: [MapLayoutSelectionComponent],
-			providers: [
-				provideMockStore({
-					selectors: [
-						{ selector: layoutAlgorithmSelector, value: LayoutAlgorithm.SquarifiedTreeMap },
-						{ selector: maxTreeMapFilesSelector, value: 100 }
-					]
-				})
-			]
-		}).compileComponents()
-		fixture = TestBed.createComponent(MapLayoutSelectionComponent)
-		loader = TestbedHarnessEnvironment.loader(fixture)
-		store = TestBed.inject(MockStore)
-	})
-
-	it("should change map layout selection", async () => {
-		const select = await loader.getHarness(MatSelectHarness)
-		expect(await select.getValueText()).toBe("Squarified TreeMap")
-
-		await select.open()
-		await select.clickOptions({ text: "StreetMap" })
-
-		expect(await getLastAction(store)).toEqual(setLayoutAlgorithm({ value: LayoutAlgorithm.StreetMap }))
-	})
-
-	it("should not display max tree map files slider when layout selection is NOT 'TreeMapStreet'", async () => {
-		await loader.getHarness(MatSelectHarness)
-		expect(screen.queryByText("Maximum TreeMap Files")).toBe(null)
-	})
-
-	it("should display max tree map files slider when layout selection is 'TreeMapStreet'", async () => {
-		store.overrideSelector(layoutAlgorithmSelector, LayoutAlgorithm.TreeMapStreet)
-		store.refreshState()
-		fixture.detectChanges()
-		const select = await loader.getHarness(MatSelectHarness)
-		expect(await select.getValueText()).toBe("TreeMapStreet")
-		expect(screen.queryByText("Maximum TreeMap Files")).not.toBe(null)
-
-		const input = await loader.getHarness(MatInputHarness)
-		expect(await input.getValue()).toBe("100")
-
-		await input.setValue("42")
-		expect(await getLastAction(store)).toEqual(setMaxTreeMapFiles({ value: 42 }))
-	})
-})

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.ts

@@ -1,29 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { LayoutAlgorithm, CcState } from "../../../../../codeCharta.model"
-import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
-import { layoutAlgorithmSelector } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
-import { setMaxTreeMapFiles } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.actions"
-import { maxTreeMapFilesSelector } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.selector"
-import { debounce } from "../../../../../util/debounce"
-
-@Component({
-	selector: "cc-map-layout-selection",
-	templateUrl: "./mapLayoutSelection.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MapLayoutSelectionComponent {
-	layoutAlgorithms = Object.values(LayoutAlgorithm)
-	layoutAlgorithm$ = this.store.select(layoutAlgorithmSelector)
-	maxTreeMapFiles$ = this.store.select(maxTreeMapFilesSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	handleSelectedLayoutAlgorithmChanged(event: { value: LayoutAlgorithm }) {
-		this.store.dispatch(setLayoutAlgorithm({ value: event.value }))
-	}
-
-	handleChangeMaxTreeMapFiles = debounce((maxTreeMapFiles: number) => {
-		this.store.dispatch(setMaxTreeMapFiles({ value: maxTreeMapFiles }))
-	}, 400)
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../../../../material/material.module"
-import { SliderModule } from "../../../../slider/slider.module"
-import { MapLayoutSelectionComponent } from "./mapLayoutSelection.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule, SliderModule],
-	declarations: [MapLayoutSelectionComponent],
-	exports: [MapLayoutSelectionComponent]
-})
-export class MapLayoutSelectionModule {}

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.html

@@ -1,12 +0,0 @@
-<ng-container *ngIf="hoveredNodePathPanelData$ | async; let hoveredNodePathPanelData">
-	<span *ngFor="let step of hoveredNodePathPanelData.path; let last = last">
-		<i
-			*ngIf="last"
-			class="fa"
-			[class.fa-file-o]="hoveredNodePathPanelData.isFile"
-			[class.fa-folder]="!hoveredNodePathPanelData.isFile"
-		></i>
-		<span [class.bold]="last">{{ step }}</span>
-		<i *ngIf="!last" class="fa fa-angle-right"></i>
-	</span>
-</ng-container>

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.scss

@@ -1,18 +0,0 @@
-cc-hovered-node-path-panel {
-	width: 100%;
-	min-width: 400px;
-	display: inline-block;
-	vertical-align: middle;
-	margin: 0 8px;
-	font-size: 10pt;
-	overflow: hidden;
-	white-space: nowrap;
-
-	.bold {
-		font-weight: 600;
-	}
-
-	i {
-		margin: 0 4px;
-	}
-}

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.spec.ts

@@ -1,71 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render } from "@testing-library/angular"
-import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
-import { HoveredNodePathPanelModule } from "./hoveredNodePathPanel.module"
-import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
-import { provideMockStore } from "@ngrx/store/testing"
-
-describe("HoveredNodePathPanelComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [HoveredNodePathPanelModule]
-		})
-	})
-
-	it("should be empty when there is no node hovered", async () => {
-		const { container } = await render(HoveredNodePathPanelComponent, {
-			excludeComponentDeclaration: true,
-			providers: [provideMockStore({ selectors: [{ selector: hoveredNodePathPanelDataSelector, value: undefined }] })]
-		})
-		expect(container.textContent).toBe("")
-	})
-
-	it("should show path to a hovered file", async () => {
-		const { container } = await render(HoveredNodePathPanelComponent, {
-			excludeComponentDeclaration: true,
-			providers: [
-				provideMockStore({
-					selectors: [
-						{
-							selector: hoveredNodePathPanelDataSelector,
-							value: { path: ["root", "a.ts"], isFile: true }
-						}
-					]
-				})
-			]
-		})
-
-		const steps = container.children
-		expect(steps.length).toBe(2)
-
-		expect(steps[0].textContent).toBe("root")
-		const iconOfFirstStep = steps[0].querySelector("i")
-		expect(iconOfFirstStep.className).toBe("fa fa-angle-right")
-
-		expect(steps[1].textContent).toBe("a.ts")
-		const iconOfLastStep = steps[1].querySelector("i")
-		expect(iconOfLastStep.className).toBe("fa fa-file-o")
-	})
-
-	it("should show path to a hovered folder", async () => {
-		const { container } = await render(HoveredNodePathPanelComponent, {
-			excludeComponentDeclaration: true,
-			providers: [
-				provideMockStore({
-					selectors: [
-						{
-							selector: hoveredNodePathPanelDataSelector,
-							value: { path: ["root"], isFile: false }
-						}
-					]
-				})
-			]
-		})
-		const steps = container.children
-		expect(steps.length).toBe(1)
-
-		expect(steps[0].textContent).toBe("root")
-		const iconOfLastStep = steps[0].querySelector("i")
-		expect(iconOfLastStep.className).toBe("fa fa-folder")
-	})
-})

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.ts

@@ -1,16 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
-
-@Component({
-	selector: "cc-hovered-node-path-panel",
-	templateUrl: "./hoveredNodePathPanel.component.html",
-	styleUrls: ["./hoveredNodePathPanel.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class HoveredNodePathPanelComponent {
-	hoveredNodePathPanelData$ = this.store.select(hoveredNodePathPanelDataSelector)
-
-	constructor(private store: Store<CcState>) {}
-}

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
-
-@NgModule({
-	imports: [CommonModule],
-	declarations: [HoveredNodePathPanelComponent],
-	exports: [HoveredNodePathPanelComponent]
-})
-export class HoveredNodePathPanelModule {}

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanelData.selector.spec.ts

@@ -1,26 +0,0 @@
-import { NodeType } from "../../../codeCharta.model"
-import { _getHoveredNodePathPanelData } from "./hoveredNodePathPanelData.selector"
-
-describe("hoveredNodePathPanelDataSelector", () => {
-	it("should return undefined when there is no hovered node", () => {
-		expect(_getHoveredNodePathPanelData()).toBe(undefined)
-	})
-
-	it("should return correct data for a file", () => {
-		expect(
-			_getHoveredNodePathPanelData({
-				path: "/root/a.ts",
-				type: NodeType.FILE
-			})
-		).toEqual({ path: ["root", "a.ts"], isFile: true })
-	})
-
-	it("should return correct data for a folder", () => {
-		expect(
-			_getHoveredNodePathPanelData({
-				path: "/root",
-				type: NodeType.FOLDER
-			})
-		).toEqual({ path: ["root"], isFile: false })
-	})
-})

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanelData.selector.ts

@@ -1,11 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { CodeMapNode } from "../../../codeCharta.model"
-import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
-
-export const _getHoveredNodePathPanelData = (hoveredNode?: Pick<CodeMapNode, "path" | "type">) =>
-	hoveredNode && {
-		path: hoveredNode.path.slice(1).split("/"),
-		isFile: hoveredNode.type === "File"
-	}
-
-export const hoveredNodePathPanelDataSelector = createSelector(hoveredNodeSelector, _getHoveredNodePathPanelData)

package/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.html

@@ -1,7 +0,0 @@
-<mat-progress-spinner
-	id="loading-gif-map"
-	[style.visibility]="(isLoadingMap$ | async) ? 'visible' : 'hidden'"
-	mode="indeterminate"
-	diameter="22"
-	title="Rendering map"
-></mat-progress-spinner>

package/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.scss

@@ -1,4 +0,0 @@
-cc-loading-map-progress-spinner {
-	display: inline-block;
-	vertical-align: middle;
-}