    <style type="text/css">{{awesomplete_style}}</style>
    <style type="text/css">{{partition_tree_style}}</style>

    <div id="all_pt_n2_content_div">
        <div id="maintitle" style="text-align: center">
            <h1>OpenMDAO Partition Tree and N<sup>2</sup> diagram.</h1>
        </div>
        <div id="ptN2ContentDivId">
            <!-- The Modal -->
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <span id="idSpanModalClose" class="close">×</span> Instructions
                    </div>
                    <div class="modal-body">
                        <p>Left clicking on a node in the partition tree will navigate to that node. Right clicking on a node
                            in the partition tree will collapse/uncollapse it. A click on any element in the N^2 diagram
                            will allow those arrows to persist.</p>
                    </div>
                    <div class="modal-footer">
                        OpenMDAO Partition Tree and N^2 diagram.
                    </div>
                </div>
            </div>
            <div id="toolbarLoc">
                <div class="toolbar" id="toolbarDiv">
                    <div class="button-group">
                        <button class="myButton" id="returnToRootButtonId" disabled="disabled" title="Return To Root">
                            <i class="icon-home"></i>
                        </button>
                        <button class="myButton" id="backButtonId" disabled="disabled" title="Back">
                            <i class="icon-left-big"></i>
                        </button>
                        <button class="myButton" id="forwardButtonId" disabled="disabled" title="Forward">
                            <i class="icon-right-big"></i>
                        </button>
                        <button class="myButton" id="upOneLevelButtonId" disabled="disabled" title="Up One Level">
                            <i class="icon-up-big"></i>
                        </button>
                    </div>
                    <div class="button-group">
                        <button class="myButton" id="uncollapseInViewButtonId" title="Uncollapse In View Only">
                            <i class="icon-resize-full"></i>
                        </button>
                        <button class="myButton" id="uncollapseAllButtonId" title="Uncollapse All">
                            <i class="icon-resize-full bigger-font"></i>
                        </button>
                        <button class="myButton" id="collapseInViewButtonId" title="Collapse Outputs In View Only">
                            <i class="icon-resize-small"></i>
                        </button>
                        <button class="myButton" id="collapseAllButtonId" title="Collapse All Outputs">
                            <i class="icon-resize-small bigger-font"></i>
                        </button>
                        <div class="dropdown">
                            <button class="myButton" title="Collapse Depth">
                                <i class="icon-sort-number-up"></i>
                            </button>
                            <div id="idCollapseDepthDiv" class="dropdown-content">
                                <span class="fakeLink">Collapse Depth</span>
                            </div>
                        </div>
                    </div>
                    <div class="button-group">
                        <button class="myButton" id="clearArrowsAndConnectsButtonId" title="Clear Arrows and Connections">
                            <i class="icon-eraser"></i>
                        </button>
                        <button class="myButton" id="showCurrentPathButtonId" title="Show Path">
                            <i class="icon-terminal"></i>
                        </button>
                        <button class="myButton" id="showLegendButtonId" title="Show Legend">
                            <i class="icon-map-signs"></i>
                        </button>
                        <button class="myButton" id="showParamsButtonId" type="checkbox" title="Show Params">
                            <i class="icon-exchange"></i>
                        </button>
                        <div class="dropdown">
                            <button class="myButton" title="Font Size">
                                <i class="icon-text-height"></i>
                            </button>
                            <div class="dropdown-content">
                                <span class="fakeLink">Font Size</span>
                                <span class="fakeLink" id="idFontSize8px">8px</span>
                                <span class="fakeLink" id="idFontSize9px">9px</span>
                                <span class="fakeLink" id="idFontSize10px">10px</span>
                                <span class="fakeLink" id="idFontSize11px"><b>11px</b></span>
                                <span class="fakeLink" id="idFontSize12px">12px</span>
                                <span class="fakeLink" id="idFontSize13px">13px</span>
                                <span class="fakeLink" id="idFontSize14px">14px</span>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="myButton" title="Vertically Resize">
                                <i class="icon-resize-vertical"></i>
                            </button>
                            <div class="dropdown-content">
                                <span class="fakeLink">Model Height</span>
                                <span class="fakeLink" id="idVerticalResize600px"><b>600px</b></span>
                                <span class="fakeLink" id="idVerticalResize650px">650px</span>
                                <span class="fakeLink" id="idVerticalResize700px">700px</span>
                                <span class="fakeLink" id="idVerticalResize750px">750px</span>
                                <span class="fakeLink" id="idVerticalResize800px">800px</span>
                                <span class="fakeLink" id="idVerticalResize850px">850px</span>
                                <span class="fakeLink" id="idVerticalResize900px">900px</span>
                                <span class="fakeLink" id="idVerticalResize950px">950px</span>
                                <span class="fakeLink" id="idVerticalResize1000px">1000px</span>
                            </div>
                        </div>
                    </div>
                    <div class="button-group">
                        <button class="myButton" id="saveSvgButtonId" title="Save SVG">
                            <i class="icon-floppy"></i>
                        </button>
                    </div>
                    <div class="button-group">
                        <button class="myButton" id="helpButtonId" title="Help">
                            <i class="icon-help"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div style="margin-top:5px;">
                <input type="text" id="awesompleteId" size="80" />
                <button class="myButton" id="searchButtonId" title="Search"><i class="icon-search"></i></button>
                <label id="searchCountId" style="display:inline-block;width:120px"></label>
            </div>
            <!--<select id="outputNamingSelect" onchange="OutputNameSelectChange()" style="display:none">-->
            <div id="currentPathId" class="path_string" style="display:none"></div>
            <div id="d3_content_div"></div>
            <div id="connectionId">
            </div>
        </div>
    </div>

    <nav id="context-menu" class="context-menu">
        <ul class="context-menu__items">
            <li class="context-menu__items">
                <a href='#' class="context-menu__link" id="collapseButton" data-action="Collapse"><i class="fa fa-eye"></i> Collapse/Uncollapse</a>
            </li>
            <li class="context-menu__items">
                <a href='#' class="context-menu__link" id="texButton" data-action="View"><i class="fa fa-eye"></i>Change Name</a>
            </li>
        </ul>
    </nav>
    <div id="katexTest" class="katex"></div>
    <div id="katexInputDiv" style="display: none">
        <input id="katexInput"></input>
    </div>

    <script type="text/javascript">{{d3_lib}}</script>
    <script type="text/javascript">{{awesomplete_lib}}</script>
    <script type="text/javascript">{{vk_beautify_lib}}</script>
    <script type="text/javascript">{{model_data}}</script>
    <script type="text/javascript">{{constants_lib}}</script>
    <script type="text/javascript">{{modal_lib}}</script>
    <script type="text/javascript">{{svg_lib}}</script>
    <script type="text/javascript">{{search_lib}}</script>
    <script type="text/javascript">{{legend_lib}}</script>
    <script type="text/javascript">{{draw_lib}}</script>
    <script type="text/javascript">{{ptn2_lib}}</script>