Merge pull request #1277 from DalgoT4D/data-insights-review-issues

Data insights review issues

src/components/Explore/Explore.tsx

@@ -120,7 +120,12 @@ export const Explore = () => {
                 <Tabs
                   value={selectedTab}
                   onChange={handleTabChange}
-                  sx={{ display: 'flex', alignItems: 'center', height: '100%' }}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: '100%',
+                    paddingLeft: '28px',
+                  }}
                 >
                   <Tab label="Preview" value="preview" />
 

src/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/PreviewPane.tsx

@@ -184,16 +184,16 @@ const PreviewPane = ({ height }: { height: number }) => {
           alignItems: 'center',
           display: 'flex',
           justifyContent: 'space-between',
-          padding: '5px',
+          padding: '8px 8px 8px 44px',
         }}
       >
-        <Typography variant="body1" fontWeight="bold" padding="10px">
+        <Typography variant="body1" fontWeight="bold">
           {modelToPreview?.input_name}
         </Typography>
         <Button
           onClick={handleTableDataDownload}
           variant="contained"
-          sx={{ padding: '5px' }}
+          sx={{ padding: '5px ' }}
           disabled={downloadInProgress}
           data-testid="downloadbutton"
         >
@@ -215,15 +215,15 @@ const PreviewPane = ({ height }: { height: number }) => {
             <TableHead>
               {getHeaderGroups().map((headerGroup: any) => (
                 <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header: any) => (
+                  {headerGroup.headers.map((header: any, i: number) => (
                     <TableCell
                       key={header.id}
                       colSpan={header.colSpan}
                       sx={{
                         backgroundColor: '#F5FAFA',
                         border: '1px solid #dddddd',
                         borderLeft: 'unset',
-                        padding: '8px',
+                        padding: i == 0 ? '8px 0 8px 40px' : '8px',
                         textAlign: 'left',
                         fontWeight: 700,
                         color: 'rgba(15, 36, 64, 0.57)',
@@ -250,14 +250,14 @@ const PreviewPane = ({ height }: { height: number }) => {
               {getRowModel().rows.map((row: any) => {
                 return (
                   <TableRow key={row.id} sx={{ boxShadow: 'unset' }}>
-                    {row.getVisibleCells().map((cell: any) => (
+                    {row.getVisibleCells().map((cell: any, i: number) => (
                       <TableCell
                         key={cell.id}
                         sx={{
                           fontWeight: 600,
                           borderBottom: '1px solid #dddddd',
                           borderRight: '1px solid #dddddd',
-
+                          padding: i === 0 ? '8px 40px 8px 44px' : '8px',
                           textAlign: 'left',
                           fontSize: '0.8rem',
                         }}
@@ -295,7 +295,7 @@ const PreviewPane = ({ height }: { height: number }) => {
         height: height,
       }}
     >
-      Select a table to view
+      Select a table from the left pane to view
     </Box>
   );
 };

src/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/StatisticsPane.tsx

@@ -160,7 +160,7 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
       {
         accessorKey: 'name',
         header: 'Column name',
-        size: 150,
+        size: 160,
         enableSorting: true,
       },
       {
@@ -424,8 +424,8 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
               alignItems: 'center',
             }}
           >
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Typography variant="body1" fontWeight="bold" padding="10px">
+            <Box sx={{ display: 'flex', alignItems: 'center', padding: '6px 8px 6px 44px' }}>
+              <Typography variant="body1" fontWeight="bold">
                 {modelToPreview?.input_name}
               </Typography>
               <Box
@@ -473,15 +473,16 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
                 <TableHead>
                   {getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
+                      {headerGroup.headers.map((header, i) => (
                         <TableCell
                           key={header.id}
                           colSpan={header.colSpan}
                           sx={{
                             width: header.column.columnDef.size,
                             backgroundColor: '#F5FAFA',
                             border: '1px solid #dddddd',
-                            padding: '8px',
+                            padding: i == 0 ? '8px 8px 8px 40px' : '8px',
+
                             textAlign: 'left',
                             fontWeight: 700,
                             color: 'rgba(15, 36, 64, 0.57)',
@@ -516,7 +517,7 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
                           height: '180px',
                         }}
                       >
-                        {row.getVisibleCells().map((cell) => {
+                        {row.getVisibleCells().map((cell, i) => {
                           return (
                             <TableCell
                               key={cell.id}
@@ -526,6 +527,7 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
                                 textAlign: 'left',
                                 borderBottom: '1px solid #ddd',
                                 fontSize: '0.8rem',
+                                padding: i == 0 ? '8px 8px 8px 46px' : '8px',
                               }}
                             >
                               {cell.getValue() !== undefined ? (
@@ -578,7 +580,7 @@ export const StatisticsPane: React.FC<StatisticsPaneProps> = ({ height }) => {
         height: debouncedHeight,
       }}
     >
-      Select a table to view
+      Select a table from the left pane to view
     </Box>
   );
 };

src/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/__tests__/PreviewPane.test.tsx

@@ -109,11 +109,11 @@ describe('PreviewPane Component', () => {
     });
   });
 
-  test('renders "Select a table to view" message when no table is selected', () => {
+  test('renders "Select a table from the left pane to view " message when no table is selected', () => {
     usePreviewAction.mockReturnValue({ previewAction: { type: 'clear-preview' } });
 
     render(<PreviewPane height={600} />);
 
-    expect(screen.getByText('Select a table to view')).toBeInTheDocument();
+    expect(screen.getByText('Select a table from the left pane to view ')).toBeInTheDocument();
   });
 });

src/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/__tests__/StatisticsPane.test.tsx

@@ -122,7 +122,7 @@ describe('StatisticsPane', () => {
     );
 
     // Check for the message when no model is selected
-    expect(screen.getByText(/Select a table to view/i)).toBeInTheDocument();
+    expect(screen.getByText(/Select a table from the left pane to view /i)).toBeInTheDocument();
   });
 
   it('should resolve when status is completed', async () => {

src/components/TransformWorkflow/FlowEditor/Components/ProjectTree.tsx

@@ -11,8 +11,6 @@ import { trimString } from '@/utils/common';
 import Image from 'next/image';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { GlobalContext } from '@/contexts/ContextProvider';
-import SyncIcon from '@/assets/icons/sync.svg';
-import styles from '@/styles/Common.module.css';
 
 const Node = ({ node, style, dragHandle, handleSyncClick, isSyncing }: any) => {
   const globalContext = useContext(GlobalContext);
@@ -24,6 +22,11 @@ const Node = ({ node, style, dragHandle, handleSyncClick, isSyncing }: any) => {
   const data: DbtSourceModel = node.data;
   let name: string | JSX.Element = !node.isLeaf ? data.schema : data.input_name;
   name = trimString(name, stringLengthWithWidth);
+  useEffect(() => {
+    if (!node.isLeaf && node.level === 0 && !node.isOpen) {
+      node.toggle();
+    }
+  }, [node]);
 
   return (
     <Box
@@ -36,7 +39,7 @@ const Node = ({ node, style, dragHandle, handleSyncClick, isSyncing }: any) => {
         width: (250 * width) / 270 + 'px',
         opacity: permissions.includes('can_create_dbt_model') ? 1 : 0.5,
       }}
-      onClick={() => (node.isLeaf ? undefined : node.toggle())}
+      onClick={() => (node.isLeaf || node.level === 0 ? undefined : node.toggle())}
     >
       {node.isLeaf ? (
         <Image src={TocIcon} alt="Toc icon" />
@@ -120,15 +123,14 @@ const ProjectTree = ({
       };
     });
 
-    setProjectTreeData([{ id: '0', schema: 'Store', children: treeData }]);
+    setProjectTreeData([{ id: '0', schema: 'Schemas', children: treeData }]);
   };
 
   useEffect(() => {
     if (dbtSourceModels) {
       constructAndSetProjectTreeData(dbtSourceModels);
     }
   }, [dbtSourceModels]);
-
   return (
     <Box
       sx={{

src/components/TransformWorkflow/FlowEditor/FlowEditor.tsx

@@ -139,7 +139,7 @@ const LowerSection = ({
         <Tabs
           value={selectedTab}
           onChange={handleTabChange}
-          sx={{ display: 'flex', alignItems: 'center', height: '100%' }}
+          sx={{ display: 'flex', alignItems: 'center', height: '100%', paddingLeft: '28px' }}
         >
           <Tab label="Preview" value="preview" />
           <Tab label="Logs" value="logs" />