codecharta-visualization 1.114.0 → 1.115.1

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

@@ -46,6 +46,10 @@ cc-attribute-side-bar {
 			}
 
 			table {
+				th {
+					text-align: left;
+				}
+
 				&.primary-metrics {
 					table-layout: fixed;
 					width: 100%;
@@ -63,54 +67,71 @@ cc-attribute-side-bar {
 						}
 					}
 
+					.primary-metric-box {
+						display: flex;
+						flex-direction: column;
+						height: 100%;
+						width: 100%;
+					}
+
+					.metric-name {
+						margin-top: 5px;
+					}
+
+					.primary-metric-value {
+						margin-right: -5px;
+					}
+
 					i.fa {
 						font-size: 12pt;
 						min-width: 17px;
 						text-align: center;
 					}
-
-					.metric-name {
-						margin: 5px 0 0 0;
-					}
 				}
 
-				th {
-					text-align: left;
-				}
+				&.secondary-metrics {
+					td {
+						padding-left: 5px;
 
-				td {
-					text-align: left;
-					vertical-align: initial;
-					margin: 0;
-				}
+						&:first-child {
+							padding-left: 4px;
+						}
+					}
+
+					.secondary-metric-box {
+						border-radius: 3px;
+						padding: 4px 4px;
+						vertical-align: middle;
+						background: #d5d5d5;
+					}
 
-				.metric-summary,
-				.metric-delta {
-					border-radius: 3px;
-					padding: 4px 4px;
+					.secondary-metric-row {
+						flex-wrap: nowrap;
+					}
 				}
 
-				.metric-summary {
-					align-content: end;
-					background: #d5d5d5;
+				.primary-metric-row,
+				.secondary-metric-row {
 					display: flex;
-					flex-direction: row;
-					gap: 4px;
-					justify-content: space-between;
-					text-align: right;
-					vertical-align: center;
+					align-items: center;
+					flex-wrap: wrap;
+					gap: 5px;
 				}
 
 				.metric-name {
 					color: grey;
 					word-break: break-word;
+					vertical-align: middle;
 				}
 
-				.metric-value {
-					display: inline-block;
-					margin-left: 4px;
+				.delta-value-box {
+					vertical-align: middle;
 				}
 			}
+
+			cc-metric-delta-selected:has(span) {
+				margin-top: 5px;
+			}
 		}
 	}
 }

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", () => {
@@ -65,7 +71,7 @@ describe("AttributeSideBarComponent", () => {
 		expect(pathName).toMatch("/root/big leaf")
 
 		const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent
-		const expectedPrimaryMetricTextContent = "20 a"
+		const expectedPrimaryMetricTextContent = "20a"
 		expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent)
 
 		const expectedSecondaryMetricTextContent = "15b"
@@ -73,7 +79,7 @@ describe("AttributeSideBarComponent", () => {
 			.querySelector("cc-attribute-side-bar-primary-metric")
 			.textContent.includes(expectedSecondaryMetricTextContent)
 		expect(isSecondaryMetricInPrimaryMetricSection).toBe(false)
-		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent
+		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent
 		expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent)
 
 		expect(isAttributeTypeSelectorShown(container)).toBe(false)
@@ -82,13 +88,12 @@ describe("AttributeSideBarComponent", () => {
 	it("should display deltas if node has delta values", async () => {
 		mockedSelectedNodeSelector.mockImplementation(() => klona(TEST_NODE_LEAF))
 		const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
-
 		const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent
 		const expectedPrimaryMetricTextContent = /20\s+Δ1.0\s+a/
 		expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent)
 
 		const expectedSecondaryMetricTextContent = /15\s+Δ2.0\s+b/
-		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent
+		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent
 		expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent)
 	})
 
@@ -110,6 +115,48 @@ 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 tr")
+		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[1].getAttribute("title")).toBe("c:\nc_testDescription")
+		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(2)
+	})
 })
 
 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.html

@@ -1,14 +1,14 @@
-<i [class]="iconName"></i>
-<div class="metric-value">
-	<cc-attribute-type-selector
-		*ngIf="showAttributeTypeSelector$ | async"
-		class="attribute-type-select"
-		[metricName]="metric.name"
-		[metricType]="'nodes'"
-	></cc-attribute-type-selector>
-	<span>
-		{{ metric.value | number: "1.0-0" }}
-	</span>
+<div class="primary-metric-box">
+	<div class="primary-metric-row">
+		<i [class]="iconName"></i>
+		<cc-attribute-type-selector
+			*ngIf="showAttributeTypeSelector$ | async"
+			class="attribute-type-select"
+			[metricName]="metric.name"
+			[metricType]="'nodes'"
+		></cc-attribute-type-selector>
+		<span class="primary-metric-value">{{ metric.value | number: "1.0-0" }}</span>
+	</div>
+	<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
+	<span class="metric-name">{{ metric.name }}</span>
 </div>
-<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
-<p class="metric-name">{{ metric.name }}</p>

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,46 +3,52 @@
 		<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"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
 		</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'">
-					<i class="fa fa-exchange"></i>
-					<div class="metric-value">
-						<cc-attribute-type-selector
-							*ngIf="showAttributeTypeSelector$ | async"
-							class="attribute-type-select"
-							[metricName]="edge.name"
-							[metricType]="'edges'"
-						></cc-attribute-type-selector>
-						<span class="metric-value">
-							{{ edge.incoming | number: "1.0-0" }}
-							<span>/</span>
-							{{ edge.outgoing | number: "1.0-0" }}
-						</span>
+			<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
+				<td [title]="edge.descriptors | metricDescriptorTitle">
+					<div class="primary-metric-box">
+						<div class="primary-metric-row">
+							<i class="fa fa-exchange"></i>
+							<cc-attribute-type-selector
+								*ngIf="showAttributeTypeSelector$ | async"
+								class="attribute-type-select"
+								[metricName]="edge.name"
+								[metricType]="'edges'"
+							></cc-attribute-type-selector>
+							<span>
+								{{ edge.incoming | number: "1.0-0" }}
+								<span>/</span>
+								{{ edge.outgoing | number: "1.0-0" }}
+							</span>
+						</div>
+						<span class="metric-name">{{ edge.name }} (in/out)</span>
 					</div>
-					<p class="metric-name">{{ edge.name }} (in/out)</p>
 				</td>
 			</ng-container>
+			<ng-template #sidebarPrimaryMetricsEdgeElse>
+				<td>
+					<span class="metric-name">No edge metric available</span>
+				</td>
+			</ng-template>
 		</tr>
 	</table>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -7,13 +7,14 @@ import { PrimaryMetrics, primaryMetricsSelector } from "../../../state/selectors
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metrics",
-	template: require("./attributeSideBarPrimaryMetrics.component.html")
+	templateUrl: "./attributeSideBarPrimaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarPrimaryMetricsComponent {
 	primaryMetrics$: Observable<PrimaryMetrics>
 	showAttributeTypeSelector$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.primaryMetrics$ = store.select(primaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 	}

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

@@ -5,9 +5,9 @@
 				<tr>
 					<th scope="col" colspan="2">Secondary Metrics</th>
 				</tr>
-				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" class="metric-row">
-					<td class="metric-summary">
-						<span class="metric-type">
+				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" [title]="secondaryMetric.descriptors | metricDescriptorTitle">
+					<td class="secondary-metric-box">
+						<div class="secondary-metric-row">
 							<cc-attribute-type-selector
 								*ngIf="showAttributeTypeSelector$ | async"
 								class="attribute-type-select"
@@ -15,13 +15,15 @@
 								[metricType]="'nodes'"
 							>
 							</cc-attribute-type-selector>
-						</span>
-						<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
+							<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
+						</div>
 					</td>
-					<td [hidden]="!(showDeltaValue$ | async)">
+					<td class="delta-value-box" [hidden]="!(showDeltaValue$ | async)">
 						<cc-metric-delta-selected [metricName]="secondaryMetric.name"></cc-metric-delta-selected>
 					</td>
-					<td class="metric-name">{{ secondaryMetric.name }}</td>
+					<td>
+						<span class="metric-name">{{ secondaryMetric.name }}</span>
+					</td>
 				</tr>
 			</table>
 		</div>

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -9,14 +9,15 @@ import { secondaryMetricsSelector } from "./secondaryMetrics.selector"
 
 @Component({
 	selector: "cc-attribute-side-bar-secondary-metrics",
-	template: require("./attributeSideBarSecondaryMetrics.component.html")
+	templateUrl: "./attributeSideBarSecondaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarSecondaryMetricsComponent {
 	secondaryMetrics$: Observable<Metric[]>
 	showAttributeTypeSelector$: Observable<boolean>
 	showDeltaValue$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.secondaryMetrics$ = store.select(secondaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 		this.showDeltaValue$ = store.select(showDeltaValueSelector)

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.spec.ts

@@ -1,5 +1,6 @@
 import { DIFFERENT_NODE } from "../../../util/dataMocks"
 import { _calculateSecondaryMetrics } from "./secondaryMetrics.selector"
+import { AttributeDescriptors } from "../../../codeCharta.model"
 
 const primaryMetricNames = {
 	areaMetric: "a",
@@ -8,15 +9,39 @@ const primaryMetricNames = {
 	edgeMetric: "None"
 }
 
+const attributeDescriptors: AttributeDescriptors = {}
+
 describe("secondaryMetricsSelector", () => {
 	it("should return an empty list if there is no selectedNode", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames)).toEqual([])
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors)).toEqual([])
 	})
 
 	it("should return a by name sorted list of metrics without primary metrics", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames, DIFFERENT_NODE)).toEqual([
-			{ name: "b", value: 15 },
-			{ name: "mcc", value: 14 }
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors, DIFFERENT_NODE)).toEqual([
+			{
+				name: "b",
+				value: 15,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "b",
+					link: undefined,
+					title: undefined
+				}
+			},
+			{
+				name: "mcc",
+				value: 14,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "mcc",
+					link: undefined,
+					title: "Cyclomatic Complexity"
+				}
+			}
 		])
 	})
 })

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.ts

@@ -1,11 +1,17 @@
-import { CodeMapNode, PrimaryMetrics } from "../../../codeCharta.model"
+import { CodeMapNode, PrimaryMetrics, AttributeDescriptors } from "../../../codeCharta.model"
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { primaryMetricNamesSelector } from "../../../state/selectors/primaryMetrics/primaryMetricNames.selector"
 import { selectedNodeSelector } from "../../../state/selectors/selectedNode.selector"
 import { CcState } from "../../../state/store/store"
 import { Metric } from "../util/metric"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getMetricDescriptors } from "../util/metricDescriptors"
 
-export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?: Pick<CodeMapNode, "attributes">) => {
+export const _calculateSecondaryMetrics = (
+	primaryMetrics: PrimaryMetrics,
+	attributeDescriptors: AttributeDescriptors,
+	node?: Pick<CodeMapNode, "attributes">
+) => {
 	if (!node) {
 		return [] as Metric[]
 	}
@@ -17,11 +23,12 @@ export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?
 
 	return secondaryMetricNames.map(secondaryMetricName => ({
 		name: secondaryMetricName,
-		value: node.attributes[secondaryMetricName]
+		value: node.attributes[secondaryMetricName],
+		descriptors: getMetricDescriptors(secondaryMetricName, attributeDescriptors)
 	}))
 }
 
 export const secondaryMetricsSelector: (state: CcState) => Metric[] = createSelector(
-	[primaryMetricNamesSelector, selectedNodeSelector],
+	[primaryMetricNamesSelector, attributeDescriptorsSelector, selectedNodeSelector],
 	_calculateSecondaryMetrics
 )

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

@@ -1,16 +1,24 @@
+@use "../../../../material/theme";
 cc-attribute-type-selector {
-	.mat-button-toggle-group {
-		height: 18px;
+	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+		display: flex;
 		align-items: center;
-		justify-content: space-evenly;
+		height: 100%;
 	}
 
-	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-		padding: 0 7px 0 7px;
+	button {
+		align-items: center;
+		height: 100%;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+			color: theme.$cc-primary-color;
+		}
 	}
 
-	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-	.mat-button-toggle-group-appearance-standard {
-		border: 0.1px solid darkgrey;
+	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*="mat-elevation-z"]),
+	.mat-button-toggle-group-appearance-standard:not([class*="mat-elevation-z"]) {
+		height: 22px;
+		border: 0.5px solid darkgrey;
 	}
 }