@jbrowse/plugin-data-management 2.1.0 → 2.1.3

package/src/HierarchicalTrackSelectorWidget/components/{HierarchicalTrackSelector.test.js → HierarchicalTrackSelector.test.tsx}

@@ -1,10 +1,17 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import React from 'react'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { cleanup, render } from '@testing-library/react'
-import React from 'react'
+import { ThemeProvider } from '@mui/material/styles'
+
+// locals
 import HierarchicalTrackSelector from './HierarchicalTrackSelector'
+
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
+// @ts-ignore
 window.requestIdleCallback = cb => cb()
 window.cancelIdleCallback = () => {}
 
@@ -13,11 +20,12 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders nothing with no assembly', () => {
     const session = createTestSession()
-    const firstView = session.addView('LinearGenomeView')
+    const firstView = session!.addView('LinearGenomeView')
     const model = firstView.activateTrackSelector()
 
     const { container } = render(
-      <ThemeProvider theme={createTheme()}>
+      <ThemeProvider theme={createJBrowseTheme()}>
+        {/* @ts-ignore*/}
         <HierarchicalTrackSelector model={model} />
       </ThemeProvider>,
     )
@@ -26,6 +34,7 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of uncategorized tracks', async () => {
     const session = createTestSession()
+    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -45,19 +54,21 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       },
     })
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session.addView('LinearGenomeView', {
+    const firstView = session!.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -67,12 +78,13 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session.sessionTracks[0].trackId)
-    firstView.showTrack(session.sessionTracks[1].trackId)
+    firstView.showTrack(session!.sessionTracks[0].trackId)
+    firstView.showTrack(session!.sessionTracks[1].trackId)
     const model = firstView.activateTrackSelector()
 
     const { container, findByTestId } = render(
-      <ThemeProvider theme={createTheme()}>
+      <ThemeProvider theme={createJBrowseTheme()}>
+        {/* @ts-ignore*/}
         <HierarchicalTrackSelector model={model} />
       </ThemeProvider>,
     )
@@ -82,6 +94,7 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of categorized tracks', async () => {
     const session = createTestSession()
+    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -101,19 +114,22 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       },
     })
+
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session.addView('LinearGenomeView', {
+    const firstView = session!.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -123,8 +139,8 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session.sessionTracks[0].trackId)
-    firstView.showTrack(session.sessionTracks[1].trackId)
+    firstView.showTrack(session!.sessionTracks[0].trackId)
+    firstView.showTrack(session!.sessionTracks[1].trackId)
     firstView.tracks[0].configuration.category.set(['Foo Category'])
     firstView.tracks[1].configuration.category.set([
       'Foo Category',
@@ -133,7 +149,8 @@ describe('HierarchicalTrackSelector widget', () => {
     const model = firstView.activateTrackSelector()
 
     const { container, findByTestId } = render(
-      <ThemeProvider theme={createTheme()}>
+      <ThemeProvider theme={createJBrowseTheme()}>
+        {/* @ts-ignore*/}
         <HierarchicalTrackSelector model={model} />
       </ThemeProvider>,
     )

package/src/HierarchicalTrackSelectorWidget/components/Node.tsx

@@ -60,10 +60,8 @@ const useStyles = makeStyles()(theme => ({
   // accordionColor set's display:flex so that the child accordionText use
   // vertically centered text
   accordionColor: {
-    // @ts-ignore
-    background: theme.palette.tertiary?.main,
-    // @ts-ignore
-    color: theme.palette.tertiary?.contrastText,
+    background: theme.palette.tertiary.main,
+    color: theme.palette.tertiary.contrastText,
     width: '100%',
     display: 'flex',
     paddingLeft: 5,

package/src/HierarchicalTrackSelectorWidget/components/__snapshots__/{HierarchicalTrackSelector.test.js.snap → HierarchicalTrackSelector.test.tsx.snap}

@@ -2,13 +2,13 @@
 
 exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] = `
 <button
-  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-secondary tss-jdumxy-fab css-kznubb-MuiButtonBase-root-MuiFab-root"
+  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary tss-805w6w-fab css-10w0o2e-MuiButtonBase-root-MuiFab-root"
   tabindex="0"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
     data-testid="AddIcon"
     focusable="false"
     viewBox="0 0 24 24"
@@ -31,13 +31,13 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall tss-1qeitpp-menuIcon css-zubjuh-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
         data-testid="MenuIcon"
         focusable="false"
         viewBox="0 0 24 24"
@@ -51,13 +51,13 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall tss-1qeitpp-menuIcon css-zubjuh-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -70,10 +70,10 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
       />
     </button>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root tss-45fwc5-searchBox css-1z10yd4-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
         for="mui-5"
         id="mui-5-label"
@@ -81,26 +81,26 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
         Filter tracks
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
           id="mui-5"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeSmall css-16a6k96-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
               data-testid="ClearIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -114,18 +114,6 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
             />
           </button>
         </div>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-1ftyaf0"
-          >
-            <span>
-              Filter tracks
-            </span>
-          </legend>
-        </fieldset>
       </div>
     </div>
   </div>
@@ -140,13 +128,13 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall tss-1qeitpp-menuIcon css-zubjuh-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
         data-testid="MenuIcon"
         focusable="false"
         viewBox="0 0 24 24"
@@ -160,13 +148,13 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall tss-1qeitpp-menuIcon css-zubjuh-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -179,10 +167,10 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
       />
     </button>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root tss-45fwc5-searchBox css-1z10yd4-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
         for="mui-1"
         id="mui-1-label"
@@ -190,26 +178,26 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
         Filter tracks
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
           id="mui-1"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeSmall css-16a6k96-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
               data-testid="ClearIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -223,18 +211,6 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
             />
           </button>
         </div>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-1ftyaf0"
-          >
-            <span>
-              Filter tracks
-            </span>
-          </legend>
-        </fieldset>
       </div>
     </div>
   </div>

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -27,7 +27,10 @@ function getTrackName(config: AnyConfigurationModel): string {
   }
   return (
     readConfObject(config, 'name') ||
-    `Reference sequence (${readConfObject(getParent(config), 'name')})`
+    `Reference sequence (${
+      readConfObject(getParent(config), 'displayName') ||
+      readConfObject(getParent(config), 'name')
+    })`
   )
 }
 

package/src/PluginStoreWidget/components/PluginStoreWidget.test.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { getSnapshot, getParent } from 'mobx-state-tree'
+import { ThemeProvider } from '@mui/material/styles'
 import { render, cleanup, fireEvent, waitFor } from '@testing-library/react'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 
 import PluginStoreWidget from './PluginStoreWidget'
@@ -42,14 +44,20 @@ describe('<PluginStoreWidget />', () => {
 
   it('renders with the available plugins', async () => {
     const { container, findByText } = render(
-      <PluginStoreWidget model={model} />,
+      <ThemeProvider theme={createJBrowseTheme()}>
+        <PluginStoreWidget model={model} />
+      </ThemeProvider>,
     )
     await findByText('multiple sequence alignment browser plugin for JBrowse 2')
     expect(container.firstChild).toMatchSnapshot()
   })
 
   it('Installs a session plugin', async () => {
-    const { findByText } = render(<PluginStoreWidget model={model} />)
+    const { findByText } = render(
+      <ThemeProvider theme={createJBrowseTheme()}>
+        <PluginStoreWidget model={model} />
+      </ThemeProvider>,
+    )
     await findByText('multiple sequence alignment browser plugin for JBrowse 2')
     fireEvent.click(await findByText('Install'))
     await waitFor(() => {
@@ -62,7 +70,9 @@ describe('<PluginStoreWidget />', () => {
     session = createTestSession({}, true)
     model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
     const { findByText, getByText, getByLabelText } = render(
-      <PluginStoreWidget model={model} />,
+      <ThemeProvider theme={createJBrowseTheme()}>
+        <PluginStoreWidget model={model} />
+      </ThemeProvider>,
     )
     await findByText('multiple sequence alignment browser plugin for JBrowse 2')
     fireEvent.click(getByText('Add custom plugin'))
@@ -99,7 +109,9 @@ describe('<PluginStoreWidget />', () => {
     const { jbrowse } = rootModel
     jbrowse.addPlugin(plugins.plugins[0])
     const { findByText, getByText, getByTestId } = render(
-      <PluginStoreWidget model={model} />,
+      <ThemeProvider theme={createJBrowseTheme()}>
+        <PluginStoreWidget model={model} />
+      </ThemeProvider>,
     )
     await findByText('multiple sequence alignment browser plugin for JBrowse 2')
     fireEvent.click(getByTestId('removePlugin-SVGPlugin'))

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -37,8 +37,7 @@ const useStyles = makeStyles()(theme => ({
   adminBadge: {
     margin: '0.5em',
     borderRadius: 3,
-    // this is the quaternary color in JB2 palette
-    backgroundColor: '#FFB11D',
+    backgroundColor: theme.palette.quaternary.main,
     padding: '1em',
     display: 'flex',
     alignContent: 'center',