fix: translate tooltip down

There are still some issues: 1. the position differs between tooltip modes 2. when resizing the window down, the new bar chart does not resize itself thus causing x-overflow Signed-off-by: Maxim Stykow <[email protected]>
opossum-tool · Sep 28, 2024 · 8932d9c · 8932d9c
1 parent a247f35
commit 8932d9c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/src/Frontend/Components/ProgressBar/ProgressBar.tsx b/src/Frontend/Components/ProgressBar/ProgressBar.tsx
@@ -10,8 +10,8 @@ import { ReactElement } from 'react';
 import { criticalityColor, OpossumColors } from '../../shared-styles';
 import { ProgressBarData } from '../../types/types';
 import {
-  getCriticalityBarTooltipText,
-  getProgressBarTooltipText,
+  CriticalityBarTooltip,
+  ProgressBarTooltip,
   useOnProgressBarClick,
 } from './ProgressBar.util';
 
@@ -106,9 +106,11 @@ export function ProgressBar(props: ProgressBarProps): ReactElement {
         }
         labelTextColor="black"
         tooltip={() =>
-          props.showCriticalSignals
-            ? getCriticalityBarTooltipText(props.progressBarData)
-            : getProgressBarTooltipText(props.progressBarData)
+          props.showCriticalSignals ? (
+            <CriticalityBarTooltip {...props.progressBarData} />
+          ) : (
+            <ProgressBarTooltip {...props.progressBarData} />
+          )
         }
         onClick={
           props.showCriticalSignals ? onCriticalityBarClick : onProgressBarClick

diff --git a/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx b/src/Frontend/Components/ProgressBar/ProgressBar.util.tsx
@@ -47,10 +47,9 @@ const classes = {
     fontSize: 12,
     margin: 2,
     fontWeight: 500,
-    position: 'relative',
-    top: '200',
+    transform: 'translate(0px, 168px)',
   } as CSSProperties,
-  tooltipLine: { display: 'flex', 'align-items': 'center', padding: 4 },
+  tooltipLine: { display: 'flex', alignItems: 'center', padding: 4 },
   colorBlock: {
     display: 'block',
     width: 12,
@@ -62,9 +61,9 @@ const classes = {
   },
 };
 
-export function getProgressBarTooltipText(
-  progressBarData: ProgressBarData,
-): React.ReactNode {
+export const ProgressBarTooltip: React.FC<ProgressBarData> = (
+  progressBarData,
+) => {
   return (
     <MuiBox aria-label={'tooltip'} style={classes.tooltip}>
       Number of resources...
@@ -126,11 +125,9 @@ export function getProgressBarTooltipText(
       </div>
     </MuiBox>
   );
-}
+};
 
-export function getCriticalityBarTooltipText(
-  progressBarData: ProgressBarData,
-): React.ReactNode {
+export const CriticalityBarTooltip = (progressBarData: ProgressBarData) => {
   const filesWithNonCriticalExternalAttributions =
     progressBarData.filesWithOnlyExternalAttributionCount -
     progressBarData.filesWithHighlyCriticalExternalAttributionsCount -
@@ -179,4 +176,4 @@ export function getCriticalityBarTooltipText(
       </div>
     </MuiBox>
   );
-}
+};