Skip to content

Commit

Permalink
Update to mui x-data-grid 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Apr 6, 2023
1 parent b6ac080 commit 5034b7c
Show file tree
Hide file tree
Showing 17 changed files with 232 additions and 231 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.10.17",
"@mui/x-data-grid": "^5.0.0",
"@mui/x-data-grid": "^6.0.1",
"@oclif/dev-cli": "^1.26.9",
"@oclif/test": "^1.2.7",
"@storybook/addon-essentials": "^7.0.0-beta.35",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,7 @@ function DataGridDetails({
}}
>
<DataGrid
disableSelectionOnClick
disableRowSelectionOnClick
rowHeight={rowHeight}
rows={rows}
hideFooterSelectedRowCount
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
},
"peerDependencies": {
"@mui/material": "^5.0.0",
"@mui/x-data-grid": "^5.0.0",
"@mui/x-data-grid": "^6.0.1",
"mobx": "^6.0.0",
"mobx-react": "^7.0.0",
"mobx-state-tree": "^5.0.0",
Expand Down
2 changes: 1 addition & 1 deletion plugins/data-management/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dependencies": {
"@gmod/ucsc-hub": "^0.1.6",
"@mui/icons-material": "^5.0.1",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-data-grid": "^6.0.1",
"clsx": "^1.1.0",
"react-virtualized-auto-sizer": "^1.0.2",
"react-vtree": "^3.0.0-beta.1",
Expand Down
17 changes: 9 additions & 8 deletions ...ata-management/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { DataGrid, GridCellParams } from '@mui/x-data-grid'

// jbrowse
import { getTrackName } from '@jbrowse/core/util/tracks'
import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui'
import { ResizeHandle } from '@jbrowse/core/ui'
import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
import JBrowseMenu from '@jbrowse/core/ui/Menu'
import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
import {
Expand Down Expand Up @@ -185,7 +186,7 @@ export default observer(function FacetedSelector({
const { value, id, row } = params
return (
<>
<SanitizedHTML html={value} />
<SanitizedHTML html={value as string} />
<IconButton
onClick={e =>
setInfo({
Expand All @@ -207,15 +208,15 @@ export default observer(function FacetedSelector({
width: widthsDebounced[e] || 100, // can be undefined before useEffect update
renderCell: (params: GridCellParams) => {
const { value } = params
return value ? <SanitizedHTML html={value} /> : ''
return value ? <SanitizedHTML html={value as string} /> : ''
},
})),
...filteredMetadataKeys.map(e => ({
field: e,
width: widthsDebounced[e] || 100, // can be undefined before useEffect update
renderCell: (params: GridCellParams) => {
const { value } = params
return value ? <SanitizedHTML html={value} /> : ''
return value ? <SanitizedHTML html={value as string} /> : ''
},
})),
]
Expand Down Expand Up @@ -286,11 +287,11 @@ export default observer(function FacetedSelector({
)}
columnVisibilityModel={visible}
onColumnVisibilityModelChange={newModel => setVisible(newModel)}
headerHeight={35}
columnHeaderHeight={35}
checkboxSelection
disableSelectionOnClick
disableRowSelectionOnClick
keepNonExistentRowsSelected
onSelectionModelChange={userSelectedIds => {
onRowSelectionModelChange={userSelectedIds => {
if (!useShoppingCart) {
const a1 = shownTrackIds
const a2 = userSelectedIds as string[]
Expand All @@ -309,7 +310,7 @@ export default observer(function FacetedSelector({
model.setSelection(tracks)
}
}}
selectionModel={
rowSelectionModel={
useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds
}
columns={columns}
Expand Down
2 changes: 1 addition & 1 deletion plugins/dotplot-view/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
},
"dependencies": {
"@mui/icons-material": "^5.0.1",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-data-grid": "^6.0.1",
"@types/file-saver": "^2.0.1",
"@types/normalize-wheel": "^1.0.0",
"clone": "^2.1.2",
Expand Down
2 changes: 1 addition & 1 deletion plugins/dotplot-view/src/DotplotView/components/WarningDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default observer(function WarningDialog({
<DataGrid
rows={rows}
columns={columns}
disableSelectionOnClick
disableRowSelectionOnClick
rowHeight={25}
disableColumnMenu
/>
Expand Down
2 changes: 1 addition & 1 deletion plugins/grid-bookmark/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"@jbrowse/plugin-config": "^2.0.0",
"@jbrowse/plugin-linear-genome-view": "^2.0.0",
"@mui/material": "^5.0.0",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-data-grid": "^6.0.1",
"mobx": "^6.0.0",
"mobx-react": "^7.0.0",
"mobx-state-tree": "^5.0.0",
Expand Down
123 changes: 58 additions & 65 deletions plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { observer } from 'mobx-react'
import { Link, IconButton, Typography } from '@mui/material'
import { makeStyles } from 'tss-react/mui'
import { DataGrid, GridCellParams } from '@mui/x-data-grid'
import { getSession, assembleLocString, measureText } from '@jbrowse/core/util'
import {
getSession,
assembleLocString,
measureGridWidth,
} from '@jbrowse/core/util'

// icons
import DeleteIcon from '@mui/icons-material/Delete'

// locals
Expand All @@ -20,13 +26,6 @@ const useStyles = makeStyles()(() => ({
cursor: 'pointer',
},
}))

// creates a coarse measurement of column width, similar to code in
// BaseFeatureDetails
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const measure = (row: any, col: string) =>
Math.min(Math.max(measureText(String(row[col]), 14) + 20, 80), 1000)

const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
const { classes } = useStyles()
const [dialogRowNumber, setDialogRowNumber] = useState<number>()
Expand All @@ -49,68 +48,62 @@ const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
}
})

const columns = [
{
field: 'locString',
headerName: 'bookmark link',
width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
renderCell: (params: GridCellParams) => {
const { value } = params
return (
<Link
className={classes.link}
onClick={async event => {
event.preventDefault()
// has own error handling
await navToBookmark(value as string, views, model)
}}
>
{value}
</Link>
)
},
},
{
field: 'label',
width: Math.max(
100,
Math.max(...bookmarkRows.map(row => measure(row, 'label'))),
),
editable: true,
},
{
field: 'delete',
width: 30,
renderCell: (params: GridCellParams) => {
const { value } = params
return (
<IconButton
data-testid="deleteBookmark"
aria-label="delete"
onClick={() => {
if (value !== null && value !== undefined) {
setDialogRowNumber(+value)
}
}}
>
<DeleteIcon />
</IconButton>
)
},
},
]

return (
<>
<DataGrid
density="compact"
rows={bookmarkRows}
columns={columns}
onCellEditCommit={args => {
const { value, id } = args
model.updateBookmarkLabel(id as number, value as string)
}}
disableSelectionOnClick
columns={[
{
field: 'locString',
headerName: 'bookmark link',
width: measureGridWidth(bookmarkRows.map(row => row.locString)),
renderCell: params => {
const { value } = params
return (
<Link
className={classes.link}
href="#"
onClick={async event => {
event.preventDefault()
await navToBookmark(value as string, views, model)
}}
>
{value}
</Link>
)
},
},
{
field: 'label',
width: measureGridWidth(bookmarkRows.map(row => row.label)),
editable: true,
},
{
field: 'delete',
width: 30,
renderCell: (params: GridCellParams) => {
const { value } = params
return (
<IconButton
data-testid="deleteBookmark"
aria-label="delete"
onClick={() => {
if (value != null) {
setDialogRowNumber(+value)
}
}}
>
<DeleteIcon />
</IconButton>
)
},
},
]}
onCellEditStop={({ id, value }) =>
model.updateBookmarkLabel(id as number, value)
}
disableRowSelectionOnClick
/>

<DeleteBookmarkDialog
Expand Down
2 changes: 1 addition & 1 deletion plugins/variants/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"@gmod/tabix": "^1.5.6",
"@gmod/vcf": "^5.0.9",
"@mui/icons-material": "^5.0.2",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-data-grid": "^6.0.1",
"generic-filehandle": "^3.0.0"
},
"peerDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions plugins/variants/src/VariantFeatureWidget/VariantSampleGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export default function VariantSamples(props: {
width: widths[index],
}))

// disableSelectionOnClick helps avoid
// disableRowSelectionOnClick helps avoid
// https://github.com/mui-org/material-ui-x/issues/1197
return !preFilteredRows.length ? null : (
<BaseCard {...props} title="Samples">
Expand All @@ -135,9 +135,9 @@ export default function VariantSamples(props: {
<DataGrid
rows={rows}
columns={columns}
disableSelectionOnClick
disableRowSelectionOnClick
rowHeight={25}
headerHeight={35}
columnHeaderHeight={35}
disableColumnMenu
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion plugins/wiggle/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"@jbrowse/plugin-data-management": "^2.0.0",
"@jbrowse/plugin-linear-genome-view": "^2.0.0",
"@mui/material": "^5.0.0",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-data-grid": "^6.0.1",
"mobx": "^6.0.0",
"mobx-react": "^7.0.0",
"mobx-state-tree": "^5.0.0",
Expand Down
Loading

0 comments on commit 5034b7c

Please sign in to comment.