Austenem/CAT-962 Show panel title on hover

CHANGELOG-show-panel-title-on-hover.md

@@ -0,0 +1 @@
+- If a title or description in a processed dataset helper panel is truncated, show the full text on hover in a tooltip.

context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx

@@ -10,7 +10,7 @@ import CloudDownloadRounded from '@mui/icons-material/CloudDownloadRounded';
 import { useIsDesktop } from 'js/hooks/media-queries';
 import { WorkspacesIcon } from 'js/shared-styles/icons';
 import { useAnimatedSidebarPosition } from 'js/shared-styles/sections/TableOfContents/hooks';
-import { LineClamp } from 'js/shared-styles/text';
+import { LineClampWithTooltip } from 'js/shared-styles/text';
 import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 
 import { formatDate } from 'date-fns/format';
@@ -53,7 +53,7 @@ interface HelperPanelBodyItemProps extends PropsWithChildren {
 }
 
 function HelperPanelBodyItem({ label, children, noWrap }: HelperPanelBodyItemProps) {
-  const body = noWrap ? <LineClamp lines={3}>{children}</LineClamp> : children;
+  const body = noWrap ? <LineClampWithTooltip lines={3}>{children}</LineClampWithTooltip> : children;
   return (
     <Stack direction="column">
       <Typography variant="overline">{label}</Typography>

context/app/static/js/components/detailPage/summary/SummaryBody/SummaryDescription.tsx

@@ -3,13 +3,13 @@ import Typography from '@mui/material/Typography';
 
 import { Entity } from 'js/components/types';
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
-import { LineClamp } from 'js/shared-styles/text';
+import { LineClampWithTooltip } from 'js/shared-styles/text';
 
 function CustomClamp({ children }: PropsWithChildren) {
   return (
-    <LineClamp lines={3} component={Typography}>
-      {children}
-    </LineClamp>
+    <LineClampWithTooltip lines={3}>
+      <Typography>{children}</Typography>
+    </LineClampWithTooltip>
   );
 }
 

context/app/static/js/shared-styles/text/LineClampWithTooltip.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import LineClamp from 'js/shared-styles/text/LineClamp';
+import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
+
+interface LineClampWithTooltipProps extends PropsWithChildren {
+  lines: number;
+}
+
+function LineClampWithTooltip({ lines, children }: LineClampWithTooltipProps) {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Check whether the child text is truncated, and show the full text in a tooltip if so
+  useEffect(() => {
+    const element = ref.current;
+    if (element) {
+      setIsTruncated(element.scrollHeight > element.clientHeight);
+    }
+  }, [children]);
+
+  const content = (
+    <LineClamp ref={ref} lines={lines}>
+      {children}
+    </LineClamp>
+  );
+
+  return isTruncated ? <SecondaryBackgroundTooltip title={children}>{content}</SecondaryBackgroundTooltip> : content;
+}
+
+export default LineClampWithTooltip;

context/app/static/js/shared-styles/text/index.ts

@@ -1,3 +1,4 @@
 import { LineClamp } from './LineClamp';
+import LineClampWithTooltip from './LineClampWithTooltip';
 
-export { LineClamp };
+export { LineClamp, LineClampWithTooltip };