diff --git a/e2e/tests/helpers.js b/e2e/tests/helpers.js index 3dcc60bb4..cacd0a967 100644 --- a/e2e/tests/helpers.js +++ b/e2e/tests/helpers.js @@ -22,7 +22,6 @@ async function initLabelStudio({ 'update', 'submit', 'controls', - 'side-column', 'topbar', 'annotations:history', 'annotations:current', diff --git a/src/components/AnnotationTab/AnnotationTab.js b/src/components/AnnotationTab/AnnotationTab.js deleted file mode 100644 index 1abe2e0ee..000000000 --- a/src/components/AnnotationTab/AnnotationTab.js +++ /dev/null @@ -1,65 +0,0 @@ -import { observer } from 'mobx-react'; -import { Block, Elem } from '../../utils/bem'; -import { CurrentEntity } from '../CurrentEntity/CurrentEntity'; -import Entities from '../Entities/Entities'; -import Entity from '../Entity/Entity'; -import Relations from '../Relations/Relations'; -import { Comments } from '../Comments/Comments'; - -import './CommentsSection.styl'; - -export const AnnotationTab = observer(({ store }) => { - const as = store.annotationStore; - const annotation = as.selectedHistory ?? as.selected; - const { selectionSize } = annotation || {}; - const hasSegmentation = store.hasSegmentation; - - return ( - <> - {store.hasInterface('annotations:current') && ( - - )} - - {selectionSize ? ( - - ) : hasSegmentation ? ( -

- No Region selected -

- ) : null} - - {hasSegmentation && ( - - )} - - {hasSegmentation && ( - - )} - - {store.hasInterface('annotations:comments') && store.commentStore.isCommentable && ( - - - Comments - - - - - - - )} - - ); -}); diff --git a/src/components/App/App.js b/src/components/App/App.js index 26fa6bb4a..413c3f4e5 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -35,8 +35,6 @@ import '../../tags/visual'; import { TreeValidation } from '../TreeValidation/TreeValidation'; import { guidGenerator } from '../../utils/unique'; import Grid from './Grid'; -import { SidebarPage, SidebarTabs } from '../SidebarTabs/SidebarTabs'; -import { AnnotationTab } from '../AnnotationTab/AnnotationTab'; import { SidePanels } from '../SidePanels/SidePanels'; import { SideTabsPanels } from '../SidePanels/TabPanels/SideTabsPanels'; import { Block, Elem } from '../../utils/bem'; @@ -44,7 +42,7 @@ import './App.styl'; import { Space } from '../../common/Space/Space'; import { DynamicPreannotationsControl } from '../AnnotationTab/DynamicPreannotationsControl'; import { isDefined } from '../../utils/utilities'; -import { FF_DEV_1170, FF_DEV_3873, isFF } from '../../utils/feature-flags'; +import { FF_DEV_3873, isFF } from '../../utils/feature-flags'; import { Annotation } from './Annotation'; import { Button } from '../../common/Button/Button'; @@ -216,11 +214,10 @@ class App extends Component { ); - const outlinerEnabled = isFF(FF_DEV_1170); const newUIEnabled = isFF(FF_DEV_3873); return ( - + {newUIEnabled ? ( @@ -247,56 +244,29 @@ class App extends Component { mod={{ viewAll: viewingAll, bsp: settings.bottomSidePanel, - outliner: outlinerEnabled, showingBottomBar: newUIEnabled, }} > - {outlinerEnabled ? ( - isFF(FF_DEV_3873) ? ( - - {mainContent} - {isDefined(store) && store.hasInterface('topbar') && } - - ) : ( - - {mainContent} - - {isFF(FF_DEV_3873) && isDefined(store) && store.hasInterface('topbar') && } - - ) + {isFF(FF_DEV_3873) ? ( + + {mainContent} + {isDefined(store) && store.hasInterface('topbar') && } + ) : ( - <> + {mainContent} - {viewingAll === false && ( - - {store.hasInterface('side-column') && ( - - - - - - {this.props.panels.map(({ name, title, Component }) => ( - - - - ))} - - )} - - )} - - {newUIEnabled && isDefined(store) && store.hasInterface('topbar') && } - + {isFF(FF_DEV_3873) && isDefined(store) && store.hasInterface('topbar') && } + )} diff --git a/src/components/App/App.styl b/src/components/App/App.styl index 7bb5e87c0..fbed6512f 100644 --- a/src/components/App/App.styl +++ b/src/components/App/App.styl @@ -14,9 +14,6 @@ flex-direction column background-color var(--main-bg-color) - &__auto_height - height: auto - &_fullscreen position absolute background white @@ -36,16 +33,11 @@ .wrapper flex 1 display grid - grid-template-columns calc(100% - 320px) 320px grid-template-rows 1fr align-items stretch max-width 100% height calc(100% - var(--topbar-height)) - - // view all and new UI have only one children, so no grid required - &_view_all - &_outliner - grid-template-columns 100% + grid-template-columns 100% & .menu padding-bottom 8px diff --git a/src/components/CurrentEntity/Controls.js b/src/components/CurrentEntity/Controls.js deleted file mode 100644 index 29606b97b..000000000 --- a/src/components/CurrentEntity/Controls.js +++ /dev/null @@ -1,107 +0,0 @@ -import { inject, observer } from 'mobx-react'; -import { Button } from '../../common/Button/Button'; -import { Block, Elem } from '../../utils/bem'; -import { isDefined } from '../../utils/utilities'; -import { IconBan } from '../../assets/icons'; - -import './Controls.styl'; -import { Hotkey } from '../../core/Hotkey'; - -const TOOLTIP_DELAY = 0.8; - -const ButtonTooltip = inject('store')(observer(({ store, name, title, children }) => { - return ( - - {children} - - ); -})); - -const controlsInjector = inject(({ store }) => { - return { - store, - history: store?.annotationStore?.selected?.history, - }; -}); - -export const Controls = controlsInjector(observer(({ store, history, annotation }) => { - const isReview = store.hasInterface('review'); - const historySelected = isDefined(store.annotationStore.selectedHistory); - const { userGenerate, sentUserGenerate, versions, results } = annotation; - const buttons = []; - - const disabled = store.isSubmitting || historySelected; - const submitDisabled = store.hasInterface('annotations:deny-empty') && results.length === 0; - - if (isReview) { - buttons.push( - - - , - ); - - buttons.push( - - - , - ); - } else if (annotation.skipped) { - buttons.push( - - Annotation skipped - , - ); - } else { - if (store.hasInterface('skip')) { - buttons.push( - - - , - ); - } - - if ((userGenerate && !sentUserGenerate) || (store.explore && !userGenerate && store.hasInterface('submit'))) { - const title = submitDisabled - ? 'Empty annotations denied in this project' - : 'Save results'; - // span is to display tooltip for disabled button - - buttons.push( - - - - - , - ); - } - - if ((userGenerate && sentUserGenerate) || (!userGenerate && store.hasInterface('update'))) { - buttons.push( - - - , - ); - } - } - - return ( - - {buttons} - - ); -})); diff --git a/src/components/CurrentEntity/Controls.styl b/src/components/CurrentEntity/Controls.styl deleted file mode 100644 index e0871260e..000000000 --- a/src/components/CurrentEntity/Controls.styl +++ /dev/null @@ -1,16 +0,0 @@ -.controls - height 32px - display grid - grid-auto-columns 1fr - grid-auto-flow column - grid-column-gap 12px - justify-content flex-end - - &__tooltip-wrapper - button - width 100% - - &__skipped-info - display flex - svg - margin 0 8px 0 4px diff --git a/src/components/CurrentEntity/CurrentEntity.js b/src/components/CurrentEntity/CurrentEntity.js deleted file mode 100644 index fc11b8d29..000000000 --- a/src/components/CurrentEntity/CurrentEntity.js +++ /dev/null @@ -1,70 +0,0 @@ -import { inject, observer } from 'mobx-react'; -import { Space } from '../../common/Space/Space'; -import { Block, Elem } from '../../utils/bem'; -import { FF_DEV_2290, isFF } from '../../utils/feature-flags'; -import { DraftPanel } from '../DraftPanel/DraftPanel'; -import { AnnotationHistory } from './AnnotationHistory.tsx'; -import { useRegionsCopyPaste } from '../../hooks/useRegionsCopyPaste'; -import './CurrentEntity.styl'; - -const injector = inject('store'); - -export const CurrentEntity = injector(observer(({ - entity, - showHistory = true, -}) => { - const showDraftInHistory = isFF(FF_DEV_2290); - - useRegionsCopyPaste(entity); - - return entity ? ( - e.stopPropagation()}> - {/* - - {entity.type === 'annotation' ? : } - ID: {entity.pk ?? entity.id} - - */} - - {/* - */} - {/*Always show container to keep the interface layout unchangeable*/} - {/* {(entity.parent_prediction) && ( - - - - - ID: { entity.parent_prediction } - - - )} - {(entity.parent_annotation) && ( - - - - - ID: { entity.parent_annotation } - - - )} */} - {/* - */} - - {!showDraftInHistory && ( - - )} - - {/* {showHistory && !entity.userGenerate && ( */} - {showHistory && ( - - Annotation History - #{entity.pk ?? entity.id} - - )} - - - ) : null; -})); diff --git a/src/components/CurrentEntity/CurrentEntity.styl b/src/components/CurrentEntity/CurrentEntity.styl deleted file mode 100644 index 517bf992a..000000000 --- a/src/components/CurrentEntity/CurrentEntity.styl +++ /dev/null @@ -1,70 +0,0 @@ -.annotation - padding 16px 16px 4px - - &__title - padding 0 0 8px - font-weight 500 - - &__id - font-weight 400 - opacity 0.6 - - &__id - display flex - align-items center - - &__type - width 14px - height 14px - margin-right 5px - - svg - width 100% - height 100% - display block - - &__text_id - position: relative - top: -3px - - &__info - height 32px - display flex - align-items center - justify-content space-between - margin-left 9px - - &__parent - display flex - align-items: center - - &__parent_info - position relative - height 20px - display flex - align-items center - justify-content space-between - margin-left 8px - - &__parent_link - color: #000 - position: absolute - top: -20px - left: -12px - opacity: 20% - - &__parent_icon - width 14px - height 14px - margin-right 5px - display: inline - - &_prediction - color #944BFF - - &_annotation - color #0099FF - - &__parent_text - color: #000 - opacity: 40% diff --git a/src/components/CurrentEntity/HistoryActions.js b/src/components/CurrentEntity/HistoryActions.js deleted file mode 100644 index f4aaad50b..000000000 --- a/src/components/CurrentEntity/HistoryActions.js +++ /dev/null @@ -1,50 +0,0 @@ -import { observer } from 'mobx-react'; -import { LsRedo, LsRemove, LsUndo } from '../../assets/icons'; -import { Button } from '../../common/Button/Button'; -import { Tooltip } from '../../common/Tooltip/Tooltip'; -import { Block, Elem } from '../../utils/bem'; -import './HistoryActions.styl'; -import { Hotkey } from '../../core/Hotkey'; - -export const HistoryActions = observer(({ annotation }) => { - const { history } = annotation; - - return ( - - - annotation.undo()} - icon={} - /> - - - annotation.redo()} - icon={} - /> - - - history?.reset()} - icon={} - /> - - - ); -}); diff --git a/src/components/CurrentEntity/HistoryActions.styl b/src/components/CurrentEntity/HistoryActions.styl deleted file mode 100644 index eace2eb78..000000000 --- a/src/components/CurrentEntity/HistoryActions.styl +++ /dev/null @@ -1,18 +0,0 @@ -.history-buttons - display flex - - &__action - width 36px - height 36px - border none - padding 0 !important - background none !important - - &:disabled - opacity 0.6 - - svg - display block - - &_delete - color #DD0000 diff --git a/src/components/Entities/Entities.js b/src/components/Entities/Entities.js deleted file mode 100644 index cc2fc7422..000000000 --- a/src/components/Entities/Entities.js +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import { Dropdown } from 'antd'; -import { observer } from 'mobx-react'; - -import './Entities.scss'; -import { RegionTree } from './RegionTree'; -import { LabelList } from './LabelList'; -import { SortMenu, SortMenuIcon } from './SortMenu'; -import { Oneof } from '../../common/Oneof/Oneof'; -import { Space } from '../../common/Space/Space'; -import { Block, Elem } from '../../utils/bem'; -import { RadioGroup } from '../../common/RadioGroup/RadioGroup'; -import './Entities.styl'; -import { Button } from '../../common/Button/Button'; -import { LsInvisible, LsTrash, LsVisible } from '../../assets/icons'; -import { confirm } from '../../common/Modal/Modal'; -import { Tooltip } from '../../common/Tooltip/Tooltip'; - -export default observer(({ - regionStore, - annotation, -}) => { - const { classifications, regions, view } = regionStore; - const count = regions.length + (view === 'regions' ? classifications.length : 0); - const toggleVisibility = e => { - e.preventDefault(); - e.stopPropagation(); - regionStore.toggleVisibility(); - }; - - return ( - - - - { - regionStore.setView(e.target.value); - }} - > - Regions{count ?  {count} : null} - Labels - - - {annotation.isReadOnly() && ( - - - , - ); - - entityButtons.push( - - - , - ); - } - - entityButtons.push( - - - , - ); - - return ( - - - - {node ? ( - <> - - {' '} - (ID: {node.id}) - - ) : `${selectionSize} Region${(selectionSize > 1) ? 's are' : ' is'} selected` } - - {!hasEditableNodes && } - -
- {node?.score && ( - - - Score: {node.score} - - - )} - - {node?.meta?.text && ( - - Meta: {node.meta.text} -   - { - node.deleteMetaInfo(); - }} - /> - - )} - - {node?.results.map(renderResult)} -
- - {node?.isDrawing && ( - - - Incomplete {node.type.replace('region', '')} - - )} - -
- - - {entityButtons} - - - {hasEditableNodes && ( - - - - )} - - {/* */} - {/* */} - {/* */} -
- - {editMode && ( -
{ - node.setMetaInfo(node.normInput); - setEditMode(false); - }} - > - { - const { value } = ev.target; - - node.setNormInput(value); - }} - style={{ marginBottom: '0.5em' }} - placeholder="Meta Information" - /> - - - - -
- )} - - ); -}); diff --git a/src/components/Entity/Entity.module.scss b/src/components/Entity/Entity.module.scss deleted file mode 100644 index 83f6415e4..000000000 --- a/src/components/Entity/Entity.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -.block { - display: flex; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - margin-top: 1em; -} - -.button { - margin-bottom: 10px; - margin-right: 10px; -} - -.labels { - word-break: break-word; -} - -.tag { - margin-bottom: 5px; - white-space: normal !important; -} - -.statesblk > span { - display: block; -} - -.statesblk > div { - margin-bottom: 0; -} - -.row { - display: flex; - white-space: pre-wrap; - margin-bottom: 12px; -} - -.long { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/src/components/Entity/Entity.styl b/src/components/Entity/Entity.styl deleted file mode 100644 index 3201243e8..000000000 --- a/src/components/Entity/Entity.styl +++ /dev/null @@ -1,25 +0,0 @@ -.entity - padding 0 15px - margin-top 12px - - &__info - margin-bottom 12px - - &__warning - box-sizing border-box - display flex - flex-direction row - align-items center - padding 8px - gap 8px - background rgba(255, 183, 122, 0.16) - border 1px solid rgba(137, 128, 152, 0.16) - border-radius 4px - margin 16px 0 0 - flex none - order 0 - flex-grow 1 - svg - width 20px - height 17px - fill var(--incomplete-warning-color, #FA8C16) diff --git a/src/components/Relations/Relations.js b/src/components/Relations/Relations.js deleted file mode 100644 index dc21585ef..000000000 --- a/src/components/Relations/Relations.js +++ /dev/null @@ -1,177 +0,0 @@ -import React from 'react'; -import { Button, List, Select } from 'antd'; -import { getRoot, isValidReference } from 'mobx-state-tree'; -import { observer } from 'mobx-react'; -import { ArrowLeftOutlined, ArrowRightOutlined, DeleteOutlined, MoreOutlined, SwapOutlined } from '@ant-design/icons'; - -import styles from './Relations.module.scss'; -import { NodeMinimal } from '../Node/Node'; -import { wrapArray } from '../../utils/utilities'; -import globalStyles from '../../styles/global.module.scss'; - -import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; -import { Block, Elem } from '../../utils/bem'; -import './Relations.styl'; - -const { Option } = Select; - -const RelationMeta = observer(({ rl }) => { - const r = rl.relations; - const selected = r.getSelected().map(v => v.value); - - return ( -
-

LABELS

- -
- ); -}); - -/** - * Relation Component - * - * Shows the relationship between two selected items - */ -const Relation = observer(({ rl }) => { - if (!isValidReference(() => rl.node1) || !isValidReference(() => rl.node2)) { - return null; - } - - const iconMap = { - left: , - right: , - bi: , - }; - - return ( -
-
-
- -
- -
- -
-
-
- ); -}); - -const ListItem = observer(({ item }) => { - const node = getRoot(item).annotationStore.selected.highlightedNode; - const isSelected = node === item.node1 || node === item.node2; - - return ( - { - item.toggleHighlight(); - item.setSelfHighlight(true); - }} - onMouseLeave={() => { - item.toggleHighlight(); - item.setSelfHighlight(false); - }} - > -
-
- -
-
- {item.hasRelations && ( - - )} -   - -
-
- {item.showMeta && } - - ); -}); - -const RelationsComponent = ({ store }) => { - const annotation = store.annotationStore.selected; - const { relations } = annotation.relationStore; - const hasRelations = relations.length > 0; - const relationsUIVisible = annotation.relationStore.showConnections; - - return ( - - {/* override LS styles' height */} - - Relations ({relations.length}) - {hasRelations && ( -