Fix/3225/ui components

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

@@ -3,8 +3,6 @@
 		[node]="selectedNode$ | async"
 		[fileName]="fileName$ | async"
 	></cc-attribute-side-bar-header-section>
-
 	<cc-attribute-side-bar-primary-metrics></cc-attribute-side-bar-primary-metrics>
-
 	<cc-attribute-side-bar-secondary-metrics></cc-attribute-side-bar-secondary-metrics>
 </div>

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

@@ -46,6 +46,10 @@ cc-attribute-side-bar {
 			}
 
 			table {
+				th {
+					text-align: left;
+				}
+
 				&.primary-metrics {
 					table-layout: fixed;
 					width: 100%;
@@ -63,54 +67,71 @@ cc-attribute-side-bar {
 						}
 					}
 
+					.primary-metric-box {
+						display: flex;
+						flex-direction: column;
+						height: 100%;
+						width: 100%;
+					}
+
+					.metric-name {
+						margin-top: 5px;
+					}
+
+					.primary-metric-value {
+						margin-right: -5px;
+					}
+
 					i.fa {
 						font-size: 12pt;
 						min-width: 17px;
 						text-align: center;
 					}
-
-					.metric-name {
-						margin: 5px 0 0 0;
-					}
 				}
 
-				th {
-					text-align: left;
-				}
+				&.secondary-metrics {
+					td {
+						padding-left: 5px;
 
-				td {
-					text-align: left;
-					vertical-align: initial;
-					margin: 0;
-				}
+						&:first-child {
+							padding-left: 4px;
+						}
+					}
+
+					.secondary-metric-box {
+						border-radius: 3px;
+						padding: 4px 4px;
+						vertical-align: middle;
+						background: #d5d5d5;
+					}
 
-				.metric-summary,
-				.metric-delta {
-					border-radius: 3px;
-					padding: 4px 4px;
+					.secondary-metric-row {
+						flex-wrap: nowrap;
+					}
 				}
 
-				.metric-summary {
-					align-content: flex-end;
-					background: #d5d5d5;
+				.primary-metric-row,
+				.secondary-metric-row {
 					display: flex;
-					flex-direction: row;
-					gap: 4px;
-					justify-content: space-between;
-					text-align: right;
-					vertical-align: center;
+					align-items: center;
+					flex-wrap: wrap;
+					gap: 5px;
 				}
 
 				.metric-name {
 					color: grey;
 					word-break: break-word;
+					vertical-align: middle;
 				}
 
-				.metric-value {
-					display: inline-block;
-					margin-left: 4px;
+				.delta-value-box {
+					vertical-align: middle;
 				}
 			}
+
+			cc-metric-delta-selected:has(span) {
+				margin-top: 5px;
+			}
 		}
 	}
 }

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

@@ -71,15 +71,15 @@ describe("AttributeSideBarComponent", () => {
 		expect(pathName).toMatch("/root/big leaf")
 
 		const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent
-		const expectedPrimaryMetricTextContent = "20 a"
+		const expectedPrimaryMetricTextContent = "20a"
 		expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent)
 
 		const expectedSecondaryMetricTextContent = "15b"
 		const isSecondaryMetricInPrimaryMetricSection = container
 			.querySelector("cc-attribute-side-bar-primary-metric")
 			.textContent.includes(expectedSecondaryMetricTextContent)
 		expect(isSecondaryMetricInPrimaryMetricSection).toBe(false)
-		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent
+		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent
 		expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent)
 
 		expect(isAttributeTypeSelectorShown(container)).toBe(false)
@@ -88,13 +88,12 @@ describe("AttributeSideBarComponent", () => {
 	it("should display deltas if node has delta values", async () => {
 		mockedSelectedNodeSelector.mockImplementation(() => klona(TEST_NODE_LEAF))
 		const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
-
 		const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent
 		const expectedPrimaryMetricTextContent = /20\s+Δ1.0\s+a/
 		expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent)
 
 		const expectedSecondaryMetricTextContent = /15\s+Δ2.0\s+b/
-		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent
+		const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent
 		expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent)
 	})
 
@@ -148,19 +147,15 @@ describe("AttributeSideBarComponent", () => {
 		})
 
 		const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true })
-
 		const attributeTypeSelectorWithinPrimaryMetrics = container.querySelectorAll("cc-attribute-side-bar-primary-metrics td")
-		const attributeTypeSelectorWithinSecondaryMetrics = container.querySelectorAll(
-			"cc-attribute-side-bar-secondary-metrics .metric-row"
-		)
-
+		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[0].getAttribute("title")).toBe("c:\nc_testDescription")
-		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(1)
+		expect(attributeTypeSelectorWithinSecondaryMetrics[1].getAttribute("title")).toBe("c:\nc_testDescription")
+		expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(2)
 	})
 })
 

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

@@ -1,14 +1,14 @@
-<i [class]="iconName"></i>
-<div class="metric-value">
-	<cc-attribute-type-selector
-		*ngIf="showAttributeTypeSelector$ | async"
-		class="attribute-type-select"
-		[metricName]="metric.name"
-		[metricType]="'nodes'"
-	></cc-attribute-type-selector>
-	<span>
-		{{ metric.value | number: "1.0-0" }}
-	</span>
+<div class="primary-metric-box">
+	<div class="primary-metric-row">
+		<i [class]="iconName"></i>
+		<cc-attribute-type-selector
+			*ngIf="showAttributeTypeSelector$ | async"
+			class="attribute-type-select"
+			[metricName]="metric.name"
+			[metricType]="'nodes'"
+		></cc-attribute-type-selector>
+		<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>
 </div>
-<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
-<p class="metric-name">{{ metric.name }}</p>

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

@@ -16,7 +16,6 @@
 				></cc-attribute-side-bar-primary-metric>
 			</td>
 		</tr>
-
 		<tr>
 			<td [title]="primaryMetrics.color.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
@@ -26,26 +25,28 @@
 			</td>
 			<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
 				<td [title]="edge.descriptors | metricDescriptorTitle">
-					<i class="fa fa-exchange"></i>
-					<div class="metric-value">
-						<cc-attribute-type-selector
-							*ngIf="showAttributeTypeSelector$ | async"
-							class="attribute-type-select"
-							[metricName]="edge.name"
-							[metricType]="'edges'"
-						></cc-attribute-type-selector>
-						<span class="metric-value">
-							{{ edge.incoming | number: "1.0-0" }}
-							<span>/</span>
-							{{ edge.outgoing | number: "1.0-0" }}
-						</span>
+					<div class="primary-metric-box">
+						<div class="primary-metric-row">
+							<i class="fa fa-exchange"></i>
+							<cc-attribute-type-selector
+								*ngIf="showAttributeTypeSelector$ | async"
+								class="attribute-type-select"
+								[metricName]="edge.name"
+								[metricType]="'edges'"
+							></cc-attribute-type-selector>
+							<span>
+								{{ edge.incoming | number: "1.0-0" }}
+								<span>/</span>
+								{{ edge.outgoing | number: "1.0-0" }}
+							</span>
+						</div>
+						<span class="metric-name">{{ edge.name }} (in/out)</span>
 					</div>
-					<p class="metric-name">{{ edge.name }} (in/out)</p>
 				</td>
 			</ng-container>
 			<ng-template #sidebarPrimaryMetricsEdgeElse>
 				<td>
-					<p class="metric-name">No edge metric available</p>
+					<span class="metric-name">No edge metric available</span>
 				</td>
 			</ng-template>
 		</tr>

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

@@ -5,27 +5,25 @@
 				<tr>
 					<th scope="col" colspan="2">Secondary Metrics</th>
 				</tr>
-				<tr
-					*ngFor="let secondaryMetric of secondaryMetrics$ | async"
-					class="metric-row"
-					[title]="secondaryMetric.descriptors | metricDescriptorTitle"
-				>
-					<td class="metric-summary">
-						<span class="metric-type">
+				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" [title]="secondaryMetric.descriptors | metricDescriptorTitle">
+					<td class="secondary-metric-box">
+						<div class="secondary-metric-row">
 							<cc-attribute-type-selector
 								*ngIf="showAttributeTypeSelector$ | async"
 								class="attribute-type-select"
 								[metricName]="secondaryMetric.name"
 								[metricType]="'nodes'"
 							>
 							</cc-attribute-type-selector>
-						</span>
-						<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
+							<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
+						</div>
 					</td>
-					<td [hidden]="!(showDeltaValue$ | async)">
+					<td class="delta-value-box" [hidden]="!(showDeltaValue$ | async)">
 						<cc-metric-delta-selected [metricName]="secondaryMetric.name"></cc-metric-delta-selected>
 					</td>
-					<td class="metric-name">{{ secondaryMetric.name }}</td>
+					<td>
+						<span class="metric-name">{{ secondaryMetric.name }}</span>
+					</td>
 				</tr>
 			</table>
 		</div>

visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss

@@ -1,14 +1,24 @@
+@use "../../../../material/theme";
 cc-attribute-type-selector {
-	.mat-mdc-button-toggle-group {
-		height: 18px;
+	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+		display: flex;
 		align-items: center;
-		justify-content: space-evenly;
+		height: 100%;
 	}
-	.mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content {
-		padding: 0 7px 0 7px;
+
+	button {
+		align-items: center;
+		height: 100%;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+			color: theme.$cc-primary-color;
+		}
 	}
-	.mat-mdc-button-toggle-standalone.mat-button-toggle-appearance-standard,
-	.mat-mdc-button-toggle-group-appearance-standard {
-		border: 0.1px solid darkgrey;
+
+	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*="mat-elevation-z"]),
+	.mat-button-toggle-group-appearance-standard:not([class*="mat-elevation-z"]) {
+		height: 22px;
+		border: 0.5px solid darkgrey;
 	}
 }

visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="(selectedNode$ | async )?.deltas?.[metricName] as deltaValue">
-	<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']" class="metric-delta">
+	<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']">
 		&Delta;{{ deltaValue | number: "1.1-2" }}
 	</span>
 </ng-container>

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -6,10 +6,10 @@
 	class="standard-select"
 	multiple
 >
-	<div class="actions">
-		<button mat-button (click)="handleSelectAllFiles()">All</button>
-		<button mat-button (click)="handleSelectZeroFiles()">None</button>
-		<button mat-button (click)="handleInvertSelectedFiles()">Invert</button>
+	<div class="file-selection-actions">
+		<button class="file-select-action-button" (click)="handleSelectAllFiles()">All</button>
+		<button class="file-select-action-button" (click)="handleSelectZeroFiles()">None</button>
+		<button class="file-select-action-button" (click)="handleInvertSelectedFiles()">Invert</button>
 	</div>
 	<mat-option class="filenames" *ngFor="let file of fileStates" [value]="file.file">
 		{{ file.file.fileMeta.fileName | removeExtension }}

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -1,5 +1,42 @@
+@use "../../../../material/theme";
 .file-select {
 	&.mat-mdc-select-panel {
 		min-width: max-content;
+		padding: 0;
+
+		.mat-mdc-option .mdc-list-item__primary-text {
+			flex: 1;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.file-selection-actions {
+			display: flex;
+		}
+
+		button {
+			width: 100%;
+			font-size: 16px;
+			margin: 0;
+			background-color: transparent;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+				color: theme.$cc-primary-color;
+			}
+
+			&.file-select-action-button {
+				padding: 15px 10px;
+			}
+
+			&.remove-button {
+				padding: 8px 10px;
+
+				&:hover {
+					border-radius: 50%;
+				}
+			}
+		}
 	}
 }