codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.component.html

@@ -1,26 +1,18 @@
-<cc-slider
-	title="Amount of space between buildings in percent"
-	label="Margin"
-	[value]="margin$ | async"
-	[onChange]="applyDebouncedMargin"
-	[min]="1"
-	[max]="100"
-></cc-slider>
-
-<div class="bottom-row">
-	<mat-checkbox
-		class="default-margin"
-		[checked]="dynamicMargin$ | async"
-		(change)="setDynamicMargin($event)"
-		title="Set margin to default (50px)."
-	>
-		Default margin (50px)
-	</mat-checkbox>
+<div class="options">
+	<cc-slider
+		title="Amount of space between buildings in percent"
+		label="Margin"
+		[value]="margin$ | async"
+		[onChange]="applyDebouncedMargin"
+		[min]="1"
+		[max]="100"
+	></cc-slider>
+	<mat-checkbox [checked]="enableFloorLabels$ | async" (change)="setEnableFloorLabel($event)">Enable Floor Labels</mat-checkbox>
+	<mat-checkbox [checked]="isInvertedArea$ | async" (change)="toggleInvertingArea($event)">Invert Area</mat-checkbox>
 
 	<cc-reset-settings-button
-		[settingsKeys]="['appSettings.dynamicMargin']"
+		[settingsKeys]="['dynamicSettings.margin', 'appSettings.invertArea', 'appSettings.enableFloorLabels']"
 		tooltip="Reset area metric settings to their defaults"
+		label="Reset area metric settings"
 	></cc-reset-settings-button>
 </div>
-
-<cc-invert-area-option></cc-invert-area-option>

package/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.component.scss

@@ -2,9 +2,18 @@ cc-area-settings-panel {
 	text-align: left;
 	max-height: 300px;
 
-	.bottom-row {
-		align-items: center;
+	.options {
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column;
+
+		.margin-option {
+			position: relative;
+
+			cc-reset-settings-button {
+				position: absolute;
+				top: -20%;
+				left: 20%;
+			}
+		}
 	}
 }

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

@@ -1,10 +1,12 @@
-import { AreaSettingsPanelComponent } from "./areaSettingsPanel.component"
-import { render, screen } from "@testing-library/angular"
-import { AreaSettingsPanelModule } from "./areaSettingsPanel.module"
-import { Store } from "../../../state/store/store"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
 import { TestBed } from "@angular/core/testing"
+import { MatInputHarness } from "@angular/material/input/testing"
+import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
-import { wait } from "../../../util/testUtils/wait"
+import { State } from "../../../state/angular-redux/state"
+import { CcState, Store } from "../../../state/store/store"
+import { AreaSettingsPanelComponent } from "./areaSettingsPanel.component"
+import { AreaSettingsPanelModule } from "./areaSettingsPanel.module"
 
 describe("AreaSettingsPanelComponent", () => {
 	beforeEach(() => {
@@ -14,14 +16,31 @@ describe("AreaSettingsPanelComponent", () => {
 		})
 	})
 
-	it("should reset default margin checkbox on changes of margin slider", async function () {
-		const { container, detectChanges } = await render(AreaSettingsPanelComponent, { excludeComponentDeclaration: true })
-		expect(screen.queryByRole("checkbox", { checked: true, name: "Default margin (50px)" })).not.toBe(null)
+	it("should allow for change and resetting of 'margin', 'enable floor label' and 'invert area'", async () => {
+		const { fixture } = await render(AreaSettingsPanelComponent, { excludeComponentDeclaration: true })
+		const loader = TestbedHarnessEnvironment.loader(fixture)
+		const state = TestBed.inject(State)
+		const initialValues = extractRelatedValues(state.getValue())
 
-		const marginInput = container.querySelector("input")
-		await userEvent.type(marginInput, "1")
-		await wait(AreaSettingsPanelComponent.DEBOUNCE_TIME)
-		detectChanges()
-		expect(screen.queryByRole("checkbox", { checked: false, name: "Default margin (50px)" })).not.toBe(null)
+		const marginInput = await loader.getHarness(MatInputHarness.with({ ancestor: 'cc-slider[label="Margin"]' }))
+		await marginInput.setValue(String(initialValues.margin + 1))
+		await userEvent.click(await screen.findByText("Enable Floor Labels"))
+		await userEvent.click(await screen.findByText("Invert Area"))
+		const changedValues = extractRelatedValues(state.getValue())
+		expect(changedValues.margin).toBe(initialValues.margin + 1)
+		expect(changedValues.enableFloorLabels).toBe(!initialValues.enableFloorLabels)
+		expect(changedValues.invertArea).toBe(!initialValues.invertArea)
+
+		await userEvent.click(await screen.findByText("Reset area metric settings"))
+		const resetValues = extractRelatedValues(state.getValue())
+		expect(resetValues).toEqual(initialValues)
 	})
+
+	function extractRelatedValues(state: CcState) {
+		return {
+			margin: state.dynamicSettings.margin,
+			enableFloorLabels: state.appSettings.enableFloorLabels,
+			invertArea: state.appSettings.invertArea
+		}
+	}
 })

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

@@ -1,31 +1,38 @@
-import { Component, Inject } from "@angular/core"
-import "./areaSettingsPanel.component.scss"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { marginSelector } from "../../../state/store/dynamicSettings/margin/margin.selector"
-import debounce from "lodash.debounce"
 import { setMargin } from "../../../state/store/dynamicSettings/margin/margin.actions"
-import { dynamicMarginSelector } from "../../../state/store/appSettings/dynamicMargin/dynamicMargin.selector"
-import { setDynamicMargin } from "../../../state/store/appSettings/dynamicMargin/dynamicMargin.actions"
 import { MatCheckboxChange } from "@angular/material/checkbox"
+import { setEnableFloorLabels } from "../../../state/store/appSettings/enableFloorLabels/enableFloorLabels.actions"
+import { enableFloorLabelsSelector } from "../../../state/store/appSettings/enableFloorLabels/enableFloorLabels.selector"
+import { invertAreaSelector } from "../../../state/store/appSettings/invertArea/invertArea.selector"
+import { debounce } from "../../../util/debounce"
+import { setInvertArea } from "../../../state/store/appSettings/invertArea/invertArea.actions"
 
 @Component({
 	selector: "cc-area-settings-panel",
-	template: require("./areaSettingsPanel.component.html")
+	templateUrl: "./areaSettingsPanel.component.html",
+	styleUrls: ["./areaSettingsPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AreaSettingsPanelComponent {
 	static DEBOUNCE_TIME = 400
 
 	margin$ = this.store.select(marginSelector)
-	dynamicMargin$ = this.store.select(dynamicMarginSelector)
+	enableFloorLabels$ = this.store.select(enableFloorLabelsSelector)
+	isInvertedArea$ = this.store.select(invertAreaSelector)
+
+	constructor(private store: Store) {}
 
 	applyDebouncedMargin = debounce((margin: number) => {
 		this.store.dispatch(setMargin(margin))
-		this.store.dispatch(setDynamicMargin(false))
 	}, AreaSettingsPanelComponent.DEBOUNCE_TIME)
 
-	constructor(@Inject(Store) private store: Store) {}
+	setEnableFloorLabel(event: MatCheckboxChange) {
+		this.store.dispatch(setEnableFloorLabels(event.checked))
+	}
 
-	setDynamicMargin($event: MatCheckboxChange) {
-		this.store.dispatch(setDynamicMargin($event.checked))
+	toggleInvertingArea(event: MatCheckboxChange) {
+		this.store.dispatch(setInvertArea(event.checked))
 	}
 }

package/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.module.ts

@@ -2,13 +2,12 @@ import { NgModule } from "@angular/core"
 import { CommonModule } from "@angular/common"
 import { MaterialModule } from "../../../../material/material.module"
 import { AreaSettingsPanelComponent } from "./areaSettingsPanel.component"
-import { InvertAreaOptionComponent } from "./invertAreaOption/invertAreaOption.component"
 import { SliderModule } from "../../slider/slider.module"
 import { ResetSettingsButtonModule } from "../../resetSettingsButton/resetSettingsButton.module"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule, SliderModule, ResetSettingsButtonModule],
-	declarations: [AreaSettingsPanelComponent, InvertAreaOptionComponent],
+	declarations: [AreaSettingsPanelComponent],
 	exports: [AreaSettingsPanelComponent]
 })
 export class AreaSettingsPanelModule {}

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/artificialIntelligence.component.scss

@@ -14,10 +14,9 @@ cc-artificial-intelligence {
 		line-height: 10px;
 	}
 }
-
-.mat-menu-panel.ai-drop-down {
+.mat-mdc-menu-panel.mat-mdc-menu-panel.ai-drop-down {
 	padding: 8px 16px;
-	max-width: unset;
+	max-width: 33em;
 
 	.title {
 		margin-bottom: 8px;

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

@@ -1,15 +1,16 @@
-import "./artificialIntelligence.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { debounceTime, identity, map } from "rxjs"
 import { artificialIntelligenceSelector } from "./selectors/artificialIntelligence.selector"
 
 @Component({
 	selector: "cc-artificial-intelligence",
-	template: require("./artificialIntelligence.component.html")
+	templateUrl: "./artificialIntelligence.component.html",
+	styleUrls: ["./artificialIntelligence.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ArtificialIntelligenceComponent {
 	data$ = this.store.select(identity).pipe(debounceTime(10), map(artificialIntelligenceSelector))
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/highRiskProfile/highRiskProfile.component.html

@@ -3,9 +3,18 @@
 </button>
 
 <mat-menu #menu="matMenu" class="ai-drop-down high-risk-profile">
-	<ng-container *ngIf="data.analyzedProgrammingLanguage !== undefined && data.analyzedProgrammingLanguage.length">
+	<ng-container *ngIf="data.riskProfile !== undefined">
 		<div class="title">
 			<div>Risk Profile</div>
+		</div>
+		<div class="suspicious-metrics-summary">
+			The Risk Profile gives a quick overview about the complexity and risk structure of the code base. It tells you how much of the
+			code is placed in files associated with low/high risk in means of maintainability. The separation of code in risk classes like
+			low or high complexity is based on Java reference metric values and therefore may be inaccurate for other programming languages.
+			More information can be found here:
+			<a href="https://maibornwolff.github.io/codecharta/docs/risk-profile/">link</a> to How-To article.
+		</div>
+		<div class="title">
 			<div>Calculations are always based on mcc (cyclomatic complexity)</div>
 		</div>
 		<div class="suspicious-metrics-summary">
@@ -47,7 +56,7 @@
 			</div>
 		</div>
 	</ng-container>
-	<ng-container *ngIf="data.analyzedProgrammingLanguage === undefined || data.analyzedProgrammingLanguage.length === 0">
-		Could not calculate Risk Profile. Metrics rloc and mcc not available.
+	<ng-container *ngIf="data.riskProfile === undefined">
+		Could not calculate Risk Profile. Metrics rloc(Real lines of code) and mcc(Cyclomatic complexity) not available.
 	</ng-container>
 </mat-menu>

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/highRiskProfile/highRiskProfile.component.spec.ts

@@ -57,7 +57,11 @@ describe("HighRiskProfileComponent", () => {
 
 		await userEvent.click(screen.getByTitle("Open High Risk Profile"))
 
-		expect(screen.getByText("Could not calculate Risk Profile. Metrics rloc and mcc not available.")).toBeTruthy()
+		expect(
+			screen.getByText(
+				"Could not calculate Risk Profile. Metrics rloc(Real lines of code) and mcc(Cyclomatic complexity) not available."
+			)
+		).toBeTruthy()
 	})
 
 	it("should explain that there couldn't be analyzed a risk profile even when analyzedProgrammingLanguage is undefined", async () => {
@@ -74,6 +78,10 @@ describe("HighRiskProfileComponent", () => {
 
 		await userEvent.click(screen.getByTitle("Open High Risk Profile"))
 
-		expect(screen.getByText("Could not calculate Risk Profile. Metrics rloc and mcc not available.")).toBeTruthy()
+		expect(
+			screen.getByText(
+				"Could not calculate Risk Profile. Metrics rloc(Real lines of code) and mcc(Cyclomatic complexity) not available."
+			)
+		).toBeTruthy()
 	})
 })

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/highRiskProfile/highRiskProfile.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { ArtificialIntelligenceData } from "../selectors/artificialIntelligence.selector"
 
 @Component({
 	selector: "cc-high-risk-profile",
-	template: require("./highRiskProfile.component.html")
+	templateUrl: "./highRiskProfile.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HighRiskProfileComponent {
 	@Input() data: Pick<ArtificialIntelligenceData, "analyzedProgrammingLanguage" | "riskProfile">

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/highRiskProfile/riskProfileBar.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
+import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from "@angular/core"
 
 @Directive({
 	selector: "[ccRiskProfileBar]"
@@ -6,7 +6,7 @@ import { Directive, ElementRef, Inject, Input, OnChanges, SimpleChanges } from "
 export class RiskProfileBarDirective implements OnChanges {
 	@Input() ccRiskProfileBar = 0
 
-	constructor(@Inject(ElementRef) private element: ElementRef) {}
+	constructor(private element: ElementRef) {}
 
 	ngOnChanges(changes: SimpleChanges) {
 		if (changes.ccRiskProfileBar) {

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/selectors/artificialIntelligence.selector.spec.ts

@@ -1,15 +1,10 @@
 import { calculate } from "./artificialIntelligence.selector"
 import { VALID_NODE_JAVA } from "../../../../util/dataMocks"
-import { BlacklistItem, BlacklistType, NodeType } from "../../../../codeCharta.model"
+import { BlacklistItem, NodeType } from "../../../../codeCharta.model"
 
 describe("ArtificialIntelligenceSelector", () => {
-	it("should return undefined when experimental features are disabled ", () => {
-		const actual = calculate(false, { unifiedMapNode: VALID_NODE_JAVA }, [])
-		expect(actual).toBeUndefined()
-	})
-
 	it("should calculate suspicious metrics and risk profile when experimental features are enabled ", () => {
-		const actual = calculate(true, { unifiedMapNode: VALID_NODE_JAVA }, [])
+		const actual = calculate({ unifiedMapNode: VALID_NODE_JAVA }, [])
 
 		expect(actual).toEqual({
 			analyzedProgrammingLanguage: "java",
@@ -24,11 +19,11 @@ describe("ArtificialIntelligenceSelector", () => {
 		})
 	})
 
-	it("should return untracked metrics when experimental features are enabled ", () => {
+	it("should return untracked metrics", () => {
 		VALID_NODE_JAVA.children[0].children.map(object => {
 			object.attributes.unknownMetric = 2569
 		})
-		const actual = calculate(true, { unifiedMapNode: VALID_NODE_JAVA }, [])
+		const actual = calculate({ unifiedMapNode: VALID_NODE_JAVA }, [])
 
 		expect(actual).toEqual({
 			analyzedProgrammingLanguage: "java",
@@ -43,8 +38,8 @@ describe("ArtificialIntelligenceSelector", () => {
 		})
 	})
 
-	it("should ignore excluded nodes when experimental features are enabled", () => {
-		const blacklist: BlacklistItem[] = [{ path: "file1.java", type: BlacklistType.exclude }]
+	it("should ignore excluded nodes", () => {
+		const blacklist: BlacklistItem[] = [{ path: "file1.java", type: "exclude" }]
 		const blacklistedNode = {
 			name: "file1.java",
 			path: "file1.java",
@@ -52,15 +47,10 @@ describe("ArtificialIntelligenceSelector", () => {
 			attributes: { rloc: 70, mcc: 1000 }
 		}
 
-		const actual = calculate(true, { unifiedMapNode: blacklistedNode }, blacklist)
+		const actual = calculate({ unifiedMapNode: blacklistedNode }, blacklist)
 
 		expect(actual).toEqual({
-			riskProfile: {
-				highRisk: 0,
-				lowRisk: 0,
-				moderateRisk: 0,
-				veryHighRisk: 0
-			},
+			riskProfile: undefined,
 			suspiciousMetricSuggestionLinks: [],
 			unsuspiciousMetrics: [],
 			untrackedMetrics: []

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/selectors/artificialIntelligence.selector.ts

@@ -14,12 +14,11 @@ import {
 	MetricValuesByLanguage
 } from "./util/suspiciousMetricsHelper"
 import { hierarchy } from "d3-hierarchy"
-import { BlacklistItem, BlacklistType, CodeMapNode, NodeType } from "../../../../codeCharta.model"
+import { BlacklistItem, CodeMapNode, NodeType } from "../../../../codeCharta.model"
 import { getMostFrequentLanguage } from "./util/mainProgrammingLanguageHelper"
 import { isPathBlacklisted } from "../../../../util/codeMapHelper"
 import { createSelector } from "../../../../state/angular-redux/createSelector"
 import { blacklistSelector } from "../../../../state/store/fileSettings/blacklist/blacklist.selector"
-import { experimentalFeaturesEnabledSelector } from "../../../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 import { CcState } from "../../../../state/store/store"
 import { AccumulatedData, accumulatedDataSelector } from "../../../../state/selectors/accumulatedData/accumulatedData.selector"
 
@@ -32,43 +31,40 @@ export type ArtificialIntelligenceData = {
 }
 
 export const calculate = (
-	experimentalFeaturesEnabled: boolean,
 	accumulatedData: Pick<AccumulatedData, "unifiedMapNode">,
 	blacklist: BlacklistItem[]
 ): ArtificialIntelligenceData | undefined => {
-	if (!experimentalFeaturesEnabled) {
-		return
-	}
-
 	const artificialIntelligenceViewModel: ArtificialIntelligenceData = {
 		analyzedProgrammingLanguage: undefined,
 		suspiciousMetricSuggestionLinks: [],
 		unsuspiciousMetrics: [],
 		untrackedMetrics: [],
-		riskProfile: { lowRisk: 0, moderateRisk: 0, highRisk: 0, veryHighRisk: 0 }
+		riskProfile: undefined
 	}
 
 	const numberOfFilesByLanguage = new Map<string, number>()
 	const rlocRisk = { lowRisk: 0, moderateRisk: 0, highRisk: 0, veryHighRisk: 0 }
 	let totalRloc = 0
+	let totalMcc = 0
 	const metricValuesByLanguage: MetricValuesByLanguage = {}
 
 	for (const { data } of hierarchy(accumulatedData.unifiedMapNode)) {
 		const fileExtension = getFileExtension(data.name)
-		if (data.type === NodeType.FILE && fileExtension !== undefined && !isPathBlacklisted(data.path, blacklist, BlacklistType.exclude)) {
+		if (data.type === NodeType.FILE && fileExtension !== undefined && !isPathBlacklisted(data.path, blacklist, "exclude")) {
 			const filesPerLanguage = numberOfFilesByLanguage.get(fileExtension) ?? 0
 			numberOfFilesByLanguage.set(fileExtension, filesPerLanguage + 1)
 			setMetricValuesByLanguage(data, metricValuesByLanguage, fileExtension)
 
 			if (isFileValid(data, fileExtension)) {
 				totalRloc += data.attributes[AREA_METRIC]
+				totalMcc += data.attributes[HEIGHT_METRIC]
 				aggregateRiskProfile(data, rlocRisk, fileExtension)
 			}
 		}
+	}
 
-		if (totalRloc > 0) {
-			artificialIntelligenceViewModel.riskProfile = getPercentagesOfRiskProfile(rlocRisk)
-		}
+	if (totalRloc > 0 && totalMcc > 0) {
+		artificialIntelligenceViewModel.riskProfile = getPercentagesOfRiskProfile(rlocRisk)
 	}
 
 	const mainProgrammingLanguage = getMostFrequentLanguage(numberOfFilesByLanguage)
@@ -97,6 +93,6 @@ function isFileValid(node: CodeMapNode, fileExtension: string) {
 }
 
 export const artificialIntelligenceSelector: (state: CcState) => ArtificialIntelligenceData = createSelector(
-	[experimentalFeaturesEnabledSelector, accumulatedDataSelector, blacklistSelector],
+	[accumulatedDataSelector, blacklistSelector],
 	calculate
 )

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.html

@@ -15,6 +15,16 @@
 
 <mat-menu #menu="matMenu" class="ai-drop-down suspicious-metric-panel">
 	<div *ngIf="data.unsuspiciousMetrics.length">
+		<div class="title">
+			<div>Suspicious Metrics</div>
+		</div>
+		<div class="suspicious-metric">
+			This feature compares the values of certain metrics from the loaded cc.json file with metric values of 241 Open Source Java
+			projects. Based on this data suspicious and inconspicuous metrics are identified and corresponding suggestions can be clicked to
+			view them. Be aware that metrics for other programming languages might not be comparable to Java Reference metric values. More
+			information can be found here:
+			<a href="https://maibornwolff.github.io/codecharta/docs/suspicious-metrics/">link</a> to How-To article.
+		</div>
 		<div class="title">
 			{{
 				data.analyzedProgrammingLanguage?.length
@@ -47,7 +57,7 @@
 	</div>
 
 	<div *ngIf="data.untrackedMetrics.length">
-		<div *ngIf="data.analyzedProgrammingLanguage.length" class="title new-section">
+		<div *ngIf="data.analyzedProgrammingLanguage.length" class="title">
 			Untracked metrics in {{ data.analyzedProgrammingLanguage }} code
 		</div>
 		<ul>

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.spec.ts

@@ -18,7 +18,7 @@ describe("SuspiciousMetricsComponent", () => {
 
 	describe("badge", () => {
 		it("should show initially and hide on first click, but show again when data has changed", async () => {
-			const { container, rerender } = await render(SuspiciousMetricComponent, {
+			const { container, change } = await render(SuspiciousMetricComponent, {
 				excludeComponentDeclaration: true,
 				componentProperties: {
 					data: {
@@ -34,7 +34,7 @@ describe("SuspiciousMetricsComponent", () => {
 			await userEvent.click(screen.getByTitle("Open Suspicious Metrics Panel"))
 			expect(container.querySelector(".suspicious-metrics-badge")).toBe(null)
 
-			rerender({
+			change({
 				data: {
 					analyzedProgrammingLanguage: "ts",
 					unsuspiciousMetrics: ["rloc"],
@@ -46,7 +46,7 @@ describe("SuspiciousMetricsComponent", () => {
 		})
 
 		it("should show initially and hide on first click, but not show again when new data has same values", async () => {
-			const { container, rerender } = await render(SuspiciousMetricComponent, {
+			const { container, change } = await render(SuspiciousMetricComponent, {
 				excludeComponentDeclaration: true,
 				componentProperties: {
 					data: {
@@ -62,7 +62,7 @@ describe("SuspiciousMetricsComponent", () => {
 			await userEvent.click(screen.getByTitle("Open Suspicious Metrics Panel"))
 			expect(container.querySelector(".suspicious-metrics-badge")).toBe(null)
 
-			rerender({
+			change({
 				data: {
 					analyzedProgrammingLanguage: "ts",
 					unsuspiciousMetrics: ["rloc", "mcc"],

package/app/codeCharta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.ts

@@ -1,5 +1,5 @@
-import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
-import isEqual from "lodash.isequal"
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from "@angular/core"
+import { dequal } from "dequal"
 import { Store } from "../../../../state/angular-redux/store"
 import { defaultMapColors, setMapColors } from "../../../../state/store/appSettings/mapColors/mapColors.actions"
 import { setAreaMetric } from "../../../../state/store/dynamicSettings/areaMetric/areaMetric.actions"
@@ -12,7 +12,8 @@ import { MetricSuggestionParameters } from "../selectors/util/suspiciousMetricsH
 
 @Component({
 	selector: "cc-suspicious-metrics",
-	template: require("./suspiciousMetrics.component.html")
+	templateUrl: "./suspiciousMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class SuspiciousMetricComponent implements OnChanges {
 	@Input() data: Pick<
@@ -21,10 +22,10 @@ export class SuspiciousMetricComponent implements OnChanges {
 	>
 	hideBadge = false
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnChanges(changes: SimpleChanges): void {
-		if (changes.data && !isEqual(changes.data.previousValue, changes.data.currentValue)) {
+		if (changes.data && !dequal(changes.data.previousValue, changes.data.currentValue)) {
 			this.hideBadge = false
 		}
 	}

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

@@ -8,11 +8,14 @@ import { ColorMetricChooserComponent } from "./colorMetricChooser.component"
 import { ColorMetricChooserModule } from "./heightMetricChooser.module"
 import { toggleIsColorMetricLinkedToHeightMetric } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
 
-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("colorMetricChooserComponent", () => {
@@ -31,7 +34,7 @@ describe("colorMetricChooserComponent", () => {
 		expect(screen.getByRole("combobox").getAttribute("aria-disabled")).toBe("false")
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Color Metric (highest value)")).not.toBe(null)
+		expect(screen.getByPlaceholderText("Color 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/colorMetricChooser/colorMetricChooser.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setColorMetric } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.actions"
 import { colorMetricSelector } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
@@ -6,7 +6,8 @@ import { isColorMetricLinkedToHeightMetricSelector } from "../../../state/store/
 
 @Component({
 	selector: "cc-color-metric-chooser",
-	template: require("./colorMetricChooser.component.html")
+	templateUrl: "./colorMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorMetricChooserComponent {
 	colorMetric$ = this.store.select(colorMetricSelector)
@@ -14,7 +15,7 @@ export class ColorMetricChooserComponent {
 	nonDisabledColor = "rgba(0, 0, 0, 0.38)"
 	disabledColor = "rgba(68,68,68, 1)"
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleColorMetricChanged(value: string) {
 		this.store.dispatch(setColorMetric(value))

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.html

@@ -1,21 +1,22 @@
 <cc-metric-color-range-slider *ngIf="!(isDeltaState$ | async)"></cc-metric-color-range-slider>
 
-<mat-select [value]="colorMode$ | async" (selectionChange)="handleColorModeChange($event.value)">
-	<div (mousedown)="$event.stopPropagation()">
-		<mat-option value="absolute">Absolute</mat-option>
-		<mat-option value="focusedGradient">Focused Gradient</mat-option>
-		<mat-option value="weightedGradient">Weighted Gradient</mat-option>
-		<mat-option value="trueGradient">True Gradient</mat-option>
-	</div>
-</mat-select>
-
 <cc-reset-settings-button
 	[settingsKeys]="['dynamicSettings.colorRange', 'appSettings.mapColors.positiveDelta', 'appSettings.mapColors.negativeDelta']"
 	tooltip="Reset slider thresholds to default"
 	label="Reset thresholds"
 ></cc-reset-settings-button>
 
-<mat-divider></mat-divider>
+<mat-form-field appearance="outline">
+	<mat-label>Gradient Mode</mat-label>
+	<mat-select [value]="colorMode$ | async" (selectionChange)="handleColorModeChange($event.value)">
+		<div (mousedown)="$event.stopPropagation()">
+			<mat-option value="absolute">Absolute</mat-option>
+			<mat-option value="focusedGradient">Focused Gradient</mat-option>
+			<mat-option value="weightedGradient">Weighted Gradient</mat-option>
+			<mat-option value="trueGradient">True Gradient</mat-option>
+		</div>
+	</mat-select>
+</mat-form-field>
 
 <ng-container *ngIf="!(isDeltaState$ | async)">
 	<div class="color-row">