Display image.

package.json

@@ -20,7 +20,8 @@
     "react": "^19.2.0",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.13.1"
+    "react-router-dom": "^7.13.1",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/Home.tsx

@@ -1,12 +1,40 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image } from "react-bootstrap";
+import { atom, useAtom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+
+const costmapImageQuery = async () => {
+    const resp = await fetch("api/costmap_image");
+    if (!resp.ok) {
+        throw new Error("Network response was not ok");
+    }
+    const blob = await resp.blob();
+    return URL.createObjectURL(blob);
+};
+
+const costmapImageAtom = atomWithQuery(() => ({
+    queryKey: ["costmap_image"],
+    queryFn: costmapImageQuery,
+    refetchInterval: 1000 // 1s
+}));
 
 export function Home() {
+  const [{ data, isPending, isError }] = useAtom(costmapImageAtom);
+
+  let costmapImage = () => {
+    if (isPending) {
+        return (<p>"Loading..."</p>);
+    }
+    if (isError) {
+        return(<p>"Error!"</p>);
+    }
+      return (<Image src={data} />);
+  };
   return (
     <div>
       <AppNav />
       <Container>
-        <p> Hello World! </p>
+          { costmapImage() }
       </Container>
       <Footer />
     </div>

src/Version.tsx

@@ -1,45 +1,48 @@
 import { AppNav, Footer } from "./AppNav.tsx";
-import { Container, Row, Col, Image } from "react-bootstrap";
-import { atom, useAtom } from 'jotai';
-import { atomWithQuery } from 'jotai-tanstack-query';
+import { Container, Row, Col, Card } from "react-bootstrap";
+import { atom, useAtom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+import YAML from "yaml";
 
 const versionQueryFn = async () => {
-    const resp = await fetch("api/build_info");
-    if(!resp.ok) {
-        throw new Error('Network response was not ok')
-    }
-    console.log(resp);
-    return resp.json();
-}
+  const resp = await fetch("api/build_info");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return resp.json();
+};
 
-const versionAtom = atomWithQuery( () =>
-    ({
-        queryKey: ["version"],
-        queryFn: versionQueryFn,
-    })
-);
+const versionAtom = atomWithQuery(() => ({
+  queryKey: ["version"],
+  queryFn: versionQueryFn,
+}));
 
 export function Version() {
   const [{ data, isPending, isError }] = useAtom(versionAtom);
 
-    let versionText = () => {
-        if(isPending) {
-            return "Loading...";
-        }
-        if(isError) {
-            return "Error loading!";
-        }
-        return JSON.stringify(data);
-    };
-
+  let versionText = () => {
+    if (isPending) {
+      return "Loading...";
+    }
+    if (isError) {
+      return "Error loading!";
+    }
+    if (!data.status) {
+      return "Can not find version";
+    }
+    return YAML.stringify(data.message);
+  };
 
   return (
     <div>
       <AppNav />
-      <Container>
-          <p>
-          {versionText()}
-          </p>
+      <Container className="vert-padded">
+        <Card className="padded">
+          <Card.Title>project.yaml</Card.Title>
+          <Card.Body>
+            <pre>{versionText()}</pre>
+          </Card.Body>
+        </Card>
       </Container>
       <Footer />
     </div>

yarn.lock

@@ -1195,6 +1195,7 @@ __metadata:
     typescript: "npm:~5.9.3"
     typescript-eslint: "npm:^8.48.0"
     vite: "npm:^7.3.1"
+    yaml: "npm:^2.8.2"
   languageName: unknown
   linkType: soft
 
@@ -3072,6 +3073,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.8.2":
+  version: 2.8.2
+  resolution: "yaml@npm:2.8.2"
+  bin:
+    yaml: bin.mjs
+  checksum: 10c0/703e4dc1e34b324aa66876d63618dcacb9ed49f7e7fe9b70f1e703645be8d640f68ab84f12b86df8ac960bac37acf5513e115de7c970940617ce0343c8c9cd96
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"