codecharta-visualization 1.117.0 → 1.119.0

package/app/codeCharta/ui/ribbonBar/colorMetricChooser/colorMetricChooser.component.spec.ts

@@ -3,12 +3,15 @@ import { render, screen } from "@testing-library/angular"
 import { expect } from "@jest/globals"
 import userEvent from "@testing-library/user-event"
 import { ColorMetricChooserComponent } from "./colorMetricChooser.component"
-import { ColorMetricChooserModule } from "./heightMetricChooser.module"
+import { ColorMetricChooserModule } from "./colorMetricChooser.module"
 import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { metricDataSelector } from "../../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
 import { isColorMetricLinkedToHeightMetricSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.selector"
 import { colorMetricSelector } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { setColorMetric } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.actions"
+import { getLastAction } from "../../../util/testUtils/store.utils"
 
 describe("colorMetricChooserComponent", () => {
 	beforeEach(() => {
@@ -28,7 +31,8 @@ describe("colorMetricChooserComponent", () => {
 						},
 						{ selector: colorMetricSelector, value: "aMetric" },
 						{ selector: hoveredNodeSelector, value: null },
-						{ selector: isColorMetricLinkedToHeightMetricSelector, value: false }
+						{ selector: isColorMetricLinkedToHeightMetricSelector, value: false },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				})
 			]
@@ -37,19 +41,27 @@ describe("colorMetricChooserComponent", () => {
 
 	it("should be a select for color metric", async () => {
 		const nonDisabledIconColor = "color: rgb(68, 68, 68);"
-		const { container } = await render(ColorMetricChooserComponent, { excludeComponentDeclaration: true })
+		const { container, detectChanges } = await render(ColorMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		expect(screen.getByRole("combobox").getAttribute("aria-disabled")).toBe("false")
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		expect(screen.getByPlaceholderText("Color Metric (highest value)")).not.toBe(null)
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")
 
+		const store = TestBed.inject(MockStore)
 		await userEvent.click(options[1])
-		expect(screen.queryByText("aMetric (1)")).toBe(null)
-		expect(screen.queryByText("bMetric (2)")).not.toBe(null)
+
+		expect(await getLastAction(store)).toEqual(setColorMetric({ value: "bMetric" }))
+		store.overrideSelector(colorMetricSelector, "bMetric")
+		store.refreshState()
+		detectChanges()
+
+		expect(screen.queryByText("aMetric")).toBe(null)
+		expect(screen.queryByText("bMetric")).not.toBe(null)
+		expect(container.querySelector("cc-metric-chooser").getAttribute("title")).toBe("Change color metric")
 		expect(container.querySelector(".fa.fa-paint-brush").getAttribute("style")).toEqual(nonDisabledIconColor)
 	})
 
@@ -62,6 +74,7 @@ describe("colorMetricChooserComponent", () => {
 		detectChanges()
 
 		expect(screen.getByRole("combobox").getAttribute("aria-disabled")).toBe("true")
+		expect(container.querySelector("cc-metric-chooser").getAttribute("title")).toBe("Currently linked to height metric")
 		expect(container.querySelector(".fa.fa-paint-brush").getAttribute("style")).toEqual(disabledIconColor)
 	})
 })

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

@@ -7,6 +7,7 @@
 	[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">

package/app/codeCharta/ui/ribbonBar/edgeMetricChooser/edgeMetricChooser.component.spec.ts

@@ -9,6 +9,9 @@ import { metricDataSelector } from "../../../state/selectors/accumulatedData/met
 import { edgeMetricSelector } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 import { isEdgeMetricVisibleSelector } from "../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
 import { hoveredEdgeValueSelector } from "./hoveredEdgeValue.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getLastAction } from "../../../util/testUtils/store.utils"
+import { setEdgeMetric } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.actions"
 
 describe("edgeMetricChooserComponent", () => {
 	beforeEach(() => {
@@ -28,7 +31,8 @@ describe("edgeMetricChooserComponent", () => {
 						},
 						{ selector: edgeMetricSelector, value: "aMetric" },
 						{ selector: hoveredEdgeValueSelector, value: null },
-						{ selector: isEdgeMetricVisibleSelector, value: true }
+						{ selector: isEdgeMetricVisibleSelector, value: true },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				})
 			]
@@ -36,17 +40,23 @@ describe("edgeMetricChooserComponent", () => {
 	})
 
 	it("should be a select for edge metric", async () => {
-		await render(EdgeMetricChooserComponent, { excludeComponentDeclaration: true })
+		const { detectChanges } = await render(EdgeMetricChooserComponent, { excludeComponentDeclaration: true })
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		expect(screen.getByPlaceholderText("Edge Metric (highest value)")).not.toBe(null)
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")
 
+		const store = TestBed.inject(MockStore)
 		await userEvent.click(options[1])
-		expect(screen.queryByText("aMetric (1)")).toBe(null)
-		expect(screen.queryByText("bMetric (2)")).not.toBe(null)
+		expect(await getLastAction(store)).toEqual(setEdgeMetric({ value: "bMetric" }))
+		store.overrideSelector(edgeMetricSelector, "bMetric")
+		store.refreshState()
+		detectChanges()
+
+		expect(screen.queryByText("aMetric")).toBe(null)
+		expect(screen.queryByText("bMetric")).not.toBe(null)
 	})
 
 	it("should reflect edge metric's visibility in its class name", async () => {

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

@@ -4,6 +4,7 @@
 	[selectedMetricName]="heightMetric$ | async"
 	[searchPlaceholder]="'Height Metric (highest value)'"
 	[handleMetricChanged]="handleHeightMetricChanged"
+	title="Change height metric"
 >
 	<cc-metric-chooser-value-hovered hoveredInformation [metricFor]="'heightMetric'"></cc-metric-chooser-value-hovered>
 </cc-metric-chooser>

package/app/codeCharta/ui/ribbonBar/heightMetricChooser/heightMetricChooser.component.spec.ts

@@ -2,14 +2,19 @@ import { TestBed } from "@angular/core/testing"
 import { render, screen } from "@testing-library/angular"
 import { expect } from "@jest/globals"
 import userEvent from "@testing-library/user-event"
-import { HeightMetricChooserComponent } from "./areaMetricChooser.component"
+import { HeightMetricChooserComponent } from "./heightMetricChooser.component"
 import { HeightMetricChooserModule } from "./heightMetricChooser.module"
-import { provideMockStore } from "@ngrx/store/testing"
+import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { metricDataSelector } from "../../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { heightMetricSelector } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
 import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getLastAction } from "../../../util/testUtils/store.utils"
+import { setHeightMetric } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.actions"
 
 describe("heightMetricChooserComponent", () => {
+	let store: MockStore
+
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			imports: [HeightMetricChooserModule],
@@ -26,7 +31,8 @@ describe("heightMetricChooserComponent", () => {
 							}
 						},
 						{ selector: heightMetricSelector, value: "aMetric" },
-						{ selector: hoveredNodeSelector, value: null }
+						{ selector: hoveredNodeSelector, value: null },
+						{ selector: attributeDescriptorsSelector, value: {} }
 					]
 				})
 			]
@@ -34,16 +40,23 @@ describe("heightMetricChooserComponent", () => {
 	})
 
 	it("should be a select for height metric", async () => {
-		await render(HeightMetricChooserComponent, { excludeComponentDeclaration: true })
+		const { detectChanges } = await render(HeightMetricChooserComponent, { excludeComponentDeclaration: true })
+		store = TestBed.inject(MockStore)
 
-		await userEvent.click(await screen.findByText("aMetric (1)"))
+		await userEvent.click(await screen.findByText("aMetric"))
 		expect(screen.getByPlaceholderText("Height Metric (highest value)")).not.toBe(null)
+
 		const options = screen.queryAllByRole("option")
 		expect(options[0].textContent).toMatch("aMetric (1)")
 		expect(options[1].textContent).toMatch("bMetric (2)")
-
 		await userEvent.click(options[1])
-		expect(screen.queryByText("aMetric (1)")).toBe(null)
-		expect(screen.queryByText("bMetric (2)")).not.toBe(null)
+
+		expect(await getLastAction(store)).toEqual(setHeightMetric({ value: "bMetric" }))
+		store.overrideSelector(heightMetricSelector, "bMetric")
+		store.refreshState()
+		detectChanges()
+
+		expect(screen.queryByText("aMetric")).toBe(null)
+		expect(screen.queryByText("bMetric")).not.toBe(null)
 	})
 })

package/app/codeCharta/ui/ribbonBar/heightMetricChooser/heightMetricChooser.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 import { MetricChooserModule } from "../../metricChooser/metricChooser.module"
 import { MetricChooserValueHoveredModule } from "../../metricChooser/metricChooserValueHovered/metricChooserValueHovered.module"
-import { HeightMetricChooserComponent } from "./areaMetricChooser.component"
+import { HeightMetricChooserComponent } from "./heightMetricChooser.component"
 
 @NgModule({
 	imports: [CommonModule, MetricChooserModule, MetricChooserValueHoveredModule],

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

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core"
 import { RibbonBarComponent } from "./ribbonBar.component"
 import { AreaMetricChooserModule } from "./areaMetricChooser/areaMetricChooser.module"
 import { HeightMetricChooserModule } from "./heightMetricChooser/heightMetricChooser.module"
-import { ColorMetricChooserModule } from "./colorMetricChooser/heightMetricChooser.module"
+import { ColorMetricChooserModule } from "./colorMetricChooser/colorMetricChooser.module"
 import { EdgeMetricChooserModule } from "./edgeMetricChooser/edgeMetricChooser.module"
 import { ShowScenariosButtonModule } from "./showScenariosButton/showScenariosButton.module"
 import { EdgeSettingsPanelModule } from "./edgeSettingsPanel/edgeSettingsPanel.module"

package/app/codeCharta/util/algorithm/streetLayout/horizontalStreet.ts

@@ -235,8 +235,8 @@ export default class HorizontalStreet extends Street {
 	 * @param streetOrigin topleft point of street
 	 */
 	private calculateRightStreetOverhang(streetOrigin: Vector2): number {
-		const lastTopBox = this.topRow[this.topRow.length - 1]
-		const lastBottomBox = this.bottomRow[this.bottomRow.length - 1]
+		const lastTopBox = this.topRow.at(-1)
+		const lastBottomBox = this.bottomRow.at(-1)
 		const streetRightX = streetOrigin.x + this.width
 		const topOverhang =
 			lastTopBox instanceof VerticalStreet && lastTopBox.streetRect

package/app/codeCharta/util/algorithm/streetLayout/verticalStreet.ts

@@ -173,8 +173,8 @@ export default class VerticalStreet extends Street {
 	}
 
 	private calculateBottomStreetOverhang(streetOrigin: Vector2): number {
-		const lastLeftNode = this.leftRow[this.leftRow.length - 1]
-		const lastRightNode = this.rightRow[this.rightRow.length - 1]
+		const lastLeftNode = this.leftRow.at(-1)
+		const lastRightNode = this.rightRow.at(-1)
 		const streetBottomY = streetOrigin.y + this.height
 		const leftOverhang =
 			lastLeftNode instanceof HorizontalStreet && lastLeftNode.streetRect

package/app/codeCharta/util/dataMocks.ts

@@ -131,7 +131,7 @@ export const TEST_ATTRIBUTE_DESCRIPTORS: AttributeDescriptors = {
 		description: "",
 		hintHighValue: "",
 		hintLowValue: "",
-		link: ""
+		link: "https://test.link"
 	},
 	c: {
 		title: undefined,
@@ -139,6 +139,23 @@ export const TEST_ATTRIBUTE_DESCRIPTORS: AttributeDescriptors = {
 		hintHighValue: undefined,
 		hintLowValue: undefined,
 		link: undefined
+	},
+	d: {
+		title: "",
+		description: "",
+		hintHighValue: "",
+		hintLowValue: "",
+		link: "https://test2.link"
+	}
+}
+
+export const TEST_ATTRIBUTE_DESCRIPTORS_FULL: AttributeDescriptors = {
+	fullMetric: {
+		title: "FullTestTitle",
+		description: "FullTestDescription",
+		hintHighValue: "FullTestHigh",
+		hintLowValue: "FullLowValue",
+		link: "https://test.abc"
 	}
 }
 

package/app/codeCharta/util/gameObjectsParser/gameObjectsImporter.ts

@@ -158,7 +158,7 @@ function getCenteredRootPosition(rootFixedPosition: FixedPosition): FixedPositio
 }
 
 function wrapFilePath(filePath: string): string {
-	const filePathWithSlash = filePath.replace(/\./g, "/")
+	const filePathWithSlash = filePath.replaceAll(".", "/")
 	const splitFilePath = filePath.split(".")
 	const fileName = splitFilePath.slice(-1)
 	// add file name again to the end because the file has been wrapped in a folder. (with the same name)

package/app/codeCharta/util/pipes/AttributeDescriptorTooltipPipeModule.ts

@@ -0,0 +1,8 @@
+import { NgModule } from "@angular/core"
+import { AttributeDescriptorTooltipPipe } from "./attributeDescriptorTooltip.pipe"
+
+@NgModule({
+	declarations: [AttributeDescriptorTooltipPipe],
+	exports: [AttributeDescriptorTooltipPipe]
+})
+export class AttributeDescriptorTooltipPipeModule {}

package/app/codeCharta/util/pipes/RemoveExtensionPipeModule.ts

@@ -0,0 +1,8 @@
+import { NgModule } from "@angular/core"
+import { RemoveExtensionPipe } from "./removeExtension.pipe"
+
+@NgModule({
+	declarations: [RemoveExtensionPipe],
+	exports: [RemoveExtensionPipe]
+})
+export class RemoveExtensionPipeModule {}

package/app/codeCharta/util/pipes/TruncateTextPipeModule.ts

@@ -0,0 +1,8 @@
+import { NgModule } from "@angular/core"
+import { TruncateTextPipe } from "./truncateText.pipe"
+
+@NgModule({
+	declarations: [TruncateTextPipe],
+	exports: [TruncateTextPipe]
+})
+export class TruncateTextPipeModule {}

package/app/codeCharta/util/pipes/attributeDescriptorTooltip.pipe.spec.ts

@@ -0,0 +1,61 @@
+import { AttributeDescriptorTooltipPipe } from "./attributeDescriptorTooltip.pipe"
+import { AttributeDescriptor } from "../../codeCharta.model"
+
+const testKey = "testKey"
+const testTitle = "testTitle"
+const testHighValue = "testHighValue"
+const testLowValue = "testLowValue"
+const testDescription = "testDescription"
+const testLink = "testLink"
+let pipe: AttributeDescriptorTooltipPipe
+let aD: AttributeDescriptor
+
+describe("attributeDescriptorTooltipPipe", () => {
+	beforeEach(() => {
+		aD = {
+			title: null,
+			description: null,
+			hintLowValue: null,
+			hintHighValue: null,
+			link: null
+		}
+		pipe = new AttributeDescriptorTooltipPipe()
+	})
+
+	it("should return empty string for null", () => {
+		expect(pipe.transform(null, "")).toBe("")
+	})
+
+	it("should return empty string for undefined", () => {
+		expect(pipe.transform(undefined, "")).toBe("")
+	})
+
+	it("should be key if only key is present", () => {
+		expect(pipe.transform(aD, testKey)).toBe(testKey)
+	})
+
+	it('should be "title (key)" if present', () => {
+		aD.title = testTitle
+		expect(pipe.transform(aD, testKey)).toBe(`${testTitle} (${testKey})`)
+	})
+
+	it("should contain : if more information available", () => {
+		aD.hintLowValue = testLowValue
+		expect(pipe.transform(aD, testKey)).toContain(":")
+	})
+
+	it("should include full information", () => {
+		aD.title = testTitle
+		aD.description = testDescription
+		aD.hintHighValue = testHighValue
+		aD.hintLowValue = testLowValue
+		const result = `${testTitle} (${testKey}):\n${testDescription}\nHigh Values: ${testHighValue}\nLow Values: ${testLowValue}`
+		expect(pipe.transform(aD, testKey)).toBe(result)
+	})
+
+	it("should not include link", () => {
+		aD.description = testDescription
+		aD.link = testLink
+		expect(pipe.transform(aD, testKey)).toBe(`${testKey}:\n${testDescription}`)
+	})
+})

package/app/codeCharta/util/pipes/attributeDescriptorTooltip.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from "@angular/core"
+import { AttributeDescriptor } from "../../codeCharta.model"
+import { metricTitles } from "../metric/metricTitles"
+
+@Pipe({ name: "attributeDescriptorTooltip" })
+export class AttributeDescriptorTooltipPipe implements PipeTransform {
+	transform(attributeDescriptor: AttributeDescriptor, key: string): string {
+		if (attributeDescriptor == null) {
+			return metricTitles.get(key) ?? ""
+		}
+		const title: string = attributeDescriptor.title ? `${attributeDescriptor.title} (${key})` : `${key}`
+
+		let subtitle: string = attributeDescriptor.description ? `\n${attributeDescriptor.description}` : ""
+		subtitle += attributeDescriptor.hintHighValue ? `\nHigh Values: ${attributeDescriptor.hintHighValue}` : ""
+		subtitle += attributeDescriptor.hintLowValue ? `\nLow Values: ${attributeDescriptor.hintLowValue}` : ""
+
+		return subtitle.length > 0 ? `${title}:${subtitle}` : title
+	}
+}

package/dist/webpack/index.html

@@ -6,6 +6,6 @@
 
 	<body>
 		<cc-code-charta></cc-code-charta>
-	<script src="runtime.e384ce5b1b4e5942.js" type="module"></script><script src="polyfills.d69fe4da6218c8a9.js" type="module"></script><script src="main.276ed7d686dd2d87.js" type="module"></script>
+	<script src="runtime.e384ce5b1b4e5942.js" type="module"></script><script src="polyfills.d69fe4da6218c8a9.js" type="module"></script><script src="main.0e368e65a1bdf78b.js" type="module"></script>
 
 </body></html>