From 833942c00c00bebd3ed6dfe1f7eb7ba92fd49e4d Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 14 Jun 2024 11:14:54 -0400 Subject: [PATCH 1/3] Update --- .../components/SourcesGrid.tsx | 34 ------------------- 1 file changed, 34 deletions(-) diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx index 52eced4c1e..9fa740b60a 100644 --- a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx +++ b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx @@ -23,10 +23,6 @@ const useStyles = makeStyles()({ textOverflow: 'ellipsis', }, }) -interface SortField { - idx: number - field: string | null -} function SourcesGrid({ rows, @@ -44,10 +40,6 @@ function SourcesGrid({ // @ts-expect-error const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0] const [widgetColor, setWidgetColor] = useState('blue') - const [currSort, setCurrSort] = useState({ - idx: 0, - field: null, - }) return (
@@ -132,13 +124,11 @@ function SourcesGrid({ }, { field: 'name', - sortingOrder: [null], headerName: 'Name', width: measureGridWidth(rows.map(r => r.name)), }, ...Object.keys(rest).map(val => ({ field: val, - sortingOrder: [null], renderCell: (params: GridCellParams) => { const { value } = params return ( @@ -151,30 +141,6 @@ function SourcesGrid({ width: measureGridWidth(rows.map(r => r[val])), })), ]} - sortModel={ - [ - /* we control the sort as a controlled component using onSortModelChange */ - ] - } - onSortModelChange={args => { - const sort = args[0] - const idx = (currSort.idx + 1) % 2 - const field = sort?.field || currSort.field - setCurrSort({ idx, field }) - onChange( - field - ? [...rows].sort((a, b) => { - // @ts-expect-error - const aa = getStr(a[field]) - // @ts-expect-error - const bb = getStr(b[field]) - return idx === 1 - ? aa.localeCompare(bb) - : bb.localeCompare(aa) - }) - : rows, - ) - }} />
From 02ff435a4408ac708dfaadb8ffcaaaf6297dda96 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 14 Jun 2024 11:34:02 -0400 Subject: [PATCH 2/3] Wow --- .../MultiLinearWiggleDisplay/components/SourcesGrid.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx index 9fa740b60a..1fe14e1e59 100644 --- a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx +++ b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx @@ -129,6 +129,9 @@ function SourcesGrid({ }, ...Object.keys(rest).map(val => ({ field: val, + getSortComparator: (...args) => { + console.log(args) + }, renderCell: (params: GridCellParams) => { const { value } = params return ( @@ -137,8 +140,9 @@ function SourcesGrid({ ) }, - // @ts-ignore - width: measureGridWidth(rows.map(r => r[val])), + width: measureGridWidth( + rows.map(r => `${r[val as keyof Source]}`), + ), })), ]} /> From 7616ddac550a0ec32185d9ed80e607a4a92ce126 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 14 Jun 2024 12:16:11 -0400 Subject: [PATCH 3/3] Fixes --- .../components/SourcesGrid.tsx | 70 +++++++++++++------ plugins/wiggle/src/util.ts | 1 + 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx index 1fe14e1e59..6d8b899b60 100644 --- a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx +++ b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SourcesGrid.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { Button } from '@mui/material' import { getStr, measureGridWidth } from '@jbrowse/core/util' -import { DataGrid, GridCellParams } from '@mui/x-data-grid' +import { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid' import { makeStyles } from 'tss-react/mui' // locals @@ -24,6 +24,11 @@ const useStyles = makeStyles()({ }, }) +interface SortField { + idx: number + field: string | null +} + function SourcesGrid({ rows, onChange, @@ -36,10 +41,12 @@ function SourcesGrid({ const { classes } = useStyles() const [anchorEl, setAnchorEl] = useState(null) const [selected, setSelected] = useState([] as string[]) - - // @ts-expect-error const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0] const [widgetColor, setWidgetColor] = useState('blue') + const [currSort, setCurrSort] = useState({ + idx: 0, + field: null, + }) return (
@@ -127,24 +134,47 @@ function SourcesGrid({ headerName: 'Name', width: measureGridWidth(rows.map(r => r.name)), }, - ...Object.keys(rest).map(val => ({ - field: val, - getSortComparator: (...args) => { - console.log(args) - }, - renderCell: (params: GridCellParams) => { - const { value } = params - return ( -
- -
- ) - }, - width: measureGridWidth( - rows.map(r => `${r[val as keyof Source]}`), - ), - })), + ...Object.keys(rest).map( + val => + ({ + field: val, + renderCell: ({ value }) => ( +
+ +
+ ), + width: measureGridWidth( + rows.map(r => `${r[val as keyof Source]}`), + ), + }) satisfies GridColDef<(typeof rows)[0]>, + ), ]} + sortModel={ + [ + /* we control the sort as a controlled component using onSortModelChange */ + ] + } + onSortModelChange={args => { + const sort = args[0] + // this idx%2 flip flops the sorting order, we could inspect args + // for sort direction asc or desc but this is just a simplified + // thing since we are controlling sort instead of the default data + // grid sort anyways + const idx = (currSort.idx + 1) % 2 + const field = sort?.field || currSort.field + setCurrSort({ idx, field }) + onChange( + field + ? [...rows].sort((a, b) => { + const aa = getStr(a[field as keyof Source]) + const bb = getStr(b[field as keyof Source]) + return idx === 1 + ? aa.localeCompare(bb) + : bb.localeCompare(aa) + }) + : rows, + ) + }} />
diff --git a/plugins/wiggle/src/util.ts b/plugins/wiggle/src/util.ts index 4185df3337..108faa76ef 100644 --- a/plugins/wiggle/src/util.ts +++ b/plugins/wiggle/src/util.ts @@ -25,6 +25,7 @@ export interface ScaleOpts { } export interface Source { + baseUri?: string name: string color?: string group?: string