Merge branch 'main' into feature/3213/add-notes-to-a-custom-view

# Conflicts:
#	CHANGELOG.md
#	visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.html
#	visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.scss

CHANGELOG.md

@@ -9,11 +9,32 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Added 🚀
 
+-   Display the CodeCharta logo next to the MaibornWolff logo [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
 -   Supports adding note to a custom view, provides a preview and an edit option for notes from the selection menu [#3234](https://github.com/MaibornWolff/codecharta/pull/3234)
 
+### Changed
+
+-   The Suspicious metrics and Risk profile Feature is now also available outside the Experimental Feature Mode [#2963](https://github.com/MaibornWolff/codecharta/pull/2963) </br>
+    ![image](https://user-images.githubusercontent.com/47224279/222686442-05d4b83c-04d7-4275-b1eb-4339e8906130.jpg)
+-   Made the background color a bit lighter [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Saturate the distribution bar colors [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Improve the layout of all metric menus [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Improve the layout of the global configuration dialog [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Improve the layout of the metric chooser panel [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Change the primary color to match the color of the CodeCharta logo [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Improve the docs for suspicious metrics and risk profile feature [#3238](https://github.com/MaibornWolff/codecharta/pull/3238)
+-   Improve Custom Views Dialog [#3238](https://github.com/MaibornWolff/codecharta/pull/3248)
+
 ### Fixed 🐞
 
 -   Unselecting a folder in Presentation Mode leads to console error [#3215](https://github.com/MaibornWolff/codecharta/pull/3215)
+-   Fix Shrunken FileExplorer's file list on small displays [#3235](https://github.com/MaibornWolff/codecharta/pull/3235)
+-   Fix various margin problems in the UI [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
+-   Fix bumpy animations when moving/turning the map, hover buildings (showing labels and edges) [#3244](https://github.com/MaibornWolff/codecharta/pull/3244)
+
+### Chore 👨‍💻 👩‍💻
+
+-   Upgrade all material UI components to MDC (not using the UI legacy components any more) [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
 
 ## [1.114.0] - 2023-01-13
 

analysis/build.gradle

@@ -8,8 +8,8 @@ buildscript {
         jackson_version = '2.14.2'
         jacoco_version = '0.8.8'
         jaxb_api_version = '2.3.1'
-        jersey_version = '2.38'
-        json_schema_version = '1.14.1'
+        jersey_version = '2.39'
+        json_schema_version = '1.14.2'
         json_version = '20190722'
         juniversalchardet_version = '1.0.3'
         kotlin_inquirer_version = '0.1.0'

gh-pages/_docs/06-05-suspicious-metrics.md

@@ -5,7 +5,7 @@ title: "Suspicious metrics"
 
 The Suspicious Metrics feature button appears in the main menu. Pressing this button will open the suspicious metrics panel.
 Compare [User Controls Legend]({{site.baseurl}}{% link _docs/06-02-user-controls.md %}).
-This feature will find the suspicious metrics in a code base and provides options that can be clicking to highlight high-risk files directly in the map that probably have a limited maintainability.
+This feature will find the suspicious metrics in a code base and provides options that can be clicked to highlight high-risk files directly in the map that probably have a limited maintainability.
 
 It compares the values of certain metrics from the loaded cc.json file with metric values of 241 Open Source Java projects.
 Based on this data suspicious, inconspicuous and untracked metrics are identified and corresponding suggestions can be clicked (see following Screenshot) to automatically view them in the map.
@@ -17,3 +17,4 @@ The small warning icon button can also be clicked. It expresses that there are s
 
 Be aware that metrics for other programming languages might not be comparable to Java Reference metric values.
 Though, it can give you a feeling about the code quality in code bases composed with other programming languages.
+The underlying approach is based on the work of [Alves et al](https://ieeexplore.ieee.org/abstract/document/5609747).

gh-pages/_docs/06-06-risk-profile.md

@@ -4,10 +4,17 @@ permalink: /docs/risk-profile/
 title: "Risk profile"
 
 The Risk Profile gives a quick overview about the complexity and risk structure of the code base. It tells you how much
-of the code is placed in files associated with low/high risk in means of maintainability.
-
-The separation of code in risk classes like low or high complexity is based on Java reference metric values and therefore
-may be inaccurate for other programming languages.
+of the code is placed in files associated with low risk, medium risk, high risk and very-high risk in means of maintainability.
+Furthermore, it allows to compare different projects.
 
 The Risk profile button appears in the main menu. Pressing this button will open the risk profile panel.
-Here you will find listed the code percentages separated by their complexity.
+Here you will find the code percentages separated by their complexity.
+
+For instance, the following image shows an example risk profile for a code base.
+53% of the source code lines is placed in low-risk files (green bar), 11% of the code is placed in medium risk files (yellow bar), 12% in high risk files (red bar) and 24% in very-high risk files (violet bar).
+It is directly obvious that big parts of the code base are affected by bad maintainability.
+
+![Risk Profile Example]({{site.baseurl}}/assets/images/docs/how-to/risk-profile-example.PNG)
+
+The separation of code in risk classes like low or high complexity is based on Java reference metric values and therefore
+may be inaccurate for other programming languages. The underlying approach is based on the work of [Alves et al](https://ieeexplore.ieee.org/abstract/document/5609747).

visualization/app/app.module.ts

@@ -11,7 +11,6 @@ import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
 import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
 import { BlacklistSearchPatternEffect } from "./codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect"
 import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
-import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect"
 import { ResetChosenMetricsEffect } from "./codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect"
 import { UpdateEdgePreviewsEffect } from "./codeCharta/state/effects/updateEdgePreviews/updateEdgePreviews.effect"
 import { ChangelogDialogModule } from "./codeCharta/ui/dialogs/changelogDialog/changelogDialog.module"
@@ -36,7 +35,6 @@ import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContex
 			OpenNodeContextMenuEffect,
 			BlacklistSearchPatternEffect,
 			ResetColorRangeEffect,
-			ResetDynamicMarginEffect,
 			ResetChosenMetricsEffect,
 			UpdateEdgePreviewsEffect,
 			RenderCodeMapEffect,

visualization/app/codeCharta/codeCharta.component.html

@@ -10,14 +10,17 @@
 
 	<cc-loading-file-progress-spinner></cc-loading-file-progress-spinner>
 
-	<div id="mw-logo">
-		<div class="logo">
-			<a href="https://www.maibornwolff.de" target="_blank" rel="noopener noreferrer">
+	<div id="logos">
+		<div class="logos-wrapper">
+			<a href="https://github.com/MaibornWolff/codecharta" target="_blank" rel="noopener noreferrer">
+				<img src="codeCharta/assets/codecharta_logo.svg" alt="CodeCharta" rel="noopener noreferrer"
+			/></a>
+			<a id="mw-logo" href="https://www.maibornwolff.de" target="_blank" rel="noopener noreferrer">
 				<img src="codeCharta/assets/logo.png" alt="MaibornWolff" rel="noopener noreferrer"
 			/></a>
-			<h2>
-				<span>CodeCharta {{ version }}</span>
-			</h2>
 		</div>
+		<h2>
+			<span>CodeCharta Version {{ version }}</span>
+		</h2>
 	</div>
 </div>

visualization/app/codeCharta/codeCharta.component.scss

@@ -2,28 +2,33 @@
 @import "../mixins.scss";
 
 cc-code-charta {
-	#mw-logo {
-		.logo {
-			width: 160px;
-			height: 100px;
-			position: absolute;
-			left: 0;
-			bottom: 20px;
-			z-index: 1;
+	#logos {
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		left: 2em;
+		bottom: 2em;
+		z-index: 1;
+		.logos-wrapper {
+			display: flex;
+			flex-direction: row;
+			align-content: center;
+			align-items: center;
+			gap: 1em;
 		}
-
-		a,
 		img {
-			width: 7em;
-			display: block;
-			margin: auto !important;
+			object-fit: contain;
+			height: 100px;
+		}
+		#mw-logo {
+			img {
+				height: 58px;
+			}
 		}
-
 		h2 {
-			text-transform: uppercase;
 			color: #5a585a;
-			font-weight: 500;
-			font-size: 9pt;
+			font-weight: 600;
+			font-size: 14px;
 			text-align: center;
 			margin: 0;
 			margin-top: 9px;
@@ -52,10 +57,6 @@ cc-code-charta {
 		transition: right 0.3s ease;
 	}
 
-	.angular-green {
-		color: #00bfa5 !important;
-	}
-
 	.small-action-button {
 		display: inline-block;
 		height: 24px;

visualization/app/codeCharta/codeCharta.model.ts

@@ -139,7 +139,6 @@ export interface AppSettings {
 	hideFlatBuildings: boolean
 	invertHeight: boolean
 	invertArea: boolean
-	dynamicMargin: boolean
 	isWhiteBackground: boolean
 	mapColors: MapColors
 	isPresentationMode: boolean

visualization/app/codeCharta/e2e/__snapshots__/logo.e2e.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeCharta logo should have correct image as logo 1`] = `
-Object {
-  "data": Array [
+{
+  "data": [
     137,
     80,
     78,

visualization/app/codeCharta/e2e/logo.po.ts

@@ -1,17 +1,17 @@
 export class LogoPageObject {
 	async getVersion() {
-		await page.waitForSelector("#mw-logo > div > h2 > span")
-		const versionString = await page.$eval("#mw-logo > div > h2 > span", element => element["innerText"])
-		return versionString.split(" ")[1]
+		await page.waitForSelector("#logos > h2 > span")
+		const versionString = await page.$eval("#logos > h2 > span", element => element["innerText"])
+		return versionString.split(" ")[2]
 	}
 
 	async getLink() {
-		await page.waitForSelector("#mw-logo > div > a")
-		return page.$eval("#mw-logo > div > a", element => element["href"])
+		await page.waitForSelector("#logos > .logos-wrapper > #mw-logo")
+		return page.$eval("#logos > .logos-wrapper >  #mw-logo", element => element["href"])
 	}
 
 	async getImageSrc() {
-		await page.waitForSelector("#mw-logo > div > a > img")
-		return page.$eval("#mw-logo > div > a > img", element => element["src"])
+		await page.waitForSelector("#mw-logo > img")
+		return page.$eval("#mw-logo > img", element => element["src"])
 	}
 }

visualization/app/codeCharta/e2e/url.e2e.ts

@@ -51,8 +51,8 @@ describe("codecharta", () => {
 	async function handleErrorDialog() {
 		const message = await dialogError.getMessage()
 		expect(message).toEqual("One or more files from the given file URL parameter could not be loaded. Loading sample files instead.")
-		await page.waitForSelector(".mat-dialog-container")
-		await dialogError.clickOkAndReturnWhenFullyClosed()
+		await page.waitForSelector(".mat-mdc-dialog-container")
+		await dialogError.clickOk()
 	}
 
 	async function checkSelectedFileName(shouldBe: string) {

visualization/app/codeCharta/services/loadFile/loadFile.service.spec.ts

@@ -14,7 +14,7 @@ import { loadFilesValidationToErrorDialog } from "../../util/loadFilesValidation
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
 import { fileRoot } from "./fileRoot"
-import { MatLegacyDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 const mockedMetricDataSelector = metricDataSelector as unknown as jest.Mock
@@ -26,7 +26,7 @@ describe("loadFileService", () => {
 	let codeChartaService: LoadFileService
 	let store: Store
 	let state: State
-	let dialog: MatLegacyDialog
+	let dialog: MatDialog
 	let validFileContent: ExportCCFile
 	let metricData: NodeMetricData[]
 	const fileName = "someFileName"
@@ -51,7 +51,7 @@ describe("loadFileService", () => {
 	function restartSystem() {
 		store = TestBed.inject(Store)
 		state = TestBed.inject(State)
-		dialog = { open: jest.fn() } as unknown as MatLegacyDialog
+		dialog = { open: jest.fn() } as unknown as MatDialog
 	}
 
 	function rebuildService() {

visualization/app/codeCharta/services/loadFile/loadFile.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, OnDestroy } from "@angular/core"
 import { tap } from "rxjs"
-import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { clone } from "../../util/clone"
 import { CCFileValidationResult } from "../../util/fileValidator"
 import { setFiles, setStandardByNames } from "../../state/store/files/files.actions"

visualization/app/codeCharta/services/loadInitialFile/loadInitialFile.service.spec.ts

@@ -12,21 +12,21 @@ import sample1 from "../../assets/sample1.cc.json"
 import sample2 from "../../assets/sample2.cc.json"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { setFiles } from "../../state/store/files/files.actions"
-import { MatLegacyDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 
 describe("LoadInitialFileService", () => {
 	let loadInitialFileService: LoadInitialFileService
-	let mockedDialog: MatLegacyDialog
+	let mockedDialog: MatDialog
 
 	beforeEach(() => {
 		localStorage.clear()
 
-		mockedDialog = { open: jest.fn() } as unknown as MatLegacyDialog
+		mockedDialog = { open: jest.fn() } as unknown as MatDialog
 		TestBed.configureTestingModule({
 			providers: [
 				Store,
 				State,
-				{ provide: MatLegacyDialog, useValue: mockedDialog },
+				{ provide: MatDialog, useValue: mockedDialog },
 				{ provide: HttpClient, useValue: {} },
 				{ provide: LoadFileService, useValue: { loadFiles: jest.fn() } }
 			]

visualization/app/codeCharta/services/loadInitialFile/loadInitialFile.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core"
-import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { HttpClient } from "@angular/common/http"
 import { NameDataPair } from "../../codeCharta.model"
 import { getCCFiles } from "../../model/files/files.helper"

visualization/app/codeCharta/services/version/version.service.spec.ts

@@ -1,14 +1,14 @@
-import { MatLegacyDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { ChangelogDialogComponent } from "../../ui/dialogs/changelogDialog/changelogDialog.component"
 import { VersionService } from "./version.service"
 
 describe("versionService", () => {
 	let versionService: VersionService & { version: string }
-	let mockedDialog: MatLegacyDialog
+	let mockedDialog: MatDialog
 	const mockedSetLocalStorageItem = jest.spyOn(Storage.prototype, "setItem")
 
 	beforeEach(() => {
-		mockedDialog = { open: jest.fn() } as unknown as MatLegacyDialog
+		mockedDialog = { open: jest.fn() } as unknown as MatDialog
 		mockedSetLocalStorageItem.mockReset()
 		versionService = new VersionService(mockedDialog)
 		versionService.version = "1.42.0"

visualization/app/codeCharta/services/version/version.service.ts

@@ -1,6 +1,6 @@
 import packageJson from "../../../../package.json"
 import { Injectable } from "@angular/core"
-import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { ChangelogDialogComponent } from "../../ui/dialogs/changelogDialog/changelogDialog.component"
 import { compareVersion } from "./utils/compareVersion"
 

visualization/app/codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect.spec.ts

@@ -1,6 +1,6 @@
 import { ApplicationInitStatus } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
-import { MatLegacyDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { Action } from "redux"
 import { Subject } from "rxjs"
 import { FILE_STATES_JAVA } from "../../../util/dataMocks"
@@ -23,7 +23,7 @@ describe("AddBlacklistItemsIfNotResultsInEmptyMapEffect", () => {
 		EffectsModule.actions$ = new Subject<Action>()
 		TestBed.configureTestingModule({
 			imports: [EffectsModule.forRoot([AddBlacklistItemsIfNotResultsInEmptyMapEffect])],
-			providers: [{ provide: MatLegacyDialog, useValue: mockedDialog }]
+			providers: [{ provide: MatDialog, useValue: mockedDialog }]
 		})
 		await TestBed.inject(ApplicationInitStatus).donePromise
 	})

visualization/app/codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect.ts

@@ -1,6 +1,6 @@
 import { Inject, Injectable } from "@angular/core"
 import { Actions, ActionsToken } from "../../angular-redux/effects/effects.module"
-import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"
+import { MatDialog } from "@angular/material/dialog"
 import { createEffect } from "../../angular-redux/effects/createEffect"
 import { filter, map, tap, withLatestFrom } from "rxjs"
 import {

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.html

@@ -1,4 +1,4 @@
-<mat-card id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
+<mat-card appearance="outlined" id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
 	<div *ngIf="codeMapNode?.children?.length > 0">
 		<cc-mark-folder-row></cc-mark-folder-row>
 		<mat-divider></mat-divider>

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.scss

@@ -1,8 +1,10 @@
 #codemap-context-menu {
-	padding: 2px;
+	padding: 12px;
 
 	.button-group {
-		display: inline-grid;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
 		width: 100%;
 	}
 
@@ -19,16 +21,13 @@
 	[mat-button] {
 		width: 100%;
 		text-align: left;
-		margin-top: 0;
+		margin: 0;
+		justify-content: left;
 		line-height: 30px;
 		min-height: 30px;
 
 		i {
 			min-width: 15px;
 		}
-
-		&:not(:last-child) {
-			margin-bottom: 0;
-		}
 	}
 }