codecharta-visualization 1.114.0 → 1.115.0

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.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.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))

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

@@ -1,28 +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>
-
-<mat-checkbox (change)="setEnableFloorLabel($event)" [checked]="enableFloorLabels$ | async"> Enable Floor Labels </mat-checkbox>
-
-<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,19 +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)
 
-	it("should display enableFloorLabels-checkbox", async () => {
-		await render(AreaSettingsPanelComponent, { excludeComponentDeclaration: true })
-		expect(screen.queryByText("Enable Floor Labels")).not.toBe(null)
+		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,38 +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) {}
-
-	setDynamicMargin($event: MatCheckboxChange) {
-		this.store.dispatch(setDynamicMargin($event.checked))
-	}
-
 	setEnableFloorLabel(event: MatCheckboxChange) {
 		this.store.dispatch(setEnableFloorLabels(event.checked))
 	}
+
+	toggleInvertingArea(event: MatCheckboxChange) {
+		this.store.dispatch(setInvertArea(event.checked))
+	}
 }