codecharta-visualization 1.119.0 → 1.120.0

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

@@ -1,212 +0,0 @@
-import { FileExtensionCalculator, MetricDistribution } from "./fileExtensionCalculator"
-import { CodeMapNode, NodeType } from "../../../codeCharta.model"
-import { VALID_NODE_WITH_PATH_AND_EXTENSION, VALID_NODE_WITHOUT_RLOC_METRIC, setIsBlacklisted } from "../../../util/dataMocks"
-import { clone } from "../../../util/clone"
-
-describe("FileExtensionCalculator", () => {
-	let map: CodeMapNode
-
-	beforeEach(() => {
-		map = clone(VALID_NODE_WITH_PATH_AND_EXTENSION)
-	})
-
-	describe("getFileExtensionDistribution", () => {
-		it("should get correct absolute distribution of file-extensions for given metric", () => {
-			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
-				{
-					fileExtension: "None",
-					absoluteMetricValue: 15,
-					relativeMetricValue: 3.978_779_840_848_806_4,
-					color: "#676867"
-				}
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct absolute distribution of file-extensions for given metric with hidden node", () => {
-			setIsBlacklisted([map.children[0].path], map, "flatten")
-
-			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
-				{
-					fileExtension: "None",
-					absoluteMetricValue: 15,
-					relativeMetricValue: 3.978_779_840_848_806_4,
-					color: "#676867"
-				}
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct absolute distribution of file-extensions for given metric with excluded node", () => {
-			setIsBlacklisted([map.children[0].path], map, "exclude")
-
-			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 58.483_754_512_635_38, color: "hsl(58, 60%, 50%)" },
-				{
-					fileExtension: "json",
-					absoluteMetricValue: 70,
-					relativeMetricValue: 25.270_758_122_743_683,
-					color: "hsl(232, 60%, 50%)"
-				},
-				{ fileExtension: "jpg", absoluteMetricValue: 30, relativeMetricValue: 10.830_324_909_747_292, color: "hsl(321, 60%, 50%)" },
-				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 5.415_162_454_873_646, color: "#676867" }
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct absolute distribution of file-extensions for given metric with excluded path", () => {
-			setIsBlacklisted(["/root/another big leaf.java", "/root/Parent Leaf/another leaf.java"], map, "exclude")
-
-			const expected: MetricDistribution[] = [
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 60.465_116_279_069_77, color: "hsl(321, 60%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 32.558_139_534_883_72, color: "hsl(232, 60%, 50%)" },
-				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 6.976_744_186_046_512, color: "#676867" }
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct relative distribution of file-extensions for given metric", () => {
-			const expected: MetricDistribution[] = [
-				{
-					fileExtension: "java",
-					absoluteMetricValue: 162,
-					relativeMetricValue: 42.970_822_281_167_11,
-					color: "hsl(58, 60%, 50%)"
-				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
-				{
-					fileExtension: "None",
-					absoluteMetricValue: 15,
-					relativeMetricValue: 3.978_779_840_848_806_4,
-					color: "#676867"
-				}
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct get Array with just a None Attribute, if no Extension is found for the Metric", () => {
-			map = VALID_NODE_WITHOUT_RLOC_METRIC
-
-			const expected: MetricDistribution[] = [
-				{ fileExtension: "None", absoluteMetricValue: null, relativeMetricValue: 100, color: "#676867" }
-			]
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should get correct distribution of file-extensions for given metric using other-grouping", () => {
-			const additionalChildren: CodeMapNode[] = [
-				{
-					name: "child1.txt",
-					type: NodeType.FILE,
-					path: "/root/child1.txt",
-					attributes: { rloc: 2 },
-					isExcluded: false,
-					isFlattened: false
-				},
-				{
-					name: "child2.kt",
-					type: NodeType.FILE,
-					path: "/root/child2.kt",
-					attributes: { rloc: 4 },
-					isExcluded: false,
-					isFlattened: false
-				},
-				{
-					name: "child3.ts",
-					type: NodeType.FILE,
-					path: "/root/child3.ts",
-					attributes: { rloc: 6 },
-					isExcluded: false,
-					isFlattened: false
-				},
-				{
-					name: "child4.xml",
-					type: NodeType.FILE,
-					path: "/root/child4.xml",
-					attributes: { rloc: 8 },
-					isExcluded: false,
-					isFlattened: false
-				}
-			]
-			const expected: MetricDistribution[] = [
-				{
-					fileExtension: "java",
-					absoluteMetricValue: 162,
-					relativeMetricValue: 40.806_045_340_050_375,
-					color: "hsl(58, 60%, 50%)"
-				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 32.745_591_939_546_6, color: "hsl(321, 60%, 50%)" },
-				{
-					fileExtension: "json",
-					absoluteMetricValue: 70,
-					relativeMetricValue: 17.632_241_813_602_015,
-					color: "hsl(232, 60%, 50%)"
-				},
-				{
-					fileExtension: "None",
-					absoluteMetricValue: 15,
-					relativeMetricValue: 3.778_337_531_486_146_3,
-					color: "#676867"
-				},
-				{ fileExtension: "xml", absoluteMetricValue: 8, relativeMetricValue: 2.015_113_350_125_944_6, color: "hsl(7, 60%, 50%)" },
-				{
-					fileExtension: "other",
-					absoluteMetricValue: 12,
-					relativeMetricValue: 3.022_670_025_188_916_5,
-					color: "#676867"
-				}
-			]
-			map.children.push(...additionalChildren)
-			FileExtensionCalculator["OTHER_GROUP_THRESHOLD_VALUE"] = 2
-
-			const result: MetricDistribution[] = FileExtensionCalculator.getMetricDistribution(map, "rloc")
-
-			expect(result).toEqual(expected)
-		})
-	})
-
-	describe("estimateFileExtension", () => {
-		it("should return correct lower-cased file extension", () => {
-			const fileName = "fileName.JAVA"
-			const result = FileExtensionCalculator["estimateFileExtension"](fileName)
-			expect(result).toEqual("java")
-		})
-
-		it("should return correct file extension when filename contains multiple points", () => {
-			const fileName = "prefix.name.suffix.json"
-			const result = FileExtensionCalculator["estimateFileExtension"](fileName)
-			expect(result).toEqual("json")
-		})
-
-		it("should return 'none' as extension, as there does not exist any", () => {
-			const fileName = "name_without_extension"
-			const result = FileExtensionCalculator["estimateFileExtension"](fileName)
-			expect(result).toEqual("None")
-		})
-	})
-})

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

@@ -1,123 +0,0 @@
-import { CodeMapNode } from "../../../codeCharta.model"
-import { hierarchy } from "d3-hierarchy"
-import { HSL } from "../../../util/color/hsl"
-import { isLeaf } from "../../../util/codeMapHelper"
-
-export interface MetricDistribution {
-	fileExtension: string
-	absoluteMetricValue: number
-	relativeMetricValue: number
-	color: string
-}
-
-export class FileExtensionCalculator {
-	private static readonly NO_EXTENSION = "None"
-	private static readonly OTHER_EXTENSION = "other"
-	private static OTHER_GROUP_THRESHOLD_VALUE = 3
-
-	static getMetricDistribution(map: CodeMapNode, metric: string): MetricDistribution[] {
-		if (!map) {
-			return []
-		}
-
-		const distributions: Map<string, MetricDistribution> = new Map()
-		let sumOfAllMetricValues = 0
-
-		for (const node of hierarchy(map)) {
-			if (isLeaf(node) && !node.data.isExcluded) {
-				const metricValue = node.data.attributes[metric]
-				const fileExtension = FileExtensionCalculator.estimateFileExtension(node.data.name)
-				const matchingFileExtensionObject = distributions.get(fileExtension)
-				sumOfAllMetricValues += metricValue
-
-				if (matchingFileExtensionObject) {
-					matchingFileExtensionObject.absoluteMetricValue += metricValue
-				} else {
-					distributions.set(fileExtension, FileExtensionCalculator.getDistributionObject(fileExtension, metricValue))
-				}
-			}
-		}
-		if (sumOfAllMetricValues === 0) {
-			return [FileExtensionCalculator.getNoneExtension()]
-		}
-
-		let metrics = []
-		for (const distribution of distributions.values()) {
-			if (distribution.absoluteMetricValue !== 0) {
-				distribution.relativeMetricValue = (distribution.absoluteMetricValue * 100) / sumOfAllMetricValues
-				metrics.push(distribution)
-			}
-		}
-		metrics.sort((a, b) => b.absoluteMetricValue - a.absoluteMetricValue)
-		metrics = FileExtensionCalculator.getMetricDistributionWithOthers(metrics)
-		return metrics.length > 0 ? metrics : [FileExtensionCalculator.getNoneExtension()]
-	}
-
-	private static getMetricDistributionWithOthers(distribution: MetricDistribution[]) {
-		const otherExtension = FileExtensionCalculator.getOtherExtension()
-		const visibleDistributions: MetricDistribution[] = []
-
-		for (const metric of distribution) {
-			if (metric.relativeMetricValue > FileExtensionCalculator.OTHER_GROUP_THRESHOLD_VALUE) {
-				visibleDistributions.push(metric)
-			} else {
-				otherExtension.absoluteMetricValue += metric.absoluteMetricValue
-				otherExtension.relativeMetricValue += metric.relativeMetricValue
-			}
-		}
-
-		if (otherExtension.relativeMetricValue > 0) {
-			visibleDistributions.push(otherExtension)
-		}
-
-		return visibleDistributions
-	}
-
-	private static getOtherExtension(): MetricDistribution {
-		return {
-			fileExtension: FileExtensionCalculator.OTHER_EXTENSION,
-			absoluteMetricValue: 0,
-			relativeMetricValue: 0,
-			color: FileExtensionCalculator.getColor(FileExtensionCalculator.OTHER_EXTENSION)
-		}
-	}
-
-	private static getDistributionObject(fileExtension: string, metricValue: number): MetricDistribution {
-		return {
-			fileExtension,
-			absoluteMetricValue: metricValue,
-			relativeMetricValue: 0,
-			color: FileExtensionCalculator.getColor(fileExtension)
-		}
-	}
-
-	static estimateFileExtension(fileName: string) {
-		const lastDotPosition = fileName.lastIndexOf(".")
-		if (lastDotPosition > 0 && lastDotPosition !== fileName.length) {
-			const extension = fileName.slice(lastDotPosition + 1)
-			return extension.toLowerCase()
-		}
-		return FileExtensionCalculator.NO_EXTENSION
-	}
-
-	private static getNoneExtension(): MetricDistribution {
-		return {
-			fileExtension: FileExtensionCalculator.NO_EXTENSION,
-			absoluteMetricValue: null,
-			relativeMetricValue: 100,
-			color: FileExtensionCalculator.getColor(FileExtensionCalculator.NO_EXTENSION)
-		}
-	}
-
-	private static getColor(fileExtension: string): string {
-		if (fileExtension === FileExtensionCalculator.NO_EXTENSION || fileExtension === FileExtensionCalculator.OTHER_EXTENSION) {
-			return "#676867"
-		}
-
-		let hash = 0
-		for (let index = 0; index < fileExtension.length; index++) {
-			hash = fileExtension.codePointAt(index) + ((hash << 5) - hash)
-		}
-		return new HSL(hash % 360, 60, 50).toString()
-	}
-}

package/app/codeCharta/ui/fileExtensionBar/selectors/metricDistribution.selector.ts

@@ -1,11 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { accumulatedDataSelector } from "../../../state/selectors/accumulatedData/accumulatedData.selector"
-import { distributionMetricSelector } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
-import { FileExtensionCalculator } from "./fileExtensionCalculator"
-
-export const metricDistributionSelector = createSelector(
-	accumulatedDataSelector,
-	distributionMetricSelector,
-	(accumulatedData, distributionMetric) =>
-		FileExtensionCalculator.getMetricDistribution(accumulatedData.unifiedMapNode, distributionMetric)
-)

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

@@ -1,3 +0,0 @@
-<cc-file-panel-state-buttons></cc-file-panel-state-buttons>
-<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,73 +0,0 @@
-@use "../../../material/theme";
-
-cc-file-panel {
-	display: flex;
-	gap: inherit;
-
-	&.hidden {
-		display: none;
-	}
-
-	.state-selector-button {
-		&.mode-selector {
-			height: 24px;
-			width: 66px;
-			background-color: #ffffff;
-
-			&.middle {
-				border-left: 1px solid rgba(230, 230, 230, 0.96);
-				border-right: 1px solid rgba(230, 230, 230, 0.96);
-			}
-
-			&.current {
-				background-color: theme.$cc-primary-color;
-				color: #ffffff;
-			}
-
-			&.current:hover {
-				background-color: theme.$cc-primary-color;
-			}
-		}
-	}
-
-	.reference-comparison-switch {
-		background-color: theme.$cc-primary-color;
-		margin: 0;
-		height: 24px;
-		width: 36px;
-		border-radius: 5px;
-
-		&[disabled] {
-			background-color: theme.$cc-disabled-color;
-		}
-
-		&:hover {
-			background-color: theme.$cc-emphasized-color;
-
-			&[disabled] {
-				background-color: theme.$cc-disabled-color;
-			}
-		}
-
-		.fa {
-			vertical-align: middle;
-			color: rgb(255, 255, 255);
-		}
-	}
-
-	.pictogram {
-		display: inline-flex;
-		width: 10px;
-		margin-right: 5px;
-		margin-left: 5px;
-		height: 22px;
-		border-radius: 2px;
-		align-self: center;
-		vertical-align: bottom;
-	}
-
-	.standard-select,
-	.delta-select {
-		width: 200px;
-	}
-}

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

@@ -1,34 +0,0 @@
-import { FilePanelComponent } from "./filePanel.component"
-import { TestBed } from "@angular/core/testing"
-import { FilePanelModule } from "./filePanel.module"
-import { render } from "@testing-library/angular"
-import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { provideMockStore } from "@ngrx/store/testing"
-import { State } from "@ngrx/store"
-
-describe("filePanelComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [FilePanelModule],
-			providers: [{ provide: State, useValue: {} }]
-		})
-	})
-
-	it("should render delta-selector when in delta mode", async () => {
-		const { container } = await render(FilePanelComponent, {
-			excludeComponentDeclaration: true,
-			providers: [provideMockStore({ selectors: [{ selector: isDeltaStateSelector, value: true }] })]
-		})
-		expect(container.querySelector("cc-file-panel-delta-selector")).not.toBe(null)
-		expect(container.querySelector("cc-file-panel-file-selector")).toBe(null)
-	})
-
-	it("should render file-selector when not in delta mode", async () => {
-		const { container } = await render(FilePanelComponent, {
-			excludeComponentDeclaration: true,
-			providers: [provideMockStore({ selectors: [{ selector: isDeltaStateSelector, value: false }] })]
-		})
-		expect(container.querySelector("cc-file-panel-file-selector")).not.toBe(null)
-		expect(container.querySelector("cc-file-panel-delta-selector")).toBe(null)
-	})
-})

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

@@ -1,16 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-
-@Component({
-	selector: "cc-file-panel",
-	templateUrl: "./filePanel.component.html",
-	styleUrls: ["./filePanel.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class FilePanelComponent {
-	isDeltaState$ = this.store.select(isDeltaStateSelector)
-
-	constructor(private store: Store<CcState>) {}
-}

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

@@ -1,25 +0,0 @@
-import { FilePanelFileSelectorComponent } from "./filePanelFileSelector/filePanelFileSelector.component"
-import { FilePanelStateButtonsComponent } from "./filePanelStateButtons/filePanelStateButtons.component"
-import { FilePanelDeltaSelectorComponent } from "./filePanelDeltaSelector/filePanelDeltaSelector.component"
-import { RemoveFileButtonComponent } from "./filePanelFileSelector/removeFileButton/removeFileButton.component"
-import { NgModule } from "@angular/core"
-import { CommonModule } from "@angular/common"
-import { MaterialModule } from "../../../material/material.module"
-import { FormsModule } from "@angular/forms"
-import { FileSelectionModeService } from "./fileSelectionMode.service"
-import { FilePanelComponent } from "./filePanel.component"
-import { RemoveExtensionPipeModule } from "../../util/pipes/RemoveExtensionPipeModule"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule, RemoveExtensionPipeModule],
-	declarations: [
-		FilePanelDeltaSelectorComponent,
-		FilePanelFileSelectorComponent,
-		FilePanelStateButtonsComponent,
-		RemoveFileButtonComponent,
-		FilePanelComponent
-	],
-	providers: [FileSelectionModeService],
-	exports: [FilePanelComponent]
-})
-export class FilePanelModule {}

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

@@ -1,17 +0,0 @@
-import { clickButtonOnPageElement } from "../../../puppeteer.helper"
-
-export class FilePanelPageObject {
-	async getSelectedName() {
-		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-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,27 +0,0 @@
-<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>
-</div>

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

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

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

@@ -1,37 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { map } from "rxjs"
-import { CCFile, CcState } from "../../../codeCharta.model"
-import { FileSelectionState } from "../../../model/files/files"
-import { referenceFileSelector } from "../../../state/selectors/referenceFile/referenceFile.selector"
-import { setDeltaComparison, setDeltaReference, switchReferenceAndComparison } from "../../../state/store/files/files.actions"
-import { filesSelector } from "../../../state/store/files/files.selector"
-import { pictogramBackgroundSelector } from "./pictogramBackground.selector"
-
-@Component({
-	selector: "cc-file-panel-delta-selector",
-	templateUrl: "./filePanelDeltaSelector.component.html",
-	styleUrls: ["./filePanelDeltaSelector.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class FilePanelDeltaSelectorComponent {
-	files$ = this.store.select(filesSelector)
-	referenceFile$ = this.store.select(referenceFileSelector)
-	comparisonFile$ = this.files$.pipe(map(files => files.find(file => file.selectedAs === FileSelectionState.Comparison)?.file))
-	possibleComparisonFiles$ = this.files$.pipe(map(files => files.filter(file => file.selectedAs !== FileSelectionState.Reference)))
-	pictogramBackground$ = this.store.select(pictogramBackgroundSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	handleDeltaReferenceFileChange(file: CCFile) {
-		this.store.dispatch(setDeltaReference({ file }))
-	}
-
-	handleDeltaComparisonFileChange(file: CCFile) {
-		this.store.dispatch(setDeltaComparison({ file }))
-	}
-
-	switchReferenceAndComparison() {
-		this.store.dispatch(switchReferenceAndComparison())
-	}
-}

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/pictogramBackground.selector.spec.ts

@@ -1,9 +0,0 @@
-import { _mapColors2pictogramColors } from "./pictogramBackground.selector"
-
-describe("pictogramBackgroundSelector", () => {
-	it("should return a 50/50 linear-gradient", () => {
-		expect(_mapColors2pictogramColors({ positiveDelta: "#000000", negativeDelta: "#ffffff" })).toBe(
-			"linear-gradient(#000000 50%, #ffffff 50%)"
-		)
-	})
-})

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/pictogramBackground.selector.ts

@@ -1,8 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { MapColors } from "../../../codeCharta.model"
-import { mapColorsSelector } from "../../../state/store/appSettings/mapColors/mapColors.selector"
-
-export const _mapColors2pictogramColors = (mapColors: Pick<MapColors, "positiveDelta" | "negativeDelta">) =>
-	`linear-gradient(${mapColors.positiveDelta} 50%, ${mapColors.negativeDelta} 50%)`
-
-export const pictogramBackgroundSelector = createSelector(mapColorsSelector, _mapColors2pictogramColors)

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

@@ -1,19 +0,0 @@
-<mat-select
-	panelClass="file-select"
-	[(value)]="selectedFilesInUI"
-	(selectionChange)="handleSelectedFilesChanged($event.value)"
-	(openedChange)="handleOpenedChanged($event)"
-	class="standard-select"
-	multiple
->
-	<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 }}
-
-		<cc-remove-file-button *ngIf="fileStates.length > 1" [filename]="file.file.fileMeta.fileName"></cc-remove-file-button>
-	</mat-option>
-</mat-select>

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

@@ -1,42 +0,0 @@
-@use "../../../../material/theme";
-.file-select {
-	&.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;
-
-				&:hover {
-					border-radius: 50%;
-				}
-			}
-		}
-	}
-}