diff --git a/packages/jbrowse/.gitignore b/packages/jbrowse/.gitignore
new file mode 100644
index 0000000..d08e4fc
--- /dev/null
+++ b/packages/jbrowse/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+*.tsbuildinfo
diff --git a/packages/jbrowse/README.md b/packages/jbrowse/README.md
new file mode 100644
index 0000000..5741ce6
--- /dev/null
+++ b/packages/jbrowse/README.md
@@ -0,0 +1,21 @@
+# vite with @jbrowse/react-app
+
+This is a demo of using the @jbrowse/react-app NPM package with vite (see
+https://vitejs.dev/)
+
+Vite is a build system that is very fast and becoming more popular, using
+esbuild and rollup instead of webpack
+
+This particular demo includes several polyfills that are needed for JBrowse
+including the Buffer polyfill
+
+## Demo of `@jbrowse/react-app` with vite
+
+See this app running at https://jbrowse.org/demos/app-vite/.
+
+## Usage
+
+Run `yarn` and then `yarn dev` to start a development instance
+
+Run `yarn build` which produces a `build` directory that can be deployed to a
+static web server
diff --git a/packages/jbrowse/eslint.config.js b/packages/jbrowse/eslint.config.js
new file mode 100644
index 0000000..6b38e0e
--- /dev/null
+++ b/packages/jbrowse/eslint.config.js
@@ -0,0 +1,25 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+ { ignores: ["dist"] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ["**/*.{ts,tsx}"],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ "react-hooks": reactHooks,
+ "react-refresh": reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+ },
+ },
+);
diff --git a/packages/jbrowse/index.html b/packages/jbrowse/index.html
new file mode 100644
index 0000000..b4ca8cf
--- /dev/null
+++ b/packages/jbrowse/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/jbrowse/package.json b/packages/jbrowse/package.json
new file mode 100644
index 0000000..8257e5e
--- /dev/null
+++ b/packages/jbrowse/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "galaxy-jbrowse",
+ "type": "module",
+ "version": "0.0.0",
+ "license": "MIT",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview",
+ "prettier": "prettier --config ./prettier.config.js --write '**/*.{css,json,js,jsx,ts,tsx,vue}'",
+ "predeploy": "npm run build",
+ "lint": "eslint ."
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.13.0",
+ "@fontsource/roboto": "^5.0.2",
+ "@jbrowse/core": "^2.17.0",
+ "@jbrowse/react-app": "^2.17.0",
+ "@jbrowse/react-linear-genome-view": "^2.17.0",
+ "@types/react": "^18.2.43",
+ "@types/react-dom": "^18.0.9",
+ "@vitejs/plugin-react": "^4.2.1",
+ "@vitejs/plugin-vue": "^5.2.1",
+ "buffer": "^6.0.3",
+ "eslint": "^9.13.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.14",
+ "galaxy-charts": "^0.0.40",
+ "galaxy-charts-xml-parser": "^1.0.3",
+ "globals": "^15.11.0",
+ "prettier": "^3.4.2",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
+ "typescript": "^5.3.3",
+ "typescript-eslint": "^8.11.0",
+ "vite": "^5.0.7"
+ },
+ "resolutions": {
+ "@mui/icons-material": "6.0.2"
+ }
+}
diff --git a/packages/jbrowse/prettier.config.js b/packages/jbrowse/prettier.config.js
new file mode 100644
index 0000000..6934b04
--- /dev/null
+++ b/packages/jbrowse/prettier.config.js
@@ -0,0 +1,5 @@
+export default {
+ tabWidth: 4,
+ printWidth: 120,
+ bracketSameLine: true,
+};
diff --git a/packages/jbrowse/public/jbrowse.json b/packages/jbrowse/public/jbrowse.json
new file mode 100644
index 0000000..2c9f5f2
--- /dev/null
+++ b/packages/jbrowse/public/jbrowse.json
@@ -0,0 +1,269 @@
+{
+ "assemblies": [
+ {
+ "name": "GRCh38",
+ "aliases": ["hg38"],
+ "sequence": {
+ "type": "ReferenceSequenceTrack",
+ "trackId": "GRCh38-ReferenceSequenceTrack",
+ "adapter": {
+ "type": "BgzipFastaAdapter",
+ "fastaLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz"
+ },
+ "faiLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.fai"
+ },
+ "gziLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.gzi"
+ }
+ }
+ },
+ "refNameAliases": {
+ "adapter": {
+ "type": "RefNameAliasAdapter",
+ "location": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt"
+ }
+ }
+ }
+ }
+ ],
+ "tracks": [
+ {
+ "type": "FeatureTrack",
+ "trackId": "genes",
+ "name": "NCBI RefSeq Genes",
+ "assemblyNames": ["GRCh38"],
+ "category": ["Genes"],
+ "adapter": {
+ "type": "Gff3TabixAdapter",
+ "gffGzLocation": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz"
+ },
+ "index": {
+ "location": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.tbi"
+ }
+ }
+ },
+ "textSearching": {
+ "textSearchAdapter": {
+ "type": "TrixTextSearchAdapter",
+ "textSearchAdapterId": "gff3tabix_genes-index",
+ "ixFilePath": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.ix"
+ },
+ "ixxFilePath": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.ixx"
+ },
+ "metaFilePath": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json"
+ },
+ "assemblyNames": ["GRCh38"]
+ }
+ }
+ },
+ {
+ "type": "FeatureTrack",
+ "trackId": "repeats_hg38",
+ "name": "Repeats",
+ "assemblyNames": ["hg38"],
+ "category": ["Annotation"],
+ "adapter": {
+ "type": "BigBedAdapter",
+ "bigBedLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/repeats.bb",
+ "locationType": "UriLocation"
+ }
+ }
+ },
+ {
+ "type": "AlignmentsTrack",
+ "trackId": "NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome",
+ "name": "NA12878 Exome",
+ "assemblyNames": ["GRCh38"],
+ "category": ["1000 Genomes", "Alignments"],
+ "adapter": {
+ "type": "CramAdapter",
+ "cramLocation": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram"
+ },
+ "craiLocation": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram.crai"
+ },
+ "sequenceAdapter": {
+ "type": "BgzipFastaAdapter",
+ "fastaLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz"
+ },
+ "faiLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.fai"
+ },
+ "gziLocation": {
+ "uri": "https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.gzi"
+ }
+ }
+ }
+ },
+ {
+ "type": "VariantTrack",
+ "trackId": "ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf",
+ "name": "1000 Genomes Variant Calls",
+ "assemblyNames": ["GRCh38"],
+ "category": ["1000 Genomes", "Variants"],
+ "adapter": {
+ "type": "VcfTabixAdapter",
+ "vcfGzLocation": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/variants/ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf.gz"
+ },
+ "index": {
+ "location": {
+ "uri": "https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/variants/ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf.gz.tbi"
+ }
+ }
+ }
+ },
+ {
+ "type": "QuantitativeTrack",
+ "trackId": "hg38.100way.phyloP100way",
+ "name": "hg38.100way.phyloP100way",
+ "category": ["Conservation"],
+ "assemblyNames": ["hg38"],
+ "adapter": {
+ "type": "BigWigAdapter",
+ "bigWigLocation": {
+ "uri": "https://hgdownload.cse.ucsc.edu/goldenpath/hg38/phyloP100way/hg38.phyloP100way.bw",
+ "locationType": "UriLocation"
+ }
+ }
+ }
+ ],
+ "defaultSession": {
+ "name": "this session",
+ "margin": 0,
+ "views": [
+ {
+ "id": "linearGenomeView",
+ "minimized": false,
+ "type": "LinearGenomeView",
+ "offsetPx": 191980240,
+ "bpPerPx": 0.1554251851851852,
+ "displayedRegions": [
+ {
+ "refName": "10",
+ "start": 0,
+ "end": 133797422,
+ "reversed": false,
+ "assemblyName": "GRCh38"
+ }
+ ],
+ "tracks": [
+ {
+ "id": "4aZAiE-A3",
+ "type": "ReferenceSequenceTrack",
+ "configuration": "GRCh38-ReferenceSequenceTrack",
+ "minimized": false,
+ "displays": [
+ {
+ "id": "AD3gqvG0_6",
+ "type": "LinearReferenceSequenceDisplay",
+ "height": 180,
+ "configuration": "GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay",
+ "showForward": true,
+ "showReverse": true,
+ "showTranslation": true
+ }
+ ]
+ },
+ {
+ "id": "T6uhrtY40O",
+ "type": "AlignmentsTrack",
+ "configuration": "NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome",
+ "minimized": false,
+ "displays": [
+ {
+ "id": "FinKswChSr",
+ "type": "LinearAlignmentsDisplay",
+ "PileupDisplay": {
+ "id": "YAAaF494z",
+ "type": "LinearPileupDisplay",
+ "height": 134,
+ "configuration": {
+ "type": "LinearPileupDisplay",
+ "displayId": "NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz"
+ },
+ "showSoftClipping": false,
+ "filterBy": {
+ "flagInclude": 0,
+ "flagExclude": 1540
+ }
+ },
+ "SNPCoverageDisplay": {
+ "id": "VTQ_VGbAVJ",
+ "type": "LinearSNPCoverageDisplay",
+ "height": 45,
+ "configuration": {
+ "type": "LinearSNPCoverageDisplay",
+ "displayId": "NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz"
+ },
+ "selectedRendering": "",
+ "resolution": 1,
+ "constraints": {},
+ "filterBy": {
+ "flagInclude": 0,
+ "flagExclude": 1540
+ }
+ },
+ "snpCovHeight": 45,
+ "configuration": "NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay",
+ "height": 179,
+ "lowerPanelType": "LinearPileupDisplay"
+ }
+ ]
+ },
+ {
+ "id": "EUnTnpVI6",
+ "type": "QuantitativeTrack",
+ "configuration": "hg38.100way.phyloP100way",
+ "minimized": false,
+ "displays": [
+ {
+ "id": "mrlawr9Wtg",
+ "type": "LinearWiggleDisplay",
+ "height": 100,
+ "configuration": "hg38.100way.phyloP100way-LinearWiggleDisplay",
+ "selectedRendering": "",
+ "resolution": 1,
+ "constraints": {}
+ }
+ ]
+ },
+ {
+ "id": "Cbnwl72EX",
+ "type": "VariantTrack",
+ "configuration": "ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf",
+ "minimized": false,
+ "displays": [
+ {
+ "id": "dvXz01Wf6w",
+ "type": "LinearVariantDisplay",
+ "height": 100,
+ "configuration": "ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay"
+ }
+ ]
+ }
+ ],
+ "hideHeader": false,
+ "hideHeaderOverview": false,
+ "hideNoTracksActive": false,
+ "trackSelectorType": "hierarchical",
+ "trackLabels": "overlapping",
+ "showCenterLine": false,
+ "showCytobandsSetting": true,
+ "showGridlines": true,
+ "showTopMenu": false
+ }
+ ]
+ }
+}
diff --git a/packages/jbrowse/public/jbrowse.xml b/packages/jbrowse/public/jbrowse.xml
new file mode 100644
index 0000000..be5dbd7
--- /dev/null
+++ b/packages/jbrowse/public/jbrowse.xml
@@ -0,0 +1,20 @@
+
+
+
+ MY_DESCRIPTION
+
+
+ HistoryDatasetAssociation
+ MY_EXTENSION
+ MY_DATATYPE
+ dataset_id
+
+
+
+ dataset_id
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/jbrowse/src/App.vue b/packages/jbrowse/src/App.vue
new file mode 100644
index 0000000..bcbcd83
--- /dev/null
+++ b/packages/jbrowse/src/App.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/jbrowse/src/JBrowse.jsx b/packages/jbrowse/src/JBrowse.jsx
new file mode 100644
index 0000000..9b3c9e7
--- /dev/null
+++ b/packages/jbrowse/src/JBrowse.jsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react"
+import { createViewState, JBrowseApp } from "@jbrowse/react-app"
+import { createRoot, hydrateRoot } from "react-dom/client"
+import "@fontsource/roboto"
+
+import FieldSelectionPlugin from "./plugins/FieldSelectionPlugin"
+
+export default function JBrowseWrapper(props) {
+ const [viewState, setViewState] = useState()
+
+ useEffect(() => {
+ console.log("🧪 FieldSelectionPlugin class:", FieldSelectionPlugin)
+
+ const state = createViewState({
+ config: { ...props.config },
+ createRootFn: createRoot,
+ hydrateFn: hydrateRoot,
+ configuration: {
+ rpc: {
+ defaultDriver: "WebWorkerRpcDriver",
+ },
+ },
+ makeWorkerInstance: () =>
+ new Worker(new URL("./rpcWorker", import.meta.url), {
+ type: "module",
+ }),
+ plugins: [FieldSelectionPlugin],
+ })
+
+ setViewState(state)
+
+ setTimeout(() => {
+ console.log("🧩 Loaded plugins:")
+ for (const plugin of state.pluginManager.plugins) {
+ console.log("– – –", plugin.name)
+ }
+
+ const widgetTypes = state.pluginManager.widgetTypes
+ if (widgetTypes?.registeredTypes?.FieldSelectionWidget) {
+ console.log("🚀 Opening FieldSelectionWidget...")
+
+ state.session.addWidget("FieldSelectionWidget", "fieldSelection", {
+ id: "fieldSelection",
+ type: "FieldSelectionWidget", // ✅ required
+ })
+ state.session.showWidget("fieldSelection")
+ } else {
+ console.warn("⛔ FieldSelectionWidget not found in registeredTypes.")
+ }
+ }, 300)
+ }, [])
+
+ if (!viewState) return null
+
+ return
+}
diff --git a/packages/jbrowse/src/Viewport.vue b/packages/jbrowse/src/Viewport.vue
new file mode 100644
index 0000000..c93f0e3
--- /dev/null
+++ b/packages/jbrowse/src/Viewport.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
diff --git a/packages/jbrowse/src/main.js b/packages/jbrowse/src/main.js
new file mode 100644
index 0000000..ff4b9db
--- /dev/null
+++ b/packages/jbrowse/src/main.js
@@ -0,0 +1,54 @@
+import { createApp, h } from "vue";
+import App from "./App.vue";
+import "./style.css";
+
+import jbrowseConfig from "../public/jbrowse.json";
+
+async function main() {
+ if (import.meta.env.DEV) {
+ /**
+ * Development Environment Setup
+ *
+ * This section is specifically for configuring the application
+ * during development. You can modify the settings below to
+ * tailor your development environment, such as simulating data
+ * or working with mock services.
+ */
+
+ // Dynamically import the XML parser utility, used for parsing visualization configurations
+ const { parseXML } = await import("galaxy-charts-xml-parser");
+
+ // Construct the incoming data object with mock configuration and data
+ const dataIncoming = {
+ visualization_config: {
+ // Placeholder for dataset URL (can be replaced during actual development)
+ dataset_url: "MY_DATASET_URL",
+ // Placeholder for dataset ID
+ dataset_id: process.env.dataset_id,
+ // Placeholder for additional visualization settings
+ settings: {
+ jbrowseConfig,
+ },
+ },
+ // Parse and load the visualization XML configuration
+ visualization_plugin: await parseXML("jbrowse.xml"),
+ };
+
+ // Find the root app element and attach the mock data as a JSON string to its data-incoming attribute
+ const appElement = document.querySelector("#app");
+ appElement.setAttribute("data-incoming", JSON.stringify(dataIncoming));
+ }
+
+ /**
+ * Mount the Vue Application
+ *
+ * This initializes the Vue app, rendering the root component
+ * and passing in any necessary props such as credentials.
+ */
+ createApp({
+ render: () => h(App, { credentials: process.env.credentials }),
+ }).mount("#app");
+}
+
+// Start the application
+main();
diff --git a/packages/jbrowse/src/plugins/FieldSelectionPlugin.jsx b/packages/jbrowse/src/plugins/FieldSelectionPlugin.jsx
new file mode 100644
index 0000000..3404d0e
--- /dev/null
+++ b/packages/jbrowse/src/plugins/FieldSelectionPlugin.jsx
@@ -0,0 +1,87 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
+import Plugin from '@jbrowse/core/Plugin'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import React, { useEffect } from 'react'
+import { types } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+
+console.log('🧪 FieldSelectionPlugin module loaded')
+
+// React component for the widget
+const ReactComponent = observer(({ model }) => {
+ useEffect(() => {
+ console.log('👀 FieldSelectionWidget mounted')
+ return () => {
+ console.log('💨 FieldSelectionWidget unmounted')
+ }
+ }, [])
+
+ console.log('✅ FieldSelectionWidget rendered:', model)
+
+ return (
+
+
Add Track with Field Selection
+
Widget ID: {model.id}
+
+
🧬 Field Selection Widget
+
ID: {model.id}
+