Skip to content

feat: Adding a VM Resource Schedule Explorer #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: Adding a VM Resource Schedule Explorer #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0225aa
Adding the initial VMR explorer
sdelliot Sep 23, 2025
4bcf7d4
Fix whitespace
sdelliot Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/source/_static/logo_no_text.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
298 changes: 298 additions & 0 deletions docs/source/_static/vmr_exp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,298 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" type="image/x-icon">

<title>FIREWHEEL VM Resource Schedule</title>

<!-- Link to Bootstrap CSS for styling -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
crossorigin="anonymous"
></script>

<!-- Link to Google Fonts for custom typography -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/material-components-web.min.css"
crossorigin="anonymous"
/>
<script
src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"
crossorigin="anonymous"
></script>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/a11y-dark.min.css"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"
type="text/css"
/>
<script>
hljs.highlightAll();
</script>

<!-- Link to custom CSS styles -->
<link rel="stylesheet" href="vmr_exp_styles.css" />
</head>

<!-- Body section contains the content of the document -->
<body>
<div id="snackbar" class="snackbar"></div>

<!-- Container element for the main content -->
<div class="container mt-4">
<!-- Page title -->
<h1 class="text-center">FIREWHEEL VM Resource Schedule</h1>

<!-- File upload section -->
<div class="container mt-4">
<div class="mb-3">
<form action="#" class="dropzone" id="myDropzone"></form>
</div>
</div>

<!-- Filters section -->
<div class="mb-3">
<h4>Filters</h4>
<input
type="text"
id="vmFilter"
class="form-control"
placeholder="Filter by VM Name"
/>

<div class="d-flex mt-2">
<div class="me-3">
<!-- Add margin-end for spacing -->
<label for="startTime" class="text-center d-block"
>Start Time:</label
>
<input
type="number"
id="startTime"
class="form-control"
placeholder="Start Time"
/>
</div>

<div class="me-3">
<label for="endTime" class="text-center d-block"
>End Time:</label
>
<input
type="number"
id="endTime"
class="form-control"
placeholder="End Time"
/>
</div>
</div>

<md-filled-tonal-button id="applyFilters">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
>
<path
d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"
/>
</svg>
Apply Filters
</md-filled-tonal-button>
</div>

<div class="mb-3">
<div id="current-filters" class="filter-chips"></div>
</div>

<!-- Schedule container section -->
<div
id="scheduleContainer"
class="mb-4"
style="max-height: 400px; overflow-y: auto"
>
<!-- Section title -->
<h2>VM Resource Schedule</h2>

<!-- Table element for displaying the schedule -->
<table id="scheduleTable" class="table table-bordered">
<!-- Table header -->
<thead>
<tr>
<!-- Table header cell for VM name -->
<th>VM Name</th>
</tr>
</thead>

<!-- Table body -->
<tbody id="scheduleBody"></tbody>
</table>
</div>
<!-- The Modal -->
<div id="graphInfoModal" class="modal">
<div class="modal-content">
<span class="close-button" id="graphInfoCloseButton">&times;</span>
<h4>How to Use the Graph</h4>
<p>
The VM Resource (VMR) schedule graph utilizes a
<a
href="https://observablehq.com/@nitaku/tangled-tree-visualization-ii"
target="_blank"
>Tangled Tree</a
>
visualization to illustrate the relationships between different
Virtual Machines (VMs) and their scheduled VM resources. Each
node represents a VM or a scheduled VMR, and the connections
(edges) illustrate the flow of VMR commands over the course of
the experiment. The graph is created using
<a href="https://d3js.org/" target="_blank">D3.js</a>, allowing
for dynamic interactions such as zooming and panning.
</p>
<h5>Using the Graph</h5>
<ul>
<li>
<strong>Node Interaction:</strong> When a VM node is
clicked, it, along with all associated VM resource nodes,
transforms into a star shape to highlight the selected VM's
specific schedule and path through the graph.
</li>
<li>
<strong>Reset Button:</strong> Clicking the reset button
restores the graph to its original view, clearing any zoom
or pan adjustments and removing any selections made by the
user.
</li>
<li>
<strong>Download Button:</strong> The download button allows
users to save the current state of the VM resource schedule
graph as an SVG file.
</li>
</ul>
</div>
</div>

<!-- Graph container section -->
<div id="graphContainer" style="position: absolute; padding-bottom: 40px">
<!-- Section title -->
<h2>
Graph Visualization&nbsp;<svg
xmlns="http://www.w3.org/2000/svg"
id="graphInfoButton"
height="34px"
viewBox="0 -960 960 960"
width="34px"
>
<path
d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
/>
</svg>
</h2>

<!-- SVG element for displaying the graph -->
<svg id="graph" width="1200" height="800"></svg>

<svg
id="resetIcon"
xmlns="http://www.w3.org/2000/svg"
height="50px"
viewBox="0 -960 960 960"
width="50px"
style="top: 60px; right: 80px"
>
<path
d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"
/>
</svg>

<!-- Download SVG icon -->
<svg
id="downloadIcon"
xmlns="http://www.w3.org/2000/svg"
height="50px"
viewBox="0 -960 960 960"
width="50px"
style="position: absolute; top: 60px; right: 15px; cursor: pointer"
>
<path
d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"
/>
</svg>
<!-- Tooltip for the download icon -->
<div
id="downloadtooltip"
class="tooltip"
style="top: 30px; right: -20px"
>
Download Graph
</div>
<div id="resettooltip" class="tooltip" style="top: 30px; right: 60px">
Reset Graph
</div>
</div>

<!-- Modal element for displaying details -->
<div id="detailsModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Close button for the modal -->
<span class="close-button" id="detailsModalCloseButton"
>&times;</span
>

<!-- Section title -->
<div class="modal-header">
<div class="modal-header-content">
<span class="vm-name">${vmName}</span>
<span class="time">Execution Time: ${time}</span>
</div>
</div>

<!-- Container element for the modal details content -->
<div id="modalDetailsContent">
<!-- Dynamic content will be injected here -->
</div>
</div>
</div>
</div>

<!-- Script element for loading D3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- Script element for loading custom JavaScript code -->
<script src="vmr_exp_script.js"></script>
</body>
</html>
Loading
Loading