setting different symbols/colors for subsets of catalog sources

[havok2063]

Right now, you can only set a single symbol/shape for an entire catalog. It would be very useful to set different symbols for subsets of sources within a catalog. Currently you would need to create new catalogs for each data subset. Sometimes I want to differentiate sources but retain a single catalog. It would be useful to set a shape and size on a per source basis, something like

    aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.3});
   var cat = A.catalog();
   aladin.addCatalog(cat);
   cat.addSources(A.source(105.69239256, -8.45235969), shape='circle', size=18);
   cat.addSources(A.source(105.70779763, -8.31350997), shape='square', size=10);
   cat.addSources(A.source(105.74242906, -8.34776709), shape='circle', size=5);

My use case is I want to set different symbols based on a particular property or condition of the source dataset, so I'd like to pass in a function that can act on each source, maybe something like

   var data = [
       {ra: 1, dec: 1, type: 'a'}, 
       {ra: 2, dec: 2, type: 'b'},
       {ra: 3, dec: 3, type: 'a'},
       {ra: 4, dec: 4, type: 'b'},
]

   function setShape(source) {
       if (source.type == 'a') {
           return 'circle'
       } else if (source.type == 'b') {
           return 'square'
       }
   }

    var cat = A.catalog({name: 'Catalog1', sourceSize: 18, shape: setShape});
    aladin.addCatalog(cat);

    // add the data as new sources
    data.forEach((targ) => {
        cat.addSources([A.source(targ.ra, targ.dec, targ)]);
    })

It could be useful to do this for several symbol properties like shape, size and color. Similar to this https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/cat-custom-draw-function/ but without manually drawing on the canvas. I tried adapting this example but it doesn't quite work.

[bmatthieu3]

That is a good idea, it is possible to return different 'shapes' (e.g. Circle, Polyline objects) from the shape function (see that example displaying proper motion arrow associated to sources within a same catalog object: https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/show-proper-motions/) but not symbols like you want. Also, the color and size could indeed accept such a callback.

[bmatthieu3]

@havok2063 - #262 is a little PR to allow you returning a string from the shape function which is partly what you need. I agree this is great to do the same for the color (accept a (s) => { ... }) but as it not been done yet, I will not close that issue.

The first thing should be available in the soon release 3.6.1 version.
The latter will only be available for the next 3.7.0 beta.

[havok2063]

@bmatthieu3 this is great, thanks! I'll take a closer look soon and wait for 3.6.1 to try it out. In the meantime, can you provide a small example of usage? Presumably it's a little different than my original pseudo-code.

[bmatthieu3]

Normally your code example will be valid

function setShape(source) {
   if (source.type == 'a') {
       return 'circle'
   } else if (source.type == 'b') {
       return 'square'
   }
}

var cat = A.catalog({name: 'Catalog1', sourceSize: 18, shape: setShape});
aladin.addCatalog(cat);

You can also return from setShape an Image or a HTMLCanvasElement, or even a A.circle/polygon/ellipse

[havok2063]

Awesome, thanks!