From 319e24b5ea3e1525cd09a426aac9aeeb5a5d438c Mon Sep 17 00:00:00 2001 From: Sebastian Benjamin Date: Wed, 2 Apr 2025 11:06:49 -0700 Subject: [PATCH 1/5] en localization for pagination, for commas --- .../VariantSearch/components/VariantTableWidget.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx index 9a186e493..c5c4dde5a 100644 --- a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx +++ b/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx @@ -39,6 +39,7 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter' import { lastValueFrom } from 'rxjs'; const VariantTableWidget = observer(props => { + const numberFormatter = new Intl.NumberFormat('en-US'); const { assembly, trackId, parsedLocString, sessionId, session, pluginManager } = props; const { assemblyNames = [], assemblyManager } = session ?? {}; const { view } = session ?? {}; @@ -469,6 +470,14 @@ const VariantTableWidget = observer(props => { setSortModel(newModel) handleQuery(filters, true, { page: 0, pageSize: pageSizeModel.pageSize }, newModel); }} + localeText={{ + MuiTablePagination: { + labelDisplayedRows: ({ from, to, count }) => + `${numberFormatter.format(from)}–${numberFormatter.format(to)} of ${ + count !== -1 ? numberFormatter.format(count) : 'more than ' + numberFormatter.format(to) + }`, + }, + }} /> ) From 763e79ba7611a81d4109eaed771f3c9ef4d13c75 Mon Sep 17 00:00:00 2001 From: Sebastian Benjamin Date: Wed, 2 Apr 2025 13:28:19 -0700 Subject: [PATCH 2/5] React-select for autocomplete on VariantSearch --- .../VariantSearch/components/FilterForm.tsx | 45 +++++++++++-------- .../components/VariantTableWidget.tsx | 2 +- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx index 1752cabcf..f84f3cc40 100644 --- a/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx +++ b/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import TextField from '@mui/material/TextField'; import Button from '@mui/material/Button'; import Select from '@mui/material/Select'; +import ReactSelect from 'react-select'; import AsyncSelect from 'react-select/async'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; @@ -211,25 +212,33 @@ const FilterForm = (props: FilterFormProps ) => { {filters.map((filter, index) => ( - - Field - + value={ + filter.field + ? { + value: filter.field, + label: fieldTypeInfo.find(f => f.name === filter.field)?.label ?? filter.field + } + : null + } + isClearable + /> diff --git a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx index a7b58ebc4..590824f23 100644 --- a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx +++ b/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx @@ -444,7 +444,7 @@ const VariantTableWidget = observer(props => { {supportsLuceneIndex ? - + : null} From aa496fde13df8ac921c39aa171e776997f8ca824 Mon Sep 17 00:00:00 2001 From: Sebastian Benjamin Date: Fri, 4 Apr 2025 15:34:40 -0700 Subject: [PATCH 3/5] Add share button to VariantTable --- .../VariantSearch/components/ShareButton.tsx | 25 ++++++++++++++ .../components/VariantTableWidget.tsx | 22 ++----------- .../VariantTable/components/ShareButton.tsx | 25 ++++++++++++++ .../components/VariantTableWidget.tsx | 33 +++++++++++++++++-- 4 files changed, 82 insertions(+), 23 deletions(-) create mode 100644 jbrowse/src/client/JBrowse/VariantSearch/components/ShareButton.tsx create mode 100644 jbrowse/src/client/JBrowse/VariantTable/components/ShareButton.tsx diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/ShareButton.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/ShareButton.tsx new file mode 100644 index 000000000..2315158be --- /dev/null +++ b/jbrowse/src/client/JBrowse/VariantSearch/components/ShareButton.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Button } from '@mui/material'; +import LinkIcon from '@mui/icons-material/Link'; + +export const ShareButton = () => { + return ( + + ); +}; diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx index c5c4dde5a..c7a5ebb14 100644 --- a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx +++ b/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx @@ -13,7 +13,6 @@ import { GridToolbarExport } from '@mui/x-data-grid'; import SearchIcon from '@mui/icons-material/Search'; -import LinkIcon from '@mui/icons-material/Link'; import React, { useEffect, useState } from 'react'; import { getConf } from '@jbrowse/core/configuration'; import { AppBar, Box, Button, Dialog, Paper, Popover, Toolbar, Tooltip, Typography } from '@mui/material'; @@ -37,6 +36,7 @@ import '../../jbrowse.css'; import LoadingIndicator from './LoadingIndicator'; import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'; import { lastValueFrom } from 'rxjs'; +import { ShareButton } from './ShareButton'; const VariantTableWidget = observer(props => { const numberFormatter = new Intl.NumberFormat('en-US'); @@ -201,25 +201,7 @@ const VariantTableWidget = observer(props => { delimiter: ';', }} /> - + ); } diff --git a/jbrowse/src/client/JBrowse/VariantTable/components/ShareButton.tsx b/jbrowse/src/client/JBrowse/VariantTable/components/ShareButton.tsx new file mode 100644 index 000000000..2315158be --- /dev/null +++ b/jbrowse/src/client/JBrowse/VariantTable/components/ShareButton.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Button } from '@mui/material'; +import LinkIcon from '@mui/icons-material/Link'; + +export const ShareButton = () => { + return ( + + ); +}; diff --git a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx index 590824f23..33f61a49d 100644 --- a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx +++ b/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx @@ -3,7 +3,17 @@ import React, { useEffect, useState } from 'react'; import { getConf } from '@jbrowse/core/configuration'; import { ParsedLocString, parseLocString } from '@jbrowse/core/util'; import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'; -import { AppBar, Box, Button, Dialog, Grid, MenuItem, Paper, Toolbar, Typography } from '@mui/material'; +import { + AppBar, + Box, + Button, + Dialog, + Grid, + MenuItem, + Paper, + Toolbar, + Typography, +} from '@mui/material'; import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; import { DataGrid, @@ -11,7 +21,11 @@ import { GridColumnVisibilityModel, GridFilterPanel, GridPaginationModel, GridRenderCellParams, - GridToolbar + GridToolbar, + GridToolbarColumnsButton, + GridToolbarFilterButton, + GridToolbarDensitySelector, + GridToolbarExport } from '@mui/x-data-grid'; import MenuButton from './MenuButton'; import '../../jbrowse.css'; @@ -27,6 +41,7 @@ import { passesSampleFilters } from '../../utils'; import LoadingIndicator from './LoadingIndicator'; +import { ShareButton } from './ShareButton'; import { NoAssemblyRegion } from '@jbrowse/core/util/types'; import StandaloneSearchComponent from '../../Search/components/StandaloneSearchComponent'; import { VcfFeature } from '@jbrowse/plugin-variants'; @@ -352,12 +367,24 @@ const VariantTableWidget = observer(props => { } } + const CustomToolbar = () => ( + + + + + + + + + + ); + const gridElement = ( // NOTE: the filterPanel/sx override is added to fix an issue where the grid column filter value input doesn't align with the field and operator inputs rawFeatureToRow(rawFeature, id, gridColumns, trackId))} - slots={{ toolbar: GridToolbar, filterPanel: GridFilterPanel }} + slots={{ toolbar: CustomToolbar, filterPanel: GridFilterPanel }} slotProps={{ filterPanel: { filterFormProps: { From 6d4a7f8199dfcc3bbd5edac139bd44fcb0009934 Mon Sep 17 00:00:00 2001 From: Sebastian Benjamin Date: Fri, 4 Apr 2025 15:38:58 -0700 Subject: [PATCH 4/5] in set -> equals one of --- .../client/JBrowse/VariantSearch/components/FilterForm.tsx | 4 ++-- jbrowse/src/client/JBrowse/utils.ts | 4 ++-- .../labkey/test/tests/external/labModules/JBrowseTest.java | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx index f84f3cc40..4a49adc0d 100644 --- a/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx +++ b/jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx @@ -110,7 +110,7 @@ const FilterForm = (props: FilterFormProps ) => { updatedFilter.value = ''; } - if (value === "in set" || filter.operator === "in set") { + if (value === "equals one of" || filter.operator === "equals one of") { updatedFilter.value = ''; } } @@ -268,7 +268,7 @@ const FilterForm = (props: FilterFormProps ) => { - {filter.operator === "in set" ? ( + {filter.operator === "equals one of" ? ( Value