Skip to content

Commit

Permalink
Implement basic review annotation candidate view
Browse files Browse the repository at this point in the history
  • Loading branch information
mzur committed Nov 20, 2018
1 parent 5bc2c96 commit 5e909e8
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/public/assets/scripts/main.js

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions src/resources/assets/js/components/acImageGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* A variant of the image grid used for the selection of MAIA annotation candidates.
*
* @type {Object}
*/
biigle.$component('maia.components.acImageGrid', {
mixins: [biigle.$require('volumes.components.imageGrid')],
components: {
imageGridImage: biigle.$require('maia.components.acImageGridImage'),
},
});
35 changes: 35 additions & 0 deletions src/resources/assets/js/components/acImageGridImage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* A variant of the image grid image used for the selection of MAIA annotation candidates.
*
* @type {Object}
*/
biigle.$component('maia.components.acImageGridImage', {
mixins: [biigle.$require('volumes.components.imageGridImage')],
template: '<figure class="image-grid__image" :class="classObject" :title="title">' +
'<div v-if="showIcon" class="image-icon">' +
'<i class="fas fa-3x" :class="iconClass"></i>' +
'</div>' +
'<img @click="toggleSelect" :src="url || emptyUrl">' +
'<div v-if="showAnnotationLink" class="image-buttons">' +
'<a :href="showAnnotationLink" target="_blank" class="image-button" title="Show the annotation in the annotation tool">' +
'<span class="fa fa-external-link-square-alt" aria-hidden="true"></span>' +
'</a>' +
'</div>' +
'</figure>',
computed: {
showAnnotationLink: function () {
return false;
},
selected: function () {
return this.image.selected;
},
title: function () {
return this.selected ? 'Remove selected label' : 'Assign selected label';
},
},
methods: {
getBlob: function () {
return biigle.$require('maia.api.maiaAnnotation').getFile({id: this.image.id});
},
},
});
24 changes: 24 additions & 0 deletions src/resources/assets/js/components/reviewAcTab.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* The review annotation candidates tab
*
* @type {Object}
*/
biigle.$component('maia.components.reviewAcTab', {
props: {
//
},
data: function () {
return {
//
};
},
computed: {
//
},
methods: {
//
},
created: function () {
//
},
});
2 changes: 0 additions & 2 deletions src/resources/assets/js/components/tpImageGridImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ biigle.$component('maia.components.tpImageGridImage', {
computed: {
showAnnotationLink: function () {
return false;
// var route = biigle.$require('largo.showAnnotationRoute');
// return route ? (route + this.image.id) : '';
},
selected: function () {
return this.image.selected;
Expand Down
34 changes: 34 additions & 0 deletions src/resources/assets/js/maiaShowContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ biigle.$viewModel('maia-show-container', function (element) {
tpImageGrid: biigle.$require('maia.components.tpImageGrid'),
refineTpTab: biigle.$require('maia.components.refineTpTab'),
refineTpCanvas: biigle.$require('maia.components.refineTpCanvas'),
reviewAcTab: biigle.$require('maia.components.reviewAcTab'),
acImageGrid: biigle.$require('maia.components.acImageGrid'),
},
data: {
visitedSelectTpTab: false,
Expand All @@ -30,6 +32,8 @@ biigle.$viewModel('maia-show-container', function (element) {
lastSelectedTp: null,
currentImage: null,
currentTpIndex: 0,
annotationCandidates: [],
reviewAcOffset: 0,
},
computed: {
infoTabOpen: function () {
Expand All @@ -47,9 +51,15 @@ biigle.$viewModel('maia-show-container', function (element) {
hasTrainingProposals: function () {
return this.trainingProposals.length > 0;
},
hasAnnotationCandidates: function () {
return this.annotationCandidates.length > 0;
},
isInTrainingProposalState: function () {
return job.state_id === states['training-proposals'];
},
isInAnnotationCandidateState: function () {
return job.state_id === states['annotation-candidates'];
},
imageIds: function () {
var tmp = {};

Expand Down Expand Up @@ -200,6 +210,10 @@ biigle.$viewModel('maia-show-container', function (element) {
// TODO this updates on keyboard events of the refine view, too!
this.selectTpOffset = offset;
},
updateReviewAcOffset: function (offset) {
// TODO this updates on keyboard events of the refine view, too!
this.reviewAcOffset = offset;
},
selectAllTpBetween: function (first, second) {
var index1 = this.trainingProposals.indexOf(first);
var index2 = this.trainingProposals.indexOf(second);
Expand Down Expand Up @@ -281,6 +295,23 @@ biigle.$viewModel('maia-show-container', function (element) {
handleUnselectTp: function (proposal) {
this.updateSelectTrainingProposal(proposal, false);
},
setAnnotationCandidates: function (response) {
this.annotationCandidates = response.body.map(function (c) {
c.shape = 'Circle';
return c;
});
},
fetchAnnotationCandidates: function () {
this.startLoading();

return maiaJobApi.getAnnotationCandidates({id: job.id})
.then(this.setAnnotationCandidates)
.catch(messages.handleErrorResponse)
.finally(this.finishLoading);
},
handleSelectedAnnotationCandidate: function (candidate) {
console.log('select', candidate);
},
},
watch: {
selectTpTabOpen: function () {
Expand All @@ -295,6 +326,9 @@ biigle.$viewModel('maia-show-container', function (element) {
visitedSelectOrRefineTpTab: function () {
this.fetchTrainingProposals();
},
visitedReviewAcTab: function () {
this.fetchAnnotationCandidates();
},
currentImageId: function (id) {
if (id) {
this.fetchCurrentImage().then(this.focusCurrentTp);
Expand Down
19 changes: 13 additions & 6 deletions src/resources/views/show.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,19 @@
<div v-show="infoTabOpen" class="maia-content">
@include('maia::show.info-content')
</div>
<div v-show="selectTpTabOpen" v-cloak class="maia-content">
@include('maia::show.select-tp-content')
</div>
<div v-show="refineTpTabOpen" v-cloak class="maia-content">
@include('maia::show.refine-tp-content')
</div>
@if ($job->state_id >= $states['training-proposals'])
<div v-show="selectTpTabOpen" v-cloak class="maia-content">
@include('maia::show.select-tp-content')
</div>
<div v-show="refineTpTabOpen" v-cloak class="maia-content">
@include('maia::show.refine-tp-content')
</div>
@endif
@if ($job->state_id >= $states['annotation-candidates'])
<div v-show="reviewAcTabOpen" v-cloak class="maia-content">
@include('maia::show.review-ac-content')
</div>
@endif
<loader-block :active="loading"></loader-block>
</div>
<sidebar v-bind:open-tab="openTab" v-on:open="handleTabOpened" v-on:toggle="handleSidebarToggle">
Expand Down
16 changes: 16 additions & 0 deletions src/resources/views/show/review-ac-content.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<ac-image-grid
v-show="hasAnnotationCandidates"
:images="annotationCandidates"
empty-url="{{ asset(config('thumbnails.empty_url')) }}"
:width="{{config('thumbnails.width')}}"
:height="{{config('thumbnails.height')}}"
:initial-offset="reviewAcOffset"
:selectable="isInAnnotationCandidateState"
selected-icon="check"
v-on:select="handleSelectedAnnotationCandidate"
v-on:scroll="updateReviewAcOffset"></ac-image-grid>
<div v-if="!loading && !hasAnnotationCandidates" class="maia-content-message">
<div class="text-warning">
There are no annotation candidates.
</div>
</div>
4 changes: 3 additions & 1 deletion src/resources/views/show/review-ac-tab.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<review-ac-tab inline-template>
<div class="sidebar-tab__content">
review ac

</div>
</review-ac-tab>

0 comments on commit 5e909e8

Please sign in to comment.