codecharta-visualization 1.119.0 → 1.120.0

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../../../../material/material.module"
-import { RangeSliderComponent } from "./rangeSlider.component"
-import { RangeSliderLabelsComponent } from "./rangeSliderLabels/rangeSliderLabels.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule],
-	declarations: [RangeSliderComponent, RangeSliderLabelsComponent],
-	exports: [RangeSliderComponent]
-})
-export class RangeSliderModule {}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.html

@@ -1,30 +0,0 @@
-<div #minLabel class="cc-range-slider-label" [style.left.px]="0" [style.visibility]="hideMinLabel ? 'hidden' : 'visible'">
-	{{ minValue }}
-</div>
-<div
-	#currentLeftLabel
-	class="cc-range-slider-label"
-	[style.left.px]="currentLeftLabelLeftPosition"
-	[style.visibility]="doLeftRightLabelOverlap ? 'hidden' : 'visible'"
->
-	{{ leftValueLabel }}
-</div>
-<div
-	#currentRightLabel
-	class="cc-range-slider-label"
-	[style.left.px]="currentRightLabelLeftPosition"
-	[style.visibility]="doLeftRightLabelOverlap ? 'hidden' : 'visible'"
->
-	{{ rightValueLabel }}
-</div>
-<div
-	#combinedCurrentLeftRightLabel
-	class="cc-range-slider-label"
-	[style.left.px]="combinedCurrentLeftRightLabelLeftPosition"
-	[style.visibility]="doLeftRightLabelOverlap ? 'visible' : 'hidden'"
->
-	{{ leftValueLabel }} - {{ rightValueLabel }}
-</div>
-<div #maxLabel class="cc-range-slider-label" [style.right.px]="0" [style.visibility]="hideMaxLabel ? 'hidden' : 'visible'">
-	{{ maxValue }}
-</div>

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.scss

@@ -1,9 +0,0 @@
-cc-range-slider-labels {
-	.cc-range-slider-label {
-		position: absolute;
-		top: 0;
-		line-height: 24px;
-		font-size: 14px;
-		color: #aeaeae;
-	}
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.spec.ts

@@ -1,64 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
-import { RangeSliderModule } from "../rangeSlider.module"
-import { RangeSliderLabelsComponent } from "./rangeSliderLabels.component"
-
-describe("RangeSliderLabelsComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [RangeSliderModule]
-		})
-	})
-
-	const renderWithMocks = async (leftValue: number, rightValue: number) => {
-		const componentProperties = {
-			minValue: 0,
-			maxValue: 100,
-			leftValueLabel: leftValue,
-			rightValueLabel: rightValue,
-			sliderWidth: 100,
-			sliderRangePosition: { leftEnd: leftValue, rightStart: rightValue }
-		}
-		const { fixture, change } = await render(RangeSliderLabelsComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties
-		})
-
-		// just assume each label has a width of 10, so we can check that the labels are displayed correctly
-		for (const label of ["minLabel", "maxLabel", "currentLeftLabel", "currentRightLabel", "combinedCurrentLeftRightLabel"]) {
-			fixture.componentInstance[label].nativeElement.getBoundingClientRect = () => ({ width: 10 })
-		}
-		fixture.componentInstance.ngAfterViewChecked()
-		change(componentProperties)
-	}
-
-	it("should display labels for min, currentLeft, currentRight and max value", async () => {
-		await renderWithMocks(20, 70)
-
-		expect(screen.queryByText("0").style.visibility).toBe("visible")
-		expect(screen.queryByText("20").style.visibility).toBe("visible")
-		expect(screen.queryByText("70").style.visibility).toBe("visible")
-		expect(screen.queryByText("100").style.visibility).toBe("visible")
-		expect(screen.queryByText("20 - 70").style.visibility).toBe("hidden")
-	})
-
-	it("should display combined label for left and right value when they would overlap", async () => {
-		await renderWithMocks(50, 51)
-
-		expect(screen.queryByText("50").style.visibility).toBe("hidden")
-		expect(screen.queryByText("51").style.visibility).toBe("hidden")
-		expect(screen.queryByText("50 - 51").style.visibility).toBe("visible")
-	})
-
-	it("should hide min label when it would overlap with left label", async () => {
-		await renderWithMocks(1, 51)
-
-		expect(screen.queryByText("0").style.visibility).toBe("hidden")
-	})
-
-	it("should hide max label when it would overlap with right label", async () => {
-		await renderWithMocks(50, 99)
-
-		expect(screen.queryByText("100").style.visibility).toBe("hidden")
-	})
-})

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.ts

@@ -1,72 +0,0 @@
-import {
-	AfterViewChecked,
-	ChangeDetectionStrategy,
-	ChangeDetectorRef,
-	Component,
-	ElementRef,
-	Input,
-	ViewChild,
-	ViewEncapsulation
-} from "@angular/core"
-import { SliderRangePosition } from "../utils/SliderRangePosition"
-
-const minDistanceBetweenLabels = 4
-
-@Component({
-	selector: "cc-range-slider-labels",
-	templateUrl: "./rangeSliderLabels.component.html",
-	styleUrls: ["./rangeSliderLabels.component.scss"],
-	encapsulation: ViewEncapsulation.None,
-	changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class RangeSliderLabelsComponent implements AfterViewChecked {
-	@Input() minValue: number
-	@Input() maxValue: number
-	@Input() leftValueLabel: number
-	@Input() rightValueLabel: number
-	@Input() sliderRangePosition: SliderRangePosition
-	@Input() sliderWidth: number
-
-	@ViewChild("minLabel") minLabel: ElementRef<HTMLDivElement>
-	@ViewChild("maxLabel") maxLabel: ElementRef<HTMLDivElement>
-	@ViewChild("currentLeftLabel") currentLeftLabel: ElementRef<HTMLDivElement>
-	@ViewChild("currentRightLabel") currentRightLabel: ElementRef<HTMLDivElement>
-	@ViewChild("combinedCurrentLeftRightLabel") combinedCurrentLeftRightLabel: ElementRef<HTMLDivElement>
-
-	hideMinLabel = false
-	hideMaxLabel = false
-	doLeftRightLabelOverlap = false
-	currentLeftLabelLeftPosition: number
-	leftLabel: number
-	currentRightLabelLeftPosition: number
-	rightLabel: number
-	combinedCurrentLeftRightLabelLeftPosition: number
-
-	constructor(private changeDetector: ChangeDetectorRef) {}
-
-	ngAfterViewChecked(): void {
-		this.updateLabelDisplays()
-	}
-
-	private updateLabelDisplays() {
-		const minLabelRightPosition = this.minLabel.nativeElement.getBoundingClientRect().width
-		const currentLeftLabelWidth = this.currentLeftLabel.nativeElement.getBoundingClientRect().width
-		this.currentLeftLabelLeftPosition = this.sliderRangePosition.leftEnd - currentLeftLabelWidth / 2
-
-		const currentRightLabelWidth = this.currentRightLabel.nativeElement.getBoundingClientRect().width
-		const maxLabelLeftPosition = this.sliderWidth - this.maxLabel.nativeElement.getBoundingClientRect().width
-		this.currentRightLabelLeftPosition = this.sliderRangePosition.rightStart - currentRightLabelWidth / 2
-
-		this.hideMinLabel = this.currentLeftLabelLeftPosition <= minLabelRightPosition + minDistanceBetweenLabels
-		this.hideMaxLabel = this.currentRightLabelLeftPosition + currentRightLabelWidth + minDistanceBetweenLabels >= maxLabelLeftPosition
-
-		const currentLeftLabelRightPosition = this.currentLeftLabelLeftPosition + currentLeftLabelWidth
-		this.doLeftRightLabelOverlap = currentLeftLabelRightPosition + minDistanceBetweenLabels >= this.currentRightLabelLeftPosition
-
-		const middleBetweenLeftRight = (currentLeftLabelRightPosition + this.currentRightLabelLeftPosition) / 2
-		const combinedCurrentLeftRightLabelWidth = this.combinedCurrentLeftRightLabel.nativeElement.getBoundingClientRect().width
-		this.combinedCurrentLeftRightLabelLeftPosition = middleBetweenLeftRight - combinedCurrentLeftRightLabelWidth / 2
-
-		this.changeDetector.detectChanges()
-	}
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/utils/SliderRangePosition.spec.ts

@@ -1,160 +0,0 @@
-import { calculateSliderRangePosition, thumbPosition2Value, updateLeftThumb, updateRightThumb } from "./SliderRangePosition"
-
-describe("SliderRangePosition", () => {
-	it("should calculate correct slider positions", () => {
-		expect(
-			calculateSliderRangePosition({
-				minValue: 20,
-				maxValue: 120,
-				currentLeftValue: 40,
-				currentRightValue: 80,
-				sliderWidth: 100
-			})
-		).toEqual({
-			leftEnd: 20,
-			rightStart: 60
-		})
-	})
-
-	it("should put thumbs at right end, when min value is equal to max value", () => {
-		expect(
-			calculateSliderRangePosition({
-				minValue: 0,
-				maxValue: 0,
-				currentLeftValue: 0,
-				currentRightValue: 0,
-				sliderWidth: 100
-			})
-		).toEqual({
-			leftEnd: 100,
-			rightStart: 100
-		})
-	})
-
-	it("should calculate min value when thumbX is at beginning of slider", () => {
-		expect(
-			thumbPosition2Value({
-				thumbX: 0,
-				minValue: 20,
-				maxValue: 120,
-				sliderWidth: 100
-			})
-		).toBe(20)
-	})
-
-	it("should calculate max value when thumbX is at end of slider", () => {
-		expect(
-			thumbPosition2Value({
-				thumbX: 100,
-				minValue: 20,
-				maxValue: 120,
-				sliderWidth: 100
-			})
-		).toBe(120)
-	})
-
-	it("should calculate middle value when thumbX is at middle of slider", () => {
-		expect(
-			thumbPosition2Value({
-				thumbX: 50,
-				minValue: 20,
-				maxValue: 120,
-				sliderWidth: 100
-			})
-		).toBe(70)
-	})
-
-	describe("updateLeftThumb", () => {
-		it("should calculate correct values", () => {
-			expect(
-				updateLeftThumb({
-					deltaX: 10,
-					thumbScreenX: 83,
-					thumbRadius: 7,
-					otherThumbScreenX: 100,
-					sliderBoundingClientRectX: 10,
-					sliderWidth: 100,
-					minValue: 0,
-					maxValue: 100
-				})
-			).toEqual({
-				updatedThumbX: 90,
-				upcomingValue: 90
-			})
-		})
-
-		it("should set updates smaller than min value to min value", () => {
-			expect(
-				updateLeftThumb({
-					deltaX: -81,
-					thumbScreenX: 83,
-					thumbRadius: 7,
-					otherThumbScreenX: 100,
-					sliderBoundingClientRectX: 10,
-					sliderWidth: 100,
-					minValue: 0,
-					maxValue: 100
-				})
-			).toEqual({
-				updatedThumbX: 0,
-				upcomingValue: 0
-			})
-		})
-
-		it("should set updates over right thumb to right thumb", () => {
-			expect(
-				updateLeftThumb({
-					deltaX: 10,
-					thumbScreenX: 83,
-					thumbRadius: 7,
-					otherThumbScreenX: 90,
-					sliderBoundingClientRectX: 10,
-					sliderWidth: 100,
-					minValue: 0,
-					maxValue: 100
-				})
-			).toEqual({
-				updatedThumbX: 87,
-				upcomingValue: 87
-			})
-		})
-	})
-
-	describe("updateRightThumb", () => {
-		it("should set updates bigger than max value to max value", () => {
-			expect(
-				updateRightThumb({
-					deltaX: 40,
-					thumbScreenX: 83,
-					thumbRadius: 7,
-					otherThumbScreenX: 20,
-					sliderBoundingClientRectX: 10,
-					sliderWidth: 100,
-					minValue: 0,
-					maxValue: 100
-				})
-			).toEqual({
-				updatedThumbX: 100,
-				upcomingValue: 100
-			})
-		})
-
-		it("should set updates over left thumb to left thumb", () => {
-			expect(
-				updateRightThumb({
-					deltaX: -70,
-					thumbScreenX: 83,
-					thumbRadius: 7,
-					otherThumbScreenX: 15,
-					sliderBoundingClientRectX: 10,
-					sliderWidth: 100,
-					minValue: 0,
-					maxValue: 100
-				})
-			).toEqual({
-				updatedThumbX: 12,
-				upcomingValue: 12
-			})
-		})
-	})
-})

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/utils/SliderRangePosition.ts

@@ -1,142 +0,0 @@
-export type SliderRangePosition = {
-	leftEnd: number
-	rightStart: number
-}
-
-export type CalculateSliderRangePositionArgument = {
-	minValue: number
-	maxValue: number
-	currentLeftValue: number
-	currentRightValue: number
-	sliderWidth: number
-}
-
-export const calculateSliderRangePosition = ({
-	minValue,
-	maxValue,
-	currentLeftValue,
-	currentRightValue,
-	sliderWidth
-}: CalculateSliderRangePositionArgument): SliderRangePosition => {
-	const totalFraction = maxValue - minValue
-	if (totalFraction <= 0) {
-		return { leftEnd: sliderWidth, rightStart: sliderWidth }
-	}
-
-	const leftFraction = (currentLeftValue - minValue) / totalFraction
-	const rightFraction = (currentRightValue - minValue) / totalFraction
-	const leftThumbPosition = leftFraction * sliderWidth
-	const rightThumbPosition = rightFraction * sliderWidth
-	return { leftEnd: leftThumbPosition, rightStart: rightThumbPosition }
-}
-
-type ThumbPosition2ValueArgument = {
-	thumbX: number
-	minValue: number
-	maxValue: number
-	sliderWidth: number
-}
-
-export const thumbPosition2Value = ({ thumbX, minValue, maxValue, sliderWidth }: ThumbPosition2ValueArgument) => {
-	const valuePerPixel = (maxValue - minValue) / sliderWidth
-	const value = minValue + thumbX * valuePerPixel
-	return Math.round(value)
-}
-
-type UpdateThumbXArgument = {
-	deltaX: number
-	thumbScreenX: number
-	thumbRadius: number
-	otherThumbScreenX: number
-	sliderBoundingClientRectX: number
-	sliderWidth: number
-	minValue: number
-	maxValue: number
-}
-
-export const updateRightThumb = ({
-	deltaX,
-	thumbScreenX,
-	thumbRadius,
-	otherThumbScreenX,
-	sliderBoundingClientRectX,
-	sliderWidth,
-	minValue,
-	maxValue
-}: UpdateThumbXArgument) => {
-	let newRightThumbScreenX = thumbScreenX + deltaX
-
-	if (newRightThumbScreenX > sliderBoundingClientRectX + sliderWidth - thumbRadius) {
-		newRightThumbScreenX = sliderBoundingClientRectX + sliderWidth - thumbRadius
-	}
-	if (newRightThumbScreenX < otherThumbScreenX) {
-		newRightThumbScreenX = otherThumbScreenX
-	}
-
-	return calculateUpdate({
-		newThumbScreenX: newRightThumbScreenX,
-		sliderBoundingClientRectX,
-		thumbRadius,
-		sliderWidth,
-		minValue,
-		maxValue
-	})
-}
-
-export const updateLeftThumb = ({
-	deltaX,
-	thumbScreenX,
-	thumbRadius,
-	otherThumbScreenX,
-	sliderBoundingClientRectX,
-	sliderWidth,
-	minValue,
-	maxValue
-}: UpdateThumbXArgument) => {
-	let newLeftThumbScreenX = thumbScreenX + deltaX
-
-	if (newLeftThumbScreenX < sliderBoundingClientRectX - thumbRadius) {
-		newLeftThumbScreenX = sliderBoundingClientRectX - thumbRadius
-	}
-	if (newLeftThumbScreenX > otherThumbScreenX) {
-		newLeftThumbScreenX = otherThumbScreenX
-	}
-
-	return calculateUpdate({
-		newThumbScreenX: newLeftThumbScreenX,
-		sliderBoundingClientRectX,
-		thumbRadius,
-		sliderWidth,
-		minValue,
-		maxValue
-	})
-}
-
-type CalculateUpdateArgument = {
-	newThumbScreenX: number
-	sliderBoundingClientRectX: number
-	thumbRadius: number
-	sliderWidth: number
-	minValue: number
-	maxValue: number
-}
-const calculateUpdate = ({
-	newThumbScreenX,
-	sliderBoundingClientRectX,
-	thumbRadius,
-	sliderWidth,
-	minValue,
-	maxValue
-}: CalculateUpdateArgument) => {
-	// own screen.x + thumb radius - sliderStart, so thumb is centered on its value
-	const updatedThumbX = newThumbScreenX - sliderBoundingClientRectX + thumbRadius
-	return {
-		updatedThumbX,
-		upcomingValue: thumbPosition2Value({
-			thumbX: updatedThumbX,
-			minValue,
-			maxValue,
-			sliderWidth
-		})
-	}
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/selectors/metricColorRangeSliderColors.selector.ts

@@ -1,9 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { isDeltaStateSelector } from "../../../../../state/selectors/isDeltaState.selector"
-import { mapColorsSelector } from "../../../../../state/store/appSettings/mapColors/mapColors.selector"
-
-export const metricColorRangeSliderColorsSelector = createSelector(mapColorsSelector, isDeltaStateSelector, mapColors => ({
-	leftColor: mapColors.positive,
-	middleColor: mapColors.neutral,
-	rightColor: mapColors.negative
-}))

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/selectors/metricColorRangeSliderValues.selector.ts

@@ -1,14 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { selectedColorMetricDataSelector } from "../../../../../state/selectors/accumulatedData/metricData/selectedColorMetricData.selector"
-import { colorRangeSelector } from "../../../../../state/store/dynamicSettings/colorRange/colorRange.selector"
-
-export const metricColorRangeSliderValuesSelector = createSelector(
-	selectedColorMetricDataSelector,
-	colorRangeSelector,
-	(colorMetricData, colorRange) => ({
-		min: colorMetricData.minValue,
-		max: colorMetricData.maxValue,
-		from: colorRange.from,
-		to: colorRange.to
-	})
-)

package/app/codeCharta/ui/ribbonBar/edgeMetricChooser/edgeChooser.e2e.ts

@@ -1,40 +0,0 @@
-import { goto } from "../../../../puppeteer.helper"
-import { EdgeChooserPageObject } from "./edgeChooser.po"
-import { MapTreeViewLevelPageObject } from "../../searchPanel/mapTreeView/mapTreeView.level.po"
-import { SearchPanelPageObject } from "../../searchPanel/searchPanel.po"
-import { UploadFileButtonPageObject } from "../../toolBar/uploadFilesButton/uploadFilesButton.po"
-
-describe("MapTreeViewLevel", () => {
-	let edgeChooser: EdgeChooserPageObject
-	let uploadFilesButton: UploadFileButtonPageObject
-	let mapTreeViewLevel: MapTreeViewLevelPageObject
-	let searchPanel: SearchPanelPageObject
-
-	beforeEach(async () => {
-		edgeChooser = new EdgeChooserPageObject()
-		uploadFilesButton = new UploadFileButtonPageObject()
-		mapTreeViewLevel = new MapTreeViewLevelPageObject()
-		searchPanel = new SearchPanelPageObject()
-
-		await goto()
-	})
-
-	describe("EdgeChooser", () => {
-		it("should update metrics correctly after switching to a map with different metrics", async () => {
-			await uploadFilesButton.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
-			await edgeChooser.open()
-			const metrics = await edgeChooser.getMetrics()
-
-			expect(metrics).toHaveLength(2)
-		})
-
-		it("should not display the amount of incoming and outgoing edges of buildings for the none metric", async () => {
-			await searchPanel.toggle()
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
-			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
-			await mapTreeViewLevel.hoverNode("/root/sample1.cc.json/ParentLeaf/smallLeaf.html")
-
-			expect(await edgeChooser.isEdgeCountAvailable()).toBeFalsy()
-		})
-	})
-})

package/app/codeCharta/ui/ribbonBar/edgeMetricChooser/edgeChooser.po.ts

@@ -1,34 +0,0 @@
-import { EdgeMetricCount } from "../../../codeCharta.model"
-import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
-
-export class EdgeChooserPageObject {
-	async open() {
-		await clickButtonOnPageElement("cc-edge-metric-chooser mat-select")
-		await page.waitForSelector("mat-option")
-	}
-
-	async getMetrics() {
-		await page.waitForSelector("mat-option")
-		return page.$$eval("mat-option", metrics => metrics.map(x => x.textContent))
-	}
-
-	async isEdgeCountAvailable() {
-		const innerText = await this.getEdgeCountInnerText()
-
-		// Check if the text contains a number.
-		return /\d/.test(innerText)
-	}
-
-	async getAmountOfEdges(): Promise<EdgeMetricCount> {
-		const innerText = await this.getEdgeCountInnerText()
-		const edgeCount = innerText.split("/")
-
-		return { incoming: Number(edgeCount[0]), outgoing: Number(edgeCount[1]) }
-	}
-
-	private async getEdgeCountInnerText() {
-		const edgeCountSelector = "cc-edge-metric-chooser [hoveredInformation]"
-		await page.waitForSelector(edgeCountSelector)
-		return page.$eval(edgeCountSelector, element => element["innerText"])
-	}
-}

package/app/codeCharta/ui/ribbonBar/edgeMetricChooser/edgeMetricChooser.component.html

@@ -1,20 +0,0 @@
-<i class="fa fa-exchange"></i>
-
-<cc-metric-chooser
-	*ngIf="edgeMetric$ | async; let edgeMetric"
-	[class.is-edge-metric-disabled]="!(isEdgeMetricVisible$ | async)"
-	[selectedMetricName]="edgeMetric"
-	[searchPlaceholder]="'Edge Metric (highest value)'"
-	[handleMetricChanged]="handleEdgeMetricChanged"
-	[type]="'edge'"
-	title="Change edge metric"
->
-	<div hoveredInformation class="cc-metric-chooser-hovered-container">
-		<div class="metric-value" *ngIf="hoveredEdgeValue$ | async; let hoveredEdgeValue">
-			<div class="rounded-box">
-				<cc-metric-chooser-type-hovered [attributeType]="'edges'" [metricFor]="'edgeMetric'"></cc-metric-chooser-type-hovered>
-				{{ hoveredEdgeValue }}
-			</div>
-		</div>
-	</div>
-</cc-metric-chooser>

package/app/codeCharta/ui/ribbonBar/edgeMetricChooser/edgeMetricChooser.component.scss

@@ -1,3 +0,0 @@
-cc-edge-metric-chooser cc-metric-chooser.is-edge-metric-disabled .mat-mdc-select-value {
-	color: #808080;
-}