update

Author: Yiling-J

ui/src/components/dialog/dataset/preview.test.tsx

@@ -139,69 +139,4 @@ describe("DatasetPreviewDialog", () => {
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
-
-  describe("Image Dataset Preview", () => {
-    const imageBase64 =
-      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==";
-    const imageUrl = "https://example.com/image1.jpg";
-
-    it("renders images correctly from URLs and base64 strings", async () => {
-      const imageData = {
-        type: "image" as const,
-        data: [imageUrl, imageBase64],
-      };
-      (mockPreviewDataset as Mock).mockResolvedValue(imageData);
-      renderDialog();
-
-      await waitFor(() => {
-        expect(screen.getAllByRole("img")).toHaveLength(2);
-      });
-
-      const images = screen.getAllByRole("img");
-      expect(images[0]).toHaveAttribute("src", imageUrl);
-      expect(images[0]).toHaveAttribute("alt", "Preview 1");
-      expect(screen.getByText("image1.jpg")).toBeInTheDocument();
-
-      expect(images[1]).toHaveAttribute("src", imageBase64);
-      expect(images[1]).toHaveAttribute("alt", "Preview 2");
-      expect(screen.getByText("Image 2")).toBeInTheDocument(); // Generic name for base64
-    });
-
-    it("handles empty image list", async () => {
-      const emptyImageData = {
-        type: "image" as const,
-        data: [],
-      };
-      (mockPreviewDataset as Mock).mockResolvedValue(emptyImageData);
-      renderDialog();
-
-      await waitFor(() => {
-        expect(
-          screen.getByText(
-            "Preview for this data type is not yet implemented or the data is empty/invalid.",
-          ),
-        ).toBeInTheDocument();
-      });
-      expect(screen.queryAllByRole("img")).toHaveLength(0);
-    });
-
-    it("shows loading state for image preview", async () => {
-      (mockPreviewDataset as Mock).mockReturnValue(new Promise(() => {})); // Never resolves
-      renderDialog();
-      // Check for DialogTitle to ensure dialog is attempting to render
-      expect(screen.getByText("Dataset Preview")).toBeInTheDocument();
-      // Check for presence of skeleton loaders (assuming they use 'animate-pulse')
-      const skeletons = document.querySelectorAll(".animate-pulse");
-      expect(skeletons.length).toBeGreaterThan(0); // Or a more specific count if known
-    });
-
-    it("shows error state if fetching image data fails", async () => {
-      const errorMessage = "Failed to fetch image dataset.";
-      (mockPreviewDataset as Mock).mockRejectedValue(new Error(errorMessage));
-      renderDialog();
-      await waitFor(() => {
-        expect(screen.getByText(`Error: ${errorMessage}`)).toBeInTheDocument();
-      });
-    });
-  });
 });

ui/src/components/dialog/dataset/preview.tsx

@@ -1,6 +1,7 @@
 import { previewDataset } from "@/actions";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
     Dialog,
     DialogContent,
@@ -9,12 +10,6 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog";
-import {
-    Card,
-    CardContent,
-    // CardMedia, // Not available, will use img directly
-    CardTitle,
-} from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     Table,
@@ -25,6 +20,7 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import { JSONObject } from "@/json";
+import { imageUrl } from "@/urls";
 import React, { useEffect, useState } from "react";
 
 interface PreviewData {
@@ -145,19 +141,19 @@ export const DatasetPreviewDialog: React.FC<DatasetPreviewDialogProps> = ({
               ) : data.type === "image" && Array.isArray(data.data) ? (
                 <div className="flex flex-wrap justify-center p-4">
                   {(data.data as string[]).map((item, index) => {
-                    const isBase64 = item.startsWith("data:image");
-                    const filename = isBase64
-                      ? `Image ${index + 1}`
-                      : item.substring(item.lastIndexOf("/") + 1);
+                    const filename = item.substring(item.lastIndexOf("/") + 1);
                     return (
                       <Card key={`image-${index}`} className="m-2 w-48">
                         <img
-                          src={item}
+                          src={imageUrl(item)}
                           alt={`Preview ${index + 1}`}
                           className="object-contain h-40 w-full rounded-t-lg"
                         />
                         <CardContent className="p-2">
-                          <p className="text-sm text-center mt-1 truncate" title={filename}>
+                          <p
+                            className="text-sm text-center mt-1 truncate"
+                            title={filename}
+                          >
                             {filename}
                           </p>
                         </CardContent>