codecharta-visualization 1.119.1 → 1.120.0

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

@@ -1,18 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { markedPackagesSelector } from "../../../state/store/fileSettings/markedPackages/markedPackages.selector"
-
-type Path = string
-export type MarkedPackagesMap = {
-	[color: string]: Path[]
-}
-
-export const legendMarkedPackagesSelector = createSelector(markedPackagesSelector, markedPackages =>
-	// eslint-disable-next-line unicorn/prefer-object-from-entries
-	markedPackages.reduce((accumulator, { color, path }) => {
-		if (!Object.prototype.hasOwnProperty.call(accumulator, color)) {
-			accumulator[color] = []
-		}
-		accumulator[color].push(path)
-		return accumulator
-	}, {})
-)

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

@@ -1,38 +0,0 @@
-<div class="block-wrapper" [class.visible]="isLegendVisible" [class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen">
-	<div *ngIf="!(isDeltaState$ | async)">
-		<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 [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>
-	</div>
-
-	<div *ngIf="isDeltaState$ | async">
-		<cc-color-picker-for-map-color [mapColorFor]="'positiveDelta'"></cc-color-picker-for-map-color>
-		<cc-color-picker-for-map-color [mapColorFor]="'negativeDelta'"></cc-color-picker-for-map-color>
-	</div>
-
-	<hr />
-	<cc-color-picker-for-map-color [mapColorFor]="'selected'"></cc-color-picker-for-map-color>
-
-	<ng-container *ngIf="edgeMetric$ | async">
-		<hr />
-		<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>
-</div>
-
-<button
-	color="primary"
-	class="panel-button"
-	(click)="toggleIsLegendVisible()"
-	[class.isAttributeSideBarVisible]="isAttributeSideBarVisibleService.isOpen"
-	title="{{ isLegendVisible ? 'Hide panel' : 'Show panel' }}"
->
-	LEGEND
-</button>

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

@@ -1,101 +0,0 @@
-@use "../../../material/theme";
-cc-legend-panel {
-	$fixedHeight: 35;
-
-	.panel-button {
-		position: fixed;
-		bottom: ($fixedHeight + 20) + px;
-		right: -35px;
-		transform: rotate(90deg);
-		border-radius: 0 0 5px 5px;
-		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;
-		}
-	}
-
-	.block-wrapper {
-		background-color: white;
-		border: 1px solid #cdcdcd;
-		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-		position: fixed;
-		bottom: $fixedHeight + px;
-		padding: 10px;
-		right: 40px;
-		visibility: hidden;
-		border-radius: 5px;
-		min-width: 200px;
-		max-width: 30%;
-
-		&.isAttributeSideBarVisible {
-			right: 390px;
-		}
-
-		&.visible {
-			visibility: visible;
-		}
-
-		hr {
-			border-right-style: none;
-			border-left-style: none;
-			border-bottom-style: none;
-			color: #000;
-		}
-
-		cc-legend-block {
-			a:link,
-			a:visited {
-				text-decoration: none;
-				color: #000;
-			}
-
-			a:hover {
-				color: blue;
-				text-decoration: solid;
-				text-decoration-line: underline;
-			}
-
-			a:active {
-				color: red;
-			}
-
-			i.fa.fa-external-link {
-				font-size: 10px;
-				min-width: 10px;
-				text-align: center;
-			}
-
-			span {
-				display: inline-block;
-			}
-		}
-
-		.bold {
-			font-weight: 600;
-		}
-
-		.cc-labelled-color-picker-container > .cc-labelled-color-picker-label {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-
-			/* This tricks the browser into cutting off the beginning instead of the end of the label. However,
-			   changing the text direction has side effects, like moving punctuation around.  */
-			direction: rtl;
-
-			span {
-				/* This should prevent the browser from moving punctuation around.  */
-				unicode-bidi: plaintext;
-			}
-		}
-	}
-}

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

@@ -1,122 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen } from "@testing-library/angular"
-import { expect } from "@jest/globals"
-import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { LegendPanelComponent } from "./legendPanel.component"
-import { LegendPanelModule } from "./legendPanel.module"
-import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
-import { MockStore, provideMockStore } from "@ngrx/store/testing"
-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 { colorRangeSelector } from "../../state/store/dynamicSettings/colorRange/colorRange.selector"
-import { State } from "@ngrx/store"
-import { mapColorsSelector } from "../../state/store/appSettings/mapColors/mapColors.selector"
-import { defaultMapColors } from "../../state/store/appSettings/mapColors/mapColors.reducer"
-import { selectedColorMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/selectedColorMetricData.selector"
-import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
-
-describe("LegendPanelController", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [LegendPanelModule],
-			providers: [
-				provideMockStore({
-					selectors: [
-						{ selector: heightMetricSelector, value: "mcc" },
-						{ selector: areaMetricSelector, value: "loc" },
-						{ selector: colorMetricSelector, value: "rloc" },
-						{ selector: colorRangeSelector, value: { from: 21, to: 42, max: 9001 } },
-						{ selector: isDeltaStateSelector, value: true },
-						{ selector: mapColorsSelector, value: defaultMapColors },
-						{ selector: selectedColorMetricDataSelector, value: {} },
-						{ selector: attributeDescriptorsSelector, value: {} }
-					]
-				}),
-				{ provide: State, useValue: {} }
-			]
-		})
-	})
-
-	it("should open and close", async () => {
-		const { container } = await render(LegendPanelComponent, { excludeComponentDeclaration: true })
-
-		expect(isLegendPanelOpen(container)).toBe(false)
-
-		const openLegendButton = screen.getByTitle("Show panel")
-		fireEvent.click(openLegendButton)
-		expect(isLegendPanelOpen(container)).toBe(true)
-
-		const closeLegendButton = screen.getByTitle("Hide panel")
-		fireEvent.click(closeLegendButton)
-		expect(isLegendPanelOpen(container)).toBe(false)
-	})
-
-	it("should display legend for single mode", async () => {
-		const { container, detectChanges } = await render(LegendPanelComponent, { excludeComponentDeclaration: true })
-		const store = TestBed.inject(MockStore)
-		store.overrideSelector(isDeltaStateSelector, false)
-		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: Cyclomatic Complexity (mcc)")
-		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"))
-
-		expect(screen.queryAllByText("delta", { exact: false }).length).toBeGreaterThan(0)
-
-		const metricDescriptions = container.querySelectorAll("cc-legend-block")
-		expect(metricDescriptions.length).toBe(0)
-	})
-
-	it("should add class 'isAttributeSideBarVisible' to opening button, when attribute sidebar is open", async () => {
-		const { container } = await render(LegendPanelComponent, {
-			excludeComponentDeclaration: true,
-			componentProviders: [{ provide: IsAttributeSideBarVisibleService, useValue: { isOpen: true } }]
-		})
-		const openingButton = container.querySelector(".panel-button")
-		expect(openingButton.classList).toContain("isAttributeSideBarVisible")
-	})
-})
-
-function isLegendPanelOpen(container: Element) {
-	return container.querySelector(".block-wrapper").classList.contains("visible")
-}

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

@@ -1,30 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.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",
-	templateUrl: "./legendPanel.component.html",
-	styleUrls: ["./legendPanel.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class LegendPanelComponent {
-	isLegendVisible = false
-	isDeltaState$ = this.store.select(isDeltaStateSelector)
-	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>) {}
-
-	toggleIsLegendVisible() {
-		this.isLegendVisible = !this.isLegendVisible
-	}
-}

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

@@ -1,60 +0,0 @@
-import { clickButtonOnPageElement, goto } from "../../../puppeteer.helper"
-import { expect } from "@jest/globals"
-import { LegendPanelObject } from "./legendPanel.po"
-import { MapTreeViewLevelPageObject } from "../searchPanel/mapTreeView/mapTreeView.level.po"
-import { SearchPanelModeSelectorPageObject } from "../searchPanel/searchPanelModeSelector/searchPanelModeSelector.po"
-import { UploadFileButtonPageObject } from "../toolBar/uploadFilesButton/uploadFilesButton.po"
-
-describe("LegendPanel", () => {
-	let legendPanelObject: LegendPanelObject
-	let uploadFilesButton: UploadFileButtonPageObject
-	let mapTreeViewLevel: MapTreeViewLevelPageObject
-	let searchPanelModeSelector: SearchPanelModeSelectorPageObject
-
-	beforeEach(async () => {
-		legendPanelObject = new LegendPanelObject()
-		uploadFilesButton = new UploadFileButtonPageObject()
-		mapTreeViewLevel = new MapTreeViewLevelPageObject()
-		searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
-
-		await goto()
-		await setupTest()
-	})
-
-	async function setupTest() {
-		await uploadFilesButton.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
-		await legendPanelObject.open()
-		await searchPanelModeSelector.toggleTreeView()
-		await mapTreeViewLevel.openContextMenu("/root")
-		await clickButtonOnPageElement(".colorButton:nth-child(2)")
-	}
-
-	it("should highlight a folder and add to legend", async () => {
-		const selectedFolder = await legendPanelObject.getFilename()
-		expect(selectedFolder).toMatch(/\/root\s*/)
-	})
-
-	it("should remove a highlighted folder and remove from legend", async () => {
-		await mapTreeViewLevel.openContextMenu("/root")
-		await clickButtonOnPageElement(".colorButton:nth-child(2)")
-		const emptyFilelist = await legendPanelObject.getEmptyLegendIfNoFilenamesExist()
-		expect(emptyFilelist).toEqual("")
-	})
-
-	it("should highlight two different folders and add both to the legend", async () => {
-		await mapTreeViewLevel.openContextMenu("/root/ParentLeaf")
-		await clickButtonOnPageElement(".colorButton:nth-child(1)")
-		const selectedFolder = await legendPanelObject.getMultipleFilenames()
-		expect(selectedFolder[0]).toEqual("/root")
-		expect(selectedFolder[1]).toEqual("/root/ParentLeaf")
-	})
-
-	it("should highlight two different folders and add both to the legend then remove the first", async () => {
-		await mapTreeViewLevel.openContextMenu("/root/ParentLeaf")
-		await clickButtonOnPageElement(".colorButton:nth-child(1)")
-		await mapTreeViewLevel.openContextMenu("/root")
-		await clickButtonOnPageElement(".colorButton:nth-child(2)")
-		const selectedFolder = await legendPanelObject.getFilename()
-		expect(selectedFolder).toMatch(/root\/ParentLeaf\s*/)
-	})
-})

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

@@ -1,16 +0,0 @@
-import { NgModule } from "@angular/core"
-import { CommonModule } from "@angular/common"
-
-import { LegendMarkedPackagesModule } from "./legendMarkedPackages/legendMarkedPackages.module"
-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({
-	declarations: [LegendPanelComponent, LegendBlockComponent],
-	exports: [LegendPanelComponent],
-	imports: [CommonModule, MaterialModule, LegendMarkedPackagesModule, ColorPickerForMapColorModule, AttributeDescriptorTooltipPipeModule]
-})
-export class LegendPanelModule {}

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

@@ -1,23 +0,0 @@
-import { clickButtonOnPageElement } from "../../../puppeteer.helper"
-
-export class LegendPanelObject {
-	async open() {
-		await clickButtonOnPageElement("cc-legend-panel .panel-button")
-		await page.waitForSelector("cc-legend-panel .block-wrapper", { visible: true })
-	}
-
-	async getMultipleFilenames() {
-		return page.$$eval("cc-legend-panel cc-legend-marked-packages cc-labelled-color-picker", elements =>
-			elements.map(x => x.textContent.trim())
-		)
-	}
-	async getFilename() {
-		return page.$eval("cc-legend-panel cc-legend-marked-packages cc-labelled-color-picker", element => {
-			return element["innerText"]
-		})
-	}
-
-	async getEmptyLegendIfNoFilenamesExist() {
-		return page.$eval("cc-legend-panel cc-legend-marked-packages", element => element["innerText"])
-	}
-}

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

@@ -1,3 +0,0 @@
-<div id="loading-gif-file" [style.visibility]="(isLoadingFile$ | async) ? 'visible' : 'hidden'">
-	<mat-progress-spinner mode="indeterminate" diameter="96"></mat-progress-spinner>
-</div>

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

@@ -1,16 +0,0 @@
-cc-loading-file-progress-spinner #loading-gif-file {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 40;
-	background-color: rgba(255, 255, 255, 0.8);
-	display: inline-block;
-	text-align: center;
-
-	mat-progress-spinner.mat-mdc-progress-spinner {
-		display: inline-block;
-		margin: 22% auto 0;
-	}
-}

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

@@ -1,19 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { Observable } from "rxjs"
-import { CcState } from "../../codeCharta.model"
-import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
-
-@Component({
-	selector: "cc-loading-file-progress-spinner",
-	templateUrl: "./loadingFileProgressSpinner.component.html",
-	styleUrls: ["./loadingFileProgressSpinner.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class LoadingFileProgressSpinnerComponent {
-	isLoadingFile$: Observable<boolean>
-
-	constructor(store: Store<CcState>) {
-		this.isLoadingFile$ = store.select(isLoadingFileSelector)
-	}
-}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../material/material.module"
-import { LoadingFileProgressSpinnerComponent } from "./loadingFileProgressSpinner.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule],
-	declarations: [LoadingFileProgressSpinnerComponent],
-	exports: [LoadingFileProgressSpinnerComponent]
-})
-export class LoadingFileProgressSpinnerModule {}

package/app/codeCharta/ui/metricChooser/filterMetricDataBySearchTerm.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core"
-import { EdgeMetricData, NodeMetricData } from "../../codeCharta.model"
-
-@Pipe({ name: "filterMetricDataBySearchTerm" })
-export class FilterMetricDataBySearchTermPipe implements PipeTransform {
-	transform(metricData: NodeMetricData[] | EdgeMetricData[], searchTerm: string) {
-		const lowercasedSearchTerm = searchTerm.toLocaleLowerCase()
-		return metricData.filter(data => data.name.toLocaleLowerCase().includes(lowercasedSearchTerm))
-	}
-}

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

@@ -1,28 +0,0 @@
-<mat-select
-	[panelClass]="'cc-metric-chooser'"
-	[value]="selectedMetricName"
-	(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" />
-	</mat-form-field>
-	<div class="cc-metric-chooser-option-container">
-		<mat-option
-			*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm: searchTerm"
-			[value]="option.name"
-			[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip: option.name"
-		>
-			{{ option.name }}
-			<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>
-<ng-content select="[hoveredInformation]"></ng-content>

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

@@ -1,78 +0,0 @@
-@use "../../../material/theme";
-
-cc-metric-chooser {
-	width: 100%;
-
-	cc-metric-chooser-value-hovered,
-	.cc-metric-chooser-hovered-container {
-		position: absolute;
-		top: 10%;
-		right: 28px;
-
-		.metric-value {
-			height: 25px;
-
-			.rounded-box {
-				background-color: #e6e6e6;
-				border-radius: 2px;
-				padding: 2px 5px;
-				display: inline-block;
-			}
-		}
-	}
-
-	.mat-mdc-select {
-		border-bottom: none;
-	}
-}
-
-.mat-mdc-select-panel.cc-metric-chooser {
-	margin-top: 16px;
-	overflow: hidden;
-
-	.cc-metric-chooser-search-field {
-		width: 100%;
-		font-size: 14px;
-		padding: 0 6px;
-
-		.search-icon {
-			color: theme.$cc-primary-color;
-			margin-left: 8px;
-			font-size: 18px;
-		}
-
-		.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
-			display: none;
-		}
-
-		.mat-mdc-form-field-infix {
-			margin-left: 6px;
-			display: flex;
-		}
-	}
-
-	.cc-metric-chooser-option-container {
-		max-height: 216px;
-		overflow-y: auto;
-		font-size: 16px;
-		padding: 0 6px;
-
-		mat-option .metric-max-value {
-			color: #ccc;
-		}
-
-		mat-option .metric-subtitle {
-			color: #999;
-			font-size: 11px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-.cdk-overlay-pane:not(.mat-mdc-select-panel-above) .mdc-menu-surface.mat-mdc-select-panel {
-	min-width: 300px;
-	position: absolute;
-	right: 0;
-}