@malloy-publisher/sdk 0.0.37 → 0.0.39

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;

package/dist/RenderedResult-DkEsDzXb.js

@@ -1,51 +0,0 @@
-import { j as m } from "./vendor-C6w9JpPA.js";
-import { i as a } from "./index-DdtGkJIk.js";
-import { useRef as p, useEffect as f } from "react";
-function w({
-  result: r,
-  height: n,
-  isFillElement: i,
-  onSizeChange: s,
-  onDrill: d
-}) {
-  const e = p(null);
-  f(() => {
-    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]), f(() => {
-    if (!e.current) return;
-    const t = e.current, o = () => {
-      if (t) {
-        const u = t.offsetHeight;
-        u > 0 ? s && s(u) : i && t.firstChild && (t.firstChild.offsetHeight == 0 ? i(!0) : i(!1));
-      }
-    }, h = setTimeout(o, 100), c = new MutationObserver(o);
-    return c.observe(t, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0
-    }), () => {
-      clearTimeout(h), c.disconnect();
-    };
-  }, [s, r]);
-  const l = new a.MalloyRenderer({
-    onClick: d
-  });
-  return /* @__PURE__ */ m.jsx(
-    "div",
-    {
-      ref: e,
-      style: {
-        width: "100%",
-        height: n ? `${n}px` : "100%"
-      }
-    }
-  );
-}
-export {
-  w as default
-};