Added progress indication

cvat-ai · Aug 9, 2023 · fbda9b2 · fbda9b2
1 parent 70fc428
commit fbda9b2
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 1 deletion.
diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts
@@ -624,6 +624,7 @@ export function changeFrameAsync(
                         relatedFiles: currentState.annotation.player.frame.relatedFiles,
                         delay: currentState.annotation.player.frame.delay,
                         changeTime: currentState.annotation.player.frame.changeTime,
+                        ranges: currentState.annotation.player.ranges,
                         states: currentState.annotation.annotations.states,
                         minZ: currentState.annotation.annotations.zLayer.min,
                         maxZ: currentState.annotation.annotations.zLayer.max,
@@ -645,6 +646,8 @@ export function changeFrameAsync(
             }
 
             const data = await job.frames.get(toFrame, fillBuffer, frameStep);
+            const ranges = await job.frames.ranges();
+            console.log(ranges);
             const states = await job.annotations.get(toFrame, showAllInterpolationTracks, filters);
 
             if (!isAbleToChangeFrame() || statisticsVisible || propagateVisible) {
@@ -695,6 +698,7 @@ export function changeFrameAsync(
                     curZ: maxZ,
                     changeTime: currentTime + delay,
                     delay,
+                    ranges,
                 },
             });
         } catch (error) {

diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/cvat-ui/src/components/annotation-page/styles.scss
@@ -126,15 +126,35 @@
     }
 }
 
-.cvat-player-slider {
+.cvat-player-slider.ant-slider {
     width: 350px;
     margin: 0;
+    margin-top: $grid-unit-size * -0.5;
 
+    > .ant-slider-handle {
+        z-index: 100;
+        margin-top: -3.5px;
+    }
+    > .ant-slider-track {
+        background: none;
+    }
     > .ant-slider-rail {
+        height: $grid-unit-size;
         background-color: $player-slider-color;
     }
 }
 
+.cvat-player-slider-progress {
+    width: 350px;
+    position: absolute;
+    top: 0;
+    pointer-events: none;
+
+    > rect {
+        fill: #ff4136;
+    }
+}
+
 .cvat-player-filename-wrapper {
     max-width: $grid-unit-size * 30;
     max-height: $grid-unit-size * 3;

diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
@@ -21,6 +21,7 @@ interface Props {
     startFrame: number;
     stopFrame: number;
     playing: boolean;
+    ranges: string;
     frameNumber: number;
     frameFilename: string;
     frameDeleted: boolean;
@@ -47,6 +48,7 @@ function PlayerNavigation(props: Props): JSX.Element {
         deleteFrameShortcut,
         focusFrameInputShortcut,
         inputFrameRef,
+        ranges,
         onSliderChange,
         onInputChange,
         onURLIconClick,
@@ -105,6 +107,17 @@ function PlayerNavigation(props: Props): JSX.Element {
                             value={frameNumber || 0}
                             onChange={onSliderChange}
                         />
+                        <svg className='cvat-player-slider-progress' viewBox='0 0 1000 9' xmlns='http://www.w3.org/2000/svg'>
+                            {ranges.split(';').map((range) => {
+                                let [start, end] = range.split(':').map((num) => +num);
+                                start = Math.max(0, start - 1);
+                                const totalSegments = stopFrame - startFrame;
+                                const segmentWidth = 1000 / totalSegments;
+                                const width = Math.max((end - start), 1) * segmentWidth;
+                                const offset = (Math.max((start - startFrame), 0) / totalSegments) * 1000;
+                                return (<rect x={offset} y={0} height={9} width={width} />);
+                            })}
+                        </svg>
                     </Col>
                 </Row>
                 <Row justify='center'>

diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
@@ -69,6 +69,7 @@ interface Props {
     onRestoreFrame(): void;
     switchNavigationBlocked(blocked: boolean): void;
     jobInstance: any;
+    ranges: string;
 }
 
 export default function AnnotationTopBarComponent(props: Props): JSX.Element {
@@ -77,6 +78,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
         undoAction,
         redoAction,
         playing,
+        ranges,
         frameNumber,
         frameFilename,
         frameDeleted,
@@ -168,6 +170,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
             startFrame={startFrame}
             stopFrame={stopFrame}
             playing={playing}
+            ranges={ranges}
             frameNumber={frameNumber}
             frameFilename={frameFilename}
             frameDeleted={frameDeleted}

diff --git a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
@@ -65,6 +65,7 @@ interface StateToProps {
     normalizedKeyMap: Record<string, string>;
     canvasInstance: Canvas | Canvas3d;
     forceExit: boolean;
+    ranges: string;
     activeControl: ActiveControl;
 }
 
@@ -91,6 +92,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         annotation: {
             player: {
                 playing,
+                ranges,
                 frame: {
                     data: { deleted: frameIsDeleted },
                     filename: frameFilename,
@@ -142,6 +144,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         canvasInstance,
         forceExit,
         activeControl,
+        ranges: ranges.join(';'),
     };
 }
 
@@ -638,6 +641,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
             workspace,
             canvasIsReady,
             keyMap,
+            ranges,
             normalizedKeyMap,
             activeControl,
             searchAnnotations,
@@ -766,6 +770,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
                     workspace={workspace}
                     playing={playing}
                     saving={saving}
+                    ranges={ranges}
                     startFrame={startFrame}
                     stopFrame={stopFrame}
                     frameNumber={frameNumber}

diff --git a/cvat-ui/src/containers/header/settings-modal/workspace-settings.tsx b/cvat-ui/src/containers/header/settings-modal/workspace-settings.tsx
@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 
 import {
     switchAutoSave,
+    switchImagesCache,
     changeAutoSaveInterval,
     changeAAMZoomMargin,
     switchShowingInterpolatedTracks,
@@ -43,6 +44,7 @@ interface StateToProps {
 
 interface DispatchToProps {
     onSwitchAutoSave(enabled: boolean): void;
+    onSwitchImagesCache(enabled: boolean): void;
     onChangeAutoSaveInterval(interval: number): void;
     onChangeAAMZoomMargin(margin: number): void;
     onSwitchShowingInterpolatedTracks(enabled: boolean): void;
@@ -94,6 +96,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
 
 const mapDispatchToProps: DispatchToProps = {
     onSwitchAutoSave: switchAutoSave,
+    onSwitchImagesCache: switchImagesCache,
     onChangeAutoSaveInterval: changeAutoSaveInterval,
     onChangeAAMZoomMargin: changeAAMZoomMargin,
     onSwitchShowingInterpolatedTracks: switchShowingInterpolatedTracks,

diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts
@@ -72,6 +72,7 @@ const defaultState: AnnotationState = {
             delay: 0,
             changeTime: null,
         },
+        ranges: [],
         playing: false,
         frameAngles: [],
         navigationBlocked: false,
@@ -275,12 +276,14 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 maxZ,
                 curZ,
                 delay,
+                ranges,
                 changeTime,
             } = action.payload;
             return {
                 ...state,
                 player: {
                     ...state.player,
+                    ranges,
                     frame: {
                         data,
                         filename,

diff --git a/cvat-ui/src/reducers/index.ts b/cvat-ui/src/reducers/index.ts
@@ -695,6 +695,7 @@ export interface AnnotationState {
             delay: number;
             changeTime: number | null;
         };
+        ranges: string[];
         navigationBlocked: boolean;
         playing: boolean;
         frameAngles: number[];