Save button should save in rcparams format, not "png"

@tfblum

@tfblum noticed that the save button always saves images in the png format. In plt.rcParams['savefig.format'], one can specify the default saving format of plt.savefig, and it would be nice if the save button respected that.

That said, I think maybe the on-screen generated image already is a png? There are two references to "png" in the codebase:
nbagg-backend, handle_save and handle_binary

From #234 it's also seems that other savefig rcparams are not going to be respected. I guess the reason figure saving is structured the way it is right now is because we need javascript in order to open a download prompt. I see two potential solutions:

Button pressed -> open jupyter dialog for savefig directory -> plt.savefig
Use js to download the file but use plt.savefig to generate the buffer first.
1. js On save button being pressed send a message to python side
2. py buf = Bytes(); plt.savefig(buf')
3. py self.send({'name':'saving-figure'}, [buf])
4. js on:msg use current saving infrastructure.

Hi - running into the same limitation. Are there any concrete plans to move one of the suggested solutions forward?

@jkochNU I think this issue is still looking for a champion to push it forward. Could be you :)

If anyone is interested in working on this feel free to ask questions here and i can try to help

@ianhi

@ianhi Happy to try, though this may turn out to be above my level of competence. I can navigate the py side, but am less familiar with the js side. Which js file is the one involved in (i) and (iv)?

@jkochNU awesome! Dev installation instructions here: https://github.com/matplotlib/ipympl#for-a-development-installation-requires-nodejs

Here are some more concrete steps to solve this

Fyi: Saving starts when a user clicks the download button which sends a message to python that originates here:

ipympl/src/toolbar_widget.ts

Lines 157 to 160 in 44a4ff2

    
           this.send({ 
        
               type: 'toolbar_button', 
        
               name: name, 
        
           });

the toolbar message handling code just forwards all message handling to the canvas so that's where the work in python will go.

Python:

Add a new branch to the _handle_message:

ipympl/ipympl/backend_nbagg.py

Lines 261 to 279 in 44a4ff2

    
           def _handle_message(self, object, content, buffers): 
        
               # Every content has a "type". 
        
               if content['type'] == 'closing': 
        
                   self._closed = True 
        
               elif content['type'] == 'initialized': 
        
                   # We stop syncing data url, the front-end is there and 
        
                   # ready to receive diffs 
        
                   self.syncing_data_url = False 
        
                   _, _, w, h = self.figure.bbox.bounds 
        
                   self.manager.resize(w, h) 
        
               elif content['type'] == 'set_dpi_ratio': 
        
                   Canvas.current_dpi_ratio = content['dpi_ratio'] 
        
                   self.manager.handle_json(content) 
        
               else: 
        
                   self.manager.handle_json(content)

should check for content['type']=='toolbar_message' and content['name']=='save'

Then call a new method on the canvas object (named something like: _send_savefig_img which should call savefig into a bytes object - you can copy this implementation:

ipympl/ipympl/backend_nbagg.py

Lines 335 to 336 in 44a4ff2

    
           buf = io.BytesIO() 
        
           self.figure.savefig(buf, format='png', dpi='figure')

then send that to frontend with something like this:

self.send({'data': '{"type": "save"}'}, buffers=[data])

note: we may also need to include the filetype in this message. You can add it as a new key to the data dict - that is, as a sibling to the type key.

Typescript:

I think the only changes necessary will be contained to this function:

ipympl/src/mpl_widget.ts

Lines 151 to 158 in 44a4ff2

    
           handle_save() { 
        
               const save = document.createElement('a'); 
        
               save.href = this.offscreen_canvas.toDataURL(); 
        
               save.download = this.get('_figure_label') + '.png'; 
        
               document.body.appendChild(save); 
        
               save.click(); 
        
               document.body.removeChild(save); 
        
           }

You will need to change the arguments of the function to be the same as the handle_binary function (msg: any, dataviews: any) and can copy or (pull into a function) the blob extraction code from handle_binary, chanigng the mimetype as appropriate. then modify the actual downloading (setting href and calling click) to look more like this SO answer: https://stackoverflow.com/a/23451803/835607

@ianhi

@ianhi That's incredible. Thank you so much for the time and effort providing such detailed instructions. My turn to try my best implementing it.

Before getting too deep it may be worth considering if this is consistent with the other matplotlib backends: https://gitter.im/matplotlib/matplotlib?at=623fb90e3ae95a1ec1ba9692

Even if it's not, it's clearly desirable to more than one person - so I could also see either adding a new toolbar button, or making this a toggleable option.

@ianhi

@ianhi I have a solution with a new toolbar button ready. However, I have not done extensive testing (this needs to work on multiple platforms, multiple Python versions, multiple browsers that you all support). Is there a workflow for this that I need to follow before posting a pull request?

I have a solution with a new toolbar button ready

🎉

Is there a workflow for this that I need to follow before posting a pull request?

nope. Just push changes to a new branch on your fork and open a PR and we'll take a look