Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

Commit

Permalink
feat(search): UI updates for search summary views.
Browse files Browse the repository at this point in the history 
- Creates reusable directive.
- Adds Project/Primary Site counts/tables.

Closes #687
  • Loading branch information
Matthew Schranz committed Apr 21, 2015
1 parent 19008f9 commit f5e29d1
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 92 deletions.
1 change: 1 addition & 0 deletions app/scripts/search/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ module ngApp.search {
angular
.module("ngApp.search", [
"search.controller",
"search.directives",
"ui.router.state"
])
.config(searchConfig);
Expand Down
27 changes: 27 additions & 0 deletions app/scripts/search/search.directives.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
module ngApp.search.directives {

function SummaryTable(FacetService): ng.IDirective {
return {
restrict: "AE",
templateUrl: "search/templates/search.summary.table.html",
scope: {
facet: "@",
buckets: "=",
title: "@",
id: "@"
},
controller: function($element, $scope) {
$scope.FacetService = FacetService;

$scope.toggleTableExpand = function() {
$scope.expanded = !$scope.expanded;
};
},
replace: true
}
}

angular
.module("search.directives", ["facets.services"])
.directive("summaryTable", SummaryTable);
}
126 changes: 34 additions & 92 deletions app/scripts/search/templates/search.summary.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="panel panel-default">
<div class="panel panel-default summary-results">
<div class="panel-heading clearfix">
<h3 class="panel-title">Query Result Summary</h3>
</div>
Expand All @@ -10,12 +10,20 @@ <h3 class="panel-title">Query Result Summary</h3>
</tr>
<tr>
<th scope="row" data-translate>File Size</th>
<td>{{ sc.summary.fs.value | size}}</td>
<td>{{ sc.summary.fs.value | size }}</td>
</tr>
<tr>
<th scope="row"># <span data-translate>of Participants</span></th>
<td>{{ sc.participants.pagination.total | number }}</td>
</tr>
<tr>
<th scope="row"># <span data-translate>of Projects</span></th>
<td>{{ sc.summary.participants['participants.project.project_id'].buckets.length | number }}</td>
</tr>
<tr>
<th scope="row"># <span data-translate>of Primary Sites</span></th>
<td>{{ sc.summary.participants['participants.project.primary_site'].buckets.length | number }}</td>
</tr>
</tbody>
</table>
</div>
Expand All @@ -29,98 +37,32 @@ <h3>

<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Data Type</h4>
</div>
<table id="summary-table-dt" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Data Type</th>
<th># Files</th>
<th>
File Size
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat='type in sc.summary.data_type.buckets'>
<th scope="row" data-translate>{{type.key | humanify: true:true }}</th>
<td ng-click="sc.FacetService.addTerm('files.data_type', type.key)" class="text-right">
<a href="">{{ type.doc_count | number }}</a></td>
<td class="text-right">{{ type.file_size.value | size}}</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Experimental Strategy</h4>
</div>
<table id="summary-table-es" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Experimental Strategy</th>
<th># Files</th>
<th>File Size</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat='type in sc.summary.experimental_strategy.buckets'>
<th scope="row" data-translate>{{type.key | humanify: true:true }}</th>
<td ng-click="sc.FacetService.addTerm('files.experimental_strategy', type.key)" class="text-right" class="text-right">
<a href="">{{ type.doc_count | number }}
</a></td>
<td class="text-right">{{ type.file_size.value | size}}</td>
</tr>
</tbody>
</table>
</div>
<summary-table facet="participants.project.project_id"
title="Project"
buckets="sc.summary.participants['participants.project.project_id'].buckets"
id="summary-table-pid"></summary-table>
<summary-table facet="files.data_type"
title="Data Type"
buckets="sc.summary.data_type.buckets"
id="summary-table-dt"></summary-table>
<summary-table facet="files.experimental_strategy"
title="Experimental Strategy"
id="summary-table-es"
buckets="sc.summary.experimental_strategy.buckets"></summary-table>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Data Format</h4>
</div>
<table id="summary-table-df" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Data Format</th>
<th># Files</th>
<th>File Size</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat='type in sc.summary.data_format.buckets'>
<th scope="row" data-translate>{{type.key | humanify: true:true }}</th>
<td ng-click="sc.FacetService.addTerm('files.data_format', type.key)" class="text-right">
<a href="">{{ type.doc_count | number }}</a></td>
<td class="text-right">{{ type.file_size.value | size}}</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Data Access</h4>
</div>
<table id="summary-table-da" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Data Access</th>
<th># Files</th>
<th>File Size</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat='type in sc.summary.access.buckets'>
<th scope="row" data-translate>{{type.key | humanify: true:true }}</th>
<td ng-click="sc.FacetService.addTerm('files.access', type.key)" class="text-right"><a href="">{{ type.doc_count | number }}</a></td>
<td class="text-right">{{ type.file_size.value | size}}</td>
</tr>
</tbody>
</table>
</div>
<summary-table facet="participants.project.primary_site"
title="Primary Site"
buckets="sc.summary.participants['participants.project.primary_site'].buckets"
id="summary-table-ps"></summary-table>
<summary-table facet="files.data_format"
title="Data Format"
id="summary-table-df"
buckets="sc.summary.data_format.buckets"></summary-table>
<summary-table facet="files.access"
title="Data Access"
id="summary-table-da"
buckets="sc.summary.access.buckets"></summary-table>
</div>
</div>

34 changes: 34 additions & 0 deletions app/scripts/search/templates/search.summary.table.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">{{ title | translate }}</h4>
</div>
<table id="{{ id }}" class="table table-striped table-hover table-bordered"
data-ng-class="{ 'summary-table': buckets.length > 5 }">
<thead>
<tr>
<th>{{ title | translate }}</th>
<th># <span data-translate>Files</span></th>
<th data-translate>File Size</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat='type in buckets'
data-ng-hide="!expanded && $index > 5 && buckets.length > 5">
<th scope="row">{{type.key | translate | humanify: true:true }}</th>
<td data-ng-click="FacetService.addTerm(facet, type.key)" class="text-right">
<a href="">{{ type.doc_count | number }}</a>
</td>
<td class="text-right">{{ type.file_size.value | size}}</td>
</tr>
</tbody>
</table>
<a class="summary-toggle" data-ng-click="toggleTableExpand()"
data-ng-if="buckets.length > 5">
<span data-ng-show="!expanded">
<span data-translate>Show</span>
{{ buckets.length - 5}}
<span data-translate>more</span>
</span>
<span data-ng-show="expanded" data-translate>Show Less</span>
</a>
</div>
11 changes: 11 additions & 0 deletions app/styles/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,17 @@ th, td {
white-space: nowrap;
}

.summary-results {
width: 60%;
}

.summary-table {
border-bottom: 1px solid #c4c4c4 !important;
}

.summary-toggle {
padding: 5px;
}

/* bootcard override */
.panel {
Expand Down

0 comments on commit f5e29d1

Please sign in to comment.