codecharta-visualization 1.114.0 → 1.115.1

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.html

@@ -1,25 +1,27 @@
-<mat-select class="delta-select" [value]="referenceFile$ | async" (selectionChange)="handleDeltaReferenceFileChange($event.value)">
-	<mat-option *ngFor="let file of files$ | async" [value]="file.file">
-		{{ file.file.fileMeta.fileName | removeExtension }}
-	</mat-option>
-</mat-select>
-<button
-	class="reference-comparison-switch"
-	[disabled]="(comparisonFile$ | async) === undefined"
-	(click)="switchReferenceAndComparison()"
-	title="Switch reference and comparison file"
->
-	<i class="fa fa-arrows-h"></i>
-</button>
+<div class="delta-select-wrapper">
+	<mat-select class="delta-select" [value]="referenceFile$ | async" (selectionChange)="handleDeltaReferenceFileChange($event.value)">
+		<mat-option *ngFor="let file of files$ | async" [value]="file.file">
+			{{ file.file.fileMeta.fileName | removeExtension }}
+		</mat-option>
+	</mat-select>
+	<button
+		class="reference-comparison-switch"
+		[disabled]="(comparisonFile$ | async) === undefined"
+		(click)="switchReferenceAndComparison()"
+		title="Switch reference and comparison file"
+	>
+		<i class="fa fa-arrows-h"></i>
+	</button>
 
-<mat-select
-	class="delta-select"
-	placeholder="select comparison file"
-	[value]="comparisonFile$ | async"
-	(selectionChange)="handleDeltaComparisonFileChange($event.value)"
->
-	<mat-option *ngFor="let file of possibleComparisonFiles$ | async" [value]="file.file">
-		{{ file.file.fileMeta.fileName | removeExtension }}
-	</mat-option>
-</mat-select>
-<div class="pictogram" [style.background]="pictogramBackground$ | async"></div>
+	<mat-select
+		class="delta-select"
+		placeholder="select comparison file"
+		[value]="comparisonFile$ | async"
+		(selectionChange)="handleDeltaComparisonFileChange($event.value)"
+	>
+		<mat-option *ngFor="let file of possibleComparisonFiles$ | async" [value]="file.file">
+			{{ file.file.fileMeta.fileName | removeExtension }}
+		</mat-option>
+	</mat-select>
+	<div class="pictogram" [style.background]="pictogramBackground$ | async"></div>
+</div>

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.scss

@@ -0,0 +1,6 @@
+cc-file-panel-delta-selector {
+	.delta-select-wrapper {
+		display: flex;
+		gap: 12px;
+	}
+}

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { map } from "rxjs"
 import { CCFile } from "../../../codeCharta.model"
 import { FileSelectionState } from "../../../model/files/files"
@@ -10,7 +10,9 @@ import { pictogramBackgroundSelector } from "./pictogramBackground.selector"
 
 @Component({
 	selector: "cc-file-panel-delta-selector",
-	template: require("./filePanelDeltaSelector.component.html")
+	templateUrl: "./filePanelDeltaSelector.component.html",
+	styleUrls: ["./filePanelDeltaSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelDeltaSelectorComponent {
 	files$ = this.store.select(filesSelector)
@@ -19,7 +21,7 @@ export class FilePanelDeltaSelectorComponent {
 	possibleComparisonFiles$ = this.files$.pipe(map(files => files.filter(file => file.selectedAs !== FileSelectionState.Reference)))
 	pictogramBackground$ = this.store.select(pictogramBackgroundSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleDeltaReferenceFileChange(file: CCFile) {
 		this.store.dispatch(setDeltaReference(file))

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -3,12 +3,13 @@
 	[(value)]="selectedFilesInUI"
 	(selectionChange)="handleSelectedFilesChanged($event.value)"
 	(openedChange)="handleOpenedChanged($event)"
+	class="standard-select"
 	multiple
 >
-	<div class="actions">
-		<button mat-button (click)="handleSelectAllFiles()">All</button>
-		<button mat-button (click)="handleSelectZeroFiles()">None</button>
-		<button mat-button (click)="handleInvertSelectedFiles()">Invert</button>
+	<div class="file-selection-actions">
+		<button class="file-select-action-button" (click)="handleSelectAllFiles()">All</button>
+		<button class="file-select-action-button" (click)="handleSelectZeroFiles()">None</button>
+		<button class="file-select-action-button" (click)="handleInvertSelectedFiles()">Invert</button>
 	</div>
 	<mat-option class="filenames" *ngFor="let file of fileStates" [value]="file.file">
 		{{ file.file.fileMeta.fileName | removeExtension }}

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -1,12 +1,42 @@
+@use "../../../../material/theme";
 .file-select {
-	&.mat-select-panel {
-		max-width: max-content;
-	}
-}
+	&.mat-mdc-select-panel {
+		min-width: max-content;
+		padding: 0;
+
+		.mat-mdc-option .mdc-list-item__primary-text {
+			flex: 1;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.file-selection-actions {
+			display: flex;
+		}
+
+		button {
+			width: 100%;
+			font-size: 16px;
+			margin: 0;
+			background-color: transparent;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+				color: theme.$cc-primary-color;
+			}
+
+			&.file-select-action-button {
+				padding: 15px 10px;
+			}
+
+			&.remove-button {
+				padding: 8px 10px;
 
-.filenames {
-	.mat-option-text {
-		display: flex;
-		justify-content: space-between;
+				&:hover {
+					border-radius: 50%;
+				}
+			}
+		}
 	}
 }

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.spec.ts

@@ -20,7 +20,7 @@ describe("filePanelFileSelectorComponent", () => {
 		expect(fixture.componentInstance["selectedFilesInUI"].length).toBe(1)
 		expect(fixture.componentInstance["selectedFilesInUI"][0]).toEqual(TEST_FILE_DATA)
 
-		const selectFilesElement = screen.getByRole("combobox").querySelector(".mat-select-trigger")
+		const selectFilesElement = screen.getByRole("combobox").querySelector(".mat-mdc-select-trigger")
 		fireEvent.click(selectFilesElement)
 		const deselectAllButton = screen.getByText("None")
 		fireEvent.click(deselectAllButton)

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.ts

@@ -1,5 +1,4 @@
-import "./filePanelFileSelector.component.scss"
-import { Component, Inject, OnDestroy } from "@angular/core"
+import { Component, OnDestroy, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { filesSelector } from "../../../state/store/files/files.selector"
 import { invertStandard, setAll, setStandard } from "../../../state/store/files/files.actions"
@@ -8,7 +7,9 @@ import { FileSelectionState, FileState } from "../../../model/files/files"
 
 @Component({
 	selector: "cc-file-panel-file-selector",
-	template: require("./filePanelFileSelector.component.html")
+	templateUrl: "./filePanelFileSelector.component.html",
+	styleUrls: ["./filePanelFileSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelFileSelectorComponent implements OnDestroy {
 	fileStates: FileState[] = []
@@ -20,7 +21,7 @@ export class FilePanelFileSelectorComponent implements OnDestroy {
 		this.selectedFilesInUI = this.selectedFilesInStore
 	})
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnDestroy(): void {
 		this.filesSubscription.unsubscribe()

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html

@@ -1,3 +1,3 @@
-<button mat-button (click)="onRemoveFile(filename, $event)" title="Remove map">
+<button class="remove-button" (click)="onRemoveFile(filename, $event)" title="Remove map">
 	<i class="fa fa-trash delete-symbol"></i>
 </button>

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts

@@ -1,16 +1,16 @@
-import "./removeFileButton.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../../state/angular-redux/store"
 import { removeFile } from "../../../../state/store/files/files.actions"
 
 @Component({
 	selector: "cc-remove-file-button",
-	template: require("./removeFileButton.component.html")
+	templateUrl: "./removeFileButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class RemoveFileButtonComponent {
 	@Input() filename: string
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	onRemoveFile(filename: string, $event: MouseEvent) {
 		this.store.dispatch(removeFile(filename))

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.html

@@ -1,4 +1,4 @@
-<div class="mode-chooser">
+<div>
 	<button
 		mat-button
 		class="state-selector-button mode-selector left"

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.ts

@@ -1,17 +1,15 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
 import { FileSelectionModeService } from "../fileSelectionMode.service"
 
 @Component({
 	selector: "cc-file-panel-state-buttons",
-	template: require("./filePanelStateButtons.component.html")
+	templateUrl: "./filePanelStateButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelStateButtonsComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(
-		@Inject(Store) private store,
-		@Inject(FileSelectionModeService) public fileSelectionModeService: FileSelectionModeService
-	) {}
+	constructor(private store: Store, public fileSelectionModeService: FileSelectionModeService) {}
 }

package/app/codeCharta/ui/filePanel/fileSelectionMode.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, OnDestroy } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { pairwise, tap, filter } from "rxjs"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { isDeltaState, isEqual } from "../../model/files/files.helper"
@@ -22,7 +22,7 @@ export class FileSelectionModeService implements OnDestroy {
 		)
 		.subscribe()
 
-	constructor(@Inject(Store) private store: Store, @Inject(State) private state: State) {}
+	constructor(private store: Store, private state: State) {}
 
 	ngOnDestroy(): void {
 		this.subscription.unsubscribe()

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

@@ -17,7 +17,7 @@
 			</span>
 		</div>
 		<div class="cc-labelled-color-picker-label">
-			<span *ngFor="let label of labels"> {{ label }} <br *ngIf="!last" /></span>
+			<span *ngFor="let label of labels; let last = last"> {{ label }} <br *ngIf="!last" /></span>
 		</div>
 	</div>
 </ng-template>

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

@@ -1,8 +1,8 @@
 cc-labelled-color-picker {
 	.cc-labelled-color-picker-container {
 		display: flex;
+		height: 40px;
 		align-items: center;
-		margin: 4px 0;
 
 		&:hover {
 			cursor: pointer;
@@ -10,25 +10,29 @@ cc-labelled-color-picker {
 
 		.cc-color-swatch-container {
 			position: relative;
-			margin-right: 8px;
+			margin: 0px 11px; // Exactly 11px to match the mat-checkbox margin
+			width: 18px;
+			height: 18px;
 
-			.cc-color-swatch,
-			.cc-color-brush {
+			.cc-color-swatch {
 				display: inline-block;
-				width: 16px;
-				height: 16px;
+				width: inherit;
+				height: inherit;
+				border-radius: 2px;
 			}
 
 			.cc-color-brush {
 				position: absolute;
-				left: 0;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
 				opacity: 0; // handled by component
 			}
 		}
 	}
 }
 
-.mat-menu-panel.cc-color-picker-menu .mat-menu-content {
+.mat-mdc-menu-panel.cc-color-picker-menu .mat-mdc-menu-content {
 	padding: 0;
 }
 

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

@@ -36,8 +36,8 @@ describe("labelledColorPicker", () => {
 		const colorPicker = screen.getByRole("colorpicker")
 		expectBrushVisibility(container, true)
 
-		// @ts-ignore
-		ng.probe(colorPicker).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
+		// @ts-expect-error
+		ng.getComponent(colorPicker).onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
 		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
 
 		fireEvent.mouseLeave(colorPickerTrigger)

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

@@ -1,9 +1,10 @@
-import "./labelledColorPicker.component.scss"
-import { Component, EventEmitter, Input, Output } from "@angular/core"
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-labelled-color-picker",
-	template: require("./labelledColorPicker.component.html")
+	templateUrl: "./labelledColorPicker.component.html",
+	styleUrls: ["./labelledColorPicker.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LabelledColorPickerComponent {
 	@Input() hexColor: string

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

@@ -1,20 +1,20 @@
-<ng-container *ngIf="legendMetric.title; then titleExists; else onlyShowName" class="legend-block"></ng-container>
+<ng-container *ngIf="metricDecorations.title; then titleExists; else onlyShowName" class="legend-block"></ng-container>
 <ng-template #titleExists>
-	<ng-container *ngIf="legendMetric.description; then showTitleAndDescription; else showTitle"></ng-container>
+	<ng-container *ngIf="metricDecorations.description; then showTitleAndDescription; else showTitle"></ng-container>
 </ng-template>
 
 <ng-template #showTitleAndDescription>
-	<div title="{{ legendMetric.key + ': ' + legendMetric.description }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.title }}</span> ({{ legendMetric.key }})
+	<div title="{{ metricDecorations.description }}">
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
 	</div>
 </ng-template>
 <ng-template #showTitle>
-	<div title="{{ legendMetric.key }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.title }}</span> ({{ legendMetric.key }})
+	<div>
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.title }}</span> ({{ metricDecorations.key }})
 	</div>
 </ng-template>
 <ng-template #onlyShowName>
-	<div title="{{ legendMetric.key }}">
-		{{ metricFor }} metric: <span class="bold">{{ legendMetric.key }}</span>
+	<div>
+		{{ metricFor }} metric: <span class="bold">{{ metricDecorations.key }}</span>
 	</div>
 </ng-template>

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

@@ -1,11 +1,12 @@
-import { Component, Input } from "@angular/core"
-import { LegendMetric } from "../selectors/legendMetric"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
 
 @Component({
 	selector: "cc-legend-block",
-	template: require("./legendBlock.component.html")
+	templateUrl: "./legendBlock.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendBlockComponent {
 	@Input() metricFor: string
-	@Input() legendMetric: LegendMetric
+	@Input() metricDecorations: MetricDescriptors
 }

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

@@ -1,5 +1,4 @@
-import "./legendMarkedPackages.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable, map } from "rxjs"
 import { KeyValue } from "@angular/common"
 
@@ -11,13 +10,15 @@ type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackage
 
 @Component({
 	selector: "cc-legend-marked-packages",
-	template: require("./legendMarkedPackages.component.html")
+	templateUrl: "./legendMarkedPackages.component.html",
+	styleUrls: ["./legendMarkedPackages.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendMarkedPackagesComponent {
 	markedPackagesMap$: Observable<MarkedPackagesMap>
 	hasMarkedPackages$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.markedPackagesMap$ = store.select(legendMarkedPackagesSelector)
 		this.hasMarkedPackages$ = this.markedPackagesMap$.pipe(map(markedPackagesMap => Object.keys(markedPackagesMap).length > 0))
 	}

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

@@ -1,10 +1,14 @@
 <div class="block-wrapper" [class.visible]="isLegendVisible" [class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen">
 	<div *ngIf="!(isDeltaState$ | async)">
-		<cc-legend-block [metricFor]="'Area'" [legendMetric]="areaMetric$ | async"></cc-legend-block>
-		<cc-legend-block [metricFor]="'Height'" [legendMetric]="heightMetric$ | async"></cc-legend-block>
-		<cc-legend-block *ngIf="edgeMetric$ | async; let edgeMetric" [metricFor]="'Edge'" [legendMetric]="edgeMetric"></cc-legend-block>
+		<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>
 		<hr />
-		<cc-legend-block [metricFor]="'Color'" [legendMetric]="colorMetric$ | async"></cc-legend-block>
+		<cc-legend-block [metricDecorations]="colorMetric$ | async" [metricFor]="'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>
@@ -30,8 +34,8 @@
 </div>
 
 <button
-	mat-button
-	class="panel-button cc-mat-raised cc-shadow"
+	color="primary"
+	class="panel-button"
 	(click)="toggleIsLegendVisible()"
 	[class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen"
 	title="{{ isLegendVisible ? 'Hide panel' : 'Show panel' }}"

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

@@ -1,3 +1,4 @@
+@use "../../../material/theme";
 cc-legend-panel {
 	$fixedHeight: 35;
 
@@ -10,6 +11,12 @@ cc-legend-panel {
 		height: 36px;
 		width: 88px;
 		margin: 6px 8px;
+		color: white;
+		background-color: theme.$cc-primary-color;
+
+		&:hover {
+			background-color: theme.$cc-emphasized-color;
+		}
 
 		&.isAttributeSideBarVisible {
 			right: 316px;

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

@@ -1,5 +1,4 @@
-import "./legendPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 import { legendColorMetricSelector } from "./selectors/legendColorMetric.selector"
@@ -10,7 +9,9 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-legend-panel",
-	template: require("./legendPanel.component.html")
+	templateUrl: "./legendPanel.component.html",
+	styleUrls: ["./legendPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LegendPanelComponent {
 	isLegendVisible = false
@@ -20,10 +21,7 @@ export class LegendPanelComponent {
 	colorMetric$ = this.store.select(legendColorMetricSelector)
 	edgeMetric$ = this.store.select(legendEdgeMetricSelector)
 
-	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store
-	) {}
+	constructor(public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService, private store: Store) {}
 
 	toggleIsLegendVisible() {
 		this.isLegendVisible = !this.isLegendVisible

package/app/codeCharta/ui/legendPanel/selectors/legendAreaMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { areaMetricSelector } from "../../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
 
-export const legendAreaMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendAreaMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[areaMetricSelector, attributeDescriptorsSelector],
-	(areaMetric, attributeDescriptors) => getLegendMetric(areaMetric, attributeDescriptors)
+	(areaMetric, attributeDescriptors) => getMetricDescriptors(areaMetric, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendColorMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { colorMetricSelector } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
-export const legendColorMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendColorMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[colorMetricSelector, attributeDescriptorsSelector],
-	(colorMetric, attributeDescriptors) => getLegendMetric(colorMetric, attributeDescriptors)
+	(colorMetric, attributeDescriptors) => getMetricDescriptors(colorMetric, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendEdgeMetric.selector.spec.ts

@@ -44,9 +44,12 @@ describe("_getLegendEdgeMetric", () => {
 				TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED
 			)
 		).toEqual({
+			description: "Maximum cyclic complexity",
+			hintHighValue: "",
+			hintLowValue: "",
 			key: "mcc",
-			title: "Maximum Cyclic Complexity",
-			description: "Maximum cyclic complexity"
+			link: "https://www.npmjs.com/package/metric-gardener",
+			title: "Maximum Cyclic Complexity"
 		})
 
 		expect(
@@ -62,9 +65,12 @@ describe("_getLegendEdgeMetric", () => {
 				TEST_ATTRIBUTE_DESCRIPTORS_HALF_FILLED
 			)
 		).toEqual({
+			description: "",
+			hintHighValue: "",
+			hintLowValue: "",
 			key: "rloc",
-			title: "Real Lines of Code",
-			description: ""
+			link: "https://www.npmjs.com/package/metric-gardener",
+			title: "Real Lines of Code"
 		})
 	})
 })

package/app/codeCharta/ui/legendPanel/selectors/legendEdgeMetric.selector.ts

@@ -1,10 +1,10 @@
 import { EdgeMetricData } from "../../../codeCharta.model"
 import { createSelector } from "../../../state/angular-redux/createSelector"
-import { edgeMetricDataSelector } from "../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
 import { edgeMetricSelector } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { metricDataSelector } from "../../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 export const _getLegendEdgeMetric = (edgeMetric: string, edgeMetricDatas: EdgeMetricData[], attributeDescriptors) => {
 	const edgeMetricData = edgeMetricDatas.find(someEdgeMetricData => {
@@ -15,10 +15,10 @@ export const _getLegendEdgeMetric = (edgeMetric: string, edgeMetricDatas: EdgeMe
 		return
 	}
 
-	return getLegendMetric(edgeMetric, attributeDescriptors)
+	return getMetricDescriptors(edgeMetric, attributeDescriptors)
 }
 
-export const legendEdgeMetricSelector: (state: CcState) => LegendMetric | undefined = createSelector(
-	[edgeMetricSelector, edgeMetricDataSelector, attributeDescriptorsSelector],
-	_getLegendEdgeMetric
+export const legendEdgeMetricSelector: (state: CcState) => MetricDescriptors | undefined = createSelector(
+	[edgeMetricSelector, metricDataSelector, attributeDescriptorsSelector],
+	(edgeMetric, metricData, attributeDescriptors) => _getLegendEdgeMetric(edgeMetric, metricData.edgeMetricData, attributeDescriptors)
 )

package/app/codeCharta/ui/legendPanel/selectors/legendHeightMetric.selector.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { heightMetricSelector } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
 import { CcState } from "../../../state/store/store"
-import { getLegendMetric, LegendMetric } from "./legendMetric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributesDescriptors.selector"
+import { getMetricDescriptors, MetricDescriptors } from "../../attributeSideBar/util/metricDescriptors"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
-export const legendHeightMetricSelector: (state: CcState) => LegendMetric = createSelector(
+export const legendHeightMetricSelector: (state: CcState) => MetricDescriptors = createSelector(
 	[heightMetricSelector, attributeDescriptorsSelector],
-	(heightMetric, attributeDescriptors) => getLegendMetric(heightMetric, attributeDescriptors)
+	(heightMetric, attributeDescriptors) => getMetricDescriptors(heightMetric, attributeDescriptors)
 )

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

@@ -9,7 +9,7 @@ cc-loading-file-progress-spinner #loading-gif-file {
 	display: inline-block;
 	text-align: center;
 
-	mat-progress-spinner.mat-progress-spinner {
+	mat-progress-spinner.mat-mdc-progress-spinner {
 		display: inline-block;
 		margin: 22% auto 0;
 	}