I want to create my own pathway with a custom knockout function using ESCHER. Consider the pathway knockout link.
As you can see by clicking the reaction the color changes and the text with the html/css id knockout-status adds the reactions that was clicked and the growth rate.
I am trying to work out how the knockout.js handles the clicks and changes the colors. so far I would say that this block - as commented - handles the clicks
// initialize event listeners
var sel = builder.selection;
sel.selectAll('.reaction,.reaction-label')
.style('cursor', function(d) {
if (knockable(d.bigg_id)) return 'pointer';
else return null;
})
.on('click', function(d) {
if (knockable(d.bigg_id)) {
if (!(d.bigg_id in knockouts))
knockouts[d.bigg_id] = true;
model = knock_out_reaction(model, d.bigg_id);
solve_and_display(model, knockouts);
}
});
// grey for reactions that cannot be knocked out
sel.selectAll('.reaction-label')
.style('fill', function(d) {
if (!knockable(d.bigg_id)) return '#888';
else return null;
});
and the '.reaction,.reaction-label' finds all css class with the reactions. What I am missing is how to create my own maps with my own click listener? I checked the documentation but it handles more the creation of the maps, but I am also want to build the js knockout functionality. Could someone maybe show on a small example with 4-5 reactions how I could create my own maps.