@rws-framework/client
Version:
This package provides the core client-side framework for Realtime Web Suit (RWS), enabling modular, asynchronous web components, state management, and integration with backend services. It is located in `.dev/client`.
501 lines (419 loc) • 36.4 kB
HTML
<meta charset="utf-8">
<head>
<!-- bootstrap css v5.2.3 -->
<link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="resources/css/custom.css" />
<!-- dark-mode-switch css -->
<link rel="stylesheet" href="vendors/dark-mode-switch/css/dark-mode.css">
<!-- jquery js -->
<script type="text/javascript" src="vendors/jquery/jquery-3.6.0.min.js"></script>
<!-- popperjs/core v2.11.6 -->
<script type="text/javascript" src="vendors/popper/popper.min.js"></script>
<!-- bootstrap js v5.2.3 -->
<script type="text/javascript" src="vendors/bootstrap/js/bootstrap.min.js"></script>
<!-- daterange picker | https://github.com/dangrossman/daterangepicker -->
<script type="text/javascript" src="vendors/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="vendors/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendors/daterangepicker/daterangepicker.css"/>
<!-- d3 js -->
<script src="vendors/d3/d3.v7.8.4.min.js"></script>
<!-- Hull.js -->
<script type="text/javascript" src="vendors/hull/hull.js"></script>
<!-- simpleheat.hs -->
<script type="text/javascript" src="vendors/simpleheat/simpleheat.js"></script>
<!-- exported graph representations as js -->
<script type="text/javascript" src="resources/js/emerge_data.js"></script>
<!-- emerge git functionality -->
<script type="text/javascript" src="resources/js/emerge_git.js"></script>
<!-- emerge heatmap functionality -->
<script type="text/javascript" src="resources/js/emerge_heatmap.js"></script>
<!-- emerge search functionality -->
<script type="text/javascript" src="resources/js/emerge_search.js"></script>
<!-- emerge graph functionality -->
<script type="text/javascript" src="resources/js/emerge_graph.js"></script>
<!-- emerge common functionality -->
<script type="text/javascript" src="resources/js/emerge_common.js"></script>
</head>
<body>
<div id="graphDiv"></div>
<div id="cardMenu" class="card border-dark">
<h6 class="card-header align-items-center text-center">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bounding-box-circles" viewBox="0 0 16 16">
<path d="M2 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM0 2a2 2 0 0 1 3.937-.5h8.126A2 2 0 1 1 14.5 3.937v8.126a2 2 0 1 1-2.437 2.437H3.937A2 2 0 1 1 1.5 12.063V3.937A2 2 0 0 1 0 2zm2.5 1.937v8.126c.703.18 1.256.734 1.437 1.437h8.126a2.004 2.004 0 0 1 1.437-1.437V3.937A2.004 2.004 0 0 1 12.063 2.5H3.937A2.004 2.004 0 0 1 2.5 3.937zM14 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM2 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
<span>
<small> <strong><span id="configEmergeVersion" style="padding-left: 2px;"></span></strong></small>
</span>
</span>
</h6>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item small d-flex justify-content-between align-items-center py-1">
<div class="form-check form-switch float-right">
<input type="checkbox" class="form-check-input" id="darkSwitch">
<label class="form-check-label" for="darkSwitch"><small>Dark Mode</small></label>
</div>
</li>
<li class="list-group-item small d-flex justify-content-between align-items-center medium-tooltip">
<small><span id="projectInfo">Project info</span></small> <span id="badge_project_info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span></span>
</li>
<li class="list-group-item small d-flex justify-content-between align-items-center">
<small><span id="graphProperties">Graph properties</span></small> <span id="badge_graph_info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span></span>
</li>
</ul>
<div id="menuButtonGroup" class="btn-group-vertical" style="min-width: 80px;">
<div class="btn-group dropstart">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-with-spacing shadow-none" id="selectGraphButton" data-bs-toggle="dropdown">
<span id="selectedGraph">selected graph</span>
</button>
<div class="dropdown-menu" id="dropdown-graph" aria-labelledby="dropdown-graph">
<!-- injected by JS -->
</div>
</div>
<button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="toggleNodeLabels();">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
<circle cx="8" cy="4.5" r="1"/>
</svg>
</span>
Toggle node labels
</button>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="decreaseCurrentChargeForce();">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-minus-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
force
</button>
<button type="button" class="btn-right-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left shadow-none" onclick="increaseCurrentChargeForce();">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-plus-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</span>
force
</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="zoomOut();">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-zoom-out" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
<path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
<path fill-rule="evenodd" d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
zoom
</button>
<button type="button" class="btn-right-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left shadow-none" onclick="zoomIn();">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-zoom-in" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
<path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
<path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</span>
zoom
</button>
</div>
<button type="button" class="btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="translateCanvas('up')">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-up-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
</svg>
</span>
</button>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="translateCanvas('left')">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-left-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
</svg>
</span>
</button>
<button type="button" class="btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left shadow-none" onclick="translateCanvas('right')">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
</svg>
</span>
</button>
</div>
<button type="button" class="btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="translateCanvas('down')">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-down-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
</svg>
</span>
</button>
<button id="buttonShowOverallStatistics" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#overallStatisticsModal">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
Overall statistics
</button>
<!-- Modal -->
<div class="modal fade" id="overallStatisticsModal" tabindex="-1" role="dialog" aria-labelledby="overallStatisticsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="overallStatisticsModalLabel">Overall statistics</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="card-table table table-condensed">
<thead class="table-borderless">
<tr>
<th scope="col">Statistic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody id="tbody-statistics">
<!-- injected by js -->
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
<button type="button" id="buttonShowOverallMetrics" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#overallMetricsModal">
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
Overall metrics
</button>
<div class="btn-group dropstart">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-with-spacing" data-bs-toggle="dropdown"><span></span> <span class="caret"></span>Apply metrics</button>
<ul id="dropdown-apply-metric" class="dropdown-menu">
<!-- injected by js -->
</ul>
</div>
<div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>
<ul class="list-group list-group-flush">
<!-- Shortcuts -->
<li class="list-group-item small d-flex justify-content-between align-items-center" style="border: 0px; margin-bottom: 0px; padding-left: 0px;">
<label style="margin-bottom: 0px; padding-right: 4px;"> <small>Shortcuts</small> </label> <span id="badge_shortcuts" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary" customClass="large-tooltip"> ?</span>
</li>
<li id="li-unselected-opacity" class="list-group-item small d-flex justify-content-between align-items-center py-1" style="border: 0px; margin-bottom: 0px; padding-left: 0px; padding-bottom: 0px;">
<small>Unselected opacity</small> <span id="badge_unselected_opacity" style="margin-left: 4px;" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span>
</li>
<input type="range" min="1" max="100" value="20" class="form-range" id="unselected-opacity" oninput="unselectedOpacityChange(this.value)" onchange="unselectedOpacityChange(this.value)">
<!-- Git settings -->
<div id="container_git_settings">
<div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>
<li class="list-group-item small d-flex justify-content-between align-items-center py-1 disabled" style="max-height: 24px; border: 0px; margin-bottom: 0px; padding-left: 0px;">
<small style="font-size: 10px;">Git settings </small>
<div class="form-group" style="width: 50%;">
<hr>
</div>
</li>
<div class="input-group mb-1 input-group-sm">
<input class="form-control form-control-sm" type="text" name="daterange" placeholder="pick date range" id="timeDateRangePicker" style="font-size: 9px;" />
<button class="btn btn-primary " type="button" id="inputDateRangePickerCancel" onclick="clickDateRangePickerCancel()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bootstrap-reboot" viewBox="0 0 16 16">
<path d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z"/>
<path d="M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z"/>
</svg>
</button>
</div>
<div style="width: 100%; padding-top: 6px; padding-bottom: 0px;"></div>
</div>
<!-- time series modal -->
<!-- Modal -->
<div class="modal fade" id="timeSeriesModal" tabindex="-1" aria-labelledby="timeSeriesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="timeSeriesModalLabel">Complexity/churn growth</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="my_dataviz_chord"></div>
<br>
<div id="my_dataviz"></div>
<br>
<div id="time_series_sloc"></div>
<br>
<div id="my_dataviz2"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="button_complexity_churn" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#timeSeriesModal" onclick="generateTimeSeriesChart()" >
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
Compl/SLOC/Churn
</button>
<!-- time series modal -->
<!-- Modal -->
<div class="modal fade" id="changeCouplingModal" tabindex="-1" aria-labelledby="changeCouplingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="changeCouplingModalLabel">Change Coupling</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="change_coupling_chord_diagram"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="button_change_coupling" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#changeCouplingModal" onclick="generateChangeCouplingChart()" >
<span aria-hidden="true">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
Change Coupling
</button>
<div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>
<div id="formSwitchHoverCoupling" class="form-check form-switch small float-right" style="width: 100%;">
<input type="checkbox" class="form-check-input" id="switchHoverCoupling">
<label class="form-check-label d-flex justify-content-between" for="switchHoverCoupling"><small>Hover coupling</small> <span id="badge_hover_coupling" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<li class="list-group-item small d-flex justify-content-between align-items-center disabled" style="max-height: 24px; border: 0px; margin-bottom: 0px; padding-left: 0px;">
<small style="font-size: 10px;">Heatmap settings </small>
<div class="form-group" style="width: 38%; padding: 0px;">
<hr>
</div>
</li>
<div class="form-check form-switch small float-right">
<input type="checkbox" class="form-check-input" id="switchActivateHeatmap">
<label class="form-check-label d-flex justify-content-between" for="switchActivateHeatmap"><small>Normal Heatmap </small> <span id="badge_heat_map_normal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<div class="form-check form-switch small float-right">
<input type="checkbox" class="form-check-input" id="switchMergeHeatmap">
<label class="form-check-label d-flex justify-content-between" for="switchMergeHeatmap"><small>Hybrid Heatmap</small> <span id="badge_heat_map_hybrid" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<div id="formSwitchChurnHeatmap" class="form-check form-switch small float-right">
<input type="checkbox" class="form-check-input" id="switchChurnHeatmap">
<label class="form-check-label d-flex justify-content-between" for="switchChurnHeatmap"><small>Churn Heatmap </small> <span id="badge_heat_map_churn" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<div id="formSwitchHotspotHeatmap" class="form-check form-switch small float-right">
<input type="checkbox" class="form-check-input" id="switchHotspotHeatmap">
<label class="form-check-label d-flex justify-content-between" for="switchHotspotHeatmap"><small>Hotspot Heatmap </small> <span id="badge_heat_map_hotspot" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<div style="width: 100%; padding-top: 6px; padding-bottom: 0px;"></div>
<label id="inputNodeSearchLabel" for="inputNodeSearch">0 nodes found</label>
<div class="input-group mb-1 input-group-sm">
<input id="inputNodeSearch" type="text" class="form-control" placeholder="Search nodes" aria-label="Search" aria-describedby="search-addon">
<button class="btn btn-primary " type="button" id="inputNodeSearchCancel">
<svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<div style="width: 100%; padding-top: 8px; padding-bottom: 0px;"></div>
<div class="form-check form-switch small float-right" style="width: 100%;">
<input type="checkbox" class="form-check-input" id="switchAddSemanticSearch">
<label class="form-check-label d-flex justify-content-between" for="switchAddSemanticSearch"><small>Add semantics</small> <span id="badge_semantic_search" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
<div id="formSwitchAddContributorSearch" class="form-check form-switch small float-right" style="width: 100%;">
<input type="checkbox" class="form-check-input" id="switchAddContributorSearch">
<label class="form-check-label d-flex justify-content-between" for="switchAddContributorsSearch"><small>Add contributors</small> <span id="badge_contributors_search" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
</div>
</div>
<li class="list-group-item small d-flex justify-content-between align-items-center" style="padding-left: 0px; padding-right: 1px;" >
<label style="margin-bottom: 0px; font-size: 10px;"> Hover/select cluster hulls </label> <span id="badge_cluster_hulls" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary" customClass="large-tooltip"> ?</span>
</li>
<div id="clusterHullMenu">
<!-- cluster hull selection / injected by javascript -->
</div>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="overallMetricsModal" tabindex="-1" role="dialog" aria-labelledby="overallMetricsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Overall metrics</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="card-table table table-condensed">
<thead class="table-borderless">
<tr>
<th scope="col">Metric</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody id="tbody-metrics">
<!-- injected by js -->
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
<div class="toast-container position-fixed top-0 start-0 p-3">
<div id="toastDateRangeUpdated" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3500">
<div class="d-flex">
<div class="toast-body small">
Git date range updated, metrics, visualizations and graph structures may have changed.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<div class="toast-container position-fixed top-0 start-0 p-3">
<div id="toastDebug" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="d-flex">
<div id="toastDebugMessage" class="toast-body small">
text
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<script src="vendors/dark-mode-switch/js/dark-mode-switch.min.js"></script>
<!-- emerge basic ui/descriptions -->
<script type="text/javascript" src="resources/js/emerge_ui.js"></script>
<!-- emerge hull functionality -->
<script type="text/javascript" src="resources/js/emerge_hull.js"></script>
<!-- emerge main functionality -->
<script type="text/javascript" src="resources/js/emerge_main.js"></script>
</div>
</body>