- checkpoint

m2ms · May 11, 2021 · 8b0d54d · 8b0d54d
1 parent 85f86e7
commit 8b0d54d
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -34,7 +34,7 @@ const TagCategoryView = memo(({ name, tags, specialTags }) => {
           <Grid className={classes.divContainer}>
             {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 (
                   <TagView
                     key={`tag-special-item-${idx}`}
@@ -47,7 +47,7 @@ const TagCategoryView = memo(({ name, tags, specialTags }) => {
               })}
             {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 <TagView key={`tag-item-${idx}`} tag={tag} selected={selected}></TagView>;
               })}
           </Grid>

diff --git 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 (
     <>
       <Grid className={classes.tagItem}>
-        <Tooltip title={tag.text}>
+        <Tooltip title={tagData.tag}>
           <Chip
             size="small"
             className={`${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`}
-            label={tag.text}
+            label={tagData.tag}
             clickable
             color={tagColor}
             style={style}

diff --git a/js/components/preview/tags/withLoadingMolecules.js b/js/components/preview/tags/withLoadingMolecules.js
@@ -1,18 +1,34 @@
 import React, { memo, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { useRouteMatch } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import { getAllData } from './api/tagsApi';
+import { setAllMolecules } from '../../../reducers/api/actions';
+import { setTagSelectorData } from '../tags/redux/dispatchActions';
 
 export const withLoadingMolecules = WrappedComponent => {
   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 <WrappedComponent {...rest} />;
   });

diff --git 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'