In Listings, fetch images from artifact_ids

This fixes captions being just "caption" (which was a placeholder waiting for this commit) and also fixes trying to render URDF tar gunzips.
kscalelabs · Jul 30, 2024 · 5318f03 · 5318f03
1 parent de19fa6
commit 5318f03
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 69 deletions.
diff --git a/frontend/src/components/files/ViewImage.tsx b/frontend/src/components/files/ViewImage.tsx
@@ -4,7 +4,7 @@ import React from "react";
 interface ImageProps {
   imageId: string;
   size: "small" | "large";
-  caption: string;
+  caption?: string;
 }
 
 const ImageComponent: React.FC<ImageProps> = ({ imageId, size, caption }) => {

diff --git a/frontend/src/hooks/api.tsx b/frontend/src/hooks/api.tsx
@@ -191,6 +191,15 @@ export class api {
     });
   }
 
+  public async getImages(ids: string[]): Promise<Artifact[]> {
+    return this.callWrapper(async () => {
+      const response = await this.api.get("/images/batch", {
+        params: { ids: ids.join(",") },
+      });
+      return response.data;
+    });
+  }
+
   public async uploadImage(formData: FormData): Promise<string> {
     return this.callWrapper(async () => {
       const res = await this.api.post<UploadImageResponse>(

diff --git a/frontend/src/pages/ListingDetails.tsx b/frontend/src/pages/ListingDetails.tsx
@@ -2,7 +2,7 @@ import TCButton from "components/files/TCButton";
 import ImageComponent from "components/files/ViewImage";
 import { humanReadableError } from "constants/backend";
 import { useAlertQueue } from "hooks/alerts";
-import { api } from "hooks/api";
+import { api, Artifact } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
 import {
@@ -47,9 +47,10 @@ const RenderListing = ({
   const [userId, setUserId] = useState<string | null>(null);
   const [show, setShow] = useState(false);
   const [ownerEmail, setOwnerEmail] = useState<string | null>(null);
-  const [imageIndex, setArtifactIndex] = useState(0);
+  const [imageIndex, setArtifactIndex] = useState<number>(0);
   const [showDelete, setShowDelete] = useState(false);
   const [children, setChildren] = useState<Child[] | null>(null);
+  const [images, setImages] = useState<Artifact[]>([]);
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
@@ -77,6 +78,8 @@ const RenderListing = ({
       try {
         const ownerEmail = await auth_api.getUserById(user_id);
         setOwnerEmail(ownerEmail);
+        const images = await auth_api.getImages(artifact_ids);
+        setImages(images);
       } catch (err) {
         addAlert(humanReadableError(err), "error");
       }
@@ -229,9 +232,9 @@ const RenderListing = ({
             data-bs-theme="dark"
             style={{ border: "1px solid #ccc" }}
             interval={null}
-            controls={artifact_ids.length > 1}
+            controls={images.length > 1}
           >
-            {artifact_ids.map((id, key) => (
+            {images.map((image, key) => (
               <Carousel.Item key={key}>
                 <div
                   style={{
@@ -245,79 +248,82 @@ const RenderListing = ({
                   }}
                 >
                   <ImageComponent
-                    imageId={id}
+                    imageId={image.id}
                     size={"large"}
-                    caption={"caption"}
+                    caption={image.caption}
                   />
                 </div>
-                <Carousel.Caption
-                  style={{
-                    backgroundColor: "rgba(255, 255, 255, 0.5)",
-                    color: "black",
-                    padding: "0.1rem",
-                    // Put the caption at the top
-                    top: 10,
-                    bottom: "unset",
-                  }}
-                >
-                  {"caption"}
-                </Carousel.Caption>
+                {image.caption && (
+                  <Carousel.Caption
+                    style={{
+                      backgroundColor: "rgba(255, 255, 255, 0.5)",
+                      color: "black",
+                      padding: "0.1rem",
+                      // Put the caption at the top
+                      top: 10,
+                      bottom: "unset",
+                    }}
+                  >
+                    {image.caption}
+                  </Carousel.Caption>
+                )}
               </Carousel.Item>
             ))}
           </Carousel>
         </Col>
       </Row>
 
-      <Modal
-        show={show}
-        onHide={handleClose}
-        fullscreen="md-down"
-        centered
-        size="lg"
-        scrollable
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>
-            {/* TO-DO: This supposed to be the caption */}
-            {artifact_ids[imageIndex]} ({imageIndex + 1} of{" "}
-            {artifact_ids.length})
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div style={{ display: "flex", justifyContent: "center" }}>
-            <ImageComponent
-              imageId={artifact_ids[imageIndex]}
-              size={"large"}
-              caption={artifact_ids[imageIndex]}
-            />
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          {artifact_ids.length > 1 && (
-            <ButtonGroup>
-              <TCButton
-                variant="primary"
-                onClick={() => {
-                  setArtifactIndex(
-                    (imageIndex - 1 + artifact_ids.length) %
-                      artifact_ids.length,
-                  );
-                }}
-              >
-                Previous
-              </TCButton>
-              <TCButton
-                variant="primary"
-                onClick={() => {
-                  setArtifactIndex((imageIndex + 1) % artifact_ids.length);
-                }}
-              >
-                Next
-              </TCButton>
-            </ButtonGroup>
-          )}
-        </Modal.Footer>
-      </Modal>
+      {images.length > 0 && (
+        <Modal
+          show={show}
+          onHide={handleClose}
+          fullscreen="md-down"
+          centered
+          size="lg"
+          scrollable
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>
+              {images[imageIndex].caption} ({imageIndex + 1} of {images.length})
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <div style={{ display: "flex", justifyContent: "center" }}>
+              <ImageComponent
+                imageId={images[imageIndex].id}
+                size={"large"}
+                {...(images[imageIndex].caption && {
+                  caption: images[imageIndex].caption,
+                })}
+              />
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+            {images.length > 1 && (
+              <ButtonGroup>
+                <TCButton
+                  variant="primary"
+                  onClick={() => {
+                    setArtifactIndex(
+                      (imageIndex - 1 + images.length) % images.length,
+                    );
+                  }}
+                >
+                  Previous
+                </TCButton>
+                <TCButton
+                  variant="primary"
+                  onClick={() => {
+                    setArtifactIndex((imageIndex + 1) % images.length);
+                  }}
+                >
+                  Next
+                </TCButton>
+              </ButtonGroup>
+            )}
+          </Modal.Footer>
+        </Modal>
+      )}
     </>
   );
 };