OJS 3 lensGalley plugin not working with a customized bundle of source code Lens reader

Hi @asmecher

I have followed the steps to make a new bundle from a customized of Lens explained in the Github of elifesciences/lens, the extension made to the source code of Lens reader is a new panel for metrics data from a service, alongside with the default panels in the Lens. The files resulting of bundling process are the following:

dist/
  lib/
    jquery.min.js
    jquery.min.map
  index.html
  lens.css
  lens.js

Well I took this files and replaced them in the lensGalley plugin of OJS 3, which are in /ojs-install-place/plugins/generic/lensGalley/lib/lens/ for view if the customized Lens reader of the plugin can show the new panel; however only get a loading article message in the page and in the console of browser I have the following errors:

I dont know how to make working the customized lens reader with the plugin, can you help me?

Hi @juancure,

It looks like a JSON response from the server was not valid JSON. Perhaps it contained PHP error messages – have you configured your PHP to direct error messages to your error log only? If not, I’d recommend doing so. In any case, you can inspect the JSON request/response using a tool like Firebug for Firefox; this will likely reveal the problem.

Regards,
Alec Smecher
Public Knowledge Project Team

Greetings @juancure,

And you certain that this new Lens code on master branch should work?

Hi @asmecher and @Vitaliy thansk a lot for answering.

First @asmecher I have configured the error log of my PHP however there aren’t any error messages. With respect to inspect the JSON request/response I have no clear how made that with Firebug, I usually use the console of Firefox for make debug. Can you explain me a little more?

Second @Vitaliy, Yes the repository where is the extended lens reader is called lens-starter I have cloned that repository and followed the steps to made the bundle, I have took this bundle to a apache server here where it works correctly, but when I try to integrate it to lensGalley plugin it doesn’t work, here is a NLM/JATS XML galley of an article of our journal.

The errors that I can see in the console of Firefox is that

Error: Router.history has already been started

and

SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data[Saber más]

I hope you can check the links I have shared with you.

Hi @juancure,

I wonder whether the newer version of the Lens Reader expects the XML to be delivered JSON-encoded…

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @asmecher,

The version of code in this repository is the 2.0.0 version of Lens source code, I am secure that LensGallley can work with this version, because when I started to set up my journal in OJS 3 I replace the code of lensGalley/lib/lens/ with the version 2.0.0 for accomplish the correctly rendering of a NLM/JATS xml file galley in my journal.

I have the suspicious that some of the extended version of Lens conflicting with lensGalley, but I dont know what yet.

Hi @asmecher,

I achieved it, I have integrated a extended version of source code of lens, which add an extra panel for metrics to LensGalley plugin of OJS 3.

After much thinking I decided to create a non-minified version of lens.js to compare with the lens.js that come for default in the lensGalley plugin. My surprise was that I found a part of code in the lens.js file generated by gulp

// Little helper used to parse query strings from urls
  // --------
  //

  var qs = function () {
    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
        // If first entry with this name
      if (typeof query_string[pair[0]] === "undefined") {
        query_string[pair[0]] = pair[1];
        // If second entry with this name
      } else if (typeof query_string[pair[0]] === "string") {
        var arr = [ query_string[pair[0]], pair[1] ];
        query_string[pair[0]] = arr;
        // If third or later entry with this name
      } else {
        query_string[pair[0]].push(pair[1]);
      }
    }
    return query_string;
  } ();

  // This document gets loaded by default
  // --------

  //var documentURL = "data/example.xml";
  var documentURL = "https://s3.amazonaws.com/elife-cdn/elife-articles/00778/elife00778.xml";

  $(function() {

    // Create a new Lens app instance
    // --------
    //
    // Injects itself into body

    var app = new window.Lens({
      document_url: qs.url ? decodeURIComponent(qs.url) : documentURL
    });

    app.start();

    window.app = app;

  });

which is in the index.html file in the lensGalley repository, that’s why I moved this code from the lens.js file to index.html file as it is in the lensGalley repository and works.

I left the link to my journal with the example.

All this was made because I have been encouraged to add a new panel which should add a map visualizer made with (OpenLayers, GeoNode and Geoserver) to Lens, I think that would be a hard work but I hope achieve it, But this is another matter.

Thanks a lot for answering @asmecher and @Vitaliy.

3 Likes

@juancure,

Very interesting. This feature is not even implemented on elifesciences.org.