@jbrowse/plugin-linear-genome-view 1.7.8 → 1.7.11

package/dist/LinearGenomeView/index.test.js

@@ -82,7 +82,7 @@ function initialize() {
   }).actions(function (self) {
     return {
       isValidRefName: function isValidRefName(str) {
-        return !str.includes(':');
+        return str === 'ctgA' || str === 'ctgB';
       },
       get: function get(str) {
         return self.assemblies.get(str);
@@ -1163,8 +1163,25 @@ test('multi region', function () {
   model.setDisplayedRegions(_volvoxDisplayedRegions.default.slice(0, 1));
   model.navToLocString('ctgA ctgB');
   expect(model.displayedRegions[0].refName).toBe('ctgA');
-  expect(model.displayedRegions[1].refName).toBe('ctgB'); // [
-  //   { refName: 'ctgA', start: 0, end: 50001 },
-  //   { refName: 'ctgB', start: 0, end: 6079 },
-  // ])
+  expect(model.displayedRegions[1].refName).toBe('ctgB');
+});
+test('space separated locstring', function () {
+  var _initialize15 = initialize(),
+      Session = _initialize15.Session,
+      LinearGenomeModel = _initialize15.LinearGenomeModel;
+
+  var model = Session.create({
+    configuration: {}
+  }).setView(LinearGenomeModel.create({
+    type: 'LinearGenomeView',
+    tracks: [{
+      name: 'foo track',
+      type: 'BasicTrack'
+    }]
+  }));
+  model.setWidth(800);
+  model.setDisplayedRegions(_volvoxDisplayedRegions.default.slice(0, 1));
+  model.navToLocString('ctgA 0 100');
+  expect(model.offsetPx).toBe(0);
+  expect(model.bpPerPx).toBe(0.125);
 });

package/dist/index.d.ts

@@ -124,7 +124,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
                 estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
             } & {
-                readonly blockType: "staticBlocks" | "dynamicBlocks";
+                readonly blockType: "dynamicBlocks" | "staticBlocks";
                 readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
             } & {
                 readonly renderDelay: number;
@@ -300,7 +300,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
                 estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
             } & {
-                readonly blockType: "staticBlocks" | "dynamicBlocks";
+                readonly blockType: "dynamicBlocks" | "staticBlocks";
                 readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
             } & {
                 readonly renderDelay: number;
@@ -486,7 +486,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
             estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
         } & {
-            readonly blockType: "staticBlocks" | "dynamicBlocks";
+            readonly blockType: "dynamicBlocks" | "staticBlocks";
             readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
         } & {
             readonly renderDelay: number;

package/dist/index.js

@@ -211,36 +211,37 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
               switch (_context.prev = _context.next) {
                 case 0:
                   session = _ref.session, assembly = _ref.assembly, loc = _ref.loc, _ref$tracks = _ref.tracks, tracks = _ref$tracks === void 0 ? [] : _ref$tracks;
+                  _context.prev = 1;
                   assemblyManager = session.assemblyManager;
                   view = session.addView('LinearGenomeView', {});
-                  _context.next = 5;
+                  _context.next = 6;
                   return (0, _mobx.when)(function () {
                     return !!view.volatileWidth;
                   });
 
-                case 5:
+                case 6:
                   if (assembly) {
-                    _context.next = 7;
+                    _context.next = 8;
                     break;
                   }
 
                   throw new Error('No assembly provided when launching linear genome view');
 
-                case 7:
-                  _context.next = 9;
+                case 8:
+                  _context.next = 10;
                   return assemblyManager.waitForAssembly(assembly);
 
-                case 9:
+                case 10:
                   asm = _context.sent;
 
                   if (asm) {
-                    _context.next = 12;
+                    _context.next = 13;
                     break;
                   }
 
                   throw new Error("Assembly \"".concat(assembly, "\" not found when launching linear genome view"));
 
-                case 12:
+                case 13:
                   view.navToLocString(loc, assembly);
                   idsNotFound = [];
                   tracks.forEach(function (track) {
@@ -256,18 +257,28 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
                   });
 
                   if (!idsNotFound.length) {
-                    _context.next = 17;
+                    _context.next = 18;
                     break;
                   }
 
                   throw new Error("Could not resolve identifiers: ".concat(idsNotFound.join(',')));
 
-                case 17:
+                case 18:
+                  _context.next = 24;
+                  break;
+
+                case 20:
+                  _context.prev = 20;
+                  _context.t0 = _context["catch"](1);
+                  session.notify("".concat(_context.t0), 'error');
+                  throw _context.t0;
+
+                case 24:
                 case "end":
                   return _context.stop();
               }
             }
-          }, _callee);
+          }, _callee, null, [[1, 20]]);
         }));
 
         return function (_x) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.8",
+  "version": "1.7.11",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -40,6 +40,7 @@
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
+    "material-ui-popup-state": "^1.9.3",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"
   },
@@ -57,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b429fa2bb5734fc8a5380988f6dfdd3f7a41a39f"
+  "gitHead": "5c21beb48a21f08b0091d293f09ac99174c48f77"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,19 +1,15 @@
-import React, { useState, useRef, useMemo } from 'react'
+import React, { useState, useRef } from 'react'
 import { observer } from 'mobx-react'
-import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
+import { useTheme, makeStyles } from '@material-ui/core'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { usePopper } from 'react-popper'
 
 // locals
+import Tooltip from './Tooltip'
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   display: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -21,89 +17,8 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     minHeight: '100%',
   },
-
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
-
-const TooltipContents = React.forwardRef<
-  HTMLDivElement,
-  { message: React.ReactNode | string }
->(({ message }: { message: React.ReactNode | string }, ref) => {
-  return <div ref={ref}>{message}</div>
 })
 
-const Tooltip = observer(
-  ({
-    model,
-    clientMouseCoord,
-  }: {
-    model: BaseLinearDisplayModel
-    clientMouseCoord: Coord
-  }) => {
-    const classes = useStyles()
-    const { featureUnderMouse } = model
-    const [width, setWidth] = useState(0)
-    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
-
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = useMemo(
-      () => ({
-        getBoundingClientRect: () => {
-          const x = clientMouseCoord[0] + width / 2 + 20
-          const y = clientMouseCoord[1]
-          return {
-            top: y,
-            left: x,
-            bottom: y,
-            right: x,
-            width: 0,
-            height: 0,
-            x,
-            y,
-            toJSON() {},
-          }
-        },
-      }),
-      [clientMouseCoord, width],
-    )
-    const { styles, attributes } = usePopper(virtElement, popperElt)
-
-    const contents = featureUnderMouse
-      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
-      : undefined
-
-    return featureUnderMouse && contents ? (
-      <Portal>
-        <div
-          ref={setPopperElt}
-          className={classes.tooltip}
-          // zIndex needed to go over widget drawer
-          style={{ ...styles.popper, zIndex: 100000 }}
-          {...attributes.popper}
-        >
-          <TooltipContents
-            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
-            message={contents}
-          />
-        </div>
-      </Portal>
-    ) : null
-  },
-)
-
 type Coord = [number, number]
 const BaseLinearDisplay = observer(
   (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useMemo } from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Portal, alpha, makeStyles } from '@material-ui/core'
+import { usePopper } from 'react-popper'
+
+// locals
+import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+const useStyles = makeStyles(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+}))
+
+const TooltipContents = React.forwardRef<
+  HTMLDivElement,
+  { message: React.ReactNode | string }
+>(({ message }: { message: React.ReactNode | string }, ref) => {
+  return <div ref={ref}>{message}</div>
+})
+
+type Coord = [number, number]
+const Tooltip = observer(
+  ({
+    model,
+    clientMouseCoord,
+  }: {
+    model: BaseLinearDisplayModel
+    clientMouseCoord: Coord
+  }) => {
+    const classes = useStyles()
+    const { featureUnderMouse } = model
+    const [width, setWidth] = useState(0)
+    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
+
+    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+    const virtElement = useMemo(
+      () => ({
+        getBoundingClientRect: () => {
+          const x = clientMouseCoord[0] + width / 2 + 20
+          const y = clientMouseCoord[1]
+          return {
+            top: y,
+            left: x,
+            bottom: y,
+            right: x,
+            width: 0,
+            height: 0,
+            x,
+            y,
+            toJSON() {},
+          }
+        },
+      }),
+      [clientMouseCoord, width],
+    )
+    const { styles, attributes } = usePopper(virtElement, popperElt)
+
+    const contents = featureUnderMouse
+      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
+      : undefined
+
+    return featureUnderMouse && contents ? (
+      <Portal>
+        <div
+          ref={setPopperElt}
+          className={classes.tooltip}
+          // zIndex needed to go over widget drawer
+          style={{ ...styles.popper, zIndex: 100000 }}
+          {...attributes.popper}
+        >
+          <TooltipContents
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
+            message={contents}
+          />
+        </div>
+      </Portal>
+    ) : null
+  },
+)
+
+export default Tooltip

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -7,6 +7,7 @@ import { MenuItem } from '@jbrowse/core/ui'
 import {
   isAbortException,
   getContainingView,
+  getContainingTrack,
   getSession,
   getViewParams,
   isSelectionContainer,
@@ -333,8 +334,13 @@ export const BaseLinearDisplay = types
         const featureWidget = session.addWidget(
           'BaseFeatureWidget',
           'baseFeature',
-          { featureData: feature.toJSON(), view: getContainingView(self) },
+          {
+            view: getContainingView(self),
+            track: getContainingTrack(self),
+            featureData: feature.toJSON(),
+          },
         )
+
         session.showWidget(featureWidget)
       }
       if (isSelectionContainer(session)) {
@@ -551,7 +557,7 @@ export const BaseLinearDisplay = types
           self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
-        onFeatureClick(_: unknown, featureId: string | undefined) {
+        onFeatureClick(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -566,7 +572,7 @@ export const BaseLinearDisplay = types
           self.clearFeatureSelection()
         },
         // similar to click but opens a menu with further options
-        onFeatureContextMenu(_: unknown, featureId: string | undefined) {
+        onFeatureContextMenu(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -576,7 +582,7 @@ export const BaseLinearDisplay = types
           }
         },
 
-        onMouseMove(_: unknown, featureId: string | undefined) {
+        onMouseMove(_: unknown, featureId?: string) {
           self.setFeatureIdUnderMouse(featureId)
         },
 
@@ -642,6 +648,7 @@ export const BaseLinearDisplay = types
             const { offsetPx } = roundedDynamicBlocks[index]
             const offset = offsetPx - viewOffsetPx
             const clipid = getId(id, index)
+
             return (
               <React.Fragment key={`frag-${index}`}>
                 <defs>

package/src/LinearBasicDisplay/model.ts

@@ -42,7 +42,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       get showDescriptions() {
         return (
           self.trackShowDescriptions ??
-          getConf(self, ['renderer', 'showLabels'])
+          getConf(self, ['renderer', 'showDescriptions'])
         )
       },
 
@@ -116,9 +116,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
               icon: VisibilityIcon,
               type: 'checkbox',
               checked: self.showDescriptions,
-              onClick: () => {
-                self.toggleShowDescriptions()
-              },
+              onClick: () => self.toggleShowDescriptions(),
             },
             {
               label: 'Display mode',

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import {
   Button,
+  Checkbox,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
-  Checkbox,
   FormControlLabel,
-  CircularProgress,
+  IconButton,
+  TextField,
   Typography,
+  makeStyles,
 } from '@material-ui/core'
+import { ErrorMessage } from '@jbrowse/core/ui'
 import CloseIcon from '@material-ui/icons/Close'
 import { LinearGenomeViewModel as LGV } from '..'
 
@@ -24,6 +26,15 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
+function LoadingMessage() {
+  return (
+    <div>
+      <CircularProgress size={20} style={{ marginRight: 20 }} />
+      <Typography display="inline">Creating SVG</Typography>
+    </div>
+  )
+}
+
 export default function ExportSvgDlg({
   model,
   handleClose,
@@ -35,6 +46,7 @@ export default function ExportSvgDlg({
   const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
   const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
+  const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
   const classes = useStyles()
   return (
@@ -47,13 +59,15 @@ export default function ExportSvgDlg({
       </DialogTitle>
       <DialogContent>
         {error ? (
-          <div style={{ color: 'red' }}>{`${error}`}</div>
+          <ErrorMessage error={error} />
         ) : loading ? (
-          <div>
-            <CircularProgress size={20} style={{ marginRight: 20 }} />
-            <Typography display="inline">Creating SVG</Typography>
-          </div>
+          <LoadingMessage />
         ) : null}
+        <TextField
+          helperText="filename"
+          value={filename}
+          onChange={event => setFilename(event.target.value)}
+        />
         {offscreenCanvas ? (
           <FormControlLabel
             control={
@@ -87,12 +101,11 @@ export default function ExportSvgDlg({
             setLoading(true)
             setError(undefined)
             try {
-              await model.exportSvg({ rasterizeLayers })
+              await model.exportSvg({ rasterizeLayers, filename })
               handleClose()
             } catch (e) {
               console.error(e)
               setError(e)
-            } finally {
               setLoading(false)
             }
           }}

package/src/LinearGenomeView/components/Header.tsx

@@ -7,6 +7,7 @@ import {
   makeStyles,
   alpha,
 } from '@material-ui/core'
+import { getBpDisplayStr } from '@jbrowse/core/util'
 import SearchBox from './SearchBox'
 
 // icons
@@ -100,7 +101,7 @@ const RegionWidth = observer(({ model }: { model: LGV }) => {
   const { coarseTotalBp } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {Math.round(coarseTotalBp).toLocaleString('en-US')} bp
+      {getBpDisplayStr(coarseTotalBp)}
     </Typography>
   )
 })

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -32,11 +32,8 @@ export default function HelpDialog({
         Using the search box
         {handleClose ? (
           <IconButton
-            data-testid="close-resultsDialog"
             className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
+            onClick={() => handleClose()}
           >
             <CloseIcon />
           </IconButton>
@@ -81,6 +78,10 @@ export default function HelpDialog({
             <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
             in the horizontally flipped orientation
           </li>
+          <li>
+            <code>chr1 100 200</code> - use whitespace separated refname, start,
+            end
+          </li>
         </ul>
       </DialogContent>
       <Divider />

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -8,7 +8,6 @@ import {
   Grid,
   makeStyles,
 } from '@material-ui/core'
-import { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter'
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
@@ -16,6 +15,7 @@ import CloseIcon from '@material-ui/icons/Close'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
+import { fetchResults } from './util'
 import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
@@ -57,28 +57,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     label: value,
   })
 
-  async function fetchResults(query: string, searchType?: SearchType) {
-    if (!textSearchManager) {
-      console.warn('No text search manager')
-    }
-
-    const textSearchResults = await textSearchManager?.search(
-      {
-        queryString: query,
-        searchType,
-      },
-      searchScope,
-      rankSearchResults,
-    )
-
-    const refNameResults = assembly?.allRefNames
-      ?.filter(refName => refName.startsWith(query))
-      .map(r => new BaseResult({ label: r }))
-      .slice(0, 10)
-
-    return [...(refNameResults || []), ...(textSearchResults || [])]
-  }
-
   // gets a string as input, or use stored option results from previous query,
   // then re-query and
   // 1) if it has multiple results: pop a dialog
@@ -105,7 +83,14 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
       ) {
         model.navToLocString(location, selectedAsm)
       } else {
-        const results = await fetchResults(input, 'exact')
+        const results = await fetchResults({
+          queryString: input,
+          searchType: 'exact',
+          searchScope,
+          rankSearchResults,
+          textSearchManager,
+          assembly,
+        })
         if (results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
@@ -165,7 +150,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                   <CloseIcon style={{ color: 'red' }} />
                 ) : value ? (
                   <RefNameAutocomplete
-                    fetchResults={fetchResults}
+                    fetchResults={queryString =>
+                      fetchResults({
+                        queryString,
+                        assembly,
+                        textSearchManager,
+                        rankSearchResults,
+                        searchScope,
+                      })
+                    }
                     model={model}
                     assemblyName={assemblyError ? undefined : selectedAsm}
                     value={value}

package/src/LinearGenomeView/components/LinearGenomeView.test.js

@@ -79,7 +79,7 @@ describe('<LinearGenomeView />', () => {
     await findByText('Foo Track')
     // test needs to wait until it's updated to display 100 bp in the header to
     // make snapshot pass
-    await findByText('100 bp')
+    await findByText('100bp')
     expect(container.firstChild).toMatchSnapshot()
   })
   it('renders two tracks, two regions', async () => {
@@ -145,7 +145,7 @@ describe('<LinearGenomeView />', () => {
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
-    await findByText('798 bp')
+    await findByText('798bp')
     await findAllByTestId('svgfeatures')
 
     expect(container.firstChild).toMatchSnapshot()