Merge pull request #78 from tripal/tv4-renderJBrowseFromURL

Integration with JBrowse2 by providing a config.json via URL
tripal · Apr 19, 2024 · 772f6f7 · 772f6f7
2 parents 5f2f41c + c326ac1
commit 772f6f7
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 35 deletions.
diff --git a/js/createJBrowseLinearGenomeView.js b/js/createJBrowseLinearGenomeView.js
@@ -1,19 +1,42 @@
 // This is derived from JBrowse2 documentation for embedding a JBrowse:
 // 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) {
+        Drupal.ajax({
+            headers: { "Content-Type": "application/json" },
+            url: drupalSettings.jbrowseUrl,
+            method: "GET",
+            success: function (data, status, xhr) {
+                const { createViewState, JBrowseLinearGenomeView } =
+                    JBrowseReactLinearGenomeView
+                const { createElement } = React
+                const { render } = ReactDOM
+                const params = { 
+                  assembly: data['assemblies'][0],
+                  tracks: data['tracks'],
+                }
+                // If a starting location was not set, then the default behavior
+                // is to prompt the user to select a chromosome
+                if (drupalSettings.location) {
+                  params.location = drupalSettings.location
+                }
+                const state = new createViewState(params)
+                render(
+                    createElement(JBrowseLinearGenomeView, { viewState: state }),
+                    document.getElementById('jbrowse_linear_genome_view'),
+                )
+             }
+        }).execute();
+      }
+    );
+  }
+};
+
diff --git a/src/Entity/JbrowseInstance.php b/src/Entity/JbrowseInstance.php
@@ -48,7 +48,6 @@
  *     "organism_page_id" = "organism_page_id",
  *     "assembly_page_id" = "assembly_page_id",
  *     "jbrowse_url" = "jbrowse_url",
- *     "jbrowse_version" = "jbrowse_version",
  *   },
  *   links = {
  *     "collection" = "/admin/content/jbrowse-instance",
@@ -182,7 +181,7 @@ public static function baseFieldDefinitions(EntityTypeInterface $entity_type) {
     $fields['assembly_page_id'] = BaseFieldDefinition::create('entity_reference')
       ->setTranslatable(TRUE)
       ->setLabel(t('Genome Assembly'))
-      ->setDescription(t('Select the analysis which describes the sequence assembly used as the backbone for this JBrowse instance. <br> <strong>Please choose analysis carefully</strong> since it can not change once instance is created.'))
+      ->setDescription(t('Select the genome assembly which describes the sequence used as the backbone for this JBrowse instance. <br> <strong>Please choose carefully</strong> since it can not change once the instance is created.'))
       ->setRequired(TRUE)
       ->setSetting('target_type', 'tripal_entity')
       ->setSetting('handler_settings', ['target_bundles' => ['genome_project' => 'genome_project', 'genome_assembly' => 'genome_assembly']])
@@ -205,8 +204,8 @@ public static function baseFieldDefinitions(EntityTypeInterface $entity_type) {
 
     $fields['jbrowse_url'] = BaseFieldDefinition::create('uri')
       ->setTranslatable(TRUE)
-      ->setLabel(t('JBrowse URL'))
-      ->setDescription(t('Specify the URL of an exisiting JBrowse instance that you want to register.'))
+      ->setLabel(t('JBrowse2 Configuration URL'))
+      ->setDescription(t('Specify the URL of a JBrowse2 configuration file (commonly referred to as config.json) in JSON format. <br>Refer to the <a href="https://jbrowse.org/jb2/docs/config_guide/">Config guide in the JBrowse2 docs</a> for instructions on how to generate your own config file.'))
       ->setRequired(TRUE)
       ->setSetting('max_length', 255)
       ->setDisplayOptions('form', [
@@ -221,17 +220,12 @@ public static function baseFieldDefinitions(EntityTypeInterface $entity_type) {
 //      ])
       ->setDisplayConfigurable('view', TRUE);
 
-    $fields['jbrowse_version'] = BaseFieldDefinition::create('list_string')
-      ->setTranslatable(TRUE)
-      ->setLabel(t('JBrowse Version'))
-      ->setDescription(t('Select which JBrowse version to use for this instance.'))
-      ->setRequired(TRUE)
-      ->setSettings([
-        'allowed_values' => ['1' => '1.x', '2' => '2.x']
-      ])
-      ->setDefaultValue('2')
+    $fields['location'] = BaseFieldDefinition::create('string')
+      ->setLabel(t('Default Start Location'))
+      ->setDescription(t('Set the initial genomic location that will be made visible in the viewing field. <br> To see the list of possible input strings, please refer to the documentation. <br> If not set, then the the user will be prompted to select a chromosome and location to start with.'))
+      ->setSetting('max_length', 255)
       ->setDisplayOptions('form', [
-        'type' => 'options_select',
+        'type' => 'string_textfield',
         'weight' => -5,
       ])
       ->setDisplayConfigurable('form', TRUE)

diff --git a/templates/jbrowse-instance.html.twig b/templates/jbrowse-instance.html.twig
@@ -20,6 +20,6 @@
   {% endif %}
   {% if content %}
     {{- content -}}
-    <div id="jbrowse_linear_genome_view" width="100%" height="100%">this is where the browser should be</div>
+    <div id="jbrowse_linear_genome_view" width="100%" height="100%">JBrowse2 loading...</div>
   {% endif %}
 </article>
diff --git a/tripal_jbrowse.libraries.yml b/tripal_jbrowse.libraries.yml
@@ -2,7 +2,7 @@ react:
   version: latest
   js:
     https://unpkg.com/react@16/umd/react.development.js: { type: external, minified: true }
-    https://unpkg.com/react-dom@16/umd/react-dom.development.js: { type: external, minified: true }
+    https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js: { type: external, minified: true }
 
 jbrowse:
   version: latest
@@ -13,4 +13,3 @@ createJBrowseLinearGenomeView:
   version: 1.x
   js:
     js/createJBrowseLinearGenomeView.js: { attributes: { type: module }, preprocess: false }
-
diff --git a/tripal_jbrowse.module b/tripal_jbrowse.module
@@ -36,11 +36,25 @@ 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 and the starting location (sequence coordinates) of our JBrowse instance 
+  // from the content entity
+  // We are 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'];
+  // Location is not required so check that there is a value first
+  if ($instance->get('location')->getValue()) {
+    $location = $instance->get('location')->getValue();
+    $variables['#attached']['drupalSettings']['location'] = $location[0]['value'];
+  }
+
+  // Add our URL as an ajax trusted URL
+  $variables['#attached']['drupalSettings']['ajaxTrustedUrl'][$url[0]['value']] = TRUE;
 }
 
 /**