<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deloxide - Deadlock Detection Visualization</title>
<link rel="icon" type="image/png" href="img/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png" alt="Deloxide Logo">
</a>
</div>
<div class="header-buttons">
<button id="upload-btn" class="header-btn" aria-label="Upload log files">
<i class="fas fa-upload"></i>
<span>Upload</span>
</button>
<button id="share-btn" class="header-btn" aria-label="Share visualization" style="display: none;">
<i class="fas fa-share-alt"></i>
<span>Share</span>
</button>
<button id="legend-toggle" class="header-btn" aria-label="Toggle legend">
<i class="fas fa-list"></i>
<span>Legend</span>
</button>
<button id="theme-toggle" aria-label="Toggle dark mode">
<i id="theme-icon" class="fas fa-moon"></i>
<span>Dark Mode</span>
</button>
</div>
</header>
<main>
<div id="loading">
<div class="spinner animate__animated animate__rotateIn"></div>
<p class="animate__animated animate__fadeIn">Loading visualization...</p>
</div>
<div id="controls" class="animate__animated animate__fadeIn">
<button id="play-btn" class="control-btn" data-playing="false">
<i class="fas fa-play"></i>
<span>Play</span>
</button>
<button id="prev-btn" class="control-btn" disabled>
<i class="fas fa-chevron-left"></i>
<span>Previous</span>
</button>
<button id="next-btn" class="control-btn">
<i class="fas fa-chevron-right"></i>
<span>Next</span>
</button>
<button id="speed-up-btn" class="control-btn" title="Increase speed">
<i class="fas fa-arrow-up"></i>
<span>Faster</span>
</button>
<button id="speed-down-btn" class="control-btn" title="Decrease speed">
<i class="fas fa-arrow-down"></i>
<span>Slower</span>
</button>
<button id="reset-btn" class="control-btn">
<i class="fas fa-redo"></i>
<span>Reset</span>
</button>
</div>
<div class="visualization-container animate__animated animate__fadeIn">
<div class="visualization-left">
<div id="graph">
</div>
</div>
<div class="visualization-right">
<div id="step-info">
<h3>Step Information</h3>
<p>Select a step or use the controls to navigate through the visualization.</p>
</div>
<div id="wait-graph">
<h3>Wait-for Graph</h3>
<div id="wait-graph-content">
<p>The wait-for graph will appear here once resources are being requested.</p>
</div>
</div>
</div>
</div>
<div id="timeline" class="animate__animated animate__fadeIn">
<div id="timeline-line"></div>
<div id="timeline-marker"></div>
</div>
<div id="legend" style="display: none;">
<div class="legend-sections">
<div class="legend-section">
<div class="legend-title">Nodes</div>
<div class="legend-items compact">
<div class="legend-item"><div class="legend-color thread"></div><span>Thread</span></div>
<div class="legend-item"><div class="legend-color mutex"></div><span>Mutex</span></div>
<div class="legend-item"><div class="legend-color rwlock"></div><span>RwLock</span></div>
<div class="legend-item"><div class="legend-color condvar"></div><span>Condvar</span></div>
</div>
</div>
<div class="legend-section">
<div class="legend-title">Links</div>
<div class="legend-items compact">
<div class="legend-item"><div class="legend-line attempt"></div><span>Attempt</span></div>
<div class="legend-item"><div class="legend-line wait"></div><span>Wait</span></div>
<div class="legend-item"><div class="legend-line acquired"></div><span>Acquired</span></div>
<div class="legend-item"><div class="legend-line rw-read-acquired"></div><span>RW Read</span></div>
<div class="legend-item"><div class="legend-line rw-write-acquired"></div><span>RW Write</span></div>
<div class="legend-item"><div class="legend-line released"></div><span>Released</span></div>
<div class="legend-item"><div class="legend-line notify"></div><span>Notify</span></div>
<div class="legend-item"><div class="legend-line spawn"></div><span>Spawn</span></div>
<div class="legend-item"><div class="legend-line exit"></div><span>Exit</span></div>
<div class="legend-item"><div class="legend-line deadlock"></div><span>Deadlock</span></div>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>Developed by <a href="https://github.com/emivvvvv">Emirhan Tala</a> for the Graduation project of Yeditepe University, Computer Engineering. Special thanks to <a href="https://github.com/ulascan54">Ulaş Can Demirbağ</a> for a base deloxide frontend project and his valuable guidance.</p>
<div class="footer-links">
<a href="https://github.com/emivvvvv/deloxide" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
<a href="#" class="help-toggle">
<i class="fas fa-question-circle"></i>
<span>Help</span>
</a>
</div>
</footer>
</div>
<div id="help-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>How to Use This Visualization</h2>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<h3>Controls</h3>
<ul>
<li><strong>Previous/Next:</strong> Navigate between steps</li>
<li><strong>Play/Stop:</strong> Automatically advance through steps</li>
<li><strong>Faster/Slower:</strong> Adjust animation playback speed</li>
<li><strong>Reset:</strong> Return to the first step</li>
</ul>
<h3>Keyboard Shortcuts</h3>
<ul>
<li><strong>Left Arrow:</strong> Previous step</li>
<li><strong>Right Arrow:</strong> Next step</li>
<li><strong>Up Arrow:</strong> Increase animation speed</li>
<li><strong>Down Arrow:</strong> Decrease animation speed</li>
<li><strong>Space:</strong> Play/Stop animation</li>
<li><strong>R:</strong> Reset to first step</li>
</ul>
<h3>Visualization Legend</h3>
<p>The visualization shows threads and synchronization primitives (Mutex, RwLock, Condvar) as nodes, with different types of relationships between them:</p>
<div class="legend-container">
<div class="legend-item-help">
<div class="legend-color thread"></div>
<span><strong>Thread Nodes:</strong> Shown as circles labeled with the thread ID</span>
</div>
<div class="legend-item-help">
<div class="legend-color mutex"></div>
<span><strong>Mutex:</strong> Mutual exclusion lock - only one thread can acquire it at a time</span>
</div>
<div class="legend-item-help">
<div class="legend-color rwlock"></div>
<span><strong>RwLock:</strong> Reader-writer lock - multiple readers or one writer</span>
</div>
<div class="legend-item-help">
<div class="legend-color condvar"></div>
<span><strong>Condvar:</strong> Condition variable - allows threads to wait for conditions</span>
</div>
<div class="legend-item-help">
<div class="legend-line attempt"></div>
<span><strong>Attempt:</strong> Thread tries to acquire a lock</span>
</div>
<div class="legend-item-help">
<div class="legend-line wait"></div>
<span><strong>Wait (Condvar):</strong> Thread is waiting on a condition</span>
</div>
<div class="legend-item-help">
<div class="legend-line notify"></div>
<span><strong>Notify:</strong> Condvar notified waiter(s)</span>
</div>
<div class="legend-item-help">
<div class="legend-line acquired"></div>
<span><strong>Acquired:</strong> Lock acquired</span>
</div>
<div class="legend-item-help">
<div class="legend-line released"></div>
<span><strong>Released:</strong> Lock released</span>
</div>
<div class="legend-item-help">
<div class="legend-line spawn"></div>
<span><strong>Spawn:</strong> Thread/resource created</span>
</div>
<div class="legend-item-help">
<div class="legend-line exit"></div>
<span><strong>Exit:</strong> Thread/resource dropped</span>
</div>
<div class="legend-item-help">
<div class="legend-line deadlock"></div>
<span><strong>Deadlock:</strong> Circular wait detected</span>
</div>
</div>
<h3>Wait-for Graph</h3>
<p>The wait-for graph shows which threads are waiting for resources held by other threads.
When a cycle appears in this graph, a deadlock has been detected.</p>
</div>
</div>
</div>
<div id="share-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Share This Visualization</h2>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<p>Use the link below to share this visualization with others:</p>
<div class="share-link-container">
<input type="text" id="share-link" readonly>
<button id="copy-link-btn" class="control-btn">
<i class="fas fa-copy"></i>
<span>Copy</span>
</button>
</div>
<div id="copy-status" class="copy-success" style="display: none;">
<i class="fas fa-check-circle"></i>
<span>Link copied to clipboard!</span>
</div>
</div>
</div>
</div>
<div id="upload-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Upload Deadlock Log File</h2>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div id="drop-area">
<p>Drag and drop a single Deloxide log file here to load automatically</p>
<p>or</p>
<input type="file" id="file-input" hidden>
<button id="file-select-btn" class="control-btn">
<i class="fas fa-file-upload"></i>
<span>Select File</span>
</button>
</div>
<div id="upload-list"></div>
<div id="json-preview" style="display: none;">
<h3>Log Content Preview</h3>
<pre id="json-content"></pre>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack-lite/0.1.26/msgpack.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/app.js"></script>
</body>
</html>