feat: implement review comments

Signed-off-by: Meret Behrens <[email protected]>
opossum-tool · Aug 27, 2024 · a9f8281 · a9f8281
1 parent 52bb95c
commit a9f8281
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 28 deletions.
diff --git 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
@@ -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,38 +82,38 @@ 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(
             progressBarData.filesWithOnlyPreSelectedAttributionCount,
           )}
         </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(
             progressBarData.filesWithOnlyExternalAttributionCount,
           )}
         </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(