codecharta-visualization 1.119.0 → 1.120.0

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

@@ -1,56 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { amountOfTopLabelsSelector } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.selector"
-import { isLabelsSliderDisabledSelector } from "./selectors/isLabelsSliderDisabled.selector"
-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"
-import { MatCheckboxChange } from "@angular/material/checkbox"
-import { setShowMetricLabelNodeName } from "../../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.actions"
-import { setShowMetricLabelNameValue } from "../../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.actions"
-import { scalingSelector } from "../../../state/store/appSettings/scaling/scaling.selector"
-import { setScaling } from "../../../state/store/appSettings/scaling/scaling.actions"
-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"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-
-@Component({
-	selector: "cc-height-settings-panel",
-	templateUrl: "./heightSettingsPanel.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class HeightSettingsPanelComponent {
-	static DEBOUNCE_TIME = 400
-
-	amountOfTopLabels$ = this.store.select(amountOfTopLabelsSelector)
-	isLabelsSliderDisabled$ = this.store.select(isLabelsSliderDisabledSelector)
-	showMetricLabelNodeName$ = this.store.select(showMetricLabelNodeNameSelector)
-	showMetricLabelNodeValue$ = this.store.select(showMetricLabelNodeValueSelector)
-	scaling$ = this.store.select(scalingSelector)
-	invertHeight$ = this.store.select(invertHeightSelector)
-	isDeltaState$ = this.store.select(isDeltaStateSelector)
-
-	constructor(private store: Store<CcState>) {}
-
-	applyDebouncedTopLabels = debounce((amountOfTopLabels: number) => {
-		this.store.dispatch(setAmountOfTopLabels({ value: amountOfTopLabels }))
-	}, HeightSettingsPanelComponent.DEBOUNCE_TIME)
-
-	applyDebouncedScalingY = debounce((y: number) => {
-		this.store.dispatch(setScaling({ value: { y } }))
-	}, HeightSettingsPanelComponent.DEBOUNCE_TIME)
-
-	setShowMetricLabelNodeName(event: MatCheckboxChange) {
-		this.store.dispatch(setShowMetricLabelNodeName({ value: event.checked }))
-	}
-
-	setShowMetricLabelNameValue(event: MatCheckboxChange) {
-		this.store.dispatch(setShowMetricLabelNameValue({ value: event.checked }))
-	}
-
-	setInvertHeight(event: MatCheckboxChange) {
-		this.store.dispatch(setInvertHeight({ value: event.checked }))
-	}
-}

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

@@ -1,13 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../../material/material.module"
-import { ResetSettingsButtonModule } from "../../resetSettingsButton/resetSettingsButton.module"
-import { SliderModule } from "../../slider/slider.module"
-import { HeightSettingsPanelComponent } from "./heightSettingsPanel.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule, SliderModule, ResetSettingsButtonModule],
-	declarations: [HeightSettingsPanelComponent],
-	exports: [HeightSettingsPanelComponent]
-})
-export class HeightSettingsPanelModule {}

package/app/codeCharta/ui/ribbonBar/heightSettingsPanel/selectors/isLabelsSliderDisabled.selector.ts

@@ -1,7 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { colorLabelsSelector } from "../../../../state/store/appSettings/colorLabels/colorLabels.selector"
-
-export const isLabelsSliderDisabledSelector = createSelector(
-	colorLabelsSelector,
-	colorLabels => colorLabels.negative || colorLabels.neutral || colorLabels.positive
-)

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

@@ -1,7 +0,0 @@
-<button
-	title="{{ (isColorMetricLinkedToHeightMetric$ | async) ? 'Unlink Height and Color Metric' : 'Link Height and Color Metric' }}"
-	class="link-metrics-button"
-	(click)="toggleIsColorMetricLinkedToHeightMetric()"
->
-	<i [ngClass]="(isColorMetricLinkedToHeightMetric$ | async) ? 'fa fa-chain-broken' : 'fa fa-link'"></i>
-</button>

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

@@ -1,21 +0,0 @@
-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;
-
-		.fa {
-			color: rgb(68, 68, 68);
-		}
-
-		&:hover {
-			background-color: #c8c8c8;
-		}
-	}
-}

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

@@ -1,39 +0,0 @@
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { LinkColorMetricToHeightMetricButtonComponent } from "./linkColorMetricToHeightMetricButton.component"
-import { TestBed } from "@angular/core/testing"
-import { CommonModule } from "@angular/common"
-import { MockStore, provideMockStore } from "@ngrx/store/testing"
-import { isColorMetricLinkedToHeightMetricSelector } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.selector"
-import { getLastAction } from "../../../util/testUtils/store.utils"
-import { toggleIsColorMetricLinkedToHeightMetric } from "../../../state/store/appSettings/isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
-
-describe("linkHeightAndColorMetricComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [CommonModule],
-			providers: [provideMockStore({ selectors: [{ selector: isColorMetricLinkedToHeightMetricSelector, value: false }] })]
-		})
-	})
-
-	it("should toggle height and color metric link on click and show associated icon", async () => {
-		const { container, detectChanges } = await render(LinkColorMetricToHeightMetricButtonComponent)
-
-		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)
-
-		await userEvent.click(screen.getByTitle("Link Height and Color Metric"))
-		const store = TestBed.inject(MockStore)
-		expect(await getLastAction(store)).toEqual(toggleIsColorMetricLinkedToHeightMetric())
-
-		store.overrideSelector(isColorMetricLinkedToHeightMetricSelector, true)
-		store.refreshState()
-		detectChanges()
-
-		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)
-	})
-})

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

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

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

@@ -1,10 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { LinkColorMetricToHeightMetricButtonComponent } from "./linkColorMetricToHeightMetricButton.component"
-
-@NgModule({
-	imports: [CommonModule],
-	declarations: [LinkColorMetricToHeightMetricButtonComponent],
-	exports: [LinkColorMetricToHeightMetricButtonComponent]
-})
-export class LinkColorMetricToHeightMetricButtonModule {}

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

@@ -1,127 +0,0 @@
-<cc-search-panel></cc-search-panel>
-
-<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>
-		</div>
-		<span class="section-title no-hover">Metric Templates</span>
-	</div>
-</mat-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">
-			<cc-custom-configs></cc-custom-configs>
-		</div>
-		<span class="section-title no-hover">Custom Views</span>
-	</div>
-</mat-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>
-		</div>
-		<span class="section-title no-hover">Suspicious Metrics</span>
-	</div>
-</mat-card>
-
-<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>
-		</div>
-		<span class="section-title" (click)="updatePanelSelection('AREA_PANEL_OPEN')" title="Show area metric settings">
-			Area Metric Options <i class="fa fa-angle-down"></i>
-		</span>
-	</div>
-	<cc-area-settings-panel class="cc-metric-settings-panel" [class.hidden]="panelSelection !== 'AREA_PANEL_OPEN'"></cc-area-settings-panel>
-</mat-card>
-
-<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>
-			</div>
-			<span class="section-title" (click)="updatePanelSelection('HEIGHT_PANEL_OPEN')" title="Show height metric settings">
-				Height Metric Options <i class="fa fa-angle-down"></i>
-			</span>
-		</div>
-		<cc-height-settings-panel
-			class="cc-metric-settings-panel"
-			[class.hidden]="panelSelection !== 'HEIGHT_PANEL_OPEN'"
-		></cc-height-settings-panel>
-	</mat-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"
-		[class.expanded]="panelSelection === 'COLOR_PANEL_OPEN'"
-	>
-		<div class="section">
-			<div class="section-header" id="color-metric-header-section">
-				<cc-color-metric-chooser></cc-color-metric-chooser>
-			</div>
-			<span class="section-title" (click)="updatePanelSelection('COLOR_PANEL_OPEN')" title="Show color metric settings">
-				Color Metric Options <i class="fa fa-angle-down"></i>
-			</span>
-		</div>
-		<cc-color-settings-panel
-			class="cc-metric-settings-panel"
-			[class.hidden]="panelSelection !== 'COLOR_PANEL_OPEN'"
-		></cc-color-settings-panel>
-	</mat-card>
-</mat-card>
-
-<mat-card
-	appearance="outlined"
-	*ngIf="hasEdgeMetric$ | async"
-	id="edge-metric-card"
-	class="edge-metric-card metric-card"
-	[class.expanded]="panelSelection === 'EDGE_PANEL_OPEN'"
->
-	<div class="section">
-		<div class="section-header" id="edge-metric-header-section">
-			<cc-edge-metric-chooser></cc-edge-metric-chooser>
-		</div>
-		<span class="section-title" (click)="updatePanelSelection('EDGE_PANEL_OPEN')" title="Show edge metric settings">
-			Edge Metric Options <i class="fa fa-angle-down"></i>
-		</span>
-		<cc-edge-settings-panel
-			class="cc-metric-settings-panel"
-			[class.hidden]="panelSelection !== 'EDGE_PANEL_OPEN'"
-		></cc-edge-settings-panel>
-	</div>
-</mat-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
-		<i class="fa fa-sort-down color-dropdown-icon"></i>
-	</div>
-	<cc-color-settings-panel
-		class="cc-metric-settings-panel"
-		[class.hidden]="panelSelection !== 'COLOR_PANEL_OPEN'"
-	></cc-color-settings-panel>
-</mat-card>

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

@@ -1,245 +0,0 @@
-cc-ribbon-bar {
-	position: fixed;
-	z-index: 10;
-	white-space: nowrap;
-	display: flex;
-	flex-wrap: nowrap;
-	flex-direction: row;
-	width: 100%;
-	$heightExpanded: 195;
-	$heightCollapsed: 38;
-	$border: 1px solid #cdcdcd;
-
-	#height-and-color-metric-container {
-		display: flex;
-		flex-wrap: nowrap;
-		flex-direction: row;
-		border: none;
-		flex: 2.5 2.5 0;
-
-		.mat-mdc-card {
-			box-shadow: none;
-		}
-	}
-
-	.badge-custom-configs {
-		position: absolute;
-		top: -5px;
-		padding: 4px 6px;
-		border-radius: 50%;
-		background: red;
-		color: white;
-		font-size: 10px;
-		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;
-		min-width: 45px;
-		margin: 0;
-		padding: 0;
-		font-size: 9pt;
-		background-color: rgba(230, 230, 230, 0.96);
-		color: rgb(68, 68, 68);
-
-		&:hover {
-			background-color: #c8c8c8;
-		}
-	}
-
-	cc-search-panel {
-		.search-panel-card.expanded {
-			height: 100%;
-
-			.section-body {
-				min-height: ($heightExpanded - $heightCollapsed) + 5 + px;
-				max-height: 500px;
-				overflow-y: auto;
-			}
-		}
-	}
-
-	.mat-mdc-card {
-		padding: 0;
-		height: ($heightCollapsed + 8) + px;
-		border-radius: 0;
-		border-top: $border;
-		flex: 1 1 0;
-		transition: 200ms width ease-in-out;
-
-		.section {
-			display: inline-block;
-			height: 100%;
-			width: 100%;
-			vertical-align: top;
-			overflow: hidden;
-
-			&#height-metric-section {
-				border-right: none;
-			}
-
-			.section-header {
-				margin: 0 5px 0 5px;
-				height: 31px;
-				color: #444444;
-				overflow: hidden;
-				padding: 5px;
-
-				&#area-metric-header-section,
-				&#height-metric-header-section,
-				&#color-metric-header-section,
-				&#edge-metric-header-section {
-					border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-				}
-			}
-
-			.section-title {
-				font-size: 8pt;
-				display: block;
-				width: 100%;
-				color: gray;
-				text-align: center;
-				transition: background-color 0.4s;
-				padding: 1px 0 1px 0;
-				border-bottom: 1px solid transparent;
-
-				&:hover {
-					background-color: #e0e0e0;
-					cursor: pointer;
-				}
-
-				&:focus {
-					outline: none;
-				}
-
-				&.no-hover {
-					pointer-events: none;
-				}
-
-				i:before {
-					content: "\f107";
-				}
-			}
-		}
-
-		&.expanded {
-			.section-title {
-				i:before {
-					content: "\f106";
-				}
-			}
-
-			.section-body {
-				cc-reset-settings-button button {
-					opacity: 1;
-					pointer-events: all;
-				}
-			}
-		}
-
-		.section-height-metric-card {
-			border-right: none;
-		}
-
-		.delta-color-section {
-			line-height: 45px;
-			vertical-align: baseline;
-
-			&:hover {
-				cursor: pointer;
-			}
-
-			.color-icon {
-				margin: 8px;
-			}
-			.color-dropdown-icon {
-				position: absolute;
-				top: 12px;
-				right: 8px;
-			}
-		}
-
-		&.ai-card,
-		&.custom-configs-card {
-			.section {
-				.section-header {
-					overflow: visible;
-					text-align: center;
-				}
-				.section-title {
-					padding: 1px 5px;
-				}
-			}
-		}
-	}
-	mat-card,
-	.section .section-header,
-	.section .section-body,
-	.section-body cc-reset-settings-button button {
-		transition: height 0.1s ease;
-	}
-
-	mat-card.custom-configs-card,
-	mat-card.ai-card {
-		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;
-	}
-
-	cc-area-metric-chooser,
-	cc-height-metric-chooser,
-	cc-color-metric-chooser,
-	cc-edge-metric-chooser {
-		display: flex;
-		align-items: center;
-		margin: auto;
-
-		i {
-			margin-right: 8px;
-		}
-	}
-
-	.cc-metric-settings-panel {
-		display: flex;
-		flex-direction: column;
-		position: absolute;
-		top: 45px;
-		right: 0;
-		padding: 8px;
-		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);
-		overflow: hidden;
-		opacity: 1;
-		font-size: 0.9em;
-		transition: max-height 200ms ease-in-out;
-
-		&.hidden {
-			max-height: 0;
-			pointer-events: none;
-			opacity: 0;
-			transition: opacity 0ms 200ms, max-height 200ms ease-in-out;
-		}
-	}
-}

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

@@ -1,112 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { EdgeMetricData } from "../../codeCharta.model"
-import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
-import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
-import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
-import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
-import { RibbonBarComponent } from "./ribbonBar.component"
-import { RibbonBarModule } from "./ribbonBar.module"
-import { VALID_NODE_WITH_PATH_AND_EXTENSION } from "../../util/dataMocks"
-import { appReducers, setStateMiddleware } from "../../state/store/state.manager"
-import { StoreModule } from "@ngrx/store"
-
-jest.mock("../../state/selectors/isDeltaState.selector", () => ({
-	isDeltaStateSelector: jest.fn()
-}))
-const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
-jest.mock("../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
-	metricDataSelector: jest.fn()
-}))
-const mockMetricDataSelector = jest.mocked(metricDataSelector)
-
-jest.mock("../../state/store/dynamicSettings/areaMetric/areaMetric.selector", () => ({
-	areaMetricSelector: () => "rloc"
-}))
-
-const mockedAccumulatedData = {}
-jest.mock("../../state/selectors/accumulatedData/accumulatedData.selector", () => ({
-	accumulatedDataSelector: () => mockedAccumulatedData
-}))
-
-describe("RibbonBarComponent", () => {
-	beforeEach(() => {
-		mockedAccumulatedData["unifiedMapNode"] = VALID_NODE_WITH_PATH_AND_EXTENSION
-		mockedIsDeltaStateSelector.mockImplementation(() => false)
-		mockMetricDataSelector.mockImplementation(() => ({ edgeMetricData: [], nodeMetricData: [], nodeEdgeMetricsMap: new Map() }))
-		TestBed.configureTestingModule({
-			imports: [RibbonBarModule, StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })],
-			providers: [
-				{ provide: ThreeCameraService, useValue: {} },
-				{ provide: ThreeOrbitControlsService, useValue: {} }
-			]
-		})
-	})
-
-	describe("panel sections", () => {
-		it("should toggle panel section", async () => {
-			const { container } = await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(container.querySelector("cc-area-settings-panel").classList).toContain("hidden")
-
-			await userEvent.click(screen.getByText("Area Metric Options"))
-			expect(container.querySelector("cc-area-settings-panel").classList).not.toContain("hidden")
-
-			await userEvent.click(screen.getByText("Area Metric Options"))
-			expect(container.querySelector("cc-area-settings-panel").classList).toContain("hidden")
-		})
-
-		it("should close on outside clicks", async () => {
-			const { container } = await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-
-			await userEvent.click(screen.getByText("Area Metric Options"))
-			expect(container.querySelector("cc-area-settings-panel").classList).not.toContain("hidden")
-
-			await userEvent.click(document.body)
-			expect(container.querySelector("cc-area-settings-panel").classList).toContain("hidden")
-		})
-
-		it("should detect clicks within panel selections and not close itself", async () => {
-			const { fixture } = await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			const mouseEvent = {
-				composedPath: () => [{ nodeName: "CC-COLOR-SETTINGS-PANEL" }]
-			} as unknown as MouseEvent
-			const isClickOutside = fixture.componentInstance["isOutside"](mouseEvent)
-			expect(isClickOutside).toBe(false)
-		})
-	})
-
-	describe("delta state", () => {
-		it("should not show cc-color-metric-chooser and cc-link-color-metric-to-height-metric-button when in delta mode", async () => {
-			mockedIsDeltaStateSelector.mockImplementation(() => true)
-			const { container } = await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(container.querySelector("cc-color-metric-chooser")).toBe(null)
-			expect(container.querySelector("cc-link-color-metric-to-height-metric-button")).toBe(null)
-		})
-
-		it("should show cc-color-metric-chooser and cc-link-color-metric-to-height-metric-button when not in delta mode", async () => {
-			mockedIsDeltaStateSelector.mockImplementation(() => false)
-			const { container } = await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(container.querySelector("cc-color-metric-chooser")).not.toBe(null)
-			expect(container.querySelector("cc-link-color-metric-to-height-metric-button")).not.toBe(null)
-		})
-	})
-
-	describe("edge metric chooser", () => {
-		it("should show edge metrics when there are some available", async () => {
-			mockMetricDataSelector.mockImplementation(() => ({
-				edgeMetricData: [{} as EdgeMetricData],
-				nodeMetricData: [],
-				nodeEdgeMetricsMap: new Map()
-			}))
-
-			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(screen.getByText("Edge Metric Options")).toBeTruthy()
-		})
-
-		it("should hide edge metrics when there aren't any available", async () => {
-			await render(RibbonBarComponent, { excludeComponentDeclaration: true })
-			expect(screen.queryByText("Edge Metric Options")).toBe(null)
-		})
-	})
-})