codecharta-visualization 1.117.0 → 1.118.0

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

@@ -13,7 +13,7 @@ import { ApplyCustomConfigButtonComponent } from "./customConfigList/customConfi
 import { CustomConfigColorSchemaBySelectionMode } from "./customConfigList/customConfigItemGroup/customConfigDescription/customConfigColorSchemaBySelectionMode.pipe"
 import { FormsModule } from "@angular/forms"
 import { CustomConfigNoteDialogButtonModule } from "./customConfigNoteDialogButton/customConfigNoteDialogButton.module"
-import { TruncateTextPipe } from "../../util/truncateText.pipe"
+import { TruncateTextPipeModule } from "../../util/pipes/TruncateTextPipeModule"
 
 @NgModule({
 	imports: [
@@ -23,7 +23,8 @@ import { TruncateTextPipe } from "../../util/truncateText.pipe"
 		UploadCustomConfigButtonModule,
 		AddCustomConfigButtonModule,
 		DownloadCustomConfigButtonModule,
-		FormsModule
+		FormsModule,
+		TruncateTextPipeModule
 	],
 	declarations: [
 		CustomConfigsComponent,
@@ -32,7 +33,7 @@ import { TruncateTextPipe } from "../../util/truncateText.pipe"
 		ApplyCustomConfigButtonComponent,
 		CustomConfig2ApplicableMessage,
 		CustomConfig2ApplicableColor,
-		TruncateTextPipe,
+
 		CustomConfigColorSchemaBySelectionMode
 	],
 	exports: [CustomConfigsComponent]

package/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.component.ts

@@ -11,7 +11,7 @@ import { readFiles } from "../../../util/uploadFiles/readFiles"
 export class UploadCustomConfigButtonComponent {
 	upload() {
 		const fileInput = createCCFileInput()
-		fileInput.addEventListener("change", async () => {
+		fileInput.addEventListener("change", () => {
 			void this.uploadOnEvent(fileInput)
 		})
 		fileInput.click()

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

@@ -10,6 +10,7 @@ import { metricDistributionSelector } from "./selectors/metricDistribution.selec
 import { distributionMetricSelector } from "../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
 import { defaultDistributionMetric } from "../../state/store/dynamicSettings/distributionMetric/distributionMetric.reducer"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
+import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
 describe("fileExtensionBarComponent", () => {
 	beforeEach(() => {
@@ -42,7 +43,8 @@ describe("fileExtensionBarComponent", () => {
 							]
 						},
 						{ selector: distributionMetricSelector, value: defaultDistributionMetric },
-						{ selector: metricDataSelector, value: { nodeMetricData: [] } }
+						{ selector: metricDataSelector, value: { nodeMetricData: [] } },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				})
 			]

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

@@ -6,12 +6,12 @@ import { NgModule } from "@angular/core"
 import { CommonModule } from "@angular/common"
 import { MaterialModule } from "../../../material/material.module"
 import { FormsModule } from "@angular/forms"
-import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 import { FileSelectionModeService } from "./fileSelectionMode.service"
 import { FilePanelComponent } from "./filePanel.component"
+import { RemoveExtensionPipeModule } from "../../util/pipes/RemoveExtensionPipeModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule, SimplePipesModule],
+	imports: [CommonModule, MaterialModule, FormsModule, RemoveExtensionPipeModule],
 	declarations: [
 		FilePanelDeltaSelectorComponent,
 		FilePanelFileSelectorComponent,

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.html

@@ -1,20 +1,24 @@
-<ng-container *ngIf="metricDecorations.title; then titleExists; else onlyShowName" class="legend-block"></ng-container>
-<ng-template #titleExists>
-	<ng-container *ngIf="metricDecorations.description; then showTitleAndDescription; else showTitle"></ng-container>
-</ng-template>
-
-<ng-template #showTitleAndDescription>
-	<div title="{{ metricDecorations.description }}">
-		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
-	</div>
-</ng-template>
-<ng-template #showTitle>
-	<div>
-		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
-	</div>
-</ng-template>
-<ng-template #onlyShowName>
-	<div>
-		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.key }}</span>
-	</div>
-</ng-template>
+<ng-container *ngIf="attributeDescriptors$ | async as attributeDescriptors">
+	<ng-container *ngIf="attributeDescriptors[metricName]?.title as descriptorTitle; else metricTitleFallback" class="legend-block">
+		<div [title]="attributeDescriptors[metricName] | attributeDescriptorTooltip: metricName">
+			{{ metricSpecification }} metric:
+			<a [href]="link" target="_blank" *ngIf="attributeDescriptors[metricName].link as link; else metricNoLink">
+				<span class="bold">{{ descriptorTitle }}</span> ({{ metricName }}) <i class="fa fa-external-link"></i>
+			</a>
+			<ng-template #metricNoLink>
+				<span class="bold">{{ descriptorTitle }}</span> ({{ metricName }})
+			</ng-template>
+		</div>
+	</ng-container>
+	<ng-template #metricTitleFallback>
+		<div>
+			{{ metricSpecification }} metric:
+			<ng-container *ngIf="fallbackTitles.get(metricName) as metricTitle; else noFallback">
+				<span class="bold">{{ metricTitle }}</span> ({{ metricName }})
+			</ng-container>
+			<ng-template #noFallback>
+				<span class="bold"> {{ metricName }} </span>
+			</ng-template>
+		</div>
+	</ng-template>
+</ng-container>

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.ts

@@ -1,5 +1,8 @@
 import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { CcState } from "../../../codeCharta.model"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { Store } from "@ngrx/store"
+import { metricTitles } from "../../../util/metric/metricTitles"
 
 @Component({
 	selector: "cc-legend-block",
@@ -7,6 +10,10 @@ import { MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors
 	encapsulation: ViewEncapsulation.None
 })
 export class LegendBlockComponent {
-	@Input() metricFor: string
-	@Input() metricDecorations: MetricDescriptors
+	@Input() metricName: string
+	@Input() metricSpecification: string
+	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
+	fallbackTitles: Map<string, string> = metricTitles
+
+	constructor(private store: Store<CcState>) {}
 }

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

@@ -1,14 +1,10 @@
 <div class="block-wrapper" [class.visible]="isLegendVisible" [class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen">
 	<div *ngIf="!(isDeltaState$ | async)">
-		<cc-legend-block [metricDecorations]="areaMetric$ | async" [metricFor]="'Area'"></cc-legend-block>
-		<cc-legend-block [metricDecorations]="heightMetric$ | async" [metricFor]="'Height'"></cc-legend-block>
-		<cc-legend-block
-			*ngIf="edgeMetric$ | async; let edgeMetric"
-			[metricDecorations]="edgeMetric"
-			[metricFor]="'Edge'"
-		></cc-legend-block>
+		<cc-legend-block [metricName]="areaMetric$ | async" metricSpecification="Area"></cc-legend-block>
+		<cc-legend-block [metricName]="heightMetric$ | async" metricSpecification="Height"></cc-legend-block>
+		<cc-legend-block *ngIf="edgeMetric$ | async; let edgeMetric" [metricName]="edgeMetric" metricSpecification="Edge"></cc-legend-block>
 		<hr />
-		<cc-legend-block [metricDecorations]="colorMetric$ | async" [metricFor]="'Color'"></cc-legend-block>
+		<cc-legend-block [metricName]="colorMetric$ | async" metricSpecification="Color"></cc-legend-block>
 		<cc-color-picker-for-map-color [mapColorFor]="'positive'"></cc-color-picker-for-map-color>
 		<cc-color-picker-for-map-color [mapColorFor]="'neutral'"></cc-color-picker-for-map-color>
 		<cc-color-picker-for-map-color [mapColorFor]="'negative'"></cc-color-picker-for-map-color>
@@ -22,12 +18,10 @@
 	<hr />
 	<cc-color-picker-for-map-color [mapColorFor]="'selected'"></cc-color-picker-for-map-color>
 
-	<ng-container *ngIf="edgeMetric$ | async; let edgeMetric">
+	<ng-container *ngIf="edgeMetric$ | async">
 		<hr />
-		<div ng-if="$ctrl._viewModel.edgeMetricHasEdge">
-			<cc-color-picker-for-map-color [mapColorFor]="'outgoingEdge'"></cc-color-picker-for-map-color>
-			<cc-color-picker-for-map-color [mapColorFor]="'incomingEdge'"></cc-color-picker-for-map-color>
-		</div>
+		<cc-color-picker-for-map-color [mapColorFor]="'outgoingEdge'"></cc-color-picker-for-map-color>
+		<cc-color-picker-for-map-color [mapColorFor]="'incomingEdge'"></cc-color-picker-for-map-color>
 	</ng-container>
 
 	<cc-legend-marked-packages></cc-legend-marked-packages>

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

@@ -51,34 +51,32 @@ cc-legend-panel {
 			color: #000;
 		}
 
-		.legend-block {
-			display: block;
-			min-height: 25px;
-			max-width: 350px;
-			overflow: hidden;
+		cc-legend-block {
+			a:link,
+			a:visited {
+				text-decoration: none;
+				color: #000;
+			}
 
-			i,
-			img {
-				display: inline-block;
-				width: 14px;
+			a:hover {
+				color: blue;
+				text-decoration: solid;
+				text-decoration-line: underline;
 			}
 
-			i {
-				margin-right: 4px;
+			a:active {
+				color: red;
 			}
 
-			img {
-				padding-top: 3px;
-				height: 17px;
+			i.fa.fa-external-link {
+				font-size: 10px;
+				min-width: 10px;
+				text-align: center;
 			}
 
 			span {
 				display: inline-block;
 			}
-
-			.set-left-margin {
-				margin-left: 18px;
-			}
 		}
 
 		.bold {

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

@@ -13,11 +13,8 @@ import { colorRangeSelector } from "../../state/store/dynamicSettings/colorRange
 import { State } from "@ngrx/store"
 import { mapColorsSelector } from "../../state/store/appSettings/mapColors/mapColors.selector"
 import { defaultMapColors } from "../../state/store/appSettings/mapColors/mapColors.reducer"
-import { legendHeightMetricSelector } from "./selectors/legendHeightMetric.selector"
-import { legendAreaMetricSelector } from "./selectors/legendAreaMetric.selector"
-import { legendColorMetricSelector } from "./selectors/legendColorMetric.selector"
 import { selectedColorMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/selectedColorMetricData.selector"
-import { getMetricDescriptors } from "../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
 describe("LegendPanelController", () => {
 	beforeEach(() => {
@@ -27,15 +24,13 @@ describe("LegendPanelController", () => {
 				provideMockStore({
 					selectors: [
 						{ selector: heightMetricSelector, value: "mcc" },
-						{ selector: legendHeightMetricSelector, value: getMetricDescriptors("mcc") },
 						{ selector: areaMetricSelector, value: "loc" },
-						{ selector: legendAreaMetricSelector, value: getMetricDescriptors("loc") },
 						{ selector: colorMetricSelector, value: "rloc" },
-						{ selector: legendColorMetricSelector, value: getMetricDescriptors("rloc") },
 						{ selector: colorRangeSelector, value: { from: 21, to: 42, max: 9001 } },
 						{ selector: isDeltaStateSelector, value: true },
 						{ selector: mapColorsSelector, value: defaultMapColors },
-						{ selector: selectedColorMetricDataSelector, value: {} }
+						{ selector: selectedColorMetricDataSelector, value: {} },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				}),
 				{ provide: State, useValue: {} }
@@ -65,8 +60,7 @@ describe("LegendPanelController", () => {
 		detectChanges()
 		fireEvent.click(screen.getByTitle("Show panel"))
 
-		const areDeltaEntriesShown = screen.queryAllByText("delta", { exact: false }).length > 0
-		expect(areDeltaEntriesShown).toBe(false)
+		expect(screen.queryAllByText("delta", { exact: false }).length).not.toBeGreaterThan(0)
 
 		const metricDescriptions = container.querySelectorAll("cc-legend-block")
 		expect(metricDescriptions[0].textContent).toMatch("Area metric: Lines of Code (loc)")
@@ -74,12 +68,40 @@ describe("LegendPanelController", () => {
 		expect(metricDescriptions[2].textContent).toMatch("Color metric: Real Lines of Code (rloc)")
 	})
 
+	it("should contain elements with titles and links if attributeDescriptors are present", async () => {
+		const { container, detectChanges } = await render(LegendPanelComponent, { excludeComponentDeclaration: true })
+		const store = TestBed.inject(MockStore)
+		const metricLink = "https://rl.oc"
+		store.overrideSelector(isDeltaStateSelector, false)
+		const mccAttributeDescriptor = {
+			mcc: { title: "MCC_Title", description: "MCC_description", hintLowValue: "MCC_lowValue", hintHighValue: "", link: "" }
+		}
+		store.overrideSelector(attributeDescriptorsSelector, {
+			...mccAttributeDescriptor,
+			rloc: { title: "RLOC_Title", description: "RLOC_Description", hintLowValue: "", hintHighValue: "", link: metricLink }
+		})
+		store.refreshState()
+		detectChanges()
+		fireEvent.click(screen.getByTitle("Show panel"))
+		expect(screen.queryAllByText("delta", { exact: false }).length).not.toBeGreaterThan(0)
+
+		const metricDescriptions = container.querySelectorAll("cc-legend-block")
+		expect(metricDescriptions[0].textContent).toMatch("Area metric: Lines of Code (loc)")
+		expect(metricDescriptions[1].textContent).toMatch("Height metric: MCC_Title (mcc)")
+		expect(metricDescriptions[1].firstElementChild.getAttribute("title")).toMatch(
+			"MCC_Title (mcc):\nMCC_description\nLow Values: MCC_lowValue"
+		)
+		expect(metricDescriptions[1].querySelector("a")).toBeNull()
+		expect(metricDescriptions[2].textContent).toMatch("Color metric: RLOC_Title (rloc)")
+		expect(metricDescriptions[2].firstElementChild.getAttribute("title")).toMatch("RLOC_Title (rloc)")
+		expect(metricDescriptions[2].querySelector("a").getAttribute("href")).toMatch(metricLink)
+	})
+
 	it("should display legend for delta mode", async () => {
 		const { container } = await render(LegendPanelComponent, { excludeComponentDeclaration: true })
 		fireEvent.click(screen.getByTitle("Show panel"))
 
-		const areDeltaEntriesShown = screen.queryAllByText("delta", { exact: false }).length > 0
-		expect(areDeltaEntriesShown).toBe(true)
+		expect(screen.queryAllByText("delta", { exact: false }).length).toBeGreaterThan(0)
 
 		const metricDescriptions = container.querySelectorAll("cc-legend-block")
 		expect(metricDescriptions.length).toBe(0)

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

@@ -1,12 +1,12 @@
 import { Component, ViewEncapsulation } from "@angular/core"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { legendColorMetricSelector } from "./selectors/legendColorMetric.selector"
-import { legendHeightMetricSelector } from "./selectors/legendHeightMetric.selector"
-import { legendAreaMetricSelector } from "./selectors/legendAreaMetric.selector"
-import { legendEdgeMetricSelector } from "./selectors/legendEdgeMetric.selector"
 import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
 import { Store } from "@ngrx/store"
 import { CcState } from "../../codeCharta.model"
+import { heightMetricSelector } from "../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
+import { areaMetricSelector } from "../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
+import { colorMetricSelector } from "../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
+import { edgeMetricSelector } from "../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 
 @Component({
 	selector: "cc-legend-panel",
@@ -17,10 +17,10 @@ import { CcState } from "../../codeCharta.model"
 export class LegendPanelComponent {
 	isLegendVisible = false
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
-	heightMetric$ = this.store.select(legendHeightMetricSelector)
-	areaMetric$ = this.store.select(legendAreaMetricSelector)
-	colorMetric$ = this.store.select(legendColorMetricSelector)
-	edgeMetric$ = this.store.select(legendEdgeMetricSelector)
+	heightMetric$ = this.store.select(heightMetricSelector)
+	areaMetric$ = this.store.select(areaMetricSelector)
+	colorMetric$ = this.store.select(colorMetricSelector)
+	edgeMetric$ = this.store.select(edgeMetricSelector)
 
 	constructor(public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService, private store: Store<CcState>) {}
 

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

@@ -6,10 +6,11 @@ import { LegendPanelComponent } from "./legendPanel.component"
 import { MaterialModule } from "../../../material/material.module"
 import { LegendBlockComponent } from "./legendBlock/legendBlock.component"
 import { ColorPickerForMapColorModule } from "../colorPickerForMapColor/colorPickerForMapColor.module"
+import { AttributeDescriptorTooltipPipeModule } from "../../util/pipes/AttributeDescriptorTooltipPipeModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, LegendMarkedPackagesModule, ColorPickerForMapColorModule],
 	declarations: [LegendPanelComponent, LegendBlockComponent],
-	exports: [LegendPanelComponent]
+	exports: [LegendPanelComponent],
+	imports: [CommonModule, MaterialModule, LegendMarkedPackagesModule, ColorPickerForMapColorModule, AttributeDescriptorTooltipPipeModule]
 })
 export class LegendPanelModule {}

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

@@ -4,7 +4,9 @@
 	(selectionChange)="handleMetricChanged($event.value)"
 	(openedChange)="handleOpenedChanged($event)"
 	[disabled]="isDisabled"
+	*ngIf="attributeDescriptors$ | async as attributeDescriptors"
 >
+	<mat-select-trigger>{{ selectedMetricName }}</mat-select-trigger>
 	<mat-form-field class="cc-metric-chooser-search-field">
 		<i matPrefix class="fa fa-search search-icon"></i>
 		<input #searchTermInput matInput type="text" [placeholder]="searchPlaceholder" [(ngModel)]="searchTerm" />
@@ -13,10 +15,13 @@
 		<mat-option
 			*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm: searchTerm"
 			[value]="option.name"
-			matTooltip="{{ metricDataDescription.get(option.name) }}"
+			[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip: option.name"
 		>
 			{{ option.name }}
-			<span class="metric-max-value">({{ option.maxValue }})</span>
+			<span class="metric-max-value">({{ option.maxValue }})</span><br />
+			<span class="metric-subtitle" *ngIf="attributeDescriptors[option.name]?.description as descriptorSubtitle">
+				{{ descriptorSubtitle }}
+			</span>
 		</mat-option>
 	</div>
 </mat-select>

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

@@ -60,6 +60,14 @@ cc-metric-chooser {
 		mat-option .metric-max-value {
 			color: #ccc;
 		}
+
+		mat-option .metric-subtitle {
+			color: #999;
+			font-size: 11px;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
 	}
 }
 

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

@@ -7,6 +7,8 @@ import { MetricChooserComponent } from "./metricChooser.component"
 import { MetricChooserModule } from "./metricChooser.module"
 import { provideMockStore } from "@ngrx/store/testing"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
+import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { TEST_ATTRIBUTE_DESCRIPTORS_FULL } from "../../util/dataMocks"
 
 describe("metricChooserComponent", () => {
 	beforeEach(() => {
@@ -21,10 +23,13 @@ describe("metricChooserComponent", () => {
 								nodeMetricData: [
 									{ name: "aMetric", maxValue: 1 },
 									{ name: "bMetric", maxValue: 2 },
-									{ name: "cMetric", maxValue: 3 }
+									{ name: "cMetric", maxValue: 3 },
+									{ name: "fullMetric", maxValue: 42 },
+									{ name: "mcc", maxValue: 55 }
 								]
 							}
-						}
+						},
+						{ selector: attributeDescriptorsSelector, value: TEST_ATTRIBUTE_DESCRIPTORS_FULL }
 					]
 				})
 			]
@@ -33,7 +38,7 @@ describe("metricChooserComponent", () => {
 
 	it("should be a select for metrics", async () => {
 		let selectedMetricName = "aMetric"
-		await render(MetricChooserComponent, {
+		const { rerender, detectChanges } = await render(MetricChooserComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: {
 				searchPlaceholder: "search metric (max value)",
@@ -42,28 +47,44 @@ describe("metricChooserComponent", () => {
 			}
 		})
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")
 		expect(options[2].textContent).toMatch("cMetric (3)")
+		expect(options[3].textContent).toMatch("fullMetric (42) FullTestDescription")
+		expect(options[3].getAttribute("title")).toMatch(
+			"FullTestTitle (fullMetric):\nFullTestDescription\nHigh Values: FullTestHigh\nLow Values: FullLowValue"
+		)
+		expect(options[4].textContent).toMatch("mcc (55)")
+		expect(options[4].getAttribute("title")).toMatch("Cyclomatic Complexity")
 
 		await userEvent.click(options[1])
-		expect(screen.queryByText("aMetric (1)")).toBe(null)
-		expect(screen.queryByText("bMetric (2)")).not.toBe(null)
+
+		await rerender({
+			componentProperties: {
+				searchPlaceholder: "search metric (max value)",
+				selectedMetricName,
+				handleMetricChanged: (value: string) => (selectedMetricName = value)
+			}
+		})
+		detectChanges()
+		expect(screen.queryByText("aMetric")).toBe(null)
+		expect(screen.queryByText("bMetric")).not.toBe(null)
 	})
 
 	it("should focus search field initially, filter options by search term, and reset search term on close", async () => {
-		await render(MetricChooserComponent, {
+		let selectedMetricName = "aMetric"
+		const { rerender } = await render(MetricChooserComponent, {
 			excludeComponentDeclaration: true,
 			componentProperties: {
 				searchPlaceholder: "search metric (max value)",
-				selectedMetricName: "aMetric",
-				handleMetricChanged: jest.fn()
+				selectedMetricName,
+				handleMetricChanged: (value: string) => (selectedMetricName = value)
 			}
 		})
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		screen.getByPlaceholderText("search metric (max value)")
 		const searchBox = getSearchBox()
 		expect(document.activeElement).toBe(searchBox)
@@ -76,7 +97,14 @@ describe("metricChooserComponent", () => {
 		await userEvent.click(options[0])
 		expect(screen.queryByRole("listbox")).toBeNull()
 
-		await userEvent.click(await screen.findByText("bMetric (2)"))
+		await rerender({
+			componentProperties: {
+				searchPlaceholder: "search metric (max value)",
+				selectedMetricName,
+				handleMetricChanged: (value: string) => (selectedMetricName = value)
+			}
+		})
+		await userEvent.click(await screen.findByText("bMetric"))
 		expect(getSearchBox().value).toBe("")
 
 		function getSearchBox() {

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

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"
 import { map, Observable } from "rxjs"
 import { EdgeMetricData, NodeMetricData, CcState } from "../../codeCharta.model"
-import { metricTitles } from "../../util/metric/metricTitles"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
+import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { Store } from "@ngrx/store"
 
 type MetricChooserType = "node" | "edge"
@@ -22,7 +22,7 @@ export class MetricChooserComponent implements OnInit {
 	@ViewChild("searchTermInput") searchTermInput: ElementRef<HTMLInputElement>
 	searchTerm = ""
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>
-	metricDataDescription: Map<string, string> = metricTitles
+	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
 
 	constructor(private store: Store<CcState>) {}
 

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

@@ -4,10 +4,11 @@ import { FormsModule } from "@angular/forms"
 import { MaterialModule } from "../../../material/material.module"
 import { FilterMetricDataBySearchTermPipe } from "./filterMetricDataBySearchTerm.pipe"
 import { MetricChooserComponent } from "./metricChooser.component"
+import { AttributeDescriptorTooltipPipeModule } from "../../util/pipes/AttributeDescriptorTooltipPipeModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule],
 	declarations: [MetricChooserComponent, FilterMetricDataBySearchTermPipe],
-	exports: [MetricChooserComponent]
+	exports: [MetricChooserComponent],
+	imports: [CommonModule, MaterialModule, FormsModule, AttributeDescriptorTooltipPipeModule]
 })
 export class MetricChooserModule {}

package/app/codeCharta/ui/ribbonBar/areaMetricChooser/areaMetricChooser.component.html

@@ -4,6 +4,7 @@
 	[selectedMetricName]="areaMetric$ | async"
 	[searchPlaceholder]="'Area Metric (highest value)'"
 	[handleMetricChanged]="handleAreaMetricChanged"
+	title="Change area metric"
 >
 	<cc-metric-chooser-value-hovered hoveredInformation [metricFor]="'areaMetric'"></cc-metric-chooser-value-hovered>
 </cc-metric-chooser>

package/app/codeCharta/ui/ribbonBar/areaMetricChooser/areaMetricChooser.component.spec.ts

@@ -4,10 +4,13 @@ import { expect } from "@jest/globals"
 import userEvent from "@testing-library/user-event"
 import { AreaMetricChooserComponent } from "./areaMetricChooser.component"
 import { AreaMetricChooserModule } from "./areaMetricChooser.module"
-import { provideMockStore } from "@ngrx/store/testing"
+import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { metricDataSelector } from "../../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { areaMetricSelector } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
 import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getLastAction } from "../../../util/testUtils/store.utils"
+import { setAreaMetric } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.actions"
 
 describe("areaMetricChooserComponent", () => {
 	beforeEach(() => {
@@ -26,7 +29,8 @@ describe("areaMetricChooserComponent", () => {
 							}
 						},
 						{ selector: areaMetricSelector, value: "aMetric" },
-						{ selector: hoveredNodeSelector, value: null }
+						{ selector: hoveredNodeSelector, value: null },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				})
 			]
@@ -34,16 +38,23 @@ describe("areaMetricChooserComponent", () => {
 	})
 
 	it("should be a select for area metric", async () => {
-		await render(AreaMetricChooserComponent, { excludeComponentDeclaration: true })
+		const { detectChanges } = await render(AreaMetricChooserComponent, { excludeComponentDeclaration: true })
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		expect(screen.getByPlaceholderText("Area Metric (highest value)")).not.toBe(null)
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")
 
 		await userEvent.click(options[1])
-		expect(screen.queryByText("aMetric (1)")).toBe(null)
-		expect(screen.queryByText("bMetric (2)")).not.toBe(null)
+
+		const store = TestBed.inject(MockStore)
+		expect(await getLastAction(store)).toEqual(setAreaMetric({ value: "bMetric" }))
+		store.overrideSelector(areaMetricSelector, "bMetric")
+		store.refreshState()
+		detectChanges()
+
+		expect(screen.queryByText("aMetric")).toBe(null)
+		expect(screen.queryByText("bMetric")).not.toBe(null)
 	})
 })

package/app/codeCharta/ui/ribbonBar/colorMetricChooser/colorMetricChooser.component.html

@@ -5,6 +5,7 @@
 	[searchPlaceholder]="'Color Metric (highest value)'"
 	[handleMetricChanged]="handleColorMetricChanged"
 	[isDisabled]="isColorMetricLinkedToHeightMetric$ | async"
+	[attr.title]="(isColorMetricLinkedToHeightMetric$ | async) ? 'Currently linked to height metric' : 'Change color metric'"
 >
 	<cc-metric-chooser-value-hovered hoveredInformation [metricFor]="'colorMetric'"></cc-metric-chooser-value-hovered>
 </cc-metric-chooser>