Skip to content

Commit

Permalink
Merge pull request #383 from xchem/staging
Browse files Browse the repository at this point in the history 
#1161 and partially #1167 (#382)
  • Loading branch information
@mwinokan
mwinokan authored Nov 7, 2023
2 parents 1a0db54 + fb595de commit 05d774f
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 63 deletions.
49 changes: 46 additions & 3 deletions js/components/landing/Landing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { withLoadingProjects } from '../target/withLoadingProjects';
const useStyles = makeStyles(theme => ({
root: {
height: '100%',
gap: theme.spacing(2),
gap: theme.spacing(1),
flexWrap: 'nowrap',
padding: theme.spacing()
}
Expand All @@ -27,6 +27,11 @@ const Landing = memo(
({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer }) => {
const classes = useStyles();

const projectWidth = window.innerWidth;
const [isResizing, setIsResizing] = useState(false);
const [targetListWidth, setTargetListWidth] = useState(450);
const [projectListWidth, setProjectListWidth] = useState(projectWidth);

const { setSnackBarTitle } = useContext(HeaderContext);
const [loginText, setLoginText] = useState("You're logged in as " + DJANGO_CONTEXT['username']);

Expand Down Expand Up @@ -58,12 +63,50 @@ const Landing = memo(
resetProjectsReducer
]);

const handleMouseDownResizer = () => {
setIsResizing(true);
};

const handleMouseMove = e => {
if (!isResizing) return;
const targetListWidth = e.clientX;
const projectListWidth = window.innerWidth - targetListWidth;
setTargetListWidth(targetListWidth);
setProjectListWidth(projectListWidth);
};

const handleMouseUp = () => {
setIsResizing(false);
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
};

useEffect(() => {
if (isResizing) {
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
} else {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
}, [isResizing]);

return (
<Grid container className={classes.root}>
<Grid item xs={3}>
<Grid item style={{ width: targetListWidth }}>
<TargetList />
</Grid>
<Grid item xs={9}>
<div
style={{
cursor: 'col-resize',
width: 3,
height: '100%',
backgroundColor: '#eeeeee',
borderRadius: '3px'
}}
onMouseDown={handleMouseDownResizer}
></div>
<Grid item style={{ width: projectListWidth }}>
<Projects />
</Grid>
</Grid>
Expand Down
3 changes: 2 additions & 1 deletion js/components/preview/molecule/moleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ const useStyles = makeStyles(theme => ({
fill: 'inherit'
},
search: {
width: 116
width: 150
},
total: {
...theme.typography.button,
Expand Down Expand Up @@ -907,6 +907,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
disabled={false || (getJoinedMoleculeList && getJoinedMoleculeList.length === 0)}
// searchString={filterSearchString?.searchStringHitNavigator ?? ''}
searchString={searchString ?? ''}
placeholder={'Search displayed hits'}
/>,

<IconButton
Expand Down
187 changes: 128 additions & 59 deletions js/components/target/targetList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ import moment from 'moment';

const useStyles = makeStyles(theme => ({
table: {
minWidth: 360,
minWidth: 430,
tableLayout: 'auto',
marginTop: '8px'
},
Expand Down Expand Up @@ -139,13 +139,14 @@ export const TargetList = memo(() => {
const [page, setPage] = useState(0);
const [isResizing, setIsResizing] = useState(false);
const [isResizingTargetAccessString, setIsResizingTargetAccessString] = useState(false);
const [isResizingInitDate, setIsResizingInitDate] = useState(false);
const [isResizingSGC, setIsResizingSGC] = useState(false);
const [panelWidth, setPanelWidth] = useState(100);
const [panelWidthForTargetAccessString, setPanelWidthForTargetAccessString] = useState(130);
const [panelWidthForInitDate, setPanelWidthForInitDate] = useState(100);
const [panelWidth, setPanelWidth] = useState(110);
const [panelWidthForTargetAccessString, setPanelWidthForTargetAccessString] = useState(140);
const [panelWidthForInitDate, setPanelWidthForInitDate] = useState(90);
const [panelWidthForSGC, setPanelWidthForSGC] = useState(130);

const [sortSwitch, setSortSwitch] = useState(0);
const [sortSwitch, setSortSwitch] = useState(21);
const [sortDialogAnchorEl, setSortDialogAnchorEl] = useState(null);
const sortDialogOpen = useSelector(state => state.targetReducers.targetListFilterDialog);

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

const isActiveFilter = !!(filter || {}).active;
let listOfAllTarget = [...listOfAllTargetsDefault].sort(compareTargetDesc);

let listOfAllTarget = [...listOfAllTargetsDefault].sort(compareTargetAsc);
const initialize = useCallback(() => {
let initObject = {
active: false,
Expand Down Expand Up @@ -322,7 +322,7 @@ export const TargetList = memo(() => {
</Tooltip> */}
<TableCell align="left" style={{ padding: '0px 10px 0px 0px', margin: '0px', padding: '0px' }}>
<Link to={preview}>
<div>{target.title}</div>
<div style={{ wordBreak: 'break-all' }}>{target.title}</div>
</Link>
</TableCell>
<TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
Expand Down Expand Up @@ -1036,6 +1036,34 @@ export const TargetList = memo(() => {
}, [isResizingTargetAccessString]);
// END RESIZER FOR TARGET ACCESS STRING COLUMN

// START RESIZER FOR INIT DATE COLUMN
const handleMouseDownResizerInitDate = () => {
setIsResizingInitDate(true);
//panelWidth !== undefined ? setPanelWidth(panelWidth) : setPanelWidth(130);
};

const handleMouseMoveInitDate = e => {
if (!isResizingInitDate) return;
const deltaX = e.clientX - 240;
setPanelWidthForInitDate(deltaX);
};

const handleMouseUpInitDate = () => {
setIsResizingInitDate(false);
window.removeEventListener('mousemove', handleMouseMoveInitDate);
window.removeEventListener('mouseup', handleMouseUpInitDate);
};

useEffect(() => {
if (isResizingInitDate) {
window.addEventListener('mousemove', handleMouseMoveInitDate);
window.addEventListener('mouseup', handleMouseUpInitDate);
} else {
window.removeEventListener('mousemove', handleMouseMoveInitDate);
window.removeEventListener('mouseup', handleMouseUpInitDate);
}
}, [isResizingInitDate]);
// END RESIZER FOR INIT DATE COLUMN
// START RESIZER FOR SGC COLUMN
const handleMouseDownResizerSGC = () => {
setIsResizingSGC(true);
Expand Down Expand Up @@ -1146,25 +1174,35 @@ export const TargetList = memo(() => {
/>
Target
</Typography>
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('target')}>
<Tooltip title="Sort" className={classes.sortButton}>
{[1, 2].includes(sortSwitch - offsetTarget) ? (
sortSwitch % offsetTarget < 2 ? (
<KeyboardArrowDown />
) : (
<KeyboardArrowUp />
)
</TableCell>
<div style={{ display: 'flex' }}>
<div>
<IconButton
style={{ padding: '0px', paddingRight: '5px' }}
onClick={() => handleHeaderSort('target')}
>
<Tooltip title="Sort" className={classes.sortButton}>
{filter.filter.title.order === -1 ? (
<KeyboardArrowDown />
) : filter.filter.title.order === 1 ? (
<KeyboardArrowUp />
) : (
<UnfoldMore />
)}
</Tooltip>
</IconButton>
</TableCell>
<div
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
onMouseDown={handleMouseDown}
></div>

</Tooltip>
</IconButton>
</div>
<div
style={{
cursor: 'col-resize',
width: 4,
height: '21px',
backgroundColor: '#cccccc',
borderRadius: '3px'
}}
onMouseDown={handleMouseDown}
></div>
</div>
<TableCell style={{ width: panelWidthForTargetAccessString, padding: '0px' }}>
<Typography variant="title">
<input
Expand All @@ -1175,49 +1213,80 @@ export const TargetList = memo(() => {
/>
Target access
</Typography>
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('targetAccessString')}>
<Tooltip title="Sort" className={classes.sortButton}>
{[1, 2].includes(sortSwitch - offsetTargetAccessString) ? (
sortSwitch % offsetTargetAccessString < 2 ? (
<KeyboardArrowDown />
) : (
<KeyboardArrowUp />
)
</TableCell>
<div style={{ display: 'flex' }}>
<div>
<IconButton
style={{ padding: '0px', paddingRight: '5px' }}
onClick={() => handleHeaderSort('targetAccessString')}
>
<Tooltip title="Sort" className={classes.sortButton}>
{filter.filter.targetAccessString.order === -1 ? (
<KeyboardArrowDown />
) : filter.filter.targetAccessString.order === 1 ? (
<KeyboardArrowUp />
) : (
<UnfoldMore />
)}
</Tooltip>
</IconButton>
</TableCell>
<div
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
onMouseDown={handleMouseDownResizerTargetAccessString}
></div>
<TableCell style={{ width: panelWidthForInitDate, padding: '0px' }}>
</Tooltip>
</IconButton>
</div>
<div
style={{
cursor: 'col-resize',
width: 4,
height: '21px',
backgroundColor: '#cccccc',
borderRadius: '3px'
}}
onMouseDown={handleMouseDownResizerTargetAccessString}
></div>
</div>
<TableCell
style={{ width: panelWidthForInitDate, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
>
Init date
<IconButton style={{ padding: '0px' }} onClick={() => handleHeaderSort('initDate')}>
<Tooltip title="Sort" className={classes.sortButton}>
{[1, 2].includes(sortSwitch - offsetInitDate) ? (
sortSwitch % offsetInitDate < 2 ? (
<KeyboardArrowDown />
) : (
<KeyboardArrowUp />
)
</TableCell>
<div style={{ display: 'flex' }}>
<div style={{ paddingRight: '5px' }}>
<IconButton
style={{ padding: '0px', verticalAlign: 'center' }}
onClick={() => handleHeaderSort('initDate')}
>
<Tooltip title="Sort" className={classes.sortButton}>
{filter.filter.initDate.order === -1 ? (
<KeyboardArrowDown />
) : filter.filter.initDate.order === 1 ? (
<KeyboardArrowUp />
) : (
<UnfoldMore />
)}
</Tooltip>
</IconButton>
</Tooltip>
</IconButton>
</div>

<div
style={{
cursor: 'col-resize',
width: 4,
height: '21px',
backgroundColor: '#cccccc',
borderRadius: '3px'
}}
onMouseDown={handleMouseDownResizerInitDate}
></div>
</div>
<TableCell
style={{ width: panelWidthForSGC, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
>
SGC
</TableCell>
<div
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
onMouseDown={handleMouseDownResizerTargetAccessString} // TODO change resizer
></div>
<TableCell style={{ width: panelWidthForSGC, padding: '0px' }}>SGC</TableCell>
<div
style={{ cursor: 'col-resize', width: 3, height: '20px', backgroundColor: '#eeeeee' }}
onMouseDown={handleMouseDownResizerSGC}
></div>
{/*<div style={{ display: 'flex' }}>
<div
style={{ cursor: 'col-resize', width: 3, height: '18px', backgroundColor: '#cccccc' }}
onMouseDown={handleMouseDownResizerSGC}
></div>
</div>*/}
{/* <TableCell style={{ padding: '0px' }}>
<Typography variant="title">
<input
Expand Down

0 comments on commit 05d774f

Please sign in to comment.