frontend/src/views/web/challenge/leaderboard.html
<div class="loader-container card-loader-container" id="loader" ng-show="challenge.isExistLoader" class="fade">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<section class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<div class="row margin-bottom-cancel">
<div class="col s12">
<h5 class="w-300">Leaderboard</h5>
</div>
</div>
<div class="row" ng-if="challenge.page.leaderboard_description.length">
<div class="col s12 md-body-1 fs-16 w-300" mathjax-bind="challenge.page.leaderboard_description"></div>
</div>
<div class="row">
<div ng-click="challenge.refreshSubmissionData()" class="pointer update-page"
ng-if="challenge.showLeaderboardUpdate">
<span class="text-white">Page is outdated, click to update <i
class="fa fa-refresh text-highlight"></i></span>
</div>
</div>
<div class="row">
<div class="col xs12 s6">
<span>
<md-select ng-model="challenge.phaseName" placeholder="Select Phase" class="rm-margin">
<md-option ui-sref="web.challenge-main.challenge-page.phase-leaderboard({phaseSplitId:key.id})"
value="{{key.id}}" ng-repeat="key in challenge.phaseSplits" ng-show="{{key.visibility}}">
<span class="fs-16 w-300">Phase:
</span>{{key.challenge_phase_name}}, <span class="fs-16 w-300">Split: </span>
{{key.dataset_split_name}} <span class="new badge orange-background"
data-badge-caption="Private" ng-if="key.showPrivate"></span></md-option>
<md-option value="leaderboard is private" ng-if="challenge.isChallengeLeaderboardPrivate">Leaderboard is private</md-option>
</md-select>
</span>
</div>
</div>
<div class="row" ng-if="challenge.isMultiMetricLeaderboardEnabled[challenge.phaseSplitId]">
<div class="col xs12 s6">
<span>
<md-select ng-model="challenge.orderLeaderboardBy" placeholder="Order by metric" class="rm-margin">
<md-option value="{{key}}" ui-sref="web.challenge-main.challenge-page.phase-metric-leaderboard({phaseSplitId:challenge.phaseSplitId, metric:challenge.encodeMetricURI(key)})"
ng-repeat="key in challenge.phaseSplitLeaderboardSchema[challenge.phaseSplitId].labels">
<span class="fs-16 w-300">{{key}}</span>
</md-select>
</span>
</div>
</div>
<div class="row">
<div class="horizontal-scroll">
<div class="col s12">
<div ng-if="challenge.isResult && challenge.leaderboard.length &&
!challenge.leaderboard.error" class="row">
<div class="result-wrn col l2 m4 s12"><span id="baseline-badge-desc"
class="new badge orange-background fs-16 w-300" data-badge-caption="B"></span>
<span class="fs-16 w-300"> - Baseline</span>
</div>
<div class="result-wrn col l2 m4 s12">
<b><span class="orange-text">*</span></b>
<span class="fs-16 w-300"> - Private</span>
</div>
<div class="result-wrn col l2 m4 s12"><span id="baseline-badge-desc"
class="new badge green-background fs-16 w-300" data-badge-caption="V"></span>
<span class="fs-16 w-300"> - Verified</span>
</div>
<div class="align-right result-wrn col l6 m6 s12" ng-if="challenge.isChallengeHost && challenge.showLeaderboardToggle">
<input ng-checked="challenge.getAllEntries" type="checkbox" id="getAllEntries" ng-model="challenge.getAllEntries"
ng-change="challenge.toggleLeaderboard(challenge.getAllEntries)" />
<label for="getAllEntries"></label>
<span class="fs-16 w-300 complete-leaderboard"> {{ challenge.getAllEntriesTestOption }}</span>
</div>
<md-select name="leaderboarddropDownmenu" class="right" ng-model="challenge.chosenMetrics" placeholder="Visible Metrics" class="rm-margin" md-on-open="challenge.openLeaderboardDropdown()" md-on-close="challenge.openLeaderboardDropdown()" multiple>
<md-option value="{{i}}" ng-repeat="(i, key) in challenge.leaderboard[0].leaderboard__schema.labels">
<span ng-if="!challenge.leaderboardDropdown" class="fs-16 w-300">Visible Metrics</span>
<span ng-if="challenge.leaderboardDropdown" class="fs-16 w-300">{{key}}</span>
</md-option>
</md-select>
</div>
</div>
<table ng-if="challenge.isResult && challenge.leaderboard.length" ng-attr-id="leaderboard_table" ng-class="['highlight', {'watermarked': challenge.showBackground}]">
<thead>
<tr>
<td data-field="rank">
<a href="#" ng-click="challenge.sortLeaderboard(challenge, 'rank');">
<span class="w-300 fs-20">Rank</span>
<span class="fa-stack fa-1x">
<i class="fa fa-sort-asc fa-stack-1x"
ng-class="challenge.reverseSort && challenge.sortColumn == 'rank'? 'text-dark-black' : 'text-light-black w-300'"></i>
<i class="fa fa-sort-desc fa-stack-1x"
ng-class="!challenge.reverseSort && challenge.sortColumn == 'rank'? 'text-dark-black' : 'text-light-black w-300'"></i>
</span>
</a>
</td>
<td data-field="team">
<a href="#" ng-click="challenge.sortLeaderboard(challenge, 'string');">
<span class="w-300 fs-20">Participant team</span>
<span class="fa-stack fa-1x">
<i class="fa fa-sort-asc fa-stack-1x"
ng-class="challenge.reverseSort && challenge.sortColumn == 'string'? 'text-dark-black' : 'text-light-black w-300'"></i>
<i class="fa fa-sort-desc fa-stack-1x"
ng-class="!challenge.reverseSort && challenge.sortColumn == 'string'? 'text-dark-black' : 'text-light-black w-300'"></i>
</span>
</a>
</td>
<td ng-repeat="(i, key) in challenge.leaderboard[0].leaderboard__schema.labels track by $index" ng-if="challenge.chosenMetrics.indexOf($index.toString()) !== -1">
<a href="#"
ng-click="$parent.challenge.sortLeaderboard($parent.challenge, 'number', $index);">
<span class="w-300 fs-20 leaderboard-label" ng-if="challenge.isMetricOrderedAscending(key) && key != challenge.orderLeaderboardBy ">{{key}} (↓) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
<span class="w-300 fs-20 leaderboard-label" ng-if="!challenge.isMetricOrderedAscending(key) && key != challenge.orderLeaderboardBy">{{key}} (↑) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
<span class="w-400 fs-20 leaderboard-label" ng-if="challenge.isMetricOrderedAscending(key) && key == challenge.orderLeaderboardBy ">{{key}} (↓) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
<span class="w-400 fs-20 leaderboard-label" ng-if="!challenge.isMetricOrderedAscending(key) && key == challenge.orderLeaderboardBy">{{key}} (↑) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
<span class="fa-stack fa-1x">
<i class="fa fa-sort-asc fa-stack-1x"
ng-class="$parent.challenge.reverseSort && $parent.challenge.sortColumn == 'number' && $parent.challenge.columnIndexSort == $index ? 'text-dark-black' : 'text-light-black w-300'"></i>
<i class="fa fa-sort-desc fa-stack-1x"
ng-class="!$parent.challenge.reverseSort && $parent.challenge.sortColumn == 'number' && $parent.challenge.columnIndexSort == $index ? 'text-dark-black' : 'text-light-black w-300'"></i>
</span>
</a>
</td>
<td ng-if="challenge.selectedPhaseSplit.show_execution_time" data-field="execution_time">
<a href="#"
ng-click="challenge.sortLeaderboard(challenge, 'exec');">
<span class="fs-20 w-300">Execution time</span>
<span class="fa-stack fa-1x">
<i class="fa fa-sort-asc fa-stack-1x"
ng-class="challenge.reverseSort && challenge.sortColumn == 'exec' ? 'text-dark-black' : 'text-light-black w-300'"></i>
<i class="fa fa-sort-desc fa-stack-1x"
ng-class="!challenge.reverseSort && challenge.sortColumn == 'exec' ? 'text-dark-black' : 'text-light-black w-300'"></i>
</span>
</a>
</td>
<td data-field="submission_time">
<a href="#" ng-click="challenge.sortLeaderboard(challenge, 'date');">
<span class="fs-20 w-300">Last submission at</span>
<span class="fa-stack fa-1x">
<i class="fa fa-sort-asc fa-stack-1x"
ng-class="challenge.reverseSort && challenge.sortColumn == 'date'? 'text-dark-black' : 'text-light-black w-300'"></i>
<i class="fa fa-sort-desc fa-stack-1x"
ng-class="!challenge.reverseSort && challenge.sortColumn == 'date'? 'text-dark-black' : 'text-light-black w-300'"></i>
</span>
</a>
</td>
<td data-field="" ng-if="challenge.showSubmissionMetaAttributesOnLeaderboard">
<span class="fs-20 w-300">Meta Attributes</span>
</td>
</tr>
</thead>
<tbody class="fs-16 w-300">
<tr ng-click="challenge.highlightSpecificLeaderboardEntry('leaderboardrank-' + challenge.initial_ranking[key.id])"
ng-repeat="key in challenge.leaderboard|orderBy:challenge.sortFunction:challenge.reverseSort"
class="fs-16" id="leaderboardrank-{{challenge.initial_ranking[key.id]}}">
<td>{{challenge.initial_ranking[key.id]}}</td>
<td><a ng-if="key.submission__participant_team__team_url" class="orange-text"
target="_blank"
href="{{key.submission__participant_team__team_url}}">{{key.submission__participant_team__team_name}}</a><span
ng-if="!key.submission__participant_team__team_url">{{key.submission__participant_team__team_name}}</span>
<b><span ng-if="key.submission__is_public === false" class="orange-text">*</span></b>
<span
ng-if="key.submission__method_name">({{key.submission__method_name | limitTo:30}})</span><span
id="baseline-badge" class="new badge orange-background baseline-tag" data-badge-caption="B"
ng-if="key.submission__is_baseline"></span>
<span
id="verified-badge" class="new badge green-background baseline-tag" data-badge-caption="V"
ng-if="key.submission__is_verified_by_host"></span>
</td>
<td ng-repeat="(i, score) in key.result track by $index" ng-if="challenge.chosenMetrics.indexOf($index.toString()) !== -1">
<span class="w-400 fs-16" ng-if="challenge.leaderboard[0].leaderboard__schema.labels[i] == challenge.orderLeaderboardBy">{{score | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
<span class="w-300 fs-16" ng-if="challenge.leaderboard[0].leaderboard__schema.labels[i] != challenge.orderLeaderboardBy">{{score | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
<span class="new badge orange-background fs-16 w-300 partial-evaluation"
data-badge-caption="E" ng-if="score === '#'"></span>
<span ng-if="key.error != nil"> ±
{{key.error[i] | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
</td>
<td ng-if="challenge.selectedPhaseSplit.show_execution_time">{{ key.submission__execution_time | format_execution_time }}</td>
<td>{{ key.submission__submitted_at | number: 0}} {{key.timeSpan}} ago
</td>
<td ng-if="challenge.showSubmissionMetaAttributesOnLeaderboard">
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn fs-14" ng-disabled="key.submission__submission_metadata == undefined || key.submission__submission_metadata == null;" type="submit" value="view" ng-click="challenge.showMetaAttributesDialog($event, key.submission__submission_metadata);">View</button>
</td>
</tr>
</tbody>
</table>
<div ng-if="challenge.isResult && challenge.leaderboard.error">
<p class="fs-16 w-300">{{challenge.leaderboard.error.error}}</p>
</div>
<div ng-if="challenge.isResult && !challenge.leaderboard.length && !challenge.leaderboard.error">
<p class="fs-16 w-300">No results to show.</p>
</div>
</div>
</div>
</div>
</section>