import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Iframe from 'react-iframe'

import Typography from '@material-ui/core/Typography';

import PageHead from './page-head';
import PageBody from './page-body';

export default class Notebook extends Component {
   render = () => {
    const {fileId} = this.props;
    const baseUrl =  `${window.location.origin}/api/v1`;
    return (
      <div>
        <PageHead>
          <Typography  color="inherit" gutterBottom variant="display1">
            Notebook
          </Typography>
        </PageHead>
        <PageBody>
          <Iframe id='iframe' url={`${baseUrl}/notebooks/${fileId}/html`}
          width='100%'
          onLoad={function(){
            var frame = document.getElementById('iframe');
            if (frame) {
              frame.height = frame.contentWindow.document.body.scrollHeight + 'px';
            }
          }}/>
        </PageBody>
      </div>
    );
  }
}

Notebook.propTypes = {
  fileId: PropTypes.string
}

Notebook.defaultProps = {

  fileId: null,
}

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Iframe from 'react-iframe'

import { Typography, withStyles } from '@material-ui/core';

import PageHead from './page-head';
import PageBody from './page-body';

const styles = () => ({
  iframe: {
    border: 0,
    left: 0,
    position: 'absolute',
    top: 0,
    width:'100%',
    height:'100%'
  },
  container: {
    overflow: 'hidden',
    position: 'relative',
    paddingTop: '72%'
  }
});

class Notebook extends Component {
   render = () => {
    const { fileId, classes } = this.props;
    const baseUrl =  `${window.location.origin}/api/v1`;
    return (
      <div>
        <PageHead>
          <Typography  color="inherit" gutterBottom variant="display1">
            Notebook
          </Typography>
        </PageHead>
        <PageBody>
        <div className={classes.container}>
          <Iframe id='iframe' url={`${baseUrl}/notebooks/${fileId}/html`}
          className={classes.iframe}/>
        </div>
        </PageBody>
      </div>
    );
  }
}

Notebook.propTypes = {
  fileId: PropTypes.string
}

Notebook.defaultProps = {

  fileId: null,
}

export default withStyles(styles)(Notebook)
Use CSS styling to proportionally resize the iFrame
Use CSS styling to proportionally resize the iFrame

Use the notebook aspect ratio to determine padding for the iFrame container. This
keeps the proportions of the JupyterLab Notebook, avoids the delay caused by
calculating the height, and seems to work smoothly across browsers.

Signed-off-by: Brianna Major <6a62c0472e857db5994824f147beeb095c78d3a5@kitware.com>
