Skip to content

Commit 8eb7e93

Browse files
matej-vavrekboriskovar-m2ms
matej-vavrek
and
boriskovar-m2ms
authoredDec 10, 2024
#1540 preferred aliases (#466)
* removed SGC column from target list * #1540 added preferred alias functionality * #1540 added edit column to target list and use target settings modal * #1540 updated "Open" label and read only version of display name --------- Co-authored-by: boriskovar-m2ms <boris.kovar@m2ms.sk>
1 parent fbc6ac5 commit 8eb7e93

File tree

12 files changed

+461
-38
lines changed

12 files changed

+461
-38
lines changed
 

‎js/components/header/index.js

+24-12
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ import { AddProjectDetail } from '../projects/addProjectDetail';
7272
import { ServicesStatusWrapper } from '../services';
7373
import { COMPANIES, get_logo } from '../funders/constants';
7474
import { setEditTargetDialogOpen } from '../target/redux/actions';
75-
import { Upload } from '@mui/icons-material';
75+
import { Settings, Upload } from '@mui/icons-material';
76+
import { TargetSettingsModal } from '../target/targetSettingsModal';
7677
import { SnapshotType } from '../projects/redux/constants';
7778
import { NglContext } from '../nglView/nglProvider';
7879
import { VIEWS } from '../../constants/constants';
@@ -134,7 +135,7 @@ export default memo(
134135

135136
const [openMenu, setOpenMenu] = useState(false);
136137
const [openFunders, setOpenFunders] = useState(false);
137-
const [openTrackingModal, setOpenTrackingModal] = useState(false);
138+
const [openTargetSettings, setOpenTargetSettings] = useState(false);
138139
const [versions, setVersions] = useState({});
139140

140141
const layoutEnabled = useSelector(state => state.layoutReducers.layoutEnabled);
@@ -310,14 +311,13 @@ export default memo(
310311
>
311312
Menu
312313
</Button>
313-
<Button>
314+
<Button
315+
onClick={() => setOpenTargetSettings(true)}
316+
disabled={!targetName || !DJANGO_CONTEXT.pk}
317+
>
314318
<Typography
315319
variant="h5"
316320
color="textPrimary"
317-
onClick={() => {
318-
history.push(URLS.landing);
319-
window.location.reload();
320-
}}
321321
>
322322
Fragalysis: <b id={'headerNavbarTitle'}>{headerNavbarTitle}</b>
323323
</Typography>
@@ -326,8 +326,8 @@ export default memo(
326326
targetName !== undefined ? (
327327
<>
328328
{currentProject.authorID === null ||
329-
currentProject.projectID === null ||
330-
currentProject.authorID === userId ? (
329+
currentProject.projectID === null ||
330+
currentProject.authorID === userId ? (
331331
<Button
332332
onClick={() => {
333333
if (!isProjectModalLoading) {
@@ -582,6 +582,7 @@ export default memo(
582582
</Grid>
583583
</AppBar>
584584
<FundersModal openModal={openFunders} onModalClose={() => setOpenFunders(false)} />
585+
<TargetSettingsModal openModal={openTargetSettings} onModalClose={() => setOpenTargetSettings(false)} />
585586
<DiscourseErrorModal openModal={openDiscourseError} />
586587
<Drawer
587588
anchor="left"
@@ -651,7 +652,18 @@ export default memo(
651652
</ListItemIcon>
652653
<ListItemText primary="Contributors" />
653654
</ListItem>
654-
{DJANGO_CONTEXT.pk && (
655+
{DJANGO_CONTEXT.pk && !!targetName &&
656+
<>
657+
<Divider />
658+
<ListItem button onClick={() => setOpenTargetSettings(true)}>
659+
<ListItemIcon>
660+
<Settings />
661+
</ListItemIcon>
662+
<ListItemText primary="Target settings" />
663+
</ListItem>
664+
</>
665+
}
666+
{DJANGO_CONTEXT.pk &&
655667
<>
656668
<Divider />
657669
<ListItem button onClick={() => openLink(URLS.lhsUpload)}>
@@ -673,7 +685,7 @@ export default memo(
673685
<ListItemText primary="Metadata upload" />
674686
</ListItem>
675687
</>
676-
)}
688+
}
677689
<Divider />
678690
{authListItem}
679691
</Grid>
@@ -691,7 +703,7 @@ export default memo(
691703
</Grid>
692704
</Drawer>
693705
<Box paddingTop={`${headerHeight}px`} width="100%" />
694-
</ComputeSize>
706+
</ComputeSize >
695707
);
696708
})
697709
);

‎js/components/landing/Landing.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { withLoadingProjects } from '../target/withLoadingProjects';
1515
import { ToastContext } from '../toast';
1616
import { EditTargetDialog } from '../target/editTargetDialog';
1717
import { TOAST_LEVELS } from '../toast/constants';
18+
import { TargetSettingsModal } from '../target/targetSettingsModal';
19+
import { setEditTargetDialogOpen } from '../target/redux/actions';
1820

1921
const useStyles = makeStyles(theme => ({
2022
root: {
@@ -40,6 +42,12 @@ const Landing = memo(
4042
DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN' ? '' : "You're logged in as " + DJANGO_CONTEXT['username']
4143
);
4244
const toastMessages = useSelector(state => state.selectionReducers.toastMessages);
45+
const isEditTargetDialogOpen = useSelector(state => state.targetReducers.isEditTargetDialogOpen);
46+
47+
const onModalClose = () => {
48+
dispatch(setEditTargetDialogOpen(false));
49+
dispatch(selectionActions.setTargetToEdit(null));
50+
};
4351

4452
useEffect(() => {
4553
if (toastMessages?.length > 0) {
@@ -142,7 +150,7 @@ const Landing = memo(
142150
<Projects />
143151
</Grid>
144152
</Grid>
145-
<EditTargetDialog />
153+
<TargetSettingsModal openModal={isEditTargetDialogOpen} onModalClose={onModalClose} isTargetOn={false} />
146154
</>
147155
);
148156
}

‎js/components/preview/molecule/observationCmpView/observationCmpView.js

+61-2
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,10 @@ const useStyles = makeStyles(theme => ({
380380
cursor: 'pointer',
381381
marginRight: 5,
382382
position: 'right'
383+
},
384+
tooltipRow: {
385+
marginTop: 2,
386+
marginBottom: 2
383387
}
384388
}));
385389

@@ -523,6 +527,8 @@ const ObservationCmpView = memo(
523527
const densityListCustom = useSelector(state => state.selectionReducers.densityListCustom);
524528
const qualityList = useSelector(state => state.selectionReducers.qualityList);
525529
const vectorOnList = useSelector(state => state.selectionReducers.vectorOnList);
530+
// const currentTarget = useSelector(state => getCurrentTarget(state));
531+
const aliasOrder = useSelector(state => state.apiReducers.target_on_aliases);
526532

527533
const isLigandOn = isAtLeastOneObservationOnInList(fragmentDisplayList);
528534
const isProteinOn = isAtLeastOneObservationOnInList(proteinList);
@@ -1278,6 +1284,59 @@ const ObservationCmpView = memo(
12781284

12791285
const groupMoleculeLPCControlButtonDisabled = disableL || disableP || disableC;
12801286

1287+
const getDisplayName = useCallback(() => {
1288+
const mainObservation = getMainObservation();
1289+
let displayName = '';
1290+
const defaultName = mainObservation?.compound_code;
1291+
1292+
if (aliasOrder) {
1293+
for (let index = 0; index < aliasOrder.length; index++) {
1294+
const preferredIdentifierType = aliasOrder[index];
1295+
if (preferredIdentifierType === 'compound_code') {
1296+
displayName = defaultName;
1297+
break;
1298+
} else {
1299+
// id: 81
1300+
// compound: 34
1301+
// name: "nonsense-34"
1302+
// type: "nonsense_id"
1303+
// url: null
1304+
const searchedIdentifier = mainObservation.identifiers.find(identifier => identifier.type === preferredIdentifierType);
1305+
if (searchedIdentifier) {
1306+
displayName = searchedIdentifier.name;
1307+
break;
1308+
}
1309+
}
1310+
}
1311+
}
1312+
if (!displayName) {
1313+
displayName = defaultName;
1314+
}
1315+
1316+
return displayName;
1317+
}, [aliasOrder, getMainObservation]);
1318+
1319+
const getDisplayNameTooltip = useCallback(() => {
1320+
const mainObservation = getMainObservation();
1321+
const tooltip = <>
1322+
<p className={classes.tooltipRow}>{mainObservation?.prefix_tooltip ?? '-'}</p>
1323+
{aliasOrder?.map((alias, index) => {
1324+
if (alias === 'compound_code') {
1325+
return <p key={index} className={classes.tooltipRow}>{`${alias}: ${mainObservation?.compound_code}`}</p>;
1326+
// return <><br></br>{`${alias}: ${mainObservation?.compound_code}`}</>;
1327+
} else {
1328+
const searchedIdentifier = mainObservation.identifiers.find(identifier => identifier.type === alias);
1329+
if (searchedIdentifier) {
1330+
return <p key={index} className={classes.tooltipRow}>{`${alias}: ${searchedIdentifier.name}`}</p>;
1331+
// return <><br></br>{`${alias}: ${searchedIdentifier.name}`}</>;
1332+
}
1333+
}
1334+
})}
1335+
</>;
1336+
1337+
return tooltip;
1338+
}, [aliasOrder, getMainObservation, classes.tooltipRow]);
1339+
12811340
return (
12821341
<>
12831342
<Grid
@@ -1328,7 +1387,7 @@ const ObservationCmpView = memo(
13281387
</Grid>
13291388
<Grid item container className={classes.detailsCol} justifyContent="space-evenly" direction="column" xs={2}>
13301389
{/* Title label */}
1331-
<Tooltip title={getMainObservation()?.prefix_tooltip ?? '-'} placement="bottom-start">
1390+
<Tooltip title={getDisplayNameTooltip()} placement="bottom-start">
13321391
<Grid
13331392
item
13341393
onCopy={e => {
@@ -1341,7 +1400,7 @@ const ObservationCmpView = memo(
13411400
{getMainObservation()?.code.replaceAll(`${target_on_name}-`, '')}
13421401
</span>
13431402
<br />
1344-
{data?.main_site_observation_cmpd_code}
1403+
{getDisplayName()}
13451404
</Grid>
13461405
</Tooltip>
13471406
{/* "Filtered"/calculated props

‎js/components/preview/tags/api/tagsApi.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,22 @@ export const getPoses = async targetId => {
5959
});
6060
};
6161

62-
export const getTagMolecules = targetId => {
62+
export const getTagMolecules = async targetId => {
6363
return api({ url: `${base_url}/api/siteobservation_tag/?target=${targetId}` })
6464
.then(response => {
6565
return response.data;
6666
})
6767
.catch(err => console.log(err));
6868
};
6969

70+
export const getCompoundIdentifiers = async () => {
71+
return api({ url: `${base_url}/api/compound-identifiers/` })
72+
.then(response => {
73+
return response.data?.results;
74+
})
75+
.catch(err => console.log(err));
76+
};
77+
7078
export const createNewTag = async (tag, targetName) => {
7179
let url = `${base_url}/api/siteobservation_tag/`;
7280
if (isDiscourseAvailable()) {

‎js/components/preview/tags/redux/dispatchActions.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ import {
2828
setTargetDataLoadingInProgress,
2929
setAllDataLoaded,
3030
setMoleculeTags,
31-
setLHSCompoundsLIst
31+
setLHSCompoundsLIst,
32+
setCompoundIdentifiers
3233
} from '../../../../reducers/api/actions';
3334
import { setSortDialogOpen } from '../../molecule/redux/actions';
3435
import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
@@ -40,7 +41,8 @@ import {
4041
getCompoundsLHS,
4142
getCanonSites,
4243
getCanonConformSites,
43-
getPoses
44+
getPoses,
45+
getCompoundIdentifiers
4446
} from '../api/tagsApi';
4547
import {
4648
getMoleculeTagForTag,
@@ -195,6 +197,7 @@ const getTagsForMol = (molId, tagList) => {
195197
export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) => {
196198
// console.log(`snapshotDebug - loadMoleculesAndTagsNew - before getTags`);
197199
let tags = await getTags(targetId);
200+
let compoundIdentifiers = await getCompoundIdentifiers();
198201
// console.log(`snapshotDebug - loadMoleculesAndTagsNew - after getTags`);
199202
tags = tags.results;
200203
if (tags?.length > 0) {
@@ -227,6 +230,7 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
227230
maps.event_info = mol.event_file;
228231
maps.sigmaa_info = mol.sigmaa_file;
229232
newObject['proteinData'] = maps;
233+
newObject.identifiers = compoundIdentifiers.filter(identifier => identifier.compound === newObject.cmpd);
230234

231235
allMolecules.push(newObject);
232236
});
@@ -247,6 +251,7 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
247251
tags = tags.sort(compareTagsAsc);
248252
dispatch(setMoleculeTags(tags));
249253
dispatch(setTagSelectorData(tagCategories, tags));
254+
dispatch(setCompoundIdentifiers(compoundIdentifiers));
250255
dispatch(setAllDataLoaded(true));
251256

252257
// console.log(`snapshotDebug - loadMoleculesAndTagsNew - before getPoses`);

‎js/components/snapshot/withSnapshotManagement.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,10 @@ export const withSnapshotManagement = WrappedComponent => {
2727
const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
2828

2929
const targetIdList = useSelector(state => state.apiReducers.target_id_list);
30+
const targetOnName = useSelector(state => state.apiReducers.target_on_name);
3031
const targetId = useSelector(state => state.apiReducers.target_on);
31-
const targetObj = targetIdList.find(t => t.id === targetId);
32-
const targetName = targetObj?.display_name;
32+
// const targetObj = targetIdList.find(t => t.id === targetId);
33+
const targetName = targetOnName; // targetObj?.display_name;
3334
const currentSessionProject = useSelector(state => state.projectReducers.currentProject);
3435
const currentSnapshot = useSelector(state => state.projectReducers.currentSnapshot);
3536
const directDisplay = useSelector(state => state.apiReducers.direct_access);

‎js/components/target/targetList.js

+19-12
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ export const TargetList = memo(() => {
319319
const discourseAvailable = isDiscourseAvailable();
320320
// const [discourseUrl, setDiscourseUrl] = useState();
321321
return (
322-
<TableRow hover key={target.isLegacy ? target.title + 'Legacy' : target.title}>
322+
<TableRow hover key={target.isLegacy ? target.title + 'Legacy' : `${target.id}-${target.title}`}>
323323
{/*<Tooltip title={`${target.id}`}>
324324
<TableCell
325325
component="th"
@@ -350,17 +350,6 @@ export const TargetList = memo(() => {
350350
) : (
351351
<>
352352
<Link to={preview}>{target.display_name}</Link>
353-
{showEditIconForTarget === target.id && (
354-
<IconButton
355-
style={{ padding: '0px' }}
356-
onClick={() => {
357-
dispatch(setTargetToEdit(target));
358-
dispatch(setEditTargetDialogOpen(true));
359-
}}
360-
>
361-
<Edit style={{ height: '15px' }} />
362-
</IconButton>
363-
)}
364353
</>
365354
)}
366355
</TableCell>
@@ -373,6 +362,18 @@ export const TargetList = memo(() => {
373362
{moment(target.project.init_date).format('YYYY-MM-DD')}
374363
</TableCell>
375364
<TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
365+
{DJANGO_CONTEXT['authenticated'] && !target.isLegacy && <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}>
366+
{/* {showEditIconForTarget === target.id && ( */}
367+
<IconButton
368+
style={{ padding: '0px' }}
369+
onClick={() => {
370+
dispatch(setTargetToEdit(target));
371+
dispatch(setEditTargetDialogOpen(true));
372+
}}
373+
>
374+
<Edit style={{ height: '15px' }} />
375+
</IconButton>
376+
</TableCell>}
376377
{/* <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
377378
{sgcUploaded.includes(target.title) && (
378379
<a href={sgcUrl} target="new">
@@ -1336,6 +1337,12 @@ export const TargetList = memo(() => {
13361337
onMouseDown={handleMouseDownResizerInitDate}
13371338
></div>
13381339
</div>
1340+
{DJANGO_CONTEXT['authenticated'] &&
1341+
<TableCell
1342+
style={{ width: 50, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
1343+
>
1344+
Edit
1345+
</TableCell>}
13391346
{/* <TableCell
13401347
style={{ width: panelWidthForSGC, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
13411348
>

0 commit comments

Comments
 (0)