@malloy-publisher/sdk 0.0.37 → 0.0.38

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.37",
+   "version": "0.0.38",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",

package/src/components/ApiErrorDisplay.tsx

@@ -4,7 +4,7 @@ import React from "react";
 export interface ApiError extends Error {
    status?: number;
    data?: {
-      code: string;
+      code: number;
       message: string;
    };
 }

package/src/components/Home/Home.tsx

@@ -1,10 +1,9 @@
 import { Grid, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ProjectsApi, Configuration } from "../../client";
-import axios from "axios";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -63,6 +62,6 @@ export default function Home({ server, navigate }: HomeProps) {
          );
       }
    } else {
-      return <Typography variant="h6">Loading projects...</Typography>;
+      return <Loading text="Loading projects..." />;
    }
 }

package/src/components/Loading.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+export interface LoadingProps {
+   /**
+    * The text to display below the spinner
+    */
+   text?: string;
+   /**
+    * The size of the CircularProgress component
+    * @default 40
+    */
+   size?: number | string;
+   /**
+    * The color of the CircularProgress component
+    * @default "primary"
+    */
+   color?:
+      | "primary"
+      | "secondary"
+      | "error"
+      | "info"
+      | "success"
+      | "warning"
+      | "inherit";
+   /**
+    * The thickness of the circular progress
+    * @default 3.6
+    */
+   thickness?: number;
+   /**
+    * Whether to center the component
+    * @default true
+    */
+   centered?: boolean;
+   /**
+    * Custom spacing between spinner and text
+    * @default 2
+    */
+   spacing?: number;
+   /**
+    * Typography variant for the text
+    * @default "body1"
+    */
+   textVariant?:
+      | "h1"
+      | "h2"
+      | "h3"
+      | "h4"
+      | "h5"
+      | "h6"
+      | "subtitle1"
+      | "subtitle2"
+      | "body1"
+      | "body2"
+      | "caption"
+      | "overline";
+}
+
+export function Loading({
+   text,
+   size = 40,
+   color = "primary",
+   thickness = 3.6,
+   centered = true,
+   spacing = 2,
+   textVariant = "body1",
+}: LoadingProps) {
+   const content = (
+      <Box
+         sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: spacing,
+         }}
+      >
+         <CircularProgress size={size} color={color} thickness={thickness} />
+         {text && (
+            <Typography variant={textVariant} color="text.secondary">
+               {text}
+            </Typography>
+         )}
+      </Box>
+   );
+
+   if (centered) {
+      return (
+         <Box
+            sx={{
+               display: "flex",
+               justifyContent: "center",
+               alignItems: "center",
+               minHeight: "200px",
+               width: "100%",
+            }}
+         >
+            {content}
+         </Box>
+      );
+   }
+
+   return content;
+}

package/src/components/Model/Model.tsx

@@ -23,7 +23,7 @@ import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 import "@malloydata/malloy-explorer/styles.css";
 import { usePackage } from "../Package/PackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
-import NamedQueries from "./NamedQueries";
+import { Loading } from "../Loading";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -118,11 +118,7 @@ export default function Model({
    );
 
    if (isLoading) {
-      return (
-         <Typography sx={{ p: "20px", m: "auto" }}>
-            Fetching Model...
-         </Typography>
-      );
+      return <Loading text="Fetching Model..." />;
    }
 
    if (isError) {

package/src/components/Notebook/Notebook.tsx

@@ -18,6 +18,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
 import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 import { AxiosError } from "axios";
+import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -191,9 +192,7 @@ export default function Notebook({
          <StyledCardMedia>
             <Stack spacing={1} component="section">
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebook...
-                  </Typography>
+                  <Loading text="Fetching Notebook..." />
                )}
                {isSuccess &&
                   notebook.notebookCells?.map((cell, index) => (
@@ -214,7 +213,14 @@ export default function Notebook({
                         key={index}
                      />
                   ))}
-               {isError && (
+               {isError && error.data?.code === 404 && (
+                  <Typography>
+                     <code>{`${projectName} > ${packageName} > ${notebookPath}`}</code>{" "}
+                     not found.
+                  </Typography>
+               )}
+
+               {isError && error.data?.code !== 404 && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > ${notebookPath}`}

package/src/components/Package/Databases.tsx

@@ -18,6 +18,7 @@ import { Configuration, Database, DatabasesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const databasesApi = new DatabasesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -83,9 +84,7 @@ export default function Databases() {
                   }}
                >
                   {!isSuccess && !isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        Fetching Databases...
-                     </Typography>
+                     <Loading text="Fetching Databases..." />
                   )}
                   {isError && (
                      <ApiErrorDisplay

package/src/components/Package/Models.tsx

@@ -6,6 +6,7 @@ import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 axios.defaults.baseURL = "http://localhost:4000";
 const modelsApi = new ModelsApi(new Configuration());
@@ -52,18 +53,14 @@ export default function Models({ navigate }: ModelsProps) {
                   overflowY: "auto",
                }}
             >
-               {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Models...
-                  </Typography>
-               )}
+               {!isSuccess && !isError && <Loading text="Fetching Models..." />}
                {isError && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > Models`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -72,6 +69,9 @@ export default function Models({ navigate }: ModelsProps) {
                      defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography>No models found.</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Notebooks.tsx

@@ -5,6 +5,7 @@ import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -19,7 +20,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
 
-   const { data, isLoading, isError, error, isSuccess } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["notebooks", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -51,9 +52,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                }}
             >
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebooks...
-                  </Typography>
+                  <Loading text="Fetching Notebooks..." />
                )}
                {isError && (
                   <ApiErrorDisplay
@@ -61,7 +60,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      context={`${projectName} > ${packageName} > Notebooks`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -70,6 +69,9 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      navigate={navigate}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography>No notebooks found.</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Schedules.tsx

@@ -15,6 +15,7 @@ import { Configuration, SchedulesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const schedulesApi = new SchedulesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -41,11 +42,7 @@ export default function Schedules() {
    );
 
    if (isLoading) {
-      return (
-         <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-            Fetching Schedules...
-         </Typography>
-      );
+      return <Loading text="Fetching Schedules..." />;
    }
 
    if (isError) {

package/src/components/Project/About.tsx

@@ -5,6 +5,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -31,11 +32,7 @@ export default function About() {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               Fetching About...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching About..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/Project/ConnectionExplorer.tsx

@@ -26,6 +26,7 @@ import { ConnectionsApi } from "../../client/api";
 import { Configuration } from "../../client/configuration";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -92,11 +93,7 @@ export default function ConnectionExplorer({
                </Box>
                <Divider />
                <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-                  {isLoading && (
-                     <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                        Fetching Table Paths...
-                     </Typography>
-                  )}
+                  {isLoading && <Loading text="Fetching Table Paths..." />}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}
@@ -242,11 +239,7 @@ function TableViewer({
             </IconButton>
          </DialogTitle>
          <DialogContent>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Table Details...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Table Details..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}
@@ -326,11 +319,7 @@ function TablesInSchema({
          </Typography>
          <Divider />
          <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Tables...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Tables..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}

package/src/components/Project/Packages.tsx

@@ -4,6 +4,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -34,11 +35,7 @@ export default function Packages({ navigate }: PackagesProps) {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Packages...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/QueryResult/QueryResult.tsx

@@ -1,14 +1,12 @@
 import { Suspense, lazy } from "react";
 import { Configuration, QueryresultsApi } from "../../client";
-import axios from "axios";
-import { Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { usePackage } from "../Package/PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
-axios.defaults.baseURL = "http://localhost:4000";
 const queryResultsApi = new QueryresultsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -67,9 +65,7 @@ export default function QueryResult({
    return (
       <>
          {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Query Results...
-            </Typography>
+            <Loading text="Fetching Query Results..." />
          )}
          {isSuccess && (
             <Suspense fallback={<div>Loading...</div>}>

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import type { MalloyRenderProps } from "@malloydata/render";
 import { MalloyRenderer } from "@malloydata/render";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState, useLayoutEffect } from "react";
 
 type MalloyRenderElement = HTMLElement & MalloyRenderProps;
 
@@ -31,6 +31,13 @@ interface RenderedResultProps {
 // We only know what kind of element we're dealing with after the viz is rendered.
 // So we use a callback to notify the parent that we're in a fill element.
 // The parent can then set the height for the element, otherwise it will have size 0.
+//
+// In order to make this work when contained in a "Suspend" component, we need to
+// make sure that the rendering process is started after the DOM element is available.
+// We do this by using a useLayoutEffect to start the rendering process.
+// We also need to make sure that the rendering process is started before the
+// Suspense component is rendered.
+// We do this by using a useEffect to start the rendering process.
 export default function RenderedResult({
    result,
    height,
@@ -39,22 +46,104 @@ export default function RenderedResult({
    onDrill,
 }: RenderedResultProps) {
    const ref = useRef<HTMLDivElement>(null);
+   const [isRendered, setIsRendered] = useState(false);
+   const [renderingStarted, setRenderingStarted] = useState(false);
+   const [wasMeasured, setWasMeasured] = useState(false);
+   // Each component instance manages its own promise and resolver
+   const renderingPromiseRef = useRef<Promise<void> | null>(null);
+   const renderingResolverRef = useRef<(() => void) | null>(null);
 
-   useEffect(() => {
-      if (ref.current) {
+   // Start rendering process after DOM element is available
+   useLayoutEffect(() => {
+      if (ref.current && result && !renderingStarted) {
+         setRenderingStarted(true);
+
+         // Create the promise now that we're ready to start rendering
+         if (!renderingPromiseRef.current) {
+            renderingPromiseRef.current = new Promise<void>((resolve) => {
+               renderingResolverRef.current = resolve;
+            });
+         }
+
+         const renderer = new MalloyRenderer({
+            onClick: onDrill,
+         });
          const viz = renderer.createViz();
+
          // Remove all content from ref.current before rendering new viz
          while (ref.current.firstChild) {
             ref.current.removeChild(ref.current.firstChild);
          }
-         viz.setResult(JSON.parse(result));
-         viz.render(ref.current);
+
+         // Set up a mutation observer to detect when content is added
+         const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+               if (
+                  mutation.type === "childList" &&
+                  mutation.addedNodes.length > 0
+               ) {
+                  // Check if actual content (not just empty elements) was added
+                  const hasContent = Array.from(mutation.addedNodes).some(
+                     (node) => {
+                        return node.nodeType === Node.ELEMENT_NODE;
+                     },
+                  );
+                  if (hasContent) {
+                     // Content detected, mark as rendered
+                     observer.disconnect();
+                     setTimeout(() => {
+                        setIsRendered(true);
+                        if (renderingResolverRef.current) {
+                           renderingResolverRef.current();
+                           renderingResolverRef.current = null;
+                           renderingPromiseRef.current = null;
+                        }
+                     }, 50); // Small delay to ensure content is fully rendered
+                     break;
+                  }
+               }
+            }
+         });
+
+         if (ref.current) {
+            observer.observe(ref.current, {
+               childList: true,
+               subtree: true,
+               characterData: true,
+            });
+
+            try {
+               viz.setResult(JSON.parse(result));
+               viz.render(ref.current);
+            } catch (error) {
+               console.error("Error rendering visualization:", error);
+               observer.disconnect();
+               setIsRendered(true);
+               if (renderingResolverRef.current) {
+                  renderingResolverRef.current();
+                  renderingResolverRef.current = null;
+                  renderingPromiseRef.current = null;
+               }
+            }
+         }
       }
-   }, [result, ref]);
+   }, [result, onDrill, renderingStarted]);
 
+   // Reset rendering state when result changes
+   useEffect(() => {
+      setIsRendered(false);
+      setRenderingStarted(false);
+      renderingPromiseRef.current = null;
+      renderingResolverRef.current = null;
+   }, [result]);
+
+   // If rendering has started but not completed, throw the promise to trigger Suspense
+   if (renderingStarted && !isRendered && renderingPromiseRef.current) {
+      throw renderingPromiseRef.current;
+   }
    // Set up size measurement using scrollHeight instead of ResizeObserver
    useEffect(() => {
-      if (!ref.current) return;
+      if (!ref.current || !isRendered) return;
       const element = ref.current;
 
       // Function to measure and report size
@@ -81,24 +170,24 @@ export default function RenderedResult({
       // Initial measurement after a brief delay to let content render
       const timeoutId = setTimeout(measureSize, 100);
 
+      let observer: MutationObserver | null = null;
       // Also measure when the malloy result changes
-      const observer = new MutationObserver(measureSize);
-      observer.observe(element, {
-         childList: true,
-         subtree: true,
-         attributes: true,
-      });
+      if (!wasMeasured) {
+         observer = new MutationObserver(measureSize);
+         observer.observe(element, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+         });
+      }
 
       // Cleanup
       return () => {
          clearTimeout(timeoutId);
-         observer.disconnect();
+         observer?.disconnect();
       };
-   }, [onSizeChange, result]);
+   }, [onSizeChange, result, isFillElement, isRendered]);
 
-   const renderer = new MalloyRenderer({
-      onClick: onDrill,
-   });
    return (
       <div
          ref={ref}

package/src/components/RenderedResult/ResultContainer.tsx

@@ -8,6 +8,7 @@ import {
    useRef,
    useState,
 } from "react";
+import { Loading } from "../Loading";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
@@ -78,6 +79,7 @@ export default function ResultContainer({
    if (!result) {
       return null;
    }
+   const loading = <Loading text="Loading..." centered={false} size={32} />;
    const renderedHeight = isFillElement
       ? isExpanded
          ? maxHeight - 40
@@ -117,7 +119,7 @@ export default function ResultContainer({
                }}
             >
                {(result && (
-                  <Suspense fallback={<div>Loading result...</div>}>
+                  <Suspense fallback={loading}>
                      <RenderedResult
                         result={result}
                         height={renderedHeight}
@@ -127,7 +129,8 @@ export default function ResultContainer({
                         onSizeChange={handleSizeChange}
                      />
                   </Suspense>
-               )) || <div> Loading...</div>}
+               )) ||
+                  loading}
             </Box>
 
             {/* Toggle button - only show if content exceeds container height */}

package/src/components/index.ts

@@ -5,4 +5,5 @@ export * from "./Package";
 export * from "./Project";
 export * from "./QueryResult";
 export * from "./Home";
+export * from "./Loading";
 export { useRouterClickHandler } from "./click_helper";

package/dist/RenderedResult-ChKXzRBq.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./vendor-DAoHVNwq.cjs"),m=require("./index-7mmEVMId.cjs"),n=require("react");function v({result:r,height:c,isFillElement:i,onSizeChange:s,onDrill:f}){const e=n.useRef(null);n.useEffect(()=>{if(e.current){const t=l.createViz();for(;e.current.firstChild;)e.current.removeChild(e.current.firstChild);t.setResult(JSON.parse(r)),t.render(e.current)}},[r,e]),n.useEffect(()=>{if(!e.current)return;const t=e.current,u=()=>{if(t){const d=t.offsetHeight;d>0?s&&s(d):i&&t.firstChild&&(t.firstChild.offsetHeight==0?i(!0):i(!1))}},h=setTimeout(u,100),o=new MutationObserver(u);return o.observe(t,{childList:!0,subtree:!0,attributes:!0}),()=>{clearTimeout(h),o.disconnect()}},[s,r]);const l=new m.index_umdExports.MalloyRenderer({onClick:f});return a.jsxRuntimeExports.jsx("div",{ref:e,style:{width:"100%",height:c?`${c}px`:"100%"}})}exports.default=v;