Add share button to VariantTable

Author: Sebastian Benjamin

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 (
+      <Button
+            startIcon={<LinkIcon />}
+            size="small"
+            color="primary"
+            onClick={() => {
+                navigator.clipboard.writeText(window.location.href)
+                .then(() => {
+                    alert('URL copied to clipboard.');
+                })
+                .catch(err => {
+                    console.error('Failed to copy the URL: ', err);
+                    alert('Failed to copy the URL.');
+                });
+            }}
+        >
+        Share
+      </Button>
+  );
+};

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: ';',
                 }} />
 
-                <Button
-                    startIcon={<LinkIcon />}
-                    size="small"
-                    color="primary"
-                    onClick={() => {
-                        navigator.clipboard.writeText(window.location.href)
-                        .then(() => {
-                            // Popup message for successful copy
-                            alert('URL copied to clipboard.');
-                        })
-                        .catch(err => {
-                            // Error handling
-                            console.error('Failed to copy the URL: ', err);
-                            alert('Failed to copy the URL.');
-                        });
-                    }}
-                >
-                Share
-                </Button>
+                <ShareButton />
             </GridToolbarContainer>
         );
     }

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 (
+      <Button
+            startIcon={<LinkIcon />}
+            size="small"
+            color="primary"
+            onClick={() => {
+                navigator.clipboard.writeText(window.location.href)
+                .then(() => {
+                    alert('URL copied to clipboard.');
+                })
+                .catch(err => {
+                    console.error('Failed to copy the URL: ', err);
+                    alert('Failed to copy the URL.');
+                });
+            }}
+        >
+        Share
+      </Button>
+  );
+};

jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx

@@ -3,15 +3,29 @@ 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,
   GridColDef,
   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 = () => (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', p: 1 }}>
+      <Box>
+        <GridToolbarColumnsButton />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
+        <GridToolbarExport />
+        <ShareButton />
+      </Box>
+    </Box>
+  );
+
   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
     <DataGrid
         columns={[...gridColumns, actionsCol]}
         rows={features.map((rawFeature, id) => rawFeatureToRow(rawFeature, id, gridColumns, trackId))}
-        slots={{ toolbar: GridToolbar, filterPanel: GridFilterPanel }}
+        slots={{ toolbar: CustomToolbar, filterPanel: GridFilterPanel }}
         slotProps={{
           filterPanel: {
             filterFormProps: {