[skip ci] Misc

package.json

@@ -37,7 +37,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.10.17",
     "@mui/system": "^5.14.4",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "@node-oauth/express-oauth-server": "^3.0.0",
     "@oclif/test": "^2.4.8",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

packages/core/package.json

@@ -59,7 +59,7 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",

plugins/data-management/package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@gmod/ucsc-hub": "^0.3.0",
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "clsx": "^2.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",

plugins/dotplot-view/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "@popperjs/core": "^2.11.0",
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",

plugins/grid-bookmark/package.json

@@ -46,7 +46,7 @@
     "@jbrowse/plugin-config": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",

plugins/spreadsheet-view/src/SpreadsheetView/components/Spreadsheet.tsx

@@ -1,12 +1,14 @@
 import React, { useMemo, useState } from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
-import { DataGrid } from '@mui/x-data-grid'
-import { LoadingEllipses } from '@jbrowse/core/ui'
+import { DataGrid, GridToolbar } from '@mui/x-data-grid'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import { useResizeBar } from '@jbrowse/core/ui/useResizeBar'
 import ResizeBar from '@jbrowse/core/ui/ResizeBar'
-import { measureGridWidth } from '@jbrowse/core/util'
-
+import { getSession, measureGridWidth } from '@jbrowse/core/util'
+import { Link } from '@mui/material'
+import { getParent } from 'mobx-state-tree'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 // locals
 import { SpreadsheetModel } from '../models/Spreadsheet'
 
@@ -19,24 +21,42 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+type LGV = LinearGenomeViewModel
+type MaybeLGV = LinearGenomeViewModel | undefined
+
+async function locationLinkClick(
+  spreadsheet: SpreadsheetModel,
+  locString: string,
+) {
+  const session = getSession(spreadsheet)
+  const { assemblyName } = spreadsheet
+  console.log({ assemblyName })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { id } = getParent<any>(spreadsheet)
+
+  const newViewId = `${id}_${assemblyName}`
+  let view = session.views.find(v => v.id === newViewId) as MaybeLGV
+  if (!view) {
+    view = session.addView('LinearGenomeView', {
+      id: newViewId,
+    }) as LGV
+  }
+  await view.navToLocString(locString, assemblyName)
+}
+
 const DataTable = observer(function ({ model }: { model: SpreadsheetModel }) {
   const { ref, scrollLeft } = useResizeBar()
-  const { rows } = model.data!
+  const { rows, columns } = model.data!
   const w0 = useMemo(
-    () =>
-      model.data!.columns.map(e =>
-        measureGridWidth(model.data!.rows.map(r => r[e])),
-      ),
-    [model.data],
+    () => columns.map(e => measureGridWidth(rows.map(r => r[e]))),
+    [columns, rows],
   )
   const [widths, setWidths] = useState(w0)
-  const columns = model.data!.columns.map((m, i) => ({
-    field: m,
-    width: widths[i],
-  }))
+  const [error, setError] = useState<unknown>()
 
   return (
     <div ref={ref}>
+      {error ? <ErrorMessage error={error} /> : undefined}
       <ResizeBar
         widths={widths}
         setWidths={setWidths}
@@ -46,8 +66,38 @@ const DataTable = observer(function ({ model }: { model: SpreadsheetModel }) {
         columnHeaderHeight={35}
         rowHeight={25}
         hideFooter={rows.length < 100}
+        slots={{ toolbar: GridToolbar }}
+        slotProps={{
+          toolbar: {
+            showQuickFilter: true,
+          },
+        }}
+        // @ts-expect-error
         rows={rows}
-        columns={columns}
+        columns={columns.map((m, i) => ({
+          field: m,
+          width: widths[i],
+          renderCell:
+            m === 'loc'
+              ? args => (
+                  <Link
+                    href="#"
+                    onClick={async event => {
+                      try {
+                        event.preventDefault()
+                        await locationLinkClick(model, args.value)
+                      } catch (e) {
+                        console.log({ setError })
+                        console.error(e)
+                        setError(e)
+                      }
+                    }}
+                  >
+                    {args.value}
+                  </Link>
+                )
+              : undefined,
+        }))}
       />
     </div>
   )
@@ -61,8 +111,6 @@ const Spreadsheet = observer(function ({
   height: number
 }) {
   const { classes } = useStyles()
-  console.log(model.data)
-
   return (
     <div className={classes.root} style={{ height }}>
       {model?.data ? (

plugins/spreadsheet-view/src/SpreadsheetView/importAdapters/VcfImport.ts

@@ -1,5 +1,6 @@
 import VCF from '@gmod/vcf'
 import { bufferToString, ParseOptions } from './ImportUtils'
+import { assembleLocString } from '@jbrowse/core/util'
 
 export function parseVcfBuffer(buffer: Buffer, options: ParseOptions = {}) {
   const { selectedAssemblyName } = options
@@ -8,18 +9,39 @@ export function parseVcfBuffer(buffer: Buffer, options: ParseOptions = {}) {
   const lines = body.split(/\n|\r\n/)
 
   const keys = new Set<string>()
-  const rows = lines.map(l => {
-    const [CHROM, POS, ID, REF, ALT, QUAL, FILTER, INFO, FORMAT] = l.split('\t')
-    const ret = Object.fromEntries(
-      INFO?.split(';').map(e => {
-        const [key, val = true] = e.split('=')
-        const k = `INFO.${key}`
-        keys.add(k)
-        return [k, val]
-      }) || [],
-    )
-    return { CHROM, POS, ID, REF, ALT, QUAL, FILTER, INFO, FORMAT, ...ret }
-  })
+  const rows = lines
+    .filter(f => !!f)
+    .map(l => {
+      const [CHROM, POS, ID, REF, ALT, QUAL, FILTER, INFO, FORMAT] =
+        l.split('\t')
+      const ret = Object.fromEntries(
+        INFO?.split(';').map(e => {
+          const [key, val = true] = e.split('=')
+          const k = `INFO.${key}`
+          keys.add(k)
+          return [k, val]
+        }) || [],
+      )
+      const start = +POS
+      const s1 = start + 1
+      return {
+        loc: assembleLocString({
+          refName: CHROM,
+          start,
+          end: ret['INFO.CHR2'] ? s1 : +ret['INFO.END'] ?? s1,
+        }),
+        CHROM,
+        POS: start,
+        ID,
+        REF,
+        ALT,
+        QUAL,
+        FILTER,
+        INFO,
+        FORMAT,
+        ...ret,
+      }
+    })
 
   return {
     vcfParser,
@@ -31,6 +53,7 @@ export function parseVcfBuffer(buffer: Buffer, options: ParseOptions = {}) {
       }
     }),
     columns: [
+      'loc',
       'CHROM',
       'POS',
       'ID',

plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts

@@ -190,8 +190,10 @@ function stateModelFactory() {
             .then(buffer => typeParser(buffer, self))
             .then(spreadsheet => {
               this.setLoaded()
+              console.log({ spreadsheet })
               getParent<SpreadsheetViewStateModel>(self).displaySpreadsheet(
                 spreadsheet,
+                assemblyName,
               )
             })
         } catch (e) {

plugins/spreadsheet-view/src/SpreadsheetView/models/Spreadsheet.ts

@@ -32,8 +32,9 @@ function stateModelFactory() {
       },
     }))
     .actions(self => ({
-      setData(data?: SpreadsheetData) {
+      setData(data?: SpreadsheetData, assemblyName?: string) {
         self.data = data
+        self.assemblyName = assemblyName
       },
     }))
 

plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts

@@ -100,8 +100,8 @@ function stateModelFactory() {
        * #action
        * load a new spreadsheet and set our mode to display it
        */
-      displaySpreadsheet(spreadsheet?: SpreadsheetData) {
-        self.spreadsheet.setData(spreadsheet)
+      displaySpreadsheet(spreadsheet?: SpreadsheetData, assemblyName?: string) {
+        self.spreadsheet.setData(spreadsheet, assemblyName)
       },
 
       /**
@@ -120,7 +120,7 @@ function stateModelFactory() {
         return [
           {
             label: 'Return to import form',
-            onClick: () => self.displaySpreadsheet(undefined),
+            onClick: () => self.displaySpreadsheet(),
             icon: FolderOpenIcon,
           },
         ]

plugins/variants/package.json

@@ -41,7 +41,7 @@
     "@gmod/tabix": "^1.5.6",
     "@gmod/vcf": "^5.0.9",
     "@mui/icons-material": "^5.0.2",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "generic-filehandle": "^3.0.0"
   },
   "peerDependencies": {

plugins/wiggle/package.json

@@ -53,7 +53,7 @@
     "@jbrowse/plugin-data-management": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",

products/jbrowse-desktop/package.json

@@ -78,7 +78,7 @@
     "@jbrowse/text-indexing": "^2.9.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "clone": "^2.1.2",
     "deepmerge": "^4.2.2",
     "electron-debug": "^3.0.1",

products/jbrowse-react-app/package.json

@@ -79,7 +79,7 @@
     "@jbrowse/web-core": "^2.9.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "base64-js": "^1.0.0",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",

products/jbrowse-web/package.json

@@ -49,7 +49,7 @@
     "@jbrowse/web-core": "^2.9.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "base64-js": "^1.3.0",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",

yarn.lock

@@ -1052,7 +1052,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
   integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
@@ -2148,7 +2148,7 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.10.tgz#13e3e9aa07ee6d593cfacd538e02e8e896d7a12f"
   integrity sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==
 
-"@mui/utils@^5.14.16", "@mui/utils@^5.14.19":
+"@mui/utils@^5.14.18", "@mui/utils@^5.14.19":
   version "5.14.19"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.19.tgz#39a5846a74ba199f1a2b067ea197dc6b9c8f442f"
   integrity sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==
@@ -2158,13 +2158,13 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/x-data-grid@^6.0.1":
-  version "6.18.2"
-  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.18.2.tgz#7bfa0ee48adee39f4ad4af96f8bc187152a064ef"
-  integrity sha512-XsVX8OCcYRbSoDVfjoX6gi+KfBitTkUvlMZnI/YkWOyms+pEValJQousvwjhGN1coWp15Yoz9YTGmSGCBxo2HA==
+"@mui/x-data-grid@next":
+  version "7.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-7.0.0-alpha.2.tgz#1dec9476ba36fb5ae8d46000e8a04bf421adc016"
+  integrity sha512-dRKsdNfttpt8WAzdyDN/PWIiEd5K2Jp/fQjFsVpLdTfDB/KO+Vwhxnd6uVO+z20hI+2bqog1lUVUh2y0e1KxIw==
   dependencies:
-    "@babel/runtime" "^7.23.2"
-    "@mui/utils" "^5.14.16"
+    "@babel/runtime" "^7.23.4"
+    "@mui/utils" "^5.14.18"
     clsx "^2.0.0"
     prop-types "^15.8.1"
     reselect "^4.1.8"