codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/ui/fileExtensionBar/selectors/fileExtensionCalculator.ts

@@ -118,6 +118,6 @@ export class FileExtensionCalculator {
 		for (let index = 0; index < fileExtension.length; index++) {
 			hash = fileExtension.codePointAt(index) + ((hash << 5) - hash)
 		}
-		return new HSL(hash % 360, 40, 50).toString()
+		return new HSL(hash % 360, 60, 50).toString()
 	}
 }

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

@@ -1,3 +1,3 @@
 <cc-file-panel-state-buttons></cc-file-panel-state-buttons>
-<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)" style="display: inline-block; width: 200px"></cc-file-panel-file-selector>
+<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)"></cc-file-panel-file-selector>
 <cc-file-panel-delta-selector *ngIf="isDeltaState$ | async"></cc-file-panel-delta-selector>

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

@@ -1,20 +1,13 @@
 @use "../../../material/theme";
 
 cc-file-panel {
-	width: calc(100% - 150px);
-	min-width: 400px;
-	display: inline-block;
+	display: flex;
+	gap: inherit;
 
 	&.hidden {
 		display: none;
 	}
 
-	.mode-chooser {
-		display: inline-flex;
-		vertical-align: middle;
-		margin-left: 10px;
-	}
-
 	.state-selector-button {
 		&.mode-selector {
 			height: 24px;
@@ -27,21 +20,12 @@ cc-file-panel {
 			}
 
 			&.current {
-				background-color: rgb(0, 150, 136);
+				background-color: theme.$cc-primary-color;
 				color: #ffffff;
 			}
-			&.current:hover {
-				background-color: rgb(0, 150, 136);
-			}
-			.text {
-				display: block;
-				margin-top: -5px;
-				margin-right: 0px;
 
-				&:active {
-					padding: -5px;
-					margin: -5px;
-				}
+			&.current:hover {
+				background-color: theme.$cc-primary-color;
 			}
 		}
 	}
@@ -70,6 +54,7 @@ cc-file-panel {
 			color: rgb(255, 255, 255);
 		}
 	}
+
 	.pictogram {
 		display: inline-flex;
 		width: 10px;
@@ -81,13 +66,8 @@ cc-file-panel {
 		vertical-align: bottom;
 	}
 
+	.standard-select,
 	.delta-select {
 		width: 200px;
-		margin: 0 10px 0 10px;
-		vertical-align: bottom;
-	}
-
-	.standard-select {
-		margin: 0 10px 0 10px;
 	}
 }

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

@@ -1,14 +1,15 @@
-import "./filePanel.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"
 
 @Component({
 	selector: "cc-file-panel",
-	template: require("./filePanel.component.html")
+	templateUrl: "./filePanel.component.html",
+	styleUrls: ["./filePanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

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 { RemoveExtensionModule } from "../../util/removeExtensionModule"
+import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 import { FileSelectionModeService } from "./fileSelectionMode.service"
 import { FilePanelComponent } from "./filePanel.component"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule, RemoveExtensionModule],
+	imports: [CommonModule, MaterialModule, FormsModule, SimplePipesModule],
 	declarations: [
 		FilePanelDeltaSelectorComponent,
 		FilePanelFileSelectorComponent,

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

@@ -2,14 +2,16 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export class FilePanelPageObject {
 	async getSelectedName() {
-		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span")
-		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span", element => element["innerText"])
+		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span")
+		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span", element => element["innerText"])
 	}
 
 	async getAllNames() {
 		await clickButtonOnPageElement("cc-file-panel cc-file-panel-file-selector mat-select")
-		await page.waitForSelector(".mat-select-panel")
-		const content = await page.$$eval(".mat-select-panel .mat-option-text", element => element.map(item => item["innerText"]))
+		await page.waitForSelector(".mat-mdc-select-panel")
+		const content = await page.$$eval(".mat-mdc-select-panel .mdc-list-item__primary-text", element =>
+			element.map(item => item["innerText"].trim())
+		)
 		return content
 	}
 }

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,6 +3,7 @@
 	[(value)]="selectedFilesInUI"
 	(selectionChange)="handleSelectedFilesChanged($event.value)"
 	(openedChange)="handleOpenedChanged($event)"
+	class="standard-select"
 	multiple
 >
 	<div class="actions">

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

@@ -1,12 +1,5 @@
 .file-select {
-	&.mat-select-panel {
-		max-width: max-content;
-	}
-}
-
-.filenames {
-	.mat-option-text {
-		display: flex;
-		justify-content: space-between;
+	&.mat-mdc-select-panel {
+		min-width: max-content;
 	}
 }

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.scss

@@ -1,5 +1,5 @@
 cc-remove-file-button {
-	.mat-button {
+	.mat-mdc-button {
 		border-radius: 50%;
 		margin: 0;
 		min-width: 0;

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

@@ -1,16 +1,17 @@
-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",
+	styleUrls: ["./removeFileButton.component.scss"],
+	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>
@@ -31,7 +35,9 @@
 
 <button
 	mat-button
-	class="panel-button cc-mat-raised cc-shadow"
+	mat-raised-button
+	color="primary"
+	class="panel-button"
 	(click)="toggleIsLegendVisible()"
 	[class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen"
 	title="{{ isLegendVisible ? 'Hide panel' : 'Show panel' }}"

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