codecharta-visualization 1.113.0 → 1.115.0

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

@@ -1,7 +1,6 @@
 import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
-import { mocked } from "ts-jest/utils"
 import { State } from "../../../state/angular-redux/state"
 import { Store } from "../../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
@@ -22,7 +21,7 @@ jest.mock("../../../state/store/dynamicSettings/colorRange/colorRange.selector",
 	colorRangeSelector: () => ({ from: 33, to: 66 })
 }))
 
-const mockedIsDeltaStateSelector = mocked(isDeltaStateSelector)
+const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
 
 describe("colorSettingsPanelComponent", () => {
 	mockedIsDeltaStateSelector.mockImplementation(() => false)

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 () => {

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

@@ -1,4 +1,3 @@
-import "./rangeSliderLabels.component.scss"
 import {
 	AfterViewChecked,
 	ChangeDetectionStrategy,
@@ -7,7 +6,7 @@ import {
 	ElementRef,
 	Input,
 	ViewChild,
-	Inject
+	ViewEncapsulation
 } from "@angular/core"
 import { SliderRangePosition } from "../utils/SliderRangePosition"
 
@@ -15,7 +14,9 @@ const minDistanceBetweenLabels = 4
 
 @Component({
 	selector: "cc-range-slider-labels",
-	template: require("./rangeSliderLabels.component.html"),
+	templateUrl: "./rangeSliderLabels.component.html",
+	styleUrls: ["./rangeSliderLabels.component.scss"],
+	encapsulation: ViewEncapsulation.None,
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RangeSliderLabelsComponent implements AfterViewChecked {
@@ -41,7 +42,7 @@ export class RangeSliderLabelsComponent implements AfterViewChecked {
 	rightLabel: number
 	combinedCurrentLeftRightLabelLeftPosition: number
 
-	constructor(@Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef) {}
+	constructor(private changeDetector: ChangeDetectorRef) {}
 
 	ngAfterViewChecked(): void {
 		this.updateLabelDisplays()

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

@@ -1,3 +1,3 @@
-cc-edge-metric-chooser cc-metric-chooser.is-edge-metric-disabled .mat-select-value {
+cc-edge-metric-chooser cc-metric-chooser.is-edge-metric-disabled .mat-mdc-select-value {
 	color: #808080;
 }

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

@@ -8,11 +8,13 @@ import { Store } from "../../../state/store/store"
 import { EdgeMetricChooserComponent } from "./edgeMetricChooser.component"
 import { EdgeMetricChooserModule } from "./edgeMetricChooser.module"
 
-jest.mock("../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector", () => ({
-	edgeMetricDataSelector: () => [
-		{ name: "aMetric", maxValue: 1 },
-		{ name: "bMetric", maxValue: 2 }
-	]
+jest.mock("../../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: () => ({
+		edgeMetricData: [
+			{ name: "aMetric", maxValue: 1 },
+			{ name: "bMetric", maxValue: 2 }
+		]
+	})
 }))
 
 describe("edgeMetricChooserComponent", () => {
@@ -27,7 +29,7 @@ describe("edgeMetricChooserComponent", () => {
 		await render(EdgeMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Edge Metric (highest value)")).not.toBe(null)
+		expect(screen.getByPlaceholderText("Edge 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/edgeMetricChooser/edgeMetricChooser.component.ts

@@ -1,5 +1,4 @@
-import "./edgeMetricChooser.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isEdgeMetricVisibleSelector } from "../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
 import { setEdgeMetric } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.actions"
@@ -8,14 +7,16 @@ import { hoveredEdgeValueSelector } from "./hoveredEdgeValue.selector"
 
 @Component({
 	selector: "cc-edge-metric-chooser",
-	template: require("./edgeMetricChooser.component.html")
+	templateUrl: "./edgeMetricChooser.component.html",
+	styleUrls: ["./edgeMetricChooser.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeMetricChooserComponent {
 	edgeMetric$ = this.store.select(edgeMetricSelector)
 	hoveredEdgeValue$ = this.store.select(hoveredEdgeValueSelector)
 	isEdgeMetricVisible$ = this.store.select(isEdgeMetricVisibleSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleEdgeMetricChanged(value: string) {
 		this.store.dispatch(setEdgeMetric(value))

package/app/codeCharta/ui/ribbonBar/edgeSettingsPanel/edgeMetricToggle/edgeMetricToggle.component.ts

@@ -1,5 +1,4 @@
-import "./edgeMetricToggle.component.scss"
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../../state/angular-redux/store"
 import { Observable } from "rxjs"
 import { isEdgeMetricVisibleSelector } from "../../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
@@ -7,12 +6,13 @@ import { toggleEdgeMetricVisible } from "../../../../state/store/appSettings/isE
 
 @Component({
 	selector: "cc-edge-metric-toggle",
-	template: require("./edgeMetricToggle.component.html")
+	templateUrl: "./edgeMetricToggle.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeMetricToggleComponent implements OnInit {
 	isEdgeMetricVisible$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.isEdgeMetricVisible$ = this.store.select(isEdgeMetricVisibleSelector)

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

@@ -1,5 +1,3 @@
-<cc-edge-metric-toggle></cc-edge-metric-toggle>
-
 <cc-slider
 	[title]="edgePreviewLabel$ | async"
 	[label]="'Preview'"
@@ -24,17 +22,18 @@
 	<cc-color-picker-for-map-color [mapColorFor]="'incomingEdge'"></cc-color-picker-for-map-color>
 </div>
 
-<div class="bottom-row">
-	<mat-checkbox
-		[checked]="showOnlyBuildingsWithEdges$ | async"
-		(change)="applyShowOnlyBuildingsWithEdges($event)"
-		[disabled]="(amountOfBuildingsWithSelectedEdgeMetric$ | async) === 0"
-	>
-		Only nodes with edges
-	</mat-checkbox>
+<mat-checkbox
+	[checked]="showOnlyBuildingsWithEdges$ | async"
+	(change)="applyShowOnlyBuildingsWithEdges($event)"
+	[disabled]="(amountOfBuildingsWithSelectedEdgeMetric$ | async) === 0"
+>
+	Only show nodes with edges
+</mat-checkbox>
+
+<cc-edge-metric-toggle></cc-edge-metric-toggle>
 
-	<cc-reset-settings-button
-		[settingsKeys]="['appSettings.showOnlyBuildingsWithEdges', 'appSettings.amountOfEdgePreviews', 'appSettings.edgeHeight']"
-		tooltip="Reset edge metric settings to their defaults"
-	></cc-reset-settings-button>
-</div>
+<cc-reset-settings-button
+	[settingsKeys]="['appSettings.showOnlyBuildingsWithEdges', 'appSettings.amountOfEdgePreviews', 'appSettings.edgeHeight']"
+	tooltip="Reset edge metric settings to their defaults"
+	label="Reset edge metric settings"
+></cc-reset-settings-button>

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

@@ -16,7 +16,7 @@ describe("edgeSettingsPanelComponent", () => {
 		expect(screen.getByText("Height")).toBeTruthy()
 		expect(screen.getByText("Outgoing Edge")).toBeTruthy()
 		expect(screen.getByText("Incoming Edge")).toBeTruthy()
-		expect(screen.getByText("Only nodes with edges")).toBeTruthy()
+		expect(screen.getByText("Only show nodes with edges")).toBeTruthy()
 		expect(screen.getByTitle("Reset edge metric settings to their defaults")).toBeTruthy()
 	})
 })

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatCheckboxChange } from "@angular/material/checkbox"
 import { map } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
@@ -12,7 +12,8 @@ import { amountOfBuildingsWithSelectedEdgeMetricSelector } from "./selectors/amo
 
 @Component({
 	selector: "cc-edge-settings-panel",
-	template: require("./edgeSettingsPanel.component.html")
+	templateUrl: "./edgeSettingsPanel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeSettingsPanelComponent {
 	amountOfBuildingsWithSelectedEdgeMetric$ = this.store.select(amountOfBuildingsWithSelectedEdgeMetricSelector)
@@ -26,7 +27,7 @@ export class EdgeSettingsPanelComponent {
 	edgeHeight$ = this.store.select(edgeHeightSelector)
 	showOnlyBuildingsWithEdges$ = this.store.select(showOnlyBuildingsWithEdgesSelector)
 
-	constructor(@Inject(Store) private store) {}
+	constructor(private store: Store) {}
 
 	applySettingsAmountOfEdgePreviews = (value: number) => {
 		this.store.dispatch(setAmountOfEdgePreviews(value))

package/app/codeCharta/ui/ribbonBar/edgeSettingsPanel/selectors/amountOfBuildingsWithSelectedEdgeMetric.selector.ts

@@ -1,8 +1,8 @@
 import { createSelector } from "../../../../state/angular-redux/createSelector"
-import { edgeMetricMapSelector } from "../../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { metricDataSelector } from "../../../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { edgeMetricSelector } from "../../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 
 export const amountOfBuildingsWithSelectedEdgeMetricSelector = createSelector(
-	[edgeMetricMapSelector, edgeMetricSelector],
-	(edgeMetricData, edgeMetric) => edgeMetricData.get(edgeMetric)?.size ?? 0
+	[metricDataSelector, edgeMetricSelector],
+	(metricData, edgeMetric) => metricData.nodeEdgeMetricsMap.get(edgeMetric)?.size ?? 0
 )

package/app/codeCharta/ui/ribbonBar/heightMetricChooser/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 { setHeightMetric } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.actions"
 import { heightMetricSelector } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
 
 @Component({
 	selector: "cc-height-metric-chooser",
-	template: require("./heightMetricChooser.component.html")
+	templateUrl: "./heightMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HeightMetricChooserComponent {
 	heightMetric$ = this.store.select(heightMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleHeightMetricChanged(value: string) {
 		this.store.dispatch(setHeightMetric(value))

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

@@ -7,11 +7,14 @@ import { Store } from "../../../state/store/store"
 import { HeightMetricChooserComponent } from "./areaMetricChooser.component"
 import { HeightMetricChooserModule } from "./heightMetricChooser.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("heightMetricChooserComponent", () => {
@@ -26,7 +29,7 @@ describe("heightMetricChooserComponent", () => {
 		await render(HeightMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Height Metric (highest value)")).not.toBe(null)
+		expect(screen.getByPlaceholderText("Height 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/heightSettingsPanel/heightSettingsPanel.component.html

@@ -13,17 +13,13 @@
 	[onChange]="applyDebouncedTopLabels"
 ></cc-slider>
 
-<div class="cc-height-settings-panel-row">
-	<mat-checkbox [checked]="showMetricLabelNodeName$ | async" (change)="setShowMetricLabelNodeName($event)"
-		>Show label node names
-	</mat-checkbox>
-</div>
+<mat-checkbox [checked]="showMetricLabelNodeName$ | async" (change)="setShowMetricLabelNodeName($event)"
+	>Show label node names
+</mat-checkbox>
 
-<div class="cc-height-settings-panel-row">
-	<mat-checkbox [checked]="showMetricLabelNodeValue$ | async" (change)="setShowMetricLabelNameValue($event)"
-		>Show label node metrics
-	</mat-checkbox>
-</div>
+<mat-checkbox [checked]="showMetricLabelNodeValue$ | async" (change)="setShowMetricLabelNameValue($event)"
+	>Show label node metrics
+</mat-checkbox>
 
 <cc-slider
 	class="cc-height-settings-panel-row"
@@ -36,12 +32,12 @@
 	[onChange]="applyDebouncedScalingY"
 ></cc-slider>
 
-<div class="cc-height-settings-panel-row cc-height-settings-panel-reset-row">
-	<mat-checkbox (change)="setInvertHeight($event)" *ngIf="!(isDeltaState$ | async)" [checked]="invertHeight$ | async">
-		Invert Height
-	</mat-checkbox>
-	<cc-reset-settings-button
-		[settingsKeys]="['appSettings.amountOfTopLabels', 'appSettings.scaling.y', 'appSettings.invertHeight']"
-		tooltip="Reset height metric settings to their defaults"
-	></cc-reset-settings-button>
-</div>
+<mat-checkbox (change)="setInvertHeight($event)" *ngIf="!(isDeltaState$ | async)" [checked]="invertHeight$ | async">
+	Invert Height
+</mat-checkbox>
+
+<cc-reset-settings-button
+	[settingsKeys]="['appSettings.amountOfTopLabels', 'appSettings.scaling.y', 'appSettings.invertHeight']"
+	tooltip="Reset height metric settings to their defaults"
+	label="Reset height metric settings"
+></cc-reset-settings-button>

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

@@ -27,7 +27,7 @@ describe("heightSettingsPanelComponent", () => {
 
 		const amountOfTopLabelsSlider = screen.getByTitle("Disabled because color labels are used")
 		const matSlider = amountOfTopLabelsSlider.querySelector("mat-slider")
-		expect(matSlider.getAttribute("aria-disabled")).toBe("true")
+		expect(matSlider.getAttribute("ng-reflect-disabled")).toBe("true")
 	})
 
 	it("should enable amount of top labels slider when there are no colorLabels", async () => {
@@ -35,7 +35,8 @@ describe("heightSettingsPanelComponent", () => {
 
 		const amountOfTopLabelsSlider = screen.getByTitle("Display the labels of the 1 highest buildings")
 		const matSlider = amountOfTopLabelsSlider.querySelector("mat-slider")
-		expect(matSlider.getAttribute("aria-disabled")).toBe("false")
+
+		expect(matSlider.getAttribute("ng-reflect-disabled")).toBe("false")
 	})
 
 	it("should not display invertHeight-checkbox when being in delta mode", async () => {

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

@@ -1,10 +1,7 @@
-import "./heightSettingsPanel.component.scss"
-
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { amountOfTopLabelsSelector } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.selector"
 import { isLabelsSliderDisabledSelector } from "./selectors/isLabelsSliderDisabled.selector"
-import { debounce } from "lodash"
 import { setAmountOfTopLabels } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
 import { showMetricLabelNodeNameSelector } from "../../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.selector"
 import { showMetricLabelNodeValueSelector } from "../../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.selector"
@@ -16,10 +13,12 @@ import { setScaling } from "../../../state/store/appSettings/scaling/scaling.act
 import { invertHeightSelector } from "../../../state/store/appSettings/invertHeight/invertHeight.selector"
 import { setInvertHeight } from "../../../state/store/appSettings/invertHeight/invertHeight.actions"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
+import { debounce } from "../../../util/debounce"
 
 @Component({
 	selector: "cc-height-settings-panel",
-	template: require("./heightSettingsPanel.component.html")
+	templateUrl: "./heightSettingsPanel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HeightSettingsPanelComponent {
 	static DEBOUNCE_TIME = 400
@@ -32,7 +31,7 @@ export class HeightSettingsPanelComponent {
 	invertHeight$ = this.store.select(invertHeightSelector)
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	applyDebouncedTopLabels = debounce((amountOfTopLabels: number) => {
 		this.store.dispatch(setAmountOfTopLabels(amountOfTopLabels))

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

@@ -1,5 +1,5 @@
 <button
-	title="{{ (isColorMetricLinkedToHeightMetric$ | async) ? 'Unlink Height And Color Metric' : 'Link Height And Color Metric' }}"
+	title="{{ (isColorMetricLinkedToHeightMetric$ | async) ? 'Unlink Height and Color Metric' : 'Link Height and Color Metric' }}"
 	class="link-metrics-button"
 	(click)="toggleIsColorMetricLinkedToHeightMetric()"
 >

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

@@ -1,9 +1,11 @@
 cc-link-color-metric-to-height-metric-button {
 	display: flex;
 	justify-content: center;
+	height: 100%;
 
 	.link-metrics-button {
 		width: 50px;
+		height: 100%;
 		padding: 0;
 		margin: 0;
 		background-color: transparent;

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

@@ -18,13 +18,13 @@ describe("linkHeightAndColorMetricComponent", () => {
 
 		expect(container.querySelector(".fa.fa-link")).not.toBe(null)
 		expect(container.querySelector(".fa.fa-chain-broken")).toBe(null)
-		expect(screen.queryByText("Unlink Height And Color Metric")).toBe(null)
+		expect(screen.queryByText("Unlink Height and Color Metric")).toBe(null)
 
-		await userEvent.click(screen.getByTitle("Link Height And Color Metric"))
+		await userEvent.click(screen.getByTitle("Link Height and Color Metric"))
 
 		expect(container.querySelector(".fa.fa-chain-broken")).not.toBe(null)
 		expect(container.querySelector(".fa.fa-link")).toBe(null)
-		expect(screen.getByTitle("Unlink Height And Color Metric")).not.toBe(null)
-		expect(screen.queryByText("Link Height And Color Metric")).toBe(null)
+		expect(screen.getByTitle("Unlink Height and Color Metric")).not.toBe(null)
+		expect(screen.queryByText("Link Height and Color Metric")).toBe(null)
 	})
 })