[Gmod-ajax] Glyph coloration based on webservice with CanvasFeatures

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

[Gmod-ajax] Glyph coloration based on webservice with CanvasFeatures

Loïc Couderc
Hi Everyone,

I try to change the color of my glyph depending on the response of a webservice as followed (simplified function from trackList.json):
"style" : {
    "className" : "feature",
    "color" : "function(featureObject, variableName, glyphObject, trackObject) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + featureObject.get('name'), false);
        xhr.send(null);
        if (xhr.status == 200) { return 'red'; } else { return 'green'; }}",
    "borderColor" : "black"
},

This code works fine, but there is two issues:
First, this function is called each time we hover the feature.
Second, multines callback are not allowed, so i tried to write this code into tracks.conf, but i can't see how to retrieve  some functionalities like "Menutemplate" (from json).

Do you have any idea to fix this issues?

Best regards,
Loïc

------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Glyph coloration based on webservice with CanvasFeatures

Colin
Hi Loic,
You are right that multiline callbacks do not work in the json files, but they do work in the tracks.conf format. However, I can also see how specifying the menuTemplate could be difficult in tracks.conf array since it uses an array of values. I don't have a quick answer but we can look into this. As far as the color callbacks i am not too sure either. Perhaps if your code was very fancy it could cache some values :)
Thanks,
-Colin


On Wed, Jul 2, 2014 at 5:15 AM, Loïc Couderc <[hidden email]> wrote:
Hi Everyone,

I try to change the color of my glyph depending on the response of a webservice as followed (simplified function from trackList.json):
"style" : {
    "className" : "feature",
    "color" : "function(featureObject, variableName, glyphObject, trackObject) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + featureObject.get('name'), false);
        xhr.send(null);
        if (xhr.status == 200) { return 'red'; } else { return 'green'; }}",
    "borderColor" : "black"
},

This code works fine, but there is two issues:
First, this function is called each time we hover the feature.
Second, multines callback are not allowed, so i tried to write this code into tracks.conf, but i can't see how to retrieve  some functionalities like "Menutemplate" (from json).

Do you have any idea to fix this issues?

Best regards,
Loïc

------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax



------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Glyph coloration based on webservice with CanvasFeatures

Loïc Couderc
Hi Colin,

Thank you for the quick answer.
To be more precise, the idea is the following: color my feature depending on the presence/absence from another application. Then, if the feature is present, append a link to the menu template.
The following code (as the former code) is only a test code. I have not yet implemented the full idea.

function (featureObject, variableName, glyphObject, trackObject) {
    function markerIsInGnpIS(markerName) {
        console.log('here');
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + markerName, false);
        xhr.send(null);
        if (xhr.status == 200) {
            return true
        }
        return false
    }

    function addLink(markerName) {
        var linkLabel = 'link';
        var menuTemplate = trackObject.config.menuTemplate;
        var already_added = false;
        for (var i = 0; i < menuTemplate.length; i++) {
            if (menuTemplate[i].label == linkLabel) {
                already_added = true;
                break;
            }
        }
        if (!already_added) { // negation, only for test...
            menuTemplate.push(new function () {
              this.action = 'iframeDialog', this.label = linkLabel, this.url = 'http://localhost/fakeURL', this.title = '{type} {name}'
            })
        }
    }
    var name = featureObject.get('name');
    if (!markerIsInGnpIS(name)) { //negation only for test
        addLink(name);
        return 'red'
    }
    return 'green'
}
This code works too, but I'm little annoyed with writing a one-liner code because it's hard to maintain.
Anyway, i don't have any clue to write the same code into tracks.conf.
I'm wondering if writing a plugin might be a good idea?

Another point is that I perform synchronous callback to my webservice. I would prefer to use asynchronous callback.
To do that, I defined my callback and try to use glyphObject.config.style.color = '<color>' instead of return '<color>' but it doesn't seems to works....
Do I modify the right value?

Best regards,
Loïc

------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Glyph coloration based on webservice with CanvasFeatures

Colin
Hi Loic,
Thanks for the followup. I see what you are doing here (dynamically creating the menuTemplate is especially cool), but I had another idea. Basically, I realized that trackList.json can "include" tracks.conf format files. A good example of this exists in the sample_data for the volvox browser. There is a "functions.conf" file that has some extra functions that can be used elsewhere
https://github.com/GMOD/jbrowse/blob/master/docs/tutorial/data_files/functions.conf

Then in sample_data/json/volvox/trackList.json we have
   "include" : [
      "../../raw/volvox/functions.conf"
   ], 

Also, for the callback, I am not sure if i have a good answer for that. I think returning the color is best for the CanvasFeatures. If you use HTMLFeatures, then you can directly set the properties such as div.style.backgroundColor "after the fact" but HTMLFeatures use a different type of callback (hooks->modify instead of the style->color callback).

-Colin




On Mon, Jul 7, 2014 at 9:26 AM, Loïc Couderc <[hidden email]> wrote:
Hi Colin,

Thank you for the quick answer.
To be more precise, the idea is the following: color my feature depending on the presence/absence from another application. Then, if the feature is present, append a link to the menu template.
The following code (as the former code) is only a test code. I have not yet implemented the full idea.

function (featureObject, variableName, glyphObject, trackObject) {
    function markerIsInGnpIS(markerName) {
        console.log('here');

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + markerName, false);

        xhr.send(null);
        if (xhr.status == 200) {
            return true
        }
        return false
    }

    function addLink(markerName) {
        var linkLabel = 'link';
        var menuTemplate = trackObject.config.menuTemplate;
        var already_added = false;
        for (var i = 0; i < menuTemplate.length; i++) {
            if (menuTemplate[i].label == linkLabel) {
                already_added = true;
                break;
            }
        }
        if (!already_added) { // negation, only for test...
            menuTemplate.push(new function () {
              this.action = 'iframeDialog', this.label = linkLabel, this.url = 'http://localhost/fakeURL', this.title = '{type} {name}'
            })
        }
    }
    var name = featureObject.get('name');
    if (!markerIsInGnpIS(name)) { //negation only for test
        addLink(name);
        return 'red'
    }
    return 'green'
}
This code works too, but I'm little annoyed with writing a one-liner code because it's hard to maintain.
Anyway, i don't have any clue to write the same code into tracks.conf.
I'm wondering if writing a plugin might be a good idea?

Another point is that I perform synchronous callback to my webservice. I would prefer to use asynchronous callback.
To do that, I defined my callback and try to use glyphObject.config.style.color = '<color>' instead of return '<color>' but it doesn't seems to works....
Do I modify the right value?

Best regards,
Loïc


------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: Glyph coloration based on webservice with CanvasFeatures

Loïc Couderc
Hi  Colin,

Thanks for the reply.
As you suggest, we put our functions in a file:
marker2gnpis = function (featureObject, variableName, glyphObject, trackObject) {
    function markerIsInGnpIS(markerName) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + markerName, false);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send(null);
        if (xhr.status == 200) {
            var json = JSON.parse(xhr.responseText);
            return json['markerId']
        }
        return null;
    }
      function cachedMarkerIsInGnpIs(markerName) {
        if (typeof webServiceCalled != 'undefined') {
            if (markerName in webServiceCalled) {
                addLink(webServiceCalled[markerName]);
                return color(webServiceCalled[markerName]);
            }
        } else {
            webServiceCalled = new Object();
        }
        var id = markerIsInGnpIS(markerName);
        addLink(id);
        webServiceCalled[markerName] = id;
        return color(webServiceCalled[markerName]);
    }
    function addLink(id) {
        var linkLabel = 'link';
        var menuTemplate = trackObject.config.menuTemplate;
        for (var i = 0; i < menuTemplate.length; i++) {
            if (menuTemplate[i].label == linkLabel) {
                menuTemplate.pop();
                break;
            }
        }
            if (id !== null){
            menuTemplate.push(new function () {
                this.action = 'iframeDialog', this.label = linkLabel, this.url = 'https://fakeUrl' + id, this.title = '{type} {name}'
            })
        }
    }
    function color(id) {
        return (id == null)?'green':'red';
    }
    var name = featureObject.get('name');
    return cachedMarkerIsInGnpIs(name);
    }

As you can see with this code we resolved the multiple calls to our webservice by "caching" the result.
We also modify the addLink function. The menuTemplate belong to the track, not the feature, so we have to remove/add the link for each feature.

Remain only the asynchronous issue, but we can deal without it...

Thanks for the help,
Loïc


On 07/07/2014 05:11 PM, Colin wrote:
Hi Loic,
Thanks for the followup. I see what you are doing here (dynamically creating the menuTemplate is especially cool), but I had another idea. Basically, I realized that trackList.json can "include" tracks.conf format files. A good example of this exists in the sample_data for the volvox browser. There is a "functions.conf" file that has some extra functions that can be used elsewhere
https://github.com/GMOD/jbrowse/blob/master/docs/tutorial/data_files/functions.conf

Then in sample_data/json/volvox/trackList.json we have
   "include" : [
      "../../raw/volvox/functions.conf"
   ], 

Also, for the callback, I am not sure if i have a good answer for that. I think returning the color is best for the CanvasFeatures. If you use HTMLFeatures, then you can directly set the properties such as div.style.backgroundColor "after the fact" but HTMLFeatures use a different type of callback (hooks->modify instead of the style->color callback).

-Colin




On Mon, Jul 7, 2014 at 9:26 AM, Loïc Couderc <[hidden email]> wrote:
Hi Colin,

Thank you for the quick answer.
To be more precise, the idea is the following: color my feature depending on the presence/absence from another application. Then, if the feature is present, append a link to the menu template.
The following code (as the former code) is only a test code. I have not yet implemented the full idea.

function (featureObject, variableName, glyphObject, trackObject) {
    function markerIsInGnpIS(markerName) {
        console.log('here');

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/GnpMap/webresources/marker/name/' + markerName, false);

        xhr.send(null);
        if (xhr.status == 200) {
            return true
        }
        return false
    }

    function addLink(markerName) {
        var linkLabel = 'link';
        var menuTemplate = trackObject.config.menuTemplate;
        var already_added = false;
        for (var i = 0; i < menuTemplate.length; i++) {
            if (menuTemplate[i].label == linkLabel) {
                already_added = true;
                break;
            }
        }
        if (!already_added) { // negation, only for test...
            menuTemplate.push(new function () {
              this.action = 'iframeDialog', this.label = linkLabel, this.url = 'http://localhost/fakeURL', this.title = '{type} {name}'
            })
        }
    }
    var name = featureObject.get('name');
    if (!markerIsInGnpIS(name)) { //negation only for test
        addLink(name);
        return 'red'
    }
    return 'green'
}
This code works too, but I'm little annoyed with writing a one-liner code because it's hard to maintain.
Anyway, i don't have any clue to write the same code into tracks.conf.
I'm wondering if writing a plugin might be a good idea?

Another point is that I perform synchronous callback to my webservice. I would prefer to use asynchronous callback.
To do that, I defined my callback and try to use glyphObject.config.style.color = '<color>' instead of return '<color>' but it doesn't seems to works....
Do I modify the right value?

Best regards,
Loïc



------------------------------------------------------------------------------
Open source business process management suite built on Java and Eclipse
Turn processes into business applications with Bonita BPM Community Edition
Quickly connect people, data, and systems into organized workflows
Winner of BOSSIE, CODIE, OW2 and Gartner awards
http://p.sf.net/sfu/Bonitasoft
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax