Assembly manager restyle

GMOD · Dec 2, 2022 · 4457ab0 · 4457ab0
1 parent 316bde1
commit 4457ab0
Show file tree

Hide file tree

Showing 16 changed files with 91 additions and 128 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -51,7 +51,6 @@
     "load-script2": "^2.0.5",
     "material-ui-popup-state": "^3.0.0",
     "rbush": "^3.0.1",
-    "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.0.0",
     "react-use-measure": "^2.1.1",
     "serialize-error": "^8.0.0",

diff --git a/plugins/data-management/src/AssemblyManager/AssemblyAddForm.tsx b/plugins/data-management/src/AssemblyManager/AssemblyAddForm.tsx
@@ -3,16 +3,10 @@ import { observer } from 'mobx-react'
 import { Button, Grid, MenuItem, Paper, TextField } from '@mui/material'
 import { FileSelector } from '@jbrowse/core/ui'
 import { FileLocation } from '@jbrowse/core/util/types'
-import { makeStyles } from 'tss-react/mui'
 
 // icons
 import AddIcon from '@mui/icons-material/Add'
 
-const useStyles = makeStyles()(theme => ({
-  paper: {},
-  createButton: {},
-}))
-
 const AdapterSelector = observer(function ({
   adapterSelection,
   setAdapterSelection,
@@ -134,8 +128,6 @@ const AssemblyAddForm = observer(function ({
   rootModel: any
   setFormOpen: Function
 }) {
-  const { classes } = useStyles()
-
   const adapterTypes = [
     'IndexedFastaAdapter',
     'BgzipFastaAdapter',
@@ -205,7 +197,7 @@ const AssemblyAddForm = observer(function ({
 
   return (
     <div>
-      <Paper className={classes.paper}>
+      <Paper>
         <TextField
           id="assembly-name"
           inputProps={{ 'data-testid': 'assembly-name' }}

diff --git a/plugins/data-management/src/AssemblyManager/AssemblyTable.tsx b/plugins/data-management/src/AssemblyManager/AssemblyTable.tsx
@@ -9,112 +9,80 @@ import {
   TableHead,
   TableRow,
   Paper,
-  Typography,
 } from '@mui/material'
 import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import { makeStyles } from 'tss-react/mui'
 
 import CreateIcon from '@mui/icons-material/Create'
 import DeleteIcon from '@mui/icons-material/Delete'
 
-const useStyles = makeStyles()({
-  table: {
-    minWidth: 500,
-    minHeight: 150,
-  },
-  buttonCell: {
-    padding: 3,
-  },
-  button: {
-    display: 'inline-block',
-    padding: 3,
-    minHeight: 0,
-    minWidth: 0,
-  },
-})
-
-const AssemblyTable = observer(
-  ({
-    rootModel,
-    setIsAssemblyBeingEdited,
-    setAssemblyBeingEdited,
-  }: {
-    rootModel: {
-      jbrowse: {
-        removeAssemblyConf: (arg: string) => void
-        assemblies: AnyConfigurationModel[]
-      }
+const AssemblyTable = observer(function ({
+  rootModel,
+  setIsAssemblyBeingEdited,
+  setAssemblyBeingEdited,
+}: {
+  rootModel: {
+    jbrowse: {
+      removeAssemblyConf: (arg: string) => void
+      assemblies: AnyConfigurationModel[]
     }
-    setIsAssemblyBeingEdited(arg: boolean): void
-    setAssemblyBeingEdited(arg: AnyConfigurationModel): void
-  }) => {
-    const { classes } = useStyles()
+  }
+  setIsAssemblyBeingEdited(arg: boolean): void
+  setAssemblyBeingEdited(arg: AnyConfigurationModel): void
+}) {
+  function removeAssembly(name: string) {
+    rootModel.jbrowse.removeAssemblyConf(name)
+  }
 
-    function removeAssembly(name: string) {
-      rootModel.jbrowse.removeAssemblyConf(name)
-    }
+  const { assemblies } = rootModel.jbrowse
 
-    const rows = rootModel.jbrowse.assemblies.map(assembly => {
-      const name = readConfObject(assembly, 'name')
-      const displayName = readConfObject(assembly, 'displayName')
-      const aliases = readConfObject(assembly, 'aliases')
-      return (
-        <TableRow key={name}>
-          <TableCell>{name}</TableCell>
-          <TableCell>{displayName}</TableCell>
-          <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
-          <TableCell className={classes.buttonCell}>
-            <IconButton
-              data-testid={`${name}-edit`}
-              className={classes.button}
-              onClick={() => {
-                setIsAssemblyBeingEdited(true)
-                setAssemblyBeingEdited(assembly)
-              }}
-            >
-              <CreateIcon color="primary" />
-            </IconButton>
-            <IconButton
-              data-testid={`${name}-delete`}
-              className={classes.button}
-              onClick={() => {
-                removeAssembly(name)
-              }}
-            >
-              <DeleteIcon color="error" />
-            </IconButton>
-          </TableCell>
-        </TableRow>
-      )
-    })
-
-    return (
-      <TableContainer component={Paper}>
-        <Table className={classes.table}>
-          <TableHead>
-            <TableRow>
-              <TableCell>
-                <Typography variant="h5">Name</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Display name</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Aliases</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Actions</Typography>
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>{rows}</TableBody>
-        </Table>
-      </TableContainer>
-    )
-  },
-)
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Display name</TableCell>
+            <TableCell>Aliases</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {assemblies.map(assembly => {
+            const name = readConfObject(assembly, 'name')
+            const displayName = readConfObject(assembly, 'displayName')
+            const aliases = readConfObject(assembly, 'aliases')
+            return (
+              <TableRow key={name}>
+                <TableCell>{name}</TableCell>
+                <TableCell>{displayName}</TableCell>
+                <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
+                <TableCell>
+                  <IconButton
+                    data-testid={`${name}-edit`}
+                    onClick={() => {
+                      setIsAssemblyBeingEdited(true)
+                      setAssemblyBeingEdited(assembly)
+                    }}
+                  >
+                    <CreateIcon color="primary" />
+                  </IconButton>
+                  <IconButton
+                    data-testid={`${name}-delete`}
+                    onClick={() => removeAssembly(name)}
+                  >
+                    <DeleteIcon color="error" />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+})
 
 export default AssemblyTable
diff --git a/plugins/wiggle/package.json b/plugins/wiggle/package.json
@@ -47,6 +47,7 @@
     "fast-deep-equal": "^3.1.3",
     "is-object": "^1.0.1",
     "react-d3-axis-mod": "^0.1.8",
+    "react-draggable": "^4.4.5",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {

diff --git a/packages/core/ui/DraggableDialog.tsx → ...gleDisplay/components/DraggableDialog.tsx b/packages/core/ui/DraggableDialog.tsx → ...gleDisplay/components/DraggableDialog.tsx
diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Button, DialogContent, DialogActions } from '@mui/material'
-import { DraggableDialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
 import {
   getStr,
@@ -12,6 +11,7 @@ import { DataGrid, GridCellParams } from '@mui/x-data-grid'
 import clone from 'clone'
 
 // locals
+import DraggableDialog from './DraggableDialog'
 import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
 import { UriLink } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { moveUp, moveDown } from './util'

diff --git a/products/jbrowse-img/src/index.test.js b/products/jbrowse-img/src/index.test.js
@@ -5,6 +5,7 @@
 // the above jest-environment node is important to check true usage as a CLI tool
 
 import { renderRegion } from './renderRegion'
+import path from 'path'
 import fs from 'fs'
 import { JSDOM } from 'jsdom'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
@@ -23,25 +24,25 @@ global.nodeCreateCanvas = createCanvas
 
 xtest('renders a region with --session and --config args', async () => {
   const result = await renderRegion({
-    session: require.resolve('../test/clingen_session.json'),
-    config: require.resolve('../data/config.json'),
+    session: path.join(__dirname, '../test/clingen_session.json'),
+    config: path.join(__dirname, '../data/config.json'),
   })
   fs.writeFileSync('svg_from_config_and_session_param.svg', result)
   expect(result).toMatchSnapshot()
 }, 40000)
 
 xtest('renders a region with --session, --tracks, and --assembly args', async () => {
   const result = await renderRegion({
-    session: require.resolve('../test/clingen_session.json'),
-    tracks: require.resolve('../data/tracks.json'),
-    assembly: require.resolve('../data/assembly.json'),
+    session: path.join(__dirname, '../test/clingen_session.json'),
+    tracks: path.join(__dirname, '../data/tracks.json'),
+    assembly: path.join(__dirname, '../data/assembly.json'),
   })
   fs.writeFileSync('svg_from_separate_session_and_tracks.svg', result)
   expect(result).toMatchSnapshot()
 }, 40000)
 
 test('renders volvox with variety of args', async () => {
-  const fp = f => require.resolve('../data/volvox/' + f)
+  const fp = f => path.join(__dirname, '../data/volvox/' + f)
   console.error = jest.fn()
   const result = await renderRegion({
     fasta: fp('volvox.fa'),
@@ -57,7 +58,7 @@ test('renders volvox with variety of args', async () => {
     loc: 'ctgA:1000-2000',
   })
   fs.writeFileSync(
-    require.resolve('../test/svg_from_volvox_fasta_and_bam.svg'),
+    path.join(__dirname, '../test/svg_from_volvox_fasta_and_bam.svg'),
     result,
   )
   expect(result).toBeTruthy()
@@ -78,7 +79,7 @@ xtest('renders human large region with remote urls', async () => {
     loc: '1:10,000,000-10,030,000',
   })
   fs.writeFileSync(
-    require.resolve('../test/human_remote_urls_large_region.svg'),
+    path.join(__dirname, '../test/human_remote_urls_large_region.svg'),
     result,
   )
   expect(result).toBeTruthy()
@@ -97,12 +98,15 @@ xtest('renders volvox with remote urls', async () => {
     ],
     loc: 'ctgA:1-1000',
   })
-  fs.writeFileSync(require.resolve('../test/volvox_remote_region.svg'), result)
+  fs.writeFileSync(
+    path.join(__dirname, '../test/volvox_remote_region.svg'),
+    result,
+  )
   expect(result).toBeTruthy()
 }, 20000)
 
 test('renders volvox with variety of args (noRasterize)', async () => {
-  const fp = f => require.resolve('../data/volvox/' + f)
+  const fp = f => path.join(__dirname, '../data/volvox/' + f)
   console.error = jest.fn()
   const result = await renderRegion({
     fasta: fp('volvox.fa'),
@@ -119,7 +123,10 @@ test('renders volvox with variety of args (noRasterize)', async () => {
     noRasterize: true,
   })
   fs.writeFileSync(
-    require.resolve('../test/svg_from_volvox_fasta_and_bam_norasterize.svg'),
+    path.join(
+      __dirname,
+      '../test/svg_from_volvox_fasta_and_bam_norasterize.svg',
+    ),
     result,
   )
   expect(result).toBeTruthy()
@@ -139,13 +146,13 @@ xtest('configtracks arg with urls', async () => {
 
 test('configtracks arg with local files', async () => {
   const result = await renderRegion({
-    config: require.resolve('../data/volvox/config.json'),
+    config: path.join(__dirname, '../data/volvox/config.json'),
     trackList: [['configtracks', ['volvox_sv']]],
     assembly: 'volvox',
     loc: 'ctgA:1-50,000',
   })
   fs.writeFileSync(
-    require.resolve('../test/svg_configtracks_local.svg'),
+    path.join(__dirname, '../test/svg_configtracks_local.svg'),
     result,
   )
   expect(result).toBeTruthy()
@@ -164,6 +171,9 @@ xtest('renders --hic', async () => {
     ],
     loc: '1:2,000,000-10,000,000',
   })
-  fs.writeFileSync(require.resolve('../test/svg_from_human_hic.svg'), result)
+  fs.writeFileSync(
+    path.join(__dirname, '../test/svg_from_human_hic.svg'),
+    result,
+  )
   expect(result).toBeTruthy()
 }, 20000)
diff --git a/products/jbrowse-img/test/.gitignore b/products/jbrowse-img/test/.gitignore
@@ -0,0 +1 @@
+*.svg
diff --git a/products/jbrowse-img/test/human_remote_urls_large_region.svg b/products/jbrowse-img/test/human_remote_urls_large_region.svg
diff --git a/products/jbrowse-img/test/svg_configtracks_local.svg b/products/jbrowse-img/test/svg_configtracks_local.svg