Add ROR Support for Institutions

app/assets/javascripts/application.js

@@ -83,4 +83,4 @@
 //= require copasi/copasi_simulation
 //= require plotly-2.27.0.min
 //= require extended_metadata_type
-
+//= require institution-ror-typeahead

app/assets/javascripts/institution-ror-typeahead.js

@@ -0,0 +1,266 @@
+var ROR_API_URL = "https://api.ror.org/organizations";
+
+
+function toggleUserInput(disabled) {
+    const action = disabled ? 'addClass' : 'removeClass';
+    const elements = [
+        '#institution_title',
+        '#institution_city',
+        '#institution_ror_id',
+        '#institution_web_page',
+        '.tt-input'
+    ];
+
+    elements.forEach(selector => {
+        $j(selector)[action]('institution-input-disable');
+        $j(selector).prop("readonly", disabled);
+        $j('#institution_country').prop('disabled', disabled);
+    });
+}
+
+function extractRorId(rorUrl) {
+    const regex = /https:\/\/ror\.org\/([^\/]+)/;
+    const match = rorUrl.match(regex);
+    if (match) {
+        return match[1];
+    } else {
+        return null;
+    }
+}
+
+function fetchRorData(rorId) {
+    var url = ROR_API_URL + '/' + rorId;
+    fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => {
+                    throw new Error(err.errors ? err.errors[0] : "Unknown error occurred");
+                });
+            }
+            return response.json();
+        })
+        .then(data => {
+            $j('#ror-response').html(JSON.stringify(data, undefined, 4));
+            $j('#institution_title').val(data.name);
+            $j('#institution_city').val(data.addresses[0]['city']);
+            $j('#institution_country').val(data.country.country_code);
+            $j('#institution_ror_id').val(extractRorId(data.id));
+            $j('#institution_web_page').val(data.links?.[0] || 'N/A');
+            $j('#ror-error-message').text('').hide();
+            $j('#institution_ror_id').removeClass("field_with_errors");
+            $j("#ror-error-message").closest(".form-group").removeClass("field_with_errors");
+            toggleUserInput(true);
+        })
+        .catch(error => {
+            $j('#ror-error-message').text(error.message).show();
+            $j('#institution_ror_id').addClass("field_with_errors");
+            $j("#ror-error-message").closest(".form-group").addClass("field_with_errors");
+        });
+}
+
+// ROR API source logic
+function rorQuerySource(query, processSync, processAsync) {
+    if (query.length < 3) {
+        return processAsync([]); // Trigger only for 3+ characters
+    }
+    var url = ROR_API_URL + '?query=' + encodeURIComponent(query);
+    return $j.ajax({
+        url: url,
+        type: 'GET',
+        dataType: 'json',
+        success: function (json) {
+            const orgs = json.items;
+            return processAsync(orgs);
+        }
+    });
+}
+
+// Template for Local Institution suggestions
+function localSuggestionTemplate(data) {
+    return `
+        <div>
+            <strong>${data.text}</strong>
+            <small>${data.hint || ''}</small>
+        </div>`;
+}
+
+// Template for ROR suggestions
+function rorSuggestionTemplate(data) {
+    var altNames = "";
+    if (data.aliases.length > 0) {
+        altNames += data.aliases.join(", ") + ", ";
+    }
+    if (data.acronyms.length > 0) {
+        altNames += data.acronyms.join(", ") + ", ";
+    }
+    if (data.labels.length > 0) {
+        data.labels.forEach(label => {
+            altNames += label.label + ", ";
+        });
+    }
+    altNames = altNames.replace(/,\s*$/, ""); // Trim trailing comma
+    return `
+    <div>
+        <p>
+            ${data.name}<br>
+            <small>${data.types[0]}, ${data.country.country_code}<br>
+            <i>${altNames}</i></small>
+        </p>
+    </div>`;
+}
+
+
+function initializeLocalInstitutions(endpoint = '/institutions/typeahead.json', query = '', cache = false) {
+    const baseUrl = `${window.location.protocol}//${window.location.host}`;
+    const fullUrl = `${baseUrl}${endpoint}?q=${encodeURIComponent(query)}`;
+    return new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+            url: fullUrl,
+            wildcard: '%QUERY',
+            cache: cache,
+            transform: function (response) {
+                return response.results; // Ensure response is structured correctly
+            }
+        }
+    });
+}
+
+function clearInstitutionFields() {
+    $j('#institution_title').val('');
+    $j('#institution_id').val('');
+    $j('#institution_ror_id').val('');
+    $j('#institution_city').val('');
+    $j('#institution_country').val('');
+    $j('#institution_web_page').val('');
+    $j('#institution_address').val('');
+}
+
+
+$j(document).ready(function () {
+    var $j = jQuery.noConflict();
+
+    $j('#fetch-ror-data-with-id').on('click', function () {
+        fetchRorData($j('#institution_ror_id').val());
+    });
+
+    // if the institution title is not selected from the local list or ROR, but entered manually by user
+    $j('#institution_title').on('change', function () {
+        const inputValue = $j(this).val();
+        $j('#institution_title').val(inputValue);
+        checkSubmitButtonEnabled();
+    });
+
+
+    $j('#combined_typeahead .typeahead').typeahead(
+        {
+            hint: true,
+            highlight: true,
+            minLength: 1 // Start suggestions after typing at least 1 character
+        },
+        // First Dataset: Local Institutions
+        {
+            name: 'institutions',
+            display: 'text', // Display the 'text' field in the dropdown
+            source: function (query, syncResults, asyncResults) {
+                const bloodhound = initializeLocalInstitutions('/institutions/typeahead.json', query);
+                bloodhound.search(query, syncResults, asyncResults);
+            }, // Local data source
+            templates: {
+                header: '<div class="league-name">Institutions saved locally</div>',
+                suggestion: localSuggestionTemplate
+            }
+        },
+        // Second Dataset: Remote ROR Query
+        {
+            name: 'ror-query',
+            limit: 50,
+            async: true,
+            source: rorQuerySource,
+            templates: {
+                header: '<div class="league-name">Institutions fetched from ROR</div>',
+                pending: '<div class="empty-message">Fetching from ROR API ...</div>',
+                suggestion: rorSuggestionTemplate
+            },
+            display: function (data) {
+                return data.name;
+            },
+            value: function (data) {
+                return data.identifier;
+            }
+        }
+    );
+
+
+    $j('#ror_query_name .typeahead').typeahead({
+            hint: true,
+            highlight: true,
+            minLength: 3
+        },
+        {
+            limit: 50,
+            async: true,
+            source: rorQuerySource,
+            templates: {
+                pending: [
+                    '<div class="empty-message">',
+                    'Fetching list ...',
+                    '</div>'
+                ].join('\n'),
+                suggestion: rorSuggestionTemplate
+            },
+            display: function (data) {
+                return data.name;
+            },
+            value: function (data) {
+                return data.identifier;
+            }
+        });
+
+    $j('#combined_typeahead .typeahead').bind('typeahead:select', function (ev, data) {
+        $j('#combined_typeahead .typeahead').typeahead('close');
+
+        if (data.hasOwnProperty("text")) {
+            $j('#institution_title').val(data.text);
+            $j('#institution_id').val(data.id);
+            $j('#institution_ror_id').val(data.ror_id);
+            $j('#institution_city').val(data.city);
+            $j('#institution_country').val(data.country);
+            $j('#institution_web_page').val(data.web_page);
+        }
+        else
+        {
+            $j('#institution_title').val(data.name);
+            $j('#institution_ror_id').val(data.id);
+            $j('#institution_city').val(data.addresses[0]['city']);
+            $j('#institution_country').val(data.country.country_code);
+            $j('#institution_ror_id').val(extractRorId(data.id));
+            $j('#institution_web_page').val(data.links[0]);
+        }
+        toggleUserInput(true);
+        checkSubmitButtonEnabled();
+    });
+
+    $j('#ror_query_name .typeahead').bind('typeahead:select', function (ev, suggestion) {
+        $j('#ror-response').html(JSON.stringify(suggestion, undefined, 4));
+        $j('#institution_city').val(suggestion.addresses[0]['city']);
+        $j('#institution_country').val(suggestion.country.country_code);
+        $j('#institution_ror_id').val(extractRorId(suggestion.id));
+        $j('#institution_web_page').val(suggestion.links[0]);
+        toggleUserInput(true);
+    });
+
+    $j('#clear-fields').on('click', function(event) {
+        event.preventDefault();
+        clearInstitutionFields();
+        toggleUserInput(false);
+        checkSubmitButtonEnabled();
+    });
+
+
+    if ($j('#institution_ror_id').val()!== '') {
+        toggleUserInput(true);
+    }
+
+});

app/assets/stylesheets/application.css

@@ -47,4 +47,5 @@
 *= require select2.min
 *= require select2.bootstrap.min
 *= require linked_extended_metadata
+*= require ror-widget
 */

app/assets/stylesheets/ror-widget.scss

@@ -0,0 +1,26 @@
+@import 'bootstrap/variables';
+
+.institution-input-disable {
+    background-color: $input-bg-disabled !important;
+cursor: not-allowed;
+}
+
+.tt-menu {
+    width: 422px;
+    margin: 12px 0;
+    padding: 8px 0;
+    background-color: $input-bg;
+    border: 1px solid $gray-base;
+    max-height: 400px;
+    overflow-y: auto;
+    border-radius: $border-radius-large;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.league-name {
+    margin: 0 20px 5px 0;
+    padding: 3px 6px;
+    background-color: $btn-default-border;
+    transition: background-color 0.5s ease-in-out;
+}
+

app/controllers/institutions_controller.rb

@@ -90,6 +90,7 @@ def typeahead
     items = results.map do |institution|
       { id: institution.id,
         text: institution.title,
+        ror_id: institution.ror_id,
         web_page: institution.web_page,
         city: institution.city,
         country:institution.country,
@@ -127,7 +128,7 @@ def request_all_sharing_form
   private
 
   def institution_params
-    params.require(:institution).permit(:title, :web_page, :address, :city, :country,
+    params.require(:institution).permit(:title, :web_page, :address, :city, :country, :ror_id,
                                         discussion_links_attributes:[:id, :url, :label, :_destroy])
   end