@marimo-team/islands 0.23.15-dev21 → 0.23.15-dev25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.15-dev21",
+  "version": "0.23.15-dev25",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -12,6 +12,13 @@ export interface ImageComparisonData {
   height?: string;
 }
 
+// Truncate long sources (e.g. base64 data URLs) so error messages stay
+// readable.
+function truncateSrc(src: string): string {
+  const MAX_LENGTH = 100;
+  return src.length > MAX_LENGTH ? `${src.slice(0, MAX_LENGTH)}…` : src;
+}
+
 const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   beforeSrc,
   afterSrc,
@@ -20,17 +27,61 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   width,
   height,
 }) => {
+  const [failedSrcs, setFailedSrcs] = React.useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  React.useEffect(() => {
+    setFailedSrcs(new Set());
+  }, [beforeSrc, afterSrc]);
+
+  const handleError = React.useCallback((src: string) => {
+    setFailedSrcs((prev) => new Set(prev).add(src));
+  }, []);
+
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
     height: height || (direction === "vertical" ? "400px" : "auto"),
     maxWidth: "100%",
+    // The slider derives its height entirely from its (loaded) images, so a
+    // broken/slow-loading source would otherwise collapse it to nothing and
+    // render an empty output. Keep a minimum height so it stays visible.
+    minHeight: "2rem",
   };
 
+  // If an image fails to load, the slider collapses to nothing; surface a
+  // visible error instead of silently rendering an empty output.
+  if (failedSrcs.size > 0) {
+    return (
+      <div
+        style={containerStyle}
+        className="flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive"
+      >
+        <span>
+          Failed to load {failedSrcs.size > 1 ? "images" : "image"}:{" "}
+          {[...failedSrcs].map((src) => `"${truncateSrc(src)}"`).join(", ")}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div style={containerStyle}>
       <ImgComparisonSlider value={value} direction={direction}>
-        <img slot="first" src={beforeSrc} alt="Before" width="100%" />
-        <img slot="second" src={afterSrc} alt="After" width="100%" />
+        <img
+          slot="first"
+          src={beforeSrc}
+          alt="Before"
+          width="100%"
+          onError={() => handleError(beforeSrc)}
+        />
+        <img
+          slot="second"
+          src={afterSrc}
+          alt="After"
+          width="100%"
+          onError={() => handleError(afterSrc)}
+        />
       </ImgComparisonSlider>
     </div>
   );

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import ImageComparisonComponent from "../ImageComparisonComponent";
+
+const baseProps = {
+  beforeSrc: "before.png",
+  afterSrc: "after.png",
+  value: 50,
+  direction: "horizontal" as const,
+};
+
+describe("ImageComparisonComponent", () => {
+  it("renders the comparison slider with both images", () => {
+    const { getByAltText, container } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+    expect(getByAltText("Before")).toBeTruthy();
+    expect(getByAltText("After")).toBeTruthy();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("shows a visible error instead of collapsing when an image fails to load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    // No error before the image fails.
+    expect(queryByText(/Failed to load/)).toBeNull();
+
+    fireEvent.error(getByAltText("Before"));
+
+    // The slider is replaced with a visible error mentioning the source, so
+    // the output is never a silent blank.
+    expect(container.querySelector("img-comparison-slider")).toBeNull();
+    const error = queryByText(/Failed to load image/);
+    expect(error).toBeTruthy();
+    expect(error?.textContent).toContain(brokenSrc);
+  });
+
+  it("clears the error when the sources change so new images can load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container, rerender } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    fireEvent.error(getByAltText("Before"));
+    expect(queryByText(/Failed to load/)).toBeTruthy();
+
+    // Re-render with a new source (e.g. the user fixed the notebook): the error
+    // should clear and the slider should mount again rather than stay stuck.
+    rerender(<ImageComparisonComponent {...baseProps} beforeSrc="fixed.png" />);
+    expect(queryByText(/Failed to load/)).toBeNull();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("truncates long sources (e.g. data URLs) in the error message", () => {
+    const longSrc = `data:image/png;base64,${"A".repeat(200)}`;
+    const { getByAltText, queryByText } = render(
+      <ImageComparisonComponent {...baseProps} afterSrc={longSrc} />,
+    );
+
+    fireEvent.error(getByAltText("After"));
+
+    const error = queryByText(/Failed to load image/);
+    expect(error?.textContent).toContain("…");
+    expect(error?.textContent).not.toContain("A".repeat(200));
+  });
+});