<!DOCTYPE html> <html> <head> <title>Reactive Search</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- inject:css --> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="/bower_components/bootstrap-select/dist/css/bootstrap-select.css"> <link rel="stylesheet" href="/css/style.css"> <!-- endinject --> </head> <body> <div class="container"> <!-- busy spinner --> <div class="page-header"> <h1><img id="spinner" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1> </div> <!-- query input --> <div id="input" class="form-horizontal"> <div class="form-group"> <label for="keywordsToSearch" class="col-md-2 control-label">Keywords</label> <div class="col-md-10"> <select id="keywordsToSearch" class="form-control" multiple="multiple" data-max-options="4" data-live-search="data-live-search"></select> </div> </div> <div class="form-group"> <label for="minScore" class="col-md-2 control-label">Minimum score</label> <div class="col-md-10"> <input class="form-control" type="number" step="any" value="0.25" id="minScore"> </div> </div> <div class="form-group"> <label for="hintSteps" class="col-md-2 control-label">Hint steps</label> <div class="col-md-10"> <input class="form-control" type="number" value="20" id="hintSteps"> </div> </div> <div class="form-group"> <label for="maxResults" class="col-md-2 control-label">Max results</label> <div class="col-md-10"> <input class="form-control" type="number" value="100" id="maxResults"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button class="btn btn-primary" id="searchKeywords" type="button" disabled="disabled"> <span class="glyphicon glyphicon-search"></span> Search </button> </div> </div> </div> <!-- options dialog --> <div class="modal fade" id="optionsDialog" tabindex="-1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"><big>Visualization Options</big></div> <div class="modal-body"> <div class="checkbox"> <label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label> </div> <div class="checkbox"> <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- learn keyword dialog --> <div class="modal fade" id="learnDialog" tabindex="-1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"><big>Learn Keyword</big></div> <div class="modal-body"> <div class="form-group"> <label for="keyword" class="control-label">Learn keyword as</label> <input class="form-control" type="text" id="keywordToLearn"> </div> <div class="alert alert-danger" id="learnError" style="display: none;">Unable to learn keyword</div> </div> <div class="modal-footer"> <div class="btn-group"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success" id="learnKeyword" disabled="disabled">Learn</button> </div> </div> </div> </div> </div> <!-- forget keyword dialog --> <div class="modal fade" id="forgetDialog" tabindex="-1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"><big>Forget Keyword</big></div> <div class="modal-body"> <div class="form-group"> <label for="keywordToForget">Keyword to forget</label> <select id="keywordToForget" class="form-control"></select> </div> <div class="alert alert-danger" id="forgetError" style="display: none;">Unable to forget keyword</div> </div> <div class="modal-footer"> <div class="btn-group"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger" id="forgetKeyword" disabled="disabled">Forget</button> </div> </div> </div> </div> </div> <!-- query output --> <div id="output" style="display: none;"> <!-- semantic tweaker --> <div class="panel panel-default unselectable"> <div class="panel-heading"> <big>Semantic tweaks to <span id="query" class="text-primary"></span></big> <div class="btn-group pull-right"> <button class="btn btn-xs btn-success" data-toggle="modal" data-target="#learnDialog">Learn</button> <button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#forgetDialog">Forget</button> <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#optionsDialog">Options</button> </div> </div> <div style="padding: 10px;"> <canvas id="grapher" width="800" height="550"></canvas> </div> </div> <!-- result listing --> <div class="panel panel-default"> <div class="panel-heading"><big>Query results (<span id="count" class="text-primary"></span>)</big></div> <div style="padding: 10px;"> <script id="template" type="text/x-handlers-template"> {{#if results}} <table class="table table-striped table-condensed"> <thead> <tr> <th>#</th> <th>Name</th> <th>Score</th> </tr> </thead> {{#each results}} <tr> <td>{{@index}}</td> <td><a href="{{url}}">{{name}}</a></td> <td>{{score}}</td> </tr> {{/each}} </table> {{/if}} </script> <div id="results"></div> </div> </div> </div> </div> <!-- inject:js --> <script src="/bower_components/underscore/underscore.js"></script> <script src="/bower_components/handlebars/handlebars.js"></script> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/fabric/dist/fabric.js"></script> <script src="/bower_components/tinycolor/tinycolor.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script> <script src="/js/application.js"></script> <script src="/js/grapher.js"></script> <!-- endinject --> </body> </html>