xtralab 0.4.0 → 0.5.0

package/lib/git/imageDiff.js

@@ -0,0 +1,184 @@
+import * as React from 'react';
+/**
+ * xtralab's image diff, registered in place of `@jupyterlab/git:image-diff`.
+ *
+ * The git server base64-encodes binary content, so both diff hosts receive
+ * the two sides as base64 strings through the same `content()` getters used
+ * for text. This module turns those strings into `<img>` elements and
+ * offers the 2-up / swipe / onion-skin comparison modes; no diffing library
+ * is involved (`@pierre/diffs` is text-only).
+ */
+/**
+ * Raster image extensions xtralab renders as an image diff, mapped to the
+ * MIME subtype used in the `data:image/<subtype>;base64,…` URL.
+ *
+ * `.svg` is intentionally absent: it is XML text, so the `@pierre/diffs`
+ * text diff (the fallback provider) is more useful for it than an image
+ * comparison.
+ */
+const IMAGE_DATA_TYPES = {
+    '.png': 'png',
+    '.jpg': 'jpeg',
+    '.jpeg': 'jpeg',
+    '.gif': 'gif',
+    '.webp': 'webp',
+    '.bmp': 'bmp',
+    '.ico': 'x-icon'
+};
+/** The file extensions registered as the xtralab image diff provider. */
+export const IMAGE_DIFF_EXTENSIONS = Object.keys(IMAGE_DATA_TYPES);
+/**
+ * The `data:` MIME subtype for a path xtralab renders as an image, or
+ * `null` when the path is not a supported raster image.
+ */
+export function imageDataType(path) {
+    var _a;
+    const lower = path.toLowerCase();
+    const dot = lower.lastIndexOf('.');
+    if (dot < 0) {
+        return null;
+    }
+    return (_a = IMAGE_DATA_TYPES[lower.slice(dot)]) !== null && _a !== void 0 ? _a : null;
+}
+const IMAGE_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:image-diff-view-mode';
+function readStoredImageViewMode() {
+    try {
+        const raw = window.localStorage.getItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY);
+        if (raw === '2-up' || raw === 'swipe' || raw === 'onion') {
+            return raw;
+        }
+    }
+    catch (_a) {
+        // localStorage can throw in privacy/sandboxed contexts — 2-up is the
+        // sensible default anyway.
+    }
+    return '2-up';
+}
+function writeStoredImageViewMode(mode) {
+    try {
+        window.localStorage.setItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY, mode);
+    }
+    catch (_a) {
+        // Best-effort.
+    }
+}
+/**
+ * Strip whitespace from a base64 payload. Python's `base64.encodebytes`
+ * (used by the git server) inserts a newline every 76 characters; most
+ * browsers tolerate that inside a `data:` URL but some are stricter, and
+ * the cleaned length also lets us size the file accurately.
+ */
+function cleanBase64(value) {
+    return value.replace(/\s+/g, '');
+}
+/** Decoded byte length of a (whitespace-free) base64 string. */
+function base64ByteLength(clean) {
+    if (clean.length === 0) {
+        return 0;
+    }
+    const padding = clean.endsWith('==') ? 2 : clean.endsWith('=') ? 1 : 0;
+    return Math.floor((clean.length * 3) / 4) - padding;
+}
+function formatBytes(bytes) {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    const units = ['KB', 'MB', 'GB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${value.toFixed(value < 10 ? 1 : 0)} ${units[unit]}`;
+}
+function toSide(raw, fileType) {
+    const data = cleanBase64(raw);
+    const present = data.length > 0;
+    return {
+        data,
+        present,
+        uri: present ? `data:image/${fileType};base64,${data}` : null,
+        bytes: base64ByteLength(data)
+    };
+}
+/**
+ * The image comparison surface: a segmented mode selector (reusing the
+ * diff segmented-control styling so it matches the Notebook/JSON toggle)
+ * plus the selected 2-up / swipe / onion-skin view.
+ */
+export function ImageDiffView(props) {
+    const { reference, challenger, fileType } = props;
+    const ref = React.useMemo(() => toSide(reference, fileType), [reference, fileType]);
+    const chall = React.useMemo(() => toSide(challenger, fileType), [challenger, fileType]);
+    const [mode, setMode] = React.useState(() => readStoredImageViewMode());
+    const changeMode = React.useCallback((next) => {
+        setMode(next);
+        writeStoredImageViewMode(next);
+    }, []);
+    return (React.createElement("div", { className: "jp-xtralab-ImageDiff" },
+        React.createElement("div", { className: "jp-xtralab-ImageDiff-header" },
+            React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": "Image diff view mode" }, [
+                ['2-up', '2-up'],
+                ['swipe', 'Swipe'],
+                ['onion', 'Onion Skin']
+            ].map(([value, label]) => (React.createElement("button", { key: value, type: "button", role: "tab", "aria-selected": mode === value, "data-active": mode === value, className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => changeMode(value) }, label))))),
+        React.createElement("div", { className: "jp-xtralab-ImageDiff-body" }, mode === '2-up' ? (React.createElement(TwoUp, { reference: ref, challenger: chall })) : mode === 'swipe' ? (React.createElement(Swipe, { reference: ref, challenger: chall })) : (React.createElement(OnionSkin, { reference: ref, challenger: chall })))));
+}
+function useNaturalSize() {
+    const [size, setSize] = React.useState(null);
+    const onLoad = React.useCallback((event) => {
+        setSize([
+            event.currentTarget.naturalWidth,
+            event.currentTarget.naturalHeight
+        ]);
+    }, []);
+    return [size, onLoad];
+}
+function caption(side, size, emptyLabel) {
+    if (!side.present) {
+        return emptyLabel;
+    }
+    const dims = size !== null ? `${size[0]}×${size[1]} · ` : '';
+    return `${dims}${formatBytes(side.bytes)}`;
+}
+function TwoUp({ reference, challenger }) {
+    const [refSize, onRefLoad] = useNaturalSize();
+    const [challSize, onChallLoad] = useNaturalSize();
+    return (React.createElement("div", { className: "jp-xtralab-ImageDiff-twoUp" },
+        React.createElement("figure", { className: "jp-xtralab-ImageDiff-col" },
+            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "reference" }, reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: reference.uri, alt: "Reference revision", onLoad: onRefLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, "No previous image"))),
+            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(reference, refSize, 'Added'))),
+        React.createElement("figure", { className: "jp-xtralab-ImageDiff-col" },
+            React.createElement("div", { className: "jp-xtralab-ImageDiff-frame", "data-side": "challenger" }, challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-img", src: challenger.uri, alt: "Challenger revision", onLoad: onChallLoad })) : (React.createElement("div", { className: "jp-xtralab-ImageDiff-empty" }, "Deleted"))),
+            React.createElement("figcaption", { className: "jp-xtralab-ImageDiff-caption" }, caption(challenger, challSize, 'Deleted')))));
+}
+/**
+ * Range slider shared by the swipe and onion-skin views. A native
+ * `<input type="range">` (styled via CSS) keeps the bundle free of a UI
+ * component dependency.
+ */
+function RangeSlider(props) {
+    const { value, onChange, ariaLabel } = props;
+    return (React.createElement("input", { className: "jp-xtralab-ImageDiff-slider", type: "range", min: 0, max: 100, step: 1, value: value, "aria-label": ariaLabel, onChange: event => onChange(Number(event.target.value)) }));
+}
+function Swipe({ reference, challenger }) {
+    const [position, setPosition] = React.useState(50);
+    return (React.createElement("div", { className: "jp-xtralab-ImageDiff-interactive" },
+        React.createElement("div", { className: "jp-xtralab-ImageDiff-stack" },
+            reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: reference.uri, alt: "Reference revision", style: {
+                    clipPath: `inset(0 ${100 - position}% 0 0)`
+                } })) : null,
+            challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: challenger.uri, alt: "Challenger revision", style: {
+                    clipPath: `inset(0 0 0 ${position}%)`
+                } })) : null),
+        React.createElement(RangeSlider, { value: position, onChange: setPosition, ariaLabel: "Swipe between reference and challenger" })));
+}
+function OnionSkin({ reference, challenger }) {
+    const [opacity, setOpacity] = React.useState(50);
+    return (React.createElement("div", { className: "jp-xtralab-ImageDiff-interactive" },
+        React.createElement("div", { className: "jp-xtralab-ImageDiff-stack" },
+            reference.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: reference.uri, alt: "Reference revision" })) : null,
+            challenger.uri !== null ? (React.createElement("img", { className: "jp-xtralab-ImageDiff-stackImg", src: challenger.uri, alt: "Challenger revision", style: { opacity: opacity / 100 } })) : null),
+        React.createElement(RangeSlider, { value: opacity, onChange: setOpacity, ariaLabel: "Fade between reference and challenger" })));
+}

package/lib/git/index.d.ts

@@ -1,11 +1,13 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { CommandArguments, CommandIDs } from './commands';
 /**
- * The git plugin. Adds a VS Code-style "Source Control" panel to the
- * JupyterLab left sidebar and opens file diffs in the main area when the
- * user clicks an entry in the panel. Backed by the `jupyterlab_git` server
- * extension's REST API; the bundled `@jupyterlab/git` frontend is disabled
- * via `package.json`'s `jupyterlab.disabledExtensions` so the two panels do
- * not coexist.
+ * Every plugin contributed by xtralab's git integration:
+ *
+ *   1. {@link diffCommandPlugin} — the launcher's `xtralab:git:open-diff`.
+ *   2. `diffProviderPlugin` — registers the `@pierre/diffs` rendering as
+ *      jupyterlab-git's diff providers (replacing its disabled
+ *      notebook/text diff plugins).
  */
-declare const plugin: JupyterFrontEndPlugin<void>;
-export default plugin;
+declare const plugins: JupyterFrontEndPlugin<unknown>[];
+export { CommandArguments, CommandIDs };
+export default plugins;

package/lib/git/index.js

@@ -1,36 +1,29 @@
-import { ILayoutRestorer } from '@jupyterlab/application';
-import { Dialog, ICommandPalette, IThemeManager, WidgetTracker, showDialog, showErrorMessage } from '@jupyterlab/apputils';
+import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { CommandIDs, registerGitCommands } from './commands';
 import { PREVIEW_DIFF_WIDGET_ID, pinnedDiffWidgetId } from './diffWidget';
-import { GitPanel } from './panel';
-const GIT_PLUGIN_ID = 'xtralab:git';
+import diffProviderPlugin from './diffProvider';
+const GIT_DIFF_COMMAND_PLUGIN_ID = 'xtralab:git-diff-command';
 const GIT_DIFF_TRACKER_NAMESPACE = 'xtralab-git-diff';
 /**
- * The git plugin. Adds a VS Code-style "Source Control" panel to the
- * JupyterLab left sidebar and opens file diffs in the main area when the
- * user clicks an entry in the panel. Backed by the `jupyterlab_git` server
- * extension's REST API; the bundled `@jupyterlab/git` frontend is disabled
- * via `package.json`'s `jupyterlab.disabledExtensions` so the two panels do
- * not coexist.
+ * The launcher's git diff command plugin.
+ *
+ * The `@jupyterlab/git` frontend stays enabled (only its diff plugins are
+ * swapped — see `diffProvider.tsx`), so the upstream git panel is what the
+ * user sees in the sidebar. This plugin is the launcher dashboard's
+ * independent diff path: the `xtralab:git:open-diff` command the
+ * dashboard's "Changes" section calls, plus a tracker so reopening a diff
+ * reveals the existing tab and the preview/pin behavior keeps working.
  */
-const plugin = {
-    id: GIT_PLUGIN_ID,
-    description: 'A VS Code-style git changes panel and diff viewer powered by jupyterlab-git and @pierre/diffs.',
+const diffCommandPlugin = {
+    id: GIT_DIFF_COMMAND_PLUGIN_ID,
+    description: "The launcher dashboard's side-by-side git diff command, powered by @pierre/diffs.",
     autoStart: true,
-    optional: [
-        ILayoutRestorer,
-        IThemeManager,
-        ICommandPalette,
-        IRenderMimeRegistry
-    ],
-    activate: (app, restorer, themeManager, commandPalette, rendermime) => {
-        // Match the panel's repo path: empty string means "use the JupyterLab
-        // server's root and let git resolve the enclosing repo".
-        const repoPath = '';
-        // Track open diff widgets so the layout restorer can recreate them on
-        // reload, and so the openDiff handler can reveal an already-open diff
-        // for the same file instead of creating a duplicate.
+    optional: [IThemeManager, IRenderMimeRegistry],
+    activate: (app, themeManager, rendermime) => {
+        // Track open diff widgets so the openDiff handler can reveal an
+        // already-open diff for the same file instead of creating a duplicate
+        // (and so a promoted preview can find its pinned twin).
         const tracker = new WidgetTracker({
             namespace: GIT_DIFF_TRACKER_NAMESPACE
         });
@@ -39,36 +32,15 @@ const plugin = {
             const existing = tracker.find(widget => !widget.isDisposed && widget.id === id);
             return existing !== null && existing !== void 0 ? existing : undefined;
         };
-        const panel = new GitPanel({
-            openDiff: (change, options) => {
-                const args = { repoPath, change };
-                if ((options === null || options === void 0 ? void 0 : options.pin) === true) {
-                    args.pin = true;
-                }
-                void app.commands.execute(CommandIDs.openDiff, args);
-            },
-            confirm: async (title, body, accept) => {
-                const result = await showDialog({
-                    title,
-                    body,
-                    buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: accept })]
-                });
-                return result.button.accept === true;
-            },
-            showError: showErrorMessage
-        });
-        app.shell.add(panel, 'left', { rank: 60 });
-        if (restorer !== null) {
-            restorer.add(panel, panel.id);
-        }
         registerGitCommands({
             app,
-            panel,
             themeManager,
-            commandPalette,
             contentsManager: app.serviceManager.contents,
             rendermime,
-            onChanged: () => panel.refresh(),
+            // The launcher polls git status on its own cadence and the
+            // jupyterlab-git panel auto-refreshes on the contents `fileChanged`
+            // signal a hunk-discard save emits, so no extra refresh is needed.
+            onChanged: () => undefined,
             trackDiff: widget => tracker.add(widget),
             onPinned: current => {
                 const existing = findDiff(current.content.change, true);
@@ -87,4 +59,17 @@ const plugin = {
         });
     }
 };
-export default plugin;
+/**
+ * Every plugin contributed by xtralab's git integration:
+ *
+ *   1. {@link diffCommandPlugin} — the launcher's `xtralab:git:open-diff`.
+ *   2. `diffProviderPlugin` — registers the `@pierre/diffs` rendering as
+ *      jupyterlab-git's diff providers (replacing its disabled
+ *      notebook/text diff plugins).
+ */
+const plugins = [
+    diffCommandPlugin,
+    diffProviderPlugin
+];
+export { CommandIDs };
+export default plugins;

package/lib/index.d.ts

@@ -2,9 +2,10 @@ import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 /**
  * Every plugin contributed by `xtralab`. The entry point of the
  * labextension is an array because the package bundles several independent
- * enhancements (file browser, git changes panel, …) — JupyterLab activates
+ * enhancements (file browser, git diff providers, …) — JupyterLab activates
  * each plugin individually and only the ones whose required tokens are
- * available end up running.
+ * available end up running. `gitPlugins` is itself an array (the launcher
+ * diff command + the jupyterlab-git diff providers), so it is spread in.
  */
 declare const plugins: JupyterFrontEndPlugin<unknown>[];
 export default plugins;

package/lib/index.js

@@ -1,7 +1,7 @@
 import fileBrowserPlugin from './fileBrowser';
 import editorBreadcrumbsPlugin from './editorBreadcrumbs';
 import editorIndentPlugin from './editorIndent';
-import gitPlugin from './git';
+import gitPlugins from './git';
 import launcherPlugin from './launcher';
 import menusPlugin from './menus';
 import sidebarPlugin from './sidebar';
@@ -9,15 +9,16 @@ import statusBarPlugin from './statusBar';
 /**
  * Every plugin contributed by `xtralab`. The entry point of the
  * labextension is an array because the package bundles several independent
- * enhancements (file browser, git changes panel, …) — JupyterLab activates
+ * enhancements (file browser, git diff providers, …) — JupyterLab activates
  * each plugin individually and only the ones whose required tokens are
- * available end up running.
+ * available end up running. `gitPlugins` is itself an array (the launcher
+ * diff command + the jupyterlab-git diff providers), so it is spread in.
  */
 const plugins = [
     editorBreadcrumbsPlugin,
     editorIndentPlugin,
     fileBrowserPlugin,
-    gitPlugin,
+    ...gitPlugins,
     launcherPlugin,
     menusPlugin,
     sidebarPlugin,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "xtralab",
-    "version": "0.4.0",
-    "description": "An opinionated JupyterLab meta-package that bundles a curated set of extensions, ships a path-first file browser and a VS Code-style git changes panel, and applies a quieter default workspace configuration.",
+    "version": "0.5.0",
+    "description": "An opinionated JupyterLab meta-package that bundles a curated set of extensions, ships a path-first file browser, renders jupyterlab-git's text, notebook and image diffs with its own viewers, and applies a quieter default workspace configuration.",
     "keywords": [
         "jupyter",
         "jupyterlab",
@@ -66,6 +66,7 @@
         "@jupyterlab/coreutils": "^6.6.0-alpha.5",
         "@jupyterlab/docmanager": "^4.6.0-alpha.5",
         "@jupyterlab/docregistry": "^4.6.0-alpha.5",
+        "@jupyterlab/git": "^0.54.0-a0",
         "@jupyterlab/launcher": "^4.6.0-alpha.5",
         "@jupyterlab/mainmenu": "^4.6.0-alpha.5",
         "@jupyterlab/nbformat": "^4.6.0-alpha.5",
@@ -131,8 +132,16 @@
         "extension": true,
         "outputDir": "xtralab/labextension",
         "schemaDir": "schema",
+        "sharedPackages": {
+            "@jupyterlab/git": {
+                "bundled": false,
+                "singleton": true
+            }
+        },
         "disabledExtensions": [
-            "@jupyterlab/git",
+            "@jupyterlab/git:notebook-diff",
+            "@jupyterlab/git:plain-text-diff",
+            "@jupyterlab/git:image-diff",
             "@jupyterlab/launcher-extension"
         ]
     },
@@ -140,7 +149,12 @@
         "node_modules",
         "dist",
         "coverage",
-        "**/*.d.ts"
+        "**/*.d.ts",
+        "desktop/out",
+        "desktop/dist",
+        "desktop/python/wheels",
+        "desktop/python/runtime",
+        "desktop/python/runtime.staging"
     ],
     "eslintConfig": {
         "extends": [

package/src/git/commands.ts

@@ -1,8 +1,7 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { ICommandPalette, IThemeManager } from '@jupyterlab/apputils';
+import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
-import { refreshIcon } from '@jupyterlab/ui-components';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 import {
@@ -10,16 +9,15 @@ import {
   diffWidgetId,
   updateGitDiffWidget
 } from './diffWidget';
-import { GitPanel } from './panel';
 import { IFileChange } from './tokens';
 
 /**
- * Command IDs exposed by the git plugin. Both are registered in
- * {@link registerGitCommands} so other extensions, the command palette and
- * keybindings can drive the panel without going through the React internals.
+ * Command IDs exposed by the launcher's git diff path. The launcher
+ * dashboard's "Changes" section drives {@link CommandIDs.openDiff} to open
+ * its own diff tab, independent of `jupyterlab-git` (whose panel reaches
+ * the same rendering via the providers in `diffProvider.tsx`).
  */
 export namespace CommandIDs {
-  export const refresh = 'xtralab:git:refresh';
   export const openDiff = 'xtralab:git:open-diff';
 }
 
@@ -39,9 +37,7 @@ export namespace CommandArguments {
 
 export interface IRegisterGitCommandsOptions {
   app: JupyterFrontEnd;
-  panel: GitPanel;
   themeManager: IThemeManager | null;
-  commandPalette: ICommandPalette | null;
   /**
    * Contents manager used by the diff widget to write hunk-discard
    * results back to the working tree.
@@ -56,7 +52,10 @@ export interface IRegisterGitCommandsOptions {
   rendermime: IRenderMimeRegistry | null;
   /**
    * Called whenever the diff widget mutates the working tree (e.g. after
-   * a hunk discard) so the plugin can refresh the changes panel.
+   * a hunk discard). The launcher dashboard polls git status on its own
+   * cadence and `jupyterlab-git`'s panel auto-refreshes on the contents
+   * `fileChanged` signal the save emits, so this is a hook for any extra
+   * bookkeeping rather than a required refresh.
    */
   onChanged: () => void;
   /**
@@ -77,18 +76,15 @@ export interface IRegisterGitCommandsOptions {
 }
 
 /**
- * Register the git commands on the application command registry. Returns
- * a disposer that clears the command palette items the registration created
- * (the commands themselves stay registered for the lifetime of the plugin).
+ * Register the launcher's git diff command on the application command
+ * registry.
  */
 export function registerGitCommands(
   options: IRegisterGitCommandsOptions
-): () => void {
+): void {
   const {
     app,
-    panel,
     themeManager,
-    commandPalette,
     contentsManager,
     rendermime,
     onChanged,
@@ -98,15 +94,6 @@ export function registerGitCommands(
   } = options;
   const { commands } = app;
 
-  commands.addCommand(CommandIDs.refresh, {
-    label: 'Refresh Git Changes',
-    caption: 'Refresh the git changes panel',
-    icon: refreshIcon,
-    execute: () => {
-      panel.refresh();
-    }
-  });
-
   commands.addCommand(CommandIDs.openDiff, {
     label: 'Open Git Diff',
     caption: 'Open a side-by-side diff for a changed file',
@@ -139,19 +126,6 @@ export function registerGitCommands(
       app.shell.activateById(widget.id);
     }
   });
-
-  const paletteItems = commandPalette
-    ? [
-        commandPalette.addItem({
-          command: CommandIDs.refresh,
-          category: 'Git'
-        })
-      ]
-    : [];
-
-  return () => {
-    paletteItems.forEach(item => item.dispose());
-  };
 }
 
 export { diffWidgetId };