<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<!--
Copyright (c) 2016 André Santos

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
    <title>HAROS Visualizer</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />

    <link rel="stylesheet" href="lib/css/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/css/pure-min.css" />
    <link rel="stylesheet" href="lib/css/grids-responsive-min.css" />
    <link rel="stylesheet" href="css/type.css" />
    <link rel="stylesheet" href="css/color.css" />
    <link rel="stylesheet" href="css/style.css" />

    <script src="lib/js/jquery-2.2.1.min.js"></script>
    <script src="lib/js/underscore.min.js"></script>
    <script src="lib/js/backbone.min.js"></script>
    <script src="lib/js/d3.min.js"></script>
    <script src="lib/js/dagre.min.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/models.js"></script>
    <script src="js/views/general.js"></script>
    <script src="js/views/dashboard.js"></script>
    <script src="js/views/packages.js"></script>
    <script src="js/views/issues.js"></script>
    <script src="js/views/ros.js"></script>
    <script src="js/views/help.js"></script>
    <script src="js/routes.js"></script>
</head>
<body>
    <!-- App Header -->
    <div id="app-header">
        <!--<div class="my-button badge-empty"><h2><i class="fa fa-flag-o"></i></h2></div>
        <div class="my-button badge-empty"><h2><i class="fa fa-ellipsis-h"></i></h2></div>-->
        <div class="navigation-menu">
            <a id="navigation-dashboard" href="#dashboard"><i class="fa fa-line-chart"></i> <span class="show-inline-lg">Dashboard</span></a>
            <a id="navigation-packages" href="#packages"><i class="fa fa-folder"></i> <span class="show-inline-lg">Packages</span></a>
            <a id="navigation-issues" href="#issues"><i class="fa fa-bug"></i> <span class="show-inline-lg">Issues</span></a>
            <a id="navigation-ros" href="#models"><i class="fa fa-cogs"></i> <span class="show-inline-lg">Models</span></a>
            <a id="navigation-help" href="#help"><i class="fa fa-question-circle"></i> <span class="show-inline-lg">Help</span></a>
        </div>
        <h1 class="title">HAROSviz</h1>
    </div>

    <!-- App Body -->
    <div id="app">
        <section id="dashboard">
            <div class="margin-h">
                <label for="dashboard-project-select">
                    <i class="fa fa-briefcase"></i>
                    <strong class="show-inline-sm">Project</strong>
                </label>
                <select id="dashboard-project-select"></select>
            </div>
            <div class="pure-g">
                <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
                    <!-- http://mbostock.github.io/d3/talk/20111018/tree.html -->
                    <div id="dashboard-panel-source" class="panel double-size"></div>
                </div>
                <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
                    <!-- https://www.jasondavies.com/coffee-wheel/ -->
                    <div id="dashboard-panel-issues" class="panel double-size"></div>
                </div>
                <div class="pure-u-1 pure-u-sm-1 pure-u-lg-1-2">
                    <div id="dashboard-panel-progress" class="panel double-size">
                        <h4 class="title"><i class="fa fa-line-chart"></i> Quality Progress</h4>
                        <div class="flexbox margin-top">
                            <select id="dashboard-metric-select" class="flexible margin-h">
                                <option value="lines_of_code">Lines of Code</option>
                                <option value="comments">Lines of Comments</option>
                                <option value="issues">Number of Issues</option>
                                <option value="standards">Coding Standards Issues</option>
                                <option value="metrics">Metrics Issues</option>
                                <option value="complexity">Avg. Cyclomatic Complexity</option>
                                <option value="function_length">Avg. Function Length</option>
                            </select>
                        </div>
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
        </section>

        <section id="package-board">
            <div id="package-graph">
                <div id="pkg-graph-action-bar" class="action-bar">
                    <button type="button" id="pkg-btn-viewport" title="Reset Zoom"><i class="fa fa-sitemap"></i></button><!--
                    --><button type="button" id="pkg-btn-filter" title="Set Filters"><i class="fa fa-filter"></i></button>
                </div>

                <div id="pkg-node-action-bar" class="action-bar">
                    <button type="button" id="pkg-btn-focus" title="Set/Clear Focus"><i class="fa fa-search"></i></button><!--
                    --><button type="button" id="pkg-btn-info" title="Details"><i class="fa fa-info"></i></button><!--
                    --><button type="button" id="pkg-btn-issues" title="Issues"><i class="fa fa-bug"></i></button>
                </div>

                <div class="issue-scale">
                    <div class="issue-level-0" title="No issues!"><span class="show-inline-md"><strong>L0</strong></span></div>
                    <div class="issue-level-1" title="&lt; 1 issue / 120 lines of code"><span class="show-inline-md"><strong>L1</strong></span></div>
                    <div class="issue-level-2" title="&plusmn; 1 issue / 100 lines of code"><span class="show-inline-md"><strong>L2</strong></span></div>
                    <div class="issue-level-3" title="&plusmn; 1 issue / 70 lines of code"><span class="show-inline-md"><strong>L3</strong></span></div>
                    <div class="issue-level-4" title="&plusmn; 1 issue / 45 lines of code"><span class="show-inline-md"><strong>L4</strong></span></div>
                    <div class="issue-level-5" title="&plusmn; 1 issue / 24 lines of code"><span class="show-inline-md"><strong>L5</strong></span></div>
                    <div class="issue-level-6" title="&plusmn; 1 issue / 15 lines of code"><span class="show-inline-md"><strong>L6</strong></span></div>
                    <div class="issue-level-7" title="&gt; 1 issue / 12 lines of code"><span class="show-inline-md"><strong>L7</strong></span></div>
                </div>

                <div id="pkg-filter-modal" class="modal">
                    <div class="modal-content">
                        <div class="button-close margin-top"><i class="fa fa-close"></i></div>
                        <div class="margin-top">
                            <i class="fa fa-filter"></i>
                            <label for="pkg-filter-input">Filter by</label>
                            <span id="pkg-filter-toggle">/ Ignore by</span>
                        </div>
                        <input id="pkg-filter-input" type="text" placeholder="tag">
                        <ul class="taglist"></ul>
                        <div class="text-button pull-left margin-bottom">Clear</div>
                        <div class="button-close margin-bottom">Close</div>
                    </div>
                </div>

                <div id="pkg-info-modal" class="modal">
                    <div class="modal-content">
                        <div class="button-close margin-top"><i class="fa fa-close"></i></div>
                        <div class="template-wrapper"></div>
                        <div class="button-close margin-bottom">Close</div>
                    </div>
                </div>
            </div>
        </section>

        <section id="issue-board">
            <div class="header-menu">
                <div class="menu-item margin-bottom">
                    <select id="issue-type-select" class="flexible margin-h">
                        <option value="source">Source Issues</option>
                        <option value="runtime">Runtime Issues</option>
                        <option value="other">Other Issues</option>
                    </select>
                </div>
                <div class="menu-item margin-bottom">
                    <select id="issue-package-select" class="flexible margin-h"></select>
                    <select id="issue-config-select" class="flexible margin-h"></select>
                </div>
                <div class="menu-item margin-bottom">
<!--
                    <label for="issue-report-select">
                        <i class="fa fa-bug"></i>
                        <strong class="show-inline-sm">Issue</strong>
                    </label>
                    <select id="issue-report-select" class="flexible margin-h margin-bottom">
                        <option value="standards">Coding Standards</option>
                        <option value="metrics">Quality Metrics</option>
                    </select>
-->
                    <button type="button" id="issue-btn-filter" class="flex-grow margin-right">
                        <i class="fa fa-filter"></i> Filter
                    </button>
                    <button type="button" id="issue-btn-page-left" class="flex-grow margin-left">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                    <span id="issue-label-page" class="flex-grow text-center">Page 1</span>
                    <button type="button" id="issue-btn-page-right" class="flex-grow margin-left">
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </div>
            </div>
            <div id="issue-explorer"></div>
            <div class="text-center margin-bottom">
                <span id="issue-btn-top" class="text-button">Back to Top</span>
            </div>

            <div id="issue-filter-modal" class="modal">
                <div class="modal-content">
                    <div class="button-close margin-top"><i class="fa fa-close"></i></div>
                    <div class="margin-top">
                        <i class="fa fa-filter"></i>
                        <label for="issue-filter-input">Filter by</label>
                        <span id="issue-filter-toggle">/ Ignore by</span>
                    </div>
                    <input id="issue-filter-input" type="text" placeholder="tag">
                    <ul class="taglist"></ul>
                    <div class="text-button pull-left margin-bottom">Clear</div>
                    <div class="button-close margin-bottom">Close</div>
                </div>
            </div>
        </section>

        <section id="ros-board">
            <div class="header-menu">
                <div class="menu-item margin-bottom">
                    <select id="ros-config-select" class="flexible margin-h"></select>
                </div>
                <div class="menu-item margin-bottom">
                    <button type="button" id="ros-config-issues" class="margin-h"><i class="fa fa-bug"></i> Issues</button>
                </div>
            </div>
            <div class="pure-g">
                <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
                    <div class="header-menu">
                        <select id="ros-query-select" class="flexible"></select>
                    </div>
                    <div id="config-details" class="panel"></div>
                </div>
                <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-2-3 pure-u-lg-3-4">
                    <div id="config-graph" class="margin-h">
                        <div id="config-graph-action-bar" class="action-bar">
                            <button type="button" id="config-btn-viewport" title="Reset Zoom"><i class="fa fa-sitemap"></i></button><!--
                            --><button type="button" id="config-btn-drag" title="Enable/Disable Dragging"><i class="fa fa-hand-rock-o"></i></button><!--
                            --><button type="button" id="config-btn-names" title="Show/Hide Names"><i class="fa fa-font"></i></button><!--
                            --><button type="button" id="config-btn-param" title="Show/Hide Parameters"><i class="fa fa-server"></i></button>
                        </div>

                        <div id="config-node-action-bar" class="action-bar">
                            <button type="button" id="config-btn-focus" title="Set/Clear Focus"><i class="fa fa-search"></i></button><!--
                            --><button type="button" id="config-btn-info" title="Details"><i class="fa fa-info"></i></button>
                        </div>

                        <div id="config-info-modal" class="modal">
                            <div class="modal-content">
                                <div class="button-close margin-top"><i class="fa fa-close"></i></div>
                                <div class="template-wrapper"></div>
                                <div class="button-close margin-bottom">Close</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="help-board">
            <h2>Metrics</h2>
            <h4>How are lines of code measured?</h4>
            <p>HAROS supports several ways to measure lines of code:</p>
            <dl>
                <dt>LOC (Physical Lines of Code)</dt>
                <dd>measures the number of line feeds in a text file.</dd>

                <dt>SLOC (Source Lines of Code)</dt>
                <dd>measures the number of physical lines, minus blank lines; it is the number of lines of source code and comments.</dd>

                <dt>PLOC (Program Lines of Code)</dt>
                <dd>measures the number of source code lines (no comments or blank lines).</dd>

                <dt>LLOC (Logical Lines of Code)</dt>
                <dd>measures the number of logical lines of code; e.g.
                <span style="font-family: monospace; white-space: pre-wrap">if (condition) func();</span>
                counts as two lines.</dd>

                <dt>ELOC (Executable Lines of Code)</dt>
                <dd>measures the number of executable lines of code; e.g. this
                could exclude lines with braces and so on, depending on
                the language.</dd>
            </dl>

            <p><b>Note:</b> HAROS, by itself, only counts LOC. All other types
            are provided by plugins. Since you may be running HAROS without any
            of the other LOC types, for calculating package score (colour) HAROS
            uses an estimate of the <i>useful lines of code</i>, calculated from
            the raw LOC value. This estimate tries to approximate a PLOC/ELOC
            value, but may be quite wrong.</p>

            <h4>What is Cyclomatic Complexity, and how to fix it?</h4>
            <p>Cyclomatic Complexity measures the amount of execution paths that
            result from decisions within a function. <i>In English:</i> the
            minimum value is 1, because there is always one path for the
            function; there is no maximum, by definition; it counts the amount of
            <b>if</b>, <b>or</b>, <b>and</b>, <b>for</b>, <b>while</b>...
            Typically, the greater the value, the harder it is to understand
            the function.</p>

            <p>Normally, when CC is high, the functions also tend to be
            quite big. Try to split the function in smaller functions that
            make sense (and ideally, ones that can be reused).</p>

            <p><b>Note:</b> use your best judgement when breaking functions
            into smaller chunks. Sometimes, a function has many decisions,
            but may be easier to understand in the whole, rather than a
            bunch of smaller functions whose sole purpose is to decrease
            a number.</p>

            <h4>What is the Maintainability Index, and how can I increase it?</h4>
            <p>The Maintainability Index is a metric that is calculated from
            a bunch of other metrics (lines of code, comment ratio,
            Cyclomatic Complexity, Halstead Volume). It was designed to be a
            <i>score</i> for how maintainable your code is. However, it has
            received some criticism over time, and many people say that its
            current definition could improve. Use it as feedback, but not
            as a rule.</p>

            <p>Naturally, to improve it, you need to improve these metrics.
            Decrease lines of code, document your code, and reduce its
            complexity.</p>
        </section>


        <section id="preloader" class="text-center">
            <h1>Loading...</h1>
            <h1><i class="fa fa-spinner fa-spin"></i></h1>
        </section>
    </div>

    <script type="text/template" id="dashboard-panel-source-template">
        <a href="#packages"><h4 class="title"><i class="fa fa-file-code-o"></i> Source Code</h4></a>
        <p class="item">
            <span class="label" title="Number of packages in the project">Packages</span>
            <span class="badge-empty"><%= data.packages != null ? data.packages : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of node executables">Nodes</span>
            <span class="badge-empty"><%= data.nodes != null ? data.nodes + (data.nodelets != null ? data.nodelets : 0) : (data.nodelets != null ? data.nodelets : "n/a") %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of C++ lines of code">C++ Lines</span>
            <span class="badge-empty"><%= data.cppLOC != null ? (data.cppLOC >= 1000000 ? (data.cppLOC / 1000000.0).toFixed(2) + "M" : (data.cppLOC >= 1000 ? (data.cppLOC / 1000.0).toFixed(2) + "K" : data.cppLOC)) : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of Python lines of code">Python Lines</span>
            <span class="badge-empty"><%= data.pythonLOC != null ? (data.pythonLOC >= 1000000 ? (data.pythonLOC / 1000000.0).toFixed(2) + "M" : (data.pythonLOC >= 1000 ? (data.pythonLOC / 1000.0).toFixed(2) + "K" : data.pythonLOC)) : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of launch files">Launch files</span>
            <span class="badge-empty"><%= data.launchFiles != null ? data.launchFiles : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of .msg files">Message files</span>
            <span class="badge-empty"><%= data.messages != null ? data.messages : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of .srv files">Service files</span>
            <span class="badge-empty"><%= data.services != null ? data.services : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of .action files">Action files</span>
            <span class="badge-empty"><%= data.actions != null ? data.actions : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of user-defined configurations (models)">Configurations</span>
            <span class="badge-empty"><%= data.configurations != null ? data.configurations : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of unique (external) package dependencies">Pkg. Dependencies</span>
            <span class="badge-empty"><%= data.pkgDependencies != null ? data.pkgDependencies : "n/a" %></span>
        </p>
    </script>

    <script type="text/template" id="dashboard-panel-issues-template">
        <a href="#issues"><h4 class="title"><i class="fa fa-bug"></i> Analysis Results</h4></a>
        <p class="item">
            <span class="label" title="Number of plugins used for this report">Plugins</span>
            <span class="badge-empty"><%= data.plugins != null ? data.plugins : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of enabled rules">Total rules</span>
            <span class="badge-empty"><%= data.rules != null ? data.rules : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of user-defined rules">User-defined rules</span>
            <span class="badge-empty"><%= data.userRules != null ? data.userRules : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of unique violated rules">Violated rules</span>
            <span class="badge-empty"><%= data.violatedRules != null ? data.violatedRules : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of reported issues">Total issues</span>
            <span class="badge-empty"><%= data.total != null ? data.total : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Issues related to coding style and standards">Coding issues</span>
            <span class="badge-empty"><%= data.coding != null ? data.coding : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Issues related to metrics thresholds">Metrics issues</span>
            <span class="badge-empty"><%= data.metrics != null ? data.metrics : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Issues relating to other topics">Other issues</span>
            <span class="badge-empty"><%= data.other != null ? data.other : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Ratio of issues per line of code (any language)">Issues per line</span>
            <span class="badge-empty"><%= data.ratio != null ? data.ratio : "n/a" %></span>
        </p>
    </script>

    <script type="text/template" id="package-board-tag-item">
        <li class="tag" data-tag="<%= data.tag %>"><i class="fa fa-close"></i> <%= data.tag %></li>
    </script>

    <script type="text/template" id="package-board-info-modal">
        <h4 class="title">
            <%= data.id %>
            <small><a target="_blank" href="<%= data.wiki %>">Wiki <i class="fa fa-external-link"></i></a></small>
        </h4>
        <% if (data.metapackage) print('<span class="info">Metapackage</span>'); %>
        <hr>
        <p><%= data.description %></p>
        <hr>
        <p>
            <i class="fa fa-group bullet-icon"></i>
            <strong>Authors:</strong>
            <%= data.authors.join(", ") || "n/a" %>
        </p>
        <p>
            <i class="fa fa-wrench bullet-icon"></i>
            <strong>Maintainers:</strong>
            <%= data.maintainers.join(", ") || "n/a" %>
        </p>
        <p>
            <i class="fa fa-code-fork bullet-icon"></i>
            <strong>Repository:</strong>
            <%= !!data.repository
                ? '<a target="_blank" href="' + data.repository + '">'
                    + data.repository.split("/")[2]
                    + ' <i class="fa fa-external-link"></i></a>'
                : "n/a" %>
        </p>
        <p>
            <i class="fa fa-warning bullet-icon"></i>
            <strong>Bug Tracker:</strong>
            <%= !!data.bugTracker
                ? '<a target="_blank" href="' + data.bugTracker + '">'
                    + data.bugTracker.split("/")[2]
                    + ' <i class="fa fa-external-link"></i></a>'
                : "n/a" %>
        </p>
        <p>
            <i class="fa fa-sitemap bullet-icon"></i>
            <strong>Dependencies:</strong>
            <%= data.dependencies.join(", ") || "none" %>
        </p>
        <p>
            <i class="fa fa-database bullet-icon"></i>
            <strong>Size:</strong>
            <%= data.size != null ? data.size.toLocaleString() + " KB" : "n/a" %>
        </p>
        <p>
            <i class="fa fa-list-ol bullet-icon"></i>
            <strong>Physical Lines:</strong>
            <%= data.lines != null ? data.lines.toLocaleString() : "n/a" %>
        </p>
    </script>

    <script type="text/template" id="issue-board-violation">
        <div class="issue">
            <h4>Issue #<%= data.id %>
                <span class="show-inline-md">- Rule <%= data.rule %></span>
                <small><% if (data.location != null && data.location.file) {
                    print("in " + data.location.file);
                    if (data.location.line) print(", line " + data.location.line);
                } %></small>
            </h4>
            <p><strong><%= data.description %></strong></p>
            <p><%= (data.comment || "").replace("\n", "<br/>") || "<i>No additional comment.</i>" %></p>
            <ul class="taglist">
                <% for (var i = 0; i < data.tags.length; ++i)
                    print('<li class="tag" data-tag="' + data.tags[i] + '">' + data.tags[i] + "</li>\n");
                %>
            </ul>
        </div>
    </script>

    <script type="text/template" id="ros-board-config-summary">
        <h4 class="title"><i class="fa fa-gears"></i> Summary</h4>
        <p class="item">
            <span class="label" title="Number of top-level launch files">Launch files</span>
            <span class="badge-empty"><%= data.launch != null ? data.launch.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of nodes">Nodes</span>
            <span class="badge-empty"><%= data.nodes != null ? data.nodes.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of topics">Topics</span>
            <span class="badge-empty"><%= data.topics != null ? data.topics.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of services">Services</span>
            <span class="badge-empty"><%= data.services != null ? data.services.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of parameters">Parameters</span>
            <span class="badge-empty"><%= data.parameters != null ? data.parameters.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Total number of remappings">Remappings</span>
            <span class="badge-empty"><%= data.remaps != null ? data.remaps : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of ROS resources with equal names">Name Collisions</span>
            <span class="badge-empty"><%= data.collisions != null ? data.collisions : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="Number of runtime issues for this configuration">Issues</span>
            <span class="badge-empty"><%= data.queries != null ? data.queries.length : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="ROS names that could not be resolved automatically">Unresolved</span>
            <span class="badge-empty"><%= data.unresolved != null ? data.unresolved : "n/a" %></span>
        </p>
        <p class="item">
            <span class="label" title="ROS resources under if statements or loops">Conditional</span>
            <span class="badge-empty"><%= data.conditional != null ? data.conditional : "n/a" %></span>
        </p>
    </script>

    <script type="text/template" id="ros-board-info-modal">
        <h4 class="title"><%= data.name %> <span class="info"><%= data.resourceType %></span></h4>
        <span class="info"><%= data.type %></span>
        <hr>
        <% if (data.resourceType == "node")
            print('<p><i class="fa fa-terminal bullet-icon"></i>'
                  + "<strong>Arguments:</strong>"
                  + (data.args || "(none)")
                  + "</p>");
        %>
        <p>
            <i class="fa fa-file-text bullet-icon"></i>
            <strong>Source Code Locations:</strong>
            <% if (!data.traceability.length) print("(unknown)");
            for (var j = 0; j < data.traceability.length; ++j)
                print("<br/><small>in package <i>"
                      + data.traceability[j].package
                      + "</i>"
                      + (data.traceability[j].file
                         ? ", file <i>" + data.traceability[j].file + "</i>"
                         : "")
                      + (data.traceability[j].file && data.traceability[j].line
                         ? ", line " + data.traceability[j].line
                         : "")
                      + "</small>\n");
            %>
        </p>
        <p>
            <i class="fa fa-asterisk bullet-icon"></i>
            <strong>Conditions:</strong>
            <% if (!data.conditions.length) print("(none)");
            for (var i = 0; i < data.conditions.length; ++i)
                print('<br/><span class="code">'
                      + data.conditions[i].statement
                      + ' ('
                      + data.conditions[i].condition
                      + ")</span> in <i>"
                      + (data.conditions[i].location
                        ? (data.conditions[i].location.package
                            + (data.conditions[i].location.file
                                ? "/" + data.conditions[i].location.file : "")
                            + "</i>"
                            + (data.conditions[i].location.line
                                ? ", line " + data.conditions[i].location.line : ""))
                        : "unknown location</i>")
                      + "\n");
            %>
        </p>
        <p>
            <i class="fa fa-question-circle bullet-icon"></i>
            <strong>Variables:</strong>
            <% if (!data.variables.length) print("(none)");
            for (var i = 0; i < data.variables.length; ++i)
                print('<span class="code">'
                      + data.variables[i]
                      + "</span>\n");
            %>
        </p>
    </script>
</body>
</html>
