diff --git a/js/createJBrowseLinearGenomeView.js b/js/createJBrowseLinearGenomeView.js index b5edf26..a605a74 100644 --- 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'), -) \ No newline at end of file + +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 index 6729075..c67a6e4 100644 --- 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.
Please choose analysis carefully 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.
Please choose carefully 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.
Refer to the Config guide in the JBrowse2 docs 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.
To see the list of possible input strings, please refer to the documentation.
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 index 7d94521..bdc341d 100644 --- a/templates/jbrowse-instance.html.twig +++ b/templates/jbrowse-instance.html.twig @@ -20,6 +20,6 @@ {% endif %} {% if content %} {{- content -}} -
this is where the browser should be
+
JBrowse2 loading...
{% endif %} diff --git a/tripal_jbrowse.libraries.yml b/tripal_jbrowse.libraries.yml index 8df777d..e43154d 100644 --- 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 } - \ No newline at end of file diff --git a/tripal_jbrowse.module b/tripal_jbrowse.module index 4b09d17..d40d29b 100644 --- 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; } /**