Refactor/2318/migrate range slider component

CHANGELOG.md

@@ -10,17 +10,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Changed
 
 -   Remove all mentions of regular `.cc` `.json` `.gz` file extensions from file panel and sidebar [#2793](https://github.com/MaibornWolff/codecharta/pull/2793)
+-   Hide color metric range-slider in color metric options of ribbon bar in delta mode instead of disabling it [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
 
 ### Fixed 🐞
 
 -   Update slider of area metric options correctly on changes of related input field [#2787](https://github.com/MaibornWolff/codecharta/pull/2787)
 -   Prevent invalid input for margin in area metric options to be submitted [#2799](https://github.com/MaibornWolff/codecharta/pull/2799)
+-   Handle invalid input of range-slider correctly [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
+-   Use real color range min value instead of 0 and take color range min value into account for calculating initial first third of positive color [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
+-   Fix range slider in case of min value equal to max value [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
 
 ### Chore 👨‍💻 👩‍💻
 
 -   Introduce custom angular material theme [#2784](https://github.com/MaibornWolff/codecharta/pull/2784)
 -   Migrate height-settings-panel-component [#2790](https://github.com/MaibornWolff/codecharta/pull/2790)
 -   Fully migrate custom-config-component [#2760](https://github.com/MaibornWolff/codecharta/pull/2760)
+-   Track not only changes to color metric options by slider but also by related input field [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
 
 ## [1.95.2] - 2022-04-19
 

visualization/app/app.module.ts

@@ -45,8 +45,10 @@ import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooser/metricTyp
 import { SliderModule } from "./codeCharta/ui/slider/slider.module"
 import { HeightSettingsPanelModule } from "./codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.module"
 import { ResetSettingsButtonModule } from "./codeCharta/ui/resetSettingsButton/resetSettingsButton.module"
+import { MetricColorRangeSliderModule } from "./codeCharta/ui/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.module"
 import { FilePanelModule } from "./codeCharta/ui/filePanel/filePanel.module"
 import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs.module"
+import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
 
 @NgModule({
 	imports: [
@@ -57,7 +59,8 @@ import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs
 			AddBlacklistItemsIfNotResultsInEmptyMapEffect,
 			OpenNodeContextMenuEffect,
 			TrackEventUsageDataEffect,
-			BlacklistSearchPatternEffect
+			BlacklistSearchPatternEffect,
+			ResetColorRangeEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,
@@ -76,7 +79,8 @@ import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs
 		CustomConfigsModule,
 		FilePanelModule,
 		HeightSettingsPanelModule,
-		ResetSettingsButtonModule
+		ResetSettingsButtonModule,
+		MetricColorRangeSliderModule
 	],
 	providers: [
 		threeSceneServiceProvider,

visualization/app/codeCharta/codeCharta.model.ts

@@ -183,8 +183,6 @@ export interface MapColors {
 export interface ColorRange {
 	from: number
 	to: number
-	min: number
-	max: number
 }
 
 export interface AttributeTypes {

visualization/app/codeCharta/state/injector.service.ts

@@ -23,7 +23,6 @@ import { MarkedPackagesService } from "./store/fileSettings/markedPackages/marke
 import { EdgesService } from "./store/fileSettings/edges/edges.service"
 import { AttributeTypesService } from "./store/fileSettings/attributeTypes/attributeTypes.service"
 import { EdgeMetricService } from "./store/dynamicSettings/edgeMetric/edgeMetric.service"
-import { ColorRangeService } from "./store/dynamicSettings/colorRange/colorRange.service"
 import { MarginService } from "./store/dynamicSettings/margin/margin.service"
 import { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { HeightMetricService } from "./store/dynamicSettings/heightMetric/heightMetric.service"
@@ -65,7 +64,6 @@ export class InjectorService {
 		private edgesService: EdgesService,
 		private attributeTypesService: AttributeTypesService,
 		private edgeMetricService: EdgeMetricService,
-		private colorRangeService: ColorRangeService,
 		private marginService: MarginService,
 		private focusedNodePathService: FocusedNodePathService,
 		private heightMetricService: HeightMetricService,

visualization/app/codeCharta/state/selectors/accumulatedData/metricData/nodeMetricRange.selector.ts

@@ -0,0 +1,20 @@
+import { createSelector } from "../../../angular-redux/createSelector"
+import { colorMetricSelector } from "../../../store/dynamicSettings/colorMetric/colorMetric.selector"
+import { CcState } from "../../../store/store"
+import { nodeMetricDataSelector } from "./nodeMetricData.selector"
+
+export type NodeMetricRange = {
+	minValue: number
+	maxValue: number
+}
+
+export const nodeMetricRangeSelector: (state: CcState) => NodeMetricRange = createSelector(
+	[nodeMetricDataSelector, colorMetricSelector],
+	(nodeMetricData, colorMetric) => {
+		const data = nodeMetricData.find(x => x.name === colorMetric)
+		return {
+			minValue: data?.minValue ?? 0,
+			maxValue: data?.maxValue ?? 0
+		}
+	}
+)

visualization/app/codeCharta/state/selectors/allNecessaryRenderDataAvailable/utils/areDynamicSettingsAvailable.spec.ts

@@ -11,7 +11,7 @@ describe("areDynamicSettingsAvailable", () => {
 
 	it("should return false when colorRange.from isn't set", () => {
 		const dynamicSettings = {
-			colorRange: { from: null, to: 25, min: 0, max: 100 }
+			colorRange: { from: null, to: 25 }
 		}
 		expect(areDynamicSettingsAvailable(dynamicSettings)).toBe(false)
 	})
@@ -28,7 +28,7 @@ describe("areDynamicSettingsAvailable", () => {
 			focusedNodePath: [],
 			searchPattern: "",
 			margin: 2,
-			colorRange: { from: 0, to: 25, min: 0, max: 100 },
+			colorRange: { from: 0, to: 25 },
 			recentFiles: ["test.cc.json"]
 		}
 		expect(areDynamicSettingsAvailable(dynamicSettings)).toBe(true)

visualization/app/codeCharta/state/state.module.ts

@@ -21,7 +21,6 @@ import { MarkedPackagesService } from "./store/fileSettings/markedPackages/marke
 import { EdgesService } from "./store/fileSettings/edges/edges.service"
 import { AttributeTypesService } from "./store/fileSettings/attributeTypes/attributeTypes.service"
 import { EdgeMetricService } from "./store/dynamicSettings/edgeMetric/edgeMetric.service"
-import { ColorRangeService } from "./store/dynamicSettings/colorRange/colorRange.service"
 import { MarginService } from "./store/dynamicSettings/margin/margin.service"
 import { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { HeightMetricService } from "./store/dynamicSettings/heightMetric/heightMetric.service"
@@ -68,7 +67,6 @@ angular
 	.service(camelCase(EdgesService.name), EdgesService)
 	.service(camelCase(AttributeTypesService.name), AttributeTypesService)
 	.service(camelCase(EdgeMetricService.name), EdgeMetricService)
-	.service(camelCase(ColorRangeService.name), ColorRangeService)
 	.service(camelCase(MarginService.name), MarginService)
 	.service(camelCase(FocusedNodePathService.name), FocusedNodePathService)
 	.service(camelCase(HeightMetricService.name), HeightMetricService)

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

@@ -6,16 +6,16 @@ export enum ColorRangeActions {
 
 export interface SetColorRangeAction extends CCAction {
 	type: ColorRangeActions.SET_COLOR_RANGE
-	payload: ColorRange
+	payload: Partial<ColorRange>
 }
 
 export type ColorRangeAction = SetColorRangeAction
 
-export function setColorRange(colorRange: ColorRange = defaultColorRange): SetColorRangeAction {
+export function setColorRange(colorRange: Partial<ColorRange> = defaultColorRange): SetColorRangeAction {
 	return {
 		type: ColorRangeActions.SET_COLOR_RANGE,
 		payload: colorRange
 	}
 }
 
-export const defaultColorRange: ColorRange = { from: null, to: null, min: null, max: null }
+export const defaultColorRange: ColorRange = { from: 0, to: 0 }

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

@@ -0,0 +1,7 @@
+import { _nodeMetricRangeToInitialColorRange } from "./resetColorRange.effect"
+
+describe("ColorRangeEffect", () => {
+	it("should split positive, neutral, negative to a third each", () => {
+		expect(_nodeMetricRangeToInitialColorRange({ minValue: 20, maxValue: 120 })).toEqual({ from: 53, to: 86 })
+	})
+})

visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.reducer.spec.ts

@@ -1,26 +1,16 @@
 import { colorRange } from "./colorRange.reducer"
-import { ColorRangeAction, setColorRange } from "./colorRange.actions"
+import { defaultColorRange, setColorRange } from "./colorRange.actions"
 
 describe("colorRange", () => {
-	describe("Default State", () => {
-		it("should initialize the default state", () => {
-			const result = colorRange(undefined, {} as ColorRangeAction)
+	it("should set new colorRange", () => {
+		const result = colorRange({ from: 0, to: 0 }, setColorRange({ from: 21, to: 42 }))
 
-			expect(result).toEqual({ from: null, to: null, min: null, max: null })
-		})
+		expect(result).toEqual({ from: 21, to: 42 })
 	})
 
-	describe("Action: SET_COLOR_RANGE", () => {
-		it("should set new colorRange", () => {
-			const result = colorRange({ from: null, to: null, min: null, max: null }, setColorRange({ from: 33, to: 66, min: 0, max: 10 }))
+	it("should set default colorRange", () => {
+		const result = colorRange({ from: 33, to: 66 }, setColorRange())
 
-			expect(result).toEqual({ from: 33, to: 66, min: 0, max: 10 })
-		})
-
-		it("should set default colorRange", () => {
-			const result = colorRange({ from: 33, to: 66, min: 0, max: 10 }, setColorRange())
-
-			expect(result).toEqual({ from: null, to: null, min: null, max: null })
-		})
+		expect(result).toEqual(defaultColorRange)
 	})
 })

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

@@ -1,9 +1,9 @@
-import { ColorRangeAction, ColorRangeActions, setColorRange } from "./colorRange.actions"
+import { ColorRangeAction, ColorRangeActions, defaultColorRange } from "./colorRange.actions"
 
-export function colorRange(state = setColorRange().payload, action: ColorRangeAction) {
+export function colorRange(state = defaultColorRange, action: ColorRangeAction) {
 	switch (action.type) {
 		case ColorRangeActions.SET_COLOR_RANGE:
-			return action.payload
+			return { ...state, ...action.payload }
 		default:
 			return state
 	}