Merge pull request #234 from LabKey/fb_merge_23.3_to_develop

Merge discvr-23.3 to develop

Author: bbimber

jbrowse/package-lock.json

@@ -11,20 +11,23 @@
     "build-prod": "npm run clean && cross-env NODE_ENV=production PROD_SOURCE_MAP=source-map LK_MODULE_CONTAINER=DiscvrLabKeyModules LK_MODULE=jbrowse webpack --config config/prod.config.js --progress --profile",
     "clean": "rimraf resources/web/gen && rimraf resources/web/jbrowse/gen && rimraf resources/views/gen && rimraf resources/views/browser*",
     "test": "cross-env NODE_ENV=test jest",
-    "jb-pkg": "pkg ./node_modules/@jbrowse/cli --out-path ./resources/external/jb-cli"
+    "vcffeature-hack": "node ./tools/fixVcfFeature.js",
+    "postinstall": "npm run vcffeature-hack",
+    "prepareCli": "rimraf ./buildCli && rimraf ./resources/external/jb-cli && npm install @jbrowse/cli@1.7.4 --prefix ./buildCli",
+    "jb-pkg": "npm run prepareCli && npx pkg --outdir=./resources/external/jb-cli ./buildCli/node_modules/@jbrowse/cli && rimraf ./buildCli"
   },
   "peerDependencies": {
 
   },
   "dependencies": {
-    "@jbrowse/cli": "^1.7.4",
+    "@jbrowse/cli": "^2.6.1",
     "@jbrowse/core": "^1.7.4",
     "@jbrowse/plugin-variants": "^1.7.4",
     "@jbrowse/plugin-svg": "^1.7.4",
     "@jbrowse/plugin-linear-genome-view": "^1.7.4",
     "@jbrowse/react-linear-genome-view": "^1.7.4",
-    "@labkey/api": "^1.10.0",
-    "@labkey/components": "^2.190.0",
+    "@labkey/api": "^1.21.0",
+    "@labkey/components": "^2.345.0",
     "@gmod/vcf": "^5.0.6",
     "react": "^16.14.0",
     "assert": "^2.0.0",
@@ -35,23 +38,27 @@
     "jspdf-autotable": "^3.5.23",
     "node-polyfill-webpack-plugin": "1.1.4",
     "path-browserify": "^1.0.1",
-    "pkg": "^5.3.2",
+    "pkg": "^5.8.1",
     "react-data-grid": "^7.0.0-beta.12",
     "react-google-charts": "^3.0.15",
     "react-hot-loader": "^4.13.0",
     "regenerator-runtime": "^0.13.9",
     "stream-browserify": "^3.0.0",
-    "typescript": "^3.5.2",
+    "typescript": "^4.9.4",
     "util": "^0.12.0",
     "vm-browserify": "^1.1.2",
-    "xlsx": "^0.18.3"
+    "xlsx": "^0.18.5",
+    "fs": "^0.0.1-security",
+    "child_process": "^1.0.2",
+    "esbuild": "^0.18.4"
   },
   "devDependencies": {
-    "@labkey/build": "6.4.0",
+    "@labkey/build": "^6.12.0",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^27.4.1",
     "@types/jquery": "^3.5.14",
     "@types/jexl": "^2.3.0",
+    "@types/node": "^18.16.18",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",

jbrowse/package.json

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
+import { JBrowseLinearGenomeView, ViewModel } from '@jbrowse/react-linear-genome-view';
 import { createTheme, makeStyles } from '@material-ui/core/styles';
 import LogSession from './plugins/LogSession/index';
 import ExtendedVariantPlugin from './plugins/ExtendedVariantPlugin/index';
@@ -51,7 +51,7 @@ function View(){
         //TODO: can we make this expand to full page height?
         <div style={{height: "100%"}}>
             <ErrorBoundary>
-                <JBrowseLinearGenomeView viewState={state} />
+                <JBrowseLinearGenomeView viewState={state as ViewModel} />
                 <JBrowseFooter viewState={state} bgColor={bgColor}/>
             </ErrorBoundary>
         </div>

jbrowse/src/client/JBrowse/Browser/Browser.tsx

@@ -1,17 +1,16 @@
-import {colorSchemes} from "./colorSchemes"
-import {style as styles} from "./style";
-import {getSession} from '@jbrowse/core/util'
-import {readConfObject} from '@jbrowse/core/configuration'
-import {generateSchemeJexl} from "./colorUtil";
+import { colorSchemes } from './colorSchemes';
+import { style as styles } from './style';
+import { getSession } from '@jbrowse/core/util';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { generateSchemeJexl } from './colorUtil';
 
-import {Button, FormControl, InputLabel, MenuItem, Select} from '@material-ui/core'
-import {useState} from 'react'
-import SchemeTable from './SchemeComponent'
+import { Button, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import React, { useState } from 'react';
+import SchemeTable from './SchemeComponent';
+import { SessionWithWidgets } from '@jbrowse/core/util/types';
+import { observer } from 'mobx-react';
 
 export default jbrowse => {
-
-    const { observer, PropTypes: MobxPropTypes } = jbrowse.jbrequire('mobx-react')
-    const React = jbrowse.jbrequire('react')
     function ColorSchemePicker(props){
         const classes = styles()
         const { model } = props
@@ -32,7 +31,8 @@ export default jbrowse => {
             track.displays[0].renderer.palette.set(palette)
             track.displays[0].renderer.color1.set(generateSchemeJexl(palette))
 
-            getSession(model).hideWidget(model)
+            const m = getSession(model) as SessionWithWidgets
+            m.hideWidget(model)
         }
 
         const menuItems = (

…VariantPlugin/ColorWidget/ColorWidget.js …ariantPlugin/ColorWidget/ColorWidget.tsxjbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/ColorWidget.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/ColorWidget.tsx jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/ColorWidget.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/ColorWidget.tsx

@@ -17,7 +17,7 @@ function makeTitle(key){
 
 const SchemeComponent = observer(props => {
    const classes = styles()
-   let scheme = props.scheme
+   let scheme = props.scheme as any
    let tableHeader = <></>
    let table = <></>
    const lastRow =
@@ -30,12 +30,11 @@ const SchemeComponent = observer(props => {
                sx={{
                  width: 10,
                  height: 10,
-                 backgroundColor: 'gray',
                  position: 'relative',
                  left: '50%',
                  right: '50%'
                }}
-               fill='gray'
+               bgcolor='gray'
              />
          </TableCell>
       </TableRow>
@@ -63,12 +62,11 @@ const SchemeComponent = observer(props => {
                      sx={{
                        width: 10,
                        height: 10,
-                       backgroundColor: '#'+gradient[i].hex,
                        position: 'relative',
                        left: '50%',
                        right: '50%'
                      }}
-                     fill={'#'+gradient[i].hex}
+                     bgcolor={'#'+gradient[i].hex}
                    />
                 </TableCell>
             </TableRow>)
@@ -96,12 +94,11 @@ const SchemeComponent = observer(props => {
                   sx={{
                     width: 10,
                     height: 10,
-                    backgroundColor: val,
                     position: 'relative',
                     left: '50%',
                     right: '50%'
                   }}
-                  fill={val}
+                  bgcolor={val as string}
                 />
             </TableCell>
          </TableRow>

…antPlugin/ColorWidget/SchemeComponent.js …ntPlugin/ColorWidget/SchemeComponent.tsxjbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/SchemeComponent.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/SchemeComponent.tsx jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/SchemeComponent.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/SchemeComponent.tsx

@@ -40,7 +40,7 @@ export function generateGradient(hex1, hex2, steps, maxVal){
 }
 
 export function generateNumJexl(scheme){
-   // scheme: an object from colorSchemes.js
+   // scheme: an object from colorSchemes.ts
    // creates a jexl string that returns colors in a gradient based on schema passed
    let jexl = "jexl"
    let gradientSteps = generateGradient(scheme.options["minVal"], scheme.options["maxVal"], scheme.gradientSteps, scheme.maxVal)
@@ -65,7 +65,7 @@ export function generateNumJexl(scheme){
 }
 
 export function generateOptJexl(scheme){
-   // scheme: an object from colorSchemes.js
+   // scheme: an object from colorSchemes.ts
    // creates a jexl string that returns colors based on scheme passed
    let jexl = "jexl"
    Object.entries(scheme.options).map(([key, val]) =>

…ariantPlugin/ColorWidget/colorSchemes.js …ariantPlugin/ColorWidget/colorSchemes.tsjbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/colorSchemes.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/colorSchemes.ts jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/colorSchemes.js renamed to jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/colorSchemes.ts

@@ -1,5 +1,5 @@
 var _styles = require("@material-ui/core/styles")
-export const style = (0, _styles.makeStyles)(function (theme) {
+export const style = (_styles.makeStyles)(function (theme) {
    return {
       schemeControl: {
          margin: theme.spacing(2),