codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/codeCharta.component.html

@@ -10,14 +10,17 @@
 
 	<cc-loading-file-progress-spinner></cc-loading-file-progress-spinner>
 
-	<div id="mw-logo">
-		<div class="logo">
-			<a href="https://www.maibornwolff.de" target="_blank" rel="noopener noreferrer">
-				<img src="assets/logo.png" alt="MaibornWolff" rel="noopener noreferrer"
+	<div id="logos">
+		<div class="logos-wrapper">
+			<a href="https://github.com/MaibornWolff/codecharta" target="_blank" rel="noopener noreferrer">
+				<img src="codeCharta/assets/codecharta_logo.svg" alt="CodeCharta" rel="noopener noreferrer"
+			/></a>
+			<a id="mw-logo" href="https://www.maibornwolff.de" target="_blank" rel="noopener noreferrer">
+				<img src="codeCharta/assets/logo.png" alt="MaibornWolff" rel="noopener noreferrer"
 			/></a>
-			<h2>
-				<span>CodeCharta {{ version }}</span>
-			</h2>
 		</div>
+		<h2>
+			<span>CodeCharta Version {{ version }}</span>
+		</h2>
 	</div>
 </div>

package/app/codeCharta/codeCharta.component.scss

@@ -2,28 +2,33 @@
 @import "../mixins.scss";
 
 cc-code-charta {
-	#mw-logo {
-		.logo {
-			width: 160px;
-			height: 100px;
-			position: absolute;
-			left: 0;
-			bottom: 20px;
-			z-index: 1;
+	#logos {
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		left: 2em;
+		bottom: 2em;
+		z-index: 1;
+		.logos-wrapper {
+			display: flex;
+			flex-direction: row;
+			align-content: center;
+			align-items: center;
+			gap: 1em;
 		}
-
-		a,
 		img {
-			width: 7em;
-			display: block;
-			margin: auto !important;
+			object-fit: contain;
+			height: 100px;
+		}
+		#mw-logo {
+			img {
+				height: 58px;
+			}
 		}
-
 		h2 {
-			text-transform: uppercase;
 			color: #5a585a;
-			font-weight: 500;
-			font-size: 9pt;
+			font-weight: 600;
+			font-size: 14px;
 			text-align: center;
 			margin: 0;
 			margin-top: 9px;
@@ -52,45 +57,11 @@ cc-code-charta {
 		transition: right 0.3s ease;
 	}
 
-	.angular-green {
-		color: #00bfa5 !important;
-	}
-
 	.small-action-button {
 		display: inline-block;
 		height: 24px;
 		width: 24px;
 		vertical-align: top;
-
-		.md-fab {
-			min-height: 0;
-			width: 100%;
-			height: 100%;
-			margin: 0;
-
-			i {
-				position: absolute;
-				top: 5px;
-				left: 6px;
-			}
-		}
-
-		&.transparent .md-fab {
-			background-color: transparent !important;
-			box-shadow: none;
-
-			&:hover {
-				background-color: #ddd !important;
-			}
-		}
-	}
-
-	.md-button.round-button {
-		float: right;
-		min-width: 36px;
-		width: 36px;
-		border-radius: 50%;
-		margin: 0;
 	}
 
 	.state-selector-button {

package/app/codeCharta/codeCharta.component.ts

@@ -1,22 +1,20 @@
-import "./codeCharta.component.scss"
 import { setIsLoadingFile } from "./state/store/appSettings/isLoadingFile/isLoadingFile.actions"
 import packageJson from "../../package.json"
 import { LoadInitialFileService } from "./services/loadInitialFile/loadInitialFile.service"
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { Store } from "./state/angular-redux/store"
 
 @Component({
 	selector: "cc-code-charta",
-	template: require("./codeCharta.component.html")
+	templateUrl: "./codeCharta.component.html",
+	styleUrls: ["./codeCharta.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CodeChartaComponent implements OnInit {
 	version = packageJson.version
 	isInitialized = false
 
-	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(LoadInitialFileService) private loadInitialFileService: LoadInitialFileService
-	) {
+	constructor(private store: Store, private loadInitialFileService: LoadInitialFileService) {
 		window.addEventListener("load", () => {
 			this.isInitialized = true
 		})

package/app/codeCharta/codeCharta.model.ts

@@ -139,7 +139,6 @@ export interface AppSettings {
 	hideFlatBuildings: boolean
 	invertHeight: boolean
 	invertArea: boolean
-	dynamicMargin: boolean
 	isWhiteBackground: boolean
 	mapColors: MapColors
 	isPresentationMode: boolean

package/app/codeCharta/e2e/__snapshots__/logo.e2e.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeCharta logo should have correct image as logo 1`] = `
-Object {
-  "data": Array [
+{
+  "data": [
     137,
     80,
     78,

package/app/codeCharta/e2e/logo.po.ts

@@ -1,17 +1,17 @@
 export class LogoPageObject {
 	async getVersion() {
-		await page.waitForSelector("#mw-logo > div > h2 > span")
-		const versionString = await page.$eval("#mw-logo > div > h2 > span", element => element["innerText"])
-		return versionString.split(" ")[1]
+		await page.waitForSelector("#logos > h2 > span")
+		const versionString = await page.$eval("#logos > h2 > span", element => element["innerText"])
+		return versionString.split(" ")[2]
 	}
 
 	async getLink() {
-		await page.waitForSelector("#mw-logo > div > a")
-		return page.$eval("#mw-logo > div > a", element => element["href"])
+		await page.waitForSelector("#logos > .logos-wrapper > #mw-logo")
+		return page.$eval("#logos > .logos-wrapper >  #mw-logo", element => element["href"])
 	}
 
 	async getImageSrc() {
-		await page.waitForSelector("#mw-logo > div > a > img")
-		return page.$eval("#mw-logo > div > a > img", element => element["src"])
+		await page.waitForSelector("#mw-logo > img")
+		return page.$eval("#mw-logo > img", element => element["src"])
 	}
 }

package/app/codeCharta/e2e/url.e2e.ts

@@ -51,8 +51,8 @@ describe("codecharta", () => {
 	async function handleErrorDialog() {
 		const message = await dialogError.getMessage()
 		expect(message).toEqual("One or more files from the given file URL parameter could not be loaded. Loading sample files instead.")
-		await page.waitForSelector(".mat-dialog-container")
-		await dialogError.clickOkAndReturnWhenFullyClosed()
+		await page.waitForSelector(".mat-mdc-dialog-container")
+		await dialogError.clickOk()
 	}
 
 	async function checkSelectedFileName(shouldBe: string) {

package/app/codeCharta/index.d.ts

@@ -1,4 +1,4 @@
-declare module "*.html" {
+declare module "*.md" {
 	const content: string
 	export default content
 }

package/app/codeCharta/model/customConfig/customConfig.api.model.ts

@@ -25,6 +25,7 @@ export interface CustomConfig {
 		camera: Vector3
 		cameraTarget: Vector3
 	}
+	note?: string
 }
 
 export type ExportCustomConfig = CustomConfig

package/app/codeCharta/services/isAttributeSideBarVisible.service.ts

@@ -1,11 +1,11 @@
 import { ThreeSceneService } from "../ui/codeMap/threeViewer/threeSceneService"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 
 @Injectable({ providedIn: "root" })
 export class IsAttributeSideBarVisibleService {
 	isOpen = false
 
-	constructor(@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService) {
+	constructor(private threeSceneService: ThreeSceneService) {
 		this.threeSceneService.subscribe("onBuildingSelected", () => {
 			this.isOpen = true
 		})

package/app/codeCharta/services/loadFile/loadFile.service.spec.ts

@@ -8,18 +8,18 @@ import { getCCFiles, isPartialState } from "../../model/files/files.helper"
 import { CCFileValidationResult, ERROR_MESSAGES } from "../../util/fileValidator"
 import packageJson from "../../../../package.json"
 import { clone } from "../../util/clone"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
 import { klona } from "klona"
-import { MatDialog } from "@angular/material/dialog"
 import { ErrorDialogComponent } from "../../ui/dialogs/errorDialog/errorDialog.component"
 import { loadFilesValidationToErrorDialog } from "../../util/loadFilesValidationToErrorDialog"
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
 import { fileRoot } from "./fileRoot"
+import { MatDialog } from "@angular/material/dialog"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
-const mockedNodeMetricDataSelector = nodeMetricDataSelector as unknown as jest.Mock
-jest.mock("../../state/selectors/accumulatedData/metricData/nodeMetricData.selector", () => ({
-	nodeMetricDataSelector: jest.fn()
+const mockedMetricDataSelector = metricDataSelector as unknown as jest.Mock
+jest.mock("../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: jest.fn()
 }))
 
 describe("loadFileService", () => {
@@ -59,7 +59,7 @@ describe("loadFileService", () => {
 	}
 
 	describe("loadFiles", () => {
-		mockedNodeMetricDataSelector.mockImplementation(() => metricData)
+		mockedMetricDataSelector.mockImplementation(() => ({ nodeMetricData: metricData }))
 
 		const expected: CCFile = {
 			fileMeta: {

package/app/codeCharta/services/loadFile/loadFile.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Inject } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { tap } from "rxjs"
 import { MatDialog } from "@angular/material/dialog"
 import { clone } from "../../util/clone"
@@ -15,7 +15,7 @@ import { enrichFileStatesAndRecentFilesWithValidationResults } from "./fileParse
 import { fileRoot } from "./fileRoot"
 
 @Injectable({ providedIn: "root" })
-export class LoadFileService {
+export class LoadFileService implements OnDestroy {
 	static readonly CC_FILE_EXTENSION = ".cc.json"
 
 	referenceFileSubscription = this.store
@@ -29,7 +29,11 @@ export class LoadFileService {
 		)
 		.subscribe()
 
-	constructor(@Inject(Store) private store: Store, @Inject(State) private state: State, @Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private store: Store, private state: State, private dialog: MatDialog) {}
+
+	ngOnDestroy(): void {
+		this.referenceFileSubscription.unsubscribe()
+	}
 
 	loadFiles(nameDataPairs: NameDataPair[]) {
 		const fileStates: FileState[] = clone(this.state.getValue().files)

package/app/codeCharta/services/loadInitialFile/loadInitialFile.service.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { HttpClient } from "@angular/common/http"
-import { MatDialog } from "@angular/material/dialog"
 import { CCFile, LayoutAlgorithm } from "../../codeCharta.model"
 import { State } from "../../state/angular-redux/state"
 import { GLOBAL_SETTINGS } from "../../util/dataMocks"
@@ -13,6 +12,7 @@ import sample1 from "../../assets/sample1.cc.json"
 import sample2 from "../../assets/sample2.cc.json"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { setFiles } from "../../state/store/files/files.actions"
+import { MatDialog } from "@angular/material/dialog"
 
 describe("LoadInitialFileService", () => {
 	let loadInitialFileService: LoadInitialFileService

package/app/codeCharta/services/loadInitialFile/loadInitialFile.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Inject } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { HttpClient } from "@angular/common/http"
 import { NameDataPair } from "../../codeCharta.model"
@@ -19,11 +19,11 @@ export class LoadInitialFileService {
 	private urlUtils = new UrlExtractor(this.httpClient)
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(MatDialog) private dialog: MatDialog,
-		@Inject(LoadFileService) private loadFileService,
-		@Inject(HttpClient) private httpClient: HttpClient
+		private store: Store,
+		private state: State,
+		private dialog: MatDialog,
+		private loadFileService: LoadFileService,
+		private httpClient: HttpClient
 	) {}
 
 	async loadFileOrSample() {
@@ -32,7 +32,7 @@ export class LoadInitialFileService {
 			this.tryLoadingFiles(data)
 			this.setRenderStateFromUrl()
 		} catch (error) {
-			this.tryLoadingSampleFiles(error)
+			this.tryLoadingSampleFiles(error as Error & { statusText?: string; status?: number })
 		}
 	}
 

package/app/codeCharta/services/version/version.service.ts

@@ -1,5 +1,5 @@
 import packageJson from "../../../../package.json"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { ChangelogDialogComponent } from "../../ui/dialogs/changelogDialog/changelogDialog.component"
 import { compareVersion } from "./utils/compareVersion"
@@ -8,7 +8,7 @@ import { compareVersion } from "./utils/compareVersion"
 export class VersionService {
 	readonly version = packageJson.version
 
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	synchronizeLocalCodeChartaVersion() {
 		const savedPreviousVersion = localStorage.getItem("codeChartaVersion")

package/app/codeCharta/state/effects/autoFitCodeMapChange/autoFitCodeMap.effect.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { switchMap, filter, skip, take, tap, combineLatest } from "rxjs"
 import { ThreeOrbitControlsService } from "../../../ui/codeMap/threeViewer/threeOrbitControls.service"
 import { createEffect } from "../../angular-redux/effects/createEffect"
@@ -13,10 +13,10 @@ import { RenderCodeMapEffect } from "../renderCodeMapEffect/renderCodeMap.effect
 @Injectable()
 export class AutoFitCodeMapEffect {
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(RenderCodeMapEffect) private renderCodeMapEffect: RenderCodeMapEffect,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private store: Store,
+		private state: State,
+		private renderCodeMapEffect: RenderCodeMapEffect,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {}
 
 	autoFitTo$ = createEffect(

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

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Store } from "../../angular-redux/store"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { combineLatest, filter, map } from "rxjs"
@@ -9,7 +9,7 @@ import { heightMetricSelector } from "../../store/dynamicSettings/heightMetric/h
 
 @Injectable()
 export class LinkColorMetricToHeightMetricEffect {
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	linkHeightAndColorMetric$ = createEffect(() =>
 		combineLatest([this.store.select(heightMetricSelector), this.store.select(isColorMetricLinkedToHeightMetricSelector)]).pipe(

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

@@ -1,16 +1,17 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { 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")
+	templateUrl: "./excludeButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ExcludeButtonComponent {
 	@Input() codeMapNode: Pick<CodeMapNode, "path" | "type">
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	excludeNode() {
 		this.store.dispatch(

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

@@ -4,10 +4,10 @@
 	(click)="flattenNode()"
 	title="Flatten node and children-nodes, but keep an empty space"
 >
-	<img alt="flattenIcon" class="png-icon" src="../../../../../assets/flatten.png" />
+	<img alt="flattenIcon" class="png-icon" src="codeCharta/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" />
+	<img alt="flattenIcon" class="png-icon" src="codeCharta/assets/flatten.png" />
 	SHOW
 </button>

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

@@ -1,16 +1,17 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { 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")
+	templateUrl: "./flattenButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FlattenButtonsComponent {
 	@Input() codeMapNode: Pick<CodeMapNode, "path" | "type" | "isFlattened">
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	flattenNode() {
 		this.store.dispatch(

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable, map } from "rxjs"
 
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -9,7 +9,8 @@ import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedN
 
 @Component({
 	selector: "cc-focus-buttons",
-	template: require("./focusButtons.component.html")
+	templateUrl: "./focusButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FocusButtonsComponent {
 	@Input() codeMapNode: Pick<CodeMapNode, "path">
@@ -17,7 +18,7 @@ export class FocusButtonsComponent {
 	currentFocusedNodePath$: Observable<string | undefined>
 	hasPreviousFocusedNodePath$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.currentFocusedNodePath$ = this.store.select(currentFocusedNodePathSelector)
 		this.hasPreviousFocusedNodePath$ = this.store
 			.select(focusedNodePathSelector)

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

@@ -19,7 +19,7 @@ describe("flattenButtonsComponent", () => {
 		const idToBuilding = new IdToBuildingService()
 		idToBuilding.setIdToBuilding([{ id: 0, node: { id: 0 } } as unknown as CodeMapBuilding])
 
-		const { rerender } = await render(HighlightButtonsComponent, {
+		const { change } = await render(HighlightButtonsComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: { codeMapNode: { id: 0 } },
 			providers: [
@@ -31,14 +31,14 @@ describe("flattenButtonsComponent", () => {
 		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
 		await userEvent.click(screen.getByText("KEEP HIGHLIGHT"))
 
-		rerender({ codeMapNode: undefined })
-		rerender({ codeMapNode: { id: 0 } })
+		change({ codeMapNode: undefined })
+		change({ codeMapNode: { id: 0 } })
 
 		expect(screen.queryByText("KEEP HIGHLIGHT")).toBe(null)
 		await userEvent.click(screen.getByText("REMOVE HIGHLIGHT"))
 
-		rerender({ codeMapNode: undefined })
-		rerender({ codeMapNode: { id: 0 } })
+		change({ codeMapNode: undefined })
+		change({ codeMapNode: { id: 0 } })
 
 		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
 		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)

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

@@ -1,21 +1,19 @@
-import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from "@angular/core"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { IdToBuildingService } from "../../../../services/idToBuilding/idToBuilding.service"
 import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
 
 @Component({
 	selector: "cc-highlight-buttons",
-	template: require("./highlightButtons.component.html")
+	templateUrl: "./highlightButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HighlightButtonsComponent implements OnChanges {
 	@Input() codeMapNode: Pick<CodeMapNode, "id">
 
 	isHighlighted: boolean
 
-	constructor(
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(IdToBuildingService) private idToBuilding: IdToBuildingService
-	) {}
+	constructor(private threeSceneService: ThreeSceneService, private idToBuilding: IdToBuildingService) {}
 
 	ngOnChanges(changes: SimpleChanges): void {
 		if (changes.codeMapNode) {

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

@@ -1,5 +1,4 @@
-import "./markFolderRow.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../angular-redux/store"
 import { markPackages, unmarkPackage } from "../../../store/fileSettings/markedPackages/markedPackages.actions"
 import { Observable } from "rxjs"
@@ -9,13 +8,15 @@ import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.sele
 
 @Component({
 	selector: "cc-mark-folder-row",
-	template: require("./markFolderRow.component.html")
+	templateUrl: "./markFolderRow.component.html",
+	styleUrls: ["./markFolderRow.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MarkFolderRowComponent {
 	markFolderItems$: Observable<MarkFolderItem[]>
 	codeMapNode$: Observable<CodeMapNode>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.markFolderItems$ = store.select(markFolderItemsSelector)
 		this.codeMapNode$ = store.select(rightClickedCodeMapNodeSelector)
 	}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenu.service.ts

@@ -1,6 +1,6 @@
 import { Overlay, OverlayRef } from "@angular/cdk/overlay"
 import { ComponentPortal } from "@angular/cdk/portal"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Store } from "../../angular-redux/store"
 import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextMenuCard.component"
@@ -9,7 +9,7 @@ import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextM
 export class NodeContextMenuService {
 	private overlayReference: OverlayRef | null = null
 
-	constructor(@Inject(Overlay) private overlay: Overlay, @Inject(Store) private store: Store) {}
+	constructor(private overlay: Overlay, private store: Store) {}
 
 	open(x: number, y: number) {
 		if (this.overlayReference) {

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

@@ -1,4 +1,4 @@
-<mat-card id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
+<mat-card appearance="outlined" id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
 	<div *ngIf="codeMapNode?.children?.length > 0">
 		<cc-mark-folder-row></cc-mark-folder-row>
 		<mat-divider></mat-divider>

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

@@ -1,8 +1,10 @@
 #codemap-context-menu {
-	padding: 2px;
+	padding: 12px;
 
 	.button-group {
-		display: inline-grid;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
 		width: 100%;
 	}
 
@@ -19,16 +21,13 @@
 	[mat-button] {
 		width: 100%;
 		text-align: left;
-		margin-top: 0;
+		margin: 0;
+		justify-content: left;
 		line-height: 30px;
 		min-height: 30px;
 
 		i {
 			min-width: 15px;
 		}
-
-		&:not(:last-child) {
-			margin-bottom: 0;
-		}
 	}
 }