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;
    .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
    .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.

  • $\begingroup$ I'm voting to close this question because it doesn't seem to relate to a specific issue, and is asking too much out of answers. Please demonstrate what you've already tried, and highlight the points where it is not working as you expect. $\endgroup$
    – gringer
    Jul 8, 2021 at 13:45


Browse other questions tagged or ask your own question.