[InterMine Dev] Access to the `imtables` object in an aspects page

Yo Yehudi yoyehudi at gmail.com
Fri Jul 22 11:36:20 BST 2016


Hey Vivek,

I think I figured out why this is happening. It appears that an external
(rather legacy) library, Prototype.js, is polluting the javascript scope on
the aspect page (and indeed most InterMine pages), causing undesired side
effects. Boo. The easy fix is not to load it on pages that are using
imtables, by adding ` && pageName != 'aspect'" ` to line 52 of htmlHead.jsp
https://github.com/intermine/intermine/blob/d48d60f446753de8b591611787d0ed0d156606c1/intermine/webapp/main/resources/webapp/htmlHead.jsp#L52,
and then redeploying. This will stop Prototype being loaded at all on the
aspect page. Judging by the comment on line 51, someone has been through
this pain before :D.

Given that you're removing a library that might have been included on the
page for a reason you might want to click around and check if anything else
has broken on your page. I tried on my local machine and couldn't find
anything broken, so hopefully it's only on the page by default rather than
because it was actually needed.

Once I'd killed Prototype, an imtable loaded fine on the page. Hopefully it
will for you too!

Yo


On 21 July 2016 at 13:32, Krishnakumar, Vivek <vkrishna at jcvi.org> wrote:

> Hello Yo,
>
> Thank you very much for the detailed explanation.
> For now, I went with your first suggestion of adding all head.*.results
> section scripts/styles to the 'aspect' page for my development work. Doing
> so shows "Using imtables 2.0.0" in the browser console. Success!
>
> However, now I'm facing a different issue, one where the imtable is not
> being initialized due to an error I'm unable to understand. Below is the
> bit of code I'm using to render my table (it was taken directly from the
> "Generate Code" button in my mine):
>         <!-- The Element we will target -->
>         <div id="some-elem"></div>
>         <!-- The imtables source -->
>         <script type="text/javascript">
>             var selector = '#some-elem';
>             var service  = {root:
> "${WEB_PROPERTIES['webapp.baseurl']}/${WEB_PROPERTIES['webapp.path']}/"};
>
>             var query    = {
>               "from": "DataSource",
>               "select": [ "name", "dataSets.name", "dataSets.description",
> "dataSets.version" ],
>               "orderBy": [ { "path": "dataSets.version", "direction":
> "ASC" } ],
>               "where": [ { "path": "name", "op": "=", "value": "Genome*",
> "code": "A" } ]
>             };
>
>             imtables.loadTable(
>               selector, // Can also be an element, or a jQuery object.
>               {"start":0,"size":25}, // May be null
>               {service: service, query: query} // May be an imjs.Query
>             ).then(
>               function (table) { console.log('Table loaded', table); },
>               function (error) { console.error('Could not load table',
> error); }
>             );
>         </script>
>
> The error I see in the javascript console is:
> notifications.js:1 TypeError: Cannot read property 'length' of undefined(…)
>     FailureNotification.notify @ notifications.js:1
>     lib$es6$promise$$internal$$tryCatch @ imtables.js:46034
>     lib$es6$promise$$internal$$invokeCallback @ imtables.js:46046
>     lib$es6$promise$$internal$$publish @ imtables.js:46017
>     lib$es6$promise$$internal$$publishRejection @ imtables.js:45967
>     lib$es6$promise$asap$$flush @ imtables.js:45828
>
> Any idea what could be happening here?
>
> As a test, I took the code seen above and injected into a jsp that is
> being rendered on a gene report page, and the table renders without any
> issues.
>
> Thanks for your help!
>
> Regards,
> Vivek
>
> On Thu, Jul 21, 2016 at 6:09 AM Yo Yehudi <yoyehudi at gmail.com> wrote:
>
>> Hey Vivek,
>>
>> Looks like there are a few ingredients needed for the IMTables recipe:
>>
>> 1. The URLs for the scripts and styles are specified under the
>> "head.js.results" and "head.css.results" section of the
>> global.web.properties file -
>> https://github.com/intermine/intermine/blob/dev/intermine/webapp/main/resources/webapp/WEB-INF/global.web.properties#L111-L112
>>
>> 2. in htmlHead.jsp there is a loop which outputs all required scripts
>> https://github.com/intermine/intermine/blob/dev/intermine/webapp/main/resources/webapp/htmlHead.jsp#L31-L33
>> - the highlighted lines are the lines for the report page, where it links
>> to all head.x.results items specified in the properties files.
>>
>> So:
>>
>> I just tried adding "|| pageName == 'aspect'" to line 31 of htmlHead, and
>> after a redeploy I can see that imtables is available on the aspect page. I
>> imagine this approach should work for any other page.
>>
>> Small note: global.web.properties has several other non-imtables scripts
>> in the results section. I'm not honestly sure if they're all strictly
>> necessary for loading imtables or not (perhaps some advanced bits?). With
>> some experimentation it might be possible to load a more minimal subset of
>> the results scripts, by adding an entry to your global.web.properties,
>> perhaps something like
>>
>> head.js.imtables.script = CDN/js/intermine/im-tables/2.0.0/imtables.js
>> head.css.imtables.style =
>> CDN/js/intermine/im-tables/2.0.0/main.sandboxed.css
>>
>> and then a new section in htmlHead.jsp like this:
>>
>>   <c:if test="${pageName == 'myAwesomePage' || pageName ==
>> 'someOtherCoolPage'}">
>>     <im:headResources section="imtables"/>
>>   </c:if>
>>
>> But if you took this approach you'd probably have to test carefully to
>> verify that the other head.js.results scripts are not needed!
>>
>> Hope that helps and let me know if anything was unclear.
>>
>> Yo Yehudi
>> InterMine
>>
>> On 20 July 2016 at 23:27, Krishnakumar, Vivek <vkrishna at jcvi.org> wrote:
>>
>>> Hello IM Devs,
>>>
>>> I am trying to understand how the `imtables` javascript object is
>>> initialized and made available in the scope of the current InterMine
>>> window. As far as I can see, it seems that the `imtables` js object is
>>> active on report and results pages.
>>>
>>> I was wondering how I can access the `imtables` Javascript object from
>>> any different page, such as aspects page (Example:
>>> /XYZmine/aspect.do?name=Genomics).
>>>
>>> Any input/pointers you can provide is appreciated!
>>>
>>> Thank you.
>>>
>>> Regards,
>>> Vivek
>>>
>>> _______________________________________________
>>> dev mailing list
>>> dev at lists.intermine.org
>>> https://lists.intermine.org/mailman/listinfo/dev
>>>
>>>
>>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.intermine.org/pipermail/dev/attachments/20160722/960a79a9/attachment-0001.html>


More information about the dev mailing list