Refactor/2318/clean up obsolete angularjs services

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 -   Migrate codeMap.component to Angular with minor internal improvements [#3049](https://github.com/MaibornWolff/codecharta/pull/3049)
 -   Remove threeUpdateCycle.service [#3050](https://github.com/MaibornWolff/codecharta/pull/3050)
+-   Migrate metricData.service, edgeMetric.service, nodeMetricData.service and edgeMetricData.service to Angular [#3051](https://github.com/MaibornWolff/codecharta/pull/3051)
 
 ## [1.106.1] - 2022-09-20
 

visualization/app/app.module.ts

@@ -48,6 +48,7 @@ import { RenderCodeMapEffect } from "./codeCharta/state/effects/renderCodeMapEff
 import { AutoFitCodeMapOnFileSelectionChangeEffect } from "./codeCharta/state/effects/autoFitCodeMapOnFileSelectionChange/autoFitCodeMapOnFileSelectionChange.effect"
 import { CodeChartaModule } from "./codeCharta/codeCharta.module"
 import { UpdateVisibleTopLabelsEffect } from "./codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect"
+import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./codeCharta/state/effects/resetSelectedEdgeMetricWhenItDoesntExistAnymore/resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect"
 
 @NgModule({
 	imports: [
@@ -65,7 +66,8 @@ import { UpdateVisibleTopLabelsEffect } from "./codeCharta/state/effects/updateV
 			UpdateEdgePreviewsEffect,
 			RenderCodeMapEffect,
 			AutoFitCodeMapOnFileSelectionChangeEffect,
-			UpdateVisibleTopLabelsEffect
+			UpdateVisibleTopLabelsEffect,
+			ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,

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

@@ -0,0 +1,78 @@
+import { TestBed } from "@angular/core/testing"
+import { ApplicationInitStatus } from "@angular/core"
+import { Subject } from "rxjs"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { Store } from "../../angular-redux/store"
+import { edgeMetricDataSelector } from "../../selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { edgeMetricSelector } from "../../store/dynamicSettings/edgeMetric/edgeMetric.selector"
+import { Store as PlainStoreUsedByEffects } from "../../store/store"
+import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect"
+import { setEdgeMetric } from "../../store/dynamicSettings/edgeMetric/edgeMetric.actions"
+
+describe("ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect", () => {
+	let mockedEdgeMetricDataSelector$ = new Subject()
+	let mockedEdgeMetricSelector$ = new Subject()
+	const mockedStore = {
+		select: (selector: unknown) => {
+			switch (selector) {
+				case edgeMetricDataSelector:
+					return mockedEdgeMetricDataSelector$
+				case edgeMetricSelector:
+					return mockedEdgeMetricSelector$
+				default:
+					throw new Error("selector is not mocked")
+			}
+		},
+		dispatch: jest.fn()
+	}
+
+	beforeEach(async () => {
+		mockedStore.dispatch = jest.fn()
+		PlainStoreUsedByEffects.store.dispatch = mockedStore.dispatch
+		mockedEdgeMetricDataSelector$ = new Subject()
+		mockedEdgeMetricSelector$ = new Subject()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect])],
+			providers: [{ provide: Store, useValue: mockedStore }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		mockedEdgeMetricDataSelector$.complete()
+		mockedEdgeMetricSelector$.complete()
+	})
+
+	it("should reset selected edge metric to first available, when current isn't available anymore", () => {
+		mockedEdgeMetricSelector$.next("avgCommits")
+		mockedEdgeMetricDataSelector$.next([{ name: "pairingRate" }])
+		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric("pairingRate"))
+	})
+
+	it("should do nothing, when current selected edge metric is still available", () => {
+		mockedEdgeMetricSelector$.next("avgCommits")
+		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		expect(mockedStore.dispatch).not.toHaveBeenCalled()
+	})
+
+	it("should not set reselect edge metric to null", () => {
+		mockedEdgeMetricSelector$.next("avgCommits")
+		mockedEdgeMetricDataSelector$.next([])
+		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric(undefined))
+
+		mockedEdgeMetricDataSelector$.next([])
+		expect(mockedStore.dispatch).toHaveBeenCalledTimes(1)
+	})
+
+	it("should reset when an edge metric becomes available again", () => {
+		mockedEdgeMetricSelector$.next("pairingRate")
+		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		expect(mockedStore.dispatch).toHaveBeenLastCalledWith(setEdgeMetric("avgCommits"))
+
+		mockedEdgeMetricDataSelector$.next([])
+		mockedEdgeMetricSelector$.next(null)
+		mockedEdgeMetricDataSelector$.next([{ name: "avgCommits" }])
+		expect(mockedStore.dispatch).toHaveBeenCalledTimes(3)
+		expect(mockedStore.dispatch.mock.calls[0][0]).toEqual(setEdgeMetric("avgCommits"))
+	})
+})

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

@@ -0,0 +1,22 @@
+import { Inject, Injectable } from "@angular/core"
+import { filter, withLatestFrom, map, distinctUntilChanged } from "rxjs"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { Store } from "../../angular-redux/store"
+import { edgeMetricDataSelector } from "../../selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { setEdgeMetric } from "../../store/dynamicSettings/edgeMetric/edgeMetric.actions"
+import { edgeMetricSelector } from "../../store/dynamicSettings/edgeMetric/edgeMetric.selector"
+
+@Injectable()
+export class ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect {
+	constructor(@Inject(Store) private store: Store) {}
+
+	resetSelectedEdgeMetricWhenItDoesntExistAnymore$ = createEffect(() =>
+		this.store.select(edgeMetricDataSelector).pipe(
+			withLatestFrom(this.store.select(edgeMetricSelector)),
+			filter(([edgeMetrics, selectedEdgeMetric]) => !edgeMetrics.some(metric => metric.name === selectedEdgeMetric)),
+			map(([edgeMetrics]) => edgeMetrics[0]?.name),
+			distinctUntilChanged(),
+			map(newEdgeMetric => setEdgeMetric(newEdgeMetric))
+		)
+	)
+}

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

@@ -1,7 +1,5 @@
 //@ts-nocheck
 
-import { EdgeMetricDataService } from "./store/metricData/edgeMetricData/edgeMetricData.service"
-import { NodeMetricDataService } from "./store/metricData/nodeMetricData/nodeMetricData.service"
 import { IsAttributeSideBarVisibleService } from "./store/appSettings/isAttributeSideBarVisible/isAttributeSideBarVisible.service"
 import { FilesService } from "./store/files/files.service"
 import { IsLoadingFileService } from "./store/appSettings/isLoadingFile/isLoadingFile.service"
@@ -11,20 +9,15 @@ import { ScalingService } from "./store/appSettings/scaling/scaling.service"
 import { MarkedPackagesService } from "./store/fileSettings/markedPackages/markedPackages.service"
 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 { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { BlacklistService } from "./store/fileSettings/blacklist/blacklist.service"
-import { MetricDataService } from "./store/metricData/metricData.service"
 import { ExperimentalFeaturesEnabledService } from "./store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.service"
 import { LayoutAlgorithmService } from "./store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
 import { SharpnessModeService } from "./store/appSettings/sharpnessMode/sharpnessMode.service"
 import { CodeMapRenderService } from "../ui/codeMap/codeMap.render.service"
 export class InjectorService {
 	constructor(
 		// We have to inject the services somewhere
-		private metricDataService: MetricDataService,
-		private edgeMetricDataService: EdgeMetricDataService,
-		private nodeMetricDataService: NodeMetricDataService,
 		private isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
 		private isLoadingFileService: IsLoadingFileService,
 		private filesService: FilesService,
@@ -34,7 +27,6 @@ export class InjectorService {
 		private markedPackagesService: MarkedPackagesService,
 		private edgesService: EdgesService,
 		private attributeTypesService: AttributeTypesService,
-		private edgeMetricService: EdgeMetricService,
 		private focusedNodePathService: FocusedNodePathService,
 		private blacklistService: BlacklistService,
 		private layoutAlgorithmService: LayoutAlgorithmService,

visualization/app/codeCharta/state/selectors/accumulatedData/metricData/nodeMetricData.selector.spec.ts

@@ -3,8 +3,7 @@ import { FileSelectionState, FileState } from "../../../../model/files/files"
 import { BlacklistType } from "../../../../codeCharta.model"
 import { NodeDecorator } from "../../../../util/nodeDecorator"
 import { clone } from "../../../../util/clone"
-import { NodeMetricDataService } from "../../../store/metricData/nodeMetricData/nodeMetricData.service"
-import { calculateNodeMetricData } from "./nodeMetricData.selector"
+import { calculateNodeMetricData, UNARY_METRIC } from "./nodeMetricData.selector"
 
 describe("nodeMetricDataSelector", () => {
 	let fileState: FileState
@@ -23,7 +22,7 @@ describe("nodeMetricDataSelector", () => {
 			{ maxValue: 1000, minValue: 10, name: "functions" },
 			{ maxValue: 100, minValue: 1, name: "mcc" },
 			{ maxValue: 100, minValue: 30, name: "rloc" },
-			{ maxValue: 1, minValue: 1, name: NodeMetricDataService.UNARY_METRIC }
+			{ maxValue: 1, minValue: 1, name: UNARY_METRIC }
 		]
 
 		const result = calculateNodeMetricData([fileState], [])
@@ -36,7 +35,7 @@ describe("nodeMetricDataSelector", () => {
 			{ maxValue: 1000, minValue: 100, name: "functions" },
 			{ maxValue: 100, minValue: 10, name: "mcc" },
 			{ maxValue: 70, minValue: 30, name: "rloc" },
-			{ maxValue: 1, minValue: 1, name: NodeMetricDataService.UNARY_METRIC }
+			{ maxValue: 1, minValue: 1, name: UNARY_METRIC }
 		]
 
 		const result = calculateNodeMetricData([fileState], [{ path: "root/big leaf", type: BlacklistType.exclude }])
@@ -47,15 +46,15 @@ describe("nodeMetricDataSelector", () => {
 	it("should always add unary metric if it's not included yet", () => {
 		const result = calculateNodeMetricData([fileState], [])
 
-		expect(result.filter(x => x.name === NodeMetricDataService.UNARY_METRIC)).toHaveLength(1)
+		expect(result.filter(x => x.name === UNARY_METRIC)).toHaveLength(1)
 	})
 
 	it("should not add unary metric a second time if the cc.json already contains unary", () => {
 		fileState.file.map = VALID_NODE_WITH_ROOT_UNARY
 
 		const result = calculateNodeMetricData([fileState], [])
 
-		expect(result.filter(x => x.name === NodeMetricDataService.UNARY_METRIC).length).toBe(1)
+		expect(result.filter(x => x.name === UNARY_METRIC).length).toBe(1)
 	})
 
 	it("should return empty metricData when there are no files selected. If it would contain default metrics someone might falsely assume all parsing was already done", () => {

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

@@ -5,10 +5,11 @@ import { FileState } from "../../../../model/files/files"
 import { isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
 import { createSelector } from "../../../angular-redux/store"
 import { blacklistSelector } from "../../../store/fileSettings/blacklist/blacklist.selector"
-import { NodeMetricDataService } from "../../../store/metricData/nodeMetricData/nodeMetricData.service"
 import { visibleFileStatesSelector } from "../../visibleFileStates.selector"
 import { sortByMetricName } from "./sortByMetricName"
 
+export const UNARY_METRIC = "unary"
+
 export const calculateNodeMetricData = (visibleFileStates: FileState[], blacklist: BlacklistItem[]) => {
 	if (visibleFileStates.length === 0) {
 		return []
@@ -39,8 +40,8 @@ export const calculateNodeMetricData = (visibleFileStates: FileState[], blacklis
 	const metricData: NodeMetricData[] = []
 
 	// TODO: Remove the unary metric.
-	metricMaxValues.set(NodeMetricDataService.UNARY_METRIC, 1)
-	metricMinValues.set(NodeMetricDataService.UNARY_METRIC, 1)
+	metricMaxValues.set(UNARY_METRIC, 1)
+	metricMinValues.set(UNARY_METRIC, 1)
 
 	for (const [key, value] of metricMaxValues) {
 		metricData.push({

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

@@ -1,5 +1,4 @@
 import angular from "angular"
-import { NodeMetricDataService } from "./store/metricData/nodeMetricData/nodeMetricData.service"
 import { IsAttributeSideBarVisibleService } from "./store/appSettings/isAttributeSideBarVisible/isAttributeSideBarVisible.service"
 import { IsLoadingFileService } from "./store/appSettings/isLoadingFile/isLoadingFile.service"
 import { FilesService } from "./store/files/files.service"
@@ -9,24 +8,18 @@ import { ScalingService } from "./store/appSettings/scaling/scaling.service"
 import { MarkedPackagesService } from "./store/fileSettings/markedPackages/markedPackages.service"
 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 { FocusedNodePathService } from "./store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { BlacklistService } from "./store/fileSettings/blacklist/blacklist.service"
 import { InjectorService } from "./injector.service"
 import { StoreService } from "./store.service"
 import "../codeCharta.module"
 import camelCase from "lodash.camelcase"
-import { EdgeMetricDataService } from "./store/metricData/edgeMetricData/edgeMetricData.service"
-import { MetricDataService } from "./store/metricData/metricData.service"
 import { ExperimentalFeaturesEnabledService } from "./store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.service"
 import { LayoutAlgorithmService } from "./store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
 import { SharpnessModeService } from "./store/appSettings/sharpnessMode/sharpnessMode.service"
 
 angular
 	.module("app.codeCharta.state", ["app.codeCharta"])
-	.service(camelCase(MetricDataService.name), MetricDataService)
-	.service(camelCase(EdgeMetricDataService.name), EdgeMetricDataService)
-	.service(camelCase(NodeMetricDataService.name), NodeMetricDataService)
 	.service(camelCase(IsAttributeSideBarVisibleService.name), IsAttributeSideBarVisibleService)
 	.service(camelCase(IsLoadingFileService.name), IsLoadingFileService)
 	.service(camelCase(FilesService.name), FilesService)
@@ -36,7 +29,6 @@ angular
 	.service(camelCase(MarkedPackagesService.name), MarkedPackagesService)
 	.service(camelCase(EdgesService.name), EdgesService)
 	.service(camelCase(AttributeTypesService.name), AttributeTypesService)
-	.service(camelCase(EdgeMetricService.name), EdgeMetricService)
 	.service(camelCase(FocusedNodePathService.name), FocusedNodePathService)
 	.service(camelCase(BlacklistService.name), BlacklistService)
 	.service(camelCase(InjectorService.name), InjectorService)