Make Cells Display Lazily When Diffing Unchanged Cells

Motivation:
  During diffing Unchanged cells are displayed, which is not necessary.
  This is a performance issue when there are many unchanged cells.

Related Issues:
  - #635

Open Questions:
  - I am struggling with getting the svg images to build properly.
  - How can this be tested in JupyterLab?

Changes:
  - Alter Notebooks Widget to only display changed cells by using new linked
    list of cells.
  - Add new linked list of cells and lazy version of linked list of cells.

nbdime/webapp/templates/diff.html

@@ -1,31 +1,49 @@
-{% extends "nbdimepage.html" %}
+{% extends "nbdimepage.html" %} {% block nbdimeheader %}
 
-    {% block nbdimeheader %}
+<div id="nbdime-header" class="nbdime-Diff">
+  <h3>Notebook Diff</h3>
+  Enter notebook filenames or URLs in the form below to get started.
 
-    <div id="nbdime-header" class="nbdime-Diff">
-      <h3>Notebook Diff</h3>
-      Enter notebook filenames or URLs in the form below to get started.
+  <form id="nbdime-diff-form" class="nbdime-forms">
+    <fieldset>
+      <legend>Please input filenames/URLs of notebooks to diff:</legend>
+      <label>Base:</label>
+      <input
+        id="diff-base"
+        type="text"
+        name="base"
+        value="{{ config_data['base']|e }}"
+      />
+      <label>Remote:</label>
+      <input
+        id="diff-remote"
+        type="text"
+        name="remote"
+        value="{{ config_data['remote']|e }}"
+      />
+      <input
+        id="nbdime-run-diff"
+        type="submit"
+        name="diff"
+        value="Diff files"
+      />
+    </fieldset>
+  </form>
+  <!-- nbdime-forms -->
+  <div id="nbdime-header-buttonrow">
+    <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 -->
 
-      <form id="nbdime-diff-form" class="nbdime-forms">
-        <fieldset>
-          <legend>Please input filenames/URLs of notebooks to diff:</legend>
-          <label>Base:</label>
-          <input id="diff-base" type="text" name="base" value="{{ config_data['base']|e }}" />
-          <label>Remote:</label>
-          <input id="diff-remote" type="text" name="remote" value="{{ config_data['remote']|e }}" />
-          <input id="nbdime-run-diff" type="submit" name="diff" value="Diff files" />
-        </fieldset>
-      </form> <!-- nbdime-forms -->
-      <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 -->
-
-    {% endblock %}
+{% endblock %}

packages/nbdime/src/diff/widget/linked-cells.ts

@@ -0,0 +1,202 @@
+import { Panel, Widget } from "@lumino/widgets";
+import type { CellDiffWidget } from "./";
+
+import foldDown from "./fold-down.svg";
+import foldUp from "./fold-up.svg";
+import fold from "./fold.svg";
+
+class LinkedListCell extends Panel {
+  _next: LinkedListCell | LazyDisplayLinkedListCell | null;
+  _prev: LinkedListCell | LazyDisplayLinkedListCell | null;
+  renderFunc: () => CellDiffWidget;
+  _displayed: boolean;
+  lazy: boolean;
+
+  constructor(renderFunc: () => CellDiffWidget) {
+    super();
+    this._next = null;
+    this._prev = null;
+    this.renderFunc = renderFunc;
+    this._displayed = true;
+    this.renderCell();
+    this.addClass("linked-cell");
+    this.lazy = false;
+  }
+
+  protected renderCell() {
+    this.addWidget(this.renderFunc());
+    this._displayed = true;
+  }
+
+  get next(): LinkedListCell | LazyDisplayLinkedListCell | null {
+    return this._next;
+  }
+
+  set next(nextCell: LinkedListCell | LazyDisplayLinkedListCell | null) {
+    this._next = nextCell;
+    if (nextCell === null) {
+      return;
+    }
+
+    if (nextCell.lazy) {
+      console.log("call expandDown");
+      nextCell.expandDown();
+    }
+  }
+
+  get prev(): LinkedListCell | LazyDisplayLinkedListCell | null {
+    return this._prev;
+  }
+
+  set prev(prevCell: LinkedListCell | LazyDisplayLinkedListCell | null) {
+    this._prev = prevCell;
+    if (prevCell === null) {
+      return;
+    }
+    prevCell.next = this;
+    if (prevCell.lazy) {
+      prevCell.expandUp();
+    }
+  }
+
+  get displayed(): boolean {
+    return this._displayed;
+  }
+
+  expandUp(): void {
+    return;
+  }
+
+  expandDown(): void {
+    return;
+  }
+}
+
+class LazyDisplayLinkedListCell extends LinkedListCell {
+  expandButton: HTMLDivElement;
+  expandButtonDisplayed: boolean;
+
+  // Path: packages/nbdime/src/diff/widget/wrapper_cells.ts
+  constructor(renderFunc: () => CellDiffWidget) {
+    super(renderFunc);
+    this.expandButton = document.createElement("div");
+    this.expandButton.className = "jp-expand-output-wrapper";
+    this.expandButtonDisplayed = false;
+    this.addClass("lazy-linked-cell");
+    this.lazy = true;
+  }
+
+  set prev(prevCell: LinkedListCell | LazyDisplayLinkedListCell) {
+    this._prev = prevCell;
+    prevCell.next = this;
+  }
+
+  set next(nextCell: LinkedListCell | LazyDisplayLinkedListCell) {
+    this._next = nextCell;
+  }
+
+  protected renderCell() {
+    this._displayed = false;
+  }
+
+  expandUp(): void {
+    if (this._displayed) {
+      return;
+    }
+    if (this.expandButtonDisplayed) {
+      this._setupFoldButton();
+    } else {
+      this._setupExpandUpButton();
+    }
+  }
+
+  expandDown(): void {
+    if (this._displayed) {
+      return;
+    }
+    if (this.expandButtonDisplayed) {
+      this._setupFoldButton();
+    } else {
+      this._setupExpandDownButton();
+    }
+  }
+
+  _setupFoldButton() {
+    this.expandButton.innerHTML = "";
+    const button = this.createButton("Fold");
+    button.onclick = (e) => {
+      e.preventDefault();
+      this.showLazyCellUp();
+    };
+    this.expandButton.appendChild(button);
+    const widget = new Widget({ node: this.expandButton });
+    this.addWidget(widget);
+  }
+
+  _setupExpandUpButton() {
+    const button = this.createButton("Up");
+    button.onclick = (e) => {
+      e.preventDefault();
+      this.showLazyCellUp();
+    };
+    this.expandButton.appendChild(button);
+    const widget = new Widget({ node: this.expandButton });
+    this.addWidget(widget);
+  }
+
+  _setupExpandDownButton() {
+    const button = this.createButton("Down");
+    button.onclick = (e) => {
+      e.preventDefault();
+      this.showLazyCellDown();
+    };
+    this.expandButton.appendChild(button);
+    const widget = new Widget({ node: this.expandButton });
+    this.addWidget(widget);
+  }
+
+  createButton(direction: "Up" | "Down" | "Fold"): HTMLAnchorElement {
+    this.expandButton.innerHTML = "";
+    const button = document.createElement("a");
+    button.title = `Expand ${direction}`;
+    button.setAttribute("aria-label", `Expand ${direction}`);
+    button.innerHTML = this.buttonSvg(direction);
+    if (direction === "Up") {
+      button.innerHTML = foldUp;
+    } else if (direction === "Down") {
+      button.innerHTML = foldDown;
+    } else {
+      button.innerHTML = fold;
+    }
+    this.expandButtonDisplayed = true;
+    return button;
+  }
+
+  buttonSvg(direction: "Up" | "Down" | "Fold"): string {
+    if (direction === "Up") {
+      return foldUp;
+    } else if (direction === "Down") {
+      return foldDown;
+    } else {
+      return fold;
+    }
+  }
+
+  showLazyCellUp() {
+    this.showLazyCell();
+    this._prev?.expandUp();
+  }
+
+  showLazyCellDown() {
+    this.showLazyCell();
+    this._next?.expandDown();
+  }
+
+  showLazyCell() {
+    this.addWidget(this.renderFunc());
+    this._displayed = true;
+    this.expandButton.remove();
+  }
+}
+
+export { LinkedListCell, LazyDisplayLinkedListCell };