[feat] Set max height for Tooltip component #1889

aimhubio · Jul 6, 2022 · adecf68 · adecf68
1 parent 612abcc
commit adecf68
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/aim/web/ui/src/App.scss b/aim/web/ui/src/App.scss
@@ -1,5 +1,6 @@
 @import 'src/styles/base/_reset.scss';
 @import 'src/styles/components/_autocomplete.scss';
+@import 'src/styles/components/_tooltip.scss';
 @import 'src/styles/components/_inputs.scss';
 @import 'src/styles/_global.scss';
 

diff --git a/aim/web/ui/src/components/Table/GroupedColumnHeader.tsx b/aim/web/ui/src/components/Table/GroupedColumnHeader.tsx
@@ -6,25 +6,25 @@ import { formatValue } from 'utils/formatValue';
 import { isSystemMetric } from 'utils/isSystemMetric';
 import { formatSystemMetricName } from 'utils/formatSystemMetricName';
 
-const TITLE_MAX_LENGTH = 5;
+const TITLE_MAX_ROW_LENGTH = 5;
 function GroupedColumnHeader({
   data,
 }: {
   data: Array<string | number>;
 }): React.FunctionComponentElement<React.ReactNode> {
   const Title: React.ReactNode = React.useMemo(() => {
     const filteredData = data.filter((val) => val);
-    const isEllipsis: boolean = filteredData.length > TITLE_MAX_LENGTH;
+    const isEllipsis: boolean = filteredData.length > TITLE_MAX_ROW_LENGTH;
     return filteredData
-      .slice(0, isEllipsis ? TITLE_MAX_LENGTH : data.length)
+      .slice(0, isEllipsis ? TITLE_MAX_ROW_LENGTH : data.length)
       .map((val: any, index) => {
         const value = isSystemMetric(val)
           ? formatSystemMetricName(val)
           : formatValue(val);
         return (
           <div key={val}>
             {value}
-            {index + 1 === TITLE_MAX_LENGTH ? '...' : ''}
+            {index + 1 === TITLE_MAX_ROW_LENGTH ? '...' : ''}
           </div>
         );
       });

diff --git a/aim/web/ui/src/styles/abstracts/_variables.scss b/aim/web/ui/src/styles/abstracts/_variables.scss
@@ -152,3 +152,4 @@ $breakpoints: (
 );
 $run-overview-sidebar-width: 20rem;
 $container-max-width-without-paddings: 86.75rem;
+$tooltip-max-height: 18.75rem;
diff --git a/aim/web/ui/src/styles/components/_tooltip.scss b/aim/web/ui/src/styles/components/_tooltip.scss
@@ -0,0 +1,6 @@
+@use 'src/styles/abstracts' as *;
+
+.MuiTooltip-tooltip {
+  max-height: $tooltip-max-height;
+  overflow: hidden;
+}