Remove old diffs when a new diff is created

Author: Zsailer

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 ## Contributing
 
 ### Development install

package.json

@@ -63,7 +63,7 @@
         "@jupyterlab/services": "^7.0.0",
         "@jupyterlab/ui-components": "^4.0.0",
         "@lumino/widgets": "^2.0.0",
-        "jupyterlab-cell-input-footer": "^0.2.0",
+        "jupyterlab-cell-input-footer": "^0.3.0",
         "nbdime": "^7.0.1"
     },
     "devDependencies": {

src/command.ts

@@ -1,94 +1,91 @@
-import { 
-  ICellFooterTracker,
-} from 'jupyterlab-cell-input-footer';
+import { ICellFooterTracker } from 'jupyterlab-cell-input-footer';
 import { IDiffEntry } from 'nbdime/lib/diff/diffentries';
 import { createPatchStringDiffModel } from 'nbdime/lib/diff/model';
 import { MergeView } from 'nbdime/lib/common/mergeview';
-import {
-  ToolbarButton,
-} from '@jupyterlab/ui-components';
-import {
-  requestAPI
-} from './handler';
+import { ToolbarButton } from '@jupyterlab/ui-components';
+import { requestAPI } from './handler';
 
 export namespace ShowDiff {
-
   export interface ICommandArgs {
-    cell_id?: string,
-    original_source: string,
-    diff: IDiffEntry[]
+    cell_id?: string;
+    original_source: string;
+    diff: IDiffEntry[];
   }
 
   export interface IFetchDiff {
-    original_source: string,
-    new_source: string
+    original_source: string;
+    new_source: string;
   }
 }
 
-
 /**
  * Adds a Diff UX underneath a JupyterLab cell.
- * 
- * @param data 
- * @param cellFooterTracker 
+ *
+ * @param data
+ * @param cellFooterTracker
  */
-export function showCellDiff(data: ShowDiff.ICommandArgs, cellFooterTracker: ICellFooterTracker) {
-  let diff = createPatchStringDiffModel(
-    data["original_source"],
-    data["diff"]
-  )
-  
+export function showCellDiff(
+  data: ShowDiff.ICommandArgs,
+  cellFooterTracker: ICellFooterTracker
+) {
+  let diff = createPatchStringDiffModel(data['original_source'], data['diff']);
+
   let mergeView: MergeView;
   mergeView = new MergeView({ remote: diff });
-  mergeView.addClass("nbdime-root");
-  mergeView.addClass("jp-Notebook-diff");
+  //
+  mergeView.addClass('jp-cell-diff');
+  // Add the classes below to pick up the styling from nbdime.
+  mergeView.addClass('nbdime-root');
+  mergeView.addClass('jp-Notebook-diff');
   mergeView.hide();
 
   let footer = cellFooterTracker.getFooter(data.cell_id);
+  // Try removing any old widget that exists.
+  try {
+    footer?.removeWidget('jp-cell-diff');
+  } catch {}
+
   footer?.addWidget(mergeView);
 
   if (footer?.isHidden) {
     footer.show();
     footer.update();
   }
-  footer?.addItemOnLeft(
+  footer?.addToolbarItemOnLeft(
     'compare',
     new ToolbarButton({
       // icon: wandIcon,
-      label: "Compare changes",
+      label: 'Compare changes',
       enabled: true,
-      onClick: () => { 
+      onClick: () => {
         if (mergeView.isHidden) {
-          mergeView.show()
+          mergeView.show();
           return;
         }
-        mergeView.hide()
+        mergeView.hide();
       }
     })
   );
 }
 
-
-export async function fetchDiff(data: ShowDiff.IFetchDiff): Promise<ShowDiff.ICommandArgs> {
+export async function fetchDiff(
+  data: ShowDiff.IFetchDiff
+): Promise<ShowDiff.ICommandArgs> {
   return await requestAPI('api/celldiff');
 }
 
-
 /**
  * Adds a diff to the Cell Footer
- * 
+ *
  */
 export function showCellDiffCommand(cellFooterTracker: ICellFooterTracker) {
   return (args: any) => {
-    let data: ShowDiff.ICommandArgs = (args as any);
-    let cellId = data["cell_id"];
+    let data: ShowDiff.ICommandArgs = args as any;
+    let cellId = data['cell_id'];
     if (cellId) {
-
-      if (data && data["original_source"] && data["diff"]) {
-        
-        showCellDiff(data, cellFooterTracker)
+      if (data && data['original_source'] && data['diff']) {
+        showCellDiff(data, cellFooterTracker);
       }
     }
-  }
+  };
 }
-  

src/handler.ts

@@ -15,10 +15,7 @@ export async function requestAPI<T>(
 ): Promise<T> {
   // Make request to Jupyter API
   const settings = ServerConnection.makeSettings();
-  const requestUrl = URLExt.join(
-    settings.baseUrl,
-    endPoint
-  );
+  const requestUrl = URLExt.join(settings.baseUrl, endPoint);
 
   let response: Response;
   try {
@@ -42,4 +39,4 @@ export async function requestAPI<T>(
   }
 
   return data;
-}
+}

src/index.ts

@@ -3,13 +3,9 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import {
-  showCellDiffCommand
-} from './command';
+import { showCellDiffCommand } from './command';
 
-import { 
-  ICellFooterTracker
-} from 'jupyterlab-cell-input-footer';
+import { ICellFooterTracker } from 'jupyterlab-cell-input-footer';
 
 /**
  * A JupyterLab plugin providing a command for displaying a diff below a cell.
@@ -19,18 +15,15 @@ const showDiff: JupyterFrontEndPlugin<void> = {
   requires: [ICellFooterTracker],
   autoStart: true,
   activate: async (
-    app: JupyterFrontEnd, 
-    cellFooterTracker: ICellFooterTracker,
+    app: JupyterFrontEnd,
+    cellFooterTracker: ICellFooterTracker
   ) => {
-    console.log("Jupyterlab extension - show cell diff.")
+    console.log('Jupyterlab extension - show cell diff.');
     await app.serviceManager.ready;
 
-    app.commands.addCommand(
-      'show-diff', 
-      {
-        execute: showCellDiffCommand(cellFooterTracker)
-      }
-    )
+    app.commands.addCommand('show-diff', {
+      execute: showCellDiffCommand(cellFooterTracker)
+    });
   }
 };
 

style/base.css

@@ -6,7 +6,8 @@
 
 .jp-cellfooter .cm-merge-2pane {
   display: grid;
-  padding: 0px;
+  padding: 0;
+
   /* editor | gap | editor */
   grid-template-columns: 49% 2% 49%;
   grid-auto-rows: minmax(18px, auto);

yarn.lock

@@ -3727,7 +3727,7 @@ __metadata:
     eslint: ^8.36.0
     eslint-config-prettier: ^8.8.0
     eslint-plugin-prettier: ^5.0.0
-    jupyterlab-cell-input-footer: ^0.2.0
+    jupyterlab-cell-input-footer: ^0.3.0
     mkdirp: ^1.0.3
     nbdime: ^7.0.1
     npm-run-all2: ^7.0.1
@@ -3745,13 +3745,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"jupyterlab-cell-input-footer@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "jupyterlab-cell-input-footer@npm:0.2.0"
+"jupyterlab-cell-input-footer@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "jupyterlab-cell-input-footer@npm:0.3.0"
   dependencies:
     "@jupyterlab/services": ^7.0.0
     "@lumino/coreutils": ^2.1.2
-  checksum: b298f6ba525668ce18c25c1e1bd5c1f515d2c76f9611092b88e1ae2769e2966784455c4d7e80f10061a8482d8c938264af15436faf0234bada101fa0a42d62ef
+  checksum: 88e8a420022a9228a09271f7b7e5ddc15f2bab9f9cf4e11541364a4060d8907ebdee2174efe0ecbbbdfa56d649fda25380e7a0f9d6dbe4d3486b3c0ab2e55a4c
   languageName: node
   linkType: hard