codecharta-visualization 1.113.0 → 1.115.0

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"
@@ -26,6 +25,7 @@ import { defaultScreenshotToClipboardEnabled } from "./enableClipboard/screensho
 import { defaultInvertArea } from "./invertArea/invertArea.actions"
 import { defaultIsEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.actions"
 import { defaultIsColorMetricLinkedToHeightMetric } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
+import { defaultEnableFloorLabel } from "./enableFloorLabels/enableFloorLabels.actions"
 
 export enum AppSettingsActions {
 	SET_APP_SETTINGS = "SET_APP_SETTINGS"
@@ -56,7 +56,6 @@ export const defaultAppSettings: AppSettings = {
 	hideFlatBuildings: defaultHideFlatBuildings,
 	invertHeight: defaultInvertHeight,
 	invertArea: defaultInvertArea,
-	dynamicMargin: defaultDynamicMargin,
 	isWhiteBackground: defaultIsWhiteBackground,
 	mapColors: defaultMapColors,
 	isPresentationMode: defaultIsPresentationMode,
@@ -71,5 +70,6 @@ export const defaultAppSettings: AppSettings = {
 	layoutAlgorithm: defaultLayoutAlgorithm,
 	maxTreeMapFiles: defaultMaxTreeMapFiles,
 	sharpnessMode: defaultSharpnessMode,
-	isColorMetricLinkedToHeightMetric: defaultIsColorMetricLinkedToHeightMetric
+	isColorMetricLinkedToHeightMetric: defaultIsColorMetricLinkedToHeightMetric,
+	enableFloorLabels: defaultEnableFloorLabel
 }

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"
@@ -25,6 +24,7 @@ import { screenshotToClipboardEnabled } from "./enableClipboard/screenshotToClip
 import { invertArea } from "./invertArea/invertArea.reducer"
 import { isEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.reducer"
 import { isColorMetricLinkedToHeightMetric } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.reducer"
+import { enableFloorLabels } from "./enableFloorLabels/enableFloorLabels.reducer"
 
 const appSettings = combineReducers({
 	colorLabels,
@@ -38,7 +38,6 @@ const appSettings = combineReducers({
 	showOnlyBuildingsWithEdges,
 	isEdgeMetricVisible,
 	isWhiteBackground,
-	dynamicMargin,
 	invertHeight,
 	invertArea,
 	hideFlatBuildings,
@@ -52,7 +51,8 @@ const appSettings = combineReducers({
 	layoutAlgorithm,
 	maxTreeMapFiles,
 	sharpnessMode,
-	isColorMetricLinkedToHeightMetric
+	isColorMetricLinkedToHeightMetric,
+	enableFloorLabels
 })
 
 export default appSettings

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

@@ -0,0 +1,21 @@
+import { CCAction } from "../../../../codeCharta.model"
+
+export enum EnableFloorLabelsActions {
+	SET_ENABLE_FLOOR_LABELS = "SET_ENABLE_FLOOR_LABELS"
+}
+
+export interface SetEnableFloorLabelsAction extends CCAction {
+	type: EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS
+	payload: boolean
+}
+
+export type EnableFloorLabelAction = SetEnableFloorLabelsAction
+
+export function setEnableFloorLabels(enableFloorLabel: boolean = defaultEnableFloorLabel): SetEnableFloorLabelsAction {
+	return {
+		type: EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS,
+		payload: enableFloorLabel
+	}
+}
+
+export const defaultEnableFloorLabel = true

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

@@ -0,0 +1,26 @@
+import { enableFloorLabels } from "./enableFloorLabels.reducer"
+import { EnableFloorLabelAction, setEnableFloorLabels } from "./enableFloorLabels.actions"
+
+describe("enableFloorLabel", () => {
+	describe("Default State", () => {
+		it("should initialize the default state", () => {
+			const result = enableFloorLabels(undefined, {} as EnableFloorLabelAction)
+
+			expect(result).toBeTruthy()
+		})
+	})
+
+	describe("Action: SET_ENABLE_FLOOR_LABEL", () => {
+		it("should set new enableFloorLabel", () => {
+			const result = enableFloorLabels(true, setEnableFloorLabels(false))
+
+			expect(result).toBeFalsy()
+		})
+
+		it("should set default colorMetric", () => {
+			const result = enableFloorLabels(false, setEnableFloorLabels())
+
+			expect(result).toBeTruthy()
+		})
+	})
+})

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

@@ -0,0 +1,10 @@
+import { EnableFloorLabelAction, EnableFloorLabelsActions, setEnableFloorLabels } from "./enableFloorLabels.actions"
+
+export function enableFloorLabels(state = setEnableFloorLabels().payload, action: EnableFloorLabelAction) {
+	switch (action.type) {
+		case EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS:
+			return action.payload
+		default:
+			return state
+	}
+}

package/app/codeCharta/state/store/appSettings/{dynamicMargin/dynamicMargin.selector.ts → enableFloorLabels/enableFloorLabels.selector.ts}

@@ -1,4 +1,4 @@
 import { createSelector } from "../../../angular-redux/createSelector"
 import { appSettingsSelector } from "../appSettings.selector"
 
-export const dynamicMarginSelector = createSelector([appSettingsSelector], appSettings => appSettings.dynamicMargin)
+export const enableFloorLabelsSelector = createSelector([appSettingsSelector], appSettings => appSettings.enableFloorLabels)

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/state/store/dynamicSettings/focusedNodePath/focusedNodePath.reducer.ts

@@ -1,10 +1,10 @@
 import { defaultFocusedNodePath, FocusedNodePathAction, FocusedNodePathActions } from "./focusedNodePath.actions"
-import { LoadFileService } from "../../../../services/loadFile/loadFile.service"
+import { fileRoot } from "../../../../services/loadFile/fileRoot"
 
 export function focusedNodePath(state = defaultFocusedNodePath, action: FocusedNodePathAction) {
 	switch (action.type) {
 		case FocusedNodePathActions.FOCUS_NODE:
-			if (action.payload === LoadFileService.ROOT_PATH) {
+			if (action.payload === fileRoot.rootPath) {
 				return state
 			}
 			return [action.payload, ...state]

package/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.spec.ts

@@ -1,9 +1,9 @@
 import { addBlacklistItem, BlacklistAction, setBlacklist, removeBlacklistItem, addBlacklistItems } from "./blacklist.actions"
 import { blacklist } from "./blacklist.reducer"
-import { BlacklistItem, BlacklistType } from "../../../../codeCharta.model"
+import { BlacklistItem } from "../../../../codeCharta.model"
 
 describe("blacklist", () => {
-	const item: BlacklistItem = { type: BlacklistType.flatten, path: "foo/bar" }
+	const item: BlacklistItem = { type: "flatten", path: "foo/bar" }
 
 	describe("Default State", () => {
 		it("should initialize the default state", () => {
@@ -23,17 +23,13 @@ describe("blacklist", () => {
 
 	describe("Action: ADD_BLACKLIST_ITEMS", () => {
 		it("should add all unique blacklist items to the blacklist", () => {
-			const existingItem: BlacklistItem = { type: BlacklistType.flatten, path: "foo/bar" }
+			const existingItem: BlacklistItem = { type: "flatten", path: "foo/bar" }
 			const result = blacklist(
 				[existingItem],
-				addBlacklistItems([
-					existingItem,
-					{ type: BlacklistType.flatten, path: "foo/bar2" },
-					{ type: BlacklistType.flatten, path: "foo/bar2" }
-				])
+				addBlacklistItems([existingItem, { type: "flatten", path: "foo/bar2" }, { type: "flatten", path: "foo/bar2" }])
 			)
 
-			expect(result).toEqual([existingItem, { type: BlacklistType.flatten, path: "foo/bar2" }])
+			expect(result).toEqual([existingItem, { type: "flatten", path: "foo/bar2" }])
 		})
 	})
 

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

@@ -1,5 +1,5 @@
 import { TestBed } from "@angular/core/testing"
-import { AttributeTypeValue, BlacklistType, RecursivePartial, State } from "../../codeCharta.model"
+import { AttributeTypeValue, RecursivePartial, State } from "../../codeCharta.model"
 import rootReducer from "./state.reducer"
 import { defaultState, setState } from "./state.actions"
 import { expect } from "@jest/globals"
@@ -46,7 +46,7 @@ describe("rootReducer", () => {
 				blacklist: [
 					{
 						path: "excludedNode",
-						type: BlacklistType.exclude
+						type: "exclude"
 					}
 				]
 			}
@@ -58,7 +58,7 @@ describe("rootReducer", () => {
 		expect(newState.fileSettings.blacklist).toEqual([
 			{
 				path: "excludedNode",
-				type: BlacklistType.exclude
+				type: "exclude"
 			}
 		])
 	})

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) {

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

@@ -1,6 +1,5 @@
-import "./attributeSideBar.component.scss"
 import { map } from "rxjs"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 
 import { Store } from "../../state/angular-redux/store"
 import { selectedNodeSelector } from "../../state/selectors/selectedNode.selector"
@@ -9,14 +8,13 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-attribute-side-bar",
-	template: require("./attributeSideBar.component.html")
+	templateUrl: "./attributeSideBar.component.html",
+	styleUrls: ["./attributeSideBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarComponent {
 	selectedNode$ = this.store.select(selectedNodeSelector)
 	fileName$ = this.store.select(accumulatedDataSelector).pipe(map(accumulatedData => accumulatedData.unifiedFileMeta?.fileName ?? ""))
 
-	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store
-	) {}
+	constructor(public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService, private store: Store) {}
 }

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

@@ -10,10 +10,10 @@ import { AttributeSideBarPrimaryMetricComponent } from "./attributeSideBarPrimar
 import { AttributeSideBarHeaderSectionComponent } from "./attributeSideBarHeaderSection/attributeSideBarHeaderSection.component"
 import { NodePathComponent } from "./attributeSideBarHeaderSection/nodePath/nodePath.component"
 import { MaterialModule } from "../../../material/material.module"
-import { RemoveExtensionModule } from "../../util/removeExtensionModule"
+import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, AttributeTypeSelectorModule, MetricDeltaSelectedModule, RemoveExtensionModule],
+	imports: [CommonModule, MaterialModule, AttributeTypeSelectorModule, MetricDeltaSelectedModule, SimplePipesModule],
 	declarations: [
 		AttributeSideBarComponent,
 		AttributeSideBarHeaderSectionComponent,

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

@@ -1,18 +1,19 @@
-import "./attributeSideBarHeaderSection.component.scss"
-import { Component, Input, Inject } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 import { CodeMapNode } from "../../../codeCharta.model"
 import { IsAttributeSideBarVisibleService } from "../../../services/isAttributeSideBarVisible.service"
 
 @Component({
 	selector: "cc-attribute-side-bar-header-section",
-	template: require("./attributeSideBarHeaderSection.component.html")
+	templateUrl: "./attributeSideBarHeaderSection.component.html",
+	styleUrls: ["./attributeSideBarHeaderSection.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarHeaderSectionComponent {
 	@Input() node: Pick<CodeMapNode, "children" | "name" | "link" | "path">
 	@Input() fileName: string
 
-	constructor(@Inject(IsAttributeSideBarVisibleService) private isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService) {}
+	constructor(private isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService) {}
 
 	closeSideBar() {
 		this.isAttributeSideBarVisibleService.isOpen = false

package/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/nodePath.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../../state/angular-redux/store"
 import { CodeMapNode, FileCount } from "../../../../codeCharta.model"
@@ -7,14 +7,15 @@ import { fileCountSelector } from "./fileCountSelector"
 
 @Component({
 	selector: "cc-node-path",
-	template: require("./nodePath.component.html")
+	templateUrl: "./nodePath.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class NodePathComponent {
 	@Input() node?: Pick<CodeMapNode, "path" | "children">
 	fileCount$: Observable<FileCount | undefined>
 	isDeltaMode$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.fileCount$ = store.select(fileCountSelector)
 		this.isDeltaMode$ = store.select(isDeltaStateSelector)
 	}

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../../state/angular-redux/store"
 
@@ -7,14 +7,15 @@ import { showAttributeTypeSelectorSelector } from "../../util/showAttributeTypeS
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metric",
-	template: require("./attributeSideBarPrimaryMetric.component.html")
+	templateUrl: "./attributeSideBarPrimaryMetric.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarPrimaryMetricComponent {
 	@Input() iconName: string
 	@Input() metric: Metric
 	showAttributeTypeSelector$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html

@@ -3,13 +3,13 @@
 		<th scope="col">Primary Metrics</th>
 
 		<tr>
-			<td>
+			<td [title]="primaryMetrics.area.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-alt'"
 					[metric]="primaryMetrics.area"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
-			<td>
+			<td [title]="primaryMetrics.height.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-v'"
 					[metric]="primaryMetrics.height"
@@ -18,14 +18,14 @@
 		</tr>
 
 		<tr>
-			<td>
+			<td [title]="primaryMetrics.color.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-paint-brush'"
 					[metric]="primaryMetrics.color"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
-			<ng-container *ngIf="primaryMetrics.edge; let edge">
-				<td *ngIf="edge.name !== 'None'">
+			<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
+				<td [title]="edge.descriptors | metricDescriptorTitle">
 					<i class="fa fa-exchange"></i>
 					<div class="metric-value">
 						<cc-attribute-type-selector
@@ -43,6 +43,11 @@
 					<p class="metric-name">{{ edge.name }} (in/out)</p>
 				</td>
 			</ng-container>
+			<ng-template #sidebarPrimaryMetricsEdgeElse>
+				<td>
+					<p class="metric-name">No edge metric available</p>
+				</td>
+			</ng-template>
 		</tr>
 	</table>
 </div>