codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts

@@ -1,5 +1,4 @@
-import "./legendMarkedPackages.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable, map } from "rxjs"
 import { KeyValue } from "@angular/common"
 
@@ -11,13 +10,15 @@ type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackage
 
 @Component({
 	selector: "cc-legend-marked-packages",
-	template: require("./legendMarkedPackages.component.html")
+	templateUrl: "./legendMarkedPackages.component.html",
+	styleUrls: ["./legendMarkedPackages.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendMarkedPackagesComponent {
 	markedPackagesMap$: Observable<MarkedPackagesMap>
 	hasMarkedPackages$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.markedPackagesMap$ = store.select(legendMarkedPackagesSelector)
 		this.hasMarkedPackages$ = this.markedPackagesMap$.pipe(map(markedPackagesMap => Object.keys(markedPackagesMap).length > 0))
 	}

package/app/codeCharta/ui/legendPanel/legendPanel.component.html

@@ -1,10 +1,14 @@
 <div class="block-wrapper" [class.visible]="isLegendVisible" [class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen">
 	<div *ngIf="!(isDeltaState$ | async)">
-		<cc-legend-block [metricFor]="'Area'" [legendMetric]="areaMetric$ | async"></cc-legend-block>
-		<cc-legend-block [metricFor]="'Height'" [legendMetric]="heightMetric$ | async"></cc-legend-block>
-		<cc-legend-block *ngIf="edgeMetric$ | async; let edgeMetric" [metricFor]="'Edge'" [legendMetric]="edgeMetric"></cc-legend-block>
+		<cc-legend-block [metricDecorations]="areaMetric$ | async" [metricFor]="'Area'"></cc-legend-block>
+		<cc-legend-block [metricDecorations]="heightMetric$ | async" [metricFor]="'Height'"></cc-legend-block>
+		<cc-legend-block
+			*ngIf="edgeMetric$ | async; let edgeMetric"
+			[metricDecorations]="edgeMetric"
+			[metricFor]="'Edge'"
+		></cc-legend-block>
 		<hr />
-		<cc-legend-block [metricFor]="'Color'" [legendMetric]="colorMetric$ | async"></cc-legend-block>
+		<cc-legend-block [metricDecorations]="colorMetric$ | async" [metricFor]="'Color'"></cc-legend-block>
 		<cc-color-picker-for-map-color [mapColorFor]="'positive'"></cc-color-picker-for-map-color>
 		<cc-color-picker-for-map-color [mapColorFor]="'neutral'"></cc-color-picker-for-map-color>
 		<cc-color-picker-for-map-color [mapColorFor]="'negative'"></cc-color-picker-for-map-color>
@@ -31,9 +35,11 @@
 
 <button
 	mat-button
-	class="panel-button cc-mat-raised cc-shadow"
+	mat-raised-button
+	color="primary"
+	class="panel-button"
 	(click)="toggleIsLegendVisible()"
-	[class.isAttributeSideBarVisible]="isAttributeSideBarVisible$ | async"
+	[class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen"
 	title="{{ isLegendVisible ? 'Hide panel' : 'Show panel' }}"
 >
 	LEGEND

package/app/codeCharta/ui/legendPanel/legendPanel.component.spec.ts

@@ -4,6 +4,7 @@ import { expect } from "@jest/globals"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 import { LegendPanelComponent } from "./legendPanel.component"
 import { LegendPanelModule } from "./legendPanel.module"
+import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
 
 jest.mock("../../state/store/dynamicSettings/heightMetric/heightMetric.selector", () => ({
 	heightMetricSelector: () => "mcc"
@@ -69,6 +70,15 @@ describe("LegendPanelController", () => {
 		const metricDescriptions = container.querySelectorAll("cc-legend-block")
 		expect(metricDescriptions.length).toBe(0)
 	})
+
+	it("should add class 'isAttributeSideBarVisible' to opening button, when attribute sidebar is open", async () => {
+		const { container } = await render(LegendPanelComponent, {
+			excludeComponentDeclaration: true,
+			componentProviders: [{ provide: IsAttributeSideBarVisibleService, useValue: { isOpen: true } }]
+		})
+		const openingButton = container.querySelector(".panel-button")
+		expect(openingButton.classList).toContain("isAttributeSideBarVisible")
+	})
 })
 
 function isLegendPanelOpen(container: Element) {

package/app/codeCharta/ui/legendPanel/legendPanel.component.ts

@@ -1,5 +1,4 @@
-import "./legendPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 import { legendColorMetricSelector } from "./selectors/legendColorMetric.selector"
@@ -10,7 +9,9 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-legend-panel",
-	template: require("./legendPanel.component.html")
+	templateUrl: "./legendPanel.component.html",
+	styleUrls: ["./legendPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendPanelComponent {
 	isLegendVisible = false
@@ -20,10 +21,7 @@ export class LegendPanelComponent {
 	colorMetric$ = this.store.select(legendColorMetricSelector)
 	edgeMetric$ = this.store.select(legendEdgeMetricSelector)
 
-	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store
-	) {}
+	constructor(public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService, private store: Store) {}
 
 	toggleIsLegendVisible() {
 		this.isLegendVisible = !this.isLegendVisible

package/app/codeCharta/ui/legendPanel/selectors/legendAreaMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { areaMetricSelector } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
 
-export const legendAreaMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendAreaMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[areaMetricSelector, attributeDescriptorsSelector],
-	(areaMetric, attributeDescriptors) => getLegendMetric(areaMetric, attributeDescriptors)
+	(areaMetric, attributeDescriptors) => getMetricDescriptors(areaMetric, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendColorMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { colorMetricSelector } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
-export const legendColorMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendColorMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[colorMetricSelector, attributeDescriptorsSelector],
-	(colorMetric, attributeDescriptors) => getLegendMetric(colorMetric, attributeDescriptors)
+	(colorMetric, attributeDescriptors) => getMetricDescriptors(colorMetric, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendEdgeMetric.selector.spec.ts

@@ -44,9 +44,12 @@ describe("_getLegendEdgeMetric", () => {
 				TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED
 			)
 		).toEqual({
+			description: "Maximum cyclic complexity",
+			hintHighValue: "",
+			hintLowValue: "",
 			key: "mcc",
-			title: "Maximum Cyclic Complexity",
-			description: "Maximum cyclic complexity"
+			link: "https://www.npmjs.com/package/metric-gardener",
+			title: "Maximum Cyclic Complexity"
 		})
 
 		expect(
@@ -62,9 +65,12 @@ describe("_getLegendEdgeMetric", () => {
 				TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED
 			)
 		).toEqual({
+			description: "",
+			hintHighValue: "",
+			hintLowValue: "",
 			key: "rloc",
-			title: "Real Lines of Code",
-			description: ""
+			link: "https://www.npmjs.com/package/metric-gardener",
+			title: "Real Lines of Code"
 		})
 	})
 })

package/app/codeCharta/ui/legendPanel/selectors/legendEdgeMetric.selector.ts

@@ -1,10 +1,10 @@
 import { EdgeMetricData } from "../../../codeCharta.model"
 import { createSelector } from "../../../state/angular-redux/createSelector"
-import { edgeMetricDataSelector } from "../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
 import { edgeMetricSelector } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { metricDataSelector } from "../../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 export const _getLegendEdgeMetric = (edgeMetric: string, edgeMetricDatas: EdgeMetricData[], attributeDescriptors) => {
 	const edgeMetricData = edgeMetricDatas.find(someEdgeMetricData => {
@@ -15,10 +15,10 @@ export const _getLegendEdgeMetric = (edgeMetric: string, edgeMetricDatas: EdgeMe
 		return
 	}
 
-	return getLegendMetric(edgeMetric, attributeDescriptors)
+	return getMetricDescriptors(edgeMetric, attributeDescriptors)
 }
 
-export const legendEdgeMetricSelector: (state: CcState) => LegendMetric | undefined = createSelector(
-	[edgeMetricSelector, edgeMetricDataSelector, attributeDescriptorsSelector],
-	_getLegendEdgeMetric
+export const legendEdgeMetricSelector: (state: CcState) => MetricDescriptors | undefined = createSelector(
+	[edgeMetricSelector, metricDataSelector, attributeDescriptorsSelector],
+	(edgeMetric, metricData, attributeDescriptors) => _getLegendEdgeMetric(edgeMetric, metricData.edgeMetricData, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendHeightMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { heightMetricSelector } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
-export const legendHeightMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendHeightMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[heightMetricSelector, attributeDescriptorsSelector],
-	(heightMetric, attributeDescriptors) => getLegendMetric(heightMetric, attributeDescriptors)
+	(heightMetric, attributeDescriptors) => getMetricDescriptors(heightMetric, attributeDescriptors)
 )

package/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.scss

@@ -9,7 +9,7 @@ cc-loading-file-progress-spinner #loading-gif-file {
 	display: inline-block;
 	text-align: center;
 
-	mat-progress-spinner.mat-progress-spinner {
+	mat-progress-spinner.mat-mdc-progress-spinner {
 		display: inline-block;
 		margin: 22% auto 0;
 	}

package/app/codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component.ts

@@ -1,17 +1,18 @@
-import "./loadingFileProgressSpinner.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../state/angular-redux/store"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
 
 @Component({
 	selector: "cc-loading-file-progress-spinner",
-	template: require("./loadingFileProgressSpinner.component.html")
+	templateUrl: "./loadingFileProgressSpinner.component.html",
+	styleUrls: ["./loadingFileProgressSpinner.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LoadingFileProgressSpinnerComponent {
 	isLoadingFile$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.isLoadingFile$ = store.select(isLoadingFileSelector)
 	}
 }

package/app/codeCharta/ui/metricChooser/metricChooser.component.html

@@ -13,12 +13,11 @@
 		<mat-option
 			*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm: searchTerm"
 			[value]="option.name"
-			matTooltip="{{ metricDataDescription$.get(option.name) }}"
+			matTooltip="{{ metricDataDescription.get(option.name) }}"
 		>
 			{{ option.name }}
 			<span class="metric-max-value">({{ option.maxValue }})</span>
 		</mat-option>
 	</div>
 </mat-select>
-
 <ng-content select="[hoveredInformation]"></ng-content>

package/app/codeCharta/ui/metricChooser/metricChooser.component.scss

@@ -1,14 +1,13 @@
 @use "../../../material/theme";
 
 cc-metric-chooser {
-	position: relative;
 	width: 100%;
 
 	cc-metric-chooser-value-hovered,
 	.cc-metric-chooser-hovered-container {
 		position: absolute;
-		bottom: 0;
-		right: 0;
+		top: 10%;
+		right: 28px;
 
 		.metric-value {
 			height: 25px;
@@ -22,40 +21,50 @@ cc-metric-chooser {
 		}
 	}
 
-	.mat-select {
+	.mat-mdc-select {
 		border-bottom: none;
 	}
 }
 
-.mat-select-panel.cc-metric-chooser {
+.mat-mdc-select-panel.cc-metric-chooser {
 	margin-top: 16px;
-	width: 360px;
-	max-width: 360px;
+	overflow: hidden;
 
 	.cc-metric-chooser-search-field {
 		width: 100%;
-		color: theme.$cc-primary-color;
 		font-size: 14px;
+		padding: 0 6px;
 
 		.search-icon {
-			margin-right: 8px;
+			color: theme.$cc-primary-color;
 			margin-left: 8px;
 			font-size: 18px;
 		}
 
-		.mat-form-field-label {
-			margin-top: 4px;
+		.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+			display: none;
+		}
+
+		.mat-mdc-form-field-infix {
+			margin-left: 6px;
+			display: flex;
 		}
 	}
 
 	.cc-metric-chooser-option-container {
-		margin-top: -18px;
 		max-height: 216px;
 		overflow-y: auto;
 		font-size: 16px;
+		padding: 0 6px;
 
-		.metric-max-value {
+		mat-option .metric-max-value {
 			color: #ccc;
 		}
 	}
 }
+
+.cdk-overlay-pane:not(.mat-mdc-select-panel-above) .mdc-menu-surface.mat-mdc-select-panel {
+	min-width: 300px;
+	position: absolute;
+	right: 0;
+}

package/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts

@@ -6,12 +6,14 @@ import userEvent from "@testing-library/user-event"
 import { MetricChooserComponent } from "./metricChooser.component"
 import { MetricChooserModule } from "./metricChooser.module"
 
-jest.mock("../../state/selectors/accumulatedData/metricData/nodeMetricData.selector", () => ({
-	nodeMetricDataSelector: () => [
-		{ name: "aMetric", maxValue: 1 },
-		{ name: "bMetric", maxValue: 2 },
-		{ name: "cMetric", maxValue: 3 }
-	]
+jest.mock("../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: () => ({
+		nodeMetricData: [
+			{ name: "aMetric", maxValue: 1 },
+			{ name: "bMetric", maxValue: 2 },
+			{ name: "cMetric", maxValue: 3 }
+		]
+	})
 }))
 
 describe("metricChooserComponent", () => {
@@ -54,7 +56,7 @@ describe("metricChooserComponent", () => {
 		})
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		await screen.findByText("search metric (max value)")
+		screen.getByPlaceholderText("search metric (max value)")
 		const searchBox = getSearchBox()
 		expect(document.activeElement).toBe(searchBox)
 

package/app/codeCharta/ui/metricChooser/metricChooser.component.ts

@@ -1,17 +1,17 @@
-import "./metricChooser.component.scss"
-import { Component, ElementRef, Inject, Input, OnInit, ViewChild } from "@angular/core"
+import { Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
-import { Observable } from "rxjs"
+import { map, Observable } from "rxjs"
 import { EdgeMetricData, NodeMetricData } from "../../codeCharta.model"
-import { edgeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
 import { metricTitles } from "../../util/metric/metricTitles"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 type MetricChooserType = "node" | "edge"
 
 @Component({
 	selector: "cc-metric-chooser",
-	template: require("./metricChooser.component.html")
+	templateUrl: "./metricChooser.component.html",
+	styleUrls: ["./metricChooser.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricChooserComponent implements OnInit {
 	@Input() selectedMetricName: string
@@ -22,13 +22,14 @@ export class MetricChooserComponent implements OnInit {
 	@ViewChild("searchTermInput") searchTermInput: ElementRef<HTMLInputElement>
 	searchTerm = ""
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>
-	metricDataDescription$: Map<string, string>
+	metricDataDescription: Map<string, string> = metricTitles
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
-		this.metricData$ = this.store.select(this.type === "node" ? nodeMetricDataSelector : edgeMetricDataSelector)
-		this.metricDataDescription$ = metricTitles
+		this.metricData$ = this.store
+			.select(metricDataSelector)
+			.pipe(map(metricData => (this.type === "node" ? metricData.nodeMetricData : metricData.edgeMetricData)))
 	}
 
 	handleOpenedChanged(opened: boolean) {

package/app/codeCharta/ui/metricChooser/metricChooser.module.ts

@@ -8,7 +8,6 @@ import { MetricChooserComponent } from "./metricChooser.component"
 @NgModule({
 	imports: [CommonModule, MaterialModule, FormsModule],
 	declarations: [MetricChooserComponent, FilterMetricDataBySearchTermPipe],
-	exports: [MetricChooserComponent],
-	entryComponents: [MetricChooserComponent]
+	exports: [MetricChooserComponent]
 })
 export class MetricChooserModule {}

package/app/codeCharta/ui/metricChooser/metricChooserTypeHovered/metricChooserTypeHovered.component.spec.ts

@@ -1,12 +1,11 @@
 import { render } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { isHoveredNodeALeafSelector } from "./isHoveredNodeALeaf.selector"
 import { MetricChooserTypeHoveredComponent } from "./metricChooserTypeHovered.component"
 
 jest.mock("./isHoveredNodeALeaf.selector", () => ({
 	isHoveredNodeALeafSelector: jest.fn()
 }))
-const mockedIsHoveredNodeALeafSelector = mocked(isHoveredNodeALeafSelector)
+const mockedIsHoveredNodeALeafSelector = jest.mocked(isHoveredNodeALeafSelector)
 
 describe("metricChooserTypeHovered", () => {
 	it("should be hidden, when hovered node is a leaf", async () => {

package/app/codeCharta/ui/metricChooser/metricChooserTypeHovered/metricChooserTypeHovered.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from "@angular/core"
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { AttributeTypes, PrimaryMetrics } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
@@ -7,7 +7,8 @@ import { isHoveredNodeALeafSelector } from "./isHoveredNodeALeaf.selector"
 
 @Component({
 	selector: "cc-metric-chooser-type-hovered",
-	template: require("./metricChooserTypeHovered.component.html")
+	templateUrl: "./metricChooserTypeHovered.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricChooserTypeHoveredComponent implements OnInit {
 	@Input() metricFor: keyof PrimaryMetrics
@@ -16,7 +17,7 @@ export class MetricChooserTypeHoveredComponent implements OnInit {
 	isHoveredNodeALeaf$: Observable<boolean>
 	attributeType$: Observable<string>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.isHoveredNodeALeaf$ = this.store.select(isHoveredNodeALeafSelector)

package/app/codeCharta/ui/metricChooser/metricChooserValueHovered/metricChooserValueHovered.component.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { CodeMapNode } from "../../../codeCharta.model"
 import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
 import { MetricChooserValueHoveredComponent } from "./metricChooserValueHovered.component"
@@ -15,7 +14,7 @@ jest.mock("../../../state/selectors/primaryMetrics/primaryMetricNames.selector",
 jest.mock("../../../state/selectors/hoveredNode.selector", () => ({
 	hoveredNodeSelector: jest.fn()
 }))
-const mockedHoveredNodeSelector = mocked(hoveredNodeSelector)
+const mockedHoveredNodeSelector = jest.mocked(hoveredNodeSelector)
 
 describe("metricChooserValueHoveredComponent", () => {
 	beforeEach(() => {

package/app/codeCharta/ui/metricChooser/metricChooserValueHovered/metricChooserValueHovered.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { CodeMapNode, PrimaryMetrics } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
@@ -7,7 +7,8 @@ import { primaryMetricNamesSelector } from "../../../state/selectors/primaryMetr
 
 @Component({
 	selector: "cc-metric-chooser-value-hovered",
-	template: require("./metricChooserValueHovered.component.html")
+	templateUrl: "./metricChooserValueHovered.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricChooserValueHoveredComponent {
 	@Input() metricFor: keyof PrimaryMetrics
@@ -15,7 +16,7 @@ export class MetricChooserValueHoveredComponent {
 	hoveredNode$: Observable<CodeMapNode | undefined>
 	primaryMetricNames$: Observable<PrimaryMetrics>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.primaryMetricNames$ = store.select(primaryMetricNamesSelector)
 		this.hoveredNode$ = store.select(hoveredNodeSelector)
 	}

package/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.scss

@@ -1,11 +1,29 @@
+@use "../../../material/theme";
+
 cc-reset-settings-button {
 	button {
-		color: rgb(0, 150, 136);
+		color: theme.$cc-primary-color;
 		background: none;
-		padding: 8px;
+		align-items: center;
+		display: flex;
+		gap: 4px;
+		margin: 0;
+		padding: 0;
+
+		.fa {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 40px;
+			width: 40px;
+			font-size: 18px;
+		}
 
 		&:hover {
-			background-color: rgba(158, 158, 158, 0.2);
+			.fa {
+				border-radius: 100%;
+				background-color: rgba(158, 158, 158, 0.2);
+			}
 		}
 	}
 }

package/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.ts

@@ -1,13 +1,14 @@
-import "./resetSettingsButton.component.scss"
 import { setState } from "../../state/store/state.actions"
 import { getPartialDefaultState } from "./getPartialDefaultState"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
 
 @Component({
 	selector: "cc-reset-settings-button",
-	template: require("./resetSettingsButton.component.html")
+	templateUrl: "./resetSettingsButton.component.html",
+	styleUrls: ["./resetSettingsButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ResetSettingsButtonComponent {
 	@Input() settingsKeys: string[]
@@ -15,7 +16,7 @@ export class ResetSettingsButtonComponent {
 	@Input() label?: string
 	@Input() callback?: () => void
 
-	constructor(@Inject(Store) private store: Store, @Inject(State) private state: State) {}
+	constructor(private store: Store, private state: State) {}
 
 	applyDefaultSettings() {
 		const partialDefaultState = getPartialDefaultState(this.settingsKeys, this.state.getValue())

package/app/codeCharta/ui/ribbonBar/areaMetricChooser/areaMetricChooser.component.spec.ts

@@ -7,11 +7,14 @@ import { Store } from "../../../state/store/store"
 import { AreaMetricChooserComponent } from "./areaMetricChooser.component"
 import { AreaMetricChooserModule } from "./areaMetricChooser.module"
 
-jest.mock("../../../state/selectors/accumulatedData/metricData/nodeMetricData.selector", () => ({
-	nodeMetricDataSelector: () => [
-		{ name: "aMetric", maxValue: 1 },
-		{ name: "bMetric", maxValue: 2 }
-	]
+jest.mock("../../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: () => ({
+		nodeMetricData: [
+			{ name: "aMetric", maxValue: 1 },
+			{ name: "bMetric", maxValue: 2 }
+		],
+		edgeMetricData: []
+	})
 }))
 
 describe("areaMetricChooserComponent", () => {
@@ -26,7 +29,7 @@ describe("areaMetricChooserComponent", () => {
 		await render(AreaMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Area Metric (highest value)")).not.toBe(null)
+		expect(screen.getByPlaceholderText("Area Metric (highest value)")).not.toBe(null)
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")

package/app/codeCharta/ui/ribbonBar/areaMetricChooser/areaMetricChooser.component.ts

@@ -1,16 +1,17 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setAreaMetric } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.actions"
 import { areaMetricSelector } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
 
 @Component({
 	selector: "cc-area-metric-chooser",
-	template: require("./areaMetricChooser.component.html")
+	templateUrl: "./areaMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AreaMetricChooserComponent {
 	areaMetric$ = this.store.select(areaMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleAreaMetricChanged(value: string) {
 		this.store.dispatch(setAreaMetric(value))