SVGRenderer replacement and jbrowse version update

jbrowse/package.json

@@ -11,18 +11,20 @@
     "clean": "rimraf resources/web/gen && rimraf resources/web/jbrowse/gen && rimraf resources/views/gen",
     "jb-sea:fetch": "node ./resources/external/fetch-jbrowse-bundle.mjs",
     "jb-sea:build": "node ./resources/external/build-sea.mjs ./resources/external/jbrowse.js",
-    "jb-sea": "npm run jb-sea:fetch && npm run jb-sea:build"
+    "jb-sea": "npm run jb-sea:fetch && npm run jb-sea:build",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "@gmod/vcf": "^6.0.9",
-    "@jbrowse/core": "^3.2.0",
-    "@jbrowse/plugin-linear-genome-view": "^3.2.0",
-    "@jbrowse/plugin-svg": "^3.2.0",
-    "@jbrowse/plugin-variants": "^3.2.0",
-    "@jbrowse/product-core": "^3.2.0",
-    "@jbrowse/react-linear-genome-view2": "^3.2.0",
+    "@gmod/vcf": "^7.0.0",
+    "@jbrowse/core": "^4.1.3",
+    "@jbrowse/mobx-state-tree": "^5.5.0",
+    "@jbrowse/plugin-canvas": "^4.1.3",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.3",
+    "@jbrowse/plugin-variants": "^4.1.3",
+    "@jbrowse/product-core": "^4.1.3",
+    "@jbrowse/react-linear-genome-view2": "^4.1.3",
     "@labkey/api": "^1.39.0",
-    "@labkey/components": "^6.32.2",
+    "@labkey/components": "^7.16.0",
     "@mui/x-data-grid": "^7.28.1",
     "assert": "^2.1.0",
     "browserify-zlib": "^0.2.0",
@@ -46,12 +48,14 @@
     "vm-browserify": "^1.1.2"
   },
   "devDependencies": {
-    "@labkey/build": "^8.4.0",
+    "@labkey/build": "^8.8.0",
     "@types/jexl": "^2.3.4",
     "@types/jquery": "^3.5.32",
     "@types/node": "^20.14.11",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "patch-package": "^8.0.1",
+    "postinstall-postinstall": "^2.1.0",
     "rimraf": "^6.0.1",
     "tar": "^7.5.7",
     "typescript": "^5.1.6",

jbrowse/patches/@gmod+bbi+8.1.1.patch

@@ -0,0 +1,25 @@
+diff --git a/node_modules/@gmod/bbi/esm/wasm/inflate-wasm-inlined.js b/node_modules/@gmod/bbi/esm/wasm/inflate-wasm-inlined.js
+index b2d8cfa..07f8d05 100644
+--- a/node_modules/@gmod/bbi/esm/wasm/inflate-wasm-inlined.js
++++ b/node_modules/@gmod/bbi/esm/wasm/inflate-wasm-inlined.js
+@@ -357,10 +357,17 @@ async function init() {
+         return wrapper_wasm;
+     if (!initPromise) {
+         initPromise = (async () => {
+-            const response = await fetch(inflate_wasm_bg_namespaceObject);
+-            const bytes = await response.arrayBuffer();
++            const b64 = inflate_wasm_bg_namespaceObject.replace(
++                'data:application/wasm;base64,',
++                '',
++            );
++            const bin = atob(b64);
++            const bytes = new Uint8Array(bin.length);
++            for (let i = 0; i < bin.length; i++) {
++                bytes[i] = bin.charCodeAt(i);
++            }
+             const { instance } = await WebAssembly.instantiate(bytes, {
+-                './inflate_wasm_bg.js': src_wasm_inflate_wasm_bg_namespaceObject,
++            './inflate_wasm_bg.js': src_wasm_inflate_wasm_bg_namespaceObject,
+             });
+             wrapper_wasm = instance.exports;
+             __wbg_set_wasm(wrapper_wasm);

jbrowse/patches/@gmod+bgzf-filehandle+6.0.12.patch

@@ -0,0 +1,27 @@
+diff --git a/node_modules/@gmod/bgzf-filehandle/esm/wasm/bgzf-wasm-inlined.js b/node_modules/@gmod/bgzf-filehandle/esm/wasm/bgzf-wasm-inlined.js
+index b8a4365..5227798 100644
+--- a/node_modules/@gmod/bgzf-filehandle/esm/wasm/bgzf-wasm-inlined.js
++++ b/node_modules/@gmod/bgzf-filehandle/esm/wasm/bgzf-wasm-inlined.js
+@@ -350,11 +350,19 @@ async function init() {
+     if (!initPromise) {
+         initPromise = (async () => {
+             // wasmData is a data URL from asset/inline
+-            const response = await fetch(bgzf_wasm_bg_namespaceObject);
+-            const bytes = await response.arrayBuffer();
++            const b64 = bgzf_wasm_bg_namespaceObject.replace(
++                'data:application/wasm;base64,',
++                '',
++            );
++            const bin = atob(b64);
++            const bytes = new Uint8Array(bin.length);
++            for (let i = 0; i < bin.length; i++) {
++            bytes[i] = bin.charCodeAt(i);
++            }
+             const { instance } = await WebAssembly.instantiate(bytes, {
+-                './bgzf_wasm_bg.js': src_wasm_bgzf_wasm_bg_namespaceObject,
++            './bgzf_wasm_bg.js': src_wasm_bgzf_wasm_bg_namespaceObject,
+             });
++
+             wrapper_wasm = instance.exports;
+             __wbg_set_wasm(wrapper_wasm);
+             return wrapper_wasm;

jbrowse/resources/external/mGAPSession.json

@@ -60,9 +60,6 @@
           "maxFeatureScreenDensity": 100,
           "height": 400,
           "mouseover": "jexl:'Position: ' + formatWithCommas(get(feature,'POS'))",
-          "renderer": {
-            "type": "ExtendedVariantRenderer"
-          },
           "detailsConfig": {
             "sections": [
               {

jbrowse/resources/external/minimalSession.json

@@ -51,10 +51,7 @@
       },
       "displays": [{
         "type": "ExtendedVariantDisplay",
-        "displayId": "clinvar_ncbi_hg38-ExtendedVariantDisplay",
-        "renderer": {
-          "type": "ExtendedVariantRenderer"
-        }
+        "displayId": "clinvar_ncbi_hg38-ExtendedVariantDisplay"
       }],
       "metadata": {
         "extendedVariantDisplayConfig" : [

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

@@ -47,7 +47,7 @@ const JBrowseFilterPanel = observer(props => {
     const filterDisplayItems = []
     for (const track of tracks) {
         // @ts-ignore
-        const activeSamples = getConf(track, ['displays', '0', 'renderer', 'activeSamples'])
+        const activeSamples = getConf(track, ['displays', '0', 'activeSamples'])
         const trackId = getConf(track, ['trackId'])
         if (activeSamples) {
             const sampleText = activeSamples.split(',').length > 5 ? '<too many to show>' : activeSamples
@@ -56,7 +56,7 @@ const JBrowseFilterPanel = observer(props => {
             filterDisplayItems.push(<Button color="primary" key={"sampleFilterButton"} style={{marginRight: 10, textTransform: 'initial'}} variant={'contained'} onClick={() => handleButtonClick('SampleFilterWidget', track, label)}>{label + ': ' + 'Showing sites with a variant in any of:'}<br />{sampleText}</Button>)
         }
 
-        const infoFilters = getConf(track, ['displays', '0', 'renderer', 'infoFilters'])
+        const infoFilters = getConf(track, ['displays', '0', 'infoFilters'])
         if (infoFilters?.length) {
             const filterText = infoFilters.map(filter => generateUserFriendlyLabel(filter)).join(', ')
             const label = getConf(track, ['name']) || getConf(track, ['trackId'])

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ColorWidget/ColorWidget.tsx

@@ -23,7 +23,7 @@ export default jbrowse => {
 
         // @ts-ignore
         const displays = readConfObject(track, ['displays']) || []
-        let paletteName = displays[0].renderer.palette
+        let paletteName = displays[0].palette
         paletteName = paletteName || 'IMPACT'
 
         const [palette, setPalette] = useState(paletteName)
@@ -34,7 +34,7 @@ export default jbrowse => {
 
         const onApply = (event) => {
             // NOTE: preProcessSnapshot in the renderer schema should set color1
-            track.displays[0].renderer.palette.set(palette)
+            track.displays[0].palette.set(palette)
             track.displays[0].renderer.color1.set(generateSchemeJexl(palette))
 
             const m = getSession(model) as SessionWithWidgets

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantAdapter/ExtendedVcfFeature.ts

@@ -8,25 +8,36 @@ export default class ExtendedVcfFeature extends VcfFeature {
         super(args)
     }
 
+    toJSON() {
+        const ret: any = super.toJSON()
+
+        // Preserve VCF INFO header metadata through JSON/snapshot flows used by
+        // JBrowse widgets. parser is not guaranteed to survive serialization.
+        ret.vcfMetadataInfo = (this as any).parser?.metadata?.INFO || {}
+
+        return ret
+    }
+
     static extractImpact(variant: Variant) {
         // Only append if not present:
         if (variant.INFO["IMPACT"]) {
             return(variant);
         }
 
-        if (!variant.INFO["ANN"]) {
+        const ann = variant.INFO["ANN"] as string[] | undefined
+        if (!ann) {
             return(variant);
         }
 
         let IMPACTs = new Set<String>()
-        for (let i = 0; i < variant.INFO["ANN"].length; i++){
-            if (/HIGH/g.exec(variant.INFO["ANN"][i])){
+        for (let i = 0; i < ann.length; i++){
+            if (/HIGH/g.exec(ann[i])){
                 IMPACTs.add("HIGH")
             }
-            else if (/MODERATE/g.exec(variant.INFO["ANN"][i])){
+            else if (/MODERATE/g.exec(ann[i])){
                 IMPACTs.add("MODERATE")
             }
-            else if (/LOW/g.exec(variant.INFO["ANN"][i])){
+            else if (/LOW/g.exec(ann[i])){
                 IMPACTs.add("LOW")
             }
         }

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantAdapter/configSchema.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
 // TODO: avoid this duplication

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantDisplay/configSchema.ts

@@ -1,5 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import {types} from "mobx-state-tree";
+import {types} from "@jbrowse/mobx-state-tree";
+
 
 export const variantDetailsConfig = ConfigurationSchema('VariantDetailsConfig', {
     sections: types.array(ConfigurationSchema('VariantDetailsSection', {
@@ -35,8 +36,30 @@ export default pluginManager => {
 
           contextVariable: ['feature'],
       },
-      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
-      detailsConfig: variantDetailsConfig
+      renderer: types.optional(
+        pluginManager.pluggableConfigSchemaType('renderer'),
+        { type: 'CanvasFeatureRenderer' },
+      ),
+      detailsConfig: variantDetailsConfig,
+      infoFilters: {
+          type: 'stringArray',
+          description: 'the active filter set by the user',
+          defaultValue: []
+      },
+      activeSamples: {
+          type: 'string',
+          defaultValue: '',
+          description: 'comma-delineated string of sample IDs to filter'
+      },
+      supportsLuceneIndex: {
+          type: 'boolean',
+          defaultValue: false
+      },
+      palette: {
+          type: 'string',
+          description: 'The names of the palette to use for coloring features',
+          defaultValue: 'IMPACT',
+      }
     },
     { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true },
   )

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantDisplay/model.tsx

@@ -1,13 +1,18 @@
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
-import { AnyConfigurationModel, } from '@jbrowse/core/configuration/configurationSchema';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { getContainingTrack, getContainingView, getSession } from '@jbrowse/core/util';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import configSchemaF from './configSchema';
-import { getEnv, IAnyStateTreeNode, types } from 'mobx-state-tree';
+import { getEnv, IAnyStateTreeNode, types } from '@jbrowse/mobx-state-tree';
 import PaletteIcon from '@mui/icons-material/Palette';
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 import { navigateToSearch, navigateToTable } from '../../../../utils';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+
+function escapeForSingleQuotedJexl(value: string) {
+   return value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+}
 
 function getContainingTrackWithConfig(node: IAnyStateTreeNode): IAnyStateTreeNode & { configuration: AnyConfigurationModel } {
    return getContainingTrack(node) as any;
@@ -127,8 +132,41 @@ export default jbrowse => {
                return {
                   ...superRenderProps(),
                   config: config,
-                  rendererConfig: config
+                  rendererConfig: config,
+                  filters: new SerializableFilterChain({
+                     filters: this.activeFilters(),
+                     jexl: jbrowse.jexl,
+                  }),
+               }
+            },
+
+            activeFilters() {
+               const staticJexlFilters = (getConf(self, 'jexlFilters') || []).map((f: string) =>
+                  f?.startsWith('jexl:') ? f : `jexl:${f}`,
+               )
+
+               const infoFilters = getConf(self, 'infoFilters') || []
+               const activeSamples = getConf(self, 'activeSamples') || ''
+               const sampleFilters = activeSamples
+                  ? activeSamples
+                       .split(',')
+                       .map((s: string) => s.trim())
+                       .filter((s: string) => !!s)
+                  : []
+
+               const dynamicFilters: string[] = []
+
+               if (infoFilters.length) {
+                  const serialized = escapeForSingleQuotedJexl(JSON.stringify(infoFilters))
+                  dynamicFilters.push(`jexl:passesInfoFilters(feature,'${serialized}')`)
                }
+
+               if (sampleFilters.length) {
+                  const serialized = escapeForSingleQuotedJexl(JSON.stringify(sampleFilters))
+                  dynamicFilters.push(`jexl:passesSampleFilters(feature,'${serialized}')`)
+               }
+
+               return [...staticJexlFilters, ...dynamicFilters]
             },
 
             get rendererTypeName() {