Skip to content

Commit

Permalink
Remove resize bar usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed May 23, 2024
1 parent 89ae300 commit 5712b47
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 354 deletions.
14 changes: 2 additions & 12 deletions packages/core/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { Checkbox, FormControlLabel, Typography } from '@mui/material'

// locals
import { measureGridWidth, getStr } from '../../util'
import ResizeBar from '../../ui/ResizeBar'
import FieldName from './FieldName'
import { useResizeBar } from '../../ui/useResizeBar'
import { SanitizedHTML } from '../../ui'

const useStyles = makeStyles()(theme => ({
Expand Down Expand Up @@ -38,7 +36,6 @@ export default function DataGridDetails({
value: Record<string, unknown>[]
}) {
const { classes } = useStyles()
const { ref, scrollLeft } = useResizeBar()
const [checked, setChecked] = useState(false)
const keys = Object.keys(value[0]).sort()
const unionKeys = new Set(keys)
Expand Down Expand Up @@ -67,9 +64,7 @@ export default function DataGridDetails({
} else {
colNames = [...unionKeys]
}
const [widths, setWidths] = useState(
colNames.map(e => measureGridWidth(rows.map(r => r[e]))),
)
const widths = colNames.map(e => measureGridWidth(rows.map(r => r[e])))

if (unionKeys.size < keys.length + 5) {
return (
Expand All @@ -84,12 +79,7 @@ export default function DataGridDetails({
}
label={<Typography variant="body2">Show options</Typography>}
/>
<div className={classes.margin} ref={ref}>
<ResizeBar
widths={widths}
setWidths={setWidths}
scrollLeft={scrollLeft}
/>
<div className={classes.margin}>
<DataGrid
disableRowSelectionOnClick
// @ts-expect-error the rows gets confused by the renderCell of the
Expand Down
109 changes: 0 additions & 109 deletions packages/core/ui/ResizeBar.tsx
View file

This file was deleted.

60 changes: 35 additions & 25 deletions ...ata-management/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@ import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid'
// jbrowse
import { ResizeHandle } from '@jbrowse/core/ui'
import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
import ResizeBar from '@jbrowse/core/ui/ResizeBar'
import { getEnv, useDebounce } from '@jbrowse/core/util'
import { getEnv, measureGridWidth } from '@jbrowse/core/util'
import { AnyConfigurationModel } from '@jbrowse/core/configuration'
import { useResizeBar } from '@jbrowse/core/ui/useResizeBar'
import { makeStyles } from 'tss-react/mui'

// locals
Expand Down Expand Up @@ -57,14 +55,42 @@ const FacetedSelector = observer(function FacetedSelector({
filteredNonMetadataKeys,
filteredMetadataKeys,
visible,
widths,
} = faceted
const { pluginManager } = getEnv(model)
const { ref, scrollLeft } = useResizeBar()
const widthsDebounced = useDebounce(widths, 200)

type T = GridColDef<(typeof filteredRows)[0]>

const widths = {
name:
measureGridWidth(
rows.map(r => r.name),
{ maxWidth: 500, stripHTML: true },
) + 15,
...Object.fromEntries(
filteredNonMetadataKeys
.filter(f => visible[f])
.map(e => [
e,
measureGridWidth(
rows.map(r => r[e as keyof typeof r] as string),
{ maxWidth: 400, stripHTML: true },
),
]),
),
...Object.fromEntries(
filteredMetadataKeys
.filter(f => visible['metadata.' + f])
.map(e => {
return [
'metadata.' + e,
measureGridWidth(
rows.map(r => r.metadata[e]),
{ maxWidth: 400, stripHTML: true },
),
]
}),
),
} as Record<string, number | undefined>
const columns: T[] = [
{
field: 'name',
Expand All @@ -79,12 +105,12 @@ const FacetedSelector = observer(function FacetedSelector({
</div>
)
},
width: widthsDebounced.name ?? 100,
width: widths.name ?? 100,
},
...filteredNonMetadataKeys.map(e => {
return {
field: e,
width: widthsDebounced[e] ?? 100,
width: widths[e] ?? 100,
renderCell: params => {
const val = params.value
return val ? (
Expand All @@ -101,7 +127,7 @@ const FacetedSelector = observer(function FacetedSelector({
headerName: ['name', ...filteredNonMetadataKeys].includes(e)
? `${e} (from metadata)`
: e,
width: widthsDebounced['metadata.' + e] ?? 100,
width: widths['metadata.' + e] ?? 100,
valueGetter: (_, row) => `${row.metadata[e]}`,
renderCell: params => {
const val = params.value
Expand All @@ -119,7 +145,6 @@ const FacetedSelector = observer(function FacetedSelector({
<>
<FacetedHeader model={model} />
<div
ref={ref}
style={{
display: 'flex',
overflow: 'hidden',
Expand All @@ -133,21 +158,6 @@ const FacetedSelector = observer(function FacetedSelector({
width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
}}
>
<ResizeBar
checkbox
widths={Object.values(widths).map(f => f ?? 100)}
setWidths={newWidths =>
faceted.setWidths(
Object.fromEntries(
Object.entries(widths).map((entry, idx) => [
entry[0],
newWidths[idx],
]),
),
)
}
scrollLeft={scrollLeft}
/>
<DataGrid
rows={filteredRows}
columnVisibilityModel={visible}
Expand Down
51 changes: 2 additions & 49 deletions plugins/data-management/src/HierarchicalTrackSelectorWidget/facetedModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ import {
readConfObject,
} from '@jbrowse/core/configuration'
import { getTrackName } from '@jbrowse/core/util/tracks'
import {
getSession,
localStorageGetItem,
measureGridWidth,
} from '@jbrowse/core/util'
import { getSession, localStorageGetItem } from '@jbrowse/core/util'
import { autorun, observable } from 'mobx'
import { getRootKeys, findNonSparseKeys } from './facetedUtil'
import { getRowStr } from './components/faceted/util'
Expand Down Expand Up @@ -55,7 +51,6 @@ export function facetedStateTreeF() {
})
.volatile(() => ({
visible: {} as Record<string, boolean>,
widths: {} as Record<string, number | undefined>,
useShoppingCart: false,
filters: observable.map<string, string[]>(),
}))
Expand Down Expand Up @@ -193,56 +188,14 @@ export function facetedStateTreeF() {
setVisible(args: Record<string, boolean>) {
self.visible = args
},
/**
* #action
*/
setWidths(args: Record<string, number | undefined>) {
self.widths = args
},

afterAttach() {
addDisposer(
self,
autorun(() => {
this.setVisible(Object.fromEntries(self.fields.map(c => [c, true])))
}),
)

addDisposer(
self,
autorun(() => {
this.setWidths({
name:
measureGridWidth(
self.rows.map(r => r.name),
{ maxWidth: 500, stripHTML: true },
) + 15,
...Object.fromEntries(
self.filteredNonMetadataKeys
.filter(f => self.visible[f])
.map(e => [
e,
measureGridWidth(
self.rows.map(r => r[e as keyof typeof r] as string),
{ maxWidth: 400, stripHTML: true },
),
]),
),
...Object.fromEntries(
self.filteredMetadataKeys
.filter(f => self.visible['metadata.' + f])
.map(e => {
return [
'metadata.' + e,
measureGridWidth(
self.rows.map(r => r.metadata[e]),
{ maxWidth: 400, stripHTML: true },
),
]
}),
),
})
}),
)
},
}))
}
Expand Down
Loading

0 comments on commit 5712b47

Please sign in to comment.