Skip to content

Commit 05d774f

Browse files
mwinokanmwinokan
authored
Merge pull request #383 from xchem/staging
#1161 and partially #1167 (#382)
2 parents 1a0db54 + fb595de commit 05d774f

File tree

3 files changed

+176
-63
lines changed

3 files changed

+176
-63
lines changed

‎js/components/landing/Landing.js

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { withLoadingProjects } from '../target/withLoadingProjects';
1717
const useStyles = makeStyles(theme => ({
1818
root: {
1919
height: '100%',
20-
gap: theme.spacing(2),
20+
gap: theme.spacing(1),
2121
flexWrap: 'nowrap',
2222
padding: theme.spacing()
2323
}
@@ -27,6 +27,11 @@ const Landing = memo(
2727
({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer }) => {
2828
const classes = useStyles();
2929

30+
const projectWidth = window.innerWidth;
31+
const [isResizing, setIsResizing] = useState(false);
32+
const [targetListWidth, setTargetListWidth] = useState(450);
33+
const [projectListWidth, setProjectListWidth] = useState(projectWidth);
34+
3035
const { setSnackBarTitle } = useContext(HeaderContext);
3136
const [loginText, setLoginText] = useState("You're logged in as " + DJANGO_CONTEXT['username']);
3237

@@ -58,12 +63,50 @@ const Landing = memo(
5863
resetProjectsReducer
5964
]);
6065

66+
const handleMouseDownResizer = () => {
67+
setIsResizing(true);
68+
};
69+
70+
const handleMouseMove = e => {
71+
if (!isResizing) return;
72+
const targetListWidth = e.clientX;
73+
const projectListWidth = window.innerWidth - targetListWidth;
74+
setTargetListWidth(targetListWidth);
75+
setProjectListWidth(projectListWidth);
76+
};
77+
78+
const handleMouseUp = () => {
79+
setIsResizing(false);
80+
window.removeEventListener('mousemove', handleMouseMove);
81+
window.removeEventListener('mouseup', handleMouseUp);
82+
};
83+
84+
useEffect(() => {
85+
if (isResizing) {
86+
window.addEventListener('mousemove', handleMouseMove);
87+
window.addEventListener('mouseup', handleMouseUp);
88+
} else {
89+
window.removeEventListener('mousemove', handleMouseMove);
90+
window.removeEventListener('mouseup', handleMouseUp);
91+
}
92+
}, [isResizing]);
93+
6194
return (
6295
<Grid container className={classes.root}>
63-
<Grid item xs={3}>
96+
<Grid item style={{ width: targetListWidth }}>
6497
<TargetList />
6598
</Grid>
66-
<Grid item xs={9}>
99+
<div
100+
style={{
101+
cursor: 'col-resize',
102+
width: 3,
103+
height: '100%',
104+
backgroundColor: '#eeeeee',
105+
borderRadius: '3px'
106+
}}
107+
onMouseDown={handleMouseDownResizer}
108+
></div>
109+
<Grid item style={{ width: projectListWidth }}>
67110
<Projects />
68111
</Grid>
69112
</Grid>

‎js/components/preview/molecule/moleculeList.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ const useStyles = makeStyles(theme => ({
234234
fill: 'inherit'
235235
},
236236
search: {
237-
width: 116
237+
width: 150
238238
},
239239
total: {
240240
...theme.typography.button,
@@ -907,6 +907,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
907907
disabled={false || (getJoinedMoleculeList && getJoinedMoleculeList.length === 0)}
908908
// searchString={filterSearchString?.searchStringHitNavigator ?? ''}
909909
searchString={searchString ?? ''}
910+
placeholder={'Search displayed hits'}
910911
/>,
911912

912913
<IconButton

‎js/components/target/targetList.js

Lines changed: 128 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ import moment from 'moment';
107107

108108
const useStyles = makeStyles(theme => ({
109109
table: {
110-
minWidth: 360,
110+
minWidth: 430,
111111
tableLayout: 'auto',
112112
marginTop: '8px'
113113
},
@@ -139,13 +139,14 @@ export const TargetList = memo(() => {
139139
const [page, setPage] = useState(0);
140140
const [isResizing, setIsResizing] = useState(false);
141141
const [isResizingTargetAccessString, setIsResizingTargetAccessString] = useState(false);
142+
const [isResizingInitDate, setIsResizingInitDate] = useState(false);
142143
const [isResizingSGC, setIsResizingSGC] = useState(false);
143-
const [panelWidth, setPanelWidth] = useState(100);
144-
const [panelWidthForTargetAccessString, setPanelWidthForTargetAccessString] = useState(130);
145-
const [panelWidthForInitDate, setPanelWidthForInitDate] = useState(100);
144+
const [panelWidth, setPanelWidth] = useState(110);
145+
const [panelWidthForTargetAccessString, setPanelWidthForTargetAccessString] = useState(140);
146+
const [panelWidthForInitDate, setPanelWidthForInitDate] = useState(90);
146147
const [panelWidthForSGC, setPanelWidthForSGC] = useState(130);
147148

148-
const [sortSwitch, setSortSwitch] = useState(0);
149+
const [sortSwitch, setSortSwitch] = useState(21);
149150
const [sortDialogAnchorEl, setSortDialogAnchorEl] = useState(null);
150151
const sortDialogOpen = useSelector(state => state.targetReducers.targetListFilterDialog);
151152

@@ -263,8 +264,7 @@ export const TargetList = memo(() => {
263264
let listOfFilteredTargetsByDate = useSelector(state => state.targetReducers.listOfFilteredTargetsByDate);
264265

265266
const isActiveFilter = !!(filter || {}).active;
266-
let listOfAllTarget = [...listOfAllTargetsDefault].sort(compareTargetDesc);
267-
267+
let listOfAllTarget = [...listOfAllTargetsDefault].sort(compareTargetAsc);
268268
const initialize = useCallback(() => {
269269
let initObject = {
270270
active: false,
@@ -322,7 +322,7 @@ export const TargetList = memo(() => {
322322
</Tooltip> */}
323323
<TableCell align="left" style={{ padding: '0px 10px 0px 0px', margin: '0px', padding: '0px' }}>
324324
<Link to={preview}>
325-
<div>{target.title}</div>
325+
<div style={{ wordBreak: 'break-all' }}>{target.title}</div>
326326
</Link>
327327
</TableCell>
328328
<TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
@@ -1036,6 +1036,34 @@ export const TargetList = memo(() => {
10361036
}, [isResizingTargetAccessString]);
10371037
// END RESIZER FOR TARGET ACCESS STRING COLUMN
10381038

1039+
// START RESIZER FOR INIT DATE COLUMN
1040+
const handleMouseDownResizerInitDate = () => {
1041+
setIsResizingInitDate(true);
1042+
//panelWidth !== undefined ? setPanelWidth(panelWidth) : setPanelWidth(130);
1043+
};
1044+
1045+
const handleMouseMoveInitDate = e => {
1046+
if (!isResizingInitDate) return;
1047+
const deltaX = e.clientX - 240;
1048+
setPanelWidthForInitDate(deltaX);
1049+
};
1050+
1051+
const handleMouseUpInitDate = () => {
1052+
setIsResizingInitDate(false);
1053+
window.removeEventListener('mousemove', handleMouseMoveInitDate);
1054+
window.removeEventListener('mouseup', handleMouseUpInitDate);
1055+
};
1056+
1057+
useEffect(() => {
1058+
if (isResizingInitDate) {
1059+
window.addEventListener('mousemove', handleMouseMoveInitDate);
1060+
window.addEventListener('mouseup', handleMouseUpInitDate);
1061+
} else {
1062+
window.removeEventListener('mousemove', handleMouseMoveInitDate);
1063+
window.removeEventListener('mouseup', handleMouseUpInitDate);
1064+
}
1065+
}, [isResizingInitDate]);
1066+
// END RESIZER FOR INIT DATE COLUMN
10391067
// START RESIZER FOR SGC COLUMN
10401068
const handleMouseDownResizerSGC = () => {
10411069
setIsResizingSGC(true);
@@ -1146,25 +1174,35 @@ export const TargetList = memo(() => {
11461174
/>
11471175
Target
11481176
</Typography>
1149-
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('target')}>
1150-
<Tooltip title="Sort" className={classes.sortButton}>
1151-
{[1, 2].includes(sortSwitch - offsetTarget) ? (
1152-
sortSwitch % offsetTarget < 2 ? (
1153-
<KeyboardArrowDown />
1154-
) : (
1155-
<KeyboardArrowUp />
1156-
)
1177+
</TableCell>
1178+
<div style={{ display: 'flex' }}>
1179+
<div>
1180+
<IconButton
1181+
style={{ padding: '0px', paddingRight: '5px' }}
1182+
onClick={() => handleHeaderSort('target')}
1183+
>
1184+
<Tooltip title="Sort" className={classes.sortButton}>
1185+
{filter.filter.title.order === -1 ? (
1186+
<KeyboardArrowDown />
1187+
) : filter.filter.title.order === 1 ? (
1188+
<KeyboardArrowUp />
11571189
) : (
11581190
<UnfoldMore />
11591191
)}
1160-
</Tooltip>
1161-
</IconButton>
1162-
</TableCell>
1163-
<div
1164-
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
1165-
onMouseDown={handleMouseDown}
1166-
></div>
1167-
1192+
</Tooltip>
1193+
</IconButton>
1194+
</div>
1195+
<div
1196+
style={{
1197+
cursor: 'col-resize',
1198+
width: 4,
1199+
height: '21px',
1200+
backgroundColor: '#cccccc',
1201+
borderRadius: '3px'
1202+
}}
1203+
onMouseDown={handleMouseDown}
1204+
></div>
1205+
</div>
11681206
<TableCell style={{ width: panelWidthForTargetAccessString, padding: '0px' }}>
11691207
<Typography variant="title">
11701208
<input
@@ -1175,49 +1213,80 @@ export const TargetList = memo(() => {
11751213
/>
11761214
Target access
11771215
</Typography>
1178-
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('targetAccessString')}>
1179-
<Tooltip title="Sort" className={classes.sortButton}>
1180-
{[1, 2].includes(sortSwitch - offsetTargetAccessString) ? (
1181-
sortSwitch % offsetTargetAccessString < 2 ? (
1182-
<KeyboardArrowDown />
1183-
) : (
1184-
<KeyboardArrowUp />
1185-
)
1216+
</TableCell>
1217+
<div style={{ display: 'flex' }}>
1218+
<div>
1219+
<IconButton
1220+
style={{ padding: '0px', paddingRight: '5px' }}
1221+
onClick={() => handleHeaderSort('targetAccessString')}
1222+
>
1223+
<Tooltip title="Sort" className={classes.sortButton}>
1224+
{filter.filter.targetAccessString.order === -1 ? (
1225+
<KeyboardArrowDown />
1226+
) : filter.filter.targetAccessString.order === 1 ? (
1227+
<KeyboardArrowUp />
11861228
) : (
11871229
<UnfoldMore />
11881230
)}
1189-
</Tooltip>
1190-
</IconButton>
1191-
</TableCell>
1192-
<div
1193-
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
1194-
onMouseDown={handleMouseDownResizerTargetAccessString}
1195-
></div>
1196-
<TableCell style={{ width: panelWidthForInitDate, padding: '0px' }}>
1231+
</Tooltip>
1232+
</IconButton>
1233+
</div>
1234+
<div
1235+
style={{
1236+
cursor: 'col-resize',
1237+
width: 4,
1238+
height: '21px',
1239+
backgroundColor: '#cccccc',
1240+
borderRadius: '3px'
1241+
}}
1242+
onMouseDown={handleMouseDownResizerTargetAccessString}
1243+
></div>
1244+
</div>
1245+
<TableCell
1246+
style={{ width: panelWidthForInitDate, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
1247+
>
11971248
Init date
1198-
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('initDate')}>
1199-
<Tooltip title="Sort" className={classes.sortButton}>
1200-
{[1, 2].includes(sortSwitch - offsetInitDate) ? (
1201-
sortSwitch % offsetInitDate < 2 ? (
1202-
<KeyboardArrowDown />
1203-
) : (
1204-
<KeyboardArrowUp />
1205-
)
1249+
</TableCell>
1250+
<div style={{ display: 'flex' }}>
1251+
<div style={{ paddingRight: '5px' }}>
1252+
<IconButton
1253+
style={{ padding: '0px', verticalAlign: 'center' }}
1254+
onClick={() => handleHeaderSort('initDate')}
1255+
>
1256+
<Tooltip title="Sort" className={classes.sortButton}>
1257+
{filter.filter.initDate.order === -1 ? (
1258+
<KeyboardArrowDown />
1259+
) : filter.filter.initDate.order === 1 ? (
1260+
<KeyboardArrowUp />
12061261
) : (
12071262
<UnfoldMore />
12081263
)}
1209-
</Tooltip>
1210-
</IconButton>
1264+
</Tooltip>
1265+
</IconButton>
1266+
</div>
1267+
1268+
<div
1269+
style={{
1270+
cursor: 'col-resize',
1271+
width: 4,
1272+
height: '21px',
1273+
backgroundColor: '#cccccc',
1274+
borderRadius: '3px'
1275+
}}
1276+
onMouseDown={handleMouseDownResizerInitDate}
1277+
></div>
1278+
</div>
1279+
<TableCell
1280+
style={{ width: panelWidthForSGC, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
1281+
>
1282+
SGC
12111283
</TableCell>
1212-
<div
1213-
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
1214-
onMouseDown={handleMouseDownResizerTargetAccessString} // TODO change resizer
1215-
></div>
1216-
<TableCell style={{ width: panelWidthForSGC, padding: '0px' }}>SGC</TableCell>
1217-
<div
1218-
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
1219-
onMouseDown={handleMouseDownResizerSGC}
1220-
></div>
1284+
{/*<div style={{ display: 'flex' }}>
1285+
<div
1286+
style={{ cursor: 'col-resize', width: 3, height: '18px', backgroundColor: '#cccccc' }}
1287+
onMouseDown={handleMouseDownResizerSGC}
1288+
></div>
1289+
</div>*/}
12211290
{/* <TableCell style={{ padding: '0px' }}>
12221291
<Typography variant="title">
12231292
<input

0 commit comments

Comments
 (0)