fix: LSDV-5044: Add queueTotal to lsfProperties from project (#1554)

* :we
wq
fix: lsdv-5044 add queue total to the app store and pull into current task

* impliement queposition with increment function

* add tooltip to task counter

* task count incriments on skip,forward, back

* add feature flag

* clamp queue position value

* fix spacing

---------

Co-authored-by: AndrejOros <AndrejOros@users.noreply.github.com>

Author: Travis1282

src/components/BottomBar/CurrentTask.js

@@ -1,9 +1,10 @@
+import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
-import { useMemo } from 'react';
 import { Button } from '../../common/Button/Button';
 import { Block, Elem } from '../../utils/bem';
 import { guidGenerator } from '../../utils/unique';
 import { isDefined } from '../../utils/utilities';
+import { FF_TASK_COUNT_FIX, isFF } from '../../common/Tooltip/Tooltip';
 import './CurrentTask.styl';
 
 
@@ -18,16 +19,22 @@ export const CurrentTask = observer(({ store }) => {
     && !store.canGoNextTask
     && !store.hasInterface('review')
     && store.hasInterface('postpone');
-
+  
   return (
     <Elem name="section">
       <Block name="current-task" mod={{ 'with-history': historyEnabled }}>
         <Elem name="task-id">
           {store.task.id ?? guidGenerator()}
           {historyEnabled && (
-            <Elem name="task-count">
-              {currentIndex} of {store.taskHistory.length}
-            </Elem>
+            isFF(FF_TASK_COUNT_FIX) ? (
+              <Elem name="task-count">
+                {store.queuePosition} of {store.queueTotal}
+              </Elem>
+            ) : (
+              <Elem name="task-count">
+                {currentIndex} of {store.taskHistory.length}
+              </Elem>
+            )
           )}
         </Elem>
         {historyEnabled && (

src/components/TopBar/CurrentTask.js

@@ -1,15 +1,19 @@
+import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '../../common/Button/Button';
 import { Block, Elem } from '../../utils/bem';
-import { FF_DEV_3873, FF_DEV_4174, isFF } from '../../utils/feature-flags';
+import { FF_DEV_3873, FF_DEV_4174, FF_TASK_COUNT_FIX, isFF } from '../../utils/feature-flags';
 import { guidGenerator } from '../../utils/unique';
 import { isDefined } from '../../utils/utilities';
 import './CurrentTask.styl';
 import { reaction } from 'mobx';
 
-
 export const CurrentTask = observer(({ store }) => {
+  const currentIndex = useMemo(() => {
+    return store.taskHistory.findIndex((x) => x.taskId === store.task.id) + 1;
+  }, [store.taskHistory]);
+
   const [initialCommentLength, setInitialCommentLength] = useState(0);
   const [visibleComments, setVisibleComments] = useState(0);
 
@@ -28,10 +32,6 @@ export const CurrentTask = observer(({ store }) => {
     };
   }, []);
 
-  const currentIndex = useMemo(() => {
-    return store.taskHistory.findIndex((x) => x.taskId === store.task.id) + 1;
-  }, [store.taskHistory]);
-
   useEffect(() => {
     if (store.commentStore.addedCommentThisSession) {
       setInitialCommentLength(visibleComments);
@@ -61,9 +61,15 @@ export const CurrentTask = observer(({ store }) => {
         <Elem name="task-id" style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}>
           {store.task.id ?? guidGenerator()}
           {historyEnabled && showCounter && (
-            <Elem name="task-count">
-              {currentIndex} of {store.taskHistory.length}
-            </Elem>
+            isFF(FF_TASK_COUNT_FIX) ? (
+              <Elem name="task-count">
+                {store.queuePosition} of {store.queueTotal}
+              </Elem>
+            ) : (
+              <Elem name="task-count">
+                {currentIndex} of {store.taskHistory.length}
+              </Elem>
+            )
           )}
         </Elem>
         {historyEnabled && (

src/stores/AppStore.js

@@ -17,7 +17,7 @@ import { Hotkey } from '../core/Hotkey';
 import ToolsManager from '../tools/Manager';
 import Utils from '../utils';
 import { guidGenerator } from '../utils/unique';
-import { delay, isDefined } from '../utils/utilities';
+import { clamp, delay, isDefined } from '../utils/utilities';
 import AnnotationStore from './Annotation/store';
 import Project from './ProjectStore';
 import Settings from './SettingsStore';
@@ -154,6 +154,10 @@ export default types
     users: types.optional(types.array(UserExtended), []),
 
     userLabels: isFF(FF_DEV_1536) ? types.optional(UserLabels, { controls: {} }) : types.undefined,
+    
+    queueTotal: types.optional(types.number, 0),
+    
+    queuePosition: types.optional(types.number, 0),
   })
   .preProcessSnapshot((sn) => {
     // This should only be handled if the sn.user value is an object, and converted to a reference id for other
@@ -529,6 +533,9 @@ export default types
         })
         .then(() => self.setFlags({ isSubmitting: false }));
     }
+    function incrementQueuePosition(number = 1) {
+      self.queuePosition = clamp(self.queuePosition + number, 1, self.queueTotal);
+    }
 
     function submitAnnotation() {
       if (self.isSubmitting) return;
@@ -543,6 +550,7 @@ export default types
       entity.sendUserGenerate();
       handleSubmittingFlag(async () => {
         await getEnv(self).events.invoke(event, self, entity);
+        self.incrementQueuePosition();
       });
       entity.dropDraft();
     }
@@ -558,6 +566,7 @@ export default types
 
       handleSubmittingFlag(async () => {
         await getEnv(self).events.invoke('updateAnnotation', self, entity, extraData);
+        self.incrementQueuePosition();
       });
       entity.dropDraft();
       !entity.sentUserGenerate && entity.sendUserGenerate();
@@ -567,6 +576,7 @@ export default types
       if (self.isSubmitting) return;
       handleSubmittingFlag(() => {
         getEnv(self).events.invoke('skipTask', self, extraData);
+        self.incrementQueuePosition();
       }, 'Error during skip, try again');
     }
 
@@ -590,6 +600,7 @@ export default types
 
         entity.dropDraft();
         await getEnv(self).events.invoke('acceptAnnotation', self, { isDirty, entity });
+        self.incrementQueuePosition();
       }, 'Error during accept, try again');
     }
 
@@ -606,6 +617,8 @@ export default types
 
         entity.dropDraft();
         await getEnv(self).events.invoke('rejectAnnotation', self, { isDirty, entity, comment });
+        self.incrementQueuePosition(-1);
+
       }, 'Error during reject, try again');
     }
 
@@ -754,14 +767,20 @@ export default types
       // or annotation created from prediction
       await annotation.saveDraft({ was_postponed: true });
       await getEnv(self).events.invoke('nextTask');
+      self.incrementQueuePosition();
+
     }
 
     function nextTask() {
+      
       if (self.canGoNextTask) {
         const { taskId, annotationId } = self.taskHistory[self.taskHistory.findIndex((x) => x.taskId === self.task.id) + 1];
 
         getEnv(self).events.invoke('nextTask', taskId, annotationId);
+        self.incrementQueuePosition();
+
       }
+
     }
 
     function prevTask(e, shouldGoBack = false) {
@@ -771,6 +790,8 @@ export default types
         const { taskId, annotationId } = self.taskHistory[length];
 
         getEnv(self).events.invoke('prevTask', taskId, annotationId);
+        self.incrementQueuePosition(-1);
+
       }
     }
 
@@ -826,6 +847,7 @@ export default types
       nextTask,
       prevTask,
       postponeTask,
+      incrementQueuePosition,
       beforeDestroy() {
         ToolsManager.removeAllTools();
         appControls = null;

src/utils/feature-flags.ts

@@ -316,7 +316,13 @@ export const FF_TAXONOMY_ASYNC = 'fflag_feat_front_lsdv_5451_async_taxonomy_1108
 export const FF_TAXONOMY_LABELING = 'fflag_feat_front_lsdv_5452_taxonomy_labeling_110823_short';
 
 /**
- * Annotator workflow control for lead time calculation
+ * Fix task count on projects with over 100 tasks (switch from task history to queue count)
+ * @link https://app.launchdarkly.com/default/production/features/fflag_fix_all_optic_79_task_count_is_wrong_short/targeting
+ */
+
+export const FF_TASK_COUNT_FIX = 'fflag_fix_all_optic_79_task_count_is_wrong_short';
+/** 
+* Annotator workflow control for lead time calculation
  */
 export const FF_PROD_E_111 = 'fflag_feat_front_prod_e_111_annotator_workflow_control_short';