Skip to content

Commit ffedb52

Browse files
mwinokanmwinokan
authored
Merge pull request #481 from xchem/staging
Push to production
2 parents f7830f5 + 746ee81 commit ffedb52

14 files changed

+161
-80
lines changed

‎js/components/loading/LoadingProvider.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,16 @@ export const LoadingProvider = memo(props => {
4747
} else if (!isSnapshotRendering && isSingleItemRendering) {
4848
setIsSingleItemRendering(false);
4949
} else {
50-
if (combined < objectsInSnapshotToBeRendered) {
51-
//snapshot is still rendering
52-
const progress = Math.floor((combined / objectsInSnapshotToBeRendered) * 100);
53-
setSnapshotProgress(progress);
54-
} else {
55-
//snapshot is fully rendered
56-
setSnapshotProgress(100);
57-
dispatch(setIsSnapshotRendering(false));
58-
// dispatch(setNglViewFromSnapshotRendered(true));
59-
}
50+
// if (combined < objectsInSnapshotToBeRendered) {
51+
// //snapshot is still rendering
52+
// const progress = Math.floor((combined / objectsInSnapshotToBeRendered) * 100);
53+
// setSnapshotProgress(progress);
54+
// } else {
55+
// //snapshot is fully rendered
56+
// setSnapshotProgress(100);
57+
// dispatch(setIsSnapshotRendering(false));
58+
// // dispatch(setNglViewFromSnapshotRendered(true));
59+
// }
6060
}
6161
}, [
6262
toBeDisplayedListLHS,
@@ -80,7 +80,7 @@ export const LoadingProvider = memo(props => {
8080
{(isLoading === true || moleculesAndTagsAreLoading === true || isSingleItemRendering) && (
8181
<LinearProgress color="secondary" className={classes.loadingProgress} variant="query" />
8282
)}
83-
{isSnapshotRendering && (
83+
{false && isSnapshotRendering && (
8484
<LinearProgress
8585
variant="determinate"
8686
color="secondary"

‎js/components/loading/RenderingProgressDialog.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { useState, useEffect, useContext } from 'react';
2+
import { Dialog, DialogTitle, DialogContent, LinearProgress, Typography } from '@material-ui/core';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
import { howManyInQueueRendered, howManyInQueueRenderedDataset } from '../../reducers/ngl/utils';
5+
import { setIsNGLQueueEmpty, setIsSnapshotRendering } from '../../reducers/ngl/actions';
6+
import { NglContext } from '../nglView/nglProvider';
7+
import { VIEWS } from '../../constants/constants';
8+
9+
export const RenderingProgressDialog = () => {
10+
const dispatch = useDispatch();
11+
12+
const [snapshotProgress, setSnapshotProgress] = useState(0);
13+
14+
const isNGLQueueEmpty = useSelector(state => state.nglReducers.isNGLQueueEmpty);
15+
const isSnapshotRendering = useSelector(state => state.nglReducers.isSnapshotRendering) || false;
16+
const objectsInSnapshotToBeRendered = useSelector(state => state.nglReducers.objectsInSnapshotToBeRendered);
17+
const toBeDisplayedListLHS = useSelector(state => state.selectionReducers.toBeDisplayedList);
18+
const toBeDisplayedListRHS = useSelector(state => state.datasetsReducers.toBeDisplayedList);
19+
const snapshotLoadingInProgress = useSelector(state => state.apiReducers.snapshotLoadingInProgress);
20+
21+
const { getNglView } = useContext(NglContext);
22+
const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
23+
const tasksSize = stage?.tasks?.count;
24+
25+
useEffect(() => {
26+
if (stage && (isSnapshotRendering || !isNGLQueueEmpty) && tasksSize > 0) {
27+
console.log(`RenderingProgressDialog - going to set listener on stage tasks`);
28+
stage.tasks.onZeroOnce(() => {
29+
console.log(`RenderingProgressDialog - render queue is empty`);
30+
dispatch(setIsNGLQueueEmpty(true));
31+
// setSnapshotProgress(0);
32+
});
33+
}
34+
}, [dispatch, isNGLQueueEmpty, isSnapshotRendering, snapshotLoadingInProgress, stage, tasksSize]);
35+
36+
useEffect(() => {
37+
const lhs = howManyInQueueRendered(toBeDisplayedListLHS);
38+
const rhs = howManyInQueueRenderedDataset(toBeDisplayedListRHS);
39+
const combined = lhs + rhs;
40+
41+
if (combined < objectsInSnapshotToBeRendered) {
42+
//snapshot is still rendering
43+
const progress = Math.floor((combined / objectsInSnapshotToBeRendered) * 100);
44+
setSnapshotProgress(progress);
45+
} else {
46+
//snapshot is fully rendered
47+
if (isNGLQueueEmpty) {
48+
dispatch(setIsSnapshotRendering(false));
49+
setSnapshotProgress(0);
50+
}
51+
}
52+
}, [dispatch, isNGLQueueEmpty, objectsInSnapshotToBeRendered, toBeDisplayedListLHS, toBeDisplayedListRHS]);
53+
54+
return (
55+
<Dialog
56+
open={
57+
(!!console.log(
58+
`RenderingProgressDialog - isSnapshotRendering: ${isSnapshotRendering}, isNGLQueueEmpty: ${isNGLQueueEmpty} result: ${isSnapshotRendering &&
59+
!isNGLQueueEmpty}`
60+
) ||
61+
true) &&
62+
isSnapshotRendering &&
63+
!isNGLQueueEmpty
64+
}
65+
aria-labelledby="rendering-progress-dialog-title"
66+
>
67+
<DialogTitle id="rendering-progress-dialog-title">Snapshot loading progress</DialogTitle>
68+
<DialogContent>
69+
<Typography variant="body1">Loading of snapshot is in progress...</Typography>
70+
<LinearProgress variant="determinate" value={snapshotProgress} />
71+
<Typography variant="body2">{`${snapshotProgress}%`}</Typography>
72+
</DialogContent>
73+
</Dialog>
74+
);
75+
};

‎js/components/nglView/generatingObjects.js

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const createRepresentationsArray = representations =>
99

1010
export const assignRepresentationToComp = (type, params, comp, lastKnownID = undefined) => {
1111
const createdRepresentation = comp.addRepresentation(type, params || {});
12-
1312
return {
1413
lastKnownID: lastKnownID || createdRepresentation.uuid,
1514
uuid: createdRepresentation.uuid,

‎js/components/nglView/renderingHelpers.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -207,19 +207,19 @@ export const loadQualityFromFile = async (
207207
}
208208
}
209209

210-
if (!skipOrientation) {
211-
if (orientationMatrix && orientationMatrix.elements) {
212-
const matrix = new Matrix4();
213-
matrix.fromArray(orientationMatrix.elements);
214-
215-
console.count(`Before applying quality orientation matrix.`);
216-
stage.viewerControls.orient(matrix);
217-
console.count(`After applying quality orientation matrix.`);
218-
} else if (orientationMatrix === undefined) {
219-
comp.autoView('ligand');
220-
console.count(`Orientation matrix not found for quality, using autoView instead.`);
221-
}
222-
}
210+
// if (!skipOrientation) {
211+
// if (orientationMatrix && orientationMatrix.elements) {
212+
// const matrix = new Matrix4();
213+
// matrix.fromArray(orientationMatrix.elements);
214+
215+
// console.count(`Before applying quality orientation matrix.`);
216+
// stage.viewerControls.orient(matrix);
217+
// console.count(`After applying quality orientation matrix.`);
218+
// } else if (orientationMatrix === undefined) {
219+
// comp.autoView('ligand');
220+
// console.count(`Orientation matrix not found for quality, using autoView instead.`);
221+
// }
222+
// }
223223

224224
const reprArray = createRepresentationsArray(representationStructures);
225225
console.count(`loadQualityFromFile finnished`);

‎js/components/nglView/renderingObjects.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -364,16 +364,16 @@ const showProtein = ({ stage, input_dict, object_name, representations, orientat
364364

365365
const skipOrientation = false; //state.trackingReducers.skipOrientationChange;
366366

367-
if (!skipOrientation) {
368-
if (orientationMatrix) {
369-
console.count(`Before applying orientation matrix - showProtein`);
370-
stage.viewerControls.orient(orientationMatrix);
371-
console.count(`After applying orientation matrix - showProtein`);
372-
} else if (orientationMatrix === undefined) {
373-
comp.autoView();
374-
console.count(`Orientation matrix not found for showProtein, using autoView instead.`);
375-
}
376-
}
367+
// if (!skipOrientation) {
368+
// if (orientationMatrix) {
369+
// console.count(`Before applying orientation matrix - showProtein`);
370+
// stage.viewerControls.orient(orientationMatrix);
371+
// console.count(`After applying orientation matrix - showProtein`);
372+
// } else if (orientationMatrix === undefined) {
373+
// comp.autoView();
374+
// console.count(`Orientation matrix not found for showProtein, using autoView instead.`);
375+
// }
376+
// }
377377
return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
378378
});
379379
};

‎js/components/preview/Preview.js

+2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import { useDisplayComplexRHS } from '../../reducers/ngl/useDisplayComplexRHS';
6565
import { useDisplaySurfaceRHS } from '../../reducers/ngl/useDisplaySurfaceRHS';
6666
import { loadTargetList } from '../target/redux/dispatchActions';
6767
import { EditSnapshotDialog } from './projectHistoryPanel/editSnapshotDialog';
68+
import { RenderingProgressDialog } from '../loading/RenderingProgressDialog';
6869

6970
const ReactGridLayout = WidthProvider(ResponsiveGridLayout);
7071

@@ -348,6 +349,7 @@ const Preview = memo(({ isStateLoaded, hideProjects, isSnapshot = false }) => {
348349
<DownloadStructureDialog />
349350
<PickProjectModal />
350351
<EditSnapshotDialog />
352+
<RenderingProgressDialog />
351353
{!hideProjects && <ProjectDetailDrawer showHistory={showHistory} setShowHistory={setShowHistory} />}
352354
</>
353355
);

‎js/components/projects/projectPreview/index.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const ProjectPreview = memo(({}) => {
3737
const displayedLigandsRHS = useSelector(state => state.datasetsReducers.ligandLists);
3838
const reapplyOrientation = useSelector(state => state.nglReducers.reapplyOrientation);
3939
const isNglViewFromSnapshotRendered = useSelector(state => state.nglReducers.nglViewFromSnapshotRendered);
40+
const switchingSnapshotWithinProject = useSelector(state => state.snapshotReducers.switchingSnapshotWithinProject);
4041

4142
const snapshotNglOrientation = useSelector(state => {
4243
let result = null;
@@ -68,7 +69,9 @@ export const ProjectPreview = memo(({}) => {
6869
reapplyOrientation
6970
) {
7071
try {
71-
stage.viewerControls.orient(snapshotNglOrientation.elements);
72+
if (!switchingSnapshotWithinProject) {
73+
stage.viewerControls.orient(snapshotNglOrientation.elements);
74+
}
7275
dispatch(setSnapshotOrientationApplied(true));
7376
if (reapplyOrientation) {
7477
dispatch(setReapplyOrientation(false));
@@ -77,7 +80,14 @@ export const ProjectPreview = memo(({}) => {
7780
console.error(e);
7881
}
7982
}
80-
}, [stage, snapshotNglOrientation, isNglViewFromSnapshotRendered, dispatch, reapplyOrientation]);
83+
}, [
84+
stage,
85+
snapshotNglOrientation,
86+
isNglViewFromSnapshotRendered,
87+
dispatch,
88+
reapplyOrientation,
89+
switchingSnapshotWithinProject
90+
]);
8191

8292
useEffect(() => {
8393
if (!isNglViewFromSnapshotRendered) {

‎js/components/projects/redux/dispatchActions.js

+2
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,8 @@ export const loadSnapshotByProjectID = projectID => async (dispatch, getState) =
150150
return Promise.resolve(null);
151151
} else if (response.data.results[0] !== undefined) {
152152
console.log(`Snapshot from server: ${JSON.stringify(response.data.results[0])}`);
153+
console.log(`RenderingProgressDialog - before applying state`);
154+
response.data.results[0].additional_info.snapshotState.nglReducers.isNGLQueueEmpty = false;
153155
dispatch(setEntireState(response.data.results[0].additional_info.snapshotState));
154156
dispatch(
155157
setCurrentSnapshot({

‎js/components/snapshot/redux/dispatchActions.js

+19-39
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,7 @@ export const getCleanStateForSnapshot = () => (dispatch, getState) => {
650650
snapshotData.selectionReducers.toBeDisplayedList.length + numberOfItemsRHS;
651651
snapshotData.nglReducers.isSnapshotRendering = true;
652652
snapshotData.nglReducers.nglViewFromSnapshotRendered = false;
653+
snapshotData.nglReducers.isNGLQueueEmpty = false;
653654

654655
return snapshotData;
655656
};
@@ -665,6 +666,15 @@ export const changeSnapshot = (projectID, snapshotID, stage, fromJobExec = false
665666

666667
const snapshotState = snapshotResponse.data.additional_info.snapshotState;
667668

669+
if (!fromJobExec) {
670+
//orientation animation
671+
const newOrientation = snapshotState.nglReducers.nglOrientations[VIEWS.MAJOR_VIEW];
672+
//log with timestamp
673+
console.log(`Switch - Before smooth animation: ${new Date().toLocaleTimeString()}`);
674+
await stage.animationControls.orient(newOrientation.elements, 2000); //.then(() => {
675+
console.log(`Switch - After smooth animation: ${new Date().toLocaleTimeString()}`);
676+
}
677+
668678
dispatch(
669679
setCurrentSnapshot({
670680
id: snapshotResponse.data.id,
@@ -683,9 +693,10 @@ export const changeSnapshot = (projectID, snapshotID, stage, fromJobExec = false
683693
let toBeDisplayedLHSNewDeepCopy = null;
684694
let toBeDisplayedRHSNewDeepCopy = null;
685695
if (!fromJobExec) {
686-
//orientation animation
687-
const newOrientation = snapshotState.nglReducers.nglOrientations[VIEWS.MAJOR_VIEW];
688-
await stage.animationControls.orient(newOrientation.elements, 2000); //.then(() => {
696+
currentState.snapshotReducers.switchingSnapshotWithinProject = true;
697+
snapshotState.snapshotReducers.switchingSnapshotWithinProject = true;
698+
snapshotState.nglReducers.isNGLQueueEmpty = false;
699+
689700
const toBeDisplayedLHSCurrent = currentState.selectionReducers.toBeDisplayedList;
690701
const toBeDisplayedRHSCurrent = currentState.datasetsReducers.toBeDisplayedList;
691702
const toBeDisplayedLHSNew = snapshotState.selectionReducers.toBeDisplayedList;
@@ -727,6 +738,7 @@ export const changeSnapshot = (projectID, snapshotID, stage, fromJobExec = false
727738

728739
currentState = getState();
729740
// const copyOfCurrentState = deepClone(currentState);
741+
console.log(`RenderingProgressDialog - merging state`);
730742
const newState = deepMergeWithPriorityAndBlackList(
731743
// copyOfCurrentState,
732744
currentState,
@@ -782,43 +794,11 @@ export const isSnapshotModified = snapshotID => async (dispatch, getState) => {
782794
delete originalSnapshotStateCopy.selectionReducers.toastMessages; //array
783795
delete currentSnapshotStateCopy.selectionReducers.toastMessages;
784796

785-
originalSnapshotStateCopy.selectionReducers.toBeDisplayedList = originalSnapshotStateCopy.selectionReducers.toBeDisplayedList.map(
786-
obj => ({
787-
...obj,
788-
center: false,
789-
rendered: true
790-
})
791-
);
792-
let toBeDisplayedRHS = {};
793-
let numberOfItemsRHS = 0;
794-
Object.keys(originalSnapshotStateCopy.datasetsReducers.toBeDisplayedList).forEach(datasetID => {
795-
toBeDisplayedRHS[datasetID] = originalSnapshotStateCopy.datasetsReducers.toBeDisplayedList[datasetID].map(obj => ({
796-
...obj,
797-
center: false,
798-
rendered: true
799-
}));
800-
numberOfItemsRHS += toBeDisplayedRHS[datasetID].length;
801-
});
802-
originalSnapshotStateCopy.datasetsReducers.toBeDisplayedList = toBeDisplayedRHS;
797+
delete originalSnapshotStateCopy.selectionReducers.toBeDisplayedList;
798+
delete originalSnapshotStateCopy.datasetsReducers.toBeDisplayedList;
803799

804-
currentSnapshotStateCopy.selectionReducers.toBeDisplayedList = currentSnapshotStateCopy.selectionReducers.toBeDisplayedList.map(
805-
obj => ({
806-
...obj,
807-
center: false,
808-
rendered: true
809-
})
810-
);
811-
toBeDisplayedRHS = {};
812-
numberOfItemsRHS = 0;
813-
Object.keys(currentSnapshotStateCopy.datasetsReducers.toBeDisplayedList).forEach(datasetID => {
814-
toBeDisplayedRHS[datasetID] = currentSnapshotStateCopy.datasetsReducers.toBeDisplayedList[datasetID].map(obj => ({
815-
...obj,
816-
center: false,
817-
rendered: true
818-
}));
819-
numberOfItemsRHS += toBeDisplayedRHS[datasetID].length;
820-
});
821-
currentSnapshotStateCopy.datasetsReducers.toBeDisplayedList = toBeDisplayedRHS;
800+
delete currentSnapshotStateCopy.selectionReducers.toBeDisplayedList;
801+
delete currentSnapshotStateCopy.datasetsReducers.toBeDisplayedList;
822802

823803
let path = '';
824804
const isModified = !deepEqual(originalSnapshotStateCopy, currentSnapshotStateCopy, path);

‎js/reducers/ngl/actions.js

+5
Original file line numberDiff line numberDiff line change
@@ -295,3 +295,8 @@ export const setNglObjectsInSnapshotToBeRendered = noOfobjects => ({
295295
type: CONSTANTS.SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED,
296296
noOfobjects: noOfobjects
297297
});
298+
299+
export const setIsNGLQueueEmpty = isEmpty => ({
300+
type: CONSTANTS.SET_IS_NGL_QUEUE_EMPTY,
301+
isEmpty
302+
});

‎js/reducers/ngl/constants.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export const CONSTANTS = {
6565
SET_SNAPSHOT_ORIENTATION_APPLIED: prefix + 'SET_SNAPSHOT_ORIENTATION_APPLIED',
6666
SET_REAPPLY_ORIENTATION: prefix + 'SET_REAPPLY_ORIENTATION',
6767
SET_IS_SNAPSHOT_RENDERING: prefix + 'SET_IS_SNAPSHOT_RENDERING',
68-
SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED: prefix + 'SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED'
68+
SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED: prefix + 'SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED',
69+
SET_IS_NGL_QUEUE_EMPTY: prefix + 'SET_IS_NGL_QUEUE_EMPTY'
6970
};
7071

7172
export const SCENES = {

‎js/reducers/ngl/dispatchActions.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {
2020
setContourAction,
2121
setWarningIconAction,
2222
setNglOrientationByInteraction,
23-
setColorAction
23+
setColorAction,
24+
setIsNGLQueueEmpty
2425
} from './actions';
2526
import { isEmpty, isEqual } from 'lodash';
2627
import { createRepresentationsArray, generateMoleculeObject } from '../../components/nglView/generatingObjects';
@@ -53,6 +54,7 @@ export const loadObject = ({
5354
center
5455
}) => async (dispatch, getState) => {
5556
console.log('loadObject - entry');
57+
dispatch(setIsNGLQueueEmpty(false));
5658
if (stage) {
5759
const state = getState();
5860
const actionRestoring = false; //state.trackingReducers.isActionRestoring;
@@ -78,7 +80,7 @@ export const loadObject = ({
7880
});
7981
}
8082

81-
console.count(`Before object is loaded`);
83+
console.count(`Switch - Before object is loaded`);
8284
// versionFixedTarget can cause "Error: TypeError: path is null" in stage.loadFile
8385
return nglObjectDictionary[versionFixedTarget.OBJECT_TYPE]({
8486
stage,

‎js/reducers/ngl/nglReducers.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,17 @@ export const INITIAL_STATE = {
5151
snapshotOrientationApplied: false,
5252
reapplyOrientation: false,
5353
objectsInSnapshotToBeRendered: 0,
54-
isSnapshotRendering: false
54+
isSnapshotRendering: false,
55+
isNGLQueueEmpty: true
5556
};
5657

5758
export default function nglReducers(state = INITIAL_STATE, action = {}) {
5859
switch (action.type) {
5960
// Defined in initialState - but may be needed if we want to load a different structure
6061

62+
case CONSTANTS.SET_IS_NGL_QUEUE_EMPTY:
63+
return { ...state, isNGLQueueEmpty: action.isEmpty };
64+
6165
case CONSTANTS.SET_NGL_OBJECTS_IN_SNAPSHOT_TO_BE_RENDERED:
6266
return { ...state, objectsInSnapshotToBeRendered: action.noOfobjects };
6367

0 commit comments

Comments
 (0)