From 8b0d54d2ef27ac6c4d3141ef0666631ae8e9847c Mon Sep 17 00:00:00 2001 From: Boris Kovar Date: Tue, 11 May 2021 09:00:53 +0200 Subject: [PATCH] - checkpoint --- js/components/preview/Preview.js | 4 --- .../preview/molecule/moleculeList.js | 12 -------- .../preview/molecule/redux/dispatchActions.js | 1 - js/components/preview/tags/api/tagsApi.js | 11 +++++-- js/components/preview/tags/redux/data.js | 4 +-- .../preview/tags/redux/dispatchActions.js | 4 +-- js/components/preview/tags/tagCategory.js | 15 +++++----- js/components/preview/tags/tagCategoryView.js | 4 +-- js/components/preview/tags/tagView.js | 7 +++-- .../preview/tags/withLoadingMolecules.js | 30 ++++++++++++++----- js/constants/constants.js | 2 +- 11 files changed, 50 insertions(+), 44 deletions(-) diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js index 0c327c297..a12fb96be 100644 --- a/js/components/preview/Preview.js +++ b/js/components/preview/Preview.js @@ -115,10 +115,6 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => { const isLoadingMoleculeList = useSelector(state => state.datasetsReducers.isLoadingMoleculeList); const tabValue = useSelector(state => state.datasetsReducers.tabValue); - useEffect(() => { - dispatch(setTagSelectorData()); - }, [dispatch]); - /* Loading datasets */ diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index 434e25026..150e31031 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -409,16 +409,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei loadAllMolecules(); }, [proteinsHasLoaded, target_on, mol_group_list, loadAllMolecules]); - const getMolGroupNameToId = useCallback(() => { - const molGroupMap = {}; - if (mol_group_list && mol_group_list.length > 0) { - mol_group_list.forEach(mg => { - molGroupMap[mg.description] = mg.id; - }); - return molGroupMap; - } - }, [mol_group_list]); - useEffect(() => { const allMolsGroupsCount = Object.keys(all_mol_lists || {}).length; if ((proteinsHasLoaded === true || proteinsHasLoaded === null) && allMolsGroupsCount > 0) { @@ -453,8 +443,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei proteinsHasLoaded, joinedMoleculeLists, all_mol_lists, - loadAllMolecules, - getMolGroupNameToId, directDisplay, directAccessProcessed, stageSummaryView, diff --git a/js/components/preview/molecule/redux/dispatchActions.js b/js/components/preview/molecule/redux/dispatchActions.js index d0620454f..577494e62 100644 --- a/js/components/preview/molecule/redux/dispatchActions.js +++ b/js/components/preview/molecule/redux/dispatchActions.js @@ -773,7 +773,6 @@ export const applyDirectSelection = (stage, stageSummaryView) => (dispatch, getS if (!directAccessProcessed && directDisplay && directDisplay.molecules && directDisplay.molecules.length > 0) { const allMols = state.apiReducers.all_mol_lists; - //const molGroupMap = getMolGroupNameToId(); directDisplay.molecules.forEach(m => { let keys = Object.keys(allMols); let directProteinNameModded = m.name.toLowerCase(); diff --git a/js/components/preview/tags/api/tagsApi.js b/js/components/preview/tags/api/tagsApi.js index 5f66a09eb..e6208f31a 100644 --- a/js/components/preview/tags/api/tagsApi.js +++ b/js/components/preview/tags/api/tagsApi.js @@ -1,5 +1,10 @@ -import { mockData } from './data'; +import { api } from '../../../../utils/api'; +import { base_url } from '../../../routes/constants'; -export const getAllData = target => { - return mockData; +export const getAllData = targetId => { + return api({ url: `${base_url}/api/target_molecules/?id=${targetId}` }).then(response => { + if (response?.data?.results?.length > 0) { + return response?.data?.results[0]; + } + }); }; diff --git a/js/components/preview/tags/redux/data.js b/js/components/preview/tags/redux/data.js index 6bd5aabbc..fca587936 100644 --- a/js/components/preview/tags/redux/data.js +++ b/js/components/preview/tags/redux/data.js @@ -1,6 +1,6 @@ import { TAG_TYPE } from '../../../../constants/constants'; export const specialTags = [ - { id: -1, text: TAG_TYPE.ALL, color: 'default' }, - { id: -2, text: TAG_TYPE.UNTAGGED, color: 'default' } + { data: [{ id: -1, tag: TAG_TYPE.ALL, colour: 'default' }], coordinates: [{}] }, + { data: [{ id: -2, tag: TAG_TYPE.UNTAGGED, color: 'default' }], coordinates: [{}] } ]; diff --git a/js/components/preview/tags/redux/dispatchActions.js b/js/components/preview/tags/redux/dispatchActions.js index 9f52a2b0f..97af916b2 100644 --- a/js/components/preview/tags/redux/dispatchActions.js +++ b/js/components/preview/tags/redux/dispatchActions.js @@ -35,7 +35,7 @@ export const setTagSelectorData = (categories, tags) => dispatch => { }; export const addSelectedTag = (tagItem, tags) => dispatch => { - if (tagItem.text === TAG_TYPE.ALL && tags) { + if (tagItem.data[0].tag === TAG_TYPE.ALL && tags) { tags.forEach(tag => { dispatch(appendSelectedTagList(tag)); }); @@ -44,7 +44,7 @@ export const addSelectedTag = (tagItem, tags) => dispatch => { }; export const removeSelectedTag = tagItem => dispatch => { - if (tagItem.text === TAG_TYPE.ALL && tags) { + if (tagItem.data[0].tag === TAG_TYPE.ALL && tags) { tags.forEach(tag => { dispatch(removeFromSelectedTagList(tag)); }); diff --git a/js/components/preview/tags/tagCategory.js b/js/components/preview/tags/tagCategory.js index deaf6a239..34fc92303 100644 --- a/js/components/preview/tags/tagCategory.js +++ b/js/components/preview/tags/tagCategory.js @@ -21,15 +21,16 @@ const TagCategory = memo(({ headerPadding = 0 }) => { const tagList = useSelector(state => state.selectionReducers.tagList); const specialTagList = useSelector(state => state.selectionReducers.specialTagList); - const siteCategory = categoryList.find(c => c.text === CATEGORY_TYPE.SITE); - const seriesCategory = categoryList.find(c => c.text === CATEGORY_TYPE.SERIES); - const forumCategory = categoryList.find(c => c.text === CATEGORY_TYPE.FORUM); + const siteCategory = categoryList.find(c => c.category === CATEGORY_TYPE.SITE); + const seriesCategory = categoryList.find(c => c.category === CATEGORY_TYPE.SERIES); + const forumCategory = categoryList.find(c => c.category === CATEGORY_TYPE.FORUM); - const siteTags = tagList.filter(c => c.category === siteCategory?.id); - const seriesTags = tagList.filter(c => c.category === seriesCategory?.id); - const forumTags = tagList.filter(c => c.category === forumCategory?.id); + const siteTags = tagList.filter(c => c.data[0].category_id === siteCategory?.id); + const seriesTags = tagList.filter(c => c.data[0].category_id === seriesCategory?.id); + const forumTags = tagList.filter(c => c.data[0].category_id === forumCategory?.id); const otherTags = tagList.filter( - c => c.category !== siteCategory?.id && c.category !== seriesCategory?.id && c.category !== forumCategory?.id + c => + c.category_id !== siteCategory?.id && c.category_id !== seriesCategory?.id && c.category_id !== forumCategory?.id ); return ( diff --git a/js/components/preview/tags/tagCategoryView.js b/js/components/preview/tags/tagCategoryView.js index 84b54be10..8e2894c7c 100644 --- a/js/components/preview/tags/tagCategoryView.js +++ b/js/components/preview/tags/tagCategoryView.js @@ -34,7 +34,7 @@ const TagCategoryView = memo(({ name, tags, specialTags }) => { {specialTags && specialTags.map((tag, idx) => { - let selected = selectedTagList.some(i => i.id === tag.id); + let selected = selectedTagList.some(i => i.data[0].id === tag.data[0].id); return ( { })} {tags && tags.map((tag, idx) => { - let selected = selectedTagList.some(i => i.id === tag.id); + let selected = selectedTagList.some(i => i.data[0].id === tag.data[0].id); return ; })} diff --git a/js/components/preview/tags/tagView.js b/js/components/preview/tags/tagView.js index 818f0cc60..2236a03a3 100644 --- a/js/components/preview/tags/tagView.js +++ b/js/components/preview/tags/tagView.js @@ -32,12 +32,13 @@ const useStyles = makeStyles(theme => ({ })); const TagView = memo(({ tag, selected, allTags, isSpecialTag }) => { + const tagData = tag?.data[0]; const classes = useStyles(); const dispatch = useDispatch(); const [tagEditModalOpen, setTagEditModalOpen] = useState(false); const tagColor = selected ? 'primary' : 'default'; - const bgColor = selected ? tagColor : (tag.color && tag.color) || tagColor; + const bgColor = selected ? tagColor : (tagData.colour && tagData.colour) || tagColor; const color = getFontColorByBackgroundColor(bgColor); const style = selected ? {} : { backgroundColor: bgColor, color: color }; @@ -56,11 +57,11 @@ const TagView = memo(({ tag, selected, allTags, isSpecialTag }) => { return ( <> - + { return memo(({ ...rest }) => { - let match = useRouteMatch(); - - const target = match && match.params && match.params.target; const dispatch = useDispatch(); + const target_on = useSelector(state => state.apiReducers.target_on); + useEffect(() => { - const allData = getAllData(target); - }, [dispatch, target]); + if (target_on) { + getAllData(target_on).then(data => { + let allMolecules = []; + data.molecules.forEach(mol => { + let molData = mol.data; + molData['tags_set'] = mol.tags_set; + + allMolecules.push(molData); + }); + dispatch(setAllMolecules(allMolecules)); + + const tags = data.tags_info; + const categories = data.tag_categories; + + dispatch(setTagSelectorData(categories, tags)); + }); + } + }, [dispatch, target_on]); return ; }); diff --git a/js/constants/constants.js b/js/constants/constants.js index a3fc00ff6..635d2a2cb 100644 --- a/js/constants/constants.js +++ b/js/constants/constants.js @@ -32,7 +32,7 @@ export const ARROW_TYPE = { }; export const CATEGORY_TYPE = { - SITE: 'Site', + SITE: 'Sites', SERIES: 'Series', FORUM: 'Forum', OTHER: 'Other'