Improve report panel large cells handling (#698)

* Improve report panel large cells handling * Increased max tooltip width * Fixed geometry * Skip false positive failing tests
okfn · Dec 26, 2024 · 87d83ea · 87d83ea
1 parent a2565f5
commit 87d83ea
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 18 deletions.
diff --git a/client/components/Application/Content.tsx b/client/components/Application/Content.tsx
@@ -19,12 +19,18 @@ export default function Content() {
   const indexing = store.useStore((state) => state.indexing)
   const path = store.useStore((state) => state.path)
 
-  return indexing ? (
-    <LoadingContent />
-  ) : record && path ? (
-    <FileContent />
-  ) : (
-    <EmptyContent />
+  const Content = indexing ? LoadingContent : record && path ? FileContent : EmptyContent
+
+  return (
+    <Box
+      id="content"
+      sx={{
+        height: '100vh',
+        overflow: 'hidden',
+      }}
+    >
+      <Content />
+    </Box>
   )
 }
 
@@ -66,9 +72,7 @@ function FileContent() {
           store.onFileLeave()
         }}
       >
-        <Box>
-          <Controller />
-        </Box>
+        <Controller />
       </ClickAwayListener>
     </ErrorBoundary>
   )

diff --git a/client/components/Application/Layout.tsx b/client/components/Application/Layout.tsx
@@ -17,7 +17,14 @@ export default function Layout() {
     <React.Fragment>
       <Error />
       <Dialog />
-      <Box sx={{ display: 'grid', gridTemplateColumns: `${fileMenuWidth}px 1fr` }}>
+      <Box
+        sx={{
+          height: '100vh',
+          overflow: 'hidden',
+          display: 'grid',
+          gridTemplateColumns: `${fileMenuWidth}px 1fr`,
+        }}
+      >
         <Sidebar />
         <Content />
       </Box>

diff --git a/client/components/Application/Sidebar.tsx b/client/components/Application/Sidebar.tsx
@@ -21,6 +21,7 @@ export default function Sidebar() {
       id="sidebar"
       sx={{
         height: '100vh',
+        overflow: 'hidden',
         borderRight: 'solid 1px #ddd',
       }}
     >

diff --git a/client/components/Controllers/Base/Panels/Report.tsx b/client/components/Controllers/Base/Panels/Report.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box'
-import Report from '../../../Views/Report'
 import * as types from '../../../../types'
+import Report from '../../../Views/Report'
 
 export interface ReportPanelProps {
   report?: types.IReport

diff --git a/client/components/Parts/Tooltips/Light.tsx b/client/components/Parts/Tooltips/Light.tsx
@@ -1,19 +1,26 @@
-import { styled } from '@mui/material/styles'
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
+import { styled } from '@mui/material/styles'
 
 interface AllTooltipProps extends TooltipProps {
   type?: string
 }
 
 export default styled(({ className, ...props }: AllTooltipProps) => (
-  <Tooltip arrow {...props} classes={{ popper: className }} TransitionProps={{ timeout: 0 }} placement="bottom" />
+  <Tooltip
+    arrow
+    classes={{ popper: className }}
+    TransitionProps={{ timeout: 0 }}
+    placement="bottom"
+    {...props}
+  />
 ))(({ theme, type }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: type == 'fileMenu' ? theme.palette.OKFNCoolGray.main : theme.palette.common.white,
+    backgroundColor:
+      type == 'fileMenu' ? theme.palette.OKFNCoolGray.main : theme.palette.common.white,
     color: type == 'fileMenu' ? theme.palette.common.white : 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 16,
-    maxWidth: type == 'fileMenu' ? 600: null
+    maxWidth: '50vw',
   },
   [`& .${tooltipClasses.arrow}`]: {
     color: theme.palette.OKFNCoolGray.main,

diff --git a/client/components/Views/Report/Table.tsx b/client/components/Views/Report/Table.tsx
@@ -1,5 +1,7 @@
 import classNames from 'classnames'
+import { truncate } from 'lodash'
 import { useTranslation } from 'react-i18next'
+import LightTooltip from '../../Parts/Tooltips/Light'
 
 export interface ReportTableProps {
   tags: string[]
@@ -47,7 +49,18 @@ export default function ReportTable(props: ReportTableProps) {
                       fail: props.data[rowNumber].errors.has(innerIndex + 1),
                     })}
                   >
-                    <div className="cell-content">{value}</div>
+                    {value.length > 50 ? (
+                      <LightTooltip title={truncate(value, { length: 1000 })}>
+                        <div
+                          className="cell-content"
+                          style={{ lineClamp: 1, cursor: 'pointer' }}
+                        >
+                          {truncate(value, { length: 50 })}
+                        </div>
+                      </LightTooltip>
+                    ) : (
+                      <div className="cell-content">{value}</div>
+                    )}
                   </td>
                 ))}
               </tr>

diff --git a/server/endpoints/file/__spec__/test_fetch.py b/server/endpoints/file/__spec__/test_fetch.py
@@ -8,7 +8,8 @@
 # Action
 
 
-@pytest.mark.skip
+@pytest.mark.skip(reason="Pytest-vcr new version bug")
+@pytest.mark.vcr
 def test_server_file_fetch(client):
     client("/file/fetch", url=url1)
     assert client("/file/read", path=url1name).bytes == url1bytes
@@ -17,7 +18,8 @@ def test_server_file_fetch(client):
     ]
 
 
-@pytest.mark.skip
+@pytest.mark.skip(reason="Pytest-vcr new version bug")
+@pytest.mark.vcr
 def test_server_file_fetch_to_folder(client):
     client("/folder/create", path=folder1)
     path = client("/file/fetch", url=url1, folder=folder1).path