@malloy-publisher/sdk 0.0.94 → 0.0.95

package/dist/client/index.es46.js

@@ -1,8 +1,117 @@
-import { jsx as o } from "react/jsx-runtime";
-import t from "./index.es70.js";
-const v = t(/* @__PURE__ */ o("path", {
-  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}));
+import { jsx as c } from "react/jsx-runtime";
+import { Suspense as w, useRef as b, useState as v, useLayoutEffect as R, useEffect as C } from "react";
+const p = async (e) => {
+  if (typeof window > "u")
+    throw new Error("MalloyRenderer can only be used in browser environment");
+  const { MalloyRenderer: u } = await import("@malloydata/render");
+  return new u({
+    onClick: e
+  }).createViz();
+};
+function x({
+  result: e,
+  height: u,
+  isFillElement: s,
+  onSizeChange: a,
+  onDrill: h
+}) {
+  const d = b(null), [y, l] = v(!1);
+  return R(() => {
+    if (!d.current || !e) return;
+    let t = !0;
+    const r = d.current;
+    for (; r.firstChild; )
+      r.removeChild(r.firstChild);
+    return p(h).then((i) => {
+      if (!t) return;
+      const n = new MutationObserver((o) => {
+        for (const f of o)
+          if (f.type === "childList" && f.addedNodes.length > 0 && Array.from(f.addedNodes).some(
+            (g) => g.nodeType === Node.ELEMENT_NODE
+          )) {
+            n.disconnect(), setTimeout(() => {
+              t && l(!0);
+            }, 50);
+            break;
+          }
+      });
+      n.observe(r, {
+        childList: !0,
+        subtree: !0,
+        characterData: !0
+      });
+      try {
+        i.setResult(JSON.parse(e)), i.render(r);
+      } catch (o) {
+        console.error("Error rendering visualization:", o), n.disconnect(), t && l(!0);
+      }
+    }).catch((i) => {
+      console.error("Failed to create renderer:", i), t && l(!0);
+    }), () => {
+      t = !1;
+    };
+  }, [e, h]), C(() => {
+    if (!d.current || !y) return;
+    const t = d.current, r = () => {
+      if (t) {
+        const o = t.offsetHeight;
+        o > 0 ? a && a(o) : s && t.firstChild && (t.firstChild.offsetHeight == 0 ? s(!0) : s(!1));
+      }
+    }, i = setTimeout(r, 100);
+    let n = null;
+    return n = new MutationObserver(r), n.observe(t, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0
+    }), () => {
+      clearTimeout(i), n?.disconnect();
+    };
+  }, [a, e, s, y]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: d,
+      style: {
+        width: "100%",
+        height: u ? `${u}px` : "100%"
+      }
+    }
+  );
+}
+function N(e) {
+  return typeof window > "u" ? /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: e.height ? `${e.height}px` : "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#666"
+      },
+      children: "Loading..."
+    }
+  ) : /* @__PURE__ */ c(
+    w,
+    {
+      fallback: /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: e.height ? `${e.height}px` : "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#666"
+          },
+          children: "Loading visualization..."
+        }
+      ),
+      children: /* @__PURE__ */ c(x, { ...e })
+    }
+  );
+}
 export {
-  v as default
+  N as default
 };

package/dist/client/index.es47.js

@@ -1,341 +1,8 @@
-import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
-import g from "./index.es75.js";
-import ie from "./index.es73.js";
-import H from "./index.es76.js";
-import re from "./index.es43.js";
-import { Tooltip as n, IconButton as l, Box as x, Typography as s, Collapse as R, Stack as B, Dialog as ne, DialogTitle as le, DialogContent as se, DialogActions as de, Button as N } from "@mui/material";
-import ae from "./index.es77.js";
-import d, { useState as O, useEffect as ce } from "react";
-import "./index.es78.js";
-/* empty css           */
-import me from "markdown-to-jsx";
-import { highlight as ue } from "./index.es31.js";
-import { emptyQueryExplorerResult as he } from "./index.es4.js";
-import pe from "./index.es74.js";
-import { StyledCard as W } from "./index.es32.js";
-import { EditableMalloyCell as xe } from "./index.es80.js";
-function Ne({
-  cell: t,
-  expandCodeCell: A,
-  expandEmbedding: L,
-  hideEmbeddingIcons: M,
-  editingMalloy: i,
-  editingMarkdown: m,
-  sourceAndPaths: u,
-  onCellChange: C,
-  onClose: T,
-  onEdit: h,
-  onDelete: _,
-  addButtonCallback: S
-}) {
-  const [b, j] = O(t.value), [v, Q] = d.useState(A), [k, q] = d.useState(L), [V, F] = d.useState(), [J] = d.useState(), [a, G] = d.useState(
-    he()
-  ), [y, w] = d.useState(!1), [E, K] = d.useState(
-    t.sourceName ? u.findIndex(
-      (o) => o.sourceInfo.name === t.sourceName
-    ) : 0
-  );
-  ce(() => {
-    t.isMarkdown || ue(t.value, "malloy").then((o) => {
-      F(o);
-    });
-  }, [t]), d.useEffect(() => {
-    document.documentElement.setAttribute("data-color-mode", "light");
-  });
-  const [I, f] = O(!1), P = () => {
-    _(), f(!1);
-  }, U = u.length === 0, D = d.useCallback(() => {
-    const o = u[E], te = o?.modelPath || t.modelPath || "", oe = o?.sourceInfo.name || t.sourceName || "";
-    C({
-      ...t,
-      value: t.isMarkdown ? b : a.query,
-      result: a.malloyResult ? JSON.stringify(a.malloyResult) : void 0,
-      queryInfo: a.malloyQuery ? JSON.stringify(a.malloyQuery) : void 0,
-      sourceName: oe,
-      modelPath: te
-    });
-  }, [t, b, a, C, E, u]), z = /* @__PURE__ */ e(n, { title: "Delete Cell", children: /* @__PURE__ */ e(l, { size: "small", onClick: () => f(!0), children: /* @__PURE__ */ e(
-    "svg",
-    {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14zM10 11v6M14 11v6",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  ) }) }), X = /* @__PURE__ */ r(
-    ne,
-    {
-      open: I,
-      onClose: () => f(!1),
-      children: [
-        /* @__PURE__ */ e(le, { children: "Confirm Delete" }),
-        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(s, { children: "Are you sure you want to delete this cell?" }) }),
-        /* @__PURE__ */ r(de, { children: [
-          /* @__PURE__ */ e(N, { onClick: () => f(!1), children: "Cancel" }),
-          /* @__PURE__ */ e(N, { onClick: P, color: "error", children: "Delete" })
-        ] })
-      ]
-    }
-  ), p = () => {
-    D(), T();
-  }, Y = t.isMarkdown ? /* @__PURE__ */ r(c, { children: [
-    m ? /* @__PURE__ */ e(n, { title: "Save", children: /* @__PURE__ */ e(l, { size: "small", onClick: p, children: /* @__PURE__ */ e(g, {}) }) }) : /* @__PURE__ */ e(n, { title: "Edit", children: /* @__PURE__ */ e(l, { size: "small", onClick: h, children: /* @__PURE__ */ e(H, {}) }) }),
-    !m && z
-  ] }) : /* @__PURE__ */ r(c, { children: [
-    !i && /* @__PURE__ */ e(n, { title: v ? "Hide Code" : "View Code", children: /* @__PURE__ */ e(
-      l,
-      {
-        size: "small",
-        onClick: () => {
-          Q(!v);
-        },
-        children: /* @__PURE__ */ e(ie, {})
-      }
-    ) }),
-    !M && !i && t.result && /* @__PURE__ */ e(
-      n,
-      {
-        title: k ? "Hide Embedding" : "View Embedding",
-        children: /* @__PURE__ */ e(
-          l,
-          {
-            size: "small",
-            onClick: () => {
-              q(!k);
-            },
-            children: /* @__PURE__ */ e(re, {})
-          }
-        )
-      }
-    ),
-    i && /* @__PURE__ */ e(n, { title: "Save", children: /* @__PURE__ */ e(l, { size: "small", onClick: p, children: /* @__PURE__ */ e(g, {}) }) }),
-    !i && /* @__PURE__ */ e(n, { title: "Edit", children: /* @__PURE__ */ e(l, { size: "small", onClick: h, children: /* @__PURE__ */ e(H, {}) }) }),
-    !i && z
-  ] }), Z = i || m, $ = m ? /* @__PURE__ */ e(n, { title: "Save", children: /* @__PURE__ */ e(l, { size: "small", onClick: p, children: /* @__PURE__ */ e(g, {}) }) }) : i ? /* @__PURE__ */ e(n, { title: "Save", children: /* @__PURE__ */ e(l, { size: "small", onClick: p, children: /* @__PURE__ */ e(g, {}) }) }) : null, ee = y && /* @__PURE__ */ e(
-    x,
-    {
-      sx: {
-        position: "absolute",
-        top: "4px",
-        right: "4px",
-        // transform: "translateX(-50%)",
-        display: "flex",
-        gap: "8px",
-        backgroundColor: "background.paper",
-        border: "1px solid",
-        borderColor: "divider",
-        borderRadius: "8px",
-        padding: "2px 4px",
-        boxShadow: 1,
-        zIndex: 10
-      },
-      children: !Z && /* @__PURE__ */ r(c, { children: [
-        S(!0),
-        S(!1),
-        Y
-      ] }) || $
-    }
-  );
-  return /* @__PURE__ */ r(
-    W,
-    {
-      sx: {
-        position: "relative",
-        marginTop: "5px",
-        marginBottom: "5px",
-        borderWidth: "1.5px",
-        backgroundColor: "#fff",
-        minHeight: "50px"
-      },
-      onMouseEnter: () => w(!0),
-      onMouseLeave: () => {
-        w(!1);
-      },
-      children: [
-        ee,
-        t.isMarkdown ? /* @__PURE__ */ e(c, { children: m ? /* @__PURE__ */ e(
-          ae,
-          {
-            value: b,
-            preview: "edit",
-            autoFocus: !0,
-            onChange: (o) => {
-              j(o), C({ ...t, value: o });
-            },
-            onBlur: () => {
-              D(), y || p();
-            }
-          }
-        ) : /* @__PURE__ */ e(
-          x,
-          {
-            sx: {
-              px: 0.5,
-              pt: 0,
-              mt: 0,
-              "& h1, & h2, & h3, & h4, & h5, & h6": {
-                mt: 0.5,
-                mb: 0.5
-              },
-              "& p": { mt: 0.5, mb: 0.5 },
-              "& ul, & ol": { mt: 0.5, mb: 0.5 },
-              "& li": { mt: 0, mb: 0 },
-              "& pre, & code": { mt: 0.5, mb: 0.5 },
-              "& blockquote": { mt: 0.5, mb: 0.5 }
-            },
-            children: t.value ? /* @__PURE__ */ e(x, { onClick: h, sx: { cursor: "pointer" }, children: /* @__PURE__ */ e(me, { children: t.value }) }) : /* @__PURE__ */ r(x, { onClick: h, sx: { cursor: "pointer" }, children: [
-              /* @__PURE__ */ e(
-                s,
-                {
-                  sx: {
-                    p: 2,
-                    textAlign: "center",
-                    variant: "subtitle2",
-                    fontWeight: "medium"
-                  },
-                  children: "Markdown is empty"
-                }
-              ),
-              /* @__PURE__ */ e(
-                s,
-                {
-                  sx: {
-                    mb: 2,
-                    textAlign: "center",
-                    variant: "body2"
-                  },
-                  children: "Click to edit."
-                }
-              )
-            ] })
-          }
-        ) }) : /* @__PURE__ */ r(c, { children: [
-          /* @__PURE__ */ e(R, { in: k, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ e(
-            B,
-            {
-              sx: {
-                p: "10px",
-                borderRadius: 0,
-                flexDirection: "row",
-                justifyContent: "space-between"
-              },
-              children: /* @__PURE__ */ e(
-                s,
-                {
-                  component: "div",
-                  sx: {
-                    fontSize: "12px",
-                    "& .line": { textWrap: "wrap" }
-                  },
-                  dangerouslySetInnerHTML: {
-                    __html: J
-                  }
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ e(R, { in: v, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ e(
-            B,
-            {
-              sx: {
-                p: "10px",
-                borderRadius: 0,
-                flexDirection: "row",
-                justifyContent: "space-between"
-              },
-              children: /* @__PURE__ */ e(
-                s,
-                {
-                  component: "div",
-                  className: "content",
-                  sx: {
-                    fontSize: "12px",
-                    "& .line": { textWrap: "wrap" }
-                  },
-                  dangerouslySetInnerHTML: {
-                    __html: V
-                  }
-                }
-              )
-            }
-          ) }),
-          i && (U ? /* @__PURE__ */ r(c, { children: [
-            /* @__PURE__ */ e(
-              s,
-              {
-                sx: {
-                  p: 2,
-                  textAlign: "center",
-                  variant: "subtitle2",
-                  fontWeight: "medium"
-                },
-                children: "No Model Imports"
-              }
-            ),
-            /* @__PURE__ */ e(
-              s,
-              {
-                sx: { mb: 2, textAlign: "center", variant: "body2" },
-                children: "Please add a model import above."
-              }
-            )
-          ] }) : /* @__PURE__ */ e(
-            xe,
-            {
-              sourceAndPaths: u,
-              onQueryChange: (o) => {
-                G(o);
-              },
-              cell: t,
-              onSourceChange: K
-            }
-          )),
-          !i && t.result && /* @__PURE__ */ e(W, { variant: "outlined", sx: { borderRadius: 0 }, children: /* @__PURE__ */ e(
-            pe,
-            {
-              result: t.result,
-              minHeight: 300,
-              maxHeight: 800
-            }
-          ) }),
-          !i && !t.result && /* @__PURE__ */ r(x, { onClick: h, sx: { cursor: "pointer" }, children: [
-            /* @__PURE__ */ e(
-              s,
-              {
-                sx: {
-                  p: 2,
-                  textAlign: "center",
-                  variant: "subtitle2",
-                  fontWeight: "medium"
-                },
-                children: "Explore is empty"
-              }
-            ),
-            /* @__PURE__ */ e(
-              s,
-              {
-                sx: { mb: 2, textAlign: "center", variant: "body2" },
-                children: "Click to edit."
-              }
-            )
-          ] })
-        ] }),
-        I && X
-      ]
-    }
-  );
-}
+import { jsx as o } from "react/jsx-runtime";
+import t from "./index.es70.js";
+const v = t(/* @__PURE__ */ o("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+}));
 export {
-  Ne as MutableCell
+  v as default
 };