React UI, data streaming: Added displaying filename

cvat-core/src/frames.js

@@ -13,7 +13,7 @@
  const PluginRegistry = require('./plugins');
  const serverProxy = require('./server-proxy');
  const { isBrowser, isNode } = require('browser-or-node');
- const { Exception, ArgumentError } = require('./exceptions');
+ const { Exception, ArgumentError, DataError } = require('./exceptions');
 
  // This is the frames storage
  const frameDataCache = {};
@@ -24,8 +24,28 @@
  * @hideconstructor
  */
  class FrameData {
- constructor(width, height, tid, number, startFrame, stopFrame, decodeForward) {
+ constructor({
+ width,
+ height,
+ name,
+ taskID,
+ frameNumber,
+ startFrame,
+ stopFrame,
+ decodeForward,
+ }) {
  Object.defineProperties(this, Object.freeze({
+ /**
+ * @name filename
+ * @type {string}
+ * @memberof module:API.cvat.classes.FrameData
+ * @readonly
+ * @instance
+ */
+ filename: {
+ value: name,
+ writable: false,
+ },
  /**
  * @name width
  * @type {integer}
@@ -49,7 +69,7 @@
  writable: false,
  },
  tid: {
- value: tid,
+ value: taskID,
  writable: false,
  },
  /**
@@ -60,7 +80,7 @@
  * @instance
  */
  number: {
- value: number,
+ value: frameNumber,
  writable: false,
  },
  startFrame: {
@@ -297,7 +317,7 @@
  });
  };
 
- const getFrameSize = (taskID, frame) => {
+ function getFrameMeta(taskID, frame) {
  const { meta, mode } = frameDataCache[taskID];
  let size = null;
  if (mode === 'interpolation') {
@@ -311,12 +331,12 @@
  size = meta.frames[frame];
  }
  } else {
- throw new ArgumentError(
+ throw new DataError(
  `Invalid mode is specified ${mode}`,
  );
  }
  return size;
- };
+ }
 
  class FrameBuffer {
  constructor(size, chunkSize, stopFrame, taskID) {
@@ -347,15 +367,15 @@
  };
  for (const frame of this._requestedChunks[chunkIdx].requestedFrames.entries()) {
  const requestedFrame = frame[1];
- const size = getFrameSize(this._taskID, requestedFrame);
- const frameData = new FrameData(
- size.width,
- size.height,
- this._taskID,
- requestedFrame,
- frameDataCache[this._taskID].startFrame,
- frameDataCache[this._taskID].stopFrame,
- );
+ const frameMeta = getFrameMeta(this._taskID, requestedFrame);
+ const frameData = new FrameData({
+ ...frameMeta,
+ taskID: this._taskID,
+ frameNumber: requestedFrame,
+ startFrame: frameDataCache[this._taskID].startFrame,
+ stopFrame: frameDataCache[this._taskID].stopFrame,
+ decodeForward: false,
+ });
 
  frameData.data().then(() => {
  if (!(chunkIdx in this._requestedChunks)
@@ -452,9 +472,15 @@
  }
 
  this._required = frameNumber;
- const size = getFrameSize(taskID, frameNumber);
- let frame = new FrameData(size.width, size.height, taskID, frameNumber,
- frameDataCache[taskID].startFrame, frameDataCache[taskID].stopFrame, !fillBuffer);
+ const frameMeta = getFrameMeta(taskID, frameNumber);
+ let frame = new FrameData({
+ ...frameMeta,
+ taskID,
+ frameNumber,
+ startFrame: frameDataCache[taskID].startFrame,
+ stopFrame: frameDataCache[taskID].stopFrame,
+ decodeForward: !fillBuffer,
+ });
 
  if (frameNumber in this._buffer) {
  frame = this._buffer[frameNumber];
@@ -559,9 +585,9 @@
  activeChunkRequest: null,
  nextChunkRequest: null,
  };
- const size = getFrameSize(taskID, frame);
+ const frameMeta = getFrameMeta(taskID, frame);
  // actual only for video chunks
- frameDataCache[taskID].provider.setRenderSize(size.width, size.height);
+ frameDataCache[taskID].provider.setRenderSize(frameMeta.width, frameMeta.height);
  }
 
  return frameDataCache[taskID].frameBuffer.require(frame, taskID, isPlaying, step);

cvat-core/src/session.js

@@ -421,6 +421,7 @@
  * @async
  * @throws {module:API.cvat.exceptions.PluginError}
  * @throws {module:API.cvat.exceptions.ServerError}
+ * @throws {module:API.cvat.exceptions.DataError}
  * @throws {module:API.cvat.exceptions.ArgumentError}
  */
 

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

@@ -744,7 +744,13 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
  payload: {
  number: state.annotation.player.frame.number,
  data: state.annotation.player.frame.data,
+ filename: state.annotation.player.frame.filename,
+ delay: state.annotation.player.frame.delay,
+ changeTime: state.annotation.player.frame.changeTime,
  states: state.annotation.annotations.states,
+ minZ: state.annotation.annotations.zLayer.min,
+ maxZ: state.annotation.annotations.zLayer.max,
+ curZ: state.annotation.annotations.zLayer.cur,
  },
  });
 
@@ -789,9 +795,11 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
  payload: {
  number: toFrame,
  data,
+ filename: data.filename,
  states,
  minZ,
  maxZ,
+ curZ: maxZ,
  changeTime: currentTime + delay,
  delay,
  },
@@ -936,20 +944,21 @@ export function getJobAsync(
  const colors = [...cvat.enums.colors];
 
  loadJobEvent.close(await jobInfoGenerator(job));
-
  dispatch({
  type: AnnotationActionTypes.GET_JOB_SUCCESS,
  payload: {
  job,
  states,
  frameNumber,
+ frameFilename: frameData.filename,
  frameData,
  colors,
  filters,
  minZ,
  maxZ,
  },
  });
+ dispatch(changeFrameAsync(frameNumber, false));
  } catch (error) {
  dispatch({
  type: AnnotationActionTypes.GET_JOB_FAILED,

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

@@ -119,6 +119,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
+ word-break: break-all;
 }
 
 .cvat-player-frame-url-icon {

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -20,6 +20,7 @@ interface Props {
  startFrame: number;
  stopFrame: number;
  frameNumber: number;
+ frameFilename: string;
  inputFrameRef: React.RefObject<InputNumber>;
  onSliderChange(value: SliderValue): void;
  onInputChange(value: number | undefined): void;
@@ -31,6 +32,7 @@ function PlayerNavigation(props: Props): JSX.Element {
  startFrame,
  stopFrame,
  frameNumber,
+ frameFilename,
  inputFrameRef,
  onSliderChange,
  onInputChange,
@@ -53,8 +55,8 @@ function PlayerNavigation(props: Props): JSX.Element {
  </Row>
  <Row type='flex' justify='center'>
  <Col className='cvat-player-filename-wrapper'>
- <Tooltip title='filename.png'>
- <Text type='secondary'>filename.png</Text>
+ <Tooltip title={frameFilename}>
+ <Text type='secondary'>{frameFilename}</Text>
  </Tooltip>
  </Col>
  <Col offset={1}>

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -23,6 +23,7 @@ interface Props {
  saving: boolean;
  savingStatuses: string[];
  frameNumber: number;
+ frameFilename: string;
  inputFrameRef: React.RefObject<InputNumber>;
  startFrame: number;
  stopFrame: number;
@@ -54,6 +55,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
  redoAction,
  playing,
  frameNumber,
+ frameFilename,
  inputFrameRef,
  startFrame,
  stopFrame,
@@ -102,6 +104,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
  startFrame={startFrame}
  stopFrame={stopFrame}
  frameNumber={frameNumber}
+ frameFilename={frameFilename}
  inputFrameRef={inputFrameRef}
  onSliderChange={onSliderChange}
  onInputChange={onInputChange}

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -32,6 +32,7 @@ import { CombinedState, FrameSpeed, Workspace } from 'reducers/interfaces';
 interface StateToProps {
  jobInstance: any;
  frameNumber: number;
+ frameFilename: string;
  frameStep: number;
  frameSpeed: FrameSpeed;
  frameDelay: number;
@@ -63,6 +64,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
  player: {
  playing,
  frame: {
+ filename: frameFilename,
  number: frameNumber,
  delay: frameDelay,
  },
@@ -103,6 +105,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
  saving,
  savingStatuses,
  frameNumber,
+ frameFilename,
  jobInstance,
  undoAction: history.undo[history.undo.length - 1],
  redoAction: history.redo[history.redo.length - 1],
@@ -208,7 +211,10 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
  setTimeout(() => {
  const { playing: stillPlaying } = this.props;
  if (stillPlaying) {
- onChangeFrame(frameNumber + 1 + framesSkiped, stillPlaying, framesSkiped + 1);
+ onChangeFrame(
+ frameNumber + 1 + framesSkiped,
+ stillPlaying, framesSkiped + 1,
+ );
  }
  }, frameDelay);
  } else {
@@ -450,6 +456,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
  stopFrame,
  },
  frameNumber,
+ frameFilename,
  undoAction,
  redoAction,
  workspace,
@@ -622,6 +629,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
  startFrame={startFrame}
  stopFrame={stopFrame}
  frameNumber={frameNumber}
+ frameFilename={frameFilename}
  inputFrameRef={this.inputFrameRef}
  undoAction={undoAction}
  redoAction={redoAction}

cvat-ui/src/reducers/annotation-reducer.ts

@@ -40,6 +40,7 @@ const defaultState: AnnotationState = {
  player: {
  frame: {
  number: 0,
+ filename: '',
  data: null,
  fetching: false,
  delay: 0,
@@ -111,6 +112,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
  job,
  states,
  frameNumber: number,
+ frameFilename: filename,
  colors,
  filters,
  frameData: data,
@@ -145,6 +147,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
  ...state.player,
  frame: {
  ...state.player.frame,
+ filename,
  number,
  data,
  },
@@ -192,9 +195,11 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
  const {
  number,
  data,
+ filename,
  states,
  minZ,
  maxZ,
+ curZ,
  delay,
  changeTime,
  } = action.payload;
@@ -209,6 +214,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
  ...state.player,
  frame: {
  data,
+ filename,
  number,
  fetching: false,
  changeTime,
@@ -222,7 +228,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
  zLayer: {
  min: minZ,
  max: maxZ,
- cur: maxZ,
+ cur: curZ,
  },
  },
  };

cvat-ui/src/reducers/interfaces.ts

@@ -320,6 +320,7 @@ export interface AnnotationState {
  player: {
  frame: {
  number: number;
+ filename: string;
  data: any | null;
  fetching: boolean;
  delay: number;