Skip to content

Commit

Permalink
Merge pull request #1181 from DalgoT4D/feature/move-stats-out
Browse files Browse the repository at this point in the history 
Moving data statistics out of UI4t
  • Loading branch information
@Ishankoradia
Ishankoradia authored Nov 2, 2024
2 parents 03b04ca + d8aa8b1 commit 09ca310
Show file tree
Hide file tree
Showing 14 changed files with 355 additions and 77 deletions.
25 changes: 25 additions & 0 deletions src/assets/icons/explore.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from 'react';
const SvgComponent = (props: any) => (
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
<mask
id="a"
width={24}
height={24}
x={0}
y={0}
maskUnits="userSpaceOnUse"
style={{
maskType: 'alpha',
}}
>
<path fill="#D9D9D9" d="M0 0h24v24H0z" />
</mask>
<g mask="url(#a)">
<path
fill={props.fill || '#728090'}
d="M2.803 18.82a.776.776 0 0 1-.572-.23.777.777 0 0 1-.231-.573c0-.227.077-.418.23-.571a.776.776 0 0 1 .573-.23h8.859c.227 0 .418.076.571.23.154.154.231.345.231.572a.776.776 0 0 1-.23.572.776.776 0 0 1-.572.23h-8.86Zm0-5.237a.776.776 0 0 1-.572-.23A.777.777 0 0 1 2 12.78c0-.227.077-.418.23-.571a.776.776 0 0 1 .573-.231H6.26c.227 0 .418.077.572.23.153.155.23.345.23.573a.777.777 0 0 1-.23.572.778.778 0 0 1-.572.23H2.803Zm0-5.237a.776.776 0 0 1-.572-.231A.777.777 0 0 1 2 7.543c0-.228.077-.418.23-.572a.776.776 0 0 1 .573-.23H6.26c.227 0 .418.077.572.23.153.155.23.345.23.573a.776.776 0 0 1-.23.572.778.778 0 0 1-.572.23H2.803Zm11.462 7.295c-1.341 0-2.484-.469-3.429-1.405-.945-.938-1.417-2.076-1.417-3.416 0-1.34.472-2.477 1.418-3.414C11.782 6.469 12.926 6 14.267 6c1.342 0 2.484.469 3.428 1.406.944.937 1.416 2.073 1.416 3.41 0 .496-.078.985-.233 1.466-.155.48-.384.921-.687 1.322l3.576 3.545a.731.731 0 0 1 .233.557.776.776 0 0 1-.233.571.748.748 0 0 1-.556.222.794.794 0 0 1-.571-.222l-3.576-3.546a4.707 4.707 0 0 1-1.333.677c-.48.155-.97.233-1.466.233Zm0-1.605c.9 0 1.665-.312 2.296-.937.63-.624.945-1.383.945-2.279 0-.895-.315-1.654-.945-2.279-.63-.624-1.396-.936-2.296-.936-.9 0-1.666.312-2.296.936-.63.625-.945 1.384-.945 2.28 0 .895.315 1.654.945 2.278.63.625 1.395.937 2.296.937Z"
/>
</g>
</svg>
);
export default SvgComponent;
2 changes: 1 addition & 1 deletion src/components/DBT/DBTTransformType.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const Transition = React.forwardRef(function Transition(
return <Slide direction="up" ref={ref} {...props} timeout={400} />;
});

const TopNavBar = ({ handleClose }: any) => (
export const TopNavBar = ({ handleClose }: any) => (
<Box sx={{ display: 'flex' }}>
<Box
sx={{
Expand Down
148 changes: 148 additions & 0 deletions src/components/Explore/Explore.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import { PageHead } from '@/components/PageHead';
import { WarehouseTable } from '@/components/TransformWorkflow/FlowEditor/Components/Canvas';
import { StatisticsPane } from '@/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/StatisticsPane';

import { httpGet } from '@/helpers/http';
import { Box, Dialog, Divider, Tab, Tabs } from '@mui/material';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useContext, useEffect, useState } from 'react';
import { TopNavBar, Transition } from '@/components/DBT/DBTTransformType';
import { ResizableBox } from 'react-resizable';
import ProjectTree from '@/components/TransformWorkflow/FlowEditor/Components/ProjectTree';
import PreviewPane from '@/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/PreviewPane';
import { NodeApi } from 'react-arborist';
import { usePreviewAction } from '@/contexts/FlowEditorPreviewContext';
import { successToast } from '../ToastMessage/ToastHelper';
import { GlobalContext } from '@/contexts/ContextProvider';

export const Explore = () => {
const { data: session } = useSession();
const [selectedTab, setSelectedTab] = useState<'preview' | 'statistics'>('preview');
const router = useRouter();
const globalContext = useContext(GlobalContext);
const [loading, setLoading] = useState(false);

const [dialogueOpen, setDialogueOpen] = useState(true);
const [width, setWidth] = useState(260);

const [height, setheight] = useState(500);
const [sourceModels, setSourcesModels] = useState<WarehouseTable[]>([]);

const { setPreviewAction } = usePreviewAction();

const fetchSourcesModels = () => {
setLoading(true);
httpGet(session, 'warehouse/sync_tables')
.then((response: WarehouseTable[]) => {
setSourcesModels(response);
successToast('Tables synced with warehouse', [], globalContext);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
setLoading(false);
});
};

useEffect(() => {
fetchSourcesModels();
}, []);

useEffect(() => {
const dialogBox = document.querySelector('.MuiDialog-container');

if (dialogBox) {
const fullHeight = dialogBox?.clientHeight - 100;
setheight(fullHeight);
}
}, [sourceModels]);

const onResize = (event: any, { size }: any) => {
setWidth(size.width);
};

const handleTabChange = (event: React.SyntheticEvent, newValue: 'preview' | 'statistics') => {
setSelectedTab(newValue);
};

const handleNodeClick = (nodes: NodeApi<any>[]) => {
if (nodes.length > 0 && nodes[0].isLeaf) {
setPreviewAction({ type: 'preview', data: nodes[0].data });
}
};
return (
<>
<PageHead title="Dalgo | Explore" />
<Dialog fullScreen open={dialogueOpen} TransitionComponent={Transition}>
<TopNavBar
handleClose={() => {
setDialogueOpen(false);
router.push('/pipeline/ingest');
}}
/>

<Box
sx={{
flexGrow: 1,
display: 'flex',
overflow: 'inherit',
position: 'relative',
}}
>
<ResizableBox
axis="x"
width={width}
onResize={onResize}
minConstraints={[280, Infinity]}
maxConstraints={[550, Infinity]}
resizeHandles={['e']}
>
<ProjectTree
dbtSourceModels={sourceModels}
handleNodeClick={handleNodeClick}
handleSyncClick={fetchSourcesModels}
isSyncing={loading}
/>
</ResizableBox>
<Divider orientation="vertical" sx={{ color: 'black' }} />
<Box sx={{ width: `calc(100% - ${width}px)` }}>
<Box sx={{ height: 'unset' }}>
<Box
sx={{
height: '44px',
display: 'flex',
alignItems: 'center',
background: '#F5FAFA',
borderTop: '1px solid #CCCCCC',
borderBottom: '1px solid #CCCCCC',
}}
>
<Tabs
value={selectedTab}
onChange={handleTabChange}
sx={{
display: 'flex',
alignItems: 'center',
height: '100%',
paddingLeft: '28px',
}}
>
<Tab label="Preview" value="preview" />

<Tab label="Data statistics" value="statistics" />
</Tabs>
</Box>
<Box>
{selectedTab === 'preview' && <PreviewPane height={height} />}

{selectedTab === 'statistics' && <StatisticsPane height={height} />}
</Box>
</Box>
</Box>
</Box>
</Dialog>
</>
);
};
45 changes: 45 additions & 0 deletions src/components/Explore/__tests__/Explore.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { render, screen, waitFor } from '@testing-library/react';
import { SessionProvider } from 'next-auth/react';
import { Session } from 'next-auth';
import { Explore } from '../Explore';
import '@testing-library/jest-dom';

jest.mock('next/router', () => ({
useRouter() {
return {
push: jest.fn(),
};
},
}));

window.ResizeObserver =
window.ResizeObserver ||
jest.fn().mockImplementation(() => ({
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
}));

const mockSession: Session = {
expires: 'false',
user: { email: 'a' },
};

const mockedFetch = jest.fn().mockResolvedValueOnce({
ok: true,
json: jest.fn().mockResolvedValueOnce([]),
});
(global as any).fetch = mockedFetch;

it('renders the explore page with preview and data statistics tab', async () => {
render(
<SessionProvider session={mockSession}>
<Explore />
</SessionProvider>
);

await waitFor(() => {
expect(screen.getByText('Preview')).toBeInTheDocument();
expect(screen.getByText('Data statistics')).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion src/components/SideDrawer/SideDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
!item.parent && (
<Fragment key={item.title}>
<ListItem
sx={{ px: 1.5 }}
sx={{ px: 1.5, py: 0.5 }}
className={item.className}
data-testid={`menu-item-${item.index}`}
>
Expand Down
22 changes: 17 additions & 5 deletions src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,27 @@ export interface OperationNodeData {
seq?: number;
}

export type DbtSourceModel = {
source_name: string;
// export type DbtSourceModel = {
// source_name: string;
// input_name: string;
// input_type: 'model' | 'source';
// schema: string;
// id: string;
// type: typeof SRC_MODEL_NODE;
// isDummy?: boolean;
// };

export interface WarehouseTable {
id: string;
input_name: string;
input_type: 'model' | 'source';
schema: string;
id: string;
type: typeof SRC_MODEL_NODE;
}
export interface DbtSourceModel extends WarehouseTable {
source_name: string;
input_type: 'model' | 'source';
isDummy?: boolean;
};
}

// export interface OperationNodeType extends NodeProps {
// data: OperationNodeData;
Expand Down
17 changes: 9 additions & 8 deletions src/components/TransformWorkflow/FlowEditor/Components/LowerSectionTabs/PreviewPane.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,16 @@ const PreviewPane = ({ height }: { height: number }) => {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
padding: '5px',
padding: '8px 20px 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"
>
Expand All @@ -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)',
Expand All @@ -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',
}}
Expand All @@ -283,6 +283,7 @@ const PreviewPane = ({ height }: { height: number }) => {
setPageSize(e.target.value);
setCurrentPageIndex(1);
}}
sx={{ marginRight: '20px' }}
/>
</Box>
</Box>
Expand All @@ -295,7 +296,7 @@ const PreviewPane = ({ height }: { height: number }) => {
height: height,
}}
>
Select a table to view
Select a table from the left pane to view
</Box>
);
};
Expand Down
Loading

0 comments on commit 09ca310

Please sign in to comment.