Merge pull request #679 from MetaCell/feature/81-plot-styling-3

Working attempt to fix plots

Author: enicolasgomez

setup.py

@@ -42,7 +42,7 @@
     install_requires=[
         'jupyter-geppetto>=1.0.0',
         'NEURON>=8.0.2',
-        'netpyne>=1.0.2.1',
+        'netpyne>=1.0.3.1',
         'neuromllite==0.5.1',
         'pyNeuroML>=0.7.1',
         'sentry_sdk>=1.5.2',

webapp/components/general/HTMLViewer.js

@@ -23,11 +23,11 @@ class CustomHTMLViewer extends Component {
 
   componentDidMount () {
     window.addEventListener('resize', this.delayedResize.bind(this));
-    this.resizeIfNeeded();
+    this.resizeIfNeeded(true);
   }
 
   componentDidUpdate () {
-    this.resizeIfNeeded();
+    this.resizeIfNeeded(true);
   }
 
   componentWillUnmount () {
@@ -63,10 +63,10 @@ class CustomHTMLViewer extends Component {
     }
   }
 
-  resizeIfNeeded () {
+  resizeIfNeeded (force = false) {
     const dimensions = this.getParentSize();
 
-    if (dimensions !== false && this.wasParentResized(dimensions)) {
+    if ((dimensions !== false && this.wasParentResized(dimensions)) || (force)) {
       this.dimensions = dimensions;
       this.adjustSVGSize();
     }

webapp/components/general/PlotViewer.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import HTMLViewer from './HTMLViewer';
-
 const PlotViewer = ({ key, id, method }) => {
   const data = window.plotCache[id];
-
   if (method.plotMethod.startsWith('iplot')) {
     return (
       <ReactResizeDetector>
@@ -13,16 +11,21 @@ const PlotViewer = ({ key, id, method }) => {
             width: '100%',
             height: '100%',
             textAlign: 'center',
+            position: 'absolute',
+            top: '0px',
+            left: '0px'
           }}
         >
           <iframe
             title="plot"
-            scrolling="no"
-            name="dipole"
+            name="plotViewer"
             srcDoc={data}
             style={{
-              overflowX:'hidden',
-              overflowY:'hidden',
+              position: 'absolute',
+              overflowX:'scroll',
+              overflowY:'scroll',
+              top: '0px',
+              left: '0px',
               border: 0,
               width: '100%',
               height: '100%',
@@ -38,5 +41,4 @@ const PlotViewer = ({ key, id, method }) => {
     </ReactResizeDetector>
   );
 };
-
 export default PlotViewer;