Refactor/2318/migrate distribution metric chooser (#2824)

migrate distribution chooser and distributionMetric.service

ref #2318

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Changed
 
 -   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)
+-   Display max value of selected distribution metric in file extension bar [#2824](https://github.com/MaibornWolff/codecharta/pull/2824)
 
 ### Fixed 🐞
 

visualization/app/app.module.ts

@@ -38,9 +38,9 @@ import { BlacklistSearchPatternEffect } from "./codeCharta/ui/searchPanel/search
 import { EdgeMetricToggleComponent } from "./codeCharta/ui/edgeSettingsPanel/edgeMetricToggle/edgeMetricToggle.component"
 import { SearchPanelComponent } from "./codeCharta/ui/searchPanel/searchPanel.component"
 import { SearchPanelModule } from "./codeCharta/ui/searchPanel/searchPanel.module"
-import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricValueHovered/metricValueHovered.module"
+import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooserDeprecated/metricValueHovered/metricValueHovered.module"
 import { UploadFilesButtonComponent } from "./codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component"
-import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooser/metricTypeHovered/metricTypeHovered.module"
+import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooserDeprecated/metricTypeHovered/metricTypeHovered.module"
 import { SliderModule } from "./codeCharta/ui/slider/slider.module"
 import { HeightSettingsPanelModule } from "./codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.module"
 import { MetricColorRangeSliderModule } from "./codeCharta/ui/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.module"
@@ -50,8 +50,11 @@ import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/
 import { CenterMapButtonModule } from "./codeCharta/ui/viewCube/centerMapButton/centerMapButton.module"
 import { GlobalConfigurationButtonModule } from "./codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module"
 import { SyncGlobalSettingsInLocalStorageEffect } from "./codeCharta/state/effects/syncGlobalSettingsInLocalStorage/syncGlobalSettingsInLocalStorage.effect"
+import { DistributionMetricChooserModule } from "./codeCharta/ui/fileExtensionBar/distributionMetricChooser/distributionMetricChooser..module"
 import { AreaSettingsPanelModule } from "./codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.module"
 import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect"
+import { MetricChooserModule } from "./codeCharta/ui/metricChooser/metricChooser.module"
+import { ResetChosenMetricsEffect } from "./codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect"
 
 @NgModule({
 	imports: [
@@ -65,7 +68,8 @@ import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynami
 			BlacklistSearchPatternEffect,
 			ResetColorRangeEffect,
 			SyncGlobalSettingsInLocalStorageEffect,
-			ResetDynamicMarginEffect
+			ResetDynamicMarginEffect,
+			ResetChosenMetricsEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,
@@ -87,7 +91,9 @@ import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynami
 		MetricColorRangeSliderModule,
 		CenterMapButtonModule,
 		GlobalConfigurationButtonModule,
-		AreaSettingsPanelModule
+		DistributionMetricChooserModule,
+		AreaSettingsPanelModule,
+		MetricChooserModule
 	],
 	providers: [
 		threeSceneServiceProvider,

visualization/app/codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect.spec.ts

@@ -0,0 +1,39 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { Subject } from "rxjs"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { Store } from "../../angular-redux/store"
+import { setDistributionMetric } from "../../store/dynamicSettings/distributionMetric/distributionMetric.actions"
+import { ResetChosenMetricsEffect } from "./resetChosenMetrics.effect"
+
+describe("resetChosenMetricsEffect", () => {
+	let mockedNodeMetricDataSelector = new Subject()
+	const mockedStore = {
+		select: () => mockedNodeMetricDataSelector,
+		dispatch: jest.fn()
+	}
+
+	beforeEach(async () => {
+		mockedStore.dispatch = jest.fn()
+		mockedNodeMetricDataSelector = new Subject()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([ResetChosenMetricsEffect])],
+			providers: [{ provide: Store, useValue: mockedStore }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		mockedNodeMetricDataSelector.complete()
+	})
+
+	it("should do nothing, when there are no metrics available", () => {
+		mockedNodeMetricDataSelector.next([])
+		expect(mockedStore.dispatch).not.toHaveBeenCalled()
+	})
+
+	it("should reset chosen distribution metric", () => {
+		mockedNodeMetricDataSelector.next([{ name: "rloc", maxValue: 9001 }])
+		expect(mockedStore.dispatch).toHaveBeenCalledWith(setDistributionMetric("rloc"))
+	})
+})

visualization/app/codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect.ts

@@ -0,0 +1,24 @@
+import { Inject, Injectable } from "@angular/core"
+import { tap } from "rxjs"
+import { isAnyMetricAvailable } from "./utils/metricHelper"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { Store } from "../../angular-redux/store"
+import { nodeMetricDataSelector } from "../../selectors/accumulatedData/metricData/nodeMetricData.selector"
+import { setDistributionMetric } from "../../store/dynamicSettings/distributionMetric/distributionMetric.actions"
+import { getDefaultDistribution } from "./utils/getDefaultDistributionMetric"
+
+@Injectable()
+export class ResetChosenMetricsEffect {
+	constructor(@Inject(Store) private store: Store) {}
+
+	resetChosenDistributionMetric$ = createEffect(() =>
+		this.store.select(nodeMetricDataSelector).pipe(
+			tap(nodeMetricData => {
+				if (isAnyMetricAvailable(nodeMetricData)) {
+					// when migrating area, height and color service, their resetting will be added here as well
+					this.store.dispatch(setDistributionMetric(getDefaultDistribution(nodeMetricData)))
+				}
+			})
+		)
+	)
+}

visualization/app/codeCharta/state/effects/resetChosenMetrics/utils/getDefaultDistribution.spec.ts

@@ -0,0 +1,11 @@
+import { getDefaultDistribution } from "./getDefaultDistributionMetric"
+
+describe("getDefaultDistribution", () => {
+	it("should default to 'rloc' if 'rloc' is present", () => {
+		expect(getDefaultDistribution([{ name: "rloc" }, { name: "unary" }])).toBe("rloc")
+	})
+
+	it("should default to 'unary' if 'rloc' is not present", () => {
+		expect(getDefaultDistribution([{ name: "unary" }])).toBe("unary")
+	})
+})

visualization/app/codeCharta/state/effects/resetChosenMetrics/utils/getDefaultDistributionMetric.ts

@@ -0,0 +1,4 @@
+import { NodeMetricData } from "../../../../codeCharta.model"
+
+export const getDefaultDistribution = (nodeMetricData: Pick<NodeMetricData, "name">[]) =>
+	nodeMetricData.some(element => element.name === "rloc") ? "rloc" : "unary"

visualization/app/codeCharta/state/effects/resetChosenMetrics/utils/metricHelper.spec.ts

@@ -0,0 +1,41 @@
+import { getMetricNameFromIndexOrLast, isAnyMetricAvailable, isMetricUnavailable } from "./metricHelper"
+
+describe("metricHelper", () => {
+	describe("isAnyMetricAvailable", () => {
+		it("should return true when there is a metric with a maxValue", () => {
+			expect(isAnyMetricAvailable([{ maxValue: 1 }])).toBe(true)
+		})
+
+		it("should return false when there is no metric available", () => {
+			expect(isAnyMetricAvailable([])).toBe(false)
+		})
+	})
+
+	describe("isMetricUnavailable", () => {
+		it("should return true, when given metric is not available", () => {
+			expect(isMetricUnavailable([{ name: "a", maxValue: 1 }], "b")).toBe(true)
+		})
+
+		it("should return false, when given metric is available", () => {
+			expect(isMetricUnavailable([{ name: "a", maxValue: 1 }], "a")).toBe(false)
+		})
+	})
+
+	describe("getMetricNameFromIndexOrLast", () => {
+		it("should return metric at given index if it exists", () => {
+			expect(
+				getMetricNameFromIndexOrLast(
+					[
+						{ name: "a", maxValue: 1 },
+						{ name: "b", maxValue: 2 }
+					],
+					0
+				)
+			).toBe("a")
+		})
+
+		it("should return metric at last index if given index is to large", () => {
+			expect(getMetricNameFromIndexOrLast([{ name: "a", maxValue: 1 }], 1)).toBe("a")
+		})
+	})
+})

visualization/app/codeCharta/state/effects/resetChosenMetrics/utils/metricHelper.ts

@@ -0,0 +1,13 @@
+import { NodeMetricData } from "../../../../codeCharta.model"
+
+export function isAnyMetricAvailable(metricData: Pick<NodeMetricData, "maxValue">[]) {
+	return metricData.some(x => x.maxValue > 0)
+}
+
+export function isMetricUnavailable(metricData: Pick<NodeMetricData, "maxValue" | "name">[], metricName: string) {
+	return !metricData.some(x => x.maxValue > 0 && x.name === metricName)
+}
+
+export function getMetricNameFromIndexOrLast<T extends Pick<NodeMetricData, "maxValue" | "name">>(metricData: T[], index: number) {
+	return metricData[index < metricData.length ? index : metricData.length - 1].name
+}

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

@@ -24,7 +24,6 @@ import { EdgeMetricService } from "./store/dynamicSettings/edgeMetric/edgeMetric
 import { MarginService } from "./store/dynamicSettings/margin/margin.service"
 import { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { HeightMetricService } from "./store/dynamicSettings/heightMetric/heightMetric.service"
-import { DistributionMetricService } from "./store/dynamicSettings/distributionMetric/distributionMetric.service"
 import { ColorMetricService } from "./store/dynamicSettings/colorMetric/colorMetric.service"
 import { AreaMetricService } from "./store/dynamicSettings/areaMetric/areaMetric.service"
 import { BlacklistService } from "./store/fileSettings/blacklist/blacklist.service"
@@ -62,7 +61,6 @@ export class InjectorService {
 		private marginService: MarginService,
 		private focusedNodePathService: FocusedNodePathService,
 		private heightMetricService: HeightMetricService,
-		private distributionMetricService: DistributionMetricService,
 		private colorMetricService: ColorMetricService,
 		private areaMetricService: AreaMetricService,
 		private blacklistService: BlacklistService,

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

@@ -22,7 +22,6 @@ import { EdgeMetricService } from "./store/dynamicSettings/edgeMetric/edgeMetric
 import { MarginService } from "./store/dynamicSettings/margin/margin.service"
 import { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { HeightMetricService } from "./store/dynamicSettings/heightMetric/heightMetric.service"
-import { DistributionMetricService } from "./store/dynamicSettings/distributionMetric/distributionMetric.service"
 import { ColorMetricService } from "./store/dynamicSettings/colorMetric/colorMetric.service"
 import { AreaMetricService } from "./store/dynamicSettings/areaMetric/areaMetric.service"
 import { BlacklistService } from "./store/fileSettings/blacklist/blacklist.service"
@@ -65,7 +64,6 @@ angular
 	.service(camelCase(MarginService.name), MarginService)
 	.service(camelCase(FocusedNodePathService.name), FocusedNodePathService)
 	.service(camelCase(HeightMetricService.name), HeightMetricService)
-	.service(camelCase(DistributionMetricService.name), DistributionMetricService)
 	.service(camelCase(ColorMetricService.name), ColorMetricService)
 	.service(camelCase(AreaMetricService.name), AreaMetricService)
 	.service(camelCase(IsPresentationModeService.name), IsPresentationModeService)

visualization/app/codeCharta/state/store/dynamicSettings/areaMetric/areaMetric.service.ts

@@ -2,7 +2,11 @@ import { StoreService, StoreSubscriber } from "../../../store.service"
 import { IRootScopeService } from "angular"
 import { AreaMetricActions, setAreaMetric } from "./areaMetric.actions"
 import { NodeMetricData } from "../../../../codeCharta.model"
-import { getMetricNameFromIndexOrLast, isAnyMetricAvailable, isMetricUnavailable } from "../../../../util/metricHelper"
+import {
+	getMetricNameFromIndexOrLast,
+	isAnyMetricAvailable,
+	isMetricUnavailable
+} from "../../../effects/resetChosenMetrics/utils/metricHelper"
 import { isActionOfType } from "../../../../util/reduxHelper"
 import { NodeMetricDataService, NodeMetricDataSubscriber } from "../../metricData/nodeMetricData/nodeMetricData.service"
 

visualization/app/codeCharta/state/store/dynamicSettings/colorMetric/colorMetric.service.ts

@@ -2,7 +2,11 @@ import { StoreService, StoreSubscriber } from "../../../store.service"
 import { IRootScopeService } from "angular"
 import { ColorMetricActions, setColorMetric } from "./colorMetric.actions"
 import { NodeMetricData } from "../../../../codeCharta.model"
-import { getMetricNameFromIndexOrLast, isAnyMetricAvailable, isMetricUnavailable } from "../../../../util/metricHelper"
+import {
+	getMetricNameFromIndexOrLast,
+	isAnyMetricAvailable,
+	isMetricUnavailable
+} from "../../../effects/resetChosenMetrics/utils/metricHelper"
 import { isActionOfType } from "../../../../util/reduxHelper"
 import { NodeMetricDataService, NodeMetricDataSubscriber } from "../../metricData/nodeMetricData/nodeMetricData.service"
 

visualization/app/codeCharta/state/store/dynamicSettings/distributionMetric/distributionMetric.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/createSelector"
+import { dynamicSettingsSelector } from "../dynamicSettings.selector"
+
+export const distributionMetricSelector = createSelector([dynamicSettingsSelector], dynamicSettings => dynamicSettings.distributionMetric)