Skip to content

Commit

Permalink
Refactored tab panes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsekachev
bsekachev committed Feb 9, 2024
1 parent 5f49a7c commit 43e0897
Show file tree
Hide file tree
Showing 9 changed files with 246 additions and 225 deletions.
103 changes: 47 additions & 56 deletions cvat-ui/src/components/analytics-page/analytics-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useLocation, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { Row, Col } from 'antd/lib/grid';
import Tabs from 'antd/lib/tabs';
import Text from 'antd/lib/typography/Text';
import Title from 'antd/lib/typography/Title';
import notification from 'antd/lib/notification';
import { useIsMounted } from 'utils/hooks';
Expand Down Expand Up @@ -233,21 +232,20 @@ function AnalyticsPage(): JSX.Element {
</Col>
);
tabs = (
<Tabs type='card' className='cvat-project-analytics-tabs'>
<Tabs.TabPane
tab={(
<span>
<Text>Performance</Text>
</span>
)}
key='Overview'
>
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
</Tabs.TabPane>
</Tabs>
<Tabs
type='card'
className='cvat-project-analytics-tabs'
items={[{
key: 'Overview',
label: 'Performance',
children: [(
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
)],
}]}
/>
);
break;
}
Expand All @@ -267,31 +265,26 @@ function AnalyticsPage(): JSX.Element {
</Col>
);
tabs = (
<Tabs type='card' className='cvat-task-analytics-tabs'>
<Tabs.TabPane
tab={(
<span>
<Text>Performance</Text>
</span>
)}
key='overview'
>
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
</Tabs.TabPane>
<Tabs.TabPane
tab={(
<span>
<Text>Quality</Text>
</span>
)}
key='quality'
>
<TaskQualityComponent task={instance} onJobUpdate={onJobUpdate} />
</Tabs.TabPane>
</Tabs>
<Tabs
type='card'
className='cvat-task-analytics-tabs'
items={[{
key: 'overview',
label: 'Performance',
children: [(
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
)],
}, {
key: 'quality',
label: 'Quality',
children: [(
<TaskQualityComponent task={instance} onJobUpdate={onJobUpdate} />
)],
}]}
/>
);
break;
}
Expand All @@ -312,21 +305,19 @@ function AnalyticsPage(): JSX.Element {
</Col>
);
tabs = (
<Tabs type='card'>
<Tabs.TabPane
tab={(
<span>
<Text>Performance</Text>
</span>
)}
key='overview'
>
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
</Tabs.TabPane>
</Tabs>
<Tabs
type='card'
items={[{
key: 'overview',
label: 'Performance',
children: [(
<AnalyticsOverview
report={analyticsReportInstance}
onTimePeriodChange={onAnalyticsTimePeriodChange}
/>
)],
}]}
/>
);
break;
}
Expand Down
30 changes: 19 additions & 11 deletions ...ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,17 +734,25 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
</Col>
</Row>
{libraryInitialized ? (
<Tabs tabBarGutter={8}>
<Tabs.TabPane key='drawing' tab='Drawing' className='cvat-opencv-control-tabpane'>
{this.renderDrawingContent()}
</Tabs.TabPane>
<Tabs.TabPane key='image' tab='Image' className='cvat-opencv-control-tabpane'>
{this.renderImageContent()}
</Tabs.TabPane>
<Tabs.TabPane key='tracking' tab='Tracking' className='cvat-opencv-control-tabpane'>
{this.renderTrackingContent()}
</Tabs.TabPane>
</Tabs>
<Tabs
tabBarGutter={8}
items={[{
key: 'drawing',
label: 'Drawing',
children: [this.renderDrawingContent()],
className: 'cvat-opencv-control-tabpane',
}, {
key: 'image',
label: 'Image',
children: [this.renderImageContent()],
className: 'cvat-opencv-control-tabpane',
}, {
key: 'tracking',
label: 'Tracking',
children: [this.renderTrackingContent()],
className: 'cvat-opencv-control-tabpane',
}]}
/>
) : (
<Row justify='start' align='middle'>
<Col>
Expand Down
38 changes: 24 additions & 14 deletions ...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1357,20 +1357,30 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
</Text>
</Col>
</Row>
<Tabs type='card' tabBarGutter={8}>
<Tabs.TabPane key='interactors' tab='Interactors'>
{this.renderMasksConvertingBlock()}
{this.renderLabelBlock()}
{this.renderInteractorBlock()}
</Tabs.TabPane>
<Tabs.TabPane key='detectors' tab='Detectors'>
{this.renderDetectorBlock()}
</Tabs.TabPane>
<Tabs.TabPane key='trackers' tab='Trackers'>
{this.renderLabelBlock()}
{this.renderTrackerBlock()}
</Tabs.TabPane>
</Tabs>
<Tabs
type='card'
tabBarGutter={8}
items={[{
key: 'interactors',
label: 'Interactors',
children: [
this.renderMasksConvertingBlock(),
this.renderLabelBlock(),
this.renderInteractorBlock(),
],
}, {
key: 'detectors',
label: 'Detectors',
children: [this.renderDetectorBlock()],
}, {
key: 'trackers',
label: 'Trackers',
children: [
this.renderLabelBlock(),
this.renderTrackerBlock(),
],
}]}
/>
</div>
);
}
Expand Down
31 changes: 15 additions & 16 deletions ...i/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import React, { Dispatch, TransitionEvent } from 'react';
import { AnyAction } from 'redux';
import { connect } from 'react-redux';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text';
import Tabs from 'antd/lib/tabs';
import Layout from 'antd/lib/layout';

Expand Down Expand Up @@ -97,21 +96,21 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>

<Tabs type='card' defaultActiveKey='objects' className='cvat-objects-sidebar-tabs'>
<Tabs.TabPane tab={<Text strong>Objects</Text>} key='objects'>
{objectsList}
</Tabs.TabPane>
<Tabs.TabPane forceRender tab={<Text strong>Labels</Text>} key='labels'>
<LabelsList />
</Tabs.TabPane>

{is2D ? (
<Tabs.TabPane tab={<Text strong>Issues</Text>} key='issues'>
<IssuesListComponent />
</Tabs.TabPane>
) : null}
</Tabs>

<Tabs
type='card'
defaultActiveKey='objects'
className='cvat-objects-sidebar-tabs'
items={[{
key: 'objects',
label: 'Objects',
children: [objectsList],
}, {
key: 'labels',
label: 'Labels',
forceRender: true,
children: [<LabelsList />],
}, ...(is2D ? [{ key: 'issues', label: 'Issues', children: [<IssuesListComponent />] }] : [])]}
/>
{!sidebarCollapsed && <AppearanceBlock />}
</Layout.Sider>
);
Expand Down
4 changes: 3 additions & 1 deletion cvat-ui/src/components/cvat-app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,7 +585,9 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
);
}

return <Spin size='large' className='cvat-spinner' tip='Connecting...' />;
return (
<Spin size='large' fullscreen className='cvat-spinner' tip='Connecting...' />
);
}
}

Expand Down
Loading

0 comments on commit 43e0897

Please sign in to comment.