graph: fix “Download PNG” for large images #1610
Conversation
nfelt
left a comment
nfelt
left a comment
There was a problem hiding this comment.
cc @stephanwlee
If this change is worth doing here perhaps we should do it for the scalar chart download as SVG feature too? Those charts are going to be smaller in typical cases but for a really enormous number of runs they could also get fairly large. It would also seem to more "properly" address #1601.
There was a problem hiding this comment.
FWIW, for the scalar plot download buttons, we use a drop-down menu as the trigger to generate the URL so that it's a two-click process. If we did something similar for the graph it would be possible to use toBlob() and just disable the actual download click target until the synchronous call completes.
Maybe it's not worth it, but I have to imagine toBlob() might be faster than iterating over each character in the blob by hand.
There was a problem hiding this comment.
Instead of creating a single-chart string for each element of data, can we just change the index to charCodeAt()? E.g. what this does: https://stackoverflow.com/a/21797381/1179226
It seems almost guaranteed to be cheaper to simply index the string at different points versus sub-slicing the string at then indexing into the sub-slice.
There was a problem hiding this comment.
Good call—this cuts out almost all of the overhead. (Now looking at
~520ms with this code vs. ~500ms for toBlob.) Nice to have even if the
code isn’t performance-critical.
There was a problem hiding this comment.
Great. Nice to have those numbers since then I guess toBlob isn't much advantage anyway.
wchargin
force-pushed
the
wchargin-graph-download-png-blob
branch
from
4c7d749 to
0f94aff
Compare
| // URL. | ||
| const dataUrl = this.downloadCanvas.toDataURL("image/png"); | ||
| const prefix = dataUrl.slice(0, dataUrl.indexOf(",")); | ||
| if (!prefix.endsWith(":base64") && !prefix.endsWith(";base64")) { |
There was a problem hiding this comment.
in which case does the prefix end with ":base64"? maybe the mdn doc is incomplete: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#Syntax
There was a problem hiding this comment.
I seem to recall having seen data URIs that do not specify a media type
and are of the form data:base64,<data>, even though they really should
be data:;base64,<data>. But on further thought I suppose that those
are technically valid data URIs whose media type is base64 and whose
encoding is textual, not base64, so it would be better to fail here
(which is the more conservative action, anyway). Will patch.
Summary: When viewing large graphs in Chrome, clicking the “Download PNG” button could the error message, “Failed - Network error”. This is because Chrome does not support downloading large data-URLs. Chrome does, however, support downloading large object URLs, so this patch makes the appropriate change to use that API instead. Test Plan: Generate the `audio_demo` data and open the `wave:01;sine_wave` graph in TensorBoard in Chrome. Transitively expand all node groups. Then, click “Download PNG”. Before this patch, this consistently failed to download. After this patch, it downloads and image with the correct contents. Also tested in Firefox. wchargin-branch: graph-download-png-blob
wchargin
force-pushed
the
wchargin-graph-download-png-blob
branch
from
0f94aff to
4ab62c7
Compare
Summary: When viewing large graphs in Chrome, clicking the “Download PNG” button could the error message, “Failed - Network error”. This is because Chrome does not support downloading large data-URLs. Chrome does, however, support downloading large object URLs, so this patch makes the appropriate change to use that API instead. Test Plan: Generate the `audio_demo` data and open the `wave:01;sine_wave` graph in TensorBoard in Chrome. Transitively expand all node groups. Then, click “Download PNG”. Before this patch, this consistently failed to download. After this patch, it downloads and image with the correct contents. Also tested in Firefox. wchargin-branch: graph-download-png-blob
Summary: When viewing large graphs in Chrome, clicking the “Download PNG” button could the error message, “Failed - Network error”. This is because Chrome does not support downloading large data-URLs. Chrome does, however, support downloading large object URLs, so this patch makes the appropriate change to use that API instead. Test Plan: Generate the `audio_demo` data and open the `wave:01;sine_wave` graph in TensorBoard in Chrome. Transitively expand all node groups. Then, click “Download PNG”. Before this patch, this consistently failed to download. After this patch, it downloads and image with the correct contents. Also tested in Firefox. wchargin-branch: graph-download-png-blob
3 participants
Summary:
When viewing large graphs in Chrome, clicking the “Download PNG” button
could the error message, “Failed - Network error”. This is because
Chrome does not support downloading large data-URLs. Chrome does,
however, support downloading large object URLs, so this patch makes the
appropriate change to use that API instead.
Test Plan:
Generate the
audio_demodata and open thewave:01;sine_wavegraph inTensorBoard in Chrome. Transitively expand all node groups. Then, click
“Download PNG”. Before this patch, this consistently failed to download.
After this patch, it downloads and image with the correct contents.
Also tested in Firefox.
wchargin-branch: graph-download-png-blob