Skip to content

Commit

Permalink
Better dealing with screen real estate, added patstat example
Browse files Browse the repository at this point in the history
  • Loading branch information
Rinke Hoekstra committed Dec 21, 2013
1 parent cf7cdb7 commit 61df396
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 78 deletions.
112 changes: 63 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<script src="js/jquery-1.10.2.min.js"></script>
<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>



<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTdZniWL-51geqo9kfGg1YxjtIfgVdkIs&sensor=false">
Expand All @@ -51,57 +51,54 @@

</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PatViz</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><div class="btn btn-primary btn-file navbar-btn" >
Select files to display... <input type="file" id="fileinput" multiple/>
</div></li>
<li class="dropdown">

<div class="btn btn-default dropdown-toggle navbar-btn" id="dropdownMenu1" data-toggle="dropdown">
Example Datasets
<span class="caret"></span>
</div>
<ul class="dropdown-menu" id="demos" role="menu" aria-labelledby="dropdownMenu1">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" id='yearcontrol'>
<li>
<span id="decrease" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-left"></span></span>
</li>
<li><span id="year"></span></li>
<li><span id="increase" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-right"></span></span></li>
<li><div class='btn btn-success disabled navbar-btn' id='play'>Play</div></li>
<li><div class='btn btn-danger disabled navbar-btn' id='stop'>Stop</div></li>
<!-- Button trigger modal -->
<li><div class="btn btn-default navbar-btn" data-toggle="modal" data-target="#myModal">
Legend
</div></li>

</ul>
</div><!-- /.navbar-collapse -->
</nav>


<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='panel panel-default'>
<div class='panel-heading'>
Controls
</div>
<div class='panel-body'>
<div id="selector" class="form-group">
<!-- <label for="fileinput">Select files</label> -->
<span class="btn btn-lg btn-primary btn-file">
Select files to display... <input type="file" id="fileinput" multiple/>
</span>
<span id="demos">
</span>
<!-- <label for="datasetSelector">Select Dataset</label>
<select id="datasetSelector" name="dataset" class="form-control">
<option selected value="none">Please select a dataset</option>
<option value="PAT">USPTO (without edges)</option>
<option value="Z">USPTO (Z-tested)</option>
<option value="patstat">PATSTAT</option>
</select> -->
</div>
<!-- <div id="slider"></div> -->
<div id="yearcontrol">
<span id="decrease" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-chevron-left"></span></span>
<span id="year"></span>
<span id="increase" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-chevron-right"></span></span>
<div class='btn btn-lg btn-success disabled' id='play'>Play</div>
<div class='btn btn-lg btn-danger disabled' id='stop'>Stop</div>
</div>
</div>
</div>


</div>
<div class='col-md-3'>
<div class='panel panel-default'>
<div class='panel-heading'>
Legend
</div>
<div id='legendpane' class='panel-body'>
</div>
</div>
</div>
<div class='col-md-3'>
<div class='col-md-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
Information
</div>
<div id='infopane' class='panel-body'>
<p>Hover over a circle, and information will be shown here...</p>
</div>
Expand Down Expand Up @@ -148,7 +145,24 @@




<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Legend</h4>
</div>
<div class="modal-body" id="legendpane">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>

</html>
71 changes: 42 additions & 29 deletions js/patents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ var currentyear;

var years = [];

var demos = {uspto: {description: 'USPTO CuInSe2', start: 1974, end: 2008, url: 'http://semweb.cs.vu.nl:/patents2/ztest/', prefix: 'z' }}
var demos = {'CPC is Y02E10/541: CuInSe2 material PV cells': [
{description: 'USPTO', start: 1974, end: 2008, url: 'http://semweb.cs.vu.nl/patents2/ztest/', prefix: 'z' },
{description: 'PatStat', start: 1974, end: 2008, url:'http://semweb.cs.vu.nl/patents2/patstat/', prefix: 'pat'}
]
};



Expand Down Expand Up @@ -75,23 +79,36 @@ $(function () {
});


for (d in demos){
console.log(d);
demo = demos[d];
for (s in demos){
console.log(s);
var demoset = demos[s];

var demoset_header = $('<li role="presentation" class="dropdown-header">'+ s +'</li>');

$('#demos').append(demoset_header);

for (d in demoset){
console.log(d);
demo = demoset[d];

var demo_button = $('<div>'+demo.description+'</div>');
demo_button.addClass('btn btn-info btn-lg');
// <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
var demo_button = $('<a role="menuitem" tabindex="-1" href="#">'+demo.description+'</a>');

demo_button.on('click', function(e){
// Reset the years array
years = [];
// Reset the file dictionary
filedict = {};
demo_button.on('click', function(e){
// Reset the years array
years = [];
// Reset the file dictionary
filedict = {};

get_from_server(demo,demo.start);
});
get_from_server(demo,demo.start);
});

var demo_li = $('<li role="presentation"></li>');
demo_li.append(demo_button);

$('#demos').append(demo_li);
}

$('#demos').append(demo_button);
}

console.log("Initializing...");
Expand Down Expand Up @@ -295,9 +312,10 @@ function initialize_nodes(year, data){

var color = csv[row][5].toLowerCase();
var title = csv[row][3];
var descriptionarray = csv[row][4].split(";")
var description = descriptionarray.join("<br/>");
// var descriptionarray = csv[row][4].split(";")
// var description = descriptionarray.join("<br/>");

var description = csv[row][4];

var n;
var N = parseFloat(csv[row][6]);
Expand Down Expand Up @@ -419,22 +437,17 @@ function getRadius(size,zoom){
}

function showDetails(node) {
var table = $('<table></table>');
table.addClass('table');
table.addClass('table-striped');

table.append('<tr><th>Name</th><td>'+node.title.split(";").join("<br/>")+'</td></tr>');
table.append('<tr><th>Description</th><td>'+node.description+'</td></tr>');
$('#infopane').html(table);
var name = $('<span><strong>Name</strong>: '+node.title.split(";").join(",")+"</span>");
var description = $('<span>&nbsp; <strong>Description</strong>: '+node.description.split(";").join(',')+"</span>");
$('#infopane').html(name);
$('#infopane').append(description);
}

function showEdgeDetails(edge) {
var table = $('<table></table>');
table.addClass('table');
table.addClass('table-striped');

table.append('<tr><th>Edge</th><td>'+edge.label+'</td></tr>');
table.append('<tr><th>Weight</th><td>'+edge.weight+'</td></tr>');
var name = $('<span><strong>Name</strong>: '+edge.label+"</span>");
var description = $('<span>&nbsp; <strong>Weight</strong>: '+edge.weight+"</span>");
$('#infopane').html(name);
$('#infopane').append(description);

$('#infopane').html(table);
}
Expand Down

0 comments on commit 61df396

Please sign in to comment.