Pulled out the URL of the JBrowse instance and passed it to js

js/createJBrowseLinearGenomeView.js

@@ -2,18 +2,33 @@
 // https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/06_creating_the_view/
 // @TODO: We want to make fields for the assembly and tracks files
 //        and pull those variables in
-import assembly from '/assembly.js'
-import tracks from '/tracks.js'
-const { createViewState, JBrowseLinearGenomeView } =
-    JBrowseReactLinearGenomeView
-const { createElement } = React
-const { render } = ReactDOM
-const state = new createViewState({
-    assembly,
-    tracks,
-    location: '1:100,987,269..100,987,368',
-})
-render(
-    createElement(JBrowseLinearGenomeView, { viewState: state }),
-    document.getElementById('jbrowse_linear_genome_view'),
-)
+Drupal.behaviors.embedJBrowse = {
+  attach: function (context, settings) {
+    // Use context to filter the DOM to only the elements of interest,
+    // and use once() to guarantee that our callback function processes
+    // any given element one time at most, regardless of how many times
+    // the behaviour itself is called (it is not sufficient in general
+    // to assume an element will only ever appear in a single context).
+    once('embedJBrowse', '#jbrowse_linear_genome_view', context).forEach(
+      function (element) {
+        console.log(drupalSettings.jbrowseUrl);
+//        import assembly from '/assembly.js'
+//        import tracks from '/tracks.js'
+        // const { createViewState, JBrowseLinearGenomeView } =
+        //     JBrowseReactLinearGenomeView
+        // const { createElement } = React
+        // const { render } = ReactDOM
+        // const state = new createViewState({
+        //     assembly,
+        //     tracks,
+        //     location: '1:100,987,269..100,987,368',
+        // })
+        // render(
+        //     createElement(JBrowseLinearGenomeView, { viewState: state }),
+        //     document.getElementById('jbrowse_linear_genome_view'),
+        // )
+      }
+    );
+  }
+};
+

tripal_jbrowse.libraries.yml

@@ -13,4 +13,3 @@ createJBrowseLinearGenomeView:
   version: 1.x
   js:
     js/createJBrowseLinearGenomeView.js: { attributes: { type: module }, preprocess: false }
-

tripal_jbrowse.module

@@ -36,11 +36,16 @@ function template_preprocess_jbrowse_instance(array &$variables) {
   foreach (Element::children($variables['elements']) as $key) {
     $variables['content'][$key] = $variables['elements'][$key];
   }
-
   $variables['#attached']['library'][] = 'tripal_jbrowse/react';
   $variables['#attached']['library'][] = 'tripal_jbrowse/jbrowse';
   $variables['#attached']['library'][] = 'tripal_jbrowse/createJBrowseLinearGenomeView';
 
+  // Grab the URL of our JBrowse instance from the content entity
+  // Taking this approach rather than through content so that we are not vulnerable
+  // to a user disabling it through the managed display UI
+  $instance = $variables['elements']['#jbrowse_instance'];
+  $url = $instance->get('jbrowse_url')->getValue();
+  $variables['#attached']['drupalSettings']['jbrowseUrl'] = $url[0]['value'];
 }
 
 /**