Feature/2507/Link Height And Color Metric As New Default

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Added 🚀
+
+- Add a new button that links the height metric to the color metric so that the colour metric is automatically set to the selected height metric [#3058](https://github.com/MaibornWolff/codecharta/pull/3058) </br>
+ ![image](https://user-images.githubusercontent.com/72517530/192830420-d3440302-ae01-4df2-8546-1a372e571518.png)
+
 ## [1.108.0] - 2022-09-28
 
 ### Added 🚀

visualization/app/app.module.ts

@@ -48,6 +48,7 @@ import { AutoFitCodeMapOnFileSelectionChangeEffect } from "./codeCharta/state/ef
 import { CodeChartaModule } from "./codeCharta/codeCharta.module"
 import { UpdateVisibleTopLabelsEffect } from "./codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect"
 import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./codeCharta/state/effects/resetSelectedEdgeMetricWhenItDoesntExistAnymore/resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect"
+import { LinkHeightAndColorMetricEffect } from "./codeCharta/state/effects/linkHeightAndColorMetric/linkHeightAndColorMetric.effect"
 
 @NgModule({
 	imports: [
@@ -66,7 +67,8 @@ import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./codeCha
 			RenderCodeMapEffect,
 			AutoFitCodeMapOnFileSelectionChangeEffect,
 			UpdateVisibleTopLabelsEffect,
-			ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect
+			ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect,
+			LinkHeightAndColorMetricEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,

visualization/app/codeCharta/codeCharta.model.ts

@@ -157,6 +157,7 @@ export interface AppSettings {
 	experimentalFeaturesEnabled: boolean
 	screenshotToClipboardEnabled: boolean
 	colorLabels: colorLabelOptions
+	isHeightAndColorMetricLinked: boolean
 }
 
 export interface TreeMapSettings {

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

@@ -0,0 +1,20 @@
+import { Inject, Injectable } from "@angular/core"
+import { Store } from "../../angular-redux/store"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { combineLatest, filter, map } from "rxjs"
+import { isHeightAndColorMetricLinkedSelector } from "../../store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.selector"
+
+import { setColorMetric } from "../../store/dynamicSettings/colorMetric/colorMetric.actions"
+import { heightMetricSelector } from "../../store/dynamicSettings/heightMetric/heightMetric.selector"
+
+@Injectable()
+export class LinkHeightAndColorMetricEffect {
+	constructor(@Inject(Store) private store: Store) {}
+
+	linkHeightAndColorMetric$ = createEffect(() =>
+		combineLatest([this.store.select(heightMetricSelector), this.store.select(isHeightAndColorMetricLinkedSelector)]).pipe(
+			filter(([, isHeightAndColorMetricLinked]) => isHeightAndColorMetricLinked),
+			map(([heightMetric]) => setColorMetric(heightMetric))
+		)
+	)
+}

visualization/app/codeCharta/state/store/appSettings/appSettings.actions.ts

@@ -26,6 +26,7 @@ import { defaultSharpnessMode } from "./sharpnessMode/sharpnessMode.actions"
 import { defaultScreenshotToClipboardEnabled } from "./enableClipboard/screenshotToClipboardEnabled.actions"
 import { defaultInvertArea } from "./invertArea/invertArea.actions"
 import { defaultIsEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.actions"
+import { defaultIsHeightAndColorMetricLinked } from "./isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.actions"
 
 export enum AppSettingsActions {
 	SET_APP_SETTINGS = "SET_APP_SETTINGS"
@@ -71,5 +72,6 @@ export const defaultAppSettings: AppSettings = {
 	screenshotToClipboardEnabled: defaultScreenshotToClipboardEnabled,
 	layoutAlgorithm: defaultLayoutAlgorithm,
 	maxTreeMapFiles: defaultMaxTreeMapFiles,
-	sharpnessMode: defaultSharpnessMode
+	sharpnessMode: defaultSharpnessMode,
+	isHeightAndColorMetricLinked: defaultIsHeightAndColorMetricLinked
 }

visualization/app/codeCharta/state/store/appSettings/appSettings.reducer.ts

@@ -25,6 +25,7 @@ import { sharpnessMode } from "./sharpnessMode/sharpnessMode.reducer"
 import { screenshotToClipboardEnabled } from "./enableClipboard/screenshotToClipboardEnabled.reducer"
 import { invertArea } from "./invertArea/invertArea.reducer"
 import { isEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.reducer"
+import { isHeightAndColorMetricLinked } from "./isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.reducer"
 
 const appSettings = combineReducers({
 	colorLabels,
@@ -52,7 +53,8 @@ const appSettings = combineReducers({
 	screenshotToClipboardEnabled,
 	layoutAlgorithm,
 	maxTreeMapFiles,
-	sharpnessMode
+	sharpnessMode,
+	isHeightAndColorMetricLinked
 })
 
 export default appSettings

visualization/app/codeCharta/state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.actions.ts

@@ -0,0 +1,19 @@
+import { Action } from "redux"
+
+export enum IsHeightAndColorMetricLinkedActions {
+	TOGGLE_IS_HEIGHT_AND_COLOR_METRIC_LINKED = "TOGGLE_IS_HEIGHT_AND_COLOR_METRIC_LINKED"
+}
+
+export interface ToggleHeightAndColorMetricLinkedAction extends Action {
+	type: IsHeightAndColorMetricLinkedActions.TOGGLE_IS_HEIGHT_AND_COLOR_METRIC_LINKED
+}
+
+export type IsHeightAndColorMetricLinkedAction = ToggleHeightAndColorMetricLinkedAction
+
+export function toggleHeightAndColorMetricLink(): ToggleHeightAndColorMetricLinkedAction {
+	return {
+		type: IsHeightAndColorMetricLinkedActions.TOGGLE_IS_HEIGHT_AND_COLOR_METRIC_LINKED
+	}
+}
+
+export const defaultIsHeightAndColorMetricLinked = false

visualization/app/codeCharta/state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.reducer.ts

@@ -0,0 +1,14 @@
+import {
+	defaultIsHeightAndColorMetricLinked,
+	IsHeightAndColorMetricLinkedAction,
+	IsHeightAndColorMetricLinkedActions
+} from "./isHeightAndColorMetricLinked.actions"
+
+export function isHeightAndColorMetricLinked(state = defaultIsHeightAndColorMetricLinked, action: IsHeightAndColorMetricLinkedAction) {
+	switch (action.type) {
+		case IsHeightAndColorMetricLinkedActions.TOGGLE_IS_HEIGHT_AND_COLOR_METRIC_LINKED:
+			return !state
+		default:
+			return state
+	}
+}

visualization/app/codeCharta/state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.selector.ts

@@ -0,0 +1,7 @@
+import { createSelector } from "../../../angular-redux/store"
+import { appSettingsSelector } from "../appSettings.selector"
+
+export const isHeightAndColorMetricLinkedSelector = createSelector(
+	[appSettingsSelector],
+	appSettings => appSettings.isHeightAndColorMetricLinked
+)

visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html

@@ -3,6 +3,7 @@
 	[value]="selectedMetricName"
 	(selectionChange)="handleMetricChanged($event.value)"
 	(openedChange)="handleOpenedChanged($event)"
+	[disabled]="disabled"
 >
 	<mat-form-field class="cc-metric-chooser-search-field">
 		<i matPrefix class="fa fa-search search-icon"></i>

visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts

@@ -18,6 +18,7 @@ export class MetricChooserComponent implements OnInit {
 	@Input() searchPlaceholder: string
 	@Input() handleMetricChanged: (newSelectedMetricName: string) => void
 	@Input() type: MetricChooserType = "node"
+	@Input() disabled: boolean
 	@ViewChild("searchTermInput") searchTermInput: ElementRef<HTMLInputElement>
 	searchTerm = ""
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>

visualization/app/codeCharta/ui/ribbonBar/colorMetricChooser/colorMetricChooser.component.html

@@ -4,6 +4,7 @@
 	[selectedMetricName]="colorMetric$ | async"
 	[searchPlaceholder]="'Color Metric (highest value)'"
 	[handleMetricChanged]="handleColorMetricChanged"
+	[disabled]="isHeightAndColorMetricLinked$ | async"
 >
 	<cc-metric-chooser-value-hovered hoveredInformation [metricFor]="'colorMetric'"></cc-metric-chooser-value-hovered>
 </cc-metric-chooser>

visualization/app/codeCharta/ui/ribbonBar/colorMetricChooser/colorMetricChooser.component.ts

@@ -2,13 +2,15 @@ import { Component, Inject } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setColorMetric } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.actions"
 import { colorMetricSelector } from "../../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
+import { isHeightAndColorMetricLinkedSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.selector"
 
 @Component({
 	selector: "cc-color-metric-chooser",
 	template: require("./colorMetricChooser.component.html")
 })
 export class ColorMetricChooserComponent {
 	colorMetric$ = this.store.select(colorMetricSelector)
+	isHeightAndColorMetricLinked$ = this.store.select(isHeightAndColorMetricLinkedSelector)
 
 	constructor(@Inject(Store) private store: Store) {}
 

visualization/app/codeCharta/ui/ribbonBar/linkHeightAndColorMetricButton/linkHeightAndColorMetricButton.component.html

@@ -0,0 +1,5 @@
+<button title="Link Height And Color Metric" class="link-metrics-button" (click)="toggleHeightAndColorMetricLink()">
+	<i class="fa fa-long-arrow-left"></i>
+	<i [ngClass]="(isHeightAndColorMetricLinked$ | async) ? 'fa fa-link' : 'fa fa-chain-broken'"></i>
+	<i class="fa fa-long-arrow-right"></i>
+</button>

visualization/app/codeCharta/ui/ribbonBar/linkHeightAndColorMetricButton/linkHeightAndColorMetricButton.component.scss

@@ -0,0 +1,24 @@
+cc-link-height-and-color-metric-button {
+	display: flex;
+	justify-content: center;
+
+	.link-metrics-button {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: space-around;
+		align-content: space-between;
+		width: 80%;
+		height: 22px;
+		padding: 2px 0 0 0;
+		margin: 0;
+
+		.fa {
+			color: rgb(68, 68, 68);
+		}
+
+		&:hover {
+			background-color: #c8c8c8;
+		}
+	}
+}

visualization/app/codeCharta/ui/ribbonBar/linkHeightAndColorMetricButton/linkHeightAndColorMetricButton.component.ts

@@ -0,0 +1,19 @@
+import "./linkHeightAndColorMetricButton.component.scss"
+import { Component, Inject } from "@angular/core"
+import { Store } from "../../../state/angular-redux/store"
+import { isHeightAndColorMetricLinkedSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.selector"
+import { toggleHeightAndColorMetricLink } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.actions"
+
+@Component({
+	selector: "cc-link-height-and-color-metric-button",
+	template: require("./linkHeightAndColorMetricButton.component.html")
+})
+export class LinkHeightAndColorMetricButtonComponent {
+	isHeightAndColorMetricLinked$ = this.store.select(isHeightAndColorMetricLinkedSelector)
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	toggleHeightAndColorMetricLink() {
+		this.store.dispatch(toggleHeightAndColorMetricLink())
+	}
+}

visualization/app/codeCharta/ui/ribbonBar/linkHeightAndColorMetricButton/linkHeightAndColorMetricButton.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../material/material.module"
+import { LinkHeightAndColorMetricButtonComponent } from "./linkHeightAndColorMetricButton.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [LinkHeightAndColorMetricButtonComponent],
+	exports: [LinkHeightAndColorMetricButtonComponent]
+})
+export class LinkHeightAndColorMetricButtonModule {}

visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.html

@@ -53,6 +53,15 @@
 	></cc-height-settings-panel>
 </mat-card>
 
+<mat-card class="link-metrics-card">
+	<div class="section">
+		<div class="section-header">
+			<cc-link-height-and-color-metric-button></cc-link-height-and-color-metric-button>
+		</div>
+		<span class="section-title no-hover">{{ (isHeightAndColorMetricLinked$ | async) ? "Unlink Metrics" : "Link Metrics" }}</span>
+	</div>
+</mat-card>
+
 <mat-card
 	*ngIf="!(isDeltaState$ | async)"
 	id="color-metric-card"

visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss

@@ -147,7 +147,8 @@ cc-ribbon-bar {
 		min-width: 120px;
 	}
 
-	mat-card.scenario-card {
+	mat-card.scenario-card,
+	mat-card.link-metrics-card {
 		max-width: 100px;
 		min-width: 100px;
 	}

visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.ts

@@ -5,6 +5,7 @@ import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettin
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 import { edgeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
 import { map } from "rxjs"
+import { isHeightAndColorMetricLinkedSelector } from "../../state/store/appSettings/isHeightAndColorMetricLinked/isHeightAndColorMetricLinked.selector"
 
 type PanelSelection = "NONE" | "AREA_PANEL_OPEN" | "HEIGHT_PANEL_OPEN" | "COLOR_PANEL_OPEN" | "EDGE_PANEL_OPEN"
 
@@ -17,7 +18,7 @@ export class RibbonBarComponent implements OnInit, OnDestroy {
 	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 	hasEdgeMetric$ = this.store.select(edgeMetricDataSelector).pipe(map(edgeMetricData => edgeMetricData.length > 0))
-
+	isHeightAndColorMetricLinked$ = this.store.select(isHeightAndColorMetricLinkedSelector)
 	constructor(@Inject(Store) private store: Store) {}
 
 	ngOnInit(): void {

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

@@ -14,6 +14,7 @@ import { HeightSettingsPanelModule } from "./heightSettingsPanel/heightSettingsP
 import { ColorSettingsPanelModule } from "./colorSettingsPanel/colorSettingsPanel.module"
 import { CommonModule } from "@angular/common"
 import { MaterialModule } from "../../../material/material.module"
+import { LinkHeightAndColorMetricButtonModule } from "./linkHeightAndColorMetricButton/linkHeightAndColorMetricButton.module"
 
 @NgModule({
 	imports: [
@@ -27,6 +28,7 @@ import { MaterialModule } from "../../../material/material.module"
 		AreaSettingsPanelModule,
 		HeightSettingsPanelModule,
 		HeightMetricChooserModule,
+		LinkHeightAndColorMetricButtonModule,
 		ColorMetricChooserModule,
 		ColorSettingsPanelModule,
 		EdgeMetricChooserModule,

visualization/app/codeCharta/util/customConfigBuilder.ts

@@ -72,6 +72,7 @@ function initializeAppSettings(target: CustomConfig) {
 		layoutAlgorithm: undefined,
 		maxTreeMapFiles: 0,
 		sharpnessMode: undefined,
+		isHeightAndColorMetricLinked: false,
 		mapColors: {
 			labelColorAndAlpha: { alpha: 0, rgb: "" },
 			base: "",

visualization/app/codeCharta/util/dataMocks.ts

@@ -1579,6 +1579,7 @@ export const STATE: State = {
 		isEdgeMetricVisible: true,
 		dynamicMargin: true,
 		isWhiteBackground: false,
+		isHeightAndColorMetricLinked: false,
 		mapColors: {
 			positive: "#69AE40",
 			neutral: "#ddcc00",
@@ -1635,6 +1636,7 @@ export const DEFAULT_STATE: State = {
 		invertArea: false,
 		isEdgeMetricVisible: true,
 		isWhiteBackground: false,
+		isHeightAndColorMetricLinked: false,
 		mapColors: {
 			base: "#666666",
 			flat: "#AAAAAA",