JBrowse2 component integration

packages/sites/genomics-site/package.json

@@ -94,5 +94,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "@jbrowse/react-linear-genome-view": "^2.16.1"
+  }
 }

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/Gbrowse.jsx

@@ -3,7 +3,7 @@ import { once, debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { httpGet } from '@veupathdb/web-common/lib/util/http';
-import { JbrowseIframe } from '@veupathdb/web-common/lib/components/JbrowseIframe';
+import JbrowseIframe from './JBrowse2'; // stand-in for iframe component - it's not an iframe any more
 import { Loading } from '@veupathdb/wdk-client/lib/Components';
 import newFeatureImage from '@veupathdb/wdk-client/lib/Core/Style/images/new-feature.png';
 

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/JBrowse2.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { Loading } from '@veupathdb/wdk-client/lib/Components';
+import {
+  createViewState,
+  JBrowseLinearGenomeView,
+} from '@jbrowse/react-linear-genome-view';
+
+interface JBrowseConfig {
+  assemblies: { name: string }[];
+  tracks: any[];
+}
+
+interface Props {
+  jbrowseUrl: string;
+  height: number;
+}
+
+export default function JBrowse2LinearView({
+  jbrowseUrl,
+  height = 400,
+}: Props) {
+  //  const url = new URL(jbrowseUrl, 'https://example.com');
+  //  const params = url.searchParams;
+  const assemblyId = 'agamPEST'; // (params.get('data') ?? '').split('/').pop(); // TO DO: better fallback
+  const location = 'AgamP4_2L'; // params.get('loc');
+  //  const tracks = params.get('tracks'); // comma-delimited track ids
+
+  const [config, setConfig] = useState<JBrowseConfig | undefined>();
+  const [loading, setLoading] = useState(true);
+
+  // Could use wdk usePromise? or react-query?
+  useEffect(() => {
+    // Fetch the config JSON
+    fetch('/jbrowse2/config.json')
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setConfig(data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error('Failed to load JSON config:', error);
+        setLoading(false); // Set to false to avoid infinite loading
+      });
+  }, []);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (!config) {
+    return <div>Error loading configuration</div>; // Error handling fallback - TO DO add contact-us etc
+  }
+
+  const assembly = config.assemblies.find(({ name }) => name === assemblyId);
+
+  if (!assembly) {
+    return <div>Error finding assembly '{assemblyId}'</div>;
+  }
+  const { tracks } = config;
+
+  const viewState = createViewState({
+    assembly,
+    tracks,
+    location,
+  });
+
+  return <JBrowseLinearGenomeView viewState={viewState} />;
+}

packages/sites/genomics-site/webpack.config.local.mjs

@@ -17,6 +17,8 @@ export default configure({
   ...makeCommonDevServerConfig({
     rootClientUrl: process.env.ROOT_URL,
     proxies: {
+      [process.env.JBROWSE2_DATA_ENDPOINT]: process.env.JBROWSE2_DATA_URL,
+      [process.env.JBROWSE2_ENDPOINT]: process.env.JBROWSE2_URL,
       [process.env.WDK_SERVICE_ENDPOINT]: process.env.WDK_SERVICE_URL,
       [process.env.VDI_SERVICE_ENDPOINT]: process.env.VDI_SERVICE_URL,
       [process.env.SITE_SEARCH_SERVICE_ENDPOINT]: process.env.SITE_SEARCH_SERVICE_URL,