@malloy-publisher/sdk 0.0.228 → 0.0.229

package/src/components/Materializations/utils.ts

@@ -69,6 +69,13 @@ export interface MaterializationMetadata {
    forceRefresh?: boolean;
    sourceNames?: string[];
    mode?: "auto" | "orchestrated";
+   /**
+    * What initiated the run. `SCHEDULER` = the standalone scheduler fired the
+    * package's `materialization.schedule` cron; `ON_DEMAND` (default) = an
+    * explicit API/UI create. Recorded on the run so a scheduled rebuild is
+    * distinguishable from a manual one.
+    */
+   trigger?: "ON_DEMAND" | "SCHEDULER";
    sourcesBuilt?: number;
    sourcesReused?: number;
 }
@@ -79,6 +86,13 @@ export function parseMetadata(
    return (materialization.metadata ?? {}) as MaterializationMetadata;
 }
 
+/** Human label for how a run was initiated. */
+export function triggerLabel(
+   meta: MaterializationMetadata,
+): "Scheduled" | "Manual" {
+   return meta.trigger === "SCHEDULER" ? "Scheduled" : "Manual";
+}
+
 /** Human-readable elapsed time between two ISO timestamps (to now if open). */
 export function formatDuration(
    startedAt?: string | null,

package/src/components/Model/ModelCell.tsx

@@ -5,6 +5,7 @@ import React, { useEffect } from "react";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { usePublisherTheme } from "../../theme/ThemeContext";
 import { parseResourceUri } from "../../utils/formatting";
+import { CHART_RESULT_QUERY_OPTIONS } from "../../utils/queryClient";
 import { highlight } from "../highlighter";
 import ResultContainer from "../RenderedResult/ResultContainer";
 import ResultsDialog from "../ResultsDialog";
@@ -56,6 +57,7 @@ export function ModelCell({
             },
          ),
       enabled: runOnDemand ? hasRun : true, // Execute on demand or always
+      ...CHART_RESULT_QUERY_OPTIONS,
    });
 
    const { mode } = usePublisherTheme();
@@ -179,6 +181,7 @@ export function ModelCell({
                      result={queryData.data.result}
                      maxHeight={600}
                      maxResultSize={maxResultSize}
+                     renderLogs={queryData.data.renderLogs}
                   />
                )}
          </CleanMetricCard>
@@ -188,6 +191,7 @@ export function ModelCell({
             open={resultsDialogOpen}
             onClose={() => setResultsDialogOpen(false)}
             result={queryData?.data?.result || ""}
+            renderLogs={queryData?.data?.renderLogs}
             title={`Query: ${queryName}`}
          />
       </CleanNotebookCell>

package/src/components/Notebook/Notebook.tsx

@@ -1,7 +1,14 @@
 import "@malloydata/malloy-explorer/styles.css";
 import * as Malloy from "@malloydata/malloy-interfaces";
 import { Box, Paper, Stack, Typography } from "@mui/material";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+   MouseEvent,
+   useCallback,
+   useEffect,
+   useMemo,
+   useRef,
+   useState,
+} from "react";
 import { RawNotebook, Source } from "../../client";
 import {
    getDimensionKey,
@@ -37,6 +44,10 @@ interface NotebookProps {
    maxResultSize?: number;
    /** Optional retrieval function for semantic search filters */
    retrievalFn?: RetrievalFunction;
+   /** Optional SPA navigation handler for links inside the notebook. When
+    * omitted, in-notebook links fall back to plain absolute anchors, so no
+    * react-router context is required to render a notebook. */
+   onNavigate?: (to: string, event?: MouseEvent) => void;
 }
 
 // Requires PackageProvider
@@ -44,6 +55,7 @@ export default function Notebook({
    resourceUri,
    maxResultSize = 0,
    retrievalFn,
+   onNavigate,
 }: NotebookProps) {
    const { apiClients } = useServer();
    const {
@@ -593,6 +605,7 @@ export default function Notebook({
                         resourceUri={resourceUri}
                         maxResultSize={maxResultSize}
                         isExecuting={isExecuting}
+                        onNavigate={onNavigate}
                      />
                   ))}
 

package/src/components/Notebook/NotebookCell.tsx

@@ -18,6 +18,7 @@ import {
 import Markdown from "markdown-to-jsx";
 import React, { useEffect, useState } from "react";
 import { usePublisherTheme } from "../../theme/ThemeContext";
+import { parseResourceUri } from "../../utils/formatting";
 import { highlight } from "../highlighter";
 import { ModelExplorerDialog } from "../Model/ModelExplorerDialog";
 import { createEmbeddedQueryResult } from "../QueryResult/QueryResult";
@@ -36,6 +37,83 @@ interface NotebookCellProps {
    index: number;
    maxResultSize?: number;
    isExecuting?: boolean;
+   onNavigate?: (to: string, event?: React.MouseEvent) => void;
+}
+
+interface NotebookMarkdownLinkProps {
+   href?: string;
+   title?: string;
+   children?: React.ReactNode;
+   envName: string;
+   pkgName: string;
+   sourceDir: string;
+   onNavigate?: (to: string, event?: React.MouseEvent) => void;
+}
+
+// Links inside a rendered notebook/README are authored relative to the source
+// file (e.g. `spielberg.malloynb`). A plain browser anchor resolves them
+// against the current page URL, which drops the package segment for a README
+// shown at the package route. Resolve relative links against the source file's
+// own directory instead and route them through the SPA. External, hash, and
+// absolute links stay as normal anchors.
+function NotebookMarkdownLink({
+   href,
+   title,
+   children,
+   envName,
+   pkgName,
+   sourceDir,
+   onNavigate,
+}: NotebookMarkdownLinkProps) {
+   const hasScheme = !!href && /^[a-z][a-z0-9+.-]*:/i.test(href);
+   const isInternalRelative =
+      !!href && !hasScheme && !href.startsWith("/") && !href.startsWith("#");
+
+   if (!isInternalRelative || !href) {
+      // External, absolute, or hash link: render a normal anchor. Only allow
+      // safe schemes so a crafted `javascript:`/`data:` href in a package
+      // README (packages can come from untrusted git/S3 sources) cannot run.
+      const isUnsafeScheme =
+         hasScheme && !/^(https?|mailto|tel):/i.test(href ?? "");
+      return (
+         <a
+            href={isUnsafeScheme ? undefined : href}
+            title={title}
+            {...(hasScheme
+               ? { target: "_blank", rel: "noopener noreferrer" }
+               : {})}
+         >
+            {children}
+         </a>
+      );
+   }
+
+   // Resolve the relative href against the source file's directory (empty for a
+   // package-root README) via a dummy origin, which normalizes any `./`/`../`
+   // and clamps escapes at the package root, then prefix the package path.
+   const resolved = new URL(href, `https://malloy.invalid/${sourceDir}`);
+   const packageRelative =
+      resolved.pathname.slice(1) + resolved.search + resolved.hash;
+   const to = `/${envName}/${pkgName}/${packageRelative}`;
+   // With a host router (onNavigate) intercept and route through the SPA.
+   // Without one (router-free SDK embedding) the absolute href navigates on
+   // its own, so rendering a notebook needs no react-router context.
+   return (
+      <a
+         href={to}
+         title={title}
+         onClick={
+            onNavigate
+               ? (event) => {
+                    event.preventDefault();
+                    onNavigate(to, event);
+                 }
+               : undefined
+         }
+      >
+         {children}
+      </a>
+   );
 }
 
 export function NotebookCell({
@@ -46,6 +124,7 @@ export function NotebookCell({
    index,
    maxResultSize,
    isExecuting,
+   onNavigate,
 }: NotebookCellProps) {
    const [codeDialogOpen, setCodeDialogOpen] = React.useState<boolean>(false);
    const [embeddingDialogOpen, setEmbeddingDialogOpen] =
@@ -61,6 +140,28 @@ export function NotebookCell({
 
    const [copyMessage, setCopyMessage] = useState("");
 
+   const { environmentName, packageName, modelPath } =
+      parseResourceUri(resourceUri);
+   // Directory of the source file within the package (empty for a package-root
+   // README), used to resolve relative links the author wrote against it.
+   const sourceDir =
+      modelPath && modelPath.includes("/")
+         ? modelPath.slice(0, modelPath.lastIndexOf("/") + 1)
+         : "";
+   const markdownOptions = {
+      overrides: {
+         a: {
+            component: NotebookMarkdownLink,
+            props: {
+               envName: environmentName,
+               pkgName: packageName,
+               sourceDir,
+               onNavigate,
+            },
+         },
+      },
+   };
+
    // Regex to extract imported names from import statements
    const IMPORT_NAMES_REGEX = /import\s*\{([^}]+)\}\s*from\s*['"`][^'"`]+['"`]/;
 
@@ -190,7 +291,7 @@ export function NotebookCell({
                      alignItems="flex-start"
                      justifyContent="space-between"
                   >
-                     <Markdown>{cell.text}</Markdown>
+                     <Markdown options={markdownOptions}>{cell.text}</Markdown>
                      <Tooltip title="Click to copy link">
                         <LinkOutlinedIcon
                            sx={{
@@ -204,7 +305,7 @@ export function NotebookCell({
                      </Tooltip>
                   </Stack>
                ) : (
-                  <Markdown>{cell.text}</Markdown>
+                  <Markdown options={markdownOptions}>{cell.text}</Markdown>
                )}
                <Snackbar
                   open={copyMessage !== ""}

package/src/components/Package/Package.tsx

@@ -215,7 +215,12 @@ export default function Package({
                         icon={<ContentTypeIcon type="report" />}
                         tint={MALLOY_BRAND.teal}
                         label={notebook.path}
-                        onClick={(event) => onClick(notebook.path, event)}
+                        onClick={(event) =>
+                           onClick(
+                              `/${environmentName}/${packageName}/${notebook.path}`,
+                              event,
+                           )
+                        }
                      />
                   ))}
                   {notebooks.length === 0 && <EmptyRow label="No notebooks" />}
@@ -248,7 +253,7 @@ export default function Package({
                                     // The `pages/` prefix lets the router branch
                                     // off the existing model-path catch-all.
                                     onClickPackageFile(
-                                       `pages/${page.path}`,
+                                       `/${environmentName}/${packageName}/pages/${page.path}`,
                                        event,
                                     );
                                  } else {
@@ -293,7 +298,12 @@ export default function Package({
                         icon={<ContentTypeIcon type="model" />}
                         tint={MALLOY_BRAND.orange}
                         label={model.path}
-                        onClick={(event) => onClick(model.path, event)}
+                        onClick={(event) =>
+                           onClick(
+                              `/${environmentName}/${packageName}/${model.path}`,
+                              event,
+                           )
+                        }
                      />
                   ))}
                   {models.length === 0 && <EmptyRow label="No models" />}
@@ -332,6 +342,7 @@ export default function Package({
                      <Notebook
                         resourceUri={readmeResourceUri}
                         retrievalFn={retrievalFn}
+                        onNavigate={onClick}
                      />
                   </Box>
                )}

package/src/components/QueryResult/QueryResult.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { parseResourceUri } from "../../utils/formatting";
+import { CHART_RESULT_QUERY_OPTIONS } from "../../utils/queryClient";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import ResultContainer from "../RenderedResult/ResultContainer";
@@ -90,6 +91,7 @@ export default function QueryResult({
                versionId: versionId,
             },
          ),
+      ...CHART_RESULT_QUERY_OPTIONS,
    });
 
    return (
@@ -99,7 +101,11 @@ export default function QueryResult({
          )}
          {isSuccess && (
             <Suspense fallback={<div>Loading...</div>}>
-               <ResultContainer result={data.data.result} maxHeight={height} />
+               <ResultContainer
+                  result={data.data.result}
+                  maxHeight={height}
+                  renderLogs={data.data.renderLogs}
+               />
             </Suspense>
          )}
          {isError && (

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import React, { Suspense, useLayoutEffect, useRef } from "react";
+import React, { Suspense, useEffect, useLayoutEffect, useRef } from "react";
 import { buildMalloyExplicitTheme } from "../../theme/buildMalloyExplicitTheme";
 import { buildTableCssVars } from "../../theme/buildTableCssVars";
 import { buildVegaThemeOverride } from "../../theme/buildVegaThemeOverride";
@@ -20,6 +20,10 @@ interface MalloyVizHandle {
    setResult: (result: unknown) => void;
    render: (element: HTMLElement) => void;
    remove: () => void;
+   // Fires once the chart has painted (or immediately if it already has). We
+   // use it to swap a freshly-rendered chart in only when it's ready, so the
+   // previously-painted chart never blanks out mid-render.
+   onReady: (callback: () => void) => void;
 }
 
 declare global {
@@ -67,6 +71,13 @@ const createRenderer = async (
    return renderer.createViz() as MalloyVizHandle;
 };
 
+// Warm the renderer chunk as soon as this module loads so the first chart
+// paint doesn't have to wait on the dynamic import resolving (the async
+// import is what widened the clear-then-repaint gap into a visible flicker).
+if (typeof window !== "undefined") {
+   void import("@malloydata/render");
+}
+
 /**
  * Pull a per-chart Theme override out of a parsed Malloy result by reading
  * `# theme.*` annotations on the model and the query. Returns `undefined`
@@ -243,39 +254,59 @@ function RenderedResultInner({
 }: RenderedResultProps) {
    const ref = useRef<HTMLDivElement>(null);
    const hasMeasuredRef = useRef(false);
+   // The chart currently painted into the container, held across renders. A
+   // new render paints into a fresh offscreen stage and only swaps in (and
+   // disposes this one) once it's ready, so the container never blanks between
+   // charts. That up-front clear + cleanup dispose was the flicker.
+   const liveRef = useRef<{ viz: MalloyVizHandle; node: HTMLElement } | null>(
+      null,
+   );
+   // Bumped on every render-effect run and on unmount. A slow async render that
+   // resolves after a newer one has started (or after unmount) checks this and
+   // bails, so overlapping renders can't leave two charts or leak a viz.
+   const renderGenRef = useRef(0);
    const { theme: baseTheme, layers, mode } = usePublisherTheme();
 
+   // Dispose the last live viz on unmount only. Deliberately NOT done in the
+   // render effect's cleanup: a re-run must keep the old chart until the new
+   // one has painted, and the new render disposes it during the swap.
+   useEffect(() => {
+      return () => {
+         renderGenRef.current += 1;
+         liveRef.current?.viz.remove();
+         liveRef.current = null;
+      };
+   }, []);
+
    useLayoutEffect(() => {
       if (!ref.current || !result) return;
 
       injectRendererOverrides();
 
-      let isMounted = true;
-      // Track the active viz instance so the cleanup can dispose it even
-      // when unmount races with the async setup (see bug #3 from the code
-      // review: viz constructed but never `remove()`'d on rapid navigation).
-      let viz: MalloyVizHandle | undefined;
       const element = ref.current;
-
-      while (element.firstChild) {
-         element.removeChild(element.firstChild);
-      }
-
-      // Apply the shell theme's CSS variables immediately so the table
-      // chrome looks right during the async setup window. We re-apply once
-      // the per-chart override resolves below, so per-chart annotations
-      // affect both Vega and table styles.
-      applyTableCssVars(element, baseTheme);
-
-      hasMeasuredRef.current = false;
-
+      const myGen = (renderGenRef.current += 1);
+      let cancelled = false;
+      const isCurrent = () => !cancelled && myGen === renderGenRef.current;
+      // Created inside the async body; hoisted so cleanup can tear them down
+      // if this render is superseded before it swaps itself into `liveRef`.
+      let stage: HTMLDivElement | undefined;
+      let viz: MalloyVizHandle | undefined;
       let observer: MutationObserver | null = null;
       let measureTimeout: NodeJS.Timeout | null = null;
+      // Safety net so a render that never signals ready (an async renderer
+      // error that only reaches onError) can't leave a previous chart showing
+      // stale data forever; see the setTimeout below.
+      let readyFallback: ReturnType<typeof setTimeout> | null = null;
+
+      hasMeasuredRef.current = false;
 
-      const measureRenderedSize = () => {
-         if (hasMeasuredRef.current || !isMounted || !element.firstElementChild)
+      // Measure the rendered chart's natural height off `root` (the stage that
+      // wraps the renderer output) and report it up. Same grandchild/dashboard
+      // HACK as before, just anchored on the stage wrapper.
+      const measureRenderedSize = (root: HTMLElement) => {
+         if (hasMeasuredRef.current || cancelled || !root.firstElementChild)
             return;
-         const child = element.firstElementChild as HTMLElement;
+         const child = root.firstElementChild as HTMLElement;
          const grandchild = child.firstElementChild as HTMLElement;
          if (!grandchild) return;
          const greatgrandchild = grandchild.firstElementChild as HTMLElement;
@@ -315,52 +346,123 @@ function RenderedResultInner({
             ? resolveTheme([...layers, perChart], mode)
             : baseTheme;
 
-         // Per-chart annotation may have shifted table CSS vars; re-apply.
-         if (isMounted) applyTableCssVars(element, effectiveTheme);
+         if (!isCurrent()) return;
 
          try {
-            const created = await createRenderer(effectiveTheme, onDrill);
-            if (!isMounted) {
-               // Unmounted during the dynamic import / construction. Tear
-               // down the viz we just made; the effect's cleanup won't see
-               // it because `viz` was unset.
-               created.remove();
-               return;
+            viz = await createRenderer(effectiveTheme, onDrill);
+         } catch (error) {
+            console.error("Failed to create renderer:", error);
+            return;
+         }
+         if (!isCurrent()) {
+            // Superseded during the dynamic import / construction.
+            viz.remove();
+            viz = undefined;
+            return;
+         }
+
+         // Render into a fresh stage appended to the container. While a
+         // previous chart is still on screen, keep the stage laid out (so the
+         // fill chart actually measures a size and `onReady` fires) but hidden
+         // and overlaid; reveal it and drop the old chart only once painted.
+         const previous = liveRef.current;
+         stage = document.createElement("div");
+         stage.style.width = "100%";
+         stage.style.height = "100%";
+         // Theme the chart's table/dashboard chrome on the stage itself, not on
+         // the shared container: during a swap the outgoing chart is still a
+         // child of the container, so writing the new per-chart CSS vars there
+         // would repaint the old chart's chrome to the new theme before it is
+         // swapped out. Scoping the vars to this stage keeps each chart stable.
+         applyTableCssVars(stage, effectiveTheme);
+         if (previous) {
+            element.style.position = "relative";
+            stage.style.position = "absolute";
+            stage.style.inset = "0";
+            stage.style.visibility = "hidden";
+         }
+         element.appendChild(stage);
+
+         // Fallback measurement if `onReady` never fires: settle on DOM
+         // mutations, then measure once.
+         const stageNode = stage;
+         observer = new MutationObserver(() => {
+            if (measureTimeout) clearTimeout(measureTimeout);
+            measureTimeout = setTimeout(() => {
+               measureRenderedSize(stageNode);
+               observer?.disconnect();
+            }, 100);
+         });
+         observer.observe(stage, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+         });
+
+         const activeViz = viz;
+         let promoted = false;
+         const promote = () => {
+            if (promoted || !isCurrent()) return;
+            promoted = true;
+            if (readyFallback) {
+               clearTimeout(readyFallback);
+               readyFallback = null;
             }
-            viz = created;
-
-            observer = new MutationObserver(() => {
-               if (measureTimeout) clearTimeout(measureTimeout);
-               measureTimeout = setTimeout(() => {
-                  measureRenderedSize();
-                  observer?.disconnect();
-               }, 100);
-            });
-
-            observer.observe(element, {
-               childList: true,
-               subtree: true,
-               attributes: true,
-            });
+            // The new chart has painted; drop the outgoing one now.
+            if (previous) {
+               previous.viz.remove();
+               if (previous.node.parentNode === element) {
+                  element.removeChild(previous.node);
+               }
+            }
+            stageNode.style.position = "";
+            stageNode.style.inset = "";
+            stageNode.style.visibility = "";
+            element.style.position = "";
+            liveRef.current = { viz: activeViz, node: stageNode };
+            measureRenderedSize(stageNode);
+         };
 
+         try {
             // The renderer accepts a Malloy Result; we don't import that type
             // in the SDK to avoid pinning to the malloy core types here.
             viz.setResult(parsed);
-            viz.render(element);
+            viz.render(stage);
+            viz.onReady(promote);
+            // If onReady never fires (an async render error that only reaches
+            // the renderer's onError), force the swap after a bounded wait so
+            // the outcome becomes visible instead of the previous chart
+            // lingering with stale data indefinitely.
+            readyFallback = setTimeout(promote, 10000);
          } catch (error) {
             console.error("Error rendering visualization:", error);
             observer?.disconnect();
-            viz?.remove();
+            viz.remove();
             viz = undefined;
+            if (stageNode.parentNode === element) {
+               element.removeChild(stageNode);
+            }
          }
       })();
 
       return () => {
-         isMounted = false;
+         cancelled = true;
          observer?.disconnect();
          if (measureTimeout) clearTimeout(measureTimeout);
-         viz?.remove();
-         viz = undefined;
+         if (readyFallback) clearTimeout(readyFallback);
+         // If this render built a stage but never swapped it into `liveRef`
+         // (superseded, or unmounted mid-render), tear it down so it can't
+         // leak a viz or leave an orphan node behind.
+         if (stage && liveRef.current?.node !== stage) {
+            viz?.remove();
+            if (stage.parentNode === element) {
+               element.removeChild(stage);
+            }
+            // This render may have set the container position:relative for its
+            // overlay stage but never promoted; reset it so no stray relative
+            // lingers on the container.
+            element.style.position = "";
+         }
       };
    }, [result, onDrill, onSizeChange, baseTheme, layers, mode]);
 

package/src/components/RenderedResult/ResultContainer.tsx

@@ -1,7 +1,10 @@
 import { Warning } from "@mui/icons-material";
-import { Box, Button, Typography } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { Box, Button, IconButton, Tooltip, Typography } from "@mui/material";
 import { lazy, Suspense, useRef, useState } from "react";
+import { LogMessage } from "../../client";
 import { Loading } from "../Loading";
+import { summarizeRenderLogs } from "./renderLogs";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
@@ -12,6 +15,9 @@ interface ResultContainerProps {
    // this is to prevent performance issues with large results.
    // the default is 0, which means no warning will be shown.
    maxResultSize?: number;
+   // Render tag findings from the query response. Callers whose result did not
+   // come from a query response have none to pass.
+   renderLogs?: LogMessage[];
 }
 
 // ResultContainer is a component that renders a result, with a toggle button to expand/collapse the result.
@@ -22,10 +28,12 @@ export default function ResultContainer({
    result,
    maxHeight,
    maxResultSize = 0,
+   renderLogs,
 }: ResultContainerProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const [measuredHeight, setMeasuredHeight] = useState(maxHeight);
    const [userAcknowledged, setUserAcknowledged] = useState(false);
+   const renderLogSummary = summarizeRenderLogs(renderLogs);
 
    if (!result) {
       return null;
@@ -90,6 +98,37 @@ export default function ResultContainer({
                />
             </Suspense>
          )}
+         {renderLogSummary && (
+            // Overlaid rather than stacked, so the note cannot change the height
+            // the container just measured. The button is what makes the message
+            // reachable: an icon alone is aria-hidden and cannot take focus.
+            <Box sx={{ position: "absolute", top: 4, right: 4, zIndex: 1 }}>
+               <Tooltip
+                  title={renderLogSummary.title}
+                  slotProps={{ tooltip: { sx: { whiteSpace: "pre-line" } } }}
+               >
+                  <IconButton
+                     size="small"
+                     aria-label="Render tag warnings"
+                     sx={{
+                        backgroundColor: "rgba(255, 255, 255, 0.9)",
+                        "&:hover": {
+                           backgroundColor: "rgba(255, 255, 255, 1)",
+                        },
+                     }}
+                  >
+                     <InfoOutlinedIcon
+                        fontSize="small"
+                        color={
+                           renderLogSummary.severity === "error"
+                              ? "error"
+                              : "warning"
+                        }
+                     />
+                  </IconButton>
+               </Tooltip>
+            </Box>
+         )}
       </Box>
    );
 }