codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/state/selectors/accumulatedData/accumulatedData.selector.ts

@@ -2,7 +2,6 @@ import { CodeMapNode, FileMeta } from "../../../codeCharta.model"
 import { FileState } from "../../../model/files/files"
 import { fileStatesAvailable, isDeltaState, isPartialState } from "../../../model/files/files.helper"
 import { AggregationGenerator } from "../../../util/aggregationGenerator"
-import { clone } from "../../../util/clone"
 import { NodeDecorator } from "../../../util/nodeDecorator"
 import { CcState } from "../../store/store"
 import { metricNamesSelector } from "./metricData/metricNames.selector"
@@ -28,13 +27,13 @@ export const accumulatedDataSelector: (state: CcState) => AccumulatedData = crea
 			return accumulatedDataFallback
 		}
 
-		const data = getUndecoratedAccumulatedData(fileStates)
+		const data = _getUndecoratedAccumulatedData(fileStates)
 		if (!data?.map) {
 			return accumulatedDataFallback
 		}
 
 		NodeDecorator.decorateMap(data.map, metricData, blacklist)
-		addEdgeMetricsForLeaves(data.map, metricNames)
+		addEdgeMetricsForLeaves(metricData.nodeEdgeMetricsMap, data.map, metricNames)
 		NodeDecorator.decorateParentNodesWithAggregatedAttributes(data.map, isDeltaState(fileStates), attributeTypes)
 
 		return {
@@ -44,19 +43,15 @@ export const accumulatedDataSelector: (state: CcState) => AccumulatedData = crea
 	}
 )
 
-const getUndecoratedAccumulatedData = (fileStates: FileState[]) => {
-	// TODO this cloning shouldn't be necessary. When migrating to NgRx
-	// we should find and eliminate the responsible side effects
-	const visibleFileStates = clone(fileStates)
-
+export const _getUndecoratedAccumulatedData = (fileStates: FileState[]) => {
 	if (isPartialState(fileStates)) {
-		return AggregationGenerator.getAggregationFile(visibleFileStates.map(x => x.file))
+		return AggregationGenerator.calculateAggregationFile(fileStates)
 	}
 	if (isDeltaState(fileStates)) {
-		const [reference, comparison] = visibleFileStates
+		const [reference, comparison] = fileStates
 		if (comparison && reference.file.map.name !== comparison.file.map.name) {
-			return AggregationGenerator.getAggregationFile(visibleFileStates.map(x => x.file))
+			return AggregationGenerator.calculateAggregationFile(fileStates)
 		}
-		return getDeltaFile(visibleFileStates)
+		return getDeltaFile(fileStates)
 	}
 }

package/app/codeCharta/state/selectors/accumulatedData/metricData/edgeMetricData.calculator.spec.ts

@@ -0,0 +1,46 @@
+import { calculateEdgeMetricData } from "./edgeMetricData.calculator"
+import { FILE_STATES, VALID_NODE_WITH_PATH } from "../../../../util/dataMocks"
+import { FileState } from "../../../../model/files/files"
+import { clone } from "../../../../util/clone"
+
+describe("edgeMetricDataCalculator", () => {
+	let fileStates: FileState[]
+
+	beforeEach(() => {
+		fileStates = clone(FILE_STATES)
+		fileStates[0].file.map = clone(VALID_NODE_WITH_PATH)
+	})
+
+	it("should create correct edge Metrics", () => {
+		const { edgeMetricData } = calculateEdgeMetricData(fileStates, [])
+
+		expect(edgeMetricData.map(x => x.name)).toContain("pairingRate")
+		expect(edgeMetricData.map(x => x.name)).toContain("otherMetric")
+	})
+
+	it("should calculate correct maximum value for edge Metrics", () => {
+		const { edgeMetricData } = calculateEdgeMetricData(fileStates, [])
+
+		expect(edgeMetricData.find(x => x.name === "pairingRate").maxValue).toEqual(2)
+		expect(edgeMetricData.find(x => x.name === "otherMetric").maxValue).toEqual(1)
+	})
+
+	it("should sort the metrics after calculating them", () => {
+		const { edgeMetricData } = calculateEdgeMetricData(fileStates, [])
+
+		expect(edgeMetricData).toHaveLength(3)
+		expect(edgeMetricData[0].name).toBe("avgCommits")
+		expect(edgeMetricData[1].name).toBe("otherMetric")
+		expect(edgeMetricData[2].name).toBe("pairingRate")
+	})
+
+	it("should provide nodeEdgeMetricsMap", () => {
+		const { nodeEdgeMetricsMap } = calculateEdgeMetricData(fileStates, [])
+
+		const pairingRateMapKeys = [...nodeEdgeMetricsMap.get("pairingRate").keys()]
+
+		expect(pairingRateMapKeys[0]).toEqual("/root/big leaf")
+		expect(pairingRateMapKeys[1]).toEqual("/root/Parent Leaf/small leaf")
+		expect(pairingRateMapKeys[2]).toEqual("/root/Parent Leaf/other small leaf")
+	})
+})

package/app/codeCharta/state/selectors/accumulatedData/metricData/{edgeMetricData.selector.ts → edgeMetricData.calculator.ts}

@@ -2,30 +2,14 @@ import { hierarchy } from "d3-hierarchy"
 import { BlacklistItem, Edge, EdgeMetricCount, EdgeMetricData } from "../../../../codeCharta.model"
 import { FileState } from "../../../../model/files/files"
 import { isPathBlacklisted } from "../../../../util/codeMapHelper"
-import { createSelector } from "../../../angular-redux/createSelector"
-import { blacklistSelector } from "../../../store/fileSettings/blacklist/blacklist.selector"
-import { visibleFileStatesSelector } from "../../visibleFileStates.selector"
 import { sortByMetricName } from "./sortByMetricName"
 
 export type EdgeMetricCountMap = Map<string, EdgeMetricCount>
 export type NodeEdgeMetricsMap = Map<string, EdgeMetricCountMap>
-/** @deprecated use edgeMetricMapSelector instead to ensure unidirectional data flow and prevent random manipulation */
-export let nodeEdgeMetricsMap: NodeEdgeMetricsMap = new Map()
-
-const edgeMetricDataAndMapSelector = createSelector([visibleFileStatesSelector, blacklistSelector], calculateEdgeMetricData)
-
-export const edgeMetricDataSelector = createSelector(
-	[edgeMetricDataAndMapSelector],
-	edgeMetricDataAndMap => edgeMetricDataAndMap.sortedEdgeMetricList
-)
-
-export const edgeMetricMapSelector = createSelector(
-	[edgeMetricDataAndMapSelector],
-	edgeMetricDataAndMap => edgeMetricDataAndMap.nodeEdgeMetricsMap
-)
 
 export function calculateEdgeMetricData(visibleFileStates: FileState[], blacklist: BlacklistItem[]) {
-	nodeEdgeMetricsMap = new Map()
+	const nodeEdgeMetricsMap: NodeEdgeMetricsMap = new Map()
+
 	const allFilePaths: Set<string> = new Set()
 
 	for (const { file } of visibleFileStates) {
@@ -39,15 +23,18 @@ export function calculateEdgeMetricData(visibleFileStates: FileState[], blacklis
 			if (bothNodesAssociatedAreVisible(edge, allFilePaths, blacklist)) {
 				// TODO: We likely only need the attributes once per file.
 				for (const edgeMetric of Object.keys(edge.attributes)) {
-					const edgeMetricEntry = getEntryForMetric(edgeMetric)
+					const edgeMetricEntry = updateEntryForMetric(nodeEdgeMetricsMap, edgeMetric)
 					addEdgeToNodes(edgeMetricEntry, edge.fromNodeName, edge.toNodeName)
 				}
 			}
 		}
 	}
-	const newEdgeMetricData = getMetricDataFromMap()
+	const newEdgeMetricData = getMetricDataFromMap(nodeEdgeMetricsMap)
 	sortByMetricName(newEdgeMetricData)
-	return { sortedEdgeMetricList: newEdgeMetricData, nodeEdgeMetricsMap }
+	return {
+		edgeMetricData: newEdgeMetricData,
+		nodeEdgeMetricsMap
+	}
 }
 
 function bothNodesAssociatedAreVisible(edge: Edge, filePaths: Set<string>, blacklist: BlacklistItem[]) {
@@ -57,7 +44,7 @@ function bothNodesAssociatedAreVisible(edge: Edge, filePaths: Set<string>, black
 	return false
 }
 
-function getEntryForMetric(edgeMetricName: string) {
+function updateEntryForMetric(nodeEdgeMetricsMap: NodeEdgeMetricsMap, edgeMetricName: string) {
 	let nodeEdgeMetric = nodeEdgeMetricsMap.get(edgeMetricName)
 	if (!nodeEdgeMetric) {
 		nodeEdgeMetric = new Map()
@@ -82,7 +69,7 @@ function addEdgeToNodes(edgeMetricEntry: EdgeMetricCountMap, fromNode: string, t
 	}
 }
 
-function getMetricDataFromMap() {
+function getMetricDataFromMap(nodeEdgeMetricsMap: NodeEdgeMetricsMap) {
 	const metricData: EdgeMetricData[] = []
 
 	for (const [edgeMetric, occurrences] of nodeEdgeMetricsMap) {

package/app/codeCharta/state/selectors/accumulatedData/metricData/metricData.selector.ts

@@ -1,8 +1,12 @@
 import { createSelector } from "../../../angular-redux/createSelector"
-import { edgeMetricDataSelector } from "./edgeMetricData.selector"
-import { nodeMetricDataSelector } from "./nodeMetricData.selector"
+import { blacklistSelector } from "../../../store/fileSettings/blacklist/blacklist.selector"
+import { visibleFileStatesSelector } from "../../visibleFileStates.selector"
+import { calculateEdgeMetricData } from "./edgeMetricData.calculator"
+import { calculateNodeMetricData } from "./nodeMetricData.calculator"
 
-export const metricDataSelector = createSelector([nodeMetricDataSelector, edgeMetricDataSelector], (nodeMetricData, edgeMetricData) => ({
-	nodeMetricData,
-	edgeMetricData
-}))
+export const metricDataSelector = createSelector([visibleFileStatesSelector, blacklistSelector], (visibleFileStates, blacklist) => {
+	return {
+		nodeMetricData: calculateNodeMetricData(visibleFileStates, blacklist),
+		...calculateEdgeMetricData(visibleFileStates, blacklist)
+	}
+})

package/app/codeCharta/state/selectors/accumulatedData/metricData/metricNames.selector.spec.ts

@@ -1,15 +1,15 @@
 import { CcState } from "../../../store/store"
-import { edgeMetricDataSelector } from "./edgeMetricData.selector"
+import { metricDataSelector } from "./metricData.selector"
 import { metricNamesSelector } from "./metricNames.selector"
 
-const mockedEdgeMetricDataSelector = edgeMetricDataSelector as unknown as jest.Mock
-jest.mock("./edgeMetricData.selector", () => ({
-	edgeMetricDataSelector: jest.fn()
+const mockedMetricDataSelector = metricDataSelector as unknown as jest.Mock
+jest.mock("./metricData.selector", () => ({
+	metricDataSelector: jest.fn()
 }))
 
 describe("metricNamesSelector", () => {
 	it("should get the names of the metrics", () => {
-		mockedEdgeMetricDataSelector.mockImplementationOnce(() => [{ name: "metricOfTruth" }, { name: "otherMetric" }])
+		mockedMetricDataSelector.mockImplementationOnce(() => ({ edgeMetricData: [{ name: "metricOfTruth" }, { name: "otherMetric" }] }))
 
 		expect(metricNamesSelector({} as unknown as CcState)).toEqual(["metricOfTruth", "otherMetric"])
 	})

package/app/codeCharta/state/selectors/accumulatedData/metricData/metricNames.selector.ts

@@ -1,4 +1,4 @@
 import { createSelector } from "../../../angular-redux/createSelector"
-import { edgeMetricDataSelector } from "./edgeMetricData.selector"
+import { metricDataSelector } from "./metricData.selector"
 
-export const metricNamesSelector = createSelector([edgeMetricDataSelector], edgeMetricData => edgeMetricData.map(x => x.name))
+export const metricNamesSelector = createSelector([metricDataSelector], metricData => metricData.edgeMetricData.map(x => x.name))

package/app/codeCharta/state/selectors/accumulatedData/metricData/{nodeMetricData.selector.spec.ts → nodeMetricData.calculator.spec.ts}

@@ -2,9 +2,9 @@ import { TEST_DELTA_MAP_A, VALID_NODE_WITH_ROOT_UNARY } from "../../../../util/d
 import { FileSelectionState, FileState } from "../../../../model/files/files"
 import { NodeDecorator } from "../../../../util/nodeDecorator"
 import { clone } from "../../../../util/clone"
-import { calculateNodeMetricData, UNARY_METRIC } from "./nodeMetricData.selector"
+import { calculateNodeMetricData, UNARY_METRIC } from "./nodeMetricData.calculator"
 
-describe("nodeMetricDataSelector", () => {
+describe("nodeMetricDataCalculator", () => {
 	let fileState: FileState
 
 	beforeEach(() => {

package/app/codeCharta/state/selectors/accumulatedData/metricData/{nodeMetricData.selector.ts → nodeMetricData.calculator.ts}

@@ -3,9 +3,6 @@ import { hierarchy } from "d3-hierarchy"
 import { BlacklistItem, NodeMetricData } from "../../../../codeCharta.model"
 import { FileState } from "../../../../model/files/files"
 import { isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
-import { createSelector } from "../../../angular-redux/createSelector"
-import { blacklistSelector } from "../../../store/fileSettings/blacklist/blacklist.selector"
-import { visibleFileStatesSelector } from "../../visibleFileStates.selector"
 import { sortByMetricName } from "./sortByMetricName"
 
 export const UNARY_METRIC = "unary"
@@ -54,5 +51,3 @@ export const calculateNodeMetricData = (visibleFileStates: FileState[], blacklis
 	sortByMetricName(metricData)
 	return metricData
 }
-
-export const nodeMetricDataSelector = createSelector([visibleFileStatesSelector, blacklistSelector], calculateNodeMetricData)

package/app/codeCharta/state/selectors/accumulatedData/metricData/selectedColorMetricData.selector.ts

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

package/app/codeCharta/state/selectors/accumulatedData/utils/addEdgeMetricsForLeaves.ts

@@ -1,16 +1,17 @@
 import { hierarchy } from "d3-hierarchy"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { isLeaf } from "../../../../util/codeMapHelper"
+import { NodeEdgeMetricsMap } from "../metricData/edgeMetricData.calculator"
 import { getMetricValuesForNode } from "./getMetricValuesForNode"
 
-export const addEdgeMetricsForLeaves = (map: CodeMapNode, metricNames: string[]) => {
+export const addEdgeMetricsForLeaves = (nodeEdgeMetricsMap: NodeEdgeMetricsMap, map: CodeMapNode, metricNames: string[]) => {
 	if (metricNames.length === 0) {
 		return
 	}
 
 	for (const node of hierarchy(map)) {
 		if (isLeaf(node)) {
-			const edgeMetrics = getMetricValuesForNode(node, metricNames)
+			const edgeMetrics = getMetricValuesForNode(nodeEdgeMetricsMap, node, metricNames)
 			for (const [key, value] of edgeMetrics) {
 				node.data.edgeAttributes[key] = value
 			}

package/app/codeCharta/state/selectors/accumulatedData/utils/getMetricValuesForNode.spec.ts

@@ -1,23 +1,16 @@
 import { HierarchyNode } from "d3-hierarchy"
 import { CodeMapNode } from "../../../../codeCharta.model"
+import { NodeEdgeMetricsMap, EdgeMetricCountMap } from "../metricData/edgeMetricData.calculator"
 import { getMetricValuesForNode } from "./getMetricValuesForNode"
 
-jest.mock("../metricData/edgeMetricData.selector", () => ({
-	nodeEdgeMetricsMap: {
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		get: (_metricName: string) => ({
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			get: (_path: string) => ({ incoming: 0, outgoing: 1 })
-		})
-	}
-}))
-
 describe("getMetricValuesForNode", () => {
 	it("should return Edge Metric counts for node", () => {
 		const metricNames = ["pairingRate"]
 		const node = { data: { path: "/root/big leaf" } } as HierarchyNode<CodeMapNode>
+		const nodesEdgeMetricCountMap: EdgeMetricCountMap = new Map([["/root/big leaf", { incoming: 0, outgoing: 1 }]])
+		const nodeEdgeMetricsMap: NodeEdgeMetricsMap = new Map([["pairingRate", nodesEdgeMetricCountMap]])
 
-		const metricsForNode = getMetricValuesForNode(node, metricNames)
+		const metricsForNode = getMetricValuesForNode(nodeEdgeMetricsMap, node, metricNames)
 
 		expect(metricsForNode.get(metricNames[0])).toEqual({ incoming: 0, outgoing: 1 })
 	})

package/app/codeCharta/state/selectors/accumulatedData/utils/getMetricValuesForNode.ts

@@ -1,8 +1,8 @@
 import { HierarchyNode } from "d3-hierarchy"
 import { CodeMapNode } from "../../../../codeCharta.model"
-import { EdgeMetricCountMap, nodeEdgeMetricsMap } from "../metricData/edgeMetricData.selector"
+import { EdgeMetricCountMap, NodeEdgeMetricsMap } from "../metricData/edgeMetricData.calculator"
 
-export const getMetricValuesForNode = (node: HierarchyNode<CodeMapNode>, metricNames: string[]) => {
+export const getMetricValuesForNode = (nodeEdgeMetricsMap: NodeEdgeMetricsMap, node: HierarchyNode<CodeMapNode>, metricNames: string[]) => {
 	const nodeEdgeMetrics: EdgeMetricCountMap = new Map()
 
 	for (const metricName of metricNames) {

package/app/codeCharta/state/selectors/allNecessaryRenderDataAvailable/areAllNecessaryRenderDataAvailable.selector.ts

@@ -5,15 +5,16 @@ import { colorMetricSelector } from "../../store/dynamicSettings/colorMetric/col
 import { dynamicSettingsSelector } from "../../store/dynamicSettings/dynamicSettings.selector"
 import { heightMetricSelector } from "../../store/dynamicSettings/heightMetric/heightMetric.selector"
 import { filesSelector } from "../../store/files/files.selector"
-import { nodeMetricDataSelector } from "../accumulatedData/metricData/nodeMetricData.selector"
+import { metricDataSelector } from "../accumulatedData/metricData/metricData.selector"
 import { areDynamicSettingsAvailable } from "./utils/areDynamicSettingsAvailable"
 import { areMetricsAvailable } from "./utils/areMetricsAvailable"
 
 const areFileStatesAvailableSelector = createSelector([filesSelector], files => fileStatesAvailable(files))
 
 export const areChosenMetricsAvailableSelector = createSelector(
-	[nodeMetricDataSelector, areaMetricSelector, colorMetricSelector, heightMetricSelector],
-	(nodeMetricData, areaMetric, colorMetric, heightMetric) => areMetricsAvailable(nodeMetricData, [areaMetric, colorMetric, heightMetric])
+	[metricDataSelector, areaMetricSelector, colorMetricSelector, heightMetricSelector],
+	(metricData, areaMetric, colorMetric, heightMetric) =>
+		areMetricsAvailable(metricData.nodeMetricData, [areaMetric, colorMetric, heightMetric])
 )
 
 const areDynamicSettingsAvailableSelector = createSelector([dynamicSettingsSelector], dynamicSettings =>
@@ -21,9 +22,9 @@ const areDynamicSettingsAvailableSelector = createSelector([dynamicSettingsSelec
 )
 
 export const areAllNecessaryRenderDataAvailableSelector = createSelector(
-	[nodeMetricDataSelector, areFileStatesAvailableSelector, areChosenMetricsAvailableSelector, areDynamicSettingsAvailableSelector],
-	(nodeMetricData, areFileStatesAvailable, areChosenMetricsAvailable, areDynamicSettingsAvailable) => {
-		if (nodeMetricData === null || !areFileStatesAvailable || !areChosenMetricsAvailable || !areDynamicSettingsAvailable) {
+	[metricDataSelector, areFileStatesAvailableSelector, areChosenMetricsAvailableSelector, areDynamicSettingsAvailableSelector],
+	(metricData, areFileStatesAvailable, areChosenMetricsAvailable, areDynamicSettingsAvailable) => {
+		if (metricData.nodeMetricData === null || !areFileStatesAvailable || !areChosenMetricsAvailable || !areDynamicSettingsAvailable) {
 			return false
 		}
 

package/app/codeCharta/state/selectors/primaryMetrics/primaryMetrics.selector.ts

@@ -3,17 +3,22 @@ import { CcState } from "../../store/store"
 import { Metric } from "../../../ui/attributeSideBar/util/metric"
 import { primaryMetricNamesSelector } from "./primaryMetricNames.selector"
 import { createSelector } from "../../angular-redux/createSelector"
+import { getMetricDescriptors } from "../../../ui/attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { Edge } from "app/codeCharta/ui/attributeSideBar/util/edge"
+import { CodeMapNode } from "app/codeCharta/codeCharta.model"
+import { AttributeDescriptors } from "../../../codeCharta.model"
 
 export type PrimaryMetrics = {
 	area: Metric
 	height: Metric
 	color: Metric
-	edge: { name: string; incoming: number | undefined; outgoing: number | undefined }
+	edge: Edge
 }
 
 export const primaryMetricsSelector: (state: CcState) => PrimaryMetrics | undefined = createSelector(
-	[selectedNodeSelector, primaryMetricNamesSelector],
-	(selectedNode, primaryMetricNames) => {
+	[selectedNodeSelector, primaryMetricNamesSelector, attributeDescriptorsSelector],
+	(selectedNode, primaryMetricNames, attributeDescriptors) => {
 		if (!selectedNode) {
 			return
 		}
@@ -21,21 +26,32 @@ export const primaryMetricsSelector: (state: CcState) => PrimaryMetrics | undefi
 		return {
 			area: {
 				name: primaryMetricNames.areaMetric,
-				value: selectedNode.attributes[primaryMetricNames.areaMetric]
+				value: selectedNode.attributes[primaryMetricNames.areaMetric],
+				descriptors: getMetricDescriptors(primaryMetricNames.areaMetric, attributeDescriptors)
 			},
 			height: {
 				name: primaryMetricNames.heightMetric,
-				value: selectedNode.attributes[primaryMetricNames.heightMetric]
+				value: selectedNode.attributes[primaryMetricNames.heightMetric],
+				descriptors: getMetricDescriptors(primaryMetricNames.heightMetric, attributeDescriptors)
 			},
 			color: {
 				name: primaryMetricNames.colorMetric,
-				value: selectedNode.attributes[primaryMetricNames.colorMetric]
+				value: selectedNode.attributes[primaryMetricNames.colorMetric],
+				descriptors: getMetricDescriptors(primaryMetricNames.colorMetric, attributeDescriptors)
 			},
-			edge: {
-				name: primaryMetricNames.edgeMetric,
-				incoming: selectedNode.edgeAttributes[primaryMetricNames.edgeMetric]?.incoming,
-				outgoing: selectedNode.edgeAttributes[primaryMetricNames.edgeMetric]?.outgoing
-			}
+			edge: getEdge(primaryMetricNames.edgeMetric, selectedNode, attributeDescriptors)
 		}
 	}
 )
+
+function getEdge(key: string, selectedNode: CodeMapNode, attributeDescriptors: AttributeDescriptors): Edge {
+	if (key === undefined || key === null) {
+		return null
+	}
+	return {
+		name: key,
+		incoming: selectedNode.edgeAttributes[key]?.incoming,
+		outgoing: selectedNode.edgeAttributes[key]?.outgoing,
+		descriptors: getMetricDescriptors(key, attributeDescriptors)
+	}
+}

package/app/codeCharta/state/store/appSettings/appSettings.actions.ts

@@ -9,7 +9,6 @@ import { defaultEdgeHeight } from "./edgeHeight/edgeHeight.actions"
 import { defaultScaling } from "./scaling/scaling.actions"
 import { defaultHideFlatBuildings } from "./hideFlatBuildings/hideFlatBuildings.actions"
 import { defaultInvertHeight } from "./invertHeight/invertHeight.actions"
-import { defaultDynamicMargin } from "./dynamicMargin/dynamicMargin.actions"
 import { defaultIsWhiteBackground } from "./isWhiteBackground/isWhiteBackground.actions"
 import { defaultMapColors } from "./mapColors/mapColors.actions"
 import { defaultIsPresentationMode } from "./isPresentationMode/isPresentationMode.actions"
@@ -57,7 +56,6 @@ export const defaultAppSettings: AppSettings = {
 	hideFlatBuildings: defaultHideFlatBuildings,
 	invertHeight: defaultInvertHeight,
 	invertArea: defaultInvertArea,
-	dynamicMargin: defaultDynamicMargin,
 	isWhiteBackground: defaultIsWhiteBackground,
 	mapColors: defaultMapColors,
 	isPresentationMode: defaultIsPresentationMode,

package/app/codeCharta/state/store/appSettings/appSettings.reducer.ts

@@ -8,7 +8,6 @@ import { mapColors } from "./mapColors/mapColors.reducer"
 import { resetCameraIfNewFileIsLoaded } from "./resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.reducer"
 import { showOnlyBuildingsWithEdges } from "./showOnlyBuildingsWithEdges/showOnlyBuildingsWithEdges.reducer"
 import { isWhiteBackground } from "./isWhiteBackground/isWhiteBackground.reducer"
-import { dynamicMargin } from "./dynamicMargin/dynamicMargin.reducer"
 import { invertHeight } from "./invertHeight/invertHeight.reducer"
 import { hideFlatBuildings } from "./hideFlatBuildings/hideFlatBuildings.reducer"
 import { scaling } from "./scaling/scaling.reducer"
@@ -39,7 +38,6 @@ const appSettings = combineReducers({
 	showOnlyBuildingsWithEdges,
 	isEdgeMetricVisible,
 	isWhiteBackground,
-	dynamicMargin,
 	invertHeight,
 	invertArea,
 	hideFlatBuildings,

package/app/codeCharta/state/store/appSettings/invertArea/invertArea.actions.ts

@@ -1,8 +1,7 @@
 import { Action } from "redux"
 
 export enum InvertAreaActions {
-	SET_INVERT_AREA = "SET_INVERT_AREA",
-	TOGGLE_INVERTING_AREA = "TOGGLE_INVERTING_AREA"
+	SET_INVERT_AREA = "SET_INVERT_AREA"
 }
 
 export interface SetInvertAreaAction extends Action {
@@ -20,13 +19,3 @@ export function setInvertArea(invertArea: boolean = defaultInvertArea): SetInver
 		payload: invertArea
 	}
 }
-
-export interface ToggleInvertingAreaAction extends Action {
-	type: InvertAreaActions.TOGGLE_INVERTING_AREA
-}
-
-export function toggleInvertingArea(): ToggleInvertingAreaAction {
-	return {
-		type: InvertAreaActions.TOGGLE_INVERTING_AREA
-	}
-}

package/app/codeCharta/state/store/appSettings/invertArea/invertArea.reducer.ts

@@ -1,11 +1,9 @@
-import { InvertAreaAction, InvertAreaActions, setInvertArea, ToggleInvertingAreaAction } from "./invertArea.actions"
+import { InvertAreaAction, InvertAreaActions, setInvertArea } from "./invertArea.actions"
 
-export function invertArea(state = setInvertArea().payload, action: InvertAreaAction | ToggleInvertingAreaAction) {
+export function invertArea(state = setInvertArea().payload, action: InvertAreaAction) {
 	switch (action.type) {
 		case InvertAreaActions.SET_INVERT_AREA:
 			return action.payload
-		case InvertAreaActions.TOGGLE_INVERTING_AREA:
-			return !state
 		default:
 			return state
 	}

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

@@ -21,7 +21,7 @@ export class ResetColorRangeEffect {
 		)
 	)
 
-	constructor(@Inject(ActionsToken) private actions$: Actions, @Inject(Store) private store: Store) {}
+	constructor(@Inject(ActionsToken) private actions$: Actions, private store: Store) {}
 
 	resetColorRange$ = createEffect(() =>
 		this.resetActions$.pipe(

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

@@ -1,9 +1,10 @@
-import "./actionIcon.component.scss"
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-action-icon",
-	template: require("./actionIcon.component.html")
+	templateUrl: "./actionIcon.component.html",
+	styleUrls: ["./actionIcon.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ActionIconComponent {
 	@Input() icon: string

package/app/codeCharta/ui/actionIcon/actionIcon.module.ts

@@ -5,7 +5,6 @@ import { ActionIconComponent } from "./actionIcon.component"
 @NgModule({
 	imports: [CommonModule],
 	declarations: [ActionIconComponent],
-	exports: [ActionIconComponent],
-	entryComponents: [ActionIconComponent]
+	exports: [ActionIconComponent]
 })
 export class ActionIconModule {}

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

@@ -91,7 +91,7 @@ cc-attribute-side-bar {
 				}
 
 				.metric-summary {
-					align-content: end;
+					align-content: flex-end;
 					background: #d5d5d5;
 					display: flex;
 					flex-direction: row;

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

@@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing"
 import { render } from "@testing-library/angular"
 import { klona } from "klona"
 import { expect } from "@jest/globals"
-import { TEST_NODE_FOLDER, TEST_NODE_LEAF } from "../../util/dataMocks"
+import { TEST_NODE_FOLDER, TEST_NODE_LEAF, TEST_ATTRIBUTE_DESCRIPTORS } from "../../util/dataMocks"
 import { selectedNodeSelector } from "../../state/selectors/selectedNode.selector"
 import { AttributeSideBarComponent } from "./attributeSideBar.component"
 import { AttributeSideBarModule } from "./attributeSideBar.module"
@@ -13,13 +13,19 @@ jest.mock("../../state/selectors/selectedNode.selector", () => ({
 }))
 const mockedSelectedNodeSelector = selectedNodeSelector as jest.Mock
 
+const selectedMetricNames = {
+	areaMetric: "a",
+	heightMetric: "a",
+	colorMetric: "a",
+	edgeMetric: "c"
+}
+
 jest.mock("../../state/selectors/primaryMetrics/primaryMetricNames.selector", () => ({
-	primaryMetricNamesSelector: jest.fn(() => ({
-		areaMetric: "a",
-		heightMetric: "a",
-		colorMetric: "a",
-		edgeMetric: "c"
-	}))
+	primaryMetricNamesSelector: jest.fn(() => selectedMetricNames)
+}))
+
+jest.mock("../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector", () => ({
+	attributeDescriptorsSelector: jest.fn(() => TEST_ATTRIBUTE_DESCRIPTORS)
 }))
 
 describe("AttributeSideBarComponent", () => {
@@ -110,6 +116,52 @@ describe("AttributeSideBarComponent", () => {
 		)
 		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(1)
 	})
+
+	it("should contain 'no edge metric available' note", async () => {
+		mockedSelectedNodeSelector.mockImplementation(() => {
+			const node = klona(TEST_NODE_FOLDER)
+			node["children"] = [{}]
+			return node
+		})
+
+		selectedMetricNames.edgeMetric = undefined
+
+		const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
+
+		const primaryMetricsWithoutEdgeMetric = container.querySelectorAll("cc-attribute-side-bar-primary-metrics td")
+		// if this turns out to be flaky, iterate through all results
+		expect(primaryMetricsWithoutEdgeMetric[3].textContent === "No edge metric available")
+	})
+
+	it("should contain primary/secondary metrics with title/tooltip attribute/metric descriptor information", async () => {
+		selectedMetricNames.areaMetric = "a"
+		selectedMetricNames.heightMetric = "b"
+		selectedMetricNames.colorMetric = "someColor"
+		selectedMetricNames.edgeMetric = "someEdge"
+
+		mockedSelectedNodeSelector.mockImplementation(() => {
+			const node = klona(TEST_NODE_FOLDER)
+			node["children"] = [{}]
+			node["attributes"] = { a: 3, b: 1, c: 4, someColor: 10 }
+			node["edgeAttributes"] = { someEdge: { incoming: 20, outgoing: 60 } }
+			return node
+		})
+
+		const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
+
+		const attributeTypeSelectorWithinPrimaryMetrics = container.querySelectorAll("cc-attribute-side-bar-primary-metrics td")
+		const attributeTypeSelectorWithinSecondaryMetrics = container.querySelectorAll(
+			"cc-attribute-side-bar-secondary-metrics .metric-row"
+		)
+
+		expect(attributeTypeSelectorWithinPrimaryMetrics[0].getAttribute("title")).toBe("a_testTitle (a):\na_testDescription")
+		expect(attributeTypeSelectorWithinPrimaryMetrics[1].getAttribute("title")).toBe("b_testTitle (b)")
+		expect(attributeTypeSelectorWithinPrimaryMetrics[2].getAttribute("title")).toBe("someColor")
+		expect(attributeTypeSelectorWithinPrimaryMetrics[3].getAttribute("title")).toBe("someEdge")
+
+		expect(attributeTypeSelectorWithinSecondaryMetrics[0].getAttribute("title")).toBe("c:\nc_testDescription")
+		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(1)
+	})
 })
 
 function isAttributeTypeSelectorShown(container: Element) {