Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 4aa1091

Browse files
Travis1282bmartel
Travis1282
and
bmartel
authored
feat: LSDV-3104: Task navigation standardization (#1355)
* fix: lsdv-3104: view-all: stick carousel buttons to bottom * fix padding on view all * feat: lsdv-3104: task navagation stadardization * Update src/components/TopBar/CurrentTask.js Co-authored-by: bmartel <[email protected]> * Update src/stores/AppStore.js Co-authored-by: bmartel <[email protected]> * Update src/stores/AppStore.js Co-authored-by: bmartel <[email protected]> * pass flag if we should lookup the prev/next annoation ie it is not a history navagation * fix merge errors * fix formatting * fix linting errors --------- Co-authored-by: bmartel <[email protected]>
1 parent ee882b7 commit 4aa1091

File tree

7 files changed

+75
-42
lines changed

7 files changed

+75
-42
lines changed

‎public/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@
117117
"predictions:menu",
118118
"auto-annotation",
119119
"edit-history",
120-
//"topbar:prevnext",
121120
],
122121
user: {
123122
"id": 1,

‎src/components/AnnotationsCarousel/AnnotationsCarousel.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
align-items center
66
min-width 0
77
flex 1
8+
bottom -1px
89
&__container
910
display flex
1011
width 100%

‎src/components/BottomBar/CurrentTask.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import { guidGenerator } from '../../utils/unique';
77
import { isDefined } from '../../utils/utilities';
88
import './CurrentTask.styl';
99

10-
1110
export const CurrentTask = observer(({ store }) => {
1211
const currentIndex = useMemo(() => {
13-
return store.taskHistory.findIndex((x) => x.taskId === store.task.id) + 1;
12+
return store.taskHistory.findIndex(x => x.taskId === store.task.id) + 1;
1413
}, [store.taskHistory]);
1514

16-
const historyEnabled = store.hasInterface('topbar:prevnext');
15+
const historyEnabled = store.hasInterface('topbar:prev-next-history');
1716
// @todo some interface?
18-
const canPostpone = isFF(FF_DEV_3034)
19-
&& !isDefined(store.annotationStore.selected.pk)
20-
&& !store.canGoNextTask
21-
&& !store.hasInterface('review')
22-
&& store.hasInterface('postpone');
17+
const canPostpone =
18+
isFF(FF_DEV_3034) &&
19+
!isDefined(store.annotationStore.selected.pk) &&
20+
!store.canGoNextTask &&
21+
!store.hasInterface('review') &&
22+
store.hasInterface('postpone');
2323

2424
return (
2525
<Elem name="section">

‎src/components/TopBar/CurrentTask.js‎

Lines changed: 56 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { isDefined } from '../../utils/utilities';
88
import './CurrentTask.styl';
99
import { reaction } from 'mobx';
1010

11-
1211
export const CurrentTask = observer(({ store }) => {
1312
const [initialCommentLength, setInitialCommentLength] = useState(0);
1413
const [visibleComments, setVisibleComments] = useState(0);
@@ -27,7 +26,7 @@ export const CurrentTask = observer(({ store }) => {
2726
}, []);
2827

2928
const currentIndex = useMemo(() => {
30-
return store.taskHistory.findIndex((x) => x.taskId === store.task.id) + 1;
29+
return store.taskHistory.findIndex(x => x.taskId === store.task.id) + 1;
3130
}, [store.taskHistory]);
3231

3332
useEffect(() => {
@@ -36,43 +35,76 @@ export const CurrentTask = observer(({ store }) => {
3635
}
3736
}, [store.commentStore.addedCommentThisSession]);
3837

39-
const historyEnabled = store.hasInterface('topbar:prevnext');
38+
const historyBasedTaskList = store.hasInterface('topbar:prev-next-history');
4039
const showCounter = store.hasInterface('topbar:task-counter');
4140

4241
// @todo some interface?
43-
let canPostpone = isFF(FF_DEV_3034)
44-
&& !isDefined(store.annotationStore.selected.pk)
45-
&& !store.canGoNextTask
46-
&& !store.hasInterface('review')
47-
&& store.hasInterface('postpone');
48-
42+
let canPostpone =
43+
isFF(FF_DEV_3034) &&
44+
!isDefined(store.annotationStore.selected.pk) &&
45+
!store.canGoNextTask &&
46+
!store.hasInterface('review') &&
47+
store.hasInterface('postpone');
4948

5049
if (isFF(FF_DEV_4174)) {
51-
canPostpone = canPostpone && store.commentStore.addedCommentThisSession && (visibleComments >= initialCommentLength);
50+
canPostpone = canPostpone && store.commentStore.addedCommentThisSession && visibleComments >= initialCommentLength;
5251
}
53-
5452
return (
5553
<Elem name="section">
56-
<Block name="current-task" mod={{ 'with-history': historyEnabled }} style={{
57-
padding:isFF(FF_DEV_3873) && 0,
58-
width:isFF(FF_DEV_3873) && 'auto',
59-
}}>
60-
<Elem name="task-id" style={{ fontSize:isFF(FF_DEV_3873) ? 12 : 14 }}>
54+
<Block
55+
name="current-task"
56+
mod={{ 'with-history': historyBasedTaskList }}
57+
style={{
58+
padding: isFF(FF_DEV_3873) && 0,
59+
width: isFF(FF_DEV_3873) && 'auto',
60+
}}
61+
>
62+
<Elem name="task-id" style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}>
6163
{store.task.id ?? guidGenerator()}
62-
{historyEnabled && showCounter && (
64+
{historyBasedTaskList && showCounter && (
6365
<Elem name="task-count">
6466
{currentIndex} of {store.taskHistory.length}
6567
</Elem>
6668
)}
6769
</Elem>
68-
{historyEnabled && (
69-
<Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }} >
70+
{historyBasedTaskList ? (
71+
<Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }}>
72+
<Elem
73+
tag={Button}
74+
name="prevnext"
75+
mod={{ prev: true, disabled: !store.canGoPrevHistoryTask, newui: isFF(FF_DEV_3873) }}
76+
type="link"
77+
disabled={!historyBasedTaskList || !store.canGoPrevHistoryTask}
78+
onClick={store.prevTask}
79+
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
80+
/>
81+
<Elem
82+
tag={Button}
83+
name="prevnext"
84+
mod={{
85+
next: true,
86+
disabled: !store.canGoNextHistoryTask && !canPostpone,
87+
postpone: !store.canGoNextHistoryTask && canPostpone,
88+
newui: isFF(FF_DEV_3873),
89+
}}
90+
type="link"
91+
disabled={!store.canGoNextHistoryTask && !canPostpone}
92+
onClick={store.canGoNextHistoryTask ? store.nextTask : store.postponeTask}
93+
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
94+
/>
95+
</Elem>
96+
) : (
97+
<Elem name="history-controls">
7098
<Elem
7199
tag={Button}
72100
name="prevnext"
73-
mod={{ prev: true, disabled: !store.canGoPrevTask, newui: isFF(FF_DEV_3873) }}
101+
mod={{
102+
prev: true,
103+
disabled: !store.adjacentTaskIds?.prevTaskId,
104+
newui: isFF(FF_DEV_3873),
105+
}}
74106
type="link"
75-
disabled={!historyEnabled || !store.canGoPrevTask}
107+
disabled={!store.adjacentTaskIds?.prevTaskId}
76108
onClick={store.prevTask}
77109
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
78110
/>
@@ -81,13 +113,12 @@ export const CurrentTask = observer(({ store }) => {
81113
name="prevnext"
82114
mod={{
83115
next: true,
84-
disabled: !store.canGoNextTask && !canPostpone,
85-
postpone: !store.canGoNextTask && canPostpone,
116+
disabled: !store.adjacentTaskIds?.nextTaskId,
86117
newui: isFF(FF_DEV_3873),
87118
}}
88119
type="link"
89-
disabled={!store.canGoNextTask && !canPostpone}
90-
onClick={store.canGoNextTask ? store.nextTask : store.postponeTask}
120+
disabled={!store.adjacentTaskIds?.nextTaskId}
121+
onClick={store.nextTask}
91122
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
92123
/>
93124
</Elem>

‎src/components/TopBar/CurrentTask.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
.current-task
2-
padding 0 8px 0 16px
2+
padding-left 8px
33
display flex
44
align-content center
55
align-items center
66

77
&_with-history
88
height 100%
99
display grid
10-
width 220px
1110
grid-template-columns 1fr min-content
1211
grid-template-areas 'id buttons' 'id buttons'
1312
grid-template-rows 1fr 1fr
@@ -30,6 +29,7 @@
3029
&__history-controls
3130
display flex
3231
grid-area buttons
32+
padding-left 8px
3333

3434
&_newui
3535
gap 8px

‎src/components/TopBar/TopBar.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
&__section
2424
display flex
25-
padding 0 8px
25+
padding 0 0 0 8px
2626
align-items center
2727
box-sizing border-box
2828

‎src/stores/AppStore.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export default types
179179
/**
180180
* Get alert
181181
*/
182+
182183
get alert() {
183184
return getEnv(self).alert;
184185
},
@@ -189,7 +190,7 @@ export default types
189190

190191
return Array.from(self.annotationStore.names.values()).some(isSegmentation);
191192
},
192-
get canGoNextTask() {
193+
get canGoNextHistoryTask() {
193194
const hasHistory = self.task && self.taskHistory && self.taskHistory.length > 1;
194195

195196
if (hasHistory) {
@@ -199,7 +200,7 @@ export default types
199200
}
200201
return false;
201202
},
202-
get canGoPrevTask() {
203+
get canGoPrevHistoryTask() {
203204
const hasHistory = self.task && self.taskHistory && self.taskHistory.length > 1;
204205

205206
if (hasHistory) {
@@ -734,21 +735,22 @@ export default types
734735
}
735736

736737
function nextTask() {
737-
if (self.canGoNextTask) {
738+
if (self.canGoNextHistoryTask && self.hasInterface('topbar:prev-next-history')) {
738739
const { taskId, annotationId } = self.taskHistory[self.taskHistory.findIndex((x) => x.taskId === self.task.id) + 1];
739740

740741
getEnv(self).events.invoke('nextTask', taskId, annotationId);
741742
}
743+
else if (self.adjacentTaskIds.nextTaskId) getEnv(self).events.invoke('nextTask', self.adjacentTaskIds.nextTaskId, null, true);
742744
}
743745

744746
function prevTask(e, shouldGoBack = false) {
745747
const length = shouldGoBack ? self.taskHistory.length - 1 : self.taskHistory.findIndex((x) => x.taskId === self.task.id) - 1;
746748

747-
if (self.canGoPrevTask || shouldGoBack) {
749+
if ((self.canGoPrevHistoryTask || shouldGoBack) && self.hasInterface('topbar:prev-next-history')) {
748750
const { taskId, annotationId } = self.taskHistory[length];
749751

750752
getEnv(self).events.invoke('prevTask', taskId, annotationId);
751-
}
753+
} else if (self.adjacentTaskIds.prevTaskId) getEnv(self).events.invoke('prevTask', self.adjacentTaskIds.prevTaskId, null, true);
752754
}
753755

754756
function setUsers(users) {

0 commit comments

Comments
 (0)