codecharta-visualization 1.119.1 → 1.120.1

package/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.spec.ts

@@ -1,41 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { MatSelectModule } from "@angular/material/select"
-import { fireEvent, render, screen, getByText, waitForElementToBeRemoved } from "@testing-library/angular"
-
-import { SortingOption } from "../../../codeCharta.model"
-import { SortingOptionComponent } from "./sortingOption.component"
-import { provideMockStore } from "@ngrx/store/testing"
-import { sortingOrderSelector } from "../../../state/store/dynamicSettings/sortingOption/sortingOrder.selector"
-
-describe("SortingOptionComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [MatSelectModule],
-			providers: [provideMockStore({ selectors: [{ selector: sortingOrderSelector, value: SortingOption.NAME }] })]
-		})
-	})
-
-	it("should be a select for the sorting option", async () => {
-		const { detectChanges } = await render(SortingOptionComponent)
-		detectChanges()
-
-		expect(await screen.findByTitle("Sort by")).toBeTruthy()
-
-		// it has initial sorting order
-		expect(screen.getByText("Name")).toBeTruthy()
-
-		// it offers all possible sorting Options, when clicking on it
-		const selectBoxTrigger = screen.getByRole("combobox").firstChild as HTMLElement
-		fireEvent.click(selectBoxTrigger)
-		const selectOptionsWrapper = screen.getByRole("listbox")
-		for (const option of Object.values(SortingOption)) {
-			expect(getByText(selectOptionsWrapper, option)).toBeTruthy()
-		}
-
-		// it closes itself and sets new sorting option, when clicking an option
-		const sortByNumberOfFiles = getByText(selectOptionsWrapper, "Number of Files")
-		fireEvent.click(sortByNumberOfFiles)
-		await waitForElementToBeRemoved(() => screen.getByRole("listbox"))
-		expect(screen.getByText("Number of Files")).toBeTruthy()
-	})
-})

package/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts

@@ -1,25 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { Observable } from "rxjs"
-
-import { SortingOption, CcState } from "../../../codeCharta.model"
-import { setSortingOption } from "../../../state/store/dynamicSettings/sortingOption/sortingOption.actions"
-import { sortingOrderSelector } from "../../../state/store/dynamicSettings/sortingOption/sortingOrder.selector"
-
-@Component({
-	selector: "cc-sorting-option",
-	templateUrl: "./sortingOption.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class SortingOptionComponent {
-	sortingOptions = Object.values(SortingOption)
-	selectedSortingOption$: Observable<SortingOption>
-
-	constructor(private store: Store<CcState>) {
-		this.selectedSortingOption$ = store.select(sortingOrderSelector)
-	}
-
-	handleSelectedSortingOptionChanged(event) {
-		this.store.dispatch(setSortingOption(event.value))
-	}
-}

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

@@ -1,19 +0,0 @@
-<div class="cc-slider-container">
-	<mat-label class="label">{{ label }}</mat-label>
-	<div class="slider-with-input">
-		<mat-slider [disabled]="disabled" [step]="step" [min]="min" [max]="max">
-			<input matSliderThumb [value]="value" (input)="handleInputOnChange($event)" />
-		</mat-slider>
-		<mat-form-field appearance="outline">
-			<input
-				matInput
-				type="number"
-				[value]="value"
-				[disabled]="disabled"
-				(input)="handleInputOnChange($event)"
-				[min]="min"
-				[max]="max"
-			/>
-		</mat-form-field>
-	</div>
-</div>

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

@@ -1,49 +0,0 @@
-cc-slider {
-	width: 100%;
-	margin-top: 8px;
-
-	.label {
-		margin-left: 10px;
-	}
-
-	.cc-slider-container {
-		display: flex;
-		flex-direction: column;
-
-		.slider-with-input {
-			display: flex;
-			align-items: center;
-
-			mat-slider {
-				margin: 0px 12px;
-				flex: 2;
-			}
-
-			mat-form-field {
-				flex: 1;
-				height: 32px;
-
-				.mat-mdc-text-field-wrapper {
-					padding: 0px 12px;
-
-					.mat-mdc-form-field-flex {
-						align-self: center;
-
-						.mat-mdc-form-field-infix {
-							padding: 0;
-							min-height: 28px;
-
-							.mat-mdc-input-element {
-								min-height: inherit;
-							}
-						}
-					}
-				}
-
-				.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
-					display: none;
-				}
-			}
-		}
-	}
-}

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

@@ -1,56 +0,0 @@
-import { HarnessLoader } from "@angular/cdk/testing"
-import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
-import { ComponentFixture, TestBed } from "@angular/core/testing"
-import { MatInputHarness } from "@angular/material/input/testing"
-import { MatSliderHarness } from "@angular/material/slider/testing"
-import { SliderComponent } from "./slider.component"
-import { SliderModule } from "./slider.module"
-
-let loader: HarnessLoader
-let fixture: ComponentFixture<SliderComponent>
-
-describe("SliderComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [SliderModule],
-			declarations: [SliderComponent]
-		}).compileComponents()
-		fixture = TestBed.createComponent(SliderComponent)
-		loader = TestbedHarnessEnvironment.loader(fixture)
-	})
-
-	it("should update given value on input changes", async () => {
-		let value = 21
-		fixture.componentInstance.value = value
-		fixture.componentInstance.min = 1
-		fixture.componentInstance.max = 100
-		fixture.componentInstance.onChange = (newValue: number) => {
-			value = newValue
-		}
-		fixture.detectChanges()
-
-		const input = await loader.getHarness(MatInputHarness)
-		await input.setValue("42")
-
-		expect(await input.getValue()).toBe("42")
-		expect(value).toBe(42)
-	})
-
-	it("should update given value on slider changes", async () => {
-		let value = 21
-		fixture.componentInstance.value = value
-		fixture.componentInstance.min = 1
-		fixture.componentInstance.max = 100
-		fixture.componentInstance.onChange = (newValue: number) => {
-			value = newValue
-		}
-		fixture.detectChanges()
-
-		const slider = await loader.getHarness(MatSliderHarness)
-		const sliderThumb = await slider.getEndThumb()
-		await sliderThumb.setValue(42)
-
-		expect(await sliderThumb.getValue()).toBe(42)
-		expect(value).toBe(42)
-	})
-})

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

@@ -1,30 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { parseNumberInput } from "../../util/parseNumberInput"
-
-@Component({
-	selector: "cc-slider",
-	templateUrl: "./slider.component.html",
-	styleUrls: ["./slider.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class SliderComponent {
-	@Input() value?: number
-	@Input() min: number
-	@Input() max: number
-	@Input() label: string
-	@Input() step?: number = 1
-	@Input() disabled?: boolean = false
-	@Input() onChange: (number) => void
-	handleSliderOnChange(value: number) {
-		if (value !== this.value) {
-			this.onChange(value)
-		}
-	}
-
-	handleInputOnChange($event: Event) {
-		const newValue = parseNumberInput($event, this.min, this.max)
-		if (newValue !== this.value && !Number.isNaN(newValue)) {
-			this.onChange(newValue)
-		}
-	}
-}

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

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

package/app/codeCharta/ui/toolBar/downloadButton/downloadButton.component.html

@@ -1,6 +0,0 @@
-<cc-action-icon
-	title="Download cc.json"
-	[icon]="'fa fa-download'"
-	(click)="download()"
-	[style.background]="'rgb(204, 204, 204)'"
-></cc-action-icon>

package/app/codeCharta/ui/toolBar/downloadButton/downloadButton.component.spec.ts

@@ -1,91 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, waitFor } from "@testing-library/angular"
-import { screen } from "@testing-library/dom"
-import userEvent from "@testing-library/user-event"
-import { stubDate } from "../../../../../mocks/dateMock.helper"
-import { FILE_META, VALID_EDGES, VALID_NODE_WITH_PATH_AND_EXTENSION } from "../../../util/dataMocks"
-import { FileDownloader } from "../../../util/fileDownloader"
-import { DownloadButtonComponent } from "./downloadButton.component"
-import { DownloadButtonModule } from "./downloadButton.module"
-import { State } from "@ngrx/store"
-
-const mockedAccumulatedData = {
-	unifiedMapNode: VALID_NODE_WITH_PATH_AND_EXTENSION,
-	unifiedFileMeta: FILE_META
-}
-jest.mock("../../../state/selectors/accumulatedData/accumulatedData.selector", () => ({
-	accumulatedDataSelector: () => mockedAccumulatedData
-}))
-
-describe("downloadButtonComponent", () => {
-	stubDate(new Date(Date.UTC(2018, 11, 14, 9, 39)))
-	const mockedFileSettings = {
-		attributeTypes: {
-			nodes: { rloc: "absolute" },
-			edges: { pairingRate: "relative", avgCommits: "absolute" }
-		},
-		blacklist: [],
-		edges: VALID_EDGES,
-		markedPackages: []
-	}
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [DownloadButtonModule],
-			providers: [
-				{
-					provide: State,
-					useValue: {
-						getValue: () => ({
-							files: [], // files are only used to decide if in delta mode. So just mocking the key is enough
-							fileSettings: mockedFileSettings
-						})
-					}
-				}
-			]
-		})
-	})
-
-	it("should show deprecation warning and download a map with custom settings", async () => {
-		const mockedDownload = jest.fn()
-		FileDownloader.downloadCurrentMap = mockedDownload
-		await render(DownloadButtonComponent, { excludeComponentDeclaration: true })
-		await userEvent.click(screen.getByRole("button"))
-
-		await waitFor(() =>
-			expect((document.querySelector(".file-name-wrapper input") as HTMLInputElement).value).toBe("fileA_2018-12-14_09-39")
-		)
-
-		expect(document.querySelector(".deprecation-warning-container").textContent).toContain("Deprecation warning!")
-
-		const checkboxes = document.querySelectorAll("mat-checkbox")
-
-		expect(checkboxes[0].textContent).toContain("Nodes (8)")
-		expect(checkboxes[0].querySelector("input").checked).toBe(true)
-		expect(checkboxes[0].querySelector("input").disabled).toBe(true)
-
-		expect(checkboxes[1].textContent).toContain("AttributeTypes (3)")
-		expect(checkboxes[1].querySelector("input").checked).toBe(true)
-		expect(checkboxes[1].querySelector("input").disabled).toBe(true)
-
-		expect(checkboxes[2].textContent).toContain("Edges (3)")
-		expect(checkboxes[2].querySelector("input").checked).toBe(true)
-		expect(checkboxes[2].querySelector("input").disabled).toBe(false)
-
-		await userEvent.click(checkboxes[2].querySelector("input"))
-		expect(checkboxes[2].querySelector("input").checked).toBe(false)
-		expect(checkboxes[2].querySelector("input").disabled).toBe(false)
-
-		await userEvent.click(checkboxes[2].querySelector("input"))
-		expect(checkboxes[2].querySelector("input").checked).toBe(true)
-		expect(checkboxes[2].querySelector("input").disabled).toBe(false)
-
-		await userEvent.click(screen.getByText("SAVE"))
-		expect(mockedDownload).toHaveBeenCalled()
-		expect(mockedDownload.mock.calls[0][0]).toBe(mockedAccumulatedData["unifiedMapNode"])
-		expect(mockedDownload.mock.calls[0][1]).toBe(mockedAccumulatedData["unifiedFileMeta"])
-		const activatedDownloadSettingCount = 3
-		expect(mockedDownload.mock.calls[0][3].length).toBe(activatedDownloadSettingCount)
-		expect(mockedDownload.mock.calls[0][4]).toBe("fileA_2018-12-14_09-39")
-	})
-})

package/app/codeCharta/ui/toolBar/downloadButton/downloadButton.component.ts

@@ -1,16 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { MatDialog } from "@angular/material/dialog"
-import { DownloadDialogComponent } from "./downloadDialog/downloadDialog.component"
-
-@Component({
-	selector: "cc-download-button",
-	templateUrl: "./downloadButton.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class DownloadButtonComponent {
-	constructor(private dialog: MatDialog) {}
-
-	download() {
-		this.dialog.open(DownloadDialogComponent, { panelClass: "cc-download-dialog" })
-	}
-}

package/app/codeCharta/ui/toolBar/downloadButton/downloadButton.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from "@angular/core"
-import { FormsModule } from "@angular/forms"
-import { MaterialModule } from "../../../../material/material.module"
-import { ActionIconModule } from "../../actionIcon/actionIcon.module"
-import { DownloadButtonComponent } from "./downloadButton.component"
-import { DownloadDialogComponent } from "./downloadDialog/downloadDialog.component"
-
-@NgModule({
-	imports: [ActionIconModule, MaterialModule, FormsModule],
-	declarations: [DownloadButtonComponent, DownloadDialogComponent],
-	exports: [DownloadButtonComponent]
-})
-export class DownloadButtonModule {}

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/downloadDialog.component.html

@@ -1,42 +0,0 @@
-<mat-toolbar class="header">
-	<h2>Export File</h2>
-</mat-toolbar>
-
-<mat-dialog-content>
-	<div class="deprecation-warning-container">
-		<span
-			><h4>Deprecation warning!</h4>
-			This function is going to be replaced by Custom Views soon. For further information, please read the
-			<a
-				class="custom-views-link"
-				href="https://maibornwolff.github.io/codecharta/docs/custom-view/"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				How-To Article</a
-			>.</span
-		>
-	</div>
-	<div class="file-name-wrapper">
-		<mat-form-field>
-			<label>File Name</label>
-			<input matInput [(ngModel)]="fileName" />
-		</mat-form-field>
-		<div class="file-extension">.cc.json</div>
-	</div>
-
-	<div>The file includes:</div>
-
-	<mat-checkbox
-		*ngFor="let property of properties"
-		[checked]="property.isSelected"
-		[disabled]="property.isDisabled"
-		(change)="property.change($event.checked)"
-	>
-		{{ property.name }} ({{ property.amount }})
-	</mat-checkbox>
-</mat-dialog-content>
-
-<mat-dialog-actions>
-	<button mat-button class="save-button" (click)="download()" mat-dialog-close>SAVE</button>
-</mat-dialog-actions>

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/downloadDialog.component.scss

@@ -1,58 +0,0 @@
-@use "../../../../../material/theme";
-
-.cc-download-dialog .mat-mdc-dialog-container {
-	padding: 0 0 8px 0;
-	width: 500px;
-	overflow: hidden;
-
-	mat-toolbar {
-		&.header {
-			background-color: theme.$cc-primary-color;
-			h2 {
-				color: white;
-			}
-		}
-	}
-
-	.mat-mdc-dialog-content {
-		margin: 0;
-		padding: 16px;
-
-		.file-name-wrapper {
-			display: flex;
-
-			.mat-mdc-form-field {
-				flex: 1;
-			}
-
-			.file-extension {
-				margin-top: 41px;
-				color: grey;
-				font-size: 17px;
-			}
-		}
-		mat-checkbox {
-			display: block;
-		}
-
-		.deprecation-warning-container {
-			padding: 10px 0 10px 0;
-			color: red;
-
-			h4 {
-				margin: 0 0 10px 0;
-			}
-		}
-	}
-
-	.mat-mdc-dialog-actions {
-		flex-direction: column;
-		align-items: flex-end;
-
-		.save-button {
-			color: theme.$cc-primary-color;
-			background-color: rgba(138, 132, 132, 0.08);
-			margin-right: 8px;
-		}
-	}
-}

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/downloadDialog.component.ts

@@ -1,70 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { FileDownloader } from "../../../../util/fileDownloader"
-import { accumulatedDataSelector } from "../../../../state/selectors/accumulatedData/accumulatedData.selector"
-import { FileNameHelper } from "../../../../util/fileNameHelper"
-import { isDeltaState } from "../../../../model/files/files.helper"
-import {
-	DownloadableProperty,
-	getAmountOfAttributeTypes,
-	getAmountOfNodes,
-	getDownloadableProperty,
-	getFilteredBlacklistLength
-} from "./util/propertyHelper"
-import { State } from "@ngrx/store"
-import { CcState } from "../../../../codeCharta.model"
-
-@Component({
-	templateUrl: "./downloadDialog.component.html",
-	styleUrls: ["./downloadDialog.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class DownloadDialogComponent {
-	fileName: string
-	properties: (DownloadableProperty & { change: (isSelected: boolean) => void })[]
-
-	constructor(private state: State<CcState>) {
-		const stateValue = this.state.getValue()
-		const { unifiedMapNode, unifiedFileMeta } = accumulatedDataSelector(stateValue)
-		const { fileSettings, files } = stateValue
-		const { attributeTypes } = fileSettings
-		const { edges, markedPackages, blacklist } = fileSettings
-		this.fileName = FileNameHelper.getNewFileName(unifiedFileMeta.fileName, isDeltaState(files))
-		this.properties = [
-			this.getProperty(0, {
-				name: "Nodes",
-				amount: getAmountOfNodes(unifiedMapNode),
-				isSelected: true,
-				isDisabled: true
-			}),
-			this.getProperty(1, {
-				name: "AttributeTypes",
-				amount: getAmountOfAttributeTypes(attributeTypes),
-				isSelected: true,
-				isDisabled: true
-			}),
-			this.getProperty(2, getDownloadableProperty("Edges", edges.length)),
-			this.getProperty(3, getDownloadableProperty("MarkedPackages", markedPackages.length)),
-			this.getProperty(4, getDownloadableProperty("Excludes", getFilteredBlacklistLength(blacklist, "exclude"))),
-			this.getProperty(5, getDownloadableProperty("Flattens", getFilteredBlacklistLength(blacklist, "flatten")))
-		]
-	}
-
-	download() {
-		const state = this.state.getValue()
-		const { unifiedMapNode, unifiedFileMeta } = accumulatedDataSelector(state)
-		FileDownloader.downloadCurrentMap(
-			unifiedMapNode,
-			unifiedFileMeta,
-			state.fileSettings,
-			this.properties.filter(property => property.isSelected).map(property => property.name),
-			this.fileName
-		)
-	}
-
-	private getProperty(index: number, downloadableProperty: DownloadableProperty) {
-		return {
-			...downloadableProperty,
-			change: (isSelected: boolean) => (this.properties[index].isSelected = isSelected)
-		}
-	}
-}

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/util/propertyHelper.spec.ts

@@ -1,61 +0,0 @@
-import { AttributeTypeValue } from "../../../../../codeCharta.model"
-import { BLACKLIST } from "../../../../../util/dataMocks"
-import { getAmountOfAttributeTypes, getDownloadableProperty, getFilteredBlacklistLength } from "./propertyHelper"
-
-describe("propertyHelper", () => {
-	describe("getDownloadableProperty", () => {
-		it("should set isSelected to true and isDisabled to false when there is an amount", () => {
-			expect(getDownloadableProperty("MarkedPackages", 2)).toEqual({
-				name: "MarkedPackages",
-				amount: 2,
-				isSelected: true,
-				isDisabled: false
-			})
-		})
-
-		it("should set isSelected to false and isDisabled to true when there is no amount", () => {
-			expect(getDownloadableProperty("Edges", 0)).toEqual({
-				name: "Edges",
-				amount: 0,
-				isSelected: false,
-				isDisabled: true
-			})
-		})
-	})
-	describe("getAmountOfAttributeTypes", () => {
-		it("should calculate amount of attributes for nodes and edges", () => {
-			expect(
-				getAmountOfAttributeTypes({
-					nodes: { rloc: AttributeTypeValue.absolute },
-					edges: { pairingRate: AttributeTypeValue.relative }
-				})
-			).toBe(2)
-		})
-
-		it("should calculate amount of attributes for nodes only", () => {
-			expect(
-				getAmountOfAttributeTypes({
-					nodes: { rloc: AttributeTypeValue.absolute }
-				})
-			).toBe(1)
-		})
-
-		it("should calculate amount of attributes for edges only", () => {
-			expect(
-				getAmountOfAttributeTypes({
-					edges: { pairingRate: AttributeTypeValue.relative }
-				})
-			).toBe(1)
-		})
-	})
-
-	describe("getFilteredBlacklistLength", () => {
-		it("should get length of flattened buildings", () => {
-			expect(getFilteredBlacklistLength(BLACKLIST, "flatten")).toBe(1)
-		})
-
-		it("should get length of excluded buildings", () => {
-			expect(getFilteredBlacklistLength(BLACKLIST, "exclude")).toBe(2)
-		})
-	})
-})

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/util/propertyHelper.ts

@@ -1,37 +0,0 @@
-import { hierarchy } from "d3-hierarchy"
-import { AttributeTypes, BlacklistItem, BlacklistType, CodeMapNode } from "../../../../../codeCharta.model"
-import { DownloadableSetting } from "../../../../../util/fileDownloader"
-
-export type DownloadableProperty = {
-	name: DownloadableSetting
-	amount: number
-	isSelected: boolean
-	isDisabled: boolean
-}
-
-export const getDownloadableProperty = (name: DownloadableSetting, amount: number): DownloadableProperty => ({
-	name,
-	amount,
-	isSelected: amount > 0,
-	isDisabled: amount === 0
-})
-
-export const getAmountOfNodes = (unifiedMapNode: CodeMapNode) => {
-	let amountOfNodes = 0
-	hierarchy(unifiedMapNode).each(() => amountOfNodes++)
-	return amountOfNodes
-}
-
-export const getAmountOfAttributeTypes = (attributeTypes: AttributeTypes) =>
-	(attributeTypes.nodes ? Object.keys(attributeTypes.nodes).length : 0) +
-	(attributeTypes.edges ? Object.keys(attributeTypes.edges).length : 0)
-
-export const getFilteredBlacklistLength = (blacklist: BlacklistItem[], blacklistType: BlacklistType) => {
-	let count = 0
-	for (const entry of blacklist) {
-		if (entry.type === blacklistType) {
-			count++
-		}
-	}
-	return count
-}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.html

@@ -1,3 +0,0 @@
-<button mat-button (click)="showGlobalConfiguration()" title="Global Configuration">
-	<span>Global Configuration</span> <cc-action-icon [icon]="'fa fa-cog'"></cc-action-icon>
-</button>