Implementation of discourse (#239)

* Update package.json - updated version number to 0.9.69 * - prelim changes * #557 Bug? Snapshot doesn't restore precise RHS tab * #571 [L] toggle not restored from snapshot for things on Selected Compounds tab * - implemented first phase of discourse integration * Squashed commit of the following: commit 431c372 Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Wed Mar 24 15:56:39 2021 +0100 - implemented first phase of discourse integration commit 103da7e Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Thu Mar 11 10:50:30 2021 +0100 - prelim changes * - updated version number to 0.10.1 * Squashed commit of the following: commit 5761def Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Wed Feb 3 14:23:02 2021 +0100 Fixed layout and imports commit d9b5895 Merge: 717ad54 083cc6d Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Wed Feb 3 13:55:03 2021 +0100 Merge branch 'allfunctionality' into #487 commit 717ad54 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Wed Feb 3 13:54:33 2021 +0100 Removed unnecessary parts commit 6c23110 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Wed Feb 3 13:36:29 2021 +0100 Fixed undo commit 19f839c Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Mon Feb 1 15:31:13 2021 +0100 Fixed button history tracking commit bf7b8a8 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Mon Feb 1 14:15:34 2021 +0100 Replaced throttle with debounce for nglView tracking commit 57b71e0 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Mon Feb 1 12:58:06 2021 +0100 Clear history on project change commit 419c268 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Mon Feb 1 12:10:50 2021 +0100 Separate orientation actions commit 272c265 Merge: f844087 bef6400 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Mon Feb 1 10:34:26 2021 +0100 Merge branch 'allfunctionality' into #487 commit f844087 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Thu Jan 21 13:52:19 2021 +0100 Ctreated temporary buttons commit 9b8a2ac Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Thu Jan 21 11:54:52 2021 +0100 Tidying up commit cb6c477 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Thu Jan 21 11:25:23 2021 +0100 Change ngl view on undo/redo commit edfb571 Author: ag-m2ms <anton.gasperak@m2ms.sk> Date: Wed Jan 20 16:37:42 2021 +0100 Initial implementation * - implemented modal window for discourse errors * - updated version number to 0.10.2 * - slightly updated error description * - loading discourse links in synchronous manner to avoid net::ERR_INSUFFICIENT_RESOURCES * - updated version number to 0.10.3 * - implemented "lazy" handling of the Discourse * Squashed commit of the following: commit b9205dd Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Mon Mar 29 15:13:32 2021 +0200 - implemented "lazy" handling of the Discourse * - updated version number to 0.10.4 * - hide link to project icon if no project is loaded * - updated version number to 0.10.5 * - updated error message * - used icon button instead of link in the target list because it behaved differently in test env from behavior in local env * - updated version number to 0.10.6 * - fixed issue when creating project from the preview and the first post for the first snapshot was not created * - updated version number to 0.10.7 * - visual improvements * - updated version number to 0.10.8 * - visual improvements * - updated version number to 0.10.9 * - fix (maybe) for that sometimes a discourse post was attempted before the project and/or snapshot were created * - updated version number to 0.10.10 * - fixed problem where snapshot post was attempted before project post was completed which caused that the snapshot post was never created * - updated version number to 0.10.11 * - fixed saving of the session actions * - updated version number to 0.10.12 * - checkpoint * - updated version number to 0.10.13 * #602 Snapshot tree and discourse posts * #602 Snapshot tree and discourse posts * - create discourse topic and post are disabled when creation process is ongoing - if discourse user doesn't exists the notice is displayed * - changed version number to 0.10.14 * - open discourse link in the new tab * - updated version number to 0.10.15 * - minor fixes * - updated version number to 0.10.16 * - fixed #609 * - updated version number to 0.10.17 Co-authored-by: Adriána Kohanová <adriana.kohanova@m2ms.sk> Co-authored-by: Adriána Kurillová <adriana.kurillova@m2ms.sk>
m2ms · Apr 21, 2021 · 8740211 · 8740211
1 parent 56c0372
commit 8740211
Show file tree

Hide file tree

Showing 42 changed files with 2,903 additions and 152 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -9,14 +9,14 @@
       "port": 9222,
       "request": "attach",
       "type": "pwa-chrome",
-      "urlFilter": "http://localhost:8080/*",
+      "urlFilter": "http://127.0.0.1:8080/*",
       "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:8080",
+      "url": "http://127.0.0.1:8080",
       "webRoot": "${workspaceFolder}"
     }
   ]

diff --git a/docker-compose.dev.vector.yml b/docker-compose.dev.vector.yml
@@ -44,6 +44,12 @@ services:
       POSTGRESQL_HOST: database
       POSTGRESQL_PORT: 5432
       NEO4J_AUTH: neo4j/test123
+      OIDC_RP_CLIENT_SECRET: c6245428-04c7-466f-9c4f-58c340e981c2
+      DISCOURSE_API_KEY: d6036de5e412123b77048c0b92d42fb108484ea1eef2918d67b236802fa8cd4f
+      FRAGALYSIS_BACKEND_SENTRY_DNS: https://27fa0675f555431aa02ca552e93d8cfb@o194333.ingest.sentry.io/1298290
+      ISPYB_FLAG: 'False'
+      DISCOURSE_DEV_POST_SUFFIX: '-boris-local'
+      DISCOURSE_HOST: 'https://discourse.xchem-dev.diamond.ac.uk'
     depends_on:
       - database
       - graph

diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js
@@ -241,7 +241,6 @@ export const SelectedCompoundList = memo(({ height }) => {
   const getCompoundIds = (mols) => {
     let result = {diffIds: {}, namesToIds: {}, idsInOrder: new Set()};
 
-    let currentIdIndex = 0;
     mols.forEach(mol => {
       if (mol.molecule.hasOwnProperty('compound_ids')) {
         const ids = mol.molecule['compound_ids'];
@@ -256,7 +255,6 @@ export const SelectedCompoundList = memo(({ height }) => {
             result.diffIds[vendorId].fieldsArray.push(idFieldName);
             result.namesToIds[idFieldName] = vendorId;
             result.idsInOrder.add(idFieldName);
-            currentIdIndex++;
           } else {
             if (perMolVendors.hasOwnProperty(vendorId)) {
               const perMolVendorCount = perMolVendors[vendorId];
@@ -269,7 +267,6 @@ export const SelectedCompoundList = memo(({ height }) => {
                 result.diffIds[vendorId].fieldsArray.push(idFieldName);
                 result.namesToIds[idFieldName] = vendorId;
                 result.idsInOrder.add(idFieldName);
-                currentIdIndex++;
               } 
             } else {
               perMolVendors[vendorId] = 1;

diff --git a/js/components/discourse/RegisterNotice.js b/js/components/discourse/RegisterNotice.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Typography, Link, Grid } from '@material-ui/core';
+import { getDiscourseURL } from '../../utils/discourse';
+
+export const RegisterNotice = () => {
+  return (
+    <Grid container direction="row" spacing={1}>
+      <Grid item>
+        <Typography variant="body1">Your Discourse account doesn't exist. You can register </Typography>
+      </Grid>
+      <Grid item>
+        <Link href={`${getDiscourseURL()}`} target="_blank">
+          {' '}
+          here
+        </Link>
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/js/components/header/discourseErrorModal.js b/js/components/header/discourseErrorModal.js
@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import Modal from '../common/Modal';
+import { Grid, Typography, Button } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
+import { setOpenDiscourseErrorModal } from '../../reducers/api/actions';
+
+export const DiscourseErrorModal = memo(({ openModal }) => {
+  const dispatch = useDispatch();
+
+  const closeModal = () => {
+    dispatch(setOpenDiscourseErrorModal(false));
+  };
+
+  return (
+    <Modal
+      open={openModal}
+      onClose={() => {
+        closeModal();
+      }}
+    >
+      <Grid container direction="column">
+        <Grid item>
+          <Typography variant="h3">DISCOURSE ERROR!</Typography>
+        </Grid>
+        <Grid item>
+          <Typography variant="body1">
+            Most likely there already is topic with same name as is this project name or your discourse user name
+            doesn't match your fragalysis user name. Also please check if descriptions you provided are not just random
+            letters because they also tend to dismissed by the Discourse server.
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid container justify="flex-end">
+        {' '}
+        <Button
+          color="primary"
+          onClick={() => {
+            closeModal();
+          }}
+        >
+          Close
+        </Button>
+      </Grid>
+    </Modal>
+  );
+});
diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -16,7 +16,8 @@ import {
   Avatar,
   Box,
   ButtonGroup,
-  LinearProgress
+  LinearProgress,
+  Tooltip
 } from '@material-ui/core';
 import {
   PowerSettingsNew,
@@ -27,7 +28,9 @@ import {
   Menu as MenuIcon,
   Work,
   Description,
-  Timeline
+  Timeline,
+  QuestionAnswer,
+  Chat
 } from '@material-ui/icons';
 import { HeaderContext } from './headerContext';
 import { Button } from '../common';
@@ -38,11 +41,15 @@ import { DJANGO_CONTEXT } from '../../utils/djangoContext';
 // import { useDisableUserInteraction } from '../helpers/useEnableUserInteracion';
 import { useHistory } from 'react-router-dom';
 import { IssueReport } from '../userFeedback/issueReport';
-import { IdeaReport } from '../userFeedback/ideaReport';
 import { FundersModal } from '../funders/fundersModal';
 import { TrackingModal } from '../tracking/trackingModal';
 // eslint-disable-next-line import/extensions
 import { version } from '../../../package.json';
+import { isDiscourseAvailable } from '../../utils/discourse';
+import { useSelector, useDispatch } from 'react-redux';
+import { generateDiscourseTargetURL, getExistingPost } from '../../utils/discourse';
+import { DiscourseErrorModal } from './discourseErrorModal';
+import { setOpenDiscourseErrorModal } from '../../reducers/api/actions';
 
 const useStyles = makeStyles(theme => ({
   padding: {
@@ -89,6 +96,7 @@ const useStyles = makeStyles(theme => ({
 
 export default memo(
   forwardRef(({ headerHeight = 0, setHeaderHeight }, ref) => {
+    const dispatch = useDispatch();
     let history = useHistory();
     const classes = useStyles();
     const { isLoading, headerNavbarTitle, setHeaderNavbarTitle, headerButtons } = useContext(HeaderContext);
@@ -98,6 +106,15 @@ export default memo(
     const [openFunders, setOpenFunders] = useState(false);
     const [openTrackingModal, setOpenTrackingModal] = useState(false);
 
+    const currentProject = useSelector(state => state.projectReducers.currentProject);
+    const targetName = useSelector(state => state.apiReducers.target_on_name);
+
+    const openDiscourseError = useSelector(state => state.apiReducers.open_discourse_error_modal);
+
+    const discourseAvailable = isDiscourseAvailable();
+    const targetDiscourseVisible = discourseAvailable && targetName;
+    const projectDiscourseVisible = discourseAvailable && currentProject && currentProject.title;
+
     const openXchem = () => {
       // window.location.href = 'https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html';
       window.open('https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html', '_blank');
@@ -123,6 +140,10 @@ export default memo(
       window.open('https://covid.postera.ai/covid', '_blank');
     };
 
+    const openDiscourseLink = url => {
+      window.open(url, '_blank');
+    };
+
     let authListItem;
 
     let username = null;
@@ -212,6 +233,56 @@ export default memo(
                 {headerButtons && headerButtons.map(item => item)}
               </ButtonGroup>
             </Grid>
+            <Grid item>
+              {discourseAvailable && (
+                <ButtonGroup variant="text" size="small">
+                  {targetDiscourseVisible && (
+                    <Tooltip title="Go to target category on Discourse">
+                      <Button
+                        startIcon={<Chat />}
+                        variant="text"
+                        size="small"
+                        onClick={() => {
+                          generateDiscourseTargetURL(targetName)
+                            .then(response => {
+                              const url = response.data['Post url'];
+                              if (url) {
+                                openDiscourseLink(url);
+                              }
+                            })
+                            .catch(err => {
+                              console.log(err);
+                              dispatch(setOpenDiscourseErrorModal(true));
+                            });
+                        }}
+                      ></Button>
+                    </Tooltip>
+                  )}
+                  {projectDiscourseVisible && (
+                    <Tooltip title="Go to project topic on Discourse">
+                      <Button
+                        startIcon={<QuestionAnswer />}
+                        variant="text"
+                        size="small"
+                        onClick={() => {
+                          getExistingPost(currentProject.title)
+                            .then(response => {
+                              const url = response.data['Post url'];
+                              if (url) {
+                                openDiscourseLink(url);
+                              }
+                            })
+                            .catch(err => {
+                              console.log(err);
+                              dispatch(setOpenDiscourseErrorModal(true));
+                            });
+                        }}
+                      ></Button>
+                    </Tooltip>
+                  )}
+                </ButtonGroup>
+              )}
+            </Grid>
             <Grid item>
               <Grid container direction="row" justify="flex-start" alignItems="center" spacing={1}>
                 <Grid item>
@@ -287,6 +358,7 @@ export default memo(
         </AppBar>
         <FundersModal openModal={openFunders} onModalClose={() => setOpenFunders(false)} />
         <TrackingModal openModal={openTrackingModal} onModalClose={() => setOpenTrackingModal(false)} />
+        <DiscourseErrorModal openModal={openDiscourseError} />
         <Drawer
           anchor="left"
           open={openMenu}

diff --git a/js/components/nglView/nglView.js b/js/components/nglView/nglView.js
@@ -10,7 +10,7 @@ import * as nglDispatchActions from '../../reducers/ngl/dispatchActions';
 import * as selectionActions from '../../reducers/selection/actions';
 import { NglContext } from './nglProvider';
 import { handleNglViewPick } from './redux/dispatchActions';
-import { throttle } from 'lodash';
+import { debounce } from 'lodash';
 import { NGL_PARAMS } from './constants';
 import { makeStyles, useTheme } from '@material-ui/core';
 import { VIEWS } from '../../constants/constants';
@@ -37,7 +37,7 @@ const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents,
   const theme = useTheme();
 
   const handleOrientationChanged = useCallback(
-    throttle(() => {
+    debounce(() => {
       const newStage = getNglView(div_id);
       if (newStage) {
         const currentOrientation = newStage.stage.viewerControls.getOrientation();
@@ -147,7 +147,7 @@ function mapStateToProps(state) {
 }
 const mapDispatchToProps = {
   setMolGroupSelection: selectionActions.setMolGroupSelection,
-  setOrientation: nglDispatchActions.setOrientation,
+  setOrientation: nglDispatchActions.setOrientationByInteraction,
   removeAllNglComponents: nglActions.removeAllNglComponents,
   handleNglViewPick
 };

diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js
@@ -212,17 +212,21 @@ const clearCompounds = (items, majorViewStage) => (dispatch, getState) => {
 };
 
 export const prepareFakeFilterData = () => (dispatch, getState) => {
-  dispatch(updateFilterShowedScoreProperties({
-    datasetID: AUX_VECTOR_SELECTOR_DATASET_ID,
-    scoreList: [{id: 1, name: 'smiles', description: 'smiles', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID},
-      {id: 2, name: 'mol', description: 'mol', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID},
-      {id: 3, name: 'vector', description: 'vector', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID},
-      {id: 4, name: 'class', description: 'class', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID},
-      {id: 5, name: 'compoundClass', description: 'compoundClass', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID}]
-  }));
-}
-
-export const isCompoundFromVectorSelector = (data) => {
+  dispatch(
+    updateFilterShowedScoreProperties({
+      datasetID: AUX_VECTOR_SELECTOR_DATASET_ID,
+      scoreList: [
+        { id: 1, name: 'smiles', description: 'smiles', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID },
+        { id: 2, name: 'mol', description: 'mol', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID },
+        { id: 3, name: 'vector', description: 'vector', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID },
+        { id: 4, name: 'class', description: 'class', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID },
+        { id: 5, name: 'compoundClass', description: 'compoundClass', computed_set: AUX_VECTOR_SELECTOR_DATASET_ID }
+      ]
+    })
+  );
+};
+
+export const isCompoundFromVectorSelector = data => {
   if (data['index'] !== undefined) {
     return true;
   } else {
@@ -330,7 +334,8 @@ export const handleBuyListAll = ({ isSelected, items, majorViewStage }) => (disp
   }
 };
 
-export const handleShowVectorCompound = ({ isSelected, data, index, majorViewStage }) => async (dispatch, getState) => {
+export const handleShowVectorCompound = ({ isSelected, data, majorViewStage }) => async (dispatch, getState) => {
+  const index = data.index;
   await dispatch(showCompoundNglView({ majorViewStage, data, index }));
   if (isSelected === false) {
     dispatch(removeShowedCompoundFromList(index, data));

diff --git a/js/components/preview/redux/dispatchActions.js b/js/components/preview/redux/dispatchActions.js
@@ -12,6 +12,7 @@ import { resetDatasetsState } from '../../datasets/redux/actions';
 import { restoreAfterTargetActions } from '../../../reducers/tracking/dispatchActions';
 import { resetTrackingState } from '../../../reducers/tracking/actions';
 import { setTargetOn } from '../../../reducers/api/actions';
+import { resetNglTrackingState } from '../../../reducers/nglTracking/dispatchActions';
 
 const loadProtein = nglView => (dispatch, getState) => {
   const state = getState();
@@ -122,6 +123,7 @@ export const unmountPreviewComponent = (stages = []) => dispatch => {
   });
 
   dispatch(resetTrackingState());
+  dispatch(resetNglTrackingState());
 
   dispatch(resetCurrentCompoundsSettings(true));
   dispatch(resetProjectsReducer());
@@ -146,6 +148,7 @@ export const resetReducersBetweenSnapshots = (stages = []) => dispatch => {
   dispatch(resetSelectionState());
   dispatch(resetDatasetsState());
   dispatch(resetTrackingState());
+  dispatch(resetNglTrackingState());
   dispatch(setTargetOn(undefined));
 };