fix: reset color range correctly within color settings panel (#2877)

* fix: reset color range correctly within color settings panel

ref #2874

Co-authored-by: Christian Spahn <45608151+Chrisp485@users.noreply.github.com>
Co-authored-by: Chrisp485 <cspahn@gmx.net>

CHANGELOG.md

@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Fixed 🐞
 
--   Restore global settings on page load again [#2878](https://github.com/MaibornWolff/codecharta/pull/2878)
+-   Fix resetting of color range within color settings panel [#2877](https://github.com/MaibornWolff/codecharta/pull/2877)
 -   Fix resetting of colors in delta mode within color settings panel [#2873](https://github.com/MaibornWolff/codecharta/pull/2873)
+-   Restore global settings on page load again [#2878](https://github.com/MaibornWolff/codecharta/pull/2878)
 
 ### Chore 👨‍💻 👩‍💻
 

visualization/app/codeCharta/codeCharta.model.ts

@@ -181,8 +181,10 @@ export interface MapColors {
 }
 
 export interface ColorRange {
-	from: number
-	to: number
+	/** null means to be reset */
+	from: number | null
+	/** null means to be reset */
+	to: number | null
 }
 
 export interface AttributeTypes {

visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.actions.ts

@@ -18,4 +18,4 @@ export function setColorRange(colorRange: Partial<ColorRange> = defaultColorRang
 	}
 }
 
-export const defaultColorRange: ColorRange = { from: 0, to: 0 }
+export const defaultColorRange: ColorRange = { from: null, to: null }

visualization/app/codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect.ts

@@ -1,6 +1,6 @@
 import { Inject, Injectable } from "@angular/core"
 import { combineLatest, filter, map } from "rxjs"
-import { isActionOfType } from "../../../../util/reduxHelper"
+import { isAction, isActionOfType } from "../../../../util/reduxHelper"
 import { createEffect } from "../../../angular-redux/effects/createEffect"
 import { Actions, ActionsToken } from "../../../angular-redux/effects/effects.module"
 import { Store } from "../../../angular-redux/store"
@@ -9,14 +9,19 @@ import {
 	selectedColorMetricDataSelector
 } from "../../../selectors/accumulatedData/metricData/selectedColorMetricData.selector"
 import { FilesSelectionActions } from "../../files/files.actions"
-import { ColorMetricActions } from "../colorMetric/colorMetric.actions"
-import { setColorRange } from "./colorRange.actions"
+import { ColorRangeActions, setColorRange, SetColorRangeAction } from "./colorRange.actions"
 
 @Injectable()
 export class ResetColorRangeEffect {
 	private selectedColorMetricData$ = this.store.select(selectedColorMetricDataSelector)
 	private resetActions$ = this.actions$.pipe(
-		filter(action => isActionOfType(action.type, FilesSelectionActions) || isActionOfType(action.type, ColorMetricActions))
+		filter(
+			action =>
+				isActionOfType(action.type, FilesSelectionActions) ||
+				(isAction<SetColorRangeAction>(action, ColorRangeActions.SET_COLOR_RANGE) &&
+					action.payload.from === null &&
+					action.payload.to === null)
+		)
 	)
 
 	constructor(@Inject(ActionsToken) private actions$: Actions, @Inject(Store) private store: Store) {}

visualization/app/codeCharta/ui/colorPickerForMapColor/mapColorLabel.pipe.spec.ts

@@ -35,4 +35,8 @@ describe("mapColorLabelPipe", () => {
 	it("should transform 'incomingEdge'", () => {
 		expect(new MapColorLabelPipe().transform("incomingEdge", colorRange, nodeMetricDataRange)).toBe("Incoming Edge")
 	})
+
+	it("should not throw when called with default null color range values", () => {
+		expect(() => new MapColorLabelPipe().transform("incomingEdge", { from: null, to: null }, nodeMetricDataRange)).not.toThrow()
+	})
 })

visualization/app/codeCharta/ui/colorPickerForMapColor/mapColorLabel.pipe.ts

@@ -6,6 +6,10 @@ import { MetricMinMax } from "../../state/selectors/accumulatedData/metricData/s
 @Pipe({ name: "mapColorLabel" })
 export class MapColorLabelPipe implements PipeTransform {
 	transform(metricName: keyof MapColors, colorRange: ColorRange, nodeMetricRange: MetricMinMax): string {
+		if (colorRange.from === null && colorRange.to === null) {
+			return ""
+		}
+
 		switch (metricName) {
 			case "positive":
 				return `${nodeMetricRange.minValue} to < ${this.formatNumber(colorRange.from)}`

visualization/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.spec.ts

@@ -12,6 +12,9 @@ import { ColorSettingsPanelModule } from "./colorSettingsPanel.module"
 jest.mock("../../../state/selectors/isDeltaState.selector", () => ({
 	isDeltaStateSelector: jest.fn()
 }))
+jest.mock("../../../state/store/dynamicSettings/colorRange/colorRange.selector", () => ({
+	colorRangeSelector: () => ({ from: 33, to: 66 })
+}))
 
 const mockedIsDeltaStateSelector = mocked(isDeltaStateSelector)