Added cached frames indication (cvat-ai#6586)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

Depends on cvat-ai#6585

### Motivation and context
Resolved #8

Decoded range is red:
<img width="537" alt="image"
src="https://github.com/opencv/cvat/assets/40690378/686c4016-ef09-4ec9-8815-2c88f820f2d6">

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   user-provided function on the local machine, and a corresponding CLI command
   (`auto-annotate`)
   (<https://github.com/opencv/cvat/pull/6483>)
+- Cached frames indication on the interface (<https://github.com/opencv/cvat/pull/6586>)
 
 ### Changed
 

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "10.0.1",
+  "version": "11.0.0",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "src/api.ts",
   "scripts": {

cvat-core/src/frames.ts

@@ -582,12 +582,12 @@ export async function findFrame(
     return lastUndeletedFrame;
 }
 
-export function getRanges(jobID): Array<string> {
+export function getCachedChunks(jobID): number[] {
     if (!(jobID in frameDataCache)) {
         return [];
     }
 
-    return frameDataCache[jobID].provider.cachedFrames;
+    return frameDataCache[jobID].provider.cachedChunks(true);
 }
 
 export function clear(jobID: number): void {

cvat-core/src/session-implementation.ts

@@ -13,7 +13,7 @@ import {
     getFrame,
     deleteFrame,
     restoreFrame,
-    getRanges,
+    getCachedChunks,
     clear as clearFrames,
     findFrame,
     getContextImage,
@@ -163,9 +163,9 @@ export function implementJob(Job) {
         return result;
     };
 
-    Job.prototype.frames.ranges.implementation = async function () {
-        const rangesData = await getRanges(this.id);
-        return rangesData;
+    Job.prototype.frames.cachedChunks.implementation = async function () {
+        const cachedChunks = await getCachedChunks(this.id);
+        return cachedChunks;
     };
 
     Job.prototype.frames.preview.implementation = async function (this: JobClass): Promise<string> {
@@ -570,21 +570,18 @@ export function implementTask(Task) {
             isPlaying,
             step,
             this.dimension,
+            (chunkNumber, quality) => job.frames.chunk(chunkNumber, quality),
         );
         return result;
     };
 
-    Task.prototype.frames.ranges.implementation = async function () {
-        const rangesData = {
-            decoded: [],
-            buffered: [],
-        };
+    Task.prototype.frames.cachedChunks.implementation = async function () {
+        let chunks = [];
         for (const job of this.jobs) {
-            const { decoded, buffered } = await getRanges(job.id);
-            rangesData.decoded.push(decoded);
-            rangesData.buffered.push(buffered);
+            const cachedChunks = await getCachedChunks(job.id);
+            chunks = chunks.concat(cachedChunks);
         }
-        return rangesData;
+        return Array.from(new Set(chunks));
     };
 
     Task.prototype.frames.preview.implementation = async function (this: TaskClass): Promise<string> {

cvat-core/src/session.ts

@@ -210,8 +210,8 @@ function buildDuplicatedAPI(prototype) {
                         prototype.frames.save,
                     );
                 },
-                async ranges() {
-                    const result = await PluginRegistry.apiWrapper.call(this, prototype.frames.ranges);
+                async cachedChunks() {
+                    const result = await PluginRegistry.apiWrapper.call(this, prototype.frames.cachedChunks);
                     return result;
                 },
                 async preview() {
@@ -329,6 +329,7 @@ export class Job extends Session {
     public readonly taskId: number;
     public readonly dimension: DimensionType;
     public readonly dataChunkType: ChunkType;
+    public readonly dataChunkSize: number;
     public readonly bugTracker: string | null;
     public readonly mode: TaskMode;
     public readonly labels: Label[];
@@ -369,7 +370,7 @@ export class Job extends Session {
         delete: CallableFunction;
         restore: CallableFunction;
         save: CallableFunction;
-        ranges: CallableFunction;
+        cachedChunks: CallableFunction;
         preview: CallableFunction;
         contextImage: CallableFunction;
         search: CallableFunction;
@@ -573,7 +574,7 @@ export class Job extends Session {
             delete: Object.getPrototypeOf(this).frames.delete.bind(this),
             restore: Object.getPrototypeOf(this).frames.restore.bind(this),
             save: Object.getPrototypeOf(this).frames.save.bind(this),
-            ranges: Object.getPrototypeOf(this).frames.ranges.bind(this),
+            cachedChunks: Object.getPrototypeOf(this).frames.cachedChunks.bind(this),
             preview: Object.getPrototypeOf(this).frames.preview.bind(this),
             search: Object.getPrototypeOf(this).frames.search.bind(this),
             contextImage: Object.getPrototypeOf(this).frames.contextImage.bind(this),
@@ -684,7 +685,7 @@ export class Task extends Session {
         delete: CallableFunction;
         restore: CallableFunction;
         save: CallableFunction;
-        ranges: CallableFunction;
+        cachedChunks: CallableFunction;
         preview: CallableFunction;
         contextImage: CallableFunction;
         search: CallableFunction;
@@ -1101,7 +1102,7 @@ export class Task extends Session {
             delete: Object.getPrototypeOf(this).frames.delete.bind(this),
             restore: Object.getPrototypeOf(this).frames.restore.bind(this),
             save: Object.getPrototypeOf(this).frames.save.bind(this),
-            ranges: Object.getPrototypeOf(this).frames.ranges.bind(this),
+            cachedChunks: Object.getPrototypeOf(this).frames.cachedChunks.bind(this),
             preview: Object.getPrototypeOf(this).frames.preview.bind(this),
             contextImage: Object.getPrototypeOf(this).frames.contextImage.bind(this),
             search: Object.getPrototypeOf(this).frames.search.bind(this),

cvat-data/src/ts/cvat-data.ts

@@ -327,17 +327,11 @@ export class FrameDecoder {
         }
     }
 
-    get cachedChunks(): number[] {
-        return Object.keys(this.decodedChunks).map((chunkNumber: string) => +chunkNumber).sort((a, b) => a - b);
-    }
-
-    get cachedFrames(): string[] {
-        const chunks = Object.keys(this.decodedChunks).map((chunkNumber: string) => +chunkNumber).sort((a, b) => a - b);
-        return chunks.map((chunk) => {
-            const frames = Object.keys(this.decodedChunks[chunk]).map((frame) => +frame);
-            const min = Math.min(...frames);
-            const max = Math.max(...frames);
-            return `${min}:${max}`;
-        });
+    public cachedChunks(includeInProgress = false): number[] {
+        const chunkIsBeingDecoded = includeInProgress && this.chunkIsBeingDecoded ?
+            Math.floor(this.chunkIsBeingDecoded.start / this.chunkSize) : null;
+        return Object.keys(this.decodedChunks).map((chunkNumber: string) => +chunkNumber).concat(
+            ...(chunkIsBeingDecoded !== null ? [chunkIsBeingDecoded] : []),
+        ).sort((a, b) => a - b);
     }
 }

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.54.2",
+  "version": "1.55.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/annotation-actions.ts

@@ -581,10 +581,41 @@ export function switchPlay(playing: boolean): AnyAction {
     };
 }
 
-export function confirmCanvasReady(): AnyAction {
+export function confirmCanvasReady(ranges?: string): AnyAction {
     return {
         type: AnnotationActionTypes.CONFIRM_CANVAS_READY,
-        payload: {},
+        payload: { ranges },
+    };
+}
+
+export function confirmCanvasReadyAsync(): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>, getState: () => CombinedState): Promise<void> => {
+        try {
+            const state: CombinedState = getState();
+            const { instance: job } = state.annotation.job;
+            const chunks = await job.frames.cachedChunks() as number[];
+            const { startFrame, stopFrame, dataChunkSize } = job;
+
+            const ranges = chunks.map((chunk) => (
+                [
+                    Math.max(startFrame, chunk * dataChunkSize),
+                    Math.min(stopFrame, (chunk + 1) * dataChunkSize - 1),
+                ]
+            )).reduce<Array<[number, number]>>((acc, val) => {
+                if (acc.length && acc[acc.length - 1][1] + 1 === val[0]) {
+                    const newMax = val[1];
+                    acc[acc.length - 1][1] = newMax;
+                } else {
+                    acc.push(val as [number, number]);
+                }
+                return acc;
+            }, []).map(([start, end]) => `${start}:${end}`).join(';');
+
+            dispatch(confirmCanvasReady(ranges));
+        } catch (error) {
+            // even if error happens here, do not need to notify the users
+            dispatch(confirmCanvasReady());
+        }
     };
 }
 

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx

@@ -24,7 +24,7 @@ import config from 'config';
 import CVATTooltip from 'components/common/cvat-tooltip';
 import FrameTags from 'components/annotation-page/tag-annotation-workspace/frame-tags';
 import {
-    confirmCanvasReady,
+    confirmCanvasReadyAsync,
     dragCanvas,
     zoomCanvas,
     resetCanvas,
@@ -259,7 +259,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
 function mapDispatchToProps(dispatch: any): DispatchToProps {
     return {
         onSetupCanvas(): void {
-            dispatch(confirmCanvasReady());
+            dispatch(confirmCanvasReadyAsync());
         },
         onDragCanvas(enabled: boolean): void {
             dispatch(dragCanvas(enabled));

cvat-ui/src/components/annotation-page/canvas/views/canvas3d/canvas-wrapper3D.tsx

@@ -16,7 +16,7 @@ import Spin from 'antd/lib/spin';
 
 import {
     activateObject,
-    confirmCanvasReady,
+    confirmCanvasReadyAsync,
     createAnnotationsAsync,
     dragCanvas,
     editShape,
@@ -131,7 +131,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             dispatch(dragCanvas(enabled));
         },
         onSetupCanvas(): void {
-            dispatch(confirmCanvasReady());
+            dispatch(confirmCanvasReadyAsync());
         },
         onResetCanvas(): void {
             dispatch(resetCanvas());

cvat-ui/src/components/annotation-page/styles.scss

@@ -3,7 +3,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base.scss';
+@import '../../base';
 
 .cvat-annotation-page.ant-layout {
     height: 100%;
@@ -126,15 +126,39 @@
     }
 }
 
-.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;
+    height: $grid-unit-size;
+    position: absolute;
+    top: 0;
+    pointer-events: none;
+
+    > rect {
+        transition: width 0.5s;
+        fill: #1890ff;
+    }
+}
+
 .cvat-player-filename-wrapper {
     max-width: $grid-unit-size * 30;
     max-height: $grid-unit-size * 3;
@@ -221,7 +245,7 @@
 
             .ant-table-thead {
                 > tr > th {
-                    padding: 5px 5px;
+                    padding: $grid-unit-size 0 $grid-unit-size $grid-unit-size * 0.5;
                 }
             }
         }
@@ -446,7 +470,7 @@
             }
 
             .group {
-                background: rgba(216, 233, 250, 0.5);
+                background: rgba(216, 233, 250, 50%);
                 border: 1px solid #d3e0ec;
             }
         }

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,19 @@ function PlayerNavigation(props: Props): JSX.Element {
                             value={frameNumber || 0}
                             onChange={onSliderChange}
                         />
+                        {!!ranges && (
+                            <svg className='cvat-player-slider-progress' viewBox='0 0 1000 16' xmlns='http://www.w3.org/2000/svg'>
+                                {ranges.split(';').map((range) => {
+                                    const [start, end] = range.split(':').map((num) => +num);
+                                    const adjustedStart = Math.max(0, start - 1);
+                                    const totalSegments = stopFrame - startFrame;
+                                    const segmentWidth = 1000 / totalSegments;
+                                    const width = Math.max((end - adjustedStart), 1) * segmentWidth;
+                                    const offset = (Math.max((adjustedStart - startFrame), 0) / totalSegments) * 1000;
+                                    return (<rect rx={10} key={start} x={offset} y={0} height={16} width={width} />);
+                                })}
+                            </svg>
+                        )}
                     </Col>
                 </Row>
                 <Row justify='center'>

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}