codecharta-visualization 1.119.1 → 1.120.0

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

@@ -1,11 +0,0 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
-import { MAT_DIALOG_DATA } from "@angular/material/dialog"
-
-@Component({
-	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/dialogs.ts

@@ -1,4 +0,0 @@
-import { ErrorDialogComponent } from "./errorDialog/errorDialog.component"
-import { ConfirmationDialogComponent } from "./confirmationDialog/confirmationDialog.component"
-
-export const dialogs = [ErrorDialogComponent, ConfirmationDialogComponent]

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

@@ -1,7 +0,0 @@
-<h1 mat-dialog-title>{{ data.title }}</h1>
-
-<div mat-dialog-content [innerHTML]="data.message"></div>
-
-<div mat-dialog-actions align="end">
-	<button mat-button mat-dialog-close>OK</button>
-</div>

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

@@ -1,13 +0,0 @@
-import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
-
-export class DialogErrorPageObject {
-	async getMessage() {
-		await page.waitForSelector(".mat-mdc-dialog-content")
-		return page.$eval(".mat-mdc-dialog-content", element => element["innerText"])
-	}
-
-	async clickOk() {
-		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,10 +0,0 @@
-import { Component, Inject, ViewEncapsulation } from "@angular/core"
-import { MAT_DIALOG_DATA } from "@angular/material/dialog"
-
-@Component({
-	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.html

@@ -1 +0,0 @@
-<cc-action-icon [icon]="'fa fa-cube'" title="Download stl file for 3D printing" (click)="downloadStlFile()"></cc-action-icon>

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

@@ -1,66 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { State } from "@ngrx/store"
-import { Export3DMapButtonComponent } from "./export3DMapButton.component"
-import { fireEvent, render, screen } from "@testing-library/angular"
-import { Export3DMapButtonModule } from "./export3DMapButton.module"
-import { FileDownloader } from "../../util/fileDownloader"
-import { stubDate } from "../../../../mocks/dateMock.helper"
-import { FILE_STATES } from "../../util/dataMocks"
-import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
-
-stubDate(new Date(Date.UTC(2018, 11, 14, 9, 39)))
-const newDate = "2018-12-14_09-39"
-
-const mockFileStates = FILE_STATES
-
-jest.mock("../../state/store/files/files.selector", () => ({
-	filesSelector: () => mockFileStates
-}))
-
-jest.mock("../../state/selectors/accumulatedData/accumulatedData.selector", () => ({
-	accumulatedDataSelector: () => ({
-		unifiedFileMeta: { fileName: "sample" }
-	})
-}))
-
-jest.mock("three/examples/jsm/exporters/STLExporter", () => ({
-	STLExporter: jest.fn(() => ({ parse: jest.fn().mockImplementation(() => null) }))
-}))
-
-describe("Export3DMapButtonComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [Export3DMapButtonModule],
-			providers: [
-				{ provide: ThreeSceneService, useValue: { getMapMesh: () => ({ getThreeMesh: jest.fn() }) } },
-				{ provide: State, useValue: { getValue: () => ({}) } }
-			]
-		})
-	})
-
-	it("should start download on click", async function () {
-		const { fixture } = await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
-		// mock download and therefore only verify the Angular binding.
-		// A better approach would be, if the component would only fire an action
-		// and an https://ngrx.io/guide/effects would do the side effect and logic.
-		// Then we could test the logic in the effect without mocking a lot
-		// and the component wouldn't need to know anything about store values
-		const mockedDownload = jest.spyOn(fixture.componentInstance, "downloadStlFile").mockImplementation(() => null)
-
-		const downloadButton = screen.getByRole("button")
-		expect(downloadButton).not.toBe(null)
-
-		fireEvent.click(downloadButton)
-		expect(mockedDownload).toHaveBeenCalledTimes(1)
-	})
-	it("should download STL file with the right file name", async function () {
-		await render(Export3DMapButtonComponent, { excludeComponentDeclaration: true })
-		const downloadButton = screen.getByRole("button")
-
-		const downloadData = jest.spyOn(FileDownloader, "downloadData").mockImplementation(() => null)
-
-		fireEvent.click(downloadButton)
-
-		expect(downloadData).toHaveBeenCalledWith(null, `sample_${newDate}.stl`)
-	})
-})

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

@@ -1,30 +0,0 @@
-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"
-import { FileNameHelper } from "../../util/fileNameHelper"
-import { isDeltaState } from "../../model/files/files.helper"
-import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
-import { filesSelector } from "../../state/store/files/files.selector"
-import { Mesh } from "three"
-import { State } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-
-@Component({
-	selector: "cc-export-threed-map-button",
-	templateUrl: "./export3DMapButton.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class Export3DMapButtonComponent {
-	private exporter = new STLExporter()
-	constructor(private state: State<CcState>, private threeSceneService: ThreeSceneService) {}
-
-	downloadStlFile() {
-		const files = filesSelector(this.state.getValue())
-		const fileName = accumulatedDataSelector(this.state.getValue()).unifiedFileMeta?.fileName
-		const threeMesh: Mesh = this.threeSceneService.getMapMesh().getThreeMesh()
-		const exportedBinaryFile = this.exporter.parse(threeMesh, { binary: true })
-		const downloadFileName = `${FileNameHelper.getNewFileName(fileName, isDeltaState(files))}.stl`
-		FileDownloader.downloadData(exportedBinaryFile, downloadFileName)
-	}
-}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { Export3DMapButtonComponent } from "./export3DMapButton.component"
-import { ActionIconModule } from "../actionIcon/actionIcon.module"
-
-@NgModule({
-	imports: [CommonModule, ActionIconModule],
-	declarations: [Export3DMapButtonComponent],
-	exports: [Export3DMapButtonComponent]
-})
-export class Export3DMapButtonModule {}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { DistributionMetricChooserComponent } from "./distributionMetricChooser.component"
-import { MetricChooserModule } from "../../metricChooser/metricChooser.module"
-
-@NgModule({
-	imports: [CommonModule, MetricChooserModule],
-	declarations: [DistributionMetricChooserComponent],
-	exports: [DistributionMetricChooserComponent]
-})
-export class DistributionMetricChooserModule {}

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

@@ -1,7 +0,0 @@
-<i class="fa fa-pie-chart"></i>
-
-<cc-metric-chooser
-	[selectedMetricName]="distributionMetric$ | async"
-	[searchPlaceholder]="'Distribution Metric (highest value)'"
-	[handleMetricChanged]="handleDistributionMetricChanged"
-></cc-metric-chooser>

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

@@ -1,20 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-import { setDistributionMetric } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.actions"
-import { distributionMetricSelector } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
-
-@Component({
-	selector: "cc-distribution-metric-chooser",
-	templateUrl: "./distributionMetricChooser.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class DistributionMetricChooserComponent {
-	distributionMetric$ = this.store.select(distributionMetricSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	handleDistributionMetricChanged(value: string) {
-		this.store.dispatch(setDistributionMetric({ value }))
-	}
-}

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

@@ -1,40 +0,0 @@
-<div class="cc-distribution">
-	<cc-distribution-metric-chooser title="Distribution metric"></cc-distribution-metric-chooser>
-
-	<div class="cc-bar">
-		<span
-			*ngFor="let item of metricDistribution"
-			[style.width]="item.relativeMetricValue + '%'"
-			[style.background]="item.color"
-			class="cc-bar-section"
-			(click)="toggleShowAbsoluteValues()"
-		>
-			<div
-				class="cc-bar-section-text"
-				(mouseover)="onHoverFileExtensionBar(item.fileExtension)"
-				(mouseleave)="onUnhoverFileExtensionBar()"
-				title="{{
-					item.fileExtension.toString() +
-						' ' +
-						(showAbsoluteValues ? item.absoluteMetricValue.toFixed(0) : item.relativeMetricValue.toFixed(2) + '%')
-				}}"
-			>
-				{{ item.relativeMetricValue >= item.fileExtension.length / 2 + 1 ? item.fileExtension : "" }}
-				{{ showAbsoluteValues ? item.absoluteMetricValue.toLocaleString() : item.relativeMetricValue.toFixed(2) + "%" }}
-			</div>
-		</span>
-	</div>
-
-	<button class="cc-show-details-button" (click)="toggleShowDetails()">
-		<i class="fa {{ showDetails ? 'fa-caret-up' : 'fa-caret-down' }}"></i>
-	</button>
-</div>
-
-<div class="cc-distribution-details" [class.cc-hidden]="!showDetails" (click)="toggleShowAbsoluteValues()">
-	<div class="cc-distribution-details-entry" *ngFor="let item of metricDistribution">
-		<span class="cc-dot" [style.background]="item.color"></span>{{ item.fileExtension }} :
-		<span class="cc-detail-metric-value">
-			{{ showAbsoluteValues ? item.absoluteMetricValue.toLocaleString() : item.relativeMetricValue.toFixed(2) + "%" }}
-		</span>
-	</div>
-</div>

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

@@ -1,88 +0,0 @@
-cc-file-extension-bar {
-	z-index: 30;
-	background-color: white;
-
-	.cc-distribution {
-		display: flex;
-		height: 17px;
-
-		cc-distribution-metric-chooser {
-			width: 210px;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-			gap: 6px;
-			padding-left: 6px;
-
-			.mat-mdc-select {
-				border-bottom: 0;
-			}
-		}
-
-		.cc-bar {
-			flex: 1;
-
-			.cc-bar-section {
-				height: 100%;
-				display: inline-block;
-				overflow: hidden;
-				color: white;
-				text-align: center;
-				cursor: pointer;
-				outline: none;
-				&:not(:last-child) {
-					border-right: 1px solid white;
-				}
-
-				.cc-bar-section-text {
-					font-size: 10px;
-					margin: 2px 0 2px 0;
-					white-space: nowrap;
-					padding: 0 10px 0 10px;
-					text-overflow: "";
-				}
-			}
-		}
-	}
-
-	.cc-show-details-button {
-		line-height: 10px;
-		width: 45px;
-		margin: 0;
-		padding: 0;
-		background-color: rgba(230, 230, 230, 0.96);
-	}
-
-	.cc-distribution-details {
-		border-top: 1px solid #cdcdcd;
-		height: 25px;
-		transition: all linear 0.2s;
-		&.cc-hidden {
-			height: 0;
-			border-top: 0 solid #cdcdcd;
-		}
-
-		&:hover {
-			cursor: pointer;
-		}
-
-		.cc-distribution-details-entry {
-			display: inline-block;
-			font-size: 15px;
-			color: black;
-			margin: 3px 0 3px 30px;
-
-			.cc-dot {
-				height: 10px;
-				width: 10px;
-				border-radius: 50%;
-				display: inline-block;
-				margin-right: 8px;
-			}
-
-			.cc-detail-metric-value {
-				color: gray;
-			}
-		}
-	}
-}

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

@@ -1,80 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { provideMockStore } from "@ngrx/store/testing"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { CODE_MAP_BUILDING_TS_NODE } from "../../util/dataMocks"
-import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
-import { FileExtensionBarComponent } from "./fileExtensionBar.component"
-import { FileExtensionBarModule } from "./fileExtensionBar.module"
-import { metricDistributionSelector } from "./selectors/metricDistribution.selector"
-import { distributionMetricSelector } from "../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
-import { defaultDistributionMetric } from "../../state/store/dynamicSettings/distributionMetric/distributionMetric.reducer"
-import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
-import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
-
-describe("fileExtensionBarComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [FileExtensionBarModule],
-			providers: [
-				{
-					provide: ThreeSceneService,
-					useValue: {
-						getMapMesh: jest.fn().mockReturnValue({
-							getMeshDescription: jest.fn().mockReturnValue({
-								buildings: [CODE_MAP_BUILDING_TS_NODE]
-							})
-						}),
-						addBuildingToHighlightingList: jest.fn(),
-						highlightBuildings: jest.fn()
-					}
-				},
-				provideMockStore({
-					selectors: [
-						{
-							selector: metricDistributionSelector,
-							value: [
-								{
-									fileExtension: "ts",
-									absoluteMetricValue: 1120,
-									relativeMetricValue: 100,
-									color: "hsl(111, 40%, 50%)"
-								}
-							]
-						},
-						{ selector: distributionMetricSelector, value: defaultDistributionMetric },
-						{ selector: metricDataSelector, value: { nodeMetricData: [] } },
-						{ selector: attributeDescriptorsSelector, value: {} }
-					]
-				})
-			]
-		})
-	})
-
-	it("should toggle displayed metric relative / absolute values on click", async () => {
-		await render(FileExtensionBarComponent, { excludeComponentDeclaration: true })
-		expect(screen.getByText("ts 100.00%")).toBeTruthy()
-		expect(screen.queryByText("ts 1,120")).toBe(null)
-
-		await userEvent.click(screen.getByText("ts 100.00%"))
-		expect(screen.queryByText("ts 100%")).toBe(null)
-		expect(screen.getByText("ts 1,120")).toBeTruthy()
-	})
-
-	it("should show details on click of details button", async () => {
-		const { container } = await render(FileExtensionBarComponent, { excludeComponentDeclaration: true })
-		expect(container.querySelector(".cc-distribution-details").classList).toContain("cc-hidden")
-
-		await userEvent.click(container.querySelector(".cc-show-details-button"))
-		expect(container.querySelector(".cc-distribution-details").classList).not.toContain("cc-hidden")
-	})
-
-	it("should highlight buildings on hover", async () => {
-		await render(FileExtensionBarComponent, { excludeComponentDeclaration: true })
-		await userEvent.hover(screen.getByText("ts 100.00%"))
-
-		const threeSceneService = TestBed.inject<ThreeSceneService>(ThreeSceneService)
-		expect(threeSceneService.addBuildingToHighlightingList).toHaveBeenCalledWith(CODE_MAP_BUILDING_TS_NODE)
-		expect(threeSceneService.highlightBuildings).toHaveBeenCalled()
-	})
-})

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

@@ -1,59 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { MetricDistribution, FileExtensionCalculator } from "./selectors/fileExtensionCalculator"
-import { metricDistributionSelector } from "./selectors/metricDistribution.selector"
-import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../codeCharta.model"
-
-@Component({
-	selector: "cc-file-extension-bar",
-	templateUrl: "./fileExtensionBar.component.html",
-	styleUrls: ["./fileExtensionBar.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class FileExtensionBarComponent {
-	showAbsoluteValues = false
-	showDetails = false
-	metricDistribution: MetricDistribution[]
-
-	constructor(private store: Store<CcState>, private threeSceneService: ThreeSceneService) {
-		this.store.select(metricDistributionSelector).subscribe(metricDistribution => {
-			this.metricDistribution = metricDistribution
-		})
-	}
-
-	onHoverFileExtensionBar(hoveredExtension: string) {
-		const visibleFileExtensions = new Set()
-		for (const metric of this.metricDistribution) {
-			if (metric.fileExtension !== "other") {
-				visibleFileExtensions.add(metric.fileExtension)
-			}
-		}
-
-		for (const building of this.threeSceneService.getMapMesh().getMeshDescription().buildings) {
-			if (building.node.isLeaf) {
-				const buildingExtension = FileExtensionCalculator.estimateFileExtension(building.node.name)
-				if (
-					buildingExtension === hoveredExtension ||
-					(hoveredExtension === "other" && !visibleFileExtensions.has(buildingExtension))
-				) {
-					this.threeSceneService.addBuildingToHighlightingList(building)
-				}
-			}
-		}
-
-		this.threeSceneService.highlightBuildings()
-	}
-
-	onUnhoverFileExtensionBar() {
-		this.threeSceneService.clearHighlight()
-	}
-
-	toggleShowDetails() {
-		this.showDetails = !this.showDetails
-	}
-
-	toggleShowAbsoluteValues() {
-		this.showAbsoluteValues = !this.showAbsoluteValues
-	}
-}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { DistributionMetricChooserModule } from "./distributionMetricChooser/distributionMetricChooser..module"
-import { FileExtensionBarComponent } from "./fileExtensionBar.component"
-
-@NgModule({
-	imports: [CommonModule, DistributionMetricChooserModule],
-	declarations: [FileExtensionBarComponent],
-	exports: [FileExtensionBarComponent]
-})
-export class FileExtensionBarModule {}