codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.scss

@@ -0,0 +1,31 @@
+@use "app/material/theme";
+
+cc-custom-config-note-dialog {
+	.custom-config-note-dialog-container {
+		padding: 20px 24px;
+
+		.note-input-container {
+			padding: 0;
+
+			.note-input {
+				width: 100%;
+			}
+		}
+		.note-dialog-action-buttons {
+			justify-content: flex-end;
+			padding: 0;
+		}
+
+		button {
+			padding: 12px;
+			margin: 0 0 0 10px;
+			color: theme.$cc-primary-color;
+			background-color: rgba(138, 132, 132, 0.08);
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+				color: theme.$cc-primary-color;
+			}
+		}
+	}
+}

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
+import { MAT_DIALOG_DATA } from "@angular/material/dialog"
+
+@Component({
+	selector: "cc-custom-config-note-dialog",
+	templateUrl: "./customConfigNoteDialog.component.html",
+	styleUrls: ["./customConfigNoteDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
+})
+export class CustomConfigNoteDialogComponent {
+	constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
+}

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.component.html

@@ -0,0 +1,3 @@
+<button class="custom-config-note-dialog-button" title="Edit/View Note" (click)="openDialog()">
+	<i class="fa fa-pencil"></i>
+</button>

package/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialogButton.component.spec.ts

@@ -0,0 +1,90 @@
+import { TestBed } from "@angular/core/testing"
+
+import { render, screen } from "@testing-library/angular"
+import { CustomConfigNoteDialogButtonComponent } from "./customConfigNoteDialogButton.component"
+import userEvent from "@testing-library/user-event"
+import { CustomConfigItem } from "../customConfigs.component"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+import { CustomConfigNoteDialogButtonModule } from "./customConfigNoteDialogButton.module"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatDialogHarness } from "@angular/material/dialog/testing"
+
+describe("customConfigNoteDialogComponent", () => {
+	let editCustomConfigNoteSpy: jest.SpyInstance
+
+	beforeEach(() => {
+		editCustomConfigNoteSpy = jest.spyOn(CustomConfigHelper, "editCustomConfigNote").mockImplementation(() => {})
+		TestBed.configureTestingModule({
+			imports: [CustomConfigNoteDialogButtonModule]
+		})
+	})
+
+	afterEach(() => {
+		editCustomConfigNoteSpy.mockRestore()
+	})
+
+	it("should render a clickable button and open a dialog to add and submit a note", async () => {
+		const newNote = "Some other note"
+		const customConfigItem = {
+			id: "configID",
+			note: ""
+		} as CustomConfigItem
+		const { fixture } = await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		let currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+
+		expect(currentlyOpenedDialogs.length).toBe(0)
+		await userEvent.click(screen.getByTitle("Edit/View Note"))
+
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(1)
+
+		await userEvent.type(screen.getByRole("textbox"), newNote)
+		await userEvent.click(screen.getByText("Ok"))
+
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(0)
+
+		expect(editCustomConfigNoteSpy).toHaveBeenCalledWith("configID", newNote)
+	})
+
+	it("should render a clickable button and open a dialog and and not change the note when the same note is submitted", async () => {
+		const customConfigItem = {
+			id: "configID",
+			note: "a note"
+		} as CustomConfigItem
+		await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+
+		const editNoteButton = screen.getByTitle("Edit/View Note")
+		await userEvent.click(editNoteButton)
+		await userEvent.click(screen.getByText("Ok"))
+
+		expect(editCustomConfigNoteSpy).not.toHaveBeenCalled()
+	})
+
+	it("should render a clickable button and open a dialog and and not change the note when cancel button is clicked", async () => {
+		const customConfigItem = {
+			id: "configID",
+			note: "a note"
+		} as CustomConfigItem
+		const { fixture } = await render(CustomConfigNoteDialogButtonComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { customConfigItem }
+		})
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		const editNoteButton = screen.getByTitle("Edit/View Note")
+
+		await userEvent.click(editNoteButton)
+		await userEvent.click(screen.getByText("Cancel"))
+		const currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+
+		expect(currentlyOpenedDialogs.length).toBe(0)
+		expect(editCustomConfigNoteSpy).not.toHaveBeenCalled()
+	})
+})

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

@@ -0,0 +1,33 @@
+import { Component, Input } from "@angular/core"
+import { MatDialog } from "@angular/material/dialog"
+import { CustomConfigNoteDialogComponent } from "./customConfigNoteDialog/customConfigNoteDialog.component"
+import { CustomConfigItem } from "../customConfigs.component"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+
+@Component({
+	selector: "cc-custom-config-note-dialog-button",
+	templateUrl: "./customConfigNoteDialogButton.component.html"
+})
+export class CustomConfigNoteDialogButtonComponent {
+	@Input() customConfigItem: CustomConfigItem
+
+	customConfigNote: string
+
+	constructor(private dialog: MatDialog) {}
+
+	openDialog(): void {
+		this.customConfigNote = this.customConfigItem.note
+
+		const dialogReference = this.dialog.open(CustomConfigNoteDialogComponent, {
+			width: "600px",
+			data: this.customConfigNote
+		})
+
+		dialogReference.afterClosed().subscribe(result => {
+			if (result !== undefined && this.customConfigNote !== result) {
+				this.customConfigNote = result
+				CustomConfigHelper.editCustomConfigNote(this.customConfigItem.id, result)
+			}
+		})
+	}
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../material/material.module"
+import { FormsModule, ReactiveFormsModule } from "@angular/forms"
+import { CommonModule } from "@angular/common"
+import { CustomConfigNoteDialogButtonComponent } from "./customConfigNoteDialogButton.component"
+import { CustomConfigNoteDialogComponent } from "./customConfigNoteDialog/customConfigNoteDialog.component"
+import { A11yModule } from "@angular/cdk/a11y"
+
+@NgModule({
+	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule, A11yModule],
+	declarations: [CustomConfigNoteDialogButtonComponent, CustomConfigNoteDialogComponent],
+	exports: [CustomConfigNoteDialogButtonComponent]
+})
+export class CustomConfigNoteDialogButtonModule {}

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

@@ -1,11 +1,12 @@
 import { Store } from "../../state/store/store"
 import { TestBed } from "@angular/core/testing"
-import { MatDialog } from "@angular/material/dialog"
-import { fireEvent, render, screen } from "@testing-library/angular"
+import { render, screen } from "@testing-library/angular"
 import { CustomConfigsComponent } from "./customConfigs.component"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component"
 import { CustomConfigListComponent } from "./customConfigList/customConfigList.component"
 import { CustomConfigsModule } from "./customConfigs.module"
+import { MatDialog } from "@angular/material/dialog"
+import userEvent from "@testing-library/user-event"
 
 describe("CustomConfigsComponent", () => {
 	let mockedDialog = { open: jest.fn() }
@@ -23,7 +24,7 @@ describe("CustomConfigsComponent", () => {
 		await render(CustomConfigsComponent, { excludeComponentDeclaration: true })
 
 		const addButton = screen.getByTitle("Create new Custom View")
-		fireEvent.click(addButton)
+		await userEvent.click(addButton)
 
 		expect(mockedDialog.open).toHaveBeenCalledTimes(1)
 		expect(mockedDialog.open).toHaveBeenCalledWith(AddCustomConfigDialogComponent, { panelClass: "cc-add-custom-config-dialog" })
@@ -33,7 +34,7 @@ describe("CustomConfigsComponent", () => {
 		await render(CustomConfigsComponent, { excludeComponentDeclaration: true })
 
 		const openCustomConfigsButton = screen.getByTitle("Open your saved Custom Views")
-		fireEvent.click(openCustomConfigsButton)
+		await userEvent.click(openCustomConfigsButton)
 
 		expect(mockedDialog.open).toHaveBeenCalledTimes(1)
 		expect(mockedDialog.open).toHaveBeenCalledWith(CustomConfigListComponent, { panelClass: "cc-custom-config-list" })

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

@@ -1,5 +1,4 @@
-import "./customConfigs.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { CustomConfigListComponent } from "./customConfigList/customConfigList.component"
 import { CustomConfigMapSelectionMode } from "../../model/customConfig/customConfig.api.model"
@@ -15,6 +14,7 @@ export interface CustomConfigItem {
 	metrics: Pick<PrimaryMetrics, "areaMetric" | "heightMetric" | "colorMetric" | "edgeMetric">
 	mapColors: CustomConfigColors
 	isApplicable: boolean
+	note?: string
 }
 
 export interface CustomConfigItemGroup {
@@ -26,10 +26,12 @@ export interface CustomConfigItemGroup {
 
 @Component({
 	selector: "cc-custom-configs",
-	template: require("./customConfigs.component.html")
+	templateUrl: "./customConfigs.component.html",
+	styleUrls: ["./customConfigs.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CustomConfigsComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	openCustomConfigDialog() {
 		this.dialog.open(CustomConfigListComponent, {

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

@@ -11,9 +11,20 @@ import { CustomConfig2ApplicableMessage } from "./customConfigList/customConfigI
 import { CustomConfig2ApplicableColor } from "./customConfigList/customConfigItemGroup/customConfig2ApplicableColor.pipe"
 import { ApplyCustomConfigButtonComponent } from "./customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component"
 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"
 
 @NgModule({
-	imports: [MaterialModule, CommonModule, UploadCustomConfigButtonModule, AddCustomConfigButtonModule, DownloadCustomConfigButtonModule],
+	imports: [
+		MaterialModule,
+		CommonModule,
+		CustomConfigNoteDialogButtonModule,
+		UploadCustomConfigButtonModule,
+		AddCustomConfigButtonModule,
+		DownloadCustomConfigButtonModule,
+		FormsModule
+	],
 	declarations: [
 		CustomConfigsComponent,
 		CustomConfigListComponent,
@@ -21,9 +32,9 @@ import { CustomConfigColorSchemaBySelectionMode } from "./customConfigList/custo
 		ApplyCustomConfigButtonComponent,
 		CustomConfig2ApplicableMessage,
 		CustomConfig2ApplicableColor,
+		TruncateTextPipe,
 		CustomConfigColorSchemaBySelectionMode
 	],
-	exports: [CustomConfigsComponent],
-	entryComponents: [CustomConfigListComponent]
+	exports: [CustomConfigsComponent]
 })
 export class CustomConfigsModule {}

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core"
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core"
 import { DownloadableConfigs } from "./getDownloadableCustomConfigs"
 
 import { downloadCustomConfigs } from "./downloadCustomConfigHelper"
@@ -7,13 +7,14 @@ import { Subscription } from "rxjs"
 
 @Component({
 	selector: "cc-download-custom-configs-button",
-	template: require("./downloadCustomConfigsButton.component.html")
+	templateUrl: "./downloadCustomConfigsButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadCustomConfigsButtonComponent implements OnInit, OnDestroy {
 	downloadableConfigs: DownloadableConfigs
 	subscription: Subscription
 
-	constructor(@Inject(CustomConfigHelperService) private downloadCustomConfigService: CustomConfigHelperService) {}
+	constructor(private downloadCustomConfigService: CustomConfigHelperService) {}
 
 	ngOnInit(): void {
 		this.subscription = this.downloadCustomConfigService.downloadableCustomConfigs$.subscribe(downloadableConfigs => {

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

@@ -1,11 +1,12 @@
-import { Component } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { CustomConfigHelper } from "../../../util/customConfigHelper"
 import { createCCFileInput } from "../../../util/uploadFiles/createCCFileInput"
 import { readFiles } from "../../../util/uploadFiles/readFiles"
 
 @Component({
 	selector: "cc-upload-custom-config-button",
-	template: require("./uploadCustomConfigButton.component.html")
+	templateUrl: "./uploadCustomConfigButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class UploadCustomConfigButtonComponent {
 	upload() {

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

@@ -3,7 +3,6 @@ import { UploadCustomConfigButtonComponent } from "./uploadCustomConfigButton.co
 
 @NgModule({
 	declarations: [UploadCustomConfigButtonComponent],
-	exports: [UploadCustomConfigButtonComponent],
-	entryComponents: [UploadCustomConfigButtonComponent]
+	exports: [UploadCustomConfigButtonComponent]
 })
 export class UploadCustomConfigButtonModule {}

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.html

@@ -1,6 +1,6 @@
-<mat-toolbar mat-dialog-title>Changelog</mat-toolbar>
+<mat-toolbar color="primary">Changelog</mat-toolbar>
 
-<mat-dialog-content>
+<div mat-dialog-content>
 	<h1>What is new in CodeCharta?</h1>
 	<h2>{{ data.previousVersion }} → {{ data.currentVersion }}</h2>
 
@@ -10,9 +10,9 @@
 			<ul [innerHTML]="change.value"></ul>
 		</div>
 	</div>
-</mat-dialog-content>
+</div>
 
-<mat-dialog-actions>
+<div mat-dialog-actions>
 	<a href="https://maibornwolff.github.io/codecharta/news/" target="_blank" rel="noopener noreferrer">Know more</a>
-	<button mat-button [mat-dialog-close]="true">CLOSE</button>
-</mat-dialog-actions>
+	<button mat-button [mat-dialog-close]="true" cdkFocusInitial>CLOSE</button>
+</div>

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.scss

@@ -1,17 +1,10 @@
 @use "../../../../material/theme";
 
-.cc-changelog-dialog .mat-dialog-container {
-	padding: 0 0 24px 0;
-
-	[mat-dialog-title] {
-		padding: 10px 0 10px 16px;
-		color: white;
-		background-color: theme.$cc-primary-color;
-	}
-
-	mat-dialog-content {
-		padding: 0 24px;
-		margin: 10px 0;
+.cc-changelog-dialog .mat-mdc-dialog-container {
+	[mat-dialog-content] {
+		padding: 8px 24px 0 24px;
+		margin-top: 10px;
+		color: black;
 
 		img[alt$="xs"] {
 			height: 32px;
@@ -29,8 +22,7 @@
 			height: 512px;
 		}
 	}
-
-	mat-dialog-actions {
+	[mat-dialog-actions] {
 		justify-content: flex-end;
 
 		a {

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.ts

@@ -1,10 +1,11 @@
-import "./changelogDialog.component.scss"
 import markdownFile from "../../../../../../CHANGELOG.md"
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-	template: require("./changelogDialog.component.html")
+	templateUrl: "./changelogDialog.component.html",
+	styleUrls: ["./changelogDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ChangelogDialogComponent {
 	changes: Record<string, string>

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.module.ts

@@ -5,7 +5,6 @@ import { ChangelogDialogComponent } from "./changelogDialog.component"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule],
-	declarations: [ChangelogDialogComponent],
-	entryComponents: [ChangelogDialogComponent]
+	declarations: [ChangelogDialogComponent]
 })
 export class ChangelogDialogModule {}

package/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.scss

@@ -1,12 +1,12 @@
-.cc-confirmation-dialog .mat-dialog-container {
+.cc-confirmation-dialog .mat-mdc-dialog-container {
 	.confirmation-message {
 		padding: 10px;
 	}
 
-	.mat-dialog-actions {
+	.mat-mdc-dialog-actions {
 		justify-content: flex-end;
 
-		.mat-button {
+		.mat-mdc-button {
 			background-color: rgba(138, 132, 132, 0.08);
 
 			&.submit-button {

package/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts

@@ -1,9 +1,10 @@
-import "./confirmationDialog.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-	template: require("./confirmationDialog.component.html")
+	templateUrl: "./confirmationDialog.component.html",
+	styleUrls: ["./confirmationDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ConfirmationDialogComponent {
 	constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.po.ts

@@ -2,17 +2,12 @@ import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
 
 export class DialogErrorPageObject {
 	async getMessage() {
-		await page.waitForSelector(".mat-dialog-content")
-		return page.$eval(".mat-dialog-content", element => element["innerText"])
+		await page.waitForSelector(".mat-mdc-dialog-content")
+		return page.$eval(".mat-mdc-dialog-content", element => element["innerText"])
 	}
 
 	async clickOk() {
-		await clickButtonOnPageElement(".mat-dialog-actions button")
-		await page.waitForSelector(".mat-dialog-actions button", { visible: false })
-	}
-
-	async clickOkAndReturnWhenFullyClosed() {
-		await clickButtonOnPageElement(".mat-dialog-actions button")
-		await page.waitForFunction(() => !document.querySelector(".mat-dialog-content"))
+		await clickButtonOnPageElement(".mat-mdc-dialog-actions button")
+		await page.waitForFunction(() => !document.querySelector(".mat-mdc-dialog-actions button"))
 	}
 }

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.ts

@@ -1,8 +1,9 @@
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-	template: require("./errorDialog.component.html")
+	templateUrl: "./errorDialog.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ErrorDialogComponent {
 	constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { FileDownloader } from "../../util/fileDownloader"
 import { STLExporter } from "three/examples/jsm/exporters/STLExporter"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
@@ -11,11 +11,12 @@ import { State } from "../../state/angular-redux/state"
 
 @Component({
 	selector: "cc-export-threed-map-button",
-	template: require("./export3DMapButton.component.html")
+	templateUrl: "./export3DMapButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class Export3DMapButtonComponent {
 	private exporter = new STLExporter()
-	constructor(@Inject(State) private state: State, @Inject(ThreeSceneService) private threeSceneService: ThreeSceneService) {}
+	constructor(private state: State, private threeSceneService: ThreeSceneService) {}
 
 	downloadStlFile() {
 		const files = filesSelector(this.state.getValue())

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

@@ -1,16 +1,17 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setDistributionMetric } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.actions"
 import { distributionMetricSelector } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
 
 @Component({
 	selector: "cc-distribution-metric-chooser",
-	template: require("./distributionMetricChooser.component.html")
+	templateUrl: "./distributionMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DistributionMetricChooserComponent {
 	distributionMetric$ = this.store.select(distributionMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleDistributionMetricChanged(value: string) {
 		this.store.dispatch(setDistributionMetric(value))

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

@@ -8,14 +8,13 @@ cc-file-extension-bar {
 
 		cc-distribution-metric-chooser {
 			width: 210px;
-			display: inline-flex;
+			display: flex;
+			align-items: center;
 			font-size: 12px;
+			gap: 6px;
+			padding-left: 6px;
 
-			i.fa {
-				margin: 2px 8px 0 4px;
-			}
-
-			.mat-select {
+			.mat-mdc-select {
 				border-bottom: 0;
 			}
 		}

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

@@ -1,20 +1,21 @@
-import "./fileExtensionBar.component.scss"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MetricDistribution, FileExtensionCalculator } from "./selectors/fileExtensionCalculator"
-import { Component, Inject } from "@angular/core"
 import { metricDistributionSelector } from "./selectors/metricDistribution.selector"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
 import { Store } from "../../state/angular-redux/store"
 
 @Component({
 	selector: "cc-file-extension-bar",
-	template: require("./fileExtensionBar.component.html")
+	templateUrl: "./fileExtensionBar.component.html",
+	styleUrls: ["./fileExtensionBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FileExtensionBarComponent {
 	showAbsoluteValues = false
 	showDetails = false
 	metricDistribution: MetricDistribution[]
 
-	constructor(@Inject(Store) private store: Store, @Inject(ThreeSceneService) private threeSceneService: ThreeSceneService) {
+	constructor(private store: Store, private threeSceneService: ThreeSceneService) {
 		this.store.select(metricDistributionSelector).subscribe(metricDistribution => {
 			this.metricDistribution = metricDistribution
 		})

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

@@ -6,7 +6,6 @@ import { FileExtensionBarComponent } from "./fileExtensionBar.component"
 @NgModule({
 	imports: [CommonModule, DistributionMetricChooserModule],
 	declarations: [FileExtensionBarComponent],
-	exports: [FileExtensionBarComponent],
-	entryComponents: [FileExtensionBarComponent]
+	exports: [FileExtensionBarComponent]
 })
 export class FileExtensionBarModule {}