Merge pull request #62 from plotly/last-fixed-branch-3

Dash App Preview generation

Author: tarzzz

bin/plotly-export-server_electron.js

@@ -53,6 +53,10 @@ const opts = {
       name: 'plotly-dashboard-preview',
       route: '/dashboard-preview',
       options: plotlyJsOpts
+    },
+    {
+      name: 'plotly-dash-preview',
+      route: '/dash-preview'
     }]
 }
 

package.json

@@ -49,7 +49,7 @@
     "get-stdin": "^5.0.1",
     "glob": "^7.1.2",
     "is-plain-obj": "^1.1.0",
-    "is-url": "^1.2.2",
+    "is-url": "^1.2.4",
     "minimist": "^1.2.0",
     "read-chunk": "^2.1.0",
     "request": "^2.81.0",

src/component/plotly-dash-preview/constants.js

@@ -0,0 +1,20 @@
+const pixelsInInch = 96
+const micronsInInch = 25400
+
+module.exports = {
+  minInterval: 500,
+  maxRenderingTries: 100,
+  pixelsInMicron: pixelsInInch / micronsInInch,
+  sizeMapping: {
+    'A3': {'width': 11.7 * pixelsInInch, 'height': 16.5 * pixelsInInch},
+    'A4': {'width': 8.3 * pixelsInInch, 'height': 11.7 * pixelsInInch},
+    'A5': {'width': 5.8 * pixelsInInch, 'height': 8.3 * pixelsInInch},
+    'Letter': {'width': 8.5 * pixelsInInch, 'height': 11 * pixelsInInch},
+    'Legal': {'width': 8.5 * pixelsInInch, 'height': 14 * pixelsInInch},
+    'Tabloid': {'width': 11 * pixelsInInch, 'height': 17 * pixelsInInch}
+  },
+  statusMsg: {
+    525: 'dash preview generation failed',
+    526: 'dash preview generation timed out'
+  }
+}

src/component/plotly-dash-preview/convert.js

@@ -0,0 +1,22 @@
+const cst = require('../plotly-graph/constants')
+
+/**
+ * @param {object} info : info object
+ *  - imgData
+ * @param {object} opts : component options
+ * @param {function} reply
+ *  - errorCode
+ *  - result
+ */
+function convert (info, opts, reply) {
+  const result = {}
+
+  result.head = {}
+  result.head['Content-Type'] = cst.contentFormat.pdf
+  result.bodyLength = result.head['Content-Length'] = info.imgData.length
+  result.body = Buffer.from(info.imgData, 'base64')
+
+  reply(null, result)
+}
+
+module.exports = convert

src/component/plotly-dash-preview/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: 'plotly-dash-preview',
+  ping: require('../../util/generic-ping'),
+  // inject is not required here, but omitting it causes test-failures
+  inject: require('./../plotly-graph/inject'),
+  parse: require('./parse'),
+  render: require('./render'),
+  convert: require('./convert')
+}

src/component/plotly-dash-preview/parse.js

@@ -0,0 +1,58 @@
+const isUrl = require('is-url')
+const cst = require('./constants')
+const isPositiveNumeric = require('../../util/is-positive-numeric')
+const isNonEmptyString = require('../../util/is-non-empty-string')
+
+/**
+ * @param {object} body : JSON-parsed request body
+ *  - url
+ *  - pdfOptions
+ * @param {object} opts : component options
+ * @param {function} sendToRenderer
+ * - errorCode
+ * - result
+ */
+function parse (body, opts, sendToRenderer) {
+  const result = {}
+
+  const errorOut = (code, msg) => {
+    result.msg = msg
+    sendToRenderer(code, result)
+  }
+
+  if (isUrl(body.url)) {
+    result.url = body.url
+  } else {
+    return errorOut(400, 'invalid url')
+  }
+
+  result.pdfOptions = body.pdf_options || {}
+  if (!isNonEmptyString(body.selector) && !isPositiveNumeric(body.timeout)) {
+    return errorOut(400, 'either selector or timeout must be specified')
+  }
+
+  result.selector = body.selector
+  result.timeOut = body.timeout
+  result.tries = Number(result.timeOut * 1000 / cst.minInterval)
+
+  if (cst.sizeMapping[result.pdfOptions.pageSize]) {
+    result.browserSize = cst.sizeMapping[result.pdfOptions.pageSize]
+  } else if (body.pageSize && isPositiveNumeric(body.pageSize.width) &&
+             isPositiveNumeric(body.pageSize.height)) {
+    result.browserSize = {
+      width: body.pageSize.width * cst.pixelsInMicron,
+      height: body.pageSize.height * cst.pixelsInMicron
+    }
+  } else {
+    return errorOut(
+      400,
+      'pageSize must either be A3, A4, A5, Legal, Letter, ' +
+      'Tabloid or an Object containing height and width ' +
+      'in microns.'
+    )
+  }
+
+  sendToRenderer(null, result)
+}
+
+module.exports = parse

src/component/plotly-dash-preview/render.js

@@ -0,0 +1,80 @@
+const remote = require('../../util/remote')
+const cst = require('./constants')
+
+/**
+ * @param {object} info : info object
+ *  - url
+ *  - pdfOptions
+ * @param {object} opts : component options
+ * @param {function} sendToMain
+ *  - errorCode
+ *  - result
+ *    - imgData
+ */
+function render (info, opts, sendToMain) {
+  const result = {}
+
+  let win = remote.createBrowserWindow(info.browserSize)
+  win.loadURL(info.url)
+
+  const contents = win.webContents
+
+  const done = errorCode => {
+    win.close()
+
+    if (errorCode) {
+      result.msg = cst.statusMsg[errorCode]
+    }
+    sendToMain(errorCode, result)
+  }
+
+  /*
+   * We check for a 'waitfor' div in the dash-app
+   * which indicates that the app has finished rendering.
+   */
+  const loaded = () => {
+    return win.webContents.executeJavaScript(`
+      new Promise((resolve, reject) => {
+        let tries = ${info.tries} || ${cst.maxRenderingTries}
+
+        let interval = setInterval(() => {
+          let el = document.querySelector('${info.selector}')
+
+          if (el) {
+            clearInterval(interval)
+            resolve(true)
+          }
+
+          if (--tries === 0) {
+            clearInterval(interval)
+
+            if (${info.timeOut}) {
+              resolve(true)
+            } else {
+              reject('fail to load')  
+            }
+          }
+        }, ${cst.minInterval})
+
+      })`)
+  }
+
+  win.on('closed', () => {
+    win = null
+  })
+
+  loaded().then(() => {
+    contents.printToPDF(info.pdfOptions, (err, pdfData) => {
+      if (err) {
+        done(525)
+      } else {
+        result.imgData = pdfData
+        done()
+      }
+    })
+  }).catch(() => {
+    done(526)
+  })
+}
+
+module.exports = render

test/integration/plotly-export-server_test.js

@@ -33,7 +33,7 @@ tap.tearDown(() => {
 tap.test('should launch', t => {
   app.start().then(() => {
     app.client.getWindowCount().then(cnt => {
-      t.equal(cnt, 5)
+      t.equal(cnt, 6)
       t.end()
     })
   })

test/unit/plotly-dash-preview_test.js

@@ -0,0 +1,137 @@
+const tap = require('tap')
+const sinon = require('sinon')
+
+const _module = require('../../src/component/plotly-dash-preview')
+const remote = require('../../src/util/remote')
+const { createMockWindow } = require('../common')
+
+tap.test('parse:', t => {
+  const fn = _module.parse
+
+  t.test('should error when invalid *url* field is given', t => {
+    const shouldFail = ['', null, true, 1, {}, 'dummy']
+
+    shouldFail.forEach(d => {
+      t.test(`(case ${JSON.stringify(d)})`, t => {
+        fn({url: d}, {}, (errorCode, result) => {
+          t.equal(errorCode, 400)
+          t.same(result, {'msg': 'invalid url'})
+          t.end()
+        })
+      })
+    })
+
+    t.end()
+  })
+  t.test('should error when neither loading_selector or timeout is given', t => {
+    fn({url: 'https://dash-app.com'}, {}, (errorCode, result) => {
+      t.equal(errorCode, 400)
+      t.equal(result.msg, 'either selector or timeout must be specified')
+      t.end()
+    })
+  })
+  t.test('should error when pageSize is not given', t => {
+    fn({
+      url: 'https://dash-app.com',
+      selector: 'dummy'
+    }, {}, (errorCode, result) => {
+      t.equal(errorCode, 400)
+      t.same(result.msg, 'pageSize must either be A3, A4, A5, Legal, Letter, ' +
+                         'Tabloid or an Object containing height and width in microns.')
+      t.end()
+    })
+  })
+  t.test('should parse properly when pageSize is given', t => {
+    fn({
+      url: 'https://dash-app.com',
+      selector: 'dummy',
+      pageSize: {height: 1000, width: 1000}
+    }, {}, (errorCode, result) => {
+      t.equal(errorCode, null)
+
+      // height/width are converted from microns to pixels:
+      t.same(result.browserSize, {
+        height: 3.779527559055118,
+        width: 3.779527559055118
+      })
+      t.end()
+    })
+  })
+  t.test('should parse properly when pdf_options are given', t => {
+    fn({
+      url: 'https://dash-app.com',
+      selector: 'dummy',
+      pdf_options: {pageSize: 'Letter', marginsType: 1}
+    }, {}, (errorCode, result) => {
+      t.equal(errorCode, null)
+      // height/width are converted to pixels from page-type:
+      t.same(result.browserSize, {height: 1056, width: 816})
+      t.same(result.pdfOptions, {pageSize: 'Letter', marginsType: 1})
+      t.end()
+    })
+  })
+
+  t.end()
+})
+
+tap.test('render:', t => {
+  const fn = _module.render
+
+  t.afterEach((done) => {
+    remote.createBrowserWindow.restore()
+    done()
+  })
+
+  t.test('should call printToPDF', t => {
+    const win = createMockWindow()
+    sinon.stub(remote, 'createBrowserWindow').returns(win)
+    win.webContents.executeJavaScript.resolves(true)
+    win.webContents.printToPDF.yields(null, '-> image data <-')
+
+    fn({
+      url: 'https://dummy.com'
+    }, {}, (errorCode, result) => {
+      t.ok(win.webContents.printToPDF.calledOnce)
+      t.ok(win.close.calledOnce)
+      t.equal(errorCode, undefined, 'code')
+      t.equal(result.imgData, '-> image data <-', 'result')
+      t.end()
+    })
+  })
+
+  t.test('should handle executeJavascript errors', t => {
+    const win = createMockWindow()
+    sinon.stub(remote, 'createBrowserWindow').returns(win)
+    win.webContents.executeJavaScript.rejects('fail to load')
+    win.webContents.printToPDF.yields(null, '-> image data <-')
+
+    fn({
+      url: 'https://dummy.com'
+    }, {}, (errorCode, result) => {
+      t.ok(win.webContents.printToPDF.notCalled)
+      t.ok(win.close.calledOnce)
+      t.equal(errorCode, 526, 'code')
+      t.same(result, {'msg': 'dash preview generation timed out'}, 'result')
+      t.end()
+    })
+  })
+
+  t.test('should handle printToPDF errors', t => {
+    const win = createMockWindow()
+    sinon.stub(remote, 'createBrowserWindow').returns(win)
+    win.webContents.executeJavaScript.resolves(true)
+    win.webContents.printToPDF.yields(new Error('printToPDF error'))
+
+    fn({
+      url: 'https://dummy.com'
+    }, {}, (errorCode, result) => {
+      t.ok(win.webContents.printToPDF.calledOnce)
+      t.ok(win.close.calledOnce)
+      t.equal(errorCode, 525, 'code')
+      t.equal(result.msg, 'dash preview generation failed', 'error msg')
+      t.end()
+    })
+  })
+
+  t.end()
+})