2015-06-23 05:15:34 +03:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > coz plot< / title >
2016-12-10 00:51:30 +03:00
< link rel = "stylesheet" href = "lib/bootstrap/bootstrap.css" >
< link rel = "stylesheet" type = "text/css" href = "lib/font-awesome/css/font-awesome.css" >
2019-08-18 18:52:41 +03:00
< link rel = "stylesheet" type = "text/css" href = "css/ui.css" >
< link rel = "stylesheet" type = "text/css" href = "css/plot.css" >
2015-06-23 05:15:34 +03:00
< / head >
< body >
< div class = "container-fluid" >
< div class = "row" >
< div id = "sidebar" class = "col-sm-3 col-md-3 col-lg-2 sidebar" >
2016-10-06 18:44:49 +03:00
2015-06-24 05:08:47 +03:00
< h3 class = "" > Causal Profile< / h3 >
< button type = "button" id = "load-profile-btn" class = "btn btn-primary btn-block" data-toggle = "modal" data-target = "#load-profile-dlg" >
< i class = "fa fa-folder-open" > < / i > Load a Profile
< / button >
2016-10-06 18:44:49 +03:00
2015-06-23 17:23:10 +03:00
< div id = "legend" >
< h4 > Progress Points< / h4 >
< p class = "legend-entry noseries" > None< / p >
< / div > <!-- /legend -->
2016-10-06 18:44:49 +03:00
2015-06-23 17:23:10 +03:00
< div id = "sortby" >
< h4 id = "sortby_label" > Sort By< / h4 >
< select id = "sortby_field" class = "form-control" disabled aria-labelledby = "sortby_label" >
2015-07-02 19:30:23 +03:00
< option value = "alphabetical" > Alphabetical< / option >
< option value = "impact" selected > Impact< / option >
< option value = "max_speedup" > Max Speedup< / option >
< option value = "min_speedup" > Min Speedup< / option >
2015-06-23 17:23:10 +03:00
< / select >
< / div > <!-- /sortby -->
2016-10-06 18:44:49 +03:00
2015-06-23 20:12:16 +03:00
< div id = "minpoints" >
2015-06-24 05:08:47 +03:00
< h4 id = "minpoints_label" > Minimum Points< / h4 >
< input type = "range" id = "minpoints_field" min = "0" max = "20" step = "1" value = "10" list = "ticks" aria-labeledby = "minpoints_label" >
< datalist id = "ticks" >
< option value = "0" >
< option value = "5" >
< option value = "10" >
< option value = "15" >
< option value = "20" >
< / datalist >
< p id = "minpoints_display" class = "text-center" > 10< / p >
2015-06-23 20:12:16 +03:00
< / div > <!-- /minpoint -->
2016-10-06 18:44:49 +03:00
2015-06-23 05:15:34 +03:00
< / div > <!-- /sidebar -->
2016-10-06 18:44:49 +03:00
2015-06-23 05:15:34 +03:00
< div class = "col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2" >
2016-10-06 18:44:49 +03:00
< div class = "row" >
< div id = "warning-area" class = "col-md-12" > < / div >
< / div >
< div class = "row" >
2018-10-19 19:37:00 +03:00
< div id = "plot-area" class = "col-md-12" >
< div id = "plot-message" >
< h1 > Getting Started< / h1 >
< p >
Welcome to the causal profile viewer. To make use of this profile viewer you'll first need a causal profile. You will need to use the < code > coz< / code > program to collect a causal profile from your program. For this to work, you will need to add at least one < i > progress point< / i > to your program, and then build it with debug information. Next, run your program with < code > coz< / code > :
< / p >
< pre >
$ coz run --- ./myprogram arg1 arg2
< / pre >
< p >
Next, you will need to load your profile into this viewer. Click the < kbd > Load Profile< / kbd > button on this page and browse to your file. There are some sample profiles available as well if you want to see what a causal profile looks like.
< / p >
< / div >
< / div >
2016-10-06 18:44:49 +03:00
< / div >
2015-06-23 05:15:34 +03:00
< / div > <!-- /main content -->
2016-10-06 18:44:49 +03:00
2015-06-23 05:15:34 +03:00
< / div > <!-- /row -->
< / div > <!-- /container - fluid -->
2016-10-06 18:44:49 +03:00
2015-06-23 05:15:34 +03:00
<!-- File open dialog (hidden) -->
< div class = "modal fade" id = "load-profile-dlg" tabindex = "-1" role = "dialog" aria-labelledby = "load-profile-dlg-title" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< h4 class = "modal-title" id = "load-profile-dlg-title" > Select a Causal Profile< / h4 >
< / div > <!-- /modal - header -->
< div class = "modal-body" >
2015-06-24 05:08:47 +03:00
< div class = "text-center" >
< label for = "load-profile-form" > Load Profile< / label >
< form id = "load-profile-form" >
< input type = "file" id = "load-profile-file" accept = ".coz" style = "display: none" / >
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-file-text-o" > < / i > < / span >
< input type = "text" class = "form-control" id = "load-profile-filename" disabled placeholder = "Select a profile" >
< span class = "input-group-btn" >
< button class = "browse btn btn-primary" id = "load-profile-browse-btn" type = "button" >
< i class = "fa fa-search" > < / i >
Browse
< / button >
< / span >
< / div > <!-- /input - group -->
< / form >
< br >
< label for = "samples" > Sample Profiles< / label >
< div id = "samples" > < / div >
< / div > <!-- /text - center -->
2015-06-23 05:15:34 +03:00
< / div > <!-- /modal - body -->
< div class = "modal-footer" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Cancel< / button >
< button id = "load-profile-open-btn" type = "button" data-dismiss = "modal" class = "btn btn-primary disabled" > Open< / button >
< / div > <!-- /modal - footer -->
< / div > <!-- /modal - content -->
< / div > <!-- /modal - dialog -->
< / div > <!-- /modal -->
2016-12-10 00:51:30 +03:00
< script src = "lib/jquery-3.1.1.js" > < / script >
< script src = "lib/bootstrap/bootstrap.js" > < / script >
< script src = "lib/d3/d3.js" > < / script >
< script src = "lib/d3/d3-tip.js" > < / script >
< script src = "lib/science/science.v1.js" > < / script >
2016-10-06 18:44:49 +03:00
2015-06-24 19:07:50 +03:00
<!-- Causal profile loading and plotting code -->
2019-08-18 18:52:41 +03:00
< script src = "js/profile.js" > < / script >
2016-10-06 18:44:49 +03:00
2015-06-24 19:07:50 +03:00
<!-- The UI code -->
2019-08-18 18:52:41 +03:00
< script src = "js/ui.js" > < / script >
2015-06-23 05:15:34 +03:00
< / body >
< / html >
