Access to the `imtables` object in an aspects page

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Access to the `imtables` object in an aspects page

vkrishna
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
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Access to the `imtables` object in an aspects page

Yo Yehudi-2
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 <[hidden email]> 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
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev



_______________________________________________
dev mailing list
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Access to the `imtables` object in an aspects page

vkrishna
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 <[hidden email]> 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 <[hidden email]> 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
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev



_______________________________________________
dev mailing list
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Access to the `imtables` object in an aspects page

Yo Yehudi-2
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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev




_______________________________________________
dev mailing list
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Access to the `imtables` object in an aspects page

vkrishna
Hello Yo,

Thank you very much for troubleshooting this and identifying a resolution.
I am happy to report that your suggested fix now allows imtables to load properly on an Aspects page. And I've also tested to make sure that no other functionality on this page is affected.

Thanks again for your help.

Best Regards,
Vivek

On Fri, Jul 22, 2016 at 6:36 AM Yo Yehudi <[hidden email]> wrote:
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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev




_______________________________________________
dev mailing list
[hidden email]
https://lists.intermine.org/mailman/listinfo/dev
Loading...