#241 surface render

js/components/common/Surfaces/Panel/index.js

@@ -98,14 +98,24 @@ export const Panel = memo(
                 className={classes.headerGrid}
               >
                 {title && (
-                  <Grid item xs={hasExpansion || headerActions ? 4 : 12} className={classes.headerTitle}>
+                  <Grid
+                    item
+                    xs={hasExpansion || headerActions ? (headerActions && headerActions.length > 2 ? 4 : 6) : 12}
+                    className={classes.headerTitle}
+                  >
                     <Typography variant="h6" color="inherit" noWrap>
                       {title}
                     </Typography>
                   </Grid>
                 )}
                 {(headerActions || hasExpansion) && (
-                  <Grid item container direction="row" justify="flex-end" xs={title ? 8 : 12}>
+                  <Grid
+                    item
+                    container
+                    direction="row"
+                    justify="flex-end"
+                    xs={title ? (headerActions && headerActions.length > 2 ? 8 : 6) : 12}
+                  >
                     {headerActions &&
                       headerActions.map((action, index) => (
                         <Grid item key={index}>

js/components/nglView/nglView.js

@@ -92,8 +92,14 @@ const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents,
     if (stage === undefined && !nglViewFromContext) {
       const newStage = new Stage(div_id);
       // set default settings
-      for (const [key, value] of Object.entries(NGL_INITIAL.viewParams)) {
-        newStage.setParameters({ [key]: value });
+      if (div_id === VIEWS.MAJOR_VIEW) {
+        // set all defaults for main view
+        for (const [key, value] of Object.entries(NGL_INITIAL.viewParams)) {
+          newStage.setParameters({ [key]: value });
+        }
+      } else {
+        // set only background color for preview view
+        newStage.setParameters({ [NGL_PARAMS.backgroundColor]: NGL_INITIAL.viewParams[NGL_PARAMS.backgroundColor] });
       }
       registerNglView(div_id, newStage);
       registerStageEvents(newStage, getNglView);

js/components/nglView/renderingObjects.js

@@ -57,7 +57,8 @@ const renderHitProtein = (ol, representations, orientationMatrix) => {
   const repr3 = createRepresentationStructure(MOL_REPRESENTATION.line, {
     colorScheme: 'element',
     colorValue: colour,
-    sele: '/0'
+    sele: '/0',
+    linewidth: 4
   });
 
   const reprArray = representations || createRepresentationsArray([repr3]);
@@ -84,6 +85,27 @@ const showHitProtein = (stage, input_dict, object_name, representations, orienta
   ]).then(ol => renderHitProtein(ol, representations, orientationMatrix));
 };
 
+const showHitProteinn = (stage, input_dict, object_name, representations, orientationMatrix) =>
+  stage.loadFile(input_dict.prot_url, { name: object_name, ext: 'pdb', defaultAssembly: 'BU1' }).then(comp => {
+    const reprArray =
+      representations ||
+      createRepresentationsArray([
+        createRepresentationStructure(MOL_REPRESENTATION.line, {
+          colorScheme: 'element',
+          colorValue: input_dict.colour,
+          sele: '/0',
+          linewidth: 4
+        })
+      ]);
+
+    if (orientationMatrix) {
+      stage.viewerControls.orient(orientationMatrix);
+    } else if (orientationMatrix === undefined) {
+      comp.autoView();
+    }
+    return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
+  });
+
 const renderComplex = (ol, representations, orientationMatrix) => {
   let cs = concatStructures(
     ol[4],
@@ -128,53 +150,30 @@ const showComplex = (stage, input_dict, object_name, representations, orientatio
   ]).then(ol => renderComplex(ol, representations, orientationMatrix));
 };
 
-const renderSurface = (ol, representations, orientationMatrix) => {
-  let cs = concatStructures(
-    ol[4],
-    ol[0].structure.getView(new Selection('not ligand')),
-    ol[1].structure.getView(new Selection(''))
-  );
-  let stage = ol[2];
-  let focus_let_temp = ol[3];
-  let colour = ol[5];
-  // Set the object name
-  let comp = stage.addComponentFromObject(cs);
+const showSurface = (stage, input_dict, object_name, representations, orientationMatrix) =>
+  stage.loadFile(input_dict.prot_url, { name: object_name, ext: 'pdb', defaultAssembly: 'BU1' }).then(comp => {
+    const reprArray =
+      representations ||
+      createRepresentationsArray([
+        createRepresentationStructure(MOL_REPRESENTATION.surface, {
+          sele: 'polymer',
+          colorScheme: 'electrostatic',
+          // colorDomain: [-0.3, 0.3],
+          surfaceType: 'av',
+          radiusType: 'vdw',
+          opacity: 0.74,
+          colorValue: input_dict.colour
+        })
+      ]);
 
-  const repr = createRepresentationStructure(MOL_REPRESENTATION.surface, {
-    sele: 'polymer',
-    colorScheme: 'electrostatic',
-    //colorScale: 'RdYlGn',
-    colorDomain: [-0.3, 0.3],
-    surfaceType: 'av',
-    radiusType: 'vdw',
-    opacity: 0.47,
-    colorValue: colour
+    if (orientationMatrix) {
+      stage.viewerControls.orient(orientationMatrix);
+    } else if (orientationMatrix === undefined) {
+      comp.autoView();
+    }
+    return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
   });
 
-  const reprArray = representations || createRepresentationsArray([repr]);
-  if (orientationMatrix) {
-    stage.viewerControls.orient(orientationMatrix);
-  } else if (orientationMatrix === undefined) {
-    comp.autoView('ligand');
-    //TODO setFocus should be in condition
-    comp.stage.setFocus(focus_let_temp);
-  }
-
-  return assignRepresentationArrayToComp(reprArray, comp);
-};
-
-const showSurface = (stage, input_dict, object_name, representations, orientationMatrix) => {
-  let stringBlob = new Blob([input_dict.sdf_info], { type: 'text/plain' });
-  return Promise.all([
-    stage.loadFile(input_dict.prot_url, { ext: 'pdb', defaultAssembly: 'BU1' }),
-    stage.loadFile(stringBlob, { ext: 'sdf' }),
-    stage,
-    defaultFocus,
-    object_name,
-    input_dict.colour
-  ]).then(ol => renderSurface(ol, representations, orientationMatrix));
-};
-
 // ligand
 const showEvent = (stage, input_dict, object_name, representations, orientationMatrix) =>
   Promise.all(

js/components/preview/molecule/moleculeList.js

@@ -243,7 +243,11 @@ const MoleculeList = memo(
       setCurrentPage(currentPage + 1);
     };
 
+    // prevent loading molecules multiple times
+    const firstLoadRef = useRef(!firstLoad);
+
     useEffect(() => {
+      // TODO this reloads too much..
       loadFromServer({
         url: getUrl({ list_type, target_on, mol_group_on }),
         setOldUrl: url => setOldUrl(url),
@@ -258,7 +262,9 @@ const MoleculeList = memo(
           console.log('initializing filter');
           setPredefinedFilter(dispatch(initializeFilter()).predefined);
           // initialize molecules on first target load
-          if (stage && cached_mol_lists && cached_mol_lists[mol_group_on] && firstLoad) {
+          if (stage && cached_mol_lists && cached_mol_lists[mol_group_on] && firstLoadRef && firstLoadRef.current) {
+            console.log('initializing molecules');
+            firstLoadRef.current = false;
             dispatch(setFirstLoad(false));
             dispatch(initializeMolecules(stage, cached_mol_lists[mol_group_on].results));
           }

js/components/preview/viewerControls/settingsControls.js

@@ -63,7 +63,7 @@ export const SettingControls = memo(({ open, onClose }) => {
           </Grid>
           <Grid item className={classes.value}>
             <Slider
-              defaultValue={viewParams[NGL_PARAMS.clipNear]}
+              value={viewParams[NGL_PARAMS.clipNear]}
               valueLabelDisplay="auto"
               step={1}
               min={0}
@@ -78,7 +78,7 @@ export const SettingControls = memo(({ open, onClose }) => {
           </Grid>
           <Grid item className={classes.value}>
             <Slider
-              defaultValue={viewParams[NGL_PARAMS.clipFar]}
+              value={viewParams[NGL_PARAMS.clipFar]}
               valueLabelDisplay="auto"
               step={1}
               min={0}
@@ -106,7 +106,7 @@ export const SettingControls = memo(({ open, onClose }) => {
           </Grid>
           <Grid item className={classes.value}>
             <Slider
-              defaultValue={viewParams[NGL_PARAMS.fogNear]}
+              value={viewParams[NGL_PARAMS.fogNear]}
               valueLabelDisplay="auto"
               step={1}
               min={0}
@@ -121,7 +121,7 @@ export const SettingControls = memo(({ open, onClose }) => {
           </Grid>
           <Grid item className={classes.value}>
             <Slider
-              defaultValue={viewParams[NGL_PARAMS.fogFar]}
+              value={viewParams[NGL_PARAMS.fogFar]}
               valueLabelDisplay="auto"
               step={1}
               min={0}