codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSliderLabels/rangeSliderLabels.component.ts

@@ -1,4 +1,3 @@
-import "./rangeSliderLabels.component.scss"
 import {
 	AfterViewChecked,
 	ChangeDetectionStrategy,
@@ -7,7 +6,7 @@ import {
 	ElementRef,
 	Input,
 	ViewChild,
-	Inject
+	ViewEncapsulation
 } from "@angular/core"
 import { SliderRangePosition } from "../utils/SliderRangePosition"
 
@@ -15,7 +14,9 @@ const minDistanceBetweenLabels = 4
 
 @Component({
 	selector: "cc-range-slider-labels",
-	template: require("./rangeSliderLabels.component.html"),
+	templateUrl: "./rangeSliderLabels.component.html",
+	styleUrls: ["./rangeSliderLabels.component.scss"],
+	encapsulation: ViewEncapsulation.None,
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RangeSliderLabelsComponent implements AfterViewChecked {
@@ -41,7 +42,7 @@ export class RangeSliderLabelsComponent implements AfterViewChecked {
 	rightLabel: number
 	combinedCurrentLeftRightLabelLeftPosition: number
 
-	constructor(@Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef) {}
+	constructor(private changeDetector: ChangeDetectorRef) {}
 
 	ngAfterViewChecked(): void {
 		this.updateLabelDisplays()

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

@@ -1,3 +1,3 @@
-cc-edge-metric-chooser cc-metric-chooser.is-edge-metric-disabled .mat-select-value {
+cc-edge-metric-chooser cc-metric-chooser.is-edge-metric-disabled .mat-mdc-select-value {
 	color: #808080;
 }

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

@@ -8,11 +8,13 @@ import { Store } from "../../../state/store/store"
 import { EdgeMetricChooserComponent } from "./edgeMetricChooser.component"
 import { EdgeMetricChooserModule } from "./edgeMetricChooser.module"
 
-jest.mock("../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector", () => ({
-	edgeMetricDataSelector: () => [
-		{ name: "aMetric", maxValue: 1 },
-		{ name: "bMetric", maxValue: 2 }
-	]
+jest.mock("../../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: () => ({
+		edgeMetricData: [
+			{ name: "aMetric", maxValue: 1 },
+			{ name: "bMetric", maxValue: 2 }
+		]
+	})
 }))
 
 describe("edgeMetricChooserComponent", () => {
@@ -27,7 +29,7 @@ describe("edgeMetricChooserComponent", () => {
 		await render(EdgeMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Edge Metric (highest value)")).not.toBe(null)
+		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)")

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

@@ -1,5 +1,4 @@
-import "./edgeMetricChooser.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isEdgeMetricVisibleSelector } from "../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
 import { setEdgeMetric } from "../../../state/store/dynamicSettings/edgeMetric/edgeMetric.actions"
@@ -8,14 +7,16 @@ import { hoveredEdgeValueSelector } from "./hoveredEdgeValue.selector"
 
 @Component({
 	selector: "cc-edge-metric-chooser",
-	template: require("./edgeMetricChooser.component.html")
+	templateUrl: "./edgeMetricChooser.component.html",
+	styleUrls: ["./edgeMetricChooser.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeMetricChooserComponent {
 	edgeMetric$ = this.store.select(edgeMetricSelector)
 	hoveredEdgeValue$ = this.store.select(hoveredEdgeValueSelector)
 	isEdgeMetricVisible$ = this.store.select(isEdgeMetricVisibleSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleEdgeMetricChanged(value: string) {
 		this.store.dispatch(setEdgeMetric(value))

package/app/codeCharta/ui/ribbonBar/edgeSettingsPanel/edgeMetricToggle/edgeMetricToggle.component.ts

@@ -1,5 +1,4 @@
-import "./edgeMetricToggle.component.scss"
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../../state/angular-redux/store"
 import { Observable } from "rxjs"
 import { isEdgeMetricVisibleSelector } from "../../../../state/store/appSettings/isEdgeMetricVisible/isEdgeMetricVisible.selector"
@@ -7,12 +6,13 @@ import { toggleEdgeMetricVisible } from "../../../../state/store/appSettings/isE
 
 @Component({
 	selector: "cc-edge-metric-toggle",
-	template: require("./edgeMetricToggle.component.html")
+	templateUrl: "./edgeMetricToggle.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeMetricToggleComponent implements OnInit {
 	isEdgeMetricVisible$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.isEdgeMetricVisible$ = this.store.select(isEdgeMetricVisibleSelector)

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

@@ -1,5 +1,3 @@
-<cc-edge-metric-toggle></cc-edge-metric-toggle>
-
 <cc-slider
 	[title]="edgePreviewLabel$ | async"
 	[label]="'Preview'"
@@ -24,17 +22,18 @@
 	<cc-color-picker-for-map-color [mapColorFor]="'incomingEdge'"></cc-color-picker-for-map-color>
 </div>
 
-<div class="bottom-row">
-	<mat-checkbox
-		[checked]="showOnlyBuildingsWithEdges$ | async"
-		(change)="applyShowOnlyBuildingsWithEdges($event)"
-		[disabled]="(amountOfBuildingsWithSelectedEdgeMetric$ | async) === 0"
-	>
-		Only nodes with edges
-	</mat-checkbox>
+<mat-checkbox
+	[checked]="showOnlyBuildingsWithEdges$ | async"
+	(change)="applyShowOnlyBuildingsWithEdges($event)"
+	[disabled]="(amountOfBuildingsWithSelectedEdgeMetric$ | async) === 0"
+>
+	Only show nodes with edges
+</mat-checkbox>
+
+<cc-edge-metric-toggle></cc-edge-metric-toggle>
 
-	<cc-reset-settings-button
-		[settingsKeys]="['appSettings.showOnlyBuildingsWithEdges', 'appSettings.amountOfEdgePreviews', 'appSettings.edgeHeight']"
-		tooltip="Reset edge metric settings to their defaults"
-	></cc-reset-settings-button>
-</div>
+<cc-reset-settings-button
+	[settingsKeys]="['appSettings.showOnlyBuildingsWithEdges', 'appSettings.amountOfEdgePreviews', 'appSettings.edgeHeight']"
+	tooltip="Reset edge metric settings to their defaults"
+	label="Reset edge metric settings"
+></cc-reset-settings-button>

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

@@ -16,7 +16,7 @@ describe("edgeSettingsPanelComponent", () => {
 		expect(screen.getByText("Height")).toBeTruthy()
 		expect(screen.getByText("Outgoing Edge")).toBeTruthy()
 		expect(screen.getByText("Incoming Edge")).toBeTruthy()
-		expect(screen.getByText("Only nodes with edges")).toBeTruthy()
+		expect(screen.getByText("Only show nodes with edges")).toBeTruthy()
 		expect(screen.getByTitle("Reset edge metric settings to their defaults")).toBeTruthy()
 	})
 })

package/app/codeCharta/ui/ribbonBar/edgeSettingsPanel/edgeSettingsPanel.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatCheckboxChange } from "@angular/material/checkbox"
 import { map } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
@@ -12,7 +12,8 @@ import { amountOfBuildingsWithSelectedEdgeMetricSelector } from "./selectors/amo
 
 @Component({
 	selector: "cc-edge-settings-panel",
-	template: require("./edgeSettingsPanel.component.html")
+	templateUrl: "./edgeSettingsPanel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class EdgeSettingsPanelComponent {
 	amountOfBuildingsWithSelectedEdgeMetric$ = this.store.select(amountOfBuildingsWithSelectedEdgeMetricSelector)
@@ -26,7 +27,7 @@ export class EdgeSettingsPanelComponent {
 	edgeHeight$ = this.store.select(edgeHeightSelector)
 	showOnlyBuildingsWithEdges$ = this.store.select(showOnlyBuildingsWithEdgesSelector)
 
-	constructor(@Inject(Store) private store) {}
+	constructor(private store: Store) {}
 
 	applySettingsAmountOfEdgePreviews = (value: number) => {
 		this.store.dispatch(setAmountOfEdgePreviews(value))

package/app/codeCharta/ui/ribbonBar/edgeSettingsPanel/selectors/amountOfBuildingsWithSelectedEdgeMetric.selector.ts

@@ -1,8 +1,8 @@
 import { createSelector } from "../../../../state/angular-redux/createSelector"
-import { edgeMetricMapSelector } from "../../../../state/selectors/accumulatedData/metricData/edgeMetricData.selector"
+import { metricDataSelector } from "../../../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { edgeMetricSelector } from "../../../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
 
 export const amountOfBuildingsWithSelectedEdgeMetricSelector = createSelector(
-	[edgeMetricMapSelector, edgeMetricSelector],
-	(edgeMetricData, edgeMetric) => edgeMetricData.get(edgeMetric)?.size ?? 0
+	[metricDataSelector, edgeMetricSelector],
+	(metricData, edgeMetric) => metricData.nodeEdgeMetricsMap.get(edgeMetric)?.size ?? 0
 )

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

@@ -1,16 +1,17 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setHeightMetric } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.actions"
 import { heightMetricSelector } from "../../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
 
 @Component({
 	selector: "cc-height-metric-chooser",
-	template: require("./heightMetricChooser.component.html")
+	templateUrl: "./heightMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HeightMetricChooserComponent {
 	heightMetric$ = this.store.select(heightMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleHeightMetricChanged(value: string) {
 		this.store.dispatch(setHeightMetric(value))

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

@@ -7,11 +7,14 @@ import { Store } from "../../../state/store/store"
 import { HeightMetricChooserComponent } from "./areaMetricChooser.component"
 import { HeightMetricChooserModule } from "./heightMetricChooser.module"
 
-jest.mock("../../../state/selectors/accumulatedData/metricData/nodeMetricData.selector", () => ({
-	nodeMetricDataSelector: () => [
-		{ name: "aMetric", maxValue: 1 },
-		{ name: "bMetric", maxValue: 2 }
-	]
+jest.mock("../../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: () => ({
+		nodeMetricData: [
+			{ name: "aMetric", maxValue: 1 },
+			{ name: "bMetric", maxValue: 2 }
+		],
+		edgeMetricData: []
+	})
 }))
 
 describe("heightMetricChooserComponent", () => {
@@ -26,7 +29,7 @@ describe("heightMetricChooserComponent", () => {
 		await render(HeightMetricChooserComponent, { excludeComponentDeclaration: true })
 
 		await userEvent.click(await screen.findByText("aMetric (1)"))
-		expect(screen.getByText("Height Metric (highest value)")).not.toBe(null)
+		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)")

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

@@ -13,17 +13,13 @@
 	[onChange]="applyDebouncedTopLabels"
 ></cc-slider>
 
-<div class="cc-height-settings-panel-row">
-	<mat-checkbox [checked]="showMetricLabelNodeName$ | async" (change)="setShowMetricLabelNodeName($event)"
-		>Show label node names
-	</mat-checkbox>
-</div>
+<mat-checkbox [checked]="showMetricLabelNodeName$ | async" (change)="setShowMetricLabelNodeName($event)"
+	>Show label node names
+</mat-checkbox>
 
-<div class="cc-height-settings-panel-row">
-	<mat-checkbox [checked]="showMetricLabelNodeValue$ | async" (change)="setShowMetricLabelNameValue($event)"
-		>Show label node metrics
-	</mat-checkbox>
-</div>
+<mat-checkbox [checked]="showMetricLabelNodeValue$ | async" (change)="setShowMetricLabelNameValue($event)"
+	>Show label node metrics
+</mat-checkbox>
 
 <cc-slider
 	class="cc-height-settings-panel-row"
@@ -36,12 +32,12 @@
 	[onChange]="applyDebouncedScalingY"
 ></cc-slider>
 
-<div class="cc-height-settings-panel-row cc-height-settings-panel-reset-row">
-	<mat-checkbox (change)="setInvertHeight($event)" *ngIf="!(isDeltaState$ | async)" [checked]="invertHeight$ | async">
-		Invert Height
-	</mat-checkbox>
-	<cc-reset-settings-button
-		[settingsKeys]="['appSettings.amountOfTopLabels', 'appSettings.scaling.y', 'appSettings.invertHeight']"
-		tooltip="Reset height metric settings to their defaults"
-	></cc-reset-settings-button>
-</div>
+<mat-checkbox (change)="setInvertHeight($event)" *ngIf="!(isDeltaState$ | async)" [checked]="invertHeight$ | async">
+	Invert Height
+</mat-checkbox>
+
+<cc-reset-settings-button
+	[settingsKeys]="['appSettings.amountOfTopLabels', 'appSettings.scaling.y', 'appSettings.invertHeight']"
+	tooltip="Reset height metric settings to their defaults"
+	label="Reset height metric settings"
+></cc-reset-settings-button>

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

@@ -27,7 +27,7 @@ describe("heightSettingsPanelComponent", () => {
 
 		const amountOfTopLabelsSlider = screen.getByTitle("Disabled because color labels are used")
 		const matSlider = amountOfTopLabelsSlider.querySelector("mat-slider")
-		expect(matSlider.getAttribute("aria-disabled")).toBe("true")
+		expect(matSlider.getAttribute("ng-reflect-disabled")).toBe("true")
 	})
 
 	it("should enable amount of top labels slider when there are no colorLabels", async () => {
@@ -35,7 +35,8 @@ describe("heightSettingsPanelComponent", () => {
 
 		const amountOfTopLabelsSlider = screen.getByTitle("Display the labels of the 1 highest buildings")
 		const matSlider = amountOfTopLabelsSlider.querySelector("mat-slider")
-		expect(matSlider.getAttribute("aria-disabled")).toBe("false")
+
+		expect(matSlider.getAttribute("ng-reflect-disabled")).toBe("false")
 	})
 
 	it("should not display invertHeight-checkbox when being in delta mode", async () => {

package/app/codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.component.ts

@@ -1,10 +1,7 @@
-import "./heightSettingsPanel.component.scss"
-
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { amountOfTopLabelsSelector } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.selector"
 import { isLabelsSliderDisabledSelector } from "./selectors/isLabelsSliderDisabled.selector"
-import { debounce } from "lodash"
 import { setAmountOfTopLabels } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
 import { showMetricLabelNodeNameSelector } from "../../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.selector"
 import { showMetricLabelNodeValueSelector } from "../../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.selector"
@@ -16,10 +13,12 @@ import { setScaling } from "../../../state/store/appSettings/scaling/scaling.act
 import { invertHeightSelector } from "../../../state/store/appSettings/invertHeight/invertHeight.selector"
 import { setInvertHeight } from "../../../state/store/appSettings/invertHeight/invertHeight.actions"
 import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
+import { debounce } from "../../../util/debounce"
 
 @Component({
 	selector: "cc-height-settings-panel",
-	template: require("./heightSettingsPanel.component.html")
+	templateUrl: "./heightSettingsPanel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class HeightSettingsPanelComponent {
 	static DEBOUNCE_TIME = 400
@@ -32,7 +31,7 @@ export class HeightSettingsPanelComponent {
 	invertHeight$ = this.store.select(invertHeightSelector)
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	applyDebouncedTopLabels = debounce((amountOfTopLabels: number) => {
 		this.store.dispatch(setAmountOfTopLabels(amountOfTopLabels))

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

@@ -1,5 +1,5 @@
 <button
-	title="{{ (isColorMetricLinkedToHeightMetric$ | async) ? 'Unlink Height And Color Metric' : 'Link Height And Color Metric' }}"
+	title="{{ (isColorMetricLinkedToHeightMetric$ | async) ? 'Unlink Height and Color Metric' : 'Link Height and Color Metric' }}"
 	class="link-metrics-button"
 	(click)="toggleIsColorMetricLinkedToHeightMetric()"
 >

package/app/codeCharta/ui/ribbonBar/linkColorMetricToHeightMetricButton/linkColorMetricToHeightMetricButton.component.scss

@@ -1,9 +1,11 @@
 cc-link-color-metric-to-height-metric-button {
 	display: flex;
 	justify-content: center;
+	height: 100%;
 
 	.link-metrics-button {
 		width: 50px;
+		height: 100%;
 		padding: 0;
 		margin: 0;
 		background-color: transparent;

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

@@ -18,13 +18,13 @@ describe("linkHeightAndColorMetricComponent", () => {
 
 		expect(container.querySelector(".fa.fa-link")).not.toBe(null)
 		expect(container.querySelector(".fa.fa-chain-broken")).toBe(null)
-		expect(screen.queryByText("Unlink Height And Color Metric")).toBe(null)
+		expect(screen.queryByText("Unlink Height and Color Metric")).toBe(null)
 
-		await userEvent.click(screen.getByTitle("Link Height And Color Metric"))
+		await userEvent.click(screen.getByTitle("Link Height and Color Metric"))
 
 		expect(container.querySelector(".fa.fa-chain-broken")).not.toBe(null)
 		expect(container.querySelector(".fa.fa-link")).toBe(null)
-		expect(screen.getByTitle("Unlink Height And Color Metric")).not.toBe(null)
-		expect(screen.queryByText("Link Height And Color Metric")).toBe(null)
+		expect(screen.getByTitle("Unlink Height and Color Metric")).not.toBe(null)
+		expect(screen.queryByText("Link Height and Color Metric")).toBe(null)
 	})
 })

package/app/codeCharta/ui/ribbonBar/linkColorMetricToHeightMetricButton/linkColorMetricToHeightMetricButton.component.ts

@@ -1,17 +1,18 @@
-import "./linkColorMetricToHeightMetricButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { isColorMetricLinkedToHeightMetricSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.selector"
 import { toggleIsColorMetricLinkedToHeightMetric } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
 
 @Component({
 	selector: "cc-link-color-metric-to-height-metric-button",
-	template: require("./linkColorMetricToHeightMetricButton.component.html")
+	templateUrl: "./linkColorMetricToHeightMetricButton.component.html",
+	styleUrls: ["./linkColorMetricToHeightMetricButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LinkColorMetricToHeightMetricButtonComponent {
 	isColorMetricLinkedToHeightMetric$ = this.store.select(isColorMetricLinkedToHeightMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	toggleIsColorMetricLinkedToHeightMetric() {
 		this.store.dispatch(toggleIsColorMetricLinkedToHeightMetric())

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

@@ -1,6 +1,6 @@
 <cc-search-panel></cc-search-panel>
 
-<mat-card class="scenario-card" id="scenario-card">
+<mat-card appearance="outlined" class="scenario-card" id="scenario-card">
 	<div class="section">
 		<div class="section-header">
 			<cc-show-scenarios-button></cc-show-scenarios-button>
@@ -9,7 +9,7 @@
 	</div>
 </mat-card>
 
-<mat-card id="custom-configs-card" class="custom-configs-card">
+<mat-card appearance="outlined" id="custom-configs-card" class="custom-configs-card">
 	<span class="badge-custom-configs">New</span>
 	<div class="section">
 		<div class="section-header">
@@ -19,7 +19,8 @@
 	</div>
 </mat-card>
 
-<mat-card *ngIf="experimentalFeaturesEnabled$ | async" id="ai-card" class="ai-card">
+<mat-card appearance="outlined" id="ai-card" class="ai-card">
+	<span class="badge-ai">New</span>
 	<div class="section">
 		<div class="section-header">
 			<cc-artificial-intelligence></cc-artificial-intelligence>
@@ -28,7 +29,12 @@
 	</div>
 </mat-card>
 
-<mat-card id="area-metric-card" class="area-metric-card metric-card" [class.expanded]="panelSelection === 'AREA_PANEL_OPEN'">
+<mat-card
+	appearance="outlined"
+	id="area-metric-card"
+	class="area-metric-card metric-card"
+	[class.expanded]="panelSelection === 'AREA_PANEL_OPEN'"
+>
 	<div class="section">
 		<div class="section-header" id="area-metric-header-section">
 			<cc-area-metric-chooser></cc-area-metric-chooser>
@@ -40,8 +46,13 @@
 	<cc-area-settings-panel class="cc-metric-settings-panel" [class.hidden]="panelSelection !== 'AREA_PANEL_OPEN'"></cc-area-settings-panel>
 </mat-card>
 
-<mat-card id="height-and-color-metric-container">
-	<mat-card id="height-metric-card" class="height-metric-card metric-card" [class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'">
+<mat-card appearance="outlined" id="height-and-color-metric-container">
+	<mat-card
+		appearance="outlined"
+		id="height-metric-card"
+		class="height-metric-card metric-card"
+		[class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'"
+	>
 		<div class="section" id="height-metric-section">
 			<div class="section-header" id="height-metric-header-section">
 				<cc-height-metric-chooser></cc-height-metric-chooser>
@@ -56,11 +67,12 @@
 		></cc-height-settings-panel>
 	</mat-card>
 
-	<mat-card *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
+	<mat-card appearance="outlined" *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
 		<cc-link-color-metric-to-height-metric-button></cc-link-color-metric-to-height-metric-button>
 	</mat-card>
 
 	<mat-card
+		appearance="outlined"
 		*ngIf="!(isDeltaState$ | async)"
 		id="color-metric-card"
 		class="color-metric-card metric-card"
@@ -82,6 +94,7 @@
 </mat-card>
 
 <mat-card
+	appearance="outlined"
 	*ngIf="hasEdgeMetric$ | async"
 	id="edge-metric-card"
 	class="edge-metric-card metric-card"
@@ -101,7 +114,7 @@
 	</div>
 </mat-card>
 
-<mat-card *ngIf="isDeltaState$ | async" id="color-settings-card">
+<mat-card appearance="outlined" *ngIf="isDeltaState$ | async" id="color-settings-card">
 	<div class="delta-color-section" (click)="updatePanelSelection('COLOR_PANEL_OPEN')" title="Show color settings">
 		<i class="fa fa-paint-brush color-icon"></i>
 		Color Settings

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

@@ -17,7 +17,7 @@ cc-ribbon-bar {
 		border: none;
 		flex: 2.5 2.5 0;
 
-		.mat-card {
+		.mat-mdc-card {
 			box-shadow: none;
 		}
 	}
@@ -33,6 +33,17 @@ cc-ribbon-bar {
 		line-height: 10px;
 	}
 
+	.badge-ai {
+		position: absolute;
+		top: -5px;
+		padding: 4px 6px;
+		border-radius: 50%;
+		background: red;
+		color: white;
+		font-size: 10px;
+		line-height: 10px;
+	}
+
 	.cc-ribbon-bar-menu-button {
 		height: 22px;
 		line-height: 22px;
@@ -60,7 +71,7 @@ cc-ribbon-bar {
 		}
 	}
 
-	.mat-card {
+	.mat-mdc-card {
 		padding: 0;
 		height: ($heightCollapsed + 8) + px;
 		border-radius: 0;
@@ -174,7 +185,6 @@ cc-ribbon-bar {
 			}
 		}
 	}
-
 	mat-card,
 	.section .section-header,
 	.section .section-body,
@@ -187,13 +197,11 @@ cc-ribbon-bar {
 		max-width: 120px;
 		min-width: 120px;
 	}
-
 	mat-card.link-color-metric-to-height-metric-card {
 		display: flex;
 		justify-content: center;
 		flex-grow: 0;
 	}
-
 	mat-card.scenario-card {
 		max-width: 100px;
 		min-width: 100px;
@@ -204,7 +212,8 @@ cc-ribbon-bar {
 	cc-color-metric-chooser,
 	cc-edge-metric-chooser {
 		display: flex;
-		margin: 4px;
+		align-items: center;
+		margin: auto;
 
 		i {
 			margin-right: 8px;
@@ -212,12 +221,13 @@ cc-ribbon-bar {
 	}
 
 	.cc-metric-settings-panel {
-		display: block;
+		display: flex;
+		flex-direction: column;
 		position: absolute;
 		top: 45px;
 		right: 0;
 		padding: 8px;
-		width: 240px;
+		width: 280px;
 		background: white;
 		border: 1px solid #b5b5b5;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);