Skip to content

Commit b93571a

Browse files
boriskovar-m2msboriskovar-m2ms
authored
Implements #1277 (#406)
* - additional fixes from #1321 * Squashed commit of the following: commit c347cb3 Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Tue Feb 6 09:25:50 2024 +0100 - implemented #1277
1 parent 137f648 commit b93571a

File tree

5 files changed

+127
-39
lines changed

5 files changed

+127
-39
lines changed

‎js/components/preview/molecule/moleculeView/moleculeView.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import { SvgTooltip } from '../../../common';
4949
import { MOL_TYPE } from '../redux/constants';
5050
import { DensityMapsModal } from '../modals/densityMapsModal';
5151
import { getRandomColor } from '../utils/color';
52-
import { DEFAULT_TAG_COLOR, getAllTagsForMol } from '../../tags/utils/tagUtils';
52+
import { DEFAULT_TAG_COLOR, getAllTagsForMol, getAllTagsForObservation } from '../../tags/utils/tagUtils';
5353
import MoleculeSelectCheckbox from './moleculeSelectCheckbox';
5454
import useClipboard from 'react-use-clipboard';
5555
import Popover from '@mui/material/Popover';
@@ -451,11 +451,11 @@ const MoleculeView = memo(
451451
};
452452

453453
const generateTagPopover = () => {
454-
const allData = getAllTagsForMol(data, tagList);
455-
const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
454+
const allData = getAllTagsForObservation(data, tagList, tagCategories);
455+
// const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
456456

457-
const modifiedObjects = sortedData.map(obj => {
458-
const tagNameShortLength = 2;
457+
const modifiedObjects = allData.map(obj => {
458+
const tagNameShortLength = 3;
459459
if (obj.tag.length > tagNameShortLength) {
460460
return { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
461461
}
@@ -616,18 +616,18 @@ const MoleculeView = memo(
616616
}}
617617
>
618618
<Grid alignItems="center" direction="row" container>
619-
{sortedData.map((item, index) => (
619+
{allData.map((item, index) => (
620620
<Grid
621621
style={{
622-
backgroundColor: resolveTagBackgroundColor(sortedData[index]),
623-
color: resolveTagForegroundColor(sortedData[index]),
624-
border: `${resolveTagBackgroundColor(sortedData[index])} solid 1px`,
622+
backgroundColor: resolveTagBackgroundColor(allData[index]),
623+
color: resolveTagForegroundColor(allData[index]),
624+
border: `${resolveTagBackgroundColor(allData[index])} solid 1px`,
625625
display: 'grid',
626626
placeItems: 'center'
627627
}}
628628
className={classes.popover}
629629
item
630-
xs={sortedData.length === 1 ? 12 : sortedData.length === 2 ? 6 : 4}
630+
xs={allData.length === 1 ? 12 : allData.length === 2 ? 6 : 4}
631631
key={index}
632632
>
633633
<div>{item.tag}</div>

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,7 @@ const ObservationCmpView = memo(
375375

376376
const viewParams = useSelector(state => state.nglReducers.viewParams);
377377
const tagList = useSelector(state => state.apiReducers.tagList);
378+
const tagCategories = useSelector(state => state.apiReducers.categoryList);
378379
const tagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
379380

380381
const isObservationDialogOpen = useSelector(state => state.selectionReducers.isObservationDialogOpen);
@@ -511,11 +512,6 @@ const ObservationCmpView = memo(
511512

512513
const open = tagPopoverOpen ? true : false;
513514

514-
const getDataForTagsTooltip = () => {
515-
const assignedTags = getAllTagsForLHSCmp(observations, tagList);
516-
return assignedTags;
517-
};
518-
519515
useEffect(() => {
520516
setTagEditModalOpenNew(tagEditorOpen);
521517
}, [tagEditorOpen]);
@@ -549,13 +545,17 @@ const ObservationCmpView = memo(
549545
};
550546

551547
const generateTagPopover = () => {
552-
const allData = getDataForTagsTooltip();
553-
const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
548+
const allData = getAllTagsForLHSCmp(observations, tagList, tagCategories);
549+
// const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
554550

555-
const modifiedObjects = sortedData.map(obj => {
556-
const tagNameShortLength = 2;
551+
const modifiedObjects = allData.map((obj, index) => {
552+
const tagNameShortLength = 3;
557553
if (obj.tag.length > tagNameShortLength) {
558-
return { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
554+
let shortened = { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
555+
if (index === 0) {
556+
shortened = { ...shortened, tag: shortened.tag.replace('-', '') };
557+
}
558+
return shortened;
559559
}
560560
return obj;
561561
});
@@ -718,18 +718,18 @@ const ObservationCmpView = memo(
718718
}}
719719
>
720720
<Grid alignItems="center" direction="row" container>
721-
{sortedData.map((item, index) => (
721+
{allData.map((item, index) => (
722722
<Grid
723723
style={{
724-
backgroundColor: resolveTagBackgroundColor(sortedData[index]),
725-
color: resolveTagForegroundColor(sortedData[index]),
726-
border: `${resolveTagBackgroundColor(sortedData[index])} solid 1px`,
724+
backgroundColor: resolveTagBackgroundColor(allData[index]),
725+
color: resolveTagForegroundColor(allData[index]),
726+
border: `${resolveTagBackgroundColor(allData[index])} solid 1px`,
727727
display: 'grid',
728728
placeItems: 'center'
729729
}}
730730
className={classes.popover}
731731
item
732-
xs={sortedData.length === 1 ? 12 : sortedData.length === 2 ? 6 : 4}
732+
xs={allData.length === 1 ? 12 : allData.length === 2 ? 6 : 4}
733733
key={index}
734734
>
735735
<div>{item.tag}</div>
@@ -1117,6 +1117,9 @@ const ObservationCmpView = memo(
11171117
// let moleculeTitle = data?.code.replace(new RegExp(`${target_on_name}-`, 'i'), '');
11181118
// let moleculeTitle = data.code;
11191119
let moleculeTitle = data?.code.replaceAll(`${target_on_name}-`, '');
1120+
if (observations?.length > 0 && observations[0].compound_code) {
1121+
moleculeTitle += ` - ${observations[0].compound_code}`;
1122+
}
11201123
const moleculeTitleTruncated = moleculeTitle.substring(0, 20) + (moleculeTitle.length > 20 ? '...' : '');
11211124

11221125
const [isNameCopied, setNameCopied] = useClipboard(moleculeTitle, { successDuration: 5000 });
@@ -1398,9 +1401,9 @@ const ObservationCmpView = memo(
13981401
}
13991402
// setLoadingInspiration(false);
14001403
}}
1401-
disabled={observations.length < 2}
1404+
disabled={observations.length <= 0}
14021405
>
1403-
O
1406+
{observations?.length}
14041407
</Button>
14051408
</Grid>
14061409
</Tooltip>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,8 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
247247
let newObject = { ...c };
248248

249249
newObject['smiles'] = cs.smiles;
250-
newObject['code'] = `${cs.code}/${cs.canon_site}`;
250+
// newObject['code'] = `${cs.code}/${cs.canon_site}`;
251+
newObject['code'] = `${cs.code}`;
251252
newObject['origId'] = c.id;
252253
newObject['id'] = newIdStart++;
253254
newObject['canonSiteConf'] = cs.canon_site_conf;

‎js/components/preview/tags/utils/tagUtils.js

Lines changed: 92 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { CATEGORY_ID, CATEGORY_TYPE, CATEGORY_TYPE_BY_ID } from '../../../../constants/constants';
1+
import { is } from 'date-fns/locale';
2+
import {
3+
CATEGORY_TYPE_BY_ID,
4+
OBSERVATION_TAG_CATEGORIES,
5+
COMPOUND_PRIO_TAG_CATEGORIES
6+
} from '../../../../constants/constants';
27

38
export const DEFAULT_TAG_COLOR = '#E0E0E0';
49
export const DEFAULT_CATEGORY = 1;
@@ -132,19 +137,95 @@ export const getAllTagsForMol = (mol, tagList) => {
132137
return result;
133138
};
134139

135-
export const getAllTagsForLHSCmp = (observations, tagList) => {
140+
export const getObservationTagConfig = tagCategoryList => {
136141
const result = [];
137142

138-
observations &&
139-
observations.forEach(obs => {
140-
obs.tags_set &&
141-
obs.tags_set.forEach(tagId => {
142-
let tag = tagList.filter(t => t.id === tagId);
143-
if (tag && tag.length > 0 && !result.some(t => t.id === tag[0].id)) {
144-
result.push(tag[0]);
145-
}
146-
});
143+
OBSERVATION_TAG_CATEGORIES.forEach(categName => {
144+
const categ = tagCategoryList.find(c => c.category === categName);
145+
if (categ) {
146+
result.push({ ...categ });
147+
}
148+
});
149+
150+
return result;
151+
};
152+
153+
export const getAllTagsForObservation = (obs, tagList, tagCategoryList) => {
154+
const result = [];
155+
156+
const categories = getObservationTagConfig(tagCategoryList);
157+
categories.forEach(categ => {
158+
obs?.tags_set.find(tagId => {
159+
const tag = tagList.find(t => t.id === tagId);
160+
if (tag?.category === categ.id) {
161+
result.push(tag);
162+
}
147163
});
164+
});
165+
166+
return result;
167+
};
168+
169+
export const getCompoundPriorityTagConfig = (tagCategoryList, isSingleObs) => {
170+
const result = [];
171+
172+
let allCategoryNames = [];
173+
if (isSingleObs) {
174+
allCategoryNames = [...COMPOUND_PRIO_TAG_CATEGORIES, ...OBSERVATION_TAG_CATEGORIES];
175+
} else {
176+
allCategoryNames = [...COMPOUND_PRIO_TAG_CATEGORIES];
177+
}
178+
179+
allCategoryNames.forEach(categName => {
180+
const categ = tagCategoryList.find(c => c.category === categName);
181+
if (categ) {
182+
result.push({ ...categ });
183+
}
184+
});
185+
186+
return result;
187+
};
188+
189+
export const getAllTagsForLHSCmp = (observations, tagList, tagCategoryList) => {
190+
let result = [];
191+
192+
// const isSingleObs = !!(observations?.length <= 1);
193+
const isSingleObs = false; //functionality was disabled upon request
194+
195+
const prioCategories = getCompoundPriorityTagConfig(tagCategoryList, isSingleObs);
196+
const prioTags = [];
197+
198+
prioCategories?.forEach(categ => {
199+
observations?.forEach(obs =>
200+
obs?.tags_set.find(tagId => {
201+
const tag = tagList.find(t => t.id === tagId);
202+
if (tag?.category === categ.id && !prioTags.some(t => t.id === tag.id)) {
203+
prioTags.push(tag);
204+
}
205+
})
206+
);
207+
});
208+
209+
const restOfTheTags = [];
210+
211+
observations?.forEach(obs => {
212+
const obsPrioTags = getAllTagsForObservation(obs, tagList, tagCategoryList);
213+
obs?.tags_set.forEach(tagId => {
214+
let tag = tagList.find(t => t.id === tagId);
215+
if (
216+
tag &&
217+
!restOfTheTags.some(t => t.id === tag.id) &&
218+
!prioTags.some(t => t.id === tag.id) &&
219+
!obsPrioTags.some(t => t.id === tag.id)
220+
) {
221+
restOfTheTags.push(tag);
222+
}
223+
});
224+
});
225+
226+
const sortedRestOfTheTags = restOfTheTags.sort((a, b) => a.tag.localeCompare(b.tag));
227+
228+
result = [...prioTags, ...sortedRestOfTheTags];
148229

149230
return result;
150231
};

‎js/constants/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export const CATEGORY_TYPE_BY_ID = {
5252
4: CATEGORY_TYPE.OTHER
5353
};
5454

55+
export const OBSERVATION_TAG_CATEGORIES = ['ConformerSites', 'XtalformSites', 'Quatassemblies'];
56+
export const COMPOUND_PRIO_TAG_CATEGORIES = ['CanonSites'];
57+
5558
export const TAG_TYPE = {
5659
ALL: 'ALL',
5760
UNTAGGED: 'UNTAGGED'

0 commit comments

Comments
 (0)