added ui to indicate tracking progress

app/frontend/src/component/panel/entity/Card.tsx

@@ -5,11 +5,12 @@ import intl from 'react-intl-universal';
 import shallow from 'zustand/shallow';
 import {css} from '@emotion/react';
 
-import {Space, Card, Typography, Button, Popconfirm} from 'antd';
+import {Space, Card, Typography, Button, Popconfirm, Progress, Spin} from 'antd';
 import {EditOutlined, DeleteOutlined} from '@ant-design/icons';
 
 import {useStore as useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useRenderStore} from 'state/annotate/render';
+import {useStore as useUIStore} from 'state/annotate/ui';
 
 import {EditColor} from 'common/constant';
 import {convertRGBA2Hex} from 'common/color';
@@ -146,6 +147,7 @@ export const EntityCard: FC<{
         </Popconfirm>,
       ]}
     >
+      <TrackingProgress eid={entityId} />
       <Paragraph style={{marginBottom: 0}}>
         <Text strong style={{marginRight: 4}}>
           {intl.get('frame')}
@@ -177,3 +179,12 @@ export const EntityCard: FC<{
     </Card>
   );
 };
+
+const TrackingProgress: FC<{eid: string}> = ({eid}) => {
+  const progress = useUIStore(s => s.tracking[eid]);
+  return progress === undefined ? null : progress > 0 ? (
+    <Progress percent={progress * 100} showInfo={false} />
+  ) : (
+    <Spin size="small" style={{margin: '8px 0'}} />
+  );
+};

app/frontend/src/component/panel/menu/mask.ts

@@ -1,7 +1,7 @@
 import intl from 'react-intl-universal';
 import {v4 as uuidv4} from 'uuid';
 import {Component, EntityId, MaskComponent, SliceIndex} from 'type/annotation';
-import {TrackingContext} from 'state/annotate/ui';
+import {useStore as useUIStore} from 'state/annotate/ui';
 import {useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useAnnoStore} from 'state/annotate/annotation';
 import {Action} from './common';
@@ -14,7 +14,8 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const config = useContext(ConfigContext);
 
   const isLastSlice = useRenderStore(s => s.sliceIndex + 1 === s.sliceUrls.length);
-  // const setTracking = useUIStore(s => s.setTracking);
+  const setTracking = useUIStore(s => s.setTracking);
+  const deleteTracking = useUIStore(s => s.deleteTracking);
 
   const sliceSize = useRenderStore(s => s.sliceSize);
   const currentSliceIndex = useRenderStore(s => s.sliceIndex);
@@ -24,10 +25,11 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const commitDraftComponents = useAnnoStore(s => s.commitDraftComponents);
 
   const track = useCallback(
-    ({mask}: TrackingContext) => {
+    (mask: MaskComponent) => {
       if (!sliceSize) {
         return;
       }
+      setTracking(eid, 0);
 
       const {rle, offset} = mask;
       const {
@@ -61,6 +63,9 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
               return;
             }
 
+            const total = req.subsequent_frame_urls.length;
+            let maxFrameIndex = 0;
+
             // one or more results might be concatecated together
             const resultJsonStrs = splitJSONs(new TextDecoder().decode(value));
             const newComponents: {sliceIndex: SliceIndex; component: Component}[] = [];
@@ -78,6 +83,12 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
                 mask: {coco_encoded_rle, width, height},
               } = resultJson;
 
+              if (fidx > maxFrameIndex) {
+                // made progress
+                maxFrameIndex = fidx;
+                setTracking(eid, maxFrameIndex / total);
+              }
+
               const counts = rleCountsFromStringCOCO(coco_encoded_rle);
               const mask = shrink({counts, size: {width, height}});
               if (!mask) {
@@ -103,15 +114,28 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
         })
         .catch(error => {
           console.error('fetch error:', error);
+        })
+        .finally(() => {
+          deleteTracking(eid);
         });
     },
-    [addComponents, commitDraftComponents, currentSliceIndex, currentSliceUrl, eid, sliceSize, subsequentSliceUrls]
+    [
+      addComponents,
+      commitDraftComponents,
+      currentSliceIndex,
+      currentSliceUrl,
+      deleteTracking,
+      eid,
+      setTracking,
+      sliceSize,
+      subsequentSliceUrls,
+    ]
   );
 
   return [
     {
       title: intl.get('menu.auto_track'),
-      fn: () => track({mask, entityId: eid}),
+      fn: () => track(mask),
       disableReason: isLastSlice
         ? intl.get('menu.auto_track_unapplicable_last_slice')
         : !config.track_enabled

app/frontend/src/page/annotate/Panel/Loaded.tsx

@@ -14,7 +14,6 @@ import {leftSidebarWidth, statusBarHeight, sliderHeight, rightSidebarWidth} from
 import {ActionBar} from 'component/panel/ActionBar';
 import {EntityBar} from 'component/panel/EntityBar';
 import {Canvas} from './Canvas';
-import {TrackOverlay} from 'component/panel/TrackOverlay';
 
 export const PanelLoaded: FC<{
   video: Video;
@@ -72,9 +71,6 @@ export const PanelLoaded: FC<{
           }}
         />
       </div>
-      <TrackOverlay
-        style={{background: 'rgba(0,0,0,0.8)', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%'}}
-      />
       <SyncingDisableInteractionMask />
       <MonitorAnnotation videoId={video.id} />
     </div>

app/frontend/src/state/annotate/ui.ts

@@ -1,4 +1,3 @@
-import {MaskComponent} from 'type/annotation';
 import create from 'zustand';
 import {immer} from 'zustand/middleware/immer';
 
@@ -11,8 +10,9 @@ export type State = {
   mouseClient: [number, number] | undefined;
   setMouseClient: (mouseClient: [number, number] | undefined) => void;
 
-  tracking: TrackingContext | undefined;
-  setTracking: (ctx: TrackingContext | undefined) => void;
+  tracking: {[key: string /* entity id */]: number /* progress in [0, 1] */};
+  setTracking: (entityId: string, progress: number) => void;
+  deleteTracking: (entityId: string) => void;
 };
 
 export const useStore = create<State>()(
@@ -31,16 +31,16 @@ export const useStore = create<State>()(
       });
     },
 
-    tracking: undefined,
-    setTracking: (ctx: TrackingContext | undefined) => {
+    tracking: {},
+    setTracking: (entityId: string, progress: number) => {
       set(s => {
-        s.tracking = ctx;
+        s.tracking[entityId] = progress;
+      });
+    },
+    deleteTracking: (entityId: string) => {
+      set(s => {
+        delete s.tracking[entityId];
       });
     },
   }))
 );
-
-export type TrackingContext = {
-  entityId: string;
-  mask: MaskComponent;
-};