codecharta-visualization 1.119.1 → 1.120.0

package/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.ts

@@ -1,267 +0,0 @@
-import { Injectable, OnDestroy } from "@angular/core"
-import { ThreeSceneService } from "../threeViewer/threeSceneService"
-import { Node, EdgeVisibility, CcState } from "../../../codeCharta.model"
-import { ArrowHelper, BufferGeometry, CubicBezierCurve3, Line, LineBasicMaterial, Object3D, Vector3 } from "three"
-import { ColorConverter } from "../../../util/color/colorConverter"
-import { CodeMapBuilding } from "../rendering/codeMapBuilding"
-import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
-import { tap } from "rxjs"
-import { hoveredNodeIdSelector } from "../../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
-import { debounce } from "../../../util/debounce"
-import { Store, State } from "@ngrx/store"
-import { edgeVisibilitySelector } from "./utils/edgeVisibility.selector"
-
-@Injectable({ providedIn: "root" })
-export class CodeMapArrowService implements OnDestroy {
-	private map: Map<string, Node>
-	private VERTICES_PER_LINE = 5
-	private arrows: Object3D[] = new Array<Object3D>()
-	private HIGHLIGHT_BUILDING_DELAY = 1
-	private debounceCalculation: (hoveredBuilding: CodeMapBuilding) => void = debounce(
-		(hoveredBuilding: CodeMapBuilding) => this.resetEdgesOfBuildings(hoveredBuilding),
-		this.HIGHLIGHT_BUILDING_DELAY
-	)
-	private subscription = this.store
-		.select(hoveredNodeIdSelector)
-		.pipe(
-			tap(hoveredNodeId => {
-				if (hoveredNodeId !== null) {
-					const hoveredBuilding = this.idToBuildingService.get(hoveredNodeId)
-					this.onBuildingHovered(hoveredBuilding)
-				} else {
-					this.onBuildingUnhovered()
-				}
-			})
-		)
-		.subscribe()
-
-	constructor(
-		private store: Store<CcState>,
-		private state: State<CcState>,
-		private threeSceneService: ThreeSceneService,
-		private idToBuildingService: IdToBuildingService
-	) {
-		this.threeSceneService.subscribe("onBuildingSelected", this.onBuildingSelected)
-		this.threeSceneService.subscribe("onBuildingDeselected", this.onBuildingDeselected)
-	}
-
-	ngOnDestroy(): void {
-		this.subscription.unsubscribe()
-	}
-
-	private resetEdgesOfBuildings = (hoveredBuilding: CodeMapBuilding) => {
-		if (this.isEdgeApplicableForBuilding(hoveredBuilding)) {
-			this.clearArrows()
-			this.showEdgesOfBuildings(hoveredBuilding)
-		}
-		this.scale()
-	}
-
-	onBuildingSelected = (data: { building: CodeMapBuilding }) => {
-		if (this.isEdgeApplicableForBuilding(data.building)) {
-			this.clearArrows()
-			this.showEdgesOfBuildings()
-		}
-		this.scale()
-	}
-
-	onBuildingDeselected = () => {
-		this.clearArrows()
-		this.addEdgePreview()
-	}
-
-	onBuildingHovered(hoveredBuilding: CodeMapBuilding) {
-		this.debounceCalculation(hoveredBuilding)
-	}
-
-	onBuildingUnhovered() {
-		const { isEdgeMetricVisible } = this.state.getValue().appSettings
-
-		if (isEdgeMetricVisible) {
-			this.clearArrows()
-			this.showEdgesOfBuildings()
-		}
-		this.scale()
-	}
-
-	clearArrows() {
-		this.arrows = []
-		// Remove all children
-		this.threeSceneService.edgeArrows.children.length = 0
-	}
-
-	addArrow(arrowTargetNode: Node, arrowOriginNode: Node, buildingIsOriginNode: boolean) {
-		const { appSettings, dynamicSettings } = this.state.getValue()
-		const curveScale = 100 * appSettings.edgeHeight
-
-		if (arrowTargetNode.attributes?.[dynamicSettings.heightMetric] && arrowOriginNode.attributes?.[dynamicSettings.heightMetric]) {
-			const curve = this.createCurve(arrowOriginNode, arrowTargetNode, curveScale)
-			const color = ColorConverter.getNumber(appSettings.mapColors[buildingIsOriginNode ? "outgoingEdge" : "incomingEdge"])
-			this.highlightBuilding(buildingIsOriginNode ? arrowTargetNode : arrowOriginNode)
-			this.setCurveColor(curve, color)
-		}
-	}
-
-	addEdgePreview(nodes?: Node[]) {
-		if (!nodes) {
-			return
-		}
-
-		this.map = this.getNodesAsMap(nodes)
-
-		const edges = edgeVisibilitySelector(this.state.getValue())
-
-		for (const edge of edges) {
-			const originNode = this.map.get(edge.fromNodeName)
-			const targetNode = this.map.get(edge.toNodeName)
-			if (originNode && targetNode && edge.visible !== EdgeVisibility.none && edge.visible) {
-				//TODO It seems originNode or targetNode might be undefined here,
-				// I think it results from the method being called multiple times when it might not be available yet
-				// I changed that back to avoid console errors and re-enable the edge-metric, however we should investigate why this is happening
-				const curveScale = 100 * this.state.getValue().appSettings.edgeHeight
-				const curve = this.createCurve(originNode, targetNode, curveScale)
-				this.previewMode(curve, edge.visible)
-			}
-		}
-	}
-
-	scale() {
-		const { scaling } = this.state.getValue().appSettings
-		for (const arrow of this.arrows) {
-			arrow.scale.x = scaling.x
-			arrow.scale.y = scaling.y
-			arrow.scale.z = scaling.z
-		}
-	}
-
-	private isEdgeApplicableForBuilding(codeMapBuilding: CodeMapBuilding) {
-		return this.state.getValue().appSettings.isEdgeMetricVisible && codeMapBuilding && !codeMapBuilding.node.flat
-	}
-
-	private showEdgesOfBuildings(hoveredbuilding?: CodeMapBuilding) {
-		const buildings: Map<string, Node> = new Map()
-		const selectedBuilding = this.threeSceneService.getSelectedBuilding()
-
-		if (selectedBuilding) {
-			const { node } = selectedBuilding
-			buildings.set(node.path, node)
-		}
-		if (hoveredbuilding) {
-			const { node } = hoveredbuilding
-			buildings.set(node.path, node)
-		}
-		if (buildings.size > 0) {
-			this.buildPairingEdges(buildings)
-		} else {
-			this.addEdgePreview()
-		}
-	}
-
-	private buildPairingEdges(node: Map<string, Node>) {
-		const { edges } = this.state.getValue().fileSettings
-
-		for (const edge of edges) {
-			const originNode = this.map.get(edge.fromNodeName)
-			// TODO: Maps should only have valid edges. If that's not the case, the
-			// internal decoration is likely faulty. Check if only test data is not
-			// correct or what the root cause of these checks actually is.
-			if (originNode === undefined) {
-				continue
-			}
-			const targetNode = this.map.get(edge.toNodeName)
-			if (targetNode === undefined) {
-				continue
-			}
-			if (node.has(originNode.path)) {
-				this.addArrow(targetNode, originNode, true)
-				this.threeSceneService.highlightBuildings()
-				// TODO: Check if the second if case is actually necessary. Edges should
-				// always have valid origin and target paths. The test data is likely
-				// faulty and should be improved.
-			} else if (node.has(targetNode.path)) {
-				this.addArrow(targetNode, originNode, false)
-				this.threeSceneService.highlightBuildings()
-			}
-		}
-	}
-
-	private createCurve(arrowOriginNode: Node, arrowTargetNode: Node, curveScale) {
-		const bezierPoint2 = arrowOriginNode.outgoingEdgePoint.clone()
-		const bezierPoint3 = arrowTargetNode.incomingEdgePoint.clone()
-		const arrowHeight = Math.max(bezierPoint2.y + arrowTargetNode.height, bezierPoint3.y + 1) + curveScale
-		bezierPoint2.setY(arrowHeight)
-		bezierPoint3.setY(arrowHeight)
-		return new CubicBezierCurve3(arrowOriginNode.outgoingEdgePoint, bezierPoint2, bezierPoint3, arrowTargetNode.incomingEdgePoint)
-	}
-
-	private highlightBuilding(node: Node) {
-		const building = this.threeSceneService.getMapMesh().getMeshDescription().getBuildingByPath(node.path)
-		this.threeSceneService.addBuildingToHighlightingList(building)
-	}
-
-	private setCurveColor(bezier: CubicBezierCurve3, color: number, bezierPoints = 50) {
-		const points = bezier.getPoints(bezierPoints)
-		const curveObject = this.buildLine(points, color)
-		curveObject.add(this.buildArrow(points))
-		this.threeSceneService.edgeArrows.add(curveObject)
-		this.arrows.push(curveObject)
-	}
-
-	private previewMode(curve, edgeVisibility: EdgeVisibility) {
-		if (edgeVisibility === EdgeVisibility.both || edgeVisibility === EdgeVisibility.from) {
-			const outgoingArrow: Object3D = this.makeArrowFromBezier(curve, false)
-			this.threeSceneService.edgeArrows.add(outgoingArrow)
-			this.arrows.push(outgoingArrow)
-		}
-
-		if (edgeVisibility === EdgeVisibility.both || edgeVisibility === EdgeVisibility.to) {
-			const incomingArrow: Object3D = this.makeArrowFromBezier(curve, true)
-			this.threeSceneService.edgeArrows.add(incomingArrow)
-			this.arrows.push(incomingArrow)
-		}
-	}
-
-	private getNodesAsMap(nodes: Node[]) {
-		const map: Map<string, Node> = new Map()
-		for (const node of nodes) {
-			map.set(node.path, node)
-		}
-		return map
-	}
-
-	private makeArrowFromBezier(bezier: CubicBezierCurve3, incoming: boolean, bezierPoints = 50) {
-		const points = bezier.getPoints(bezierPoints)
-		const { incomingEdge, outgoingEdge } = this.state.getValue().appSettings.mapColors
-		const arrowColor = incoming ? incomingEdge : outgoingEdge
-		const pointsPreviews = incoming
-			? points.slice(bezierPoints + 1 - this.VERTICES_PER_LINE)
-			: points.slice(0, points.length - (bezierPoints + 1 - this.VERTICES_PER_LINE))
-
-		return this.buildEdge(pointsPreviews, ColorConverter.getNumber(arrowColor))
-	}
-
-	private buildEdge(points: Vector3[], color: number): Object3D {
-		const curveObject = this.buildLine(points, color)
-		curveObject.add(this.buildArrow(points))
-
-		return curveObject
-	}
-
-	private buildLine(points: Vector3[], color = 0) {
-		const geometry = new BufferGeometry()
-		geometry.setFromPoints(points)
-
-		const material = new LineBasicMaterial({ color, linewidth: 1 })
-		return new Line(geometry, material)
-	}
-
-	private buildArrow(points: Vector3[], ARROW_COLOR = 0, headLength = 10, headWidth = 10) {
-		const direction = points.at(-1).clone().sub(points.at(-2).clone()).normalize()
-
-		const origin = points.at(-1).clone()
-		if (direction.y < 0) {
-			origin.y += headLength + 1
-		}
-		return new ArrowHelper(direction, origin, headLength + 1, ARROW_COLOR, headLength, headWidth)
-	}
-}

package/app/codeCharta/ui/codeMap/arrow/utils/edgePreviewNodes.selector.spec.ts

@@ -1,21 +0,0 @@
-import { EdgeMetricCount } from "../../../../codeCharta.model"
-import { _getNodesWithHighestValue } from "./edgePreviewNodes.selector"
-
-describe("edgePreviewNodesSelector", () => {
-	it("should return an empty list if there are no data for given metric", () => {
-		expect(_getNodesWithHighestValue(new Map(), "rloc", 10)).toEqual([])
-	})
-
-	it("should return a first x keys for given metric", () => {
-		const nodeEdgeMetricsOfRloc = new Map<string, EdgeMetricCount>([
-			["0", { incoming: 10, outgoing: 5 }],
-			["1", { incoming: 1, outgoing: 2 }]
-		])
-		expect(_getNodesWithHighestValue(new Map([["rloc", nodeEdgeMetricsOfRloc]]), "rloc", 1)).toEqual(["0"])
-	})
-
-	it("should return empty list if amountOfEdgePreviews is set to 0", () => {
-		const nodeEdgeMetricsOfRloc = new Map<string, EdgeMetricCount>([["0", { incoming: 10, outgoing: 5 }]])
-		expect(_getNodesWithHighestValue(new Map([["rloc", nodeEdgeMetricsOfRloc]]), "rloc", 0)).toEqual([])
-	})
-})

package/app/codeCharta/ui/codeMap/arrow/utils/edgePreviewNodes.selector.ts

@@ -1,36 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { NodeEdgeMetricsMap } from "../../../../state/selectors/accumulatedData/metricData/edgeMetricData.calculator"
-import { amountOfEdgePreviewsSelector } from "../../../../state/store/appSettings/amountOfEdgePreviews/amountOfEdgePreviews.selector"
-import { edgeMetricSelector } from "../../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
-import { metricDataSelector } from "../../../../state/selectors/accumulatedData/metricData/metricData.selector"
-
-export const edgePreviewNodesSelector = createSelector(
-	metricDataSelector,
-	edgeMetricSelector,
-	amountOfEdgePreviewsSelector,
-	(metricData, edgeMetric, amountOfEdgePreviews) =>
-		new Set(_getNodesWithHighestValue(metricData.nodeEdgeMetricsMap, edgeMetric, amountOfEdgePreviews))
-)
-
-export const _getNodesWithHighestValue = (edgeMetricMap: NodeEdgeMetricsMap, edgeMetric: string, amountOfEdgePreviews: number) => {
-	const keys: string[] = []
-
-	if (amountOfEdgePreviews === 0) {
-		return keys
-	}
-
-	const nodeEdgeMetrics = edgeMetricMap.get(edgeMetric)
-
-	if (nodeEdgeMetrics === undefined) {
-		return keys
-	}
-
-	// note that this depends on the fact, that edgeMetricMap is created by a list which is sorted by max value
-	for (const key of nodeEdgeMetrics.keys()) {
-		keys.push(key)
-		if (keys.length === amountOfEdgePreviews) {
-			break
-		}
-	}
-	return keys
-}

package/app/codeCharta/ui/codeMap/arrow/utils/edgeVisibility.selector.ts

@@ -1,17 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { edgeMetricSelector } from "../../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
-import { edgePreviewNodesSelector } from "./edgePreviewNodes.selector"
-import { edgesSelector } from "../../../../state/store/fileSettings/edges/edges.selector"
-import { clone } from "../../../../util/clone"
-import { setEdgeVisibility } from "./setEdgeVisibility"
-
-export const edgeVisibilitySelector = createSelector(
-	edgePreviewNodesSelector,
-	edgesSelector,
-	edgeMetricSelector,
-	(edgePreviewNodes, edges, edgeMetric) => {
-		const edgeVisibility = clone(edges)
-		setEdgeVisibility(edgePreviewNodes, edgeVisibility, edgeMetric)
-		return edgeVisibility
-	}
-)

package/app/codeCharta/ui/codeMap/arrow/utils/setEdgeVisibility.spec.ts

@@ -1,36 +0,0 @@
-import { Edge, EdgeVisibility } from "../../../../codeCharta.model"
-import { setEdgeVisibility } from "./setEdgeVisibility"
-
-describe("setEdgeVisibility", () => {
-	const edgePreviewNodes = new Set(["aNode", "anotherNode"])
-
-	it("should set edge's visibility to 'none' if edge has no attributes for given metric", () => {
-		const edges: Edge[] = [{ attributes: {}, fromNodeName: "from", toNodeName: "to" }]
-		setEdgeVisibility(edgePreviewNodes, edges, "loc")
-		expect(edges[0].visible).toBe(EdgeVisibility.none)
-	})
-
-	it("should set edge's visibility to 'none' if edge has neither from nor to", () => {
-		const edges: Edge[] = [{ attributes: { loc: 12 }, fromNodeName: "from", toNodeName: "to" }]
-		setEdgeVisibility(edgePreviewNodes, edges, "loc")
-		expect(edges[0].visible).toBe(EdgeVisibility.none)
-	})
-
-	it("should set edge's visibility to 'both' if edge has from and to for given metric", () => {
-		const edges: Edge[] = [{ attributes: { loc: 12 }, fromNodeName: "aNode", toNodeName: "anotherNode" }]
-		setEdgeVisibility(edgePreviewNodes, edges, "loc")
-		expect(edges[0].visible).toBe(EdgeVisibility.both)
-	})
-
-	it("should set edge's visibility to 'from' if edge has only from for given metric", () => {
-		const edges: Edge[] = [{ attributes: { loc: 12 }, fromNodeName: "aNode", toNodeName: "to" }]
-		setEdgeVisibility(edgePreviewNodes, edges, "loc")
-		expect(edges[0].visible).toBe(EdgeVisibility.from)
-	})
-
-	it("should set edge's visibility to 'to' if edge has only to for given metric", () => {
-		const edges: Edge[] = [{ attributes: { loc: 12 }, fromNodeName: "from", toNodeName: "aNode" }]
-		setEdgeVisibility(edgePreviewNodes, edges, "loc")
-		expect(edges[0].visible).toBe(EdgeVisibility.to)
-	})
-})

package/app/codeCharta/ui/codeMap/arrow/utils/setEdgeVisibility.ts

@@ -1,20 +0,0 @@
-import { Edge, EdgeVisibility } from "../../../../codeCharta.model"
-
-export const setEdgeVisibility = (edgePreviewNodes: Set<string>, edges: Edge[], edgeMetric: string) => {
-	for (const edge of edges) {
-		edge.visible = EdgeVisibility.none
-
-		if (edge.attributes[edgeMetric] !== undefined) {
-			const hasFromNodeEdgePreview = edgePreviewNodes.has(edge.fromNodeName)
-			const hasToNodeEdgePreview = edgePreviewNodes.has(edge.toNodeName)
-
-			if (hasFromNodeEdgePreview && hasToNodeEdgePreview) {
-				edge.visible = EdgeVisibility.both
-			} else if (hasFromNodeEdgePreview) {
-				edge.visible = EdgeVisibility.from
-			} else if (hasToNodeEdgePreview) {
-				edge.visible = EdgeVisibility.to
-			}
-		}
-	}
-}

package/app/codeCharta/ui/codeMap/codeMap.component.html

@@ -1,4 +0,0 @@
-<div id="codeMap" [class.hidden]="isLoadingFile$ | async">
-	<cc-view-cube [class.sideBarVisible]="isAttributeSideBarVisibleService.isOpen"></cc-view-cube>
-	<cc-attribute-side-bar></cc-attribute-side-bar>
-</div>

package/app/codeCharta/ui/codeMap/codeMap.component.scss

@@ -1,22 +0,0 @@
-cc-code-map {
-	.hidden {
-		display: none;
-	}
-
-	cc-view-cube {
-		position: absolute;
-		z-index: 11;
-		right: 0px;
-		top: 10px;
-
-		&.sideBarVisible {
-			right: 350px;
-		}
-	}
-
-	unfocus-button-component {
-		&.sideBarVisible {
-			right: 390px;
-		}
-	}
-}

package/app/codeCharta/ui/codeMap/codeMap.component.spec.ts

@@ -1,63 +0,0 @@
-import { ElementRef } from "@angular/core"
-import { Subject } from "rxjs"
-import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
-import { sharpnessModeSelector } from "../../state/store/appSettings/sharpnessMode/sharpnessMode.selector"
-import { CodeMapComponent } from "./codeMap.component"
-import { CodeMapMouseEventService } from "./codeMap.mouseEvent.service"
-import { ThreeViewerService } from "./threeViewer/threeViewer.service"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-
-describe("CodeMapComponent", () => {
-	let mockedThreeViewService: ThreeViewerService
-	let mockedCodeMapMouseEventService: CodeMapMouseEventService
-	let mockedElementReference: ElementRef
-	let mockedSharpnessModeSelector$: Subject<string>
-	const mockedStore = {
-		select: (selector: unknown) => {
-			switch (selector) {
-				case sharpnessModeSelector:
-					return mockedSharpnessModeSelector$
-				default:
-					return jest.fn()
-			}
-		}
-	} as unknown as Store<CcState>
-
-	beforeEach(() => {
-		mockedThreeViewService = { init: jest.fn(), restart: jest.fn() } as unknown as ThreeViewerService
-		mockedCodeMapMouseEventService = { start: jest.fn() } as unknown as CodeMapMouseEventService
-		mockedElementReference = { nativeElement: { querySelector: jest.fn() } }
-		mockedSharpnessModeSelector$ = new Subject()
-	})
-
-	it("should init threeViewerService and start codeMapMouseService after view init", () => {
-		const codeMapComponent = new CodeMapComponent(
-			{ isOpen: true } as IsAttributeSideBarVisibleService,
-			mockedStore,
-			mockedThreeViewService,
-			mockedCodeMapMouseEventService,
-			mockedElementReference
-		)
-		codeMapComponent.ngAfterViewInit()
-		expect(mockedThreeViewService.init).toHaveBeenCalled()
-		expect(mockedCodeMapMouseEventService.start).toHaveBeenCalled()
-	})
-
-	it("should restart on sharpnessModeChanges but not on first one as it will get started then", () => {
-		new CodeMapComponent(
-			{ isOpen: true } as IsAttributeSideBarVisibleService,
-			mockedStore,
-			mockedThreeViewService,
-			mockedCodeMapMouseEventService,
-			mockedElementReference
-		)
-		mockedSharpnessModeSelector$.next("High")
-		expect(mockedThreeViewService.restart).not.toHaveBeenCalled()
-		expect(mockedCodeMapMouseEventService.start).not.toHaveBeenCalled()
-
-		mockedSharpnessModeSelector$.next("Low")
-		expect(mockedThreeViewService.restart).toHaveBeenCalled()
-		expect(mockedCodeMapMouseEventService.start).toHaveBeenCalled()
-	})
-})

package/app/codeCharta/ui/codeMap/codeMap.component.ts

@@ -1,46 +0,0 @@
-import { Component, AfterViewInit, ElementRef, OnDestroy, ViewEncapsulation } from "@angular/core"
-import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
-import { ThreeViewerService } from "./threeViewer/threeViewer.service"
-import { sharpnessModeSelector } from "../../state/store/appSettings/sharpnessMode/sharpnessMode.selector"
-import { CodeMapMouseEventService } from "./codeMap.mouseEvent.service"
-import { skip, tap } from "rxjs"
-import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-
-@Component({
-	selector: "cc-code-map",
-	templateUrl: "./codeMap.component.html",
-	styleUrls: ["./codeMap.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class CodeMapComponent implements AfterViewInit, OnDestroy {
-	isLoadingFile$ = this.store.select(isLoadingFileSelector)
-	restartOnSharpnessModeChangesSubscription = this.store
-		.select(sharpnessModeSelector)
-		.pipe(
-			skip(1),
-			tap(() => {
-				this.threeViewerService.restart(this.elementReference.nativeElement.querySelector("#codeMap"))
-				this.codeMapMouseEventService.start()
-			})
-		)
-		.subscribe()
-
-	constructor(
-		public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		private store: Store<CcState>,
-		private threeViewerService: ThreeViewerService,
-		private codeMapMouseEventService: CodeMapMouseEventService,
-		private elementReference: ElementRef
-	) {}
-
-	ngAfterViewInit(): void {
-		this.threeViewerService.init(this.elementReference.nativeElement.querySelector("#codeMap"))
-		this.codeMapMouseEventService.start()
-	}
-
-	ngOnDestroy(): void {
-		this.restartOnSharpnessModeChangesSubscription.unsubscribe()
-	}
-}