codecharta-visualization 1.117.0 → 1.118.0

package/README.md

@@ -1,6 +1,6 @@
 # CodeCharta Visualization
 
-[![Build Status](https://travis-ci.org/MaibornWolff/codecharta.svg?branch=main)](https://travis-ci.org/MaibornWolff/codecharta)
+[![Quality Gate Status For Visualization](https://sonarcloud.io/api/project_badges/measure?project=maibornwolff-gmbh_codecharta_visualization&metric=alert_status)](https://sonarcloud.io/project/overview?id=maibornwolff-gmbh_codecharta_visualization)
 
 > CodeCharta by [MaibornWolff](https://www.maibornwolff.de)
 
@@ -19,6 +19,8 @@ You can start with **Codecharta Visualization** on multiple ways:
 -   Installation as a [npm package](#npm-package) (Recommended)
 -   Run an operating system specific [standalone](#run-a-standalone)
 -   Build it yourself from the github [repository](#build-it-yourself)
+-   Use [docker-compose](https://maibornwolff.github.io/codecharta/docs/docker-containers/) to run this with other needed tools like a Sonar instance or analyzing tools of codecharta-analysis.
+-   Use our [Dockerfile](#run-in-docker-container) to run the visualization in a container
 -   Try out the [online version](https://maibornwolff.github.io/codecharta/visualization/app/index.html?file=codecharta.cc.json&file=codecharta_analysis.cc.json)
 
 > Be aware, that if you are on Apple Silicon, you need to do additional config for npm installation
@@ -140,6 +142,16 @@ $ npm run e2e:auto
 
 > To follow/watch the steps the e2e test is performing, deactivate headless mode in `jest-puppeteer.config.js` (and maybe set the `slowMo` parameter)
 
+## Run in Docker container
+
+You can use this via docker compose or as a standalone container. This section will deal with how to use the visualization as a standalone container. For information on how to use this with docker compose, please check out [Docker Getting Started](https://maibornwolff.github.io/codecharta/docs/docker-containers/)
+We assume that you already installed docker, if not, you have to do that before!
+
+To containerize the visualization, please follow the below listed steps.
+
+-   Start the docker container: `docker run -d -p 9000:80 codecharta/codecharta-visualization`. This detaches the container and exposes port 80 on the container and port 9000 on the host.
+-   Open `localhost:9000` in your browser and you can already use the visualization, upload `cc.json` files and play around!
+
 # JSON structure
 
 [Example Data](/visualization/app/codeCharta/assets/sample1.cc.json)

package/app/codeCharta/services/loadInitialFile/urlExtractor.ts

@@ -9,7 +9,7 @@ export class UrlExtractor {
 	constructor(private httpClient: HttpClient) {}
 
 	getParameterByName(name: string) {
-		const sanitizedName = name.replace(/[[\]]/g, "\\$&")
+		const sanitizedName = name.replaceAll(/[[\]]/g, "\\$&")
 		const regex = new RegExp(`[?&]${sanitizedName}(=([^&#]*)|&|#|$)`),
 			results = regex.exec(window.location.href)
 
@@ -19,7 +19,7 @@ export class UrlExtractor {
 		if (!results[2]) {
 			return ""
 		}
-		return decodeURIComponent(results[2].replace(/\+/g, " "))
+		return decodeURIComponent(results[2].replaceAll("+", " "))
 	}
 
 	async getFileDataFromQueryParam() {

package/app/codeCharta/state/selectors/accumulatedData/metricData/edgeMetricData.calculator.ts

@@ -84,7 +84,11 @@ function getMetricDataFromMap(nodeEdgeMetricsMap: NodeEdgeMetricsMap) {
 				minimumMetricValue = combinedValue
 			}
 		}
-		metricData.push({ name: edgeMetric, maxValue: maximumMetricValue, minValue: minimumMetricValue })
+		metricData.push({
+			name: edgeMetric,
+			maxValue: maximumMetricValue,
+			minValue: minimumMetricValue
+		})
 	}
 
 	return metricData

package/app/codeCharta/state/selectors/primaryMetrics/primaryMetrics.selector.ts

@@ -1,11 +1,8 @@
 import { selectedNodeSelector } from "../selectedNode.selector"
 import { Metric } from "../../../ui/attributeSideBar/util/metric"
 import { primaryMetricNamesSelector } from "./primaryMetricNames.selector"
-import { getMetricDescriptors } from "../../../ui/attributeSideBar/util/metricDescriptors"
-import { attributeDescriptorsSelector } from "../../store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { Edge } from "app/codeCharta/ui/attributeSideBar/util/edge"
 import { CodeMapNode } from "app/codeCharta/codeCharta.model"
-import { AttributeDescriptors } from "../../../codeCharta.model"
 import { createSelector } from "@ngrx/store"
 
 export type PrimaryMetrics = {
@@ -18,8 +15,7 @@ export type PrimaryMetrics = {
 export const primaryMetricsSelector = createSelector(
 	selectedNodeSelector,
 	primaryMetricNamesSelector,
-	attributeDescriptorsSelector,
-	(selectedNode, primaryMetricNames, attributeDescriptors) => {
+	(selectedNode, primaryMetricNames) => {
 		if (!selectedNode) {
 			return
 		}
@@ -27,32 +23,28 @@ export const primaryMetricsSelector = createSelector(
 		return {
 			area: {
 				name: primaryMetricNames.areaMetric,
-				value: selectedNode.attributes[primaryMetricNames.areaMetric],
-				descriptors: getMetricDescriptors(primaryMetricNames.areaMetric, attributeDescriptors)
+				value: selectedNode.attributes[primaryMetricNames.areaMetric]
 			},
 			height: {
 				name: primaryMetricNames.heightMetric,
-				value: selectedNode.attributes[primaryMetricNames.heightMetric],
-				descriptors: getMetricDescriptors(primaryMetricNames.heightMetric, attributeDescriptors)
+				value: selectedNode.attributes[primaryMetricNames.heightMetric]
 			},
 			color: {
 				name: primaryMetricNames.colorMetric,
-				value: selectedNode.attributes[primaryMetricNames.colorMetric],
-				descriptors: getMetricDescriptors(primaryMetricNames.colorMetric, attributeDescriptors)
+				value: selectedNode.attributes[primaryMetricNames.colorMetric]
 			},
-			edge: getEdge(primaryMetricNames.edgeMetric, selectedNode, attributeDescriptors)
+			edge: getEdge(primaryMetricNames.edgeMetric, selectedNode)
 		}
 	}
 )
 
-function getEdge(key: string, selectedNode: CodeMapNode, attributeDescriptors: AttributeDescriptors): Edge {
+function getEdge(key: string, selectedNode: CodeMapNode): Edge {
 	if (key === undefined || key === null) {
 		return null
 	}
 	return {
 		name: key,
 		incoming: selectedNode.edgeAttributes[key]?.incoming,
-		outgoing: selectedNode.edgeAttributes[key]?.outgoing,
-		descriptors: getMetricDescriptors(key, attributeDescriptors)
+		outgoing: selectedNode.edgeAttributes[key]?.outgoing
 	}
 }

package/app/codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect.spec.ts

@@ -8,6 +8,7 @@ import { BehaviorSubject } from "rxjs"
 import { Action } from "@ngrx/store"
 import { setStandard } from "../../files/files.actions"
 import { getLastAction } from "../../../../util/testUtils/store.utils"
+import { setColorMetric } from "../colorMetric/colorMetric.actions"
 
 describe("ResetColorRangeEffect", () => {
 	let actions$: BehaviorSubject<Action>
@@ -48,4 +49,12 @@ describe("ResetColorRangeEffect", () => {
 		store.refreshState()
 		expect(await getLastAction(store)).not.toEqual({ value: { from: 53, to: 86 }, type: "SET_COLOR_RANGE" })
 	})
+
+	it("should fire when colorMetric selection changed", async () => {
+		const store = TestBed.inject(MockStore)
+		store.overrideSelector(selectedColorMetricDataSelector, { minValue: 20, maxValue: 120 })
+		store.refreshState()
+		actions$.next(setColorMetric({ value: "anotherMetric" }))
+		expect(await getLastAction(store)).toEqual({ value: { from: 53, to: 86 }, type: "SET_COLOR_RANGE" })
+	})
 })

package/app/codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect.ts

@@ -7,6 +7,7 @@ import { calculateInitialColorRange } from "./calculateInitialColorRange"
 import { setColorRange } from "./colorRange.actions"
 import { fileActions } from "../../files/files.actions"
 import { CcState } from "../../../../codeCharta.model"
+import { setColorMetric } from "../colorMetric/colorMetric.actions"
 
 @Injectable()
 export class ResetColorRangeEffect {
@@ -19,4 +20,12 @@ export class ResetColorRangeEffect {
 			map(selectedColorMetricData => setColorRange({ value: calculateInitialColorRange(selectedColorMetricData) }))
 		)
 	)
+
+	resetColorRangeOnColorMetricChange$ = createEffect(() =>
+		this.actions$.pipe(
+			ofType(setColorMetric),
+			switchMap(() => this.store.select(selectedColorMetricDataSelector).pipe(take(1))),
+			map(selectedColorMetricData => setColorRange({ value: calculateInitialColorRange(selectedColorMetricData) }))
+		)
+	)
 }

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

@@ -133,5 +133,32 @@ cc-attribute-side-bar {
 				margin-top: 5px;
 			}
 		}
+
+		cc-attribute-side-bar-primary-metrics,
+		cc-attribute-side-bar-secondary-metrics {
+			.metric-box,
+			.metrics-wrapper {
+				i.fa.fa-external-link {
+					font-size: 10px;
+					min-width: 10px;
+					text-align: center;
+				}
+
+				a:link,
+				a:visited {
+					text-decoration: none;
+				}
+
+				a:hover {
+					color: blue;
+					text-decoration: solid;
+					text-decoration-line: underline;
+				}
+
+				a:active {
+					color: red;
+				}
+			}
+		}
 	}
 }

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

@@ -18,6 +18,7 @@ import { primaryMetricsSelector } from "../../state/selectors/primaryMetrics/pri
 import { attributeTypesSelector } from "../../state/store/fileSettings/attributeTypes/attributeTypes.selector"
 import { defaultAttributeTypes } from "../../state/store/fileSettings/attributeTypes/attributeTypes.reducer"
 import { showAttributeTypeSelectorSelector } from "./util/showAttributeTypeSelector.selector"
+import { metricTitles } from "../../util/metric/metricTitles"
 
 let selectedMetricNames
 
@@ -110,31 +111,29 @@ describe("AttributeSideBarComponent", () => {
 	it("should contain primary/secondary metrics with title/tooltip attribute/metric descriptor information", async () => {
 		selectedMetricNames.areaMetric = "a"
 		selectedMetricNames.heightMetric = "b"
-		selectedMetricNames.colorMetric = "someColor"
+		selectedMetricNames.colorMetric = "mcc"
 		selectedMetricNames.edgeMetric = "someEdge"
 
 		const { container, detectChanges } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
 
 		const store = TestBed.inject(MockStore)
 		store.overrideSelector(primaryMetricsSelector, {
-			area: { name: "a", value: 3, descriptors: { ...TEST_ATTRIBUTE_DESCRIPTORS.a, key: "a" } },
-			height: { name: "b", value: 1, descriptors: { ...TEST_ATTRIBUTE_DESCRIPTORS.b, key: "b" } },
+			area: { name: "a", value: 3 },
+			height: { name: "b", value: 1 },
 			color: {
-				name: "someColor",
-				value: 10,
-				descriptors: { key: "someColor", description: "", hintHighValue: "", hintLowValue: "", link: "", title: "" }
+				name: "mcc",
+				value: 10
 			},
 			edge: {
-				name: "a",
+				name: "someEdge",
 				incoming: 20,
-				outgoing: 60,
-				descriptors: { key: "someEdge", description: "", hintHighValue: "", hintLowValue: "", link: "", title: "" }
+				outgoing: 60
 			}
 		})
 
 		const selectedNode = klona(TEST_NODE_FOLDER)
 		selectedNode["children"] = [{}]
-		selectedNode["attributes"] = { a: 3, b: 1, c: 4, someColor: 10 }
+		selectedNode["attributes"] = { a: 3, b: 1, mcc: 4, rloc: 222, someColor: 10, d: 100 }
 		selectedNode["edgeAttributes"] = { someEdge: { incoming: 20, outgoing: 60 } }
 		mockSelectedNode(selectedNode as unknown as CodeMapNode, detectChanges)
 
@@ -142,11 +141,15 @@ describe("AttributeSideBarComponent", () => {
 		const attributeTypeSelectorWithinSecondaryMetrics = container.querySelectorAll("cc-attribute-side-bar-secondary-metrics tr")
 		expect(attributeTypeSelectorWithinPrimaryMetrics[0].getAttribute("title")).toBe("a_testTitle (a):\na_testDescription")
 		expect(attributeTypeSelectorWithinPrimaryMetrics[1].getAttribute("title")).toBe("b_testTitle (b)")
-		expect(attributeTypeSelectorWithinPrimaryMetrics[2].getAttribute("title")).toBe("someColor")
-		expect(attributeTypeSelectorWithinPrimaryMetrics[3].getAttribute("title")).toBe("someEdge")
-
-		expect(attributeTypeSelectorWithinSecondaryMetrics[1].getAttribute("title")).toBe("c:\nc_testDescription")
-		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(2)
+		expect(attributeTypeSelectorWithinPrimaryMetrics[1].querySelector("a").getAttribute("href")).toBe("https://test.link")
+		expect(attributeTypeSelectorWithinPrimaryMetrics[2].getAttribute("title")).toBe(metricTitles.get("mcc"))
+		expect(attributeTypeSelectorWithinPrimaryMetrics[3].getAttribute("title")).toBe("")
+
+		expect(attributeTypeSelectorWithinSecondaryMetrics[1].querySelector("a").getAttribute("href")).toBe("https://test2.link")
+		expect(attributeTypeSelectorWithinSecondaryMetrics[1].getAttribute("title")).toBe("d")
+		expect(attributeTypeSelectorWithinSecondaryMetrics[2].getAttribute("title")).toBe(metricTitles.get("rloc"))
+		expect(attributeTypeSelectorWithinSecondaryMetrics[3].getAttribute("title")).toBe("") // someColor
+		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(4) // header + three entries
 	})
 })
 

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

@@ -10,10 +10,18 @@ import { AttributeSideBarPrimaryMetricComponent } from "./attributeSideBarPrimar
 import { AttributeSideBarHeaderSectionComponent } from "./attributeSideBarHeaderSection/attributeSideBarHeaderSection.component"
 import { NodePathComponent } from "./attributeSideBarHeaderSection/nodePath/nodePath.component"
 import { MaterialModule } from "../../../material/material.module"
-import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
+import { RemoveExtensionPipeModule } from "../../util/pipes/RemoveExtensionPipeModule"
+import { AttributeDescriptorTooltipPipeModule } from "../../util/pipes/AttributeDescriptorTooltipPipeModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, AttributeTypeSelectorModule, MetricDeltaSelectedModule, SimplePipesModule],
+	imports: [
+		CommonModule,
+		MaterialModule,
+		AttributeTypeSelectorModule,
+		MetricDeltaSelectedModule,
+		RemoveExtensionPipeModule,
+		AttributeDescriptorTooltipPipeModule
+	],
 	declarations: [
 		AttributeSideBarComponent,
 		AttributeSideBarHeaderSectionComponent,

package/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/nodePath.component.spec.ts

@@ -54,7 +54,7 @@ describe("nodePathComponent", () => {
 		store.refreshState()
 		detectChanges()
 
-		expect(container.textContent.replace(/\s+/g, " ")).toContain("some/folder ( 2 files )")
+		expect(container.textContent.replaceAll(/\s+/g, " ")).toContain("some/folder ( 2 files )")
 	})
 
 	it("should display node path,amount of files, added and removed files, when a folder is selected and delta mode is enabled", async () => {
@@ -75,7 +75,7 @@ describe("nodePathComponent", () => {
 		store.refreshState()
 		detectChanges()
 
-		expect(container.textContent.replace(/\s+/g, " ")).toContain("some/folder ( 2 files | Δ1 | Δ-2 | Δ3)")
+		expect(container.textContent.replaceAll(/\s+/g, " ")).toContain("some/folder ( 2 files | Δ1 | Δ-2 | Δ3)")
 	})
 
 	it("should display amount of files with correct english grammar, when an empty folder is selected and delta mode is enabled", async () => {

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.html

@@ -10,5 +10,11 @@
 		<span class="primary-metric-value">{{ metric.value | number: "1.0-0" }}</span>
 	</div>
 	<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
-	<span class="metric-name">{{ metric.name }}</span>
+	<a class="metric-name" [href]="link" target="_blank" *ngIf="metricLink as link; else primaryMetricNoLink">
+		{{ metric.name }}
+		<i class="fa fa-external-link"></i>
+	</a>
+	<ng-template #primaryMetricNoLink
+		><span class="metric-name">{{ metric.name }}</span></ng-template
+	>
 </div>

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.ts

@@ -14,6 +14,7 @@ import { showAttributeTypeSelectorSelector } from "../../util/showAttributeTypeS
 export class AttributeSideBarPrimaryMetricComponent {
 	@Input() iconName: string
 	@Input() metric: Metric
+	@Input() metricLink: string
 	showAttributeTypeSelector$: Observable<boolean>
 
 	constructor(store: Store<CcState>) {

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html

@@ -1,30 +1,33 @@
-<div class="metric-box">
+<div class="metric-box" *ngIf="attributeDescriptors$ | async as attributeDescriptors">
 	<table *ngIf="primaryMetrics$ | async; let primaryMetrics" class="primary-metrics" aria-hidden="true">
 		<th scope="col">Primary Metrics</th>
 
 		<tr>
-			<td [title]="primaryMetrics.area.descriptors | metricDescriptorTitle">
+			<td [title]="attributeDescriptors[primaryMetrics.area.name] | attributeDescriptorTooltip: primaryMetrics.area.name">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-alt'"
 					[metric]="primaryMetrics.area"
+					[metricLink]="attributeDescriptors[primaryMetrics.area.name]?.link"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
-			<td [title]="primaryMetrics.height.descriptors | metricDescriptorTitle">
+			<td [title]="attributeDescriptors[primaryMetrics.height.name] | attributeDescriptorTooltip: primaryMetrics.height.name">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-v'"
 					[metric]="primaryMetrics.height"
+					[metricLink]="attributeDescriptors[primaryMetrics.height.name]?.link"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
 		</tr>
 		<tr>
-			<td [title]="primaryMetrics.color.descriptors | metricDescriptorTitle">
+			<td [title]="attributeDescriptors[primaryMetrics.color.name] | attributeDescriptorTooltip: primaryMetrics.color.name">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-paint-brush'"
 					[metric]="primaryMetrics.color"
+					[metricLink]="attributeDescriptors[primaryMetrics.color.name]?.link"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
 			<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
-				<td [title]="edge.descriptors | metricDescriptorTitle">
+				<td [title]="attributeDescriptors[edge.name] | attributeDescriptorTooltip: edge.name">
 					<div class="primary-metric-box">
 						<div class="primary-metric-row">
 							<i class="fa fa-exchange"></i>
@@ -40,7 +43,18 @@
 								{{ edge.outgoing | number: "1.0-0" }}
 							</span>
 						</div>
-						<span class="metric-name">{{ edge.name }} (in/out)</span>
+						<a
+							class="metric-name"
+							[href]="link"
+							target="_blank"
+							*ngIf="attributeDescriptors[edge.name]?.link as link; else primaryMetricNoLink"
+						>
+							{{ edge.name }} (in/out)
+							<i class="fa fa-external-link"></i>
+						</a>
+						<ng-template #primaryMetricNoLink
+							><span class="metric-name">{{ edge.name }} (in/out)</span></ng-template
+						>
 					</div>
 				</td>
 			</ng-container>

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.ts

@@ -4,7 +4,8 @@ import { Observable } from "rxjs"
 import { showAttributeTypeSelectorSelector } from "../util/showAttributeTypeSelector.selector"
 import { PrimaryMetrics, primaryMetricsSelector } from "../../../state/selectors/primaryMetrics/primaryMetrics.selector"
 import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
+import { AttributeDescriptors, CcState } from "../../../codeCharta.model"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metrics",
@@ -14,9 +15,11 @@ import { CcState } from "../../../codeCharta.model"
 export class AttributeSideBarPrimaryMetricsComponent {
 	primaryMetrics$: Observable<PrimaryMetrics>
 	showAttributeTypeSelector$: Observable<boolean>
+	attributeDescriptors$: Observable<AttributeDescriptors>
 
-	constructor(store: Store<CcState>) {
-		this.primaryMetrics$ = store.select(primaryMetricsSelector)
-		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
+	constructor(private store: Store<CcState>) {
+		this.primaryMetrics$ = this.store.select(primaryMetricsSelector)
+		this.showAttributeTypeSelector$ = this.store.select(showAttributeTypeSelectorSelector)
+		this.attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html

@@ -1,11 +1,14 @@
 <div class="secondary-metrics-wrapper">
 	<div class="metrics-wrapper">
-		<div class="metric-box scrollable-content">
+		<div class="metric-box scrollable-content" *ngIf="attributeDescriptors$ | async as attributeDescriptors">
 			<table class="secondary-metrics" aria-hidden="true">
 				<tr>
 					<th scope="col" colspan="2">Secondary Metrics</th>
 				</tr>
-				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" [title]="secondaryMetric.descriptors | metricDescriptorTitle">
+				<tr
+					*ngFor="let secondaryMetric of secondaryMetrics$ | async"
+					[title]="attributeDescriptors[secondaryMetric.name] | attributeDescriptorTooltip: secondaryMetric.name"
+				>
 					<td class="secondary-metric-box">
 						<div class="secondary-metric-row">
 							<cc-attribute-type-selector
@@ -22,7 +25,18 @@
 						<cc-metric-delta-selected [metricName]="secondaryMetric.name"></cc-metric-delta-selected>
 					</td>
 					<td>
-						<span class="metric-name">{{ secondaryMetric.name }}</span>
+						<a
+							class="metric-name"
+							[href]="link"
+							target="_blank"
+							*ngIf="attributeDescriptors[secondaryMetric.name]?.link as link; else secondaryMetricNoLink"
+						>
+							{{ secondaryMetric.name }}
+							<i class="fa fa-external-link"></i>
+						</a>
+						<ng-template #secondaryMetricNoLink
+							><span class="metric-name">{{ secondaryMetric.name }}</span>
+						</ng-template>
 					</td>
 				</tr>
 			</table>

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.ts

@@ -1,12 +1,13 @@
 import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { Observable } from "rxjs"
-import { CcState } from "../../../codeCharta.model"
+import { AttributeDescriptors, CcState } from "../../../codeCharta.model"
 
 import { Metric } from "../util/metric"
 import { showAttributeTypeSelectorSelector } from "../util/showAttributeTypeSelector.selector"
 import { showDeltaValueSelector } from "../util/showDeltaValueSelector"
 import { secondaryMetricsSelector } from "./secondaryMetrics.selector"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 
 @Component({
 	selector: "cc-attribute-side-bar-secondary-metrics",
@@ -17,10 +18,12 @@ export class AttributeSideBarSecondaryMetricsComponent {
 	secondaryMetrics$: Observable<Metric[]>
 	showAttributeTypeSelector$: Observable<boolean>
 	showDeltaValue$: Observable<boolean>
+	attributeDescriptors$: Observable<AttributeDescriptors>
 
-	constructor(store: Store<CcState>) {
-		this.secondaryMetrics$ = store.select(secondaryMetricsSelector)
-		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
-		this.showDeltaValue$ = store.select(showDeltaValueSelector)
+	constructor(private store: Store<CcState>) {
+		this.secondaryMetrics$ = this.store.select(secondaryMetricsSelector)
+		this.showAttributeTypeSelector$ = this.store.select(showAttributeTypeSelectorSelector)
+		this.showDeltaValue$ = this.store.select(showDeltaValueSelector)
+		this.attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.spec.ts

@@ -1,6 +1,5 @@
 import { DIFFERENT_NODE } from "../../../util/dataMocks"
 import { _calculateSecondaryMetrics } from "./secondaryMetrics.selector"
-import { AttributeDescriptors } from "../../../codeCharta.model"
 
 const primaryMetricNames = {
 	areaMetric: "a",
@@ -9,38 +8,20 @@ const primaryMetricNames = {
 	edgeMetric: "None"
 }
 
-const attributeDescriptors: AttributeDescriptors = {}
-
 describe("secondaryMetricsSelector", () => {
 	it("should return an empty list if there is no selectedNode", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors)).toEqual([])
+		expect(_calculateSecondaryMetrics(primaryMetricNames)).toEqual([])
 	})
 
 	it("should return a by name sorted list of metrics without primary metrics", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors, DIFFERENT_NODE)).toEqual([
+		expect(_calculateSecondaryMetrics(primaryMetricNames, DIFFERENT_NODE)).toEqual([
 			{
 				name: "b",
-				value: 15,
-				descriptors: {
-					description: undefined,
-					hintHighValue: undefined,
-					hintLowValue: undefined,
-					key: "b",
-					link: undefined,
-					title: undefined
-				}
+				value: 15
 			},
 			{
 				name: "mcc",
-				value: 14,
-				descriptors: {
-					description: undefined,
-					hintHighValue: undefined,
-					hintLowValue: undefined,
-					key: "mcc",
-					link: undefined,
-					title: "Cyclomatic Complexity"
-				}
+				value: 14
 			}
 		])
 	})

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.ts

@@ -1,16 +1,10 @@
-import { CodeMapNode, PrimaryMetrics, AttributeDescriptors } from "../../../codeCharta.model"
+import { CodeMapNode, PrimaryMetrics } from "../../../codeCharta.model"
 import { primaryMetricNamesSelector } from "../../../state/selectors/primaryMetrics/primaryMetricNames.selector"
 import { selectedNodeSelector } from "../../../state/selectors/selectedNode.selector"
 import { Metric } from "../util/metric"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
-import { getMetricDescriptors } from "../util/metricDescriptors"
 import { createSelector } from "@ngrx/store"
 
-export const _calculateSecondaryMetrics = (
-	primaryMetrics: PrimaryMetrics,
-	attributeDescriptors: AttributeDescriptors,
-	node?: Pick<CodeMapNode, "attributes">
-) => {
+export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?: Pick<CodeMapNode, "attributes">) => {
 	if (!node) {
 		return [] as Metric[]
 	}
@@ -22,14 +16,8 @@ export const _calculateSecondaryMetrics = (
 
 	return secondaryMetricNames.map(secondaryMetricName => ({
 		name: secondaryMetricName,
-		value: node.attributes[secondaryMetricName],
-		descriptors: getMetricDescriptors(secondaryMetricName, attributeDescriptors)
+		value: node.attributes[secondaryMetricName]
 	}))
 }
 
-export const secondaryMetricsSelector = createSelector(
-	primaryMetricNamesSelector,
-	attributeDescriptorsSelector,
-	selectedNodeSelector,
-	_calculateSecondaryMetrics
-)
+export const secondaryMetricsSelector = createSelector(primaryMetricNamesSelector, selectedNodeSelector, _calculateSecondaryMetrics)

package/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.spec.ts

@@ -12,7 +12,7 @@ import { mapColorsSelector } from "../../../state/store/appSettings/mapColors/ma
 describe("MetricDeltaSelectedComponent", () => {
 	const areColorsEqual = (hex: string, styleColor: string) => {
 		const formattedHex = ColorConverter.convertHexToRgba(hex).replace(/,1\)$/, ")").replace("a", "")
-		const formattedStyleColor = styleColor.replace(/ /g, "")
+		const formattedStyleColor = styleColor.replaceAll(" ", "")
 		return formattedHex === formattedStyleColor
 	}
 

package/app/codeCharta/ui/attributeSideBar/util/edge.ts

@@ -1,7 +1,5 @@
-import { MetricDescriptors } from "./metricDescriptors"
 export type Edge = {
 	name: string
 	incoming: number | undefined
 	outgoing: number | undefined
-	descriptors: MetricDescriptors
 }

package/app/codeCharta/ui/attributeSideBar/util/metric.ts

@@ -1,6 +1,4 @@
-import { MetricDescriptors } from "./metricDescriptors"
 export type Metric = {
 	name: string
 	value: number
-	descriptors: MetricDescriptors
 }

package/app/codeCharta/ui/codeMap/arrow/codeMap.arrow.service.ts

@@ -256,12 +256,9 @@ export class CodeMapArrowService implements OnDestroy {
 	}
 
 	private buildArrow(points: Vector3[], ARROW_COLOR = 0, headLength = 10, headWidth = 10) {
-		const direction = points[points.length - 1]
-			.clone()
-			.sub(points[points.length - 2].clone())
-			.normalize()
+		const direction = points.at(-1).clone().sub(points.at(-2).clone()).normalize()
 
-		const origin = points[points.length - 1].clone()
+		const origin = points.at(-1).clone()
 		if (direction.y < 0) {
 			origin.y += headLength + 1
 		}