Merge remote-tracking branch 'remotes/origin/#424'

js/components/datasets/datasetMoleculeView.js

@@ -37,6 +37,7 @@ import { ArrowDownward, ArrowUpward, MyLocation } from '@material-ui/icons';
 import { isNumber, isString } from 'lodash';
 import { SvgTooltip } from '../common';
 
+
 const useStyles = makeStyles(theme => ({
   container: {
     padding: theme.spacing(1) / 4,
@@ -579,7 +580,6 @@ export const DatasetMoleculeView = memo(
             ))}
           </Grid>
         </Grid>*/}
-
             {/* Control Buttons A, L, C, V */}
             <Grid item>
               <Grid

js/components/preview/molecule/moleculeList.js

@@ -280,7 +280,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
     joinedMoleculeLists = filterMolecules(joinedMoleculeLists, filter);
   } else {
     // default sort is by site
-    joinedMoleculeLists.sort((a, b) => a.site - b.site);
+    joinedMoleculeLists.sort((a, b) => a.site - b.site || a.number - b.number);
   }
 
   const loadNextMolecules = () => {
@@ -319,7 +319,9 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
             target !== undefined &&
             wereMoleculesInitialized.current === false
           ) {
-            dispatch(initializeMolecules(stage, cached_mol_lists[mol_group_on]));
+            let moleculeList = cached_mol_lists[mol_group_on];
+            let firstId = joinedMoleculeLists && joinedMoleculeLists[0] && joinedMoleculeLists[0].id;
+            dispatch(initializeMolecules(stage, moleculeList, firstId));
             wereMoleculesInitialized.current = true;
           }
         })
@@ -337,7 +339,8 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
     dispatch,
     hideProjects,
     target,
-    proteinsHasLoaded
+    proteinsHasLoaded,
+    joinedMoleculeLists
   ]);
 
   useEffect(() => {

js/components/preview/molecule/moleculeView.js

@@ -32,6 +32,7 @@ import { moleculeProperty } from './helperConstants';
 import { centerOnLigandByMoleculeID } from '../../../reducers/ngl/dispatchActions';
 import { SvgTooltip } from '../../common';
 
+
 const useStyles = makeStyles(theme => ({
   container: {
     padding: theme.spacing(1) / 4,

js/components/preview/molecule/redux/constants.js

@@ -2,7 +2,6 @@ const prefix = 'PREVIEW_MOLECULE_';
 
 export const constants = {
   SET_SORT_DIALOG_OPEN: prefix + 'SET_SORT_DIALOG_OPEN',
-
   RELOAD_REDUCER: prefix + 'RELOAD_REDUCER'
 };
 
@@ -14,12 +13,19 @@ export const MOL_ATTR = {
     color: '#72e5be',
     filter: false
   },
-  HID: {
+  /*  HID: {
     key: 'id',
     name: 'Hit ID (HID)',
     isFloat: false,
     color: '#daa520',
     filter: false
+  }, */
+  HID: {
+    key: 'number',
+    name: 'Hit ID (HID)',
+    isFloat: true,
+    color: '#daa520',
+    filter: false
   },
   MW: {
     key: 'MW',

js/components/preview/molecule/redux/dispatchActions.js

@@ -309,9 +309,9 @@ export const removeLigand = (stage, data) => dispatch => {
  * Turn on the complex of the first ligand of the site
  * Turn on every ligand of the site
  */
-export const initializeMolecules = (majorView, moleculeList) => dispatch => {
+export const initializeMolecules = (majorView, moleculeList, firstId) => dispatch => {
   if (moleculeList && majorView) {
-    const firstMolecule = moleculeList[0];
+    const firstMolecule = moleculeList.find(m => m.id === firstId) || moleculeList[0];
     if (firstMolecule) {
       dispatch(addHitProtein(majorView, firstMolecule, colourList[firstMolecule.id % colourList.length]));
       dispatch(addLigand(majorView, firstMolecule, colourList[firstMolecule.id % colourList.length], true));

js/components/preview/molecule/redux/selectors.js

@@ -17,13 +17,16 @@ export const selectJoinedMoleculeList = createSelector(
       object_selection.forEach(obj => {
         const cachedData = cached_mol_lists[obj];
         const site = (mol_group_list || []).findIndex(group => group.id === obj) + 1;
+
         let cachedDataArray = [];
         if (cachedData && Array.isArray(cachedData)) {
           cachedDataArray = cachedData;
         } else if (cachedData && cachedData.results && Array.isArray(cachedData.results)) {
           cachedDataArray = cachedData.results;
         }
-        cachedDataArray.forEach(r => joinedMoleculeLists.push(Object.assign({ site: site }, r)));
+        cachedDataArray.forEach(r => {
+          joinedMoleculeLists.push(Object.assign({ site: site }, r));
+        });
       });
     }
     return joinedMoleculeLists;

js/components/preview/moleculeGroups/redux/dispatchActions.js

@@ -159,6 +159,7 @@ export const loadMoleculeGroups = ({ summaryView, setOldUrl, oldUrl, onCancel, i
       afterPush: data_list => dispatch(saveMoleculeGroupsToNglView(data_list, summaryView, projectId)),
       list_type,
       setObjectList: mol_group_list => {
+        mol_group_list.sort((a, b) => a.id - b.id);
         dispatch(setMolGroupList(mol_group_list));
       },
       cancel: onCancel

js/constants/constants.js

@@ -1,3 +1,11 @@
+const main_identifier = 'x';
+const sub_identifier = '_';
+
+export const CONSTANTS = {
+  MAIN_IDENTIFIER: main_identifier,
+  SUB_IDENTIFIER: sub_identifier
+};
+
 export const VIEWS = {
   MAJOR_VIEW: 'major_view',
   SUMMARY_VIEW: 'summary_view',

js/utils/genericList.js

@@ -2,6 +2,7 @@ import * as listTypes from '../constants/listTypes';
 import { api } from './api';
 import { DJANGO_CONTEXT } from './djangoContext';
 import { OBJECT_TYPE } from '../components/nglView/constants';
+import { CONSTANTS } from '../constants/constants';
 
 // START of functions from GenericList
 export const getUrl = ({
@@ -126,8 +127,16 @@ export const loadFromServer = ({
         // if we are handling molecule list and molecule data for mol_group are fetched
         if (list_type === listTypes.MOLECULE && mol_group_on && setCachedMolLists) {
           // update cached mol lists
+          let moleculeLists = [];
+          let data = response.data.results;
+          let cachedDataArray = (data && data) || [];
+          cachedDataArray.forEach(r => {
+            let result = getNumberFromCode(r.protein_code);
+            moleculeLists.push(Object.assign({ number: result.number }, r));
+          });
+
           const newMolLists = Object.assign({}, cached_mol_lists, {
-            [mol_group_on]: response.data.results
+            [mol_group_on]: moleculeLists
           });
           setCachedMolLists(newMolLists);
         }
@@ -148,4 +157,37 @@ export const loadFromServer = ({
   return Promise.resolve();
 };
 
+export function getNumberFromCode(inputCode) {
+  let number = 0;
+  let subNumber = 0;
+
+  let code = inputCode.toLowerCase();
+  let codeAfterIdentifier = code.split(CONSTANTS.MAIN_IDENTIFIER)[1];
+
+  if (codeAfterIdentifier != null) {
+    let startingNumber = (codeAfterIdentifier.match(/\d+/) || [0])
+      .map(function(v) {
+        return +v;
+      })
+      .shift();
+
+    number = startingNumber;
+
+    if (codeAfterIdentifier.includes(CONSTANTS.SUB_IDENTIFIER)) {
+      let codeAfterSubIdentifier = codeAfterIdentifier.split(CONSTANTS.sub_identifier)[1];
+      if (codeAfterSubIdentifier != null) {
+        let startingSubNumber = (codeAfterSubIdentifier.match(/\d+/) || [0])
+          .map(function(v) {
+            return +v;
+          })
+          .shift();
+        subNumber = startingSubNumber;
+      }
+    }
+  }
+
+  let numberWithSub = +(number + '.' + subNumber);
+  return { number: numberWithSub };
+}
+
 // END of functions from GenericList

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragalysis-frontend",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Frontend for fragalysis",
   "main": "webpack.config.js",
   "scripts": {