How to embed an OpenMDAO N2 diagram in Jupyter notebook

Question

I am trying to embed the N2 digaram generated by openMdao into a Jupyter notebook with the following code:

from openmdao.api import Problem

from openmdao.examples.beam_tutorial import BeamTutorial
from openmdao.api import view_model
from IPython.core.display import display, HTML
top = Problem()
top.root = BeamTutorial()

top.setup(check=False)
view_model(top, embed=True, show_browser=False, 
outfile='partition_tree_n2.html')
display(HTML(filename='partition_tree_n2.html'))

This displays the diagram's tool-bar correctly but no diagram, and also gives the error:

Javascript error adding output!
SyntaxError: Unexpected token >
See your browser Javascript console for more details.

The error on the Javascript console is:

SyntaxError: Unexpected token >
at eval (<anonymous>)
at Function.globalEval (jquery.min.js:4)
at init.domManip (jquery.min.js:5)
at init.append (jquery.min.js:5)
at OutputArea._safe_append (outputarea.js:440)
at OutputArea.append_display_data (outputarea.js:638)
at OutputArea.append_output (outputarea.js:330)
at OutputArea.handle_output (outputarea.js:243)
at output (codecell.js:365)
at Kernel._handle_output_message (kernel.js:1196))

How do I solve this or otherwise embed the OpenMDAO N2 chart in the Jupyter Notebook?

Answer 1

After more research I believe this is because the html includes javascript that is not allowed in HTML, and one possible solution is to use IFrame such as below:

from openmdao.api import Problem

from openmdao.examples.beam_tutorial import BeamTutorial
from openmdao.api import view_model
from IPython.core.display import display, HTML
from IPython.display import IFrame
top = Problem()
top.root = BeamTutorial()

top.setup(check=False)
view_model(top, embed=True, show_browser=False, outfile='partition_tree_n2.html')
display(IFrame(src='partition_tree_n2.html',width=1300,height=700))

It would still be nice to set the width and height programmatically, if anyone wants to suggest a better answer.