Support of context images for 2D tasks (#3122)
Boris Sekachev
5 years ago
committed by
GitHub
parent
975996ef62
commit
6f52ef30e4
@ -0,0 +1,74 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { notification } from 'antd';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { QuestionCircleOutlined, ShrinkOutlined } from '@ant-design/icons';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import Image from 'antd/lib/image';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { hideShowContextImage, getContextImage } from 'actions/annotation-actions';
|
||||
import CVATTooltip from 'components/common/cvat-tooltip';
|
||||
|
||||
export default function ContextImage(): JSX.Element | null {
|
||||
const dispatch = useDispatch();
|
||||
const { number: frame, hasRelatedContext } = useSelector((state: CombinedState) => state.annotation.player.frame);
|
||||
const { data: contextImageData, hidden: contextImageHidden, fetching: contextImageFetching } = useSelector(
|
||||
(state: CombinedState) => state.annotation.player.contextImage,
|
||||
);
|
||||
const [requested, setRequested] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (requested) {
|
||||
setRequested(false);
|
||||
}
|
||||
}, [frame]);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasRelatedContext && !contextImageHidden && !requested) {
|
||||
dispatch(getContextImage());
|
||||
setRequested(true);
|
||||
}
|
||||
}, [contextImageHidden, requested, hasRelatedContext]);
|
||||
|
||||
if (!hasRelatedContext) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='cvat-context-image-wrapper' {...(contextImageHidden ? { style: { width: '32px' } } : {})}>
|
||||
<div className='cvat-context-image-wrapper-header' />
|
||||
{contextImageFetching ? <Spin size='small' /> : null}
|
||||
{contextImageHidden ? (
|
||||
<CVATTooltip title='A context image is available'>
|
||||
<QuestionCircleOutlined
|
||||
className='cvat-context-image-switcher'
|
||||
onClick={() => dispatch(hideShowContextImage(false))}
|
||||
/>
|
||||
</CVATTooltip>
|
||||
) : (
|
||||
<>
|
||||
<ShrinkOutlined
|
||||
className='cvat-context-image-switcher'
|
||||
onClick={() => dispatch(hideShowContextImage(true))}
|
||||
/>
|
||||
<Image
|
||||
{...(contextImageData ? { src: contextImageData } : {})}
|
||||
onError={() => {
|
||||
notification.error({
|
||||
message: 'Could not display context image',
|
||||
description: `Source is ${
|
||||
contextImageData === null ? 'empty' : contextImageData.slice(0, 100)
|
||||
}`,
|
||||
});
|
||||
}}
|
||||
className='cvat-context-image'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface Props {
|
||||
frame: number;
|
||||
contextImageHide: boolean;
|
||||
loaded: boolean;
|
||||
data: string;
|
||||
getContextImage(): void;
|
||||
}
|
||||
|
||||
export default function ContextImage(props: Props): JSX.Element {
|
||||
const {
|
||||
contextImageHide, loaded, data, getContextImage,
|
||||
} = props;
|
||||
|
||||
useEffect(() => {
|
||||
if (!contextImageHide && !loaded) {
|
||||
getContextImage();
|
||||
}
|
||||
}, [contextImageHide, loaded]);
|
||||
|
||||
if (!contextImageHide && data !== '') {
|
||||
return (
|
||||
<div className='cvat-contextImage'>
|
||||
<img src={data} alt='Context not available' className='cvat-contextImage-show' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import CameraIcon from '@ant-design/icons/CameraOutlined';
|
||||
|
||||
import CVATTooltip from 'components/common/cvat-tooltip';
|
||||
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||
import { ActiveControl } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
canvasInstance: Canvas;
|
||||
activeControl: ActiveControl;
|
||||
hideShowContextImage: (hidden: boolean) => void;
|
||||
contextImageHide: boolean;
|
||||
}
|
||||
|
||||
function PhotoContextControl(props: Props): JSX.Element {
|
||||
const { activeControl, contextImageHide, hideShowContextImage } = props;
|
||||
|
||||
return (
|
||||
<CVATTooltip title='Photo context show/hide' placement='right'>
|
||||
<CameraIcon
|
||||
className={`cvat-context-image-control
|
||||
cvat-control-side-bar-icon-size ${
|
||||
activeControl === ActiveControl.PHOTO_CONTEXT ? 'cvat-active-canvas-control' : ''
|
||||
}`}
|
||||
onClick={(): void => {
|
||||
hideShowContextImage(!contextImageHide);
|
||||
}}
|
||||
/>
|
||||
</CVATTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PhotoContextControl);
|
||||
Loading…
Reference in New Issue