From 58537224dfe47b87b751fa3e77fa094375612d79 Mon Sep 17 00:00:00 2001 From: Aid Thompson Date: Tue, 23 Nov 2021 15:20:23 +0000 Subject: [PATCH] mixnode datagrid performant --- .../src/components/CustomColumnHeading.tsx | 2 + .../src/components/Newniversal-DataGrid.tsx | 105 ++++++++++++++ explorer/src/components/TableToolbar.tsx | 8 +- explorer/src/pages/Mixnodes/index.tsx | 135 +++++++++--------- explorer/src/styles.css | 2 +- explorer/src/utils/index.ts | 11 +- 6 files changed, 184 insertions(+), 79 deletions(-) create mode 100644 explorer/src/components/Newniversal-DataGrid.tsx diff --git a/explorer/src/components/CustomColumnHeading.tsx b/explorer/src/components/CustomColumnHeading.tsx index b4b597d9fa..c7b084b14e 100644 --- a/explorer/src/components/CustomColumnHeading.tsx +++ b/explorer/src/components/CustomColumnHeading.tsx @@ -17,6 +17,8 @@ export const CustomColumnHeading: React.FC<{ headingTitle: string }> = ({ fontWeight: 'bold', fontSize: 14, padding: 0, + // border: '1px solid red', + // minWidth: 300, }} data-testid={headingTitle} > diff --git a/explorer/src/components/Newniversal-DataGrid.tsx b/explorer/src/components/Newniversal-DataGrid.tsx new file mode 100644 index 0000000000..e50cbf5032 --- /dev/null +++ b/explorer/src/components/Newniversal-DataGrid.tsx @@ -0,0 +1,105 @@ +import * as React from 'react'; +import { makeStyles } from '@mui/styles'; +import { + DataGrid, + GridColDef, + GridColumns, + GridRowModel, + GridSortModel, + useGridApiContext, + useGridState, +} from '@mui/x-data-grid'; +import Pagination from '@mui/material/Pagination'; +import { SxProps } from '@mui/system'; +import { LinearProgress } from '@mui/material'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + }, +}); + +export const cellStyles: SxProps = { + width: '100%', + padding: 0, + maxHeight: 100, + color: 'inherit', + textDecoration: 'none', + fontWeight: 400, + fontSize: 12, + lineHeight: 2, + textAlign: 'start', + wordBreak: 'break-word', + whiteSpace: 'break-spaces', +}; + +function CustomPagination() { + const apiRef = useGridApiContext(); + const [state] = useGridState(apiRef); + + const classes = useStyles(); + + return ( + apiRef.current.setPage(value - 1)} + /> + ); +} + +type DataGridProps = { + columns: GridColDef[]; + pagination?: boolean; + hideFooter?: boolean | undefined; + pageSize?: string | undefined; + rows: { + id: number | null; + lastName: string | null; + firstName: string | null; + age: number | null; + }[]; + loading?: boolean; +}; +export const NewniversalDataGrid: React.FC = ({ + rows, + columns, + loading, + pagination, + hideFooter, + pageSize, +}) => { + if (loading) return ; + if (!loading) + return ( + + ); + return null; +}; + +NewniversalDataGrid.defaultProps = { + loading: false, + pagination: false, + hideFooter: true, + pageSize: '10', + // sortModel: undefined, +}; diff --git a/explorer/src/components/TableToolbar.tsx b/explorer/src/components/TableToolbar.tsx index b65a87dff5..32c8ea6d0d 100644 --- a/explorer/src/components/TableToolbar.tsx +++ b/explorer/src/components/TableToolbar.tsx @@ -25,7 +25,7 @@ export const TableToolbar: React.FC = ({ width: '100%', marginBottom: 2, display: 'flex', - flexDirection: matches ? 'column' : 'row', + flexDirection: matches ? 'column-reverse' : 'row', justifyContent: 'space-between', }} > @@ -35,8 +35,8 @@ export const TableToolbar: React.FC = ({ value={pageSize} onChange={onChangePageSize} sx={{ - width: 200, - marginBottom: matches ? 2 : 0, + width: matches ? 100 : 200, + // marginBottom: matches ? 2 : 0, }} > @@ -53,7 +53,7 @@ export const TableToolbar: React.FC = ({ { const { mixnodes } = useMainContext(); @@ -51,8 +50,9 @@ export const PageMixnodes: React.FC = () => { const columns: GridColDef[] = [ { field: 'owner', + headerName: 'Owner', renderHeader: () => , - flex: 3, + width: 380, headerAlign: 'left', headerClassName: 'MuiDataGrid-header-override', renderCell: (params: GridRenderCellParams) => ( @@ -68,10 +68,10 @@ export const PageMixnodes: React.FC = () => { }, { field: 'identity_key', + headerName: 'Identity Key', renderHeader: () => , - flex: 3, + width: 380, headerAlign: 'left', - headerClassName: 'MuiDataGrid-header-override', renderCell: (params: GridRenderCellParams) => ( { { field: 'bond', headerName: 'Bond', - type: 'number', - headerAlign: 'left', - flex: 1, - headerClassName: 'MuiDataGrid-header-override', renderHeader: () => , + type: 'number', + headerClassName: 'MuiDataGrid-header-override', + width: 150, + headerAlign: 'left', renderCell: (params: GridRenderCellParams) => { const bondAsPunk = printableCoin({ amount: params.value as string, @@ -107,44 +107,11 @@ export const PageMixnodes: React.FC = () => { ); }, }, - { - field: 'self_percentage', - headerName: 'Self %', - headerAlign: 'left', - type: 'number', - width: 99, - headerClassName: 'MuiDataGrid-header-override', - renderHeader: () => , - renderCell: (params: GridRenderCellParams) => ( - - {params.value}% - - ), - }, - { - field: 'host', - renderHeader: () => , - flex: 1, - headerAlign: 'left', - headerClassName: 'MuiDataGrid-header-override', - renderCell: (params: GridRenderCellParams) => ( - - {params.value} - - ), - }, { field: 'location', + headerName: 'Location', renderHeader: () => , - flex: 1, + width: 150, headerAlign: 'left', headerClassName: 'MuiDataGrid-header-override', renderCell: (params: GridRenderCellParams) => ( @@ -157,12 +124,47 @@ export const PageMixnodes: React.FC = () => { ), }, { - field: 'layer', - headerAlign: 'left', + field: 'self_percentage', + headerName: 'Self %', + width: 110, headerClassName: 'MuiDataGrid-header-override', - renderHeader: () => , - flex: 1, + renderHeader: () => , type: 'number', + headerAlign: 'left', + renderCell: (params: GridRenderCellParams) => ( + + {params.value}% + + ), + }, + { + field: 'host', + headerName: 'Host', + renderHeader: () => , + headerClassName: 'MuiDataGrid-header-override', + width: 110, + headerAlign: 'left', + renderCell: (params: GridRenderCellParams) => ( + + {params.value} + + ), + }, + { + field: 'layer', + headerName: 'Layer', + renderHeader: () => , + headerClassName: 'MuiDataGrid-header-override', + width: 110, + headerAlign: 'left', renderCell: (params: GridRenderCellParams) => ( { return ( <> - <Grid> - <Grid item> - <ContentCard> + <Grid container> + <Grid item xs={12}> + <Card + sx={{ + padding: 2, + height: '100%', + // border: '1px solid blue', + }} + > <TableToolbar onChangeSearch={handleSearch} onChangePageSize={handlePageSize} pageSize={pageSize} searchTerm={searchTerm} /> - <UniversalDataGrid - loading={mixnodes?.isLoading} - columnsData={columns} - rows={mixnodeToGridRow(filteredMixnodes)} - pageSize={pageSize} + <NewniversalDataGrid pagination + rows={mixnodeToGridRow(filteredMixnodes)} + columns={columns} hideFooter={false} - sortModel={[ - { - field: 'bond', - sort: 'desc', - }, - ]} + pageSize={pageSize} /> - </ContentCard> + </Card> </Grid> </Grid> </> diff --git a/explorer/src/styles.css b/explorer/src/styles.css index 38f4b9de4a..5bc4569b5b 100644 --- a/explorer/src/styles.css +++ b/explorer/src/styles.css @@ -4,7 +4,7 @@ the theme declaration in index.tsx or the style prop in <DataGrid /> */ -.MuiDataGrid-sortIcon { +.MuiDataGrid-sortIcon, .MuiDataGrid-menuIcon { display: none !important; } diff --git a/explorer/src/utils/index.ts b/explorer/src/utils/index.ts index 0e78e27ebe..2cc8efeb13 100644 --- a/explorer/src/utils/index.ts +++ b/explorer/src/utils/index.ts @@ -65,9 +65,7 @@ export function countryDataToGridRow( return sorted; } -export function mixnodeToGridRow( - arrayOfMixnodes: MixNodeResponse, -): MixnodeRowType[] { +export function mixnodeToGridRow(arrayOfMixnodes: MixNodeResponse): any { return !arrayOfMixnodes ? [] : arrayOfMixnodes.map((mn) => { @@ -75,16 +73,15 @@ export function mixnodeToGridRow( const delegations = Number(mn.total_delegation.amount) || 0; const totalBond = pledge + delegations; const selfPercentage = ((pledge * 100) / totalBond).toFixed(2); - return { id: mn.owner, owner: mn.owner, - location: mn?.location?.country_name || '', identity_key: mn.mix_node.identity_key || '', bond: totalBond || 0, + location: mn?.location?.country_name || '', self_percentage: selfPercentage, - host: mn.mix_node.host || '', - layer: mn.layer || '', + host: mn?.mix_node?.host || '', + layer: mn?.layer || '', }; }); }