Skip to content

Commit

Permalink
implements network visualizatio parameters
Browse files Browse the repository at this point in the history 
closes #3
useful for #34, #71
  • Loading branch information
@luca
luca committed Dec 2, 2015
1 parent b1af782 commit 8a44aa1
Show file tree
Hide file tree
Showing 8 changed files with 466 additions and 74 deletions.
46 changes: 45 additions & 1 deletion static/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,8 +316,52 @@ <h4 class="box-title">Interactive tutorial </h4>
</div>
</div>
</div>
<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="params-button"><i class="fa fa-cog"></i></button>
<div class="popover-content popover-params pull-right hide" id="network-params">
<div class="network-params">
<p>Change the visualization parameters and press 'Show' to update the network display.</p>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Max age (days)</label>
</div>
<div class="col-sm-6"><input type="text" class="form-control max-age-field"></div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Un-directed</label>
</div>
<div class="col-sm-6">
<select class="form-control unidirected-field">
<option value="">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Color by</label>
</div>
<div class="col-sm-6">
<select class="form-control color-nodes-field">
<option value="">partition</option>
<option value="degree">degree</option>
<option value="betweenness">betweenness</option>
</select>
</div>
</div>
<p class="input-group input-group-sm">
<button class="btn btn-gray btn-flat apply-params-btn" type="button">Show</button> or <a class="apply-params-clear-btn" href="#">reset view</a>
</p>
</div>
</div>

<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="filter-button"><i class="fa fa-filter"></i></button>
<div class="popover-content popover-filter pull-right hide" id="network-filter"></div>
<div class="popover-content popover-filter pull-right hide">
<div class="network-filter-cnt">
<div id="network-filter"></div>
<a class="filter-clear-btn" href="#">show all</a>
</div>
</div>
</div>
<div id="network"></div>
<div id="node-marker"></div>
Expand Down
47 changes: 46 additions & 1 deletion static/catalyst.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,53 @@ <h1>
<button class="btn btn-gray btn-flat user-search-btn" type="button">Show</button>
</span>
</div><a class="user-search-clear-btn" href="#">Show all</a></div></div>

<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="params-button"><i class="fa fa-cog"></i></button>
<div class="popover-content popover-params pull-right hide" id="network-params">
<div class="network-params">
<p>Change the visualization parameters and press 'Show' to update the network display.</p>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Max age (days)</label>
</div>
<div class="col-sm-6"><input type="text" class="form-control max-age-field"></div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Un-directed</label>
</div>
<div class="col-sm-6">
<select class="form-control unidirected-field">
<option value="">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Color by</label>
</div>
<div class="col-sm-6">
<select class="form-control color-nodes-field">
<option value="">partition</option>
<option value="degree">degree</option>
<option value="betweenness">betweenness</option>
</select>
</div>
</div>
<p class="input-group input-group-sm">
<button class="btn btn-gray btn-flat apply-params-btn" type="button">Show</button> or <a class="apply-params-clear-btn" href="#">reset view</a>
</p>
</div>
</div>

<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="filter-button"><i class="fa fa-filter"></i></button>
<div class="popover-content pull-right hide" id="network-filter"></div>
<div class="popover-content popover-filter pull-right hide">
<div class="network-filter-cnt">
<div id="network-filter"></div>
<a class="filter-clear-btn" href="#">show all</a>
</div>
</div>
</div>
<div id="network"></div>
<div id="node-marker"></div>
Expand Down
70 changes: 61 additions & 9 deletions static/catalyst_embed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,9 +281,9 @@
.edgesense .filter-btn {
width:19px;
height:19px;
display:block;
display:inline-block;
padding:0;
margin-bottom:5px;
margin:3px;
color:#fefefe;
border:0;
}
Expand Down Expand Up @@ -360,12 +360,12 @@
margin-top:8px;
}
.filter-btn {
width: 19px;
height: 19px;
display: block;
padding: 0;
margin-bottom: 5px;
color: #fefefe;
width:19px;
height:19px;
display:inline-block;
padding:0;
margin:3px;
color:#fefefe;
border:0;
}
.edgesense-btn.btn-danger {
Expand Down Expand Up @@ -476,6 +476,15 @@
color: rgb(243, 53, 18) !important;
cursor:pointer;
}

.network-params .row {
margin-bottom:4px;
}

#network-filter {
width:108px !important;
margin:0 auto;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -503,8 +512,51 @@
</span>
</div><a class="user-search-clear-btn" href="#">Show all</a></div>
</div>
<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="params-button"><i class="fa fa-cog"></i></button>
<div class="popover-content popover-params pull-right hide" id="network-params">
<div class="network-params">
<p>Change the visualization parameters and press 'Show' to update the network display.</p>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Max age (days)</label>
</div>
<div class="col-sm-6"><input type="text" class="form-control max-age-field"></div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Un-directed</label>
</div>
<div class="col-sm-6">
<select class="form-control unidirected-field">
<option value="">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Color by</label>
</div>
<div class="col-sm-6">
<select class="form-control color-nodes-field">
<option value="">partition</option>
<option value="degree">degree</option>
<option value="betweenness">betweenness</option>
</select>
</div>
</div>
<p class="input-group input-group-sm">
<button class="btn btn-gray btn-flat apply-params-btn" type="button">Show</button> or <a class="apply-params-clear-btn" href="#">reset view</a>
</p>
</div>
</div>
<button class="edgesense-btn btn-gray popover-toggle" data-toggle="popover" id="filter-button"><i class="fa fa-filter"></i></button>
<div class="popover-content hide" id="network-filter"></div>
<div class="popover-content popover-filter pull-right hide">
<div class="network-filter-cnt">
<div id="network-filter"></div>
<a class="filter-clear-btn" href="#">show all</a>
</div>
</div>
</div>
</div>
<div id="network"></div>
Expand Down
70 changes: 61 additions & 9 deletions static/catalyst_embed_network.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,9 +281,9 @@
.edgesense .filter-btn {
width:19px;
height:19px;
display:block;
display:inline-block;
padding:0;
margin-bottom:5px;
margin:3px;
color:#fefefe;
border:0;
}
Expand Down Expand Up @@ -360,12 +360,12 @@
margin-top:8px;
}
.filter-btn {
width: 19px;
height: 19px;
display: block;
padding: 0;
margin-bottom: 5px;
color: #fefefe;
width:19px;
height:19px;
display:inline-block;
padding:0;
margin:3px;
color:#fefefe;
border:0;
}
.edgesense-btn.btn-danger {
Expand Down Expand Up @@ -476,6 +476,15 @@
color: rgb(243, 53, 18) !important;
cursor:pointer;
}

.network-params .row {
margin-bottom:4px;
}

#network-filter {
width:108px !important;
margin:0 auto;
}
</style>
</head>
<body>
Expand All @@ -500,8 +509,51 @@
</span>
</div><a class="user-search-clear-btn" href="#">Show all</a></div>
</div>
<button class="btn btn-gray btn-sm popover-toggle" data-toggle="popover" id="params-button"><i class="fa fa-cog"></i></button>
<div class="popover-content popover-params pull-right hide" id="network-params">
<div class="network-params">
<p>Change the visualization parameters and press 'Show' to update the network display.</p>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Max age (days)</label>
</div>
<div class="col-sm-6"><input type="text" class="form-control max-age-field"></div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Un-directed</label>
</div>
<div class="col-sm-6">
<select class="form-control unidirected-field">
<option value="">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Color by</label>
</div>
<div class="col-sm-6">
<select class="form-control color-nodes-field">
<option value="">partition</option>
<option value="degree">degree</option>
<option value="betweenness">betweenness</option>
</select>
</div>
</div>
<p class="input-group input-group-sm">
<button class="btn btn-gray btn-flat apply-params-btn" type="button">Show</button> or <a class="apply-params-clear-btn" href="#">reset view</a>
</p>
</div>
</div>
<button class="edgesense-btn btn-gray popover-toggle" data-toggle="popover" id="filter-button"><i class="fa fa-filter"></i></button>
<div class="popover-content hide" id="network-filter"></div>
<div class="popover-content popover-filter pull-right hide">
<div class="network-filter-cnt">
<div id="network-filter"></div>
<a class="filter-clear-btn" href="#">show all</a>
</div>
</div>
</div>
</div>
<div id="network"></div>
Expand Down
13 changes: 11 additions & 2 deletions static/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@
.filter-btn {
width:19px;
height:19px;
display:block;
display:inline-block;
padding:0;
margin-bottom:5px;
margin:3px;
color:#fefefe;
}
.user-search {
Expand Down Expand Up @@ -310,4 +310,13 @@ body {
margin-right: 10px;
color: rgb(243, 53, 18) !important;
cursor:pointer;
}

.network-params .row {
margin-bottom:4px;
}

#network-filter {
width:108px !important;
margin:0 auto;
}
Loading

0 comments on commit 8a44aa1

Please sign in to comment.