zakandrewking / escher

Build, share, and embed visualizations of metabolic pathways.
https://escher.github.io
Other
210 stars 78 forks source link

map is cleared when invoking new d3.json #235

Closed anusurendra closed 6 years ago

anusurendra commented 6 years ago

@zakandrewking, Is there a way to prevent a created map being cleared when invoking d3.json to upload a new model json file. Below is the code I am using to updating a model json file:

d3.json("model_files/e_coli_core.json", function(error, data) {
     if (error) console.warn(error);
     var options = {menu: 'all', canvas_size_and_loc: { x: '200', y: '200', width: '5000', height: '5000' }};
     var b = escher.Builder(null, data, null, d3.select('#model_container'), options);
   });
zakandrewking commented 6 years ago

yes. rather than creating a new Builder, you want to apply the map to the existing Builder with:

b.load_model(data, true)

Documentation is here: https://escher.readthedocs.io/en/stable/javascript_api.html#load_model

anusurendra commented 6 years ago

@zakandrewking,

Thank you for your quick reply and help. I used the b.load_model(data, true). However, the map is still being clear. here is the code I used:

d3.json("model_files/e_coli_core.json", function(error, data) {
     var options = {menu: 'all', canvas_size_and_loc: { x: '200', y: '200', width: '5000', height: '5000' }};
     var b = escher.Builder(null, data, null, d3.select('#model_container'), options);
     b.load_model(data, true);
  });
zakandrewking commented 6 years ago

yes, the issue here is that the map will be cleared any time escher.Builder() is called. What you want is this:

var options = {menu: 'all', canvas_size_and_loc: { x: '200', y: '200', width: '5000', height: '5000' }};
var b = escher.Builder(null, data, null, d3.select('#model_container'), options);

// ... at some later time ...

d3.json("model_files/e_coli_core.json", function(error, data) {
    // this should not reload the map
     b.load_model(data, true);
  });
anusurendra commented 6 years ago

@zakandrewking thanks again zak. Do know of a way to store the var b = escher.Builder(null, data, null, d3.select('#model_container'), options); object? I have tried using JSON.stringify, but it is not keep the functions and constructors.

zakandrewking commented 6 years ago

That depends a lot on your app, but, like you said, you cannot keep it as JSON, so you'll have to keep the variable somewhere. On Thu, Jan 4, 2018 at 1:40 PM Anu Surendra notifications@github.com wrote:

@zakandrewking https://github.com/zakandrewking thanks again zak. Do know of a way to store the var b = escher.Builder(null, data, null, d3.select('#model_container'), options); object? I have tried using JSON.stringify, but it is not keep the functions and constructors.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zakandrewking/escher/issues/235#issuecomment-355406475, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMUYM2Uxw9DWq89XB7litEqxAGz6Gn6ks5tHUVAgaJpZM4Q7Nz8 .