Skip to content

Commit c5efc43

Browse files
author
Adriána Kohanová
committed
#517 Cross reference misplacement
1 parent e78af5e commit c5efc43

File tree

1 file changed

+142
-123
lines changed

1 file changed

+142
-123
lines changed

‎js/components/datasets/crossReferenceDialog.js

+142-123
Original file line numberDiff line numberDiff line change
@@ -228,141 +228,160 @@ export const CrossReferenceDialog = memo(
228228
moleculeList
229229
);
230230

231+
if (anchorEl === null) {
232+
dispatch(resetCrossReferenceDialog());
233+
}
234+
231235
return (
232-
<Popper id={id} open={open} anchorEl={anchorEl} placement="left-start" ref={ref}>
233-
<Panel
234-
hasHeader
235-
secondaryBackground
236-
title="Cross Reference"
237-
className={classes.paper}
238-
headerActions={[
239-
<Tooltip title="Close cross reference dialog">
240-
<IconButton
241-
color="inherit"
242-
className={classes.headerButton}
243-
onClick={() => dispatch(resetCrossReferenceDialog())}
236+
<>
237+
{anchorEl && anchorEl !== null && (
238+
<>
239+
<Popper id={id} open={open} anchorEl={anchorEl} placement="left-start" ref={ref}>
240+
<Panel
241+
hasHeader
242+
secondaryBackground
243+
title="Cross Reference"
244+
className={classes.paper}
245+
headerActions={[
246+
<Tooltip title="Close cross reference dialog">
247+
<IconButton
248+
color="inherit"
249+
className={classes.headerButton}
250+
onClick={() => dispatch(resetCrossReferenceDialog())}
251+
>
252+
<Close />
253+
</IconButton>
254+
</Tooltip>
255+
]}
244256
>
245-
<Close />
246-
</IconButton>
247-
</Tooltip>
248-
]}
249-
>
250-
{isLoadingCrossReferenceScores === false && moleculeList && (
251-
<>
252-
<Grid container justify="flex-start" direction="row" className={classes.molHeader} wrap="nowrap">
253-
<Grid item container justify="flex-start" direction="row">
254-
{moleculeList.length > 0 && (
255-
<Grid item>
256-
<Grid
257-
container
258-
direction="row"
259-
justify="flex-start"
260-
alignItems="center"
261-
wrap="nowrap"
262-
className={classes.contButtonsMargin}
263-
>
264-
<Tooltip title="all ligands">
265-
<Grid item>
266-
<Button
267-
variant="outlined"
268-
className={classNames(classes.contColButton, {
269-
[classes.contColButtonSelected]: isLigandOn,
270-
[classes.contColButtonHalfSelected]: isLigandOn === null
271-
})}
272-
onClick={() =>
273-
dispatch(handleAllLigandsOfCrossReferenceDialog(isLigandOn, moleculeList, stage))
274-
}
275-
disabled={false}
276-
>
277-
L
278-
</Button>
279-
</Grid>
280-
</Tooltip>
281-
<Tooltip title="all sidechains">
257+
{isLoadingCrossReferenceScores === false && moleculeList && (
258+
<>
259+
<Grid container justify="flex-start" direction="row" className={classes.molHeader} wrap="nowrap">
260+
<Grid item container justify="flex-start" direction="row">
261+
{moleculeList.length > 0 && (
282262
<Grid item>
283-
<Button
284-
variant="outlined"
285-
className={classNames(classes.contColButton, {
286-
[classes.contColButtonSelected]: isProteinOn,
287-
[classes.contColButtonHalfSelected]: isProteinOn === null
288-
})}
289-
onClick={() =>
290-
dispatch(removeOrAddAllHitProteinsOfList(isProteinOn, moleculeList, stage))
291-
}
292-
disabled={false}
263+
<Grid
264+
container
265+
direction="row"
266+
justify="flex-start"
267+
alignItems="center"
268+
wrap="nowrap"
269+
className={classes.contButtonsMargin}
293270
>
294-
P
295-
</Button>
271+
<Tooltip title="all ligands">
272+
<Grid item>
273+
<Button
274+
variant="outlined"
275+
className={classNames(classes.contColButton, {
276+
[classes.contColButtonSelected]: isLigandOn,
277+
[classes.contColButtonHalfSelected]: isLigandOn === null
278+
})}
279+
onClick={() =>
280+
dispatch(handleAllLigandsOfCrossReferenceDialog(isLigandOn, moleculeList, stage))
281+
}
282+
disabled={false}
283+
>
284+
L
285+
</Button>
286+
</Grid>
287+
</Tooltip>
288+
<Tooltip title="all sidechains">
289+
<Grid item>
290+
<Button
291+
variant="outlined"
292+
className={classNames(classes.contColButton, {
293+
[classes.contColButtonSelected]: isProteinOn,
294+
[classes.contColButtonHalfSelected]: isProteinOn === null
295+
})}
296+
onClick={() =>
297+
dispatch(removeOrAddAllHitProteinsOfList(isProteinOn, moleculeList, stage))
298+
}
299+
disabled={false}
300+
>
301+
P
302+
</Button>
303+
</Grid>
304+
</Tooltip>
305+
<Tooltip title="all interactions">
306+
<Grid item>
307+
{/* C stands for contacts now */}
308+
<Button
309+
variant="outlined"
310+
className={classNames(classes.contColButton, {
311+
[classes.contColButtonSelected]: isComplexOn,
312+
[classes.contColButtonHalfSelected]: isComplexOn === null
313+
})}
314+
onClick={() =>
315+
dispatch(removeOrAddAllComplexesOfList(isComplexOn, moleculeList, stage))
316+
}
317+
disabled={false}
318+
>
319+
C
320+
</Button>
321+
</Grid>
322+
</Tooltip>
323+
</Grid>
296324
</Grid>
297-
</Tooltip>
298-
<Tooltip title="all interactions">
299-
<Grid item>
300-
{/* C stands for contacts now */}
301-
<Button
302-
variant="outlined"
303-
className={classNames(classes.contColButton, {
304-
[classes.contColButtonSelected]: isComplexOn,
305-
[classes.contColButtonHalfSelected]: isComplexOn === null
306-
})}
307-
onClick={() => dispatch(removeOrAddAllComplexesOfList(isComplexOn, moleculeList, stage))}
308-
disabled={false}
309-
>
310-
C
311-
</Button>
312-
</Grid>
313-
</Tooltip>
325+
)}
314326
</Grid>
315327
</Grid>
316-
)}
317-
</Grid>
318-
</Grid>
319-
<div className={classes.content}>
320-
{moleculeList.length > 0 &&
321-
moleculeList.map((data, index, array) => {
322-
let molecule = Object.assign({ isCrossReference: true }, data.molecule);
323-
let previousData = index > 0 && Object.assign({ isCrossReference: true }, array[index - 1]);
324-
let nextData = index < array?.length && Object.assign({ isCrossReference: true }, array[index + 1]);
328+
<div className={classes.content}>
329+
{moleculeList.length > 0 &&
330+
moleculeList.map((data, index, array) => {
331+
let molecule = Object.assign({ isCrossReference: true }, data.molecule);
332+
let previousData = index > 0 && Object.assign({ isCrossReference: true }, array[index - 1]);
333+
let nextData =
334+
index < array?.length && Object.assign({ isCrossReference: true }, array[index + 1]);
325335

326-
return (
327-
<DatasetMoleculeView
328-
key={index}
329-
index={index}
330-
imageHeight={imgHeight}
331-
imageWidth={imgWidth}
332-
data={molecule}
333-
datasetID={data.datasetID}
334-
hideFButton
335-
showDatasetName
336-
previousItemData={previousData}
337-
nextItemData={nextData}
338-
removeOfAllSelectedTypes={removeOfAllSelectedTypes}
339-
L={ligandList.includes(data.id)}
340-
P={proteinList.includes(data.id)}
341-
C={complexList.includes(data.id)}
342-
S={false}
343-
V={false}
344-
/>
345-
);
346-
})}
347-
{!(moleculeList.length > 0) && (
348-
<Grid container justify="center" alignItems="center" direction="row" className={classes.notFound}>
336+
return (
337+
<DatasetMoleculeView
338+
key={index}
339+
index={index}
340+
imageHeight={imgHeight}
341+
imageWidth={imgWidth}
342+
data={molecule}
343+
datasetID={data.datasetID}
344+
hideFButton
345+
showDatasetName
346+
previousItemData={previousData}
347+
nextItemData={nextData}
348+
removeOfAllSelectedTypes={removeOfAllSelectedTypes}
349+
L={ligandList.includes(data.id)}
350+
P={proteinList.includes(data.id)}
351+
C={complexList.includes(data.id)}
352+
S={false}
353+
V={false}
354+
/>
355+
);
356+
})}
357+
{!(moleculeList.length > 0) && (
358+
<Grid
359+
container
360+
justify="center"
361+
alignItems="center"
362+
direction="row"
363+
className={classes.notFound}
364+
>
365+
<Grid item>
366+
<Typography variant="body2">No molecules found!</Typography>
367+
</Grid>
368+
</Grid>
369+
)}
370+
</div>
371+
</>
372+
)}
373+
{isLoadingCrossReferenceScores === true && (
374+
<Grid container alignItems="center" justify="center">
349375
<Grid item>
350-
<Typography variant="body2">No molecules found!</Typography>
376+
<CircularProgress />
351377
</Grid>
352378
</Grid>
353379
)}
354-
</div>
355-
</>
356-
)}
357-
{isLoadingCrossReferenceScores === true && (
358-
<Grid container alignItems="center" justify="center">
359-
<Grid item>
360-
<CircularProgress />
361-
</Grid>
362-
</Grid>
363-
)}
364-
</Panel>
365-
</Popper>
380+
</Panel>
381+
</Popper>
382+
</>
383+
)}
384+
</>
366385
);
367386
})
368387
);

0 commit comments

Comments
 (0)