codecharta-visualization 1.113.0 → 1.115.0

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
@@ -158,6 +157,7 @@ export interface AppSettings {
 	screenshotToClipboardEnabled: boolean
 	colorLabels: colorLabelOptions
 	isColorMetricLinkedToHeightMetric: boolean
+	enableFloorLabels: boolean
 }
 
 export interface MapColors {
@@ -236,10 +236,7 @@ export interface BlacklistItem {
 	nodeType?: NodeType
 }
 
-export enum BlacklistType {
-	flatten = "flatten",
-	exclude = "exclude"
-}
+export type BlacklistType = "flatten" | "exclude"
 
 export interface MarkedPackage {
 	path: string

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/fileRoot.ts

@@ -0,0 +1,8 @@
+export const fileRoot = {
+	rootName: "root",
+	rootPath: `/root`,
+	updateRoot: (name: string) => {
+		fileRoot.rootName = name
+		fileRoot.rootPath = `/${name}`
+	}
+}

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

@@ -1,24 +1,25 @@
 import { TestBed } from "@angular/core/testing"
 import { LoadFileService } from "./loadFile.service"
 import { TEST_FILE_CONTENT } from "../../util/dataMocks"
-import { BlacklistType, CCFile, NodeMetricData, NodeType } from "../../codeCharta.model"
+import { CCFile, NodeMetricData, NodeType } from "../../codeCharta.model"
 import { removeFile, setDeltaReference, setFiles, setStandard } from "../../state/store/files/files.actions"
 import { ExportBlacklistType, ExportCCFile } from "../../codeCharta.api.model"
 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", () => {
@@ -58,7 +59,7 @@ describe("loadFileService", () => {
 	}
 
 	describe("loadFiles", () => {
-		mockedNodeMetricDataSelector.mockImplementation(() => metricData)
+		mockedMetricDataSelector.mockImplementation(() => ({ nodeMetricData: metricData }))
 
 		const expected: CCFile = {
 			fileMeta: {
@@ -153,8 +154,8 @@ describe("loadFileService", () => {
 			expect(isPartialState(state.getValue().files)).toBeTruthy()
 			expect(dialog.open).not.toHaveBeenCalled()
 
-			expect(LoadFileService.ROOT_NAME).toEqual(expected.map.name)
-			expect(LoadFileService.ROOT_PATH).toEqual(`/${expected.map.name}`)
+			expect(fileRoot.rootName).toBe(expected.map.name)
+			expect(fileRoot.rootPath).toBe(`/${expected.map.name}`)
 		})
 
 		it("should replace files with equal file name and checksum when loading new files", () => {
@@ -314,7 +315,7 @@ describe("loadFileService", () => {
 				}
 			])
 
-			const blacklist = [{ path: "foo", type: BlacklistType.flatten }]
+			const blacklist = [{ path: "foo", type: "flatten" }]
 			expect(getCCFiles(state.getValue().files)[0].settings.fileSettings.blacklist).toEqual(blacklist)
 		})
 
@@ -372,7 +373,7 @@ describe("loadFileService", () => {
 
 	it("should update its ROOT_PATH when reference file is being set to a file", () => {
 		codeChartaService.loadFiles([{ fileName: "FirstFile", content: validFileContent, fileSize: 42 }])
-		const updateRootDataSpy = jest.spyOn(LoadFileService, "updateRootData")
+		const updateRootDataSpy = jest.spyOn(fileRoot, "updateRoot")
 
 		const newReferenceFile = state.getValue().files[0].file
 		store.dispatch(setDeltaReference(newReferenceFile))

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"
@@ -12,11 +12,10 @@ import { loadFilesValidationToErrorDialog } from "../../util/loadFilesValidation
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
 import { enrichFileStatesAndRecentFilesWithValidationResults } from "./fileParser"
+import { fileRoot } from "./fileRoot"
 
 @Injectable({ providedIn: "root" })
-export class LoadFileService {
-	static ROOT_NAME = "root"
-	static ROOT_PATH = `/${LoadFileService.ROOT_NAME}`
+export class LoadFileService implements OnDestroy {
 	static readonly CC_FILE_EXTENSION = ".cc.json"
 
 	referenceFileSubscription = this.store
@@ -24,13 +23,17 @@ export class LoadFileService {
 		.pipe(
 			tap(newReferenceFile => {
 				if (newReferenceFile) {
-					LoadFileService.updateRootData(newReferenceFile.map.name)
+					fileRoot.updateRoot(newReferenceFile.map.name)
 				}
 			})
 		)
 		.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)
@@ -55,11 +58,6 @@ export class LoadFileService {
 		const rootName = this.state.getValue().files.find(f => f.file.fileMeta.fileName === recentFile).file.map.name
 		this.store.dispatch(setStandardByNames(recentFiles))
 
-		LoadFileService.updateRootData(rootName)
-	}
-
-	static updateRootData(rootName: string) {
-		LoadFileService.ROOT_NAME = rootName
-		LoadFileService.ROOT_PATH = `/${LoadFileService.ROOT_NAME}`
+		fileRoot.updateRoot(rootName)
 	}
 }

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/angular-redux/effects/createEffect.spec.ts

@@ -1,4 +1,3 @@
-import { mocked } from "ts-jest/utils"
 import { Subject } from "rxjs"
 import { Store } from "../../store/store"
 import { createEffect } from "./createEffect"
@@ -6,7 +5,7 @@ import { createEffect } from "./createEffect"
 jest.mock("../../store/store", () => ({
 	Store: {}
 }))
-const MockedStore = mocked(Store)
+const MockedStore = jest.mocked(Store)
 
 describe("createEffect", () => {
 	let source

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

@@ -3,7 +3,6 @@ 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"
@@ -40,21 +39,17 @@ describe("AddBlacklistItemsIfNotResultsInEmptyMapEffect", () => {
 	})
 
 	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" }]))
+		EffectsModule.actions$.next(addBlacklistItemsIfNotResultsInEmptyMap([{ type: "exclude", path: "foo/bar" }]))
+		expect(storeDispatchSpy).not.toHaveBeenCalledWith(addBlacklistItems([{ type: "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" }])
-		)
+		EffectsModule.actions$.next(addBlacklistItemsIfNotResultsInEmptyMap([{ type: "exclude", path: "/root/src/main/file1.java" }]))
 
-		expect(storeDispatchSpy).toHaveBeenCalledWith(
-			addBlacklistItems([{ type: BlacklistType.exclude, path: "/root/src/main/file1.java" }])
-		)
+		expect(storeDispatchSpy).toHaveBeenCalledWith(addBlacklistItems([{ type: "exclude", path: "/root/src/main/file1.java" }]))
 		expect(mockedDialog.open).not.toHaveBeenCalled()
 	})
 })

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

@@ -1,5 +1,5 @@
 import { hierarchy, HierarchyNode } from "d3-hierarchy"
-import { BlacklistItem, BlacklistType, CCFile, CodeMapNode } from "../../../codeCharta.model"
+import { BlacklistItem, CCFile, CodeMapNode } from "../../../codeCharta.model"
 import { FileState } from "../../../model/files/files"
 import { isLeaf, isPathBlacklisted } from "../../../util/codeMapHelper"
 
@@ -27,4 +27,4 @@ const resultsInEmptyFile = (file: CCFile, blacklist: BlacklistItem[]) => {
 }
 
 const isNodeIncluded = (node: HierarchyNode<CodeMapNode>, blacklist: Array<BlacklistItem>) =>
-	isLeaf(node) && node.data.path && !isPathBlacklisted(node.data.path, blacklist, BlacklistType.exclude)
+	isLeaf(node) && node.data.path && !isPathBlacklisted(node.data.path, blacklist, "exclude")

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

@@ -1,7 +1,6 @@
 import { ApplicationInitStatus } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
 import { Subject } from "rxjs"
-import { mocked } from "ts-jest/utils"
 import { ThreeOrbitControlsService } from "../../../ui/codeMap/threeViewer/threeOrbitControls.service"
 import { EffectsModule } from "../../angular-redux/effects/effects.module"
 import { Store } from "../../angular-redux/store"
@@ -15,7 +14,7 @@ import { AutoFitCodeMapEffect } from "./autoFitCodeMap.effect"
 jest.mock("../../store/appSettings/resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.selector", () => ({
 	resetCameraIfNewFileIsLoadedSelector: jest.fn()
 }))
-const mockedResetCameraIfNewFileIsLoadedSelector = mocked(resetCameraIfNewFileIsLoadedSelector)
+const mockedResetCameraIfNewFileIsLoadedSelector = jest.mocked(resetCameraIfNewFileIsLoadedSelector)
 
 describe("autoFitCodeMapOnFileSelectionChangeEffect", () => {
 	let mockedRenderCodeMap$: Subject<unknown>

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,23 +1,24 @@
-import { Component, Inject, Input } from "@angular/core"
-import { BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
+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(
 			addBlacklistItemsIfNotResultsInEmptyMap([
 				{
 					path: this.codeMapNode.path,
-					type: BlacklistType.exclude,
+					type: "exclude",
 					nodeType: this.codeMapNode.type
 				}
 			])

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.spec.ts

@@ -2,7 +2,7 @@ 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 { NodeType } from "../../../../codeCharta.model"
 import userEvent from "@testing-library/user-event"
 import { Store } from "../../../store/store"
 
@@ -27,7 +27,7 @@ describe("flattenButtonsComponent", () => {
 		expect(Store.store.getState().fileSettings.blacklist).toContainEqual({
 			nodeType: NodeType.FILE,
 			path: "/root/foo.ts",
-			type: BlacklistType.flatten
+			type: "flatten"
 		})
 	})
 
@@ -35,7 +35,7 @@ describe("flattenButtonsComponent", () => {
 		Store.store.getState().fileSettings.blacklist.push({
 			nodeType: NodeType.FILE,
 			path: "/root/foo.ts",
-			type: BlacklistType.flatten
+			type: "flatten"
 		})
 		await render(FlattenButtonsComponent, {
 			excludeComponentDeclaration: true,
@@ -49,7 +49,7 @@ describe("flattenButtonsComponent", () => {
 		expect(Store.store.getState().fileSettings.blacklist).not.toContainEqual({
 			nodeType: NodeType.FILE,
 			path: "/root/foo.ts",
-			type: BlacklistType.flatten
+			type: "flatten"
 		})
 	})
 })