Custom display API

[jerrylian-db]

• Motivation for features / changes

  • This feature lets users to directly set an inline display function for the notebook API that works in their environment, providing more flexibility for Tensorboard to be used on various notebook environments. See RFC [RFC] Extending the Tensorboard Notebook Display API #3752 for more details.

• Technical description of changes

  • Added a public API to the notebook module that allows users to set a custom display function.
  • In _get_context (link), we add a context type that is returned when the library detects that the custom display function is set. This new context type then causes the _display function (link) to use the custom display function to display Tensorboard inline to python notebooks.

• Screenshots of UI changes

  • N/A

• Detailed steps to verify changes work correctly (as executed by you)

  1. Clone the repo.
  2. In the repo root directory, start a Jupyter notebook process and create a notebook inside of it. (Make sure that your environment has Tensorboard installed as the following code depends on having a Tensorboard binary in the environment.)
  3. Run the following code..

import tensorboard
import random, IPython
def custom_display(port, height, display_handle):
    del display_handle

    frame_id = "tensorboard-frame-{:08x}".format(random.getrandbits(64))
    html_string = """
        <h1>Custom Inline Display</h1>
        <iframe id="%ID%" width="100%" height="%HEIGHT%" frameborder="0"></iframe>
        <script>
            (function() {
                const frame = document.getElementById("%ID%");
                const url = new URL("/", window.location);
                const port = %PORT%;
                if (port) {
                  url.port = port;
                }
                frame.src = url;
            })();
        </script>
    </html>
    """

    replacements = [
        ("ID%", frame_id),
        ("%HEIGHT%", "%d" % height),
        ("%PORT%", "%d" % port),
    ]

    for (k, v) in replacements:
        html_string = html_string.replace(k, v)
    iframe = IPython.display.HTML(html_string)
    IPython.display.display(iframe)
tensorboard.notebook.register_custom_display(custom_display)
tensorboard.notebook.start("--logdir test")

Result:

• Alternate designs / implementations considered
  • We considered directly modifying the _display function to return the custom display if it detects it is set, rather than modifying _get_context. But we thought that the presented solution matches existing patterns better.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[jerrylian-db]

Note: I did not find any automated tests for the notebook.py file. Please tell me if and how I should add test coverage for this feature.

[jerrylian-db]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[falaki]

Thanks for submitting this PR.

[jerrylian-db]

@wchargin can you take a look at this? Thanks for your time.

[wchargin]

@jerrylian-db yep—responded on the RFC:
#3752 (comment)