xtralab 0.11.1 → 0.12.0

package/src/git/imageDiff.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import type { TranslationBundle } from '@jupyterlab/translation';
+
 /**
  * xtralab's image diff, registered in place of `@jupyterlab/git:image-diff`.
  *
@@ -28,7 +30,9 @@ const IMAGE_DATA_TYPES: Record<string, string> = {
   '.ico': 'x-icon'
 };
 
-/** The file extensions registered as the xtralab image diff provider. */
+/**
+ * The file extensions registered as the xtralab image diff provider.
+ */
 export const IMAGE_DIFF_EXTENSIONS = Object.keys(IMAGE_DATA_TYPES);
 
 /**
@@ -44,7 +48,9 @@ export function imageDataType(path: string): string | null {
   return IMAGE_DATA_TYPES[lower.slice(dot)] ?? null;
 }
 
-/** Comparison layouts, matching jupyterlab-git's image diff modes. */
+/**
+ * Comparison layouts, matching jupyterlab-git's image diff modes.
+ */
 type ImageDiffViewMode = '2-up' | 'swipe' | 'onion';
 
 const IMAGE_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:image-diff-view-mode';
@@ -80,7 +86,9 @@ function cleanBase64(value: string): string {
   return value.replace(/\s+/g, '');
 }
 
-/** Decoded byte length of a (whitespace-free) base64 string. */
+/**
+ * Decoded byte length of a (whitespace-free) base64 string.
+ */
 function base64ByteLength(clean: string): number {
   if (clean.length === 0) {
     return 0;
@@ -104,7 +112,9 @@ function formatBytes(bytes: number): string {
 }
 
 interface IImageSide {
-  /** Cleaned base64 payload; empty string means the side does not exist. */
+  /**
+   * Cleaned base64 payload; empty string means the side does not exist.
+   */
   data: string;
   present: boolean;
   uri: string | null;
@@ -123,12 +133,22 @@ function toSide(raw: string, fileType: string): IImageSide {
 }
 
 interface IImageDiffViewProps {
-  /** Base64 of the reference (old) revision; empty when added. */
+  /**
+   * Base64 of the reference (old) revision; empty when added.
+   */
   reference: string;
-  /** Base64 of the challenger (new) revision; empty when deleted. */
+  /**
+   * Base64 of the challenger (new) revision; empty when deleted.
+   */
   challenger: string;
-  /** MIME subtype from {@link imageDataType}. */
+  /**
+   * MIME subtype from {@link imageDataType}.
+   */
   fileType: string;
+  /**
+   * Translation bundle for user-facing strings.
+   */
+  trans: TranslationBundle;
 }
 
 /**
@@ -137,7 +157,7 @@ interface IImageDiffViewProps {
  * plus the selected 2-up / swipe / onion-skin view.
  */
 export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
-  const { reference, challenger, fileType } = props;
+  const { reference, challenger, fileType, trans } = props;
   const ref = React.useMemo(
     () => toSide(reference, fileType),
     [reference, fileType]
@@ -161,13 +181,13 @@ export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
         <div
           className="jp-xtralab-DiffWidget-segmented"
           role="tablist"
-          aria-label="Image diff view mode"
+          aria-label={trans.__('Image diff view mode')}
         >
           {(
             [
-              ['2-up', '2-up'],
-              ['swipe', 'Swipe'],
-              ['onion', 'Onion Skin']
+              ['2-up', trans.__('2-up')],
+              ['swipe', trans.__('Swipe')],
+              ['onion', trans.__('Onion Skin')]
             ] as [ImageDiffViewMode, string][]
           ).map(([value, label]) => (
             <button
@@ -186,11 +206,11 @@ export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
       </div>
       <div className="jp-xtralab-ImageDiff-body">
         {mode === '2-up' ? (
-          <TwoUp reference={ref} challenger={chall} />
+          <TwoUp reference={ref} challenger={chall} trans={trans} />
         ) : mode === 'swipe' ? (
-          <Swipe reference={ref} challenger={chall} />
+          <Swipe reference={ref} challenger={chall} trans={trans} />
         ) : (
-          <OnionSkin reference={ref} challenger={chall} />
+          <OnionSkin reference={ref} challenger={chall} trans={trans} />
         )}
       </div>
     </div>
@@ -200,6 +220,7 @@ export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
 interface ISideViewProps {
   reference: IImageSide;
   challenger: IImageSide;
+  trans: TranslationBundle;
 }
 
 function useNaturalSize(): [
@@ -231,7 +252,11 @@ function caption(
   return `${dims}${formatBytes(side.bytes)}`;
 }
 
-function TwoUp({ reference, challenger }: ISideViewProps): React.ReactElement {
+function TwoUp({
+  reference,
+  challenger,
+  trans
+}: ISideViewProps): React.ReactElement {
   const [refSize, onRefLoad] = useNaturalSize();
   const [challSize, onChallLoad] = useNaturalSize();
   return (
@@ -242,15 +267,17 @@ function TwoUp({ reference, challenger }: ISideViewProps): React.ReactElement {
             <img
               className="jp-xtralab-ImageDiff-img"
               src={reference.uri}
-              alt="Reference revision"
+              alt={trans.__('Reference revision')}
               onLoad={onRefLoad}
             />
           ) : (
-            <div className="jp-xtralab-ImageDiff-empty">No previous image</div>
+            <div className="jp-xtralab-ImageDiff-empty">
+              {trans.__('No previous image')}
+            </div>
           )}
         </div>
         <figcaption className="jp-xtralab-ImageDiff-caption">
-          {caption(reference, refSize, 'Added')}
+          {caption(reference, refSize, trans.__('Added'))}
         </figcaption>
       </figure>
       <figure className="jp-xtralab-ImageDiff-col">
@@ -259,15 +286,17 @@ function TwoUp({ reference, challenger }: ISideViewProps): React.ReactElement {
             <img
               className="jp-xtralab-ImageDiff-img"
               src={challenger.uri}
-              alt="Challenger revision"
+              alt={trans.__('Challenger revision')}
               onLoad={onChallLoad}
             />
           ) : (
-            <div className="jp-xtralab-ImageDiff-empty">Deleted</div>
+            <div className="jp-xtralab-ImageDiff-empty">
+              {trans.__('Deleted')}
+            </div>
           )}
         </div>
         <figcaption className="jp-xtralab-ImageDiff-caption">
-          {caption(challenger, challSize, 'Deleted')}
+          {caption(challenger, challSize, trans.__('Deleted'))}
         </figcaption>
       </figure>
     </div>
@@ -299,11 +328,85 @@ function RangeSlider(props: {
   );
 }
 
-function Swipe({ reference, challenger }: ISideViewProps): React.ReactElement {
+/**
+ * Fit a `naturalWidth × naturalHeight` image inside an `areaWidth ×
+ * areaHeight` box without upscaling past its intrinsic size — the same
+ * "contain, never enlarge" rule the 2-up and onion views get for free from
+ * `max-width/height: 100%; width/height: auto`. Returns the displayed pixel
+ * box, or `null` until both the image and the area have been measured.
+ */
+function containBox(
+  naturalWidth: number,
+  naturalHeight: number,
+  areaWidth: number,
+  areaHeight: number
+): { width: number; height: number } | null {
+  if (
+    naturalWidth <= 0 ||
+    naturalHeight <= 0 ||
+    areaWidth <= 0 ||
+    areaHeight <= 0
+  ) {
+    return null;
+  }
+  const scale = Math.min(
+    areaWidth / naturalWidth,
+    areaHeight / naturalHeight,
+    1
+  );
+  return { width: naturalWidth * scale, height: naturalHeight * scale };
+}
+
+/**
+ * Track an element's content-box size, kept current across layout changes.
+ */
+function useElementSize(): readonly [
+  React.RefObject<HTMLDivElement>,
+  { width: number; height: number }
+] {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  React.useEffect(() => {
+    const el = ref.current;
+    if (el === null) {
+      return;
+    }
+    const measure = () => {
+      setSize({ width: el.clientWidth, height: el.clientHeight });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return [ref, size] as const;
+}
+
+function Swipe({
+  reference,
+  challenger,
+  trans
+}: ISideViewProps): React.ReactElement {
   const [position, setPosition] = React.useState(50);
   const [dragging, setDragging] = React.useState(false);
+  const [refSize, onRefLoad] = useNaturalSize();
+  const [challSize, onChallLoad] = useNaturalSize();
+  const [areaRef, area] = useElementSize();
   const frameRef = React.useRef<HTMLDivElement>(null);
 
+  // Display both revisions in a single box — the union of their intrinsic
+  // sizes, scaled down to fit but never enlarged — and size the frame to
+  // exactly that box. The divider's `left: N%`, the pointer-to-percent
+  // mapping (below) and each image's `clip-path` inset then all resolve
+  // against the same width, so the white line sits precisely on the seam
+  // between the two revisions at every position. A full-width frame instead
+  // let the line drift off the seam by as much as half the letterbox.
+  const naturalWidth = Math.max(refSize?.[0] ?? 0, challSize?.[0] ?? 0);
+  const naturalHeight = Math.max(refSize?.[1] ?? 0, challSize?.[1] ?? 0);
+  const box = containBox(naturalWidth, naturalHeight, area.width, area.height);
+
   const setFromClientX = React.useCallback((clientX: number) => {
     const frame = frameRef.current;
     if (frame === null) {
@@ -379,19 +482,25 @@ function Swipe({ reference, challenger }: ISideViewProps): React.ReactElement {
 
   return (
     <div className="jp-xtralab-ImageDiff-interactive">
-      <div
-        className="jp-xtralab-ImageDiff-swipeFrame"
-        ref={frameRef}
-        onPointerDown={onPointerDown}
-        data-dragging={dragging ? 'true' : undefined}
-      >
-        <div className="jp-xtralab-ImageDiff-stack">
+      <div className="jp-xtralab-ImageDiff-swipeArea" ref={areaRef}>
+        <div
+          className="jp-xtralab-ImageDiff-swipeFrame"
+          ref={frameRef}
+          style={
+            box !== null
+              ? { width: `${box.width}px`, height: `${box.height}px` }
+              : { width: 0, height: 0, visibility: 'hidden' }
+          }
+          onPointerDown={onPointerDown}
+          data-dragging={dragging ? 'true' : undefined}
+        >
           {reference.uri !== null ? (
             <img
-              className="jp-xtralab-ImageDiff-stackImg"
+              className="jp-xtralab-ImageDiff-swipeImg"
               src={reference.uri}
-              alt="Reference revision"
+              alt={trans.__('Reference revision')}
               draggable={false}
+              onLoad={onRefLoad}
               style={{
                 clipPath: `inset(0 ${100 - position}% 0 0)`
               }}
@@ -399,35 +508,36 @@ function Swipe({ reference, challenger }: ISideViewProps): React.ReactElement {
           ) : null}
           {challenger.uri !== null ? (
             <img
-              className="jp-xtralab-ImageDiff-stackImg"
+              className="jp-xtralab-ImageDiff-swipeImg"
               src={challenger.uri}
-              alt="Challenger revision"
+              alt={trans.__('Challenger revision')}
               draggable={false}
+              onLoad={onChallLoad}
               style={{
                 clipPath: `inset(0 0 0 ${position}%)`
               }}
             />
           ) : null}
-        </div>
-        <div
-          className="jp-xtralab-ImageDiff-swipeDivider"
-          style={{ left: `${position}%` }}
-          role="slider"
-          aria-label="Swipe between reference and challenger"
-          aria-valuemin={0}
-          aria-valuemax={100}
-          aria-valuenow={Math.round(position)}
-          aria-orientation="vertical"
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-        >
-          <div className="jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-top">
-            <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" />
-            <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" />
-          </div>
-          <div className="jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-bottom">
-            <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" />
-            <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" />
+          <div
+            className="jp-xtralab-ImageDiff-swipeDivider"
+            style={{ left: `${position}%` }}
+            role="slider"
+            aria-label={trans.__('Swipe between reference and challenger')}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(position)}
+            aria-orientation="vertical"
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+          >
+            <div className="jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-top">
+              <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" />
+              <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" />
+            </div>
+            <div className="jp-xtralab-ImageDiff-swipeDividerHandle jp-mod-bottom">
+              <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-left" />
+              <div className="jp-xtralab-ImageDiff-swipeDividerArrow jp-mod-right" />
+            </div>
           </div>
         </div>
       </div>
@@ -437,7 +547,8 @@ function Swipe({ reference, challenger }: ISideViewProps): React.ReactElement {
 
 function OnionSkin({
   reference,
-  challenger
+  challenger,
+  trans
 }: ISideViewProps): React.ReactElement {
   const [opacity, setOpacity] = React.useState(50);
   return (
@@ -447,14 +558,14 @@ function OnionSkin({
           <img
             className="jp-xtralab-ImageDiff-stackImg"
             src={reference.uri}
-            alt="Reference revision"
+            alt={trans.__('Reference revision')}
           />
         ) : null}
         {challenger.uri !== null ? (
           <img
             className="jp-xtralab-ImageDiff-stackImg"
             src={challenger.uri}
-            alt="Challenger revision"
+            alt={trans.__('Challenger revision')}
             style={{ opacity: opacity / 100 }}
           />
         ) : null}
@@ -462,7 +573,7 @@ function OnionSkin({
       <RangeSlider
         value={opacity}
         onChange={setOpacity}
-        ariaLabel="Fade between reference and challenger"
+        ariaLabel={trans.__('Fade between reference and challenger')}
       />
     </div>
   );

package/src/git/index.ts

@@ -4,6 +4,9 @@ import {
 } from '@jupyterlab/application';
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+
+import { IAskAgent } from '../askAgent/tokens';
 
 import {
   CommandArguments,
@@ -30,12 +33,15 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
   description:
     "The launcher dashboard's side-by-side git diff command, powered by @pierre/diffs.",
   autoStart: true,
-  optional: [IThemeManager, IRenderMimeRegistry],
+  optional: [IThemeManager, IRenderMimeRegistry, ITranslator, IAskAgent],
   activate: (
     app: JupyterFrontEnd,
     themeManager: IThemeManager | null,
-    rendermime: IRenderMimeRegistry | null
+    rendermime: IRenderMimeRegistry | null,
+    translator: ITranslator | null,
+    askAgent: IAskAgent | null
   ): void => {
+    const trans = (translator ?? nullTranslator).load('jupyterlab');
     // Track open diffs so repeated opens reveal the existing tab.
     const tracker = new WidgetTracker<DiffMainAreaWidget>({
       namespace: GIT_DIFF_TRACKER_NAMESPACE
@@ -57,6 +63,8 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
       themeManager,
       contentsManager: app.serviceManager.contents,
       rendermime,
+      askAgent,
+      trans,
       trackDiff: widget => tracker.add(widget),
       onPinned: current => {
         const existing = findDiff(current.change, true);