Add nbdiff-web-export to export a diff inside a rendered HTML

Example of usage: nbdiff ./nbdime/webapp/testnotebooks/remote.ipynb ./nbdime/webapp/testnotebooks/base.ipynb --out diff_with_base.json --include-base nbdiff-web-export diff_with_base.json ./nbdime/webapp/static/nbdime.js > ./diff.html Open diff.html in your browser of choice
jupyter · Nov 22, 2020 · df81002 · df81002
1 parent e5b9fc8
commit df81002
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 4 deletions.
diff --git a/nbdime/args.py b/nbdime/args.py
@@ -369,7 +369,7 @@ def add_filter_args(diff_parser):
 
 
 def add_git_diff_driver_args(diff_parser):
-    """Adds a set of 7 stanard git diff driver arguments:
+    """Adds a set of 7 standard git diff driver arguments:
         path old-file old-hex old-mode new-file new-hex new-mode [ rename-to rename-metadata ]
 
     Note: Only path, base and remote are added to parsed namespace

diff --git a/nbdime/webapp/nbdiffwebexport.py b/nbdime/webapp/nbdiffwebexport.py
@@ -0,0 +1,58 @@
+import sys
+import os
+
+from jinja2 import FileSystemLoader, Environment
+
+from ..args import (
+    ConfigBackedParser,
+    add_generic_args)
+
+here = os.path.abspath(os.path.dirname(__file__))
+static_path = os.path.join(here, 'static')
+template_path = os.path.join(here, 'templates')
+
+
+def build_arg_parser():
+    """
+    Creates an argument parser for the diff tool, that also lets the
+    user specify a port and displays a help message.
+    """
+    description = 'Difftool for Nbdime.'
+    parser = ConfigBackedParser(
+        description=description,
+        add_help=True
+        )
+    add_generic_args(parser)
+    parser.add_argument(
+        "filename", help="Base with diff json.",
+        nargs='?',
+    )
+    parser.add_argument(
+        "nbdime_url", help="URL to nbdime.js",
+        nargs='?',
+        default="nbdime.js"
+    )
+    return parser
+
+
+def main_export(opts):
+    env = Environment(loader=FileSystemLoader([template_path]), autoescape=False)
+
+    with open(opts.filename, mode='r') as f:
+        data = f.read()
+    template = env.get_template("diffembedded.html")
+    rendered = template.render(
+        data=data,
+        nbdime_url=opts.nbdime_url)
+    print(rendered)
+
+
+def main(args=None):
+    if args is None:
+        args = sys.argv[1:]
+    opts = build_arg_parser().parse_args(args)
+    return main_export(opts)
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/nbdime/webapp/nbdimeserver.py b/nbdime/webapp/nbdimeserver.py
@@ -402,6 +402,7 @@ def make_app(**params):
     app.exit_code = 0
     return app
 
+
 def init_app(on_port=None, closable=False, **params):
     asyncio_patch()
     _logger.debug('Using params: %s', params)

diff --git a/nbdime/webapp/templates/diffembedded.html b/nbdime/webapp/templates/diffembedded.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>nbdime - diff and merge your Jupyter notebooks</title>
+
+  </head>
+
+
+  <!-- TODO: make nbdime.init() setup the forms/input user interface? -->
+
+  <body>
+
+    <div id="nbdime-header" class="nbdime-Diff">
+      <h3>Notebook Diff</h3>
+      <script id='diff-and-base' type="application/json">{{ data|tojson|safe }}</script>
+      <div id="nbdime-header-buttonrow">
+        <input id="nbdime-hide-unchanged" type="checkbox"><label for="cbox1">Hide unchanged cells</label></input>
+        <button id="nbdime-trust" style="display: none">Trust outputs</button>
+        <button id="nbdime-close" type="checkbox" style="display: none">Close tool</button>
+        <button id="nbdime-export" type="checkbox" style="display: none">Export diff</button>
+      </div>
+      <div id=nbdime-header-banner>
+        <span id="nbdime-header-base">Base</span>
+        <span id="nbdime-header-remote">Remote</span>
+      </div>
+    </div> <!-- ndime-header -->
+
+    <div id="nbdime-root" class="nbdime-root">
+    </div>
+
+    <script src="{{ nbdime_url }}"></script>
+    <noscript>Nbdime relies on javascript for diff/merge views!</noscript>
+  </body>
+</html>
diff --git a/packages/webapp/src/app/diff.ts b/packages/webapp/src/app/diff.ts
@@ -161,6 +161,11 @@ function getDiff(base: string, remote: string | undefined) {
   requestDiff(base, remote, baseUrl, onDiffRequestCompleted, onDiffRequestFailed);
 }
 
+export
+function renderDiff(diff: any) {
+  onDiffRequestCompleted(JSON.parse(diff));
+}
+
 /**
  * Callback for a successfull diff request
  */

diff --git a/packages/webapp/src/index.ts b/packages/webapp/src/index.ts
@@ -3,7 +3,7 @@
 'use strict';
 
 import {
-  initializeDiff
+  initializeDiff, renderDiff
 } from './app/diff';
 
 import {
@@ -44,8 +44,16 @@ import './app/merge.css';
 /** */
 function initialize() {
   let closable = getConfigOption('closable');
-  let type: 'diff' | 'merge' | 'compare';
-  if (document.getElementById('compare-local')) {
+  let type: 'diff' | 'merge' | 'compare' | 'diff-and-base';
+  if (document.getElementById('diff-and-base')) {
+    type = 'diff-and-base'
+    closable = false
+    let el = document.getElementById('diff-and-base');
+    if (el && el.textContent) {
+      console.log(el.textContent)
+      renderDiff(JSON.parse(el.textContent))
+    }
+  } else if (document.getElementById('compare-local')) {
     initializeCompare();
     type = 'compare';
   } else if (getConfigOption('local') || document.getElementById('merge-local')) {

diff --git a/setup.py b/setup.py
@@ -145,6 +145,7 @@
         'nbshow = nbdime.nbshowapp:main',
         'nbdiff = nbdime.nbdiffapp:main',
         'nbdiff-web = nbdime.webapp.nbdiffweb:main',
+        'nbdiff-web-export = nbdime.webapp.nbdiffwebexport:main',
         'nbmerge = nbdime.nbmergeapp:main',
         'nbmerge-web = nbdime.webapp.nbmergeweb:main',
         'git-nbdiffdriver = nbdime.vcs.git.diffdriver:main',