2 |
3 | # VinDr Lab / Dashboard
4 | Vindr Lab Dashboard is a part of the VinLab project. It allows users to manage Projects, Labels, Task, Export label, Upload DICOM files and many more features.
5 |
6 | ## Developing
7 | The Vindr Lab project consists of two parts. So let's clone and run both projects together.
8 | - [Vindr Lab Dashboard][vindr-lab-dashboard-url]: To manage Projects, Study list, Label, setting, Export label,...
9 | - [Vindr Lab Viewer][vindr-lab-viewer-url]: For viewing medical images, labeling (bounding box, polygon, segment).
10 |
11 | ### Requirements
12 |
13 | - [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
14 | - [Node 10+](https://nodejs.org/en/)
15 | - Yarn Workspaces should be enabled on your machine:
16 | - `yarn config set workspaces-experimental true`
17 |
18 | ### Getting Started
19 |
20 | 1. [Fork this repository][how-to-fork]
21 | 2. [Clone your forked repository][how-to-clone]
22 | - `git clone https://github.com/YOUR-USERNAME/vindr-lab-dashboard.git`
23 | 3. Navigate to the cloned project's directory
24 | 4. Add this repo as a `remote` named `upstream`
25 | - `git remote add upstream https://github.com/vinbigdata-medical/vindr-lab-dashboard.git`
26 | 5. `yarn install` to restore dependencies and link projects
27 |
28 | ## Commands
29 |
30 | These commands are available from the root directory.
31 |
32 | | Yarn Commands | Description |
33 | | ---------------------------- | ------------------------------------------------------------- |
34 | | **Develop** | |
35 | | `start` | Default development experience for Dashboard |
36 | | **Deploy** | |
37 | | `build` or `build:prod` | Builds production environment |
38 | | `build:stg` | Builds staging environment |
39 | | `build:dev` | Builds Builds develop environment |
40 |
41 |
42 | ## Projects Architecture
43 |
44 | ```bash
45 | .
46 | ├── public #
47 | ├── src #
48 | │ ├── assets # images and icons
49 | │ ├── components # Reusable React components
50 | │ ├── utils # locale, helpers, constants and service files
51 | │ └── view #
52 | │
53 | ├── ... # misc. shared configuration
54 | ├── package.json # Shared devDependencies and commands
55 | └── README.md # This file
56 | ```
57 |
58 | ## Acknowledgement
59 |
60 | **Note:** If you use or find this repository helpful, please take the time to star this repository on Github. This is an easy way for us to assess adoption and it can help us obtain future funding for the project.
61 |
62 | This work is supported primarily by [Vingroup Big Data Institute](http://vinbigdata.org/)
63 | ## License
64 |
65 | [MIT License](https://github.com/vinbigdata-medical/vinlab-sites/blob/master/LICENSE)
66 |
67 |
68 |
69 | [vindr-lab-dashboard-url]: https://github.com/vinbigdata-medical/vindr-lab-dashboard
70 | [vindr-lab-viewer-url]: https://github.com/vinbigdata-medical/vindr-lab-viewer
71 |
72 |
--------------------------------------------------------------------------------
/src/components/layout/leftMenu/LeftMenu.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | @mixin setLeftMenuWidth($width) {
4 | width: $width !important;
5 | flex: 0 0 $width !important;
6 | max-width: $width !important;
7 | min-width: $width !important;
8 | }
9 |
10 | .left-layout-sider {
11 | @include setLeftMenuWidth($left-menu-width);
12 | position: relative;
13 | padding-bottom: 0;
14 | background: $app-bg-color;
15 |
16 | &.ant-layout-sider-collapsed {
17 | @include setLeftMenuWidth($left-menu-collapsed-width);
18 | .ant-layout-sider-trigger {
19 | svg {
20 | transform: rotate(180deg);
21 | path {
22 | fill: $app-primary-color;
23 | }
24 | }
25 | }
26 | .ant-menu-item {
27 | .anticon {
28 | margin: 0 !important;
29 | }
30 | }
31 | }
32 |
33 | .ant-layout-sider-trigger {
34 | width: 10px !important;
35 | position: absolute;
36 | right: 0;
37 | top: 50%;
38 | z-index: 1;
39 | background: rgba(194, 207, 224, 0.6);
40 | border-top-left-radius: 8px;
41 | border-bottom-left-radius: 8px;
42 | height: 27px;
43 | line-height: 27px;
44 | text-align: left;
45 | svg {
46 | margin-left: 3px;
47 | path {
48 | fill: $app-primary-color;
49 | }
50 | }
51 | }
52 |
53 | .sider-container {
54 | height: 100%;
55 | display: flex;
56 | flex-direction: column;
57 | justify-content: space-between;
58 | box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
59 | padding: 8px 0 8px 8px;
60 | .left-menu-wrapper {
61 | height: 100%;
62 | background: $app-bg-box;
63 | border-radius: $border-box-radius;
64 | overflow: hidden;
65 | .menu-list {
66 | border: none;
67 | color: $defautl-font-color;
68 | font-weight: 500;
69 | font-size: 13px;
70 | background: transparent;
71 | &.ant-menu-inline-collapsed {
72 | width: 100%;
73 | max-width: 75px;
74 | .ant-menu-item {
75 | width: 100%;
76 | display: flex;
77 | align-items: center;
78 | justify-content: center;
79 | padding: 0;
80 | .anticon {
81 | line-height: normal;
82 | display: flex;
83 | }
84 | }
85 | }
86 |
87 | .ant-menu-item {
88 | width: 100%;
89 | .anticon {
90 | svg {
91 | width: 22px;
92 | height: 22px;
93 | }
94 | }
95 | span {
96 | vertical-align: middle;
97 | }
98 | &.ant-menu-item-selected,
99 | &:hover {
100 | color: $app-primary-color;
101 | svg {
102 | path,
103 | circle,
104 | rect {
105 | fill: $app-primary-color;
106 | }
107 | }
108 | }
109 | &::after {
110 | content: none;
111 | }
112 | }
113 | }
114 |
115 | .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
116 | background-color: rgba(0, 184, 148, 0.2);
117 | &::after {
118 | border: none;
119 | }
120 | }
121 | }
122 |
123 | &.ant-layout-sider-collapsed {
124 | @include setLeftMenuWidth($left-menu-collapsed-width);
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/src/view/studyList/data/DeleteStudyModal.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Modal, message, Button, Spin } from 'antd';
3 | import {
4 | ExclamationCircleOutlined,
5 | CheckCircleOutlined,
6 | CloseCircleOutlined,
7 | } from '@ant-design/icons';
8 | import { useIntl } from 'react-intl';
9 | import { actionDeleteStudies } from '../StudyListAction';
10 | import { isEmpty } from '../../../utils/helpers';
11 |
12 | const DeleteStudyModal = (props) => {
13 | const intl = useIntl();
14 | const { formatMessage: t } = intl;
15 | const { visible = true, onCancel, selectedRowKeys } = props;
16 | const [processing, setProcessing] = useState(false);
17 | const [deletedInfo, setDeletedInfo] = useState();
18 |
19 | const handleDelete = async () => {
20 | if (isEmpty(selectedRowKeys) || processing) return;
21 |
22 | try {
23 | setProcessing(true);
24 | const { data } = await actionDeleteStudies(selectedRowKeys);
25 | setDeletedInfo(data?.meta);
26 | setProcessing(false);
27 | } catch (error) {
28 | message.error('Error!');
29 | setProcessing(false);
30 | }
31 | };
32 |
33 | const handleClose = () => {
34 | if (onCancel) {
35 | onCancel(!isEmpty(deletedInfo));
36 | }
37 | };
38 |
39 | const footerAction = () => {
40 | let btns = [
41 | ,
44 | ];
45 | if (isEmpty(deletedInfo)) {
46 | btns.push(
47 |
56 | );
57 | }
58 | return btns;
59 | };
60 |
61 | return (
62 |
88 |
120 |
89 |
90 | 
91 |
92 |
93 | {isShowProjectName && currentProject?.name && (
94 | {currentProject?.name}
95 | )}
96 |
97 |
113 |
118 |
119 |
98 |
104 |
105 | {t({ id: 'IDS_LABELER' })}
106 |
107 |
108 | {t({ id: 'IDS_MANAGER' })}
109 |
110 |
111 |
112 |
114 | {account?.preferred_username}
115 |
117 |