graph-algorithm-visualizer/index.html at main · ozdogrumerve/graph-algorithm-visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph Algorithm Visualizer</title>
    <link rel="icon" href="assets/icons/neulogo.png">

    <!-- CSS -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/theme.css">

    <!-- vis-network graph library -->
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>

<body>

<header class="header">
    <h1>Graph Algorithm Visualizer</h1>
</header>

<div class="main-container">

    <!-- Sidebar Controls -->
    <aside class="sidebar">

        <h3>Graph Controls</h3>

        <button id="addNodeBtn">Add Node</button>
        <button id="deleteNodeBtn" class="danger-btn">Delete Node</button>
        <button id="addEdgeBtn">Add Edge</button>
        <button id="deleteEdgeBtn" class="danger-btn">Delete Edge</button>
        <button id="clearGraphBtn">Clear Graph</button>

        <hr>

        <h3>Import / Export</h3>

        <button id="importGraphBtn">Import Graph (JSON)</button>
        <button id="downloadSampleJson">Download Sample JSON</button>

        <button id="exportGraphBtn">Export Graph (JSON)</button>
        <button id="exportImageBtn">Export Graph (PNG)</button>

        <input type="file" id="importFileInput" accept=".json" style="display:none">

        <hr>

        <h3>Algorithm</h3>

        <select id="algorithmSelect">
            <option value="dijkstra">Dijkstra</option>
            <option value="bellmanFord">Bellman-Ford</option>
            <option value="prim">Prim</option>
            <option value="kruskal">Kruskal</option>
        </select>

        <hr>

    </aside>


    <!-- Graph Visualization Area -->
    <section class="graph-area">
        <div class="top-toolbar">
            <button id="startBtn">Start</button>
            <button id="nextStepBtn">Next Step</button>
            <button id="prevStepBtn">Back Step</button>
            <button id="pauseBtn">Pause</button>
            <button id="resetBtn">Reset</button>

            <hr>

            <h3>Speed</h3>

            <input type="range" id="speedSlider" min="0.25" max="2" step="0.25" value="1">
            <span id="speedValue">1x</span>

            <button id="startNodeHint">Select Start Node</button>
            <button id="targetNodeHint">Select Target Node</button>

        </div>

        <!-- vis-network graph container -->
        <div id="graphCanvas"></div>

    </section>


    <!-- Algorithm Log Panel -->
    <aside class="log-panel">

        <h3>Algorithm Steps</h3>

        <ul id="logList"></ul>

    </aside>

</div>

<!-- JS Modules -->
<script type="module" src="js/app.js"></script>

</body>
</html>