codecharta-visualization 1.114.0 → 1.115.0

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

@@ -3,13 +3,8 @@ import { VALID_NODE_JAVA } from "../../../../util/dataMocks"
 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,7 +38,7 @@ describe("ArtificialIntelligenceSelector", () => {
 		})
 	})
 
-	it("should ignore excluded nodes when experimental features are enabled", () => {
+	it("should ignore excluded nodes", () => {
 		const blacklist: BlacklistItem[] = [{ path: "file1.java", type: "exclude" }]
 		const blacklistedNode = {
 			name: "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

@@ -19,7 +19,6 @@ 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,25 +31,21 @@ 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)) {
@@ -62,13 +57,14 @@ export const calculate = (
 
 			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">

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

@@ -1,23 +1,28 @@
 cc-color-settings-panel {
 	&.cc-metric-settings-panel {
-		width: 266px;
+		mat-form-field {
+			width: 100%;
+			margin: 12px 0px;
 
-		cc-reset-settings-button {
-			display: block;
+			.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+				padding: 10px;
+				min-height: 28px;
+
+				.mat-mdc-input-element {
+					min-height: inherit;
+				}
+			}
+
+			.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+				display: none;
+			}
 		}
 
 		.color-row {
 			display: flex;
+			align-items: center;
 			justify-content: space-between;
-		}
-
-		.invert-colors {
-			display: flex;
-			justify-content: end;
-		}
-
-		cc-reset-settings-button button {
-			margin: 0;
+			padding-right: 8px;
 		}
 	}
 }

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

@@ -1,5 +1,4 @@
-import "./colorSettingsPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { colorLabelOptions, ColorMode } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
@@ -12,7 +11,9 @@ import { invertColorRange, invertDeltaColors } from "../../../state/store/appSet
 
 @Component({
 	selector: "cc-color-settings-panel",
-	template: require("./colorSettingsPanel.component.html")
+	templateUrl: "./colorSettingsPanel.component.html",
+	styleUrls: ["./colorSettingsPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorSettingsPanelComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
@@ -21,7 +22,7 @@ export class ColorSettingsPanelComponent {
 	isColorRangeInverted = false
 	areDeltaColorsInverted = false
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleColorModeChange(gradient: ColorMode) {
 		this.store.dispatch(setColorMode(gradient))

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.component.ts

@@ -1,15 +1,16 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../../state/angular-redux/store"
 import { HandleValueChange } from "./rangeSlider/rangeSlider.component"
 import { setColorRange } from "../../../../state/store/dynamicSettings/colorRange/colorRange.actions"
-import debounce from "lodash.debounce"
 import { metricColorRangeSliderColorsSelector } from "./selectors/metricColorRangeSliderColors.selector"
 import { metricColorRangeSliderValuesSelector } from "./selectors/metricColorRangeSliderValues.selector"
 import { ColorRange } from "../../../../codeCharta.model"
+import { debounce } from "../../../../util/debounce"
 
 @Component({
 	selector: "cc-metric-color-range-slider",
-	template: require("./metricColorRangeSlider.component.html")
+	templateUrl: "./metricColorRangeSlider.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricColorRangeSliderComponent {
 	sliderValues$ = this.store.select(metricColorRangeSliderValuesSelector)
@@ -18,7 +19,7 @@ export class MetricColorRangeSliderComponent {
 	private newLeftValue: null | number = null
 	private newRightValue: null | number = null
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleValueChange: HandleValueChange = ({ newLeftValue, newRightValue }) => {
 		if (newLeftValue !== undefined) {

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

@@ -1,5 +1,5 @@
 <div class="cc-range-slider-container">
-	<mat-form-field>
+	<mat-form-field appearance="outline">
 		<input
 			matInput
 			type="number"
@@ -45,7 +45,7 @@
 		></cc-range-slider-labels>
 	</div>
 
-	<mat-form-field>
+	<mat-form-field appearance="outline">
 		<input
 			matInput
 			type="number"

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.scss

@@ -3,14 +3,29 @@
 cc-range-slider {
 	.cc-range-slider-container {
 		display: flex;
-
+		align-items: center;
 		mat-form-field {
-			width: 42px;
-			height: 48px;
+			height: 32px;
+
+			.mat-mdc-text-field-wrapper {
+				padding: 0px 4px;
+
+				.mat-mdc-form-field-flex {
+					align-self: center;
+
+					.mat-mdc-form-field-infix {
+						padding: 0px 0px;
+						min-height: 28px;
+
+						.mat-mdc-input-element {
+							min-height: inherit;
+						}
+					}
+				}
+			}
 
-			.mat-form-field-infix {
-				border-top-width: 0;
-				padding-top: 16px;
+			.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+				display: none;
 			}
 		}
 

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.ts

@@ -1,5 +1,4 @@
-import "./rangeSlider.component.scss"
-import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from "@angular/core"
+import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from "@angular/core"
 import { calculateSliderRangePosition, SliderRangePosition, updateLeftThumb, updateRightThumb } from "./utils/SliderRangePosition"
 import { parseNumberInput } from "../../../../../util/parseNumberInput"
 
@@ -8,7 +7,9 @@ export type CurrentlySliding = undefined | "leftThumb" | "rightThumb"
 
 @Component({
 	selector: "cc-range-slider",
-	template: require("./rangeSlider.component.html")
+	templateUrl: "./rangeSlider.component.html",
+	styleUrls: ["./rangeSlider.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class RangeSliderComponent implements OnChanges {
 	@Input() minValue: number
@@ -116,14 +117,14 @@ export class RangeSliderComponent implements OnChanges {
 		this.handleValueChange({ newRightValue: updates.upcomingValue })
 	}
 
-	handleCurrentLeftInputChanged($event: InputEvent) {
+	handleCurrentLeftInputChanged($event: Event) {
 		const newLeftValue = parseNumberInput($event, this.minValue, this.currentRightValue)
 		if (newLeftValue !== this.currentLeftValue) {
 			this.handleValueChange({ newLeftValue })
 		}
 	}
 
-	handleCurrentRightInputChanged($event: InputEvent) {
+	handleCurrentRightInputChanged($event: Event) {
 		const newRightValue = parseNumberInput($event, this.currentLeftValue, this.maxValue)
 		if (newRightValue !== this.currentRightValue) {
 			this.handleValueChange({ newRightValue })

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.spec.ts

@@ -19,7 +19,7 @@ describe("RangeSliderLabelsComponent", () => {
 			sliderWidth: 100,
 			sliderRangePosition: { leftEnd: leftValue, rightStart: rightValue }
 		}
-		const { fixture, rerender } = await render(RangeSliderLabelsComponent, {
+		const { fixture, change } = await render(RangeSliderLabelsComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties
 		})
@@ -29,7 +29,7 @@ describe("RangeSliderLabelsComponent", () => {
 			fixture.componentInstance[label].nativeElement.getBoundingClientRect = () => ({ width: 10 })
 		}
 		fixture.componentInstance.ngAfterViewChecked()
-		rerender(componentProperties)
+		change(componentProperties)
 	}
 
 	it("should display labels for min, currentLeft, currentRight and max value", async () => {