From a9f828103befc103f446a2e8523ebdfe5839fbde Mon Sep 17 00:00:00 2001
From: Meret Behrens <meret.behrens@tngtech.com>
Date: Tue, 27 Aug 2024 07:55:53 +0200
Subject: [PATCH] feat: implement review comments

Signed-off-by: Meret Behrens <meret.behrens@tngtech.com>
---
 .../Components/ProgressBar/ProgressBar.tsx    | 11 +++--
 .../ProgressBar/ProgressBar.util.tsx          | 42 +++++++++----------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/Frontend/Components/ProgressBar/ProgressBar.tsx b/src/Frontend/Components/ProgressBar/ProgressBar.tsx
index 3548980f5..0c8a76420 100644
--- a/src/Frontend/Components/ProgressBar/ProgressBar.tsx
+++ b/src/Frontend/Components/ProgressBar/ProgressBar.tsx
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { SxProps } from '@mui/material';
 import MuiBox from '@mui/material/Box';
-import { ResponsiveBar } from '@nivo/bar';
+import { BarDatum, ResponsiveBar } from '@nivo/bar';
 import { ReactElement } from 'react';
 
 import { criticalityColor, OpossumColors } from '../../shared-styles';
@@ -19,7 +19,6 @@ const classes = {
   bar: {
     '&:hover': {
       cursor: 'pointer',
-      opacity: 1,
     },
   },
 };
@@ -43,13 +42,13 @@ export function ProgressBar(props: ProgressBarProps): ReactElement {
       ? resourcesWithCriticalExternalAttributions
       : props.progressBarData.resourcesWithNonInheritedExternalAttributionOnly,
   );
-  const data: Array<{ [key: string]: number }> = props.showCriticalSignals
+  const data: Array<BarDatum> = props.showCriticalSignals
     ? [
         {
-          high_critical:
+          highCritical:
             props.progressBarData
               .filesWithHighlyCriticalExternalAttributionsCount,
-          medium_critical:
+          mediumCritical:
             props.progressBarData
               .filesWithMediumCriticalExternalAttributionsCount,
           rest:
@@ -79,7 +78,7 @@ export function ProgressBar(props: ProgressBarProps): ReactElement {
       <ResponsiveBar
         data={data}
         keys={Object.keys(data[0])}
-        margin={{ top: 5, right: 1, bottom: 5, left: 6 }}
+        margin={{ top: 4, bottom: 4 }}
         maxValue={
           props.showCriticalSignals
             ? props.progressBarData.filesWithOnlyExternalAttributionCount
diff --git a/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx b/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx
index a5a05348f..451ddbf7d 100644
--- a/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx
+++ b/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx
@@ -39,20 +39,18 @@ export function useOnProgressBarClick(resourceIds: Array<string>) {
 
 const classes = {
   tooltip: {
-    flex: 1,
     background: 'rgba(97, 97, 97, 0.92)',
     borderRadius: '4px',
     color: 'white',
     fontFamily: 'Karla Variable, sans-serif',
-    padding: 4,
-    fontSize: 10,
+    padding: 8,
+    fontSize: 12,
     margin: 2,
     fontWeight: 500,
-    position: 'relative',
-    top: 100,
-    'z-index': 100,
+    // position: 'relative',
+    // top: 'auto',
   } as CSSProperties,
-  div: { display: 'flex', 'align-items': 'center' },
+  tooltipLine: { display: 'flex', 'align-items': 'center', padding: 4 },
   colorBlock: {
     display: 'block',
     width: 12,
@@ -70,7 +68,7 @@ export function getProgressBarTooltipText(
   return (
     <MuiBox aria-label={'tooltip'} style={classes.tooltip}>
       Number of resources...
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{
             ...classes.colorBlock,
@@ -84,13 +82,13 @@ export function getProgressBarTooltipText(
           )}
         </span>
       </div>
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{
             ...classes.colorBlock,
             background: OpossumColors.pastelMiddleGreen,
           }}
-        ></span>
+        />
         <span>
           …with only pre-selected attributions:{' '}
           {new Intl.NumberFormat().format(
@@ -98,10 +96,10 @@ export function getProgressBarTooltipText(
           )}
         </span>
       </div>
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{ ...classes.colorBlock, background: OpossumColors.pastelRed }}
-        ></span>
+        />
         <span>
           …with only signals:{' '}
           {new Intl.NumberFormat().format(
@@ -109,13 +107,13 @@ export function getProgressBarTooltipText(
           )}
         </span>
       </div>
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{
             ...classes.colorBlock,
             background: OpossumColors.lightestBlue,
           }}
-        ></span>
+        />
         <span>
           …without any signal or attribution:{' '}
           {new Intl.NumberFormat().format(
@@ -140,38 +138,38 @@ export function getCriticalityBarTooltipText(
   return (
     <MuiBox aria-label={'tooltip'} style={classes.tooltip}>
       Number of resources with signals and no attributions…
-      <div style={classes.div} role="tooltip" aria-label="tooltip">
+      <div style={classes.tooltipLine} role="tooltip" aria-label="tooltip">
         <span
           style={{ ...classes.colorBlock, background: criticalityColor.high }}
-        ></span>
+        />
         <span>
           …containing highly critical signals:{' '}
           {new Intl.NumberFormat().format(
             progressBarData.filesWithHighlyCriticalExternalAttributionsCount,
-          )}{' '}
+          )}
         </span>
       </div>
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{
             ...classes.colorBlock,
             background: criticalityColor.medium,
           }}
-        ></span>
+        />
         <span>
           …containing medium critical signals:{' '}
           {new Intl.NumberFormat().format(
             progressBarData.filesWithMediumCriticalExternalAttributionsCount,
-          )}{' '}
+          )}
         </span>
       </div>
-      <div style={classes.div}>
+      <div style={classes.tooltipLine}>
         <span
           style={{
             ...classes.colorBlock,
             background: OpossumColors.lightestBlue,
           }}
-        ></span>
+        />
         <span>
           …containing only non-critical signals:{' '}
           {new Intl.NumberFormat().format(