@malloydata/malloy-explorer 0.0.285-dev250530165648 → 0.0.285-dev250611150446

package/dist/cjs/index.cjs

@@ -20,7 +20,7 @@ const React = require("react");
 const QB = require("@malloydata/malloy-query-builder");
 const malloyTag = require("@malloydata/malloy-tag");
 const malloyFilter = require("@malloydata/malloy-filter");
-require("@malloydata/render/webcomponent");
+const render = require("@malloydata/render");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -3799,6 +3799,7 @@ const SvgRadioChecked = (props2) => /* @__PURE__ */ React__namespace.createEleme
 const SvgRadioUnchecked = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { height: 16, viewBox: "0 0 16 16", width: 16, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 8, cy: 8, r: 8, fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("circle", { cx: 8, cy: 8, r: 7, fill: "#FFFFFF" }));
 const SvgWarning = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" }));
 const SvgCheckCircle = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
+const SvgGear = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { fill: "none", height: 15, viewBox: "0 0 15 15", width: 15, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", { clipRule: "evenodd", fill: "#151515", fillRule: "evenodd" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m10 7.50001c0 1.38072-1.11928 2.49999-2.49999 2.49999s-2.5-1.11927-2.5-2.49999c0-1.38071 1.11929-2.5 2.5-2.5s2.49999 1.11929 2.49999 2.5zm-.99999 0c0 .82843-.67157 1.5-1.5 1.5-.82842 0-1.5-.67157-1.5-1.5 0-.82842.67158-1.5 1.5-1.5.82843 0 1.5.67158 1.5 1.5z" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "m8.92908 3.05724c-.34403-1.52302-2.5141-1.52302-2.85813 0-.07078.31333-.43034.46227-.70195.29076-1.3202-.83367-2.85467.7008-2.021 2.021.17151.27161.02257.63117-.29076.70195-1.52302.34403-1.52302 2.5141 0 2.85813.31333.07077.46227.43034.29076.70195-.83367 1.32017.7008 2.85467 2.021 2.02097.27161-.1715.63117-.0225.70195.2908.34403 1.523 2.5141 1.523 2.85813 0 .07077-.3133.43034-.4623.70195-.2908 1.32017.8337 2.85467-.7008 2.02097-2.02097-.1715-.27161-.0225-.63118.2908-.70195 1.523-.34403 1.523-2.5141 0-2.85813-.3133-.07078-.4623-.43034-.2908-.70195.8337-1.3202-.7008-2.85467-2.02097-2.021-.27161.17151-.63118.02257-.70195-.29076zm-1.8827.22034c.1092-.48347.79806-.48347.90727 0 .22296.98707 1.35568 1.45625 2.21135.91595.419-.26464.9061.22246.6415.64154-.5403.85562-.0711 1.98834.916 2.21131.4834.1092.4834.79806 0 .90727-.9871.22296-1.4563 1.35568-.916 2.21135.2646.419-.2225.9061-.6415.6415-.85567-.5403-1.98839-.0711-2.21135.916-.10921.4834-.79807.4834-.90727 0-.22297-.9871-1.35569-1.4563-2.21131-.916-.41908.2646-.90618-.2225-.64154-.6415.5403-.85567.07112-1.98839-.91595-2.21135-.48347-.10921-.48347-.79807 0-.90727.98707-.22297 1.45625-1.35569.91595-2.21131-.26464-.41908.22246-.90618.64154-.64154.85562.5403 1.98834.07112 2.21131-.91595z" })));
 const SvgInfo = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
 const SvgError = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" }));
 const SvgRefresh = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", { fill: "none", stroke: "currentColor" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m17.08 11.15c.01.16.02.32.02.49 0 3.89-3.16 7.05-7.05 7.05-3.89-.01-7.05-3.16-7.05-7.06 0-3.89 3.16-7.05 7.05-7.05.85 0 1.66.15 2.41.42", strokeWidth: 1.1 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "m9.9 2 2.89 2.89-3 3.01" })));
@@ -3839,6 +3840,7 @@ const ICON_MAP = {
   radioUnchecked: SvgRadioUnchecked,
   warning: SvgWarning,
   check_circle: SvgCheckCircle,
+  gear: SvgGear,
   info: SvgInfo,
   error: SvgError,
   refresh: SvgRefresh,
@@ -3873,6 +3875,7 @@ const ICON_MAP = {
   one_to_one: SvgTypeIconOneToOne,
   // Visualizations
   viz_bar_chart: SvgVizBarChart,
+  viz_bar: SvgVizBarChart,
   viz_boolean: SvgVizBoolean,
   viz_bytes: SvgVizNumber,
   viz_cartesian_chart: SvgVizLine,
@@ -3882,6 +3885,7 @@ const ICON_MAP = {
   viz_image: SvgVizImage,
   viz_json: SvgVizJson,
   viz_line_chart: SvgVizLine,
+  viz_line: SvgVizLine,
   viz_link: SvgVizLink,
   viz_list: SvgVizList,
   viz_list_detail: SvgVizListDetail,
@@ -26166,7 +26170,9 @@ function LiteralValue({
       });
   }
 }
-const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map", "sparkline"];
+const RENDERER_PREFIX = "# ";
+const VIZ_RENDERERS = ["table", "bar", "dashboard", "json", "line", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map"];
+const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map"];
 const ATOMIC_RENDERERS = ["number", "boolean", "currency", "image", "url", "percent", "text", "time"];
 const RENDERERS = [...QUERY_RENDERERS, ...ATOMIC_RENDERERS];
 function tagToRenderer(tag) {
@@ -26181,6 +26187,119 @@ function tagToRenderer(tag) {
   }
   return null;
 }
+function legacyToViz(name) {
+  switch (name) {
+    case "bar_chart":
+      return "bar";
+    case "line_chart":
+      return "line";
+    default:
+      return name;
+  }
+}
+const VISUALIZATION_OPTIONS = {
+  table: null,
+  bar: [{
+    name: "title",
+    label: "Title",
+    type: "string",
+    default: ""
+  }, {
+    name: "sub_title",
+    label: "Subtitle",
+    type: "string",
+    default: ""
+  }, {
+    name: "stack",
+    label: "Stack",
+    type: "boolean",
+    default: false
+  }, {
+    name: "size",
+    label: "Size",
+    type: "select",
+    default: "fill",
+    options: [{
+      label: "Fill",
+      value: "fill"
+    }, {
+      label: "Sparkline",
+      value: "spark"
+    }, {
+      label: "X-Small",
+      value: "xs"
+    }, {
+      label: "Small",
+      value: "sm"
+    }, {
+      label: "Medium",
+      value: "md"
+    }, {
+      label: "Large",
+      value: "lg"
+    }, {
+      label: "X-Large",
+      value: "xl"
+    }, {
+      label: "XX-Large",
+      value: "2xl"
+    }]
+  }],
+  dashboard: null,
+  json: null,
+  line: [{
+    name: "title",
+    label: "Title",
+    type: "string",
+    default: ""
+  }, {
+    name: "sub_title",
+    label: "Subtitle",
+    type: "string",
+    default: ""
+  }, {
+    name: "zero_baseline",
+    label: "Zero Baseline",
+    type: "boolean",
+    default: false
+  }, {
+    name: "size",
+    label: "Size",
+    type: "select",
+    default: "md",
+    options: [{
+      label: "Fill",
+      value: "fill"
+    }, {
+      label: "Sparkline",
+      value: "spark"
+    }, {
+      label: "X-Small",
+      value: "xs"
+    }, {
+      label: "Small",
+      value: "sm"
+    }, {
+      label: "Medium",
+      value: "md"
+    }, {
+      label: "Large",
+      value: "lg"
+    }, {
+      label: "X-Large",
+      value: "xl"
+    }, {
+      label: "XX-Large",
+      value: "2xl"
+    }]
+  }],
+  list: null,
+  list_detail: null,
+  point_map: null,
+  scatter_chart: null,
+  segment_map: null,
+  shape_map: null
+};
 function atomicTypeToIcon(type) {
   return atomicTypeMap[type];
 }
@@ -30279,21 +30398,260 @@ const styles$r = {
     $$css: true
   }
 };
+function RendererPopover({
+  rootQuery,
+  viz,
+  options,
+  view,
+  customStyle
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root2$2, {
+    onOpenChange: (open2) => setOpen(open2),
+    open,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Trigger$2, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Token, {
+        icon: "gear",
+        customStyle: {
+          ...customStyle,
+          ...dialogStyles$1.trigger
+        }
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx(Portal$2, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Content2$2, {
+        align: "end",
+        children: /* @__PURE__ */ jsxRuntime.jsx(RendererEditor, {
+          rootQuery,
+          view,
+          viz,
+          options,
+          setOpen
+        })
+      })
+    })]
+  });
+}
+function RendererEditor({
+  rootQuery,
+  view,
+  viz,
+  options,
+  setOpen
+}) {
+  const {
+    setQuery
+  } = React.useContext(QueryEditorContext);
+  const [current, setCurrent] = React.useState();
+  React.useEffect(() => {
+    const current2 = {};
+    const currentTag = view.getTag(RENDERER_PREFIX);
+    for (const option2 of options) {
+      current2[option2.name] = currentTag.text("viz", option2.name) ?? option2.default.toString();
+    }
+    setCurrent(current2);
+  }, [options, view, viz]);
+  if (!current) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ..._stylex.props(dialogStyles$1.content, fontStyles.body),
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ...{
+        className: "mlyqyf9gi mly78zum5 mlydt5ytf mly167g77z"
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        ...{
+          className: "mlyrvj5dj mly17bnpya mly167g77z"
+        },
+        children: options.map((option2) => option2.type === "boolean" ? /* @__PURE__ */ jsxRuntime.jsx(BooleanEditor, {
+          option: option2,
+          current,
+          setCurrent
+        }, option2.name) : option2.type === "string" ? /* @__PURE__ */ jsxRuntime.jsx(StringEditor$1, {
+          option: option2,
+          current,
+          setCurrent
+        }, option2.name) : (
+          // option.type === 'select
+          /* @__PURE__ */ jsxRuntime.jsx(SelectEditor, {
+            option: option2,
+            current,
+            setCurrent
+          }, option2.name)
+        ))
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        ...{
+          className: "mly78zum5 mly167g77z"
+        },
+        children: [/* @__PURE__ */ jsxRuntime.jsx(Button, {
+          label: "Cancel",
+          onClick: () => {
+            setOpen(false);
+          },
+          customStyle: dialogStyles$1.editorCell
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button, {
+          variant: "primary",
+          label: "Apply",
+          onClick: () => {
+            if (!view.getTag(RENDERER_PREFIX).has("viz", viz)) {
+              view.setTagProperty(["viz"], viz, RENDERER_PREFIX);
+            }
+            for (const option2 of options) {
+              if (current[option2.name] !== option2.default.toString()) {
+                view.setTagProperty(["viz", option2.name], current[option2.name], RENDERER_PREFIX);
+              } else {
+                view.removeTagProperty(["viz", option2.name], RENDERER_PREFIX);
+              }
+            }
+            setQuery == null ? void 0 : setQuery(rootQuery.build());
+            setOpen(false);
+          },
+          customStyle: dialogStyles$1.editorCell
+        })]
+      })]
+    })
+  });
+}
+function BooleanEditor({
+  current,
+  option: option2,
+  setCurrent
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ React.createElement("div", {
+      ...{
+        className: "mly78zum5 mly1lvf691 mly117nqv4"
+      },
+      key: option2.name
+    }, /* @__PURE__ */ jsxRuntime.jsx("input", {
+      type: "checkbox",
+      checked: current[option2.name] === "true",
+      onChange: ({
+        target: {
+          checked
+        }
+      }) => {
+        setCurrent({
+          ...current,
+          [option2.name]: checked.toString()
+        });
+      }
+    })), /* @__PURE__ */ jsxRuntime.jsx("label", {
+      title: option2.description,
+      children: option2.label
+    }, `${option2.name}-label`)]
+  });
+}
+function StringEditor$1({
+  current,
+  option: option2,
+  setCurrent
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ React.createElement("div", {
+      ...{
+        className: "mly78zum5 mly1lvf691 mly117nqv4"
+      },
+      key: `${option2.name}-label`
+    }, /* @__PURE__ */ jsxRuntime.jsxs("label", {
+      children: [option2.label, ":"]
+    })), /* @__PURE__ */ jsxRuntime.jsx("input", {
+      value: current[option2.name],
+      onChange: ({
+        target: {
+          value
+        }
+      }) => {
+        setCurrent({
+          ...current,
+          [option2.name]: value
+        });
+      }
+    }, option2.name)]
+  });
+}
+function SelectEditor({
+  current,
+  option: option2,
+  setCurrent
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ React.createElement("div", {
+      ...{
+        className: "mly78zum5 mly1lvf691 mly117nqv4"
+      },
+      key: `${option2.name}-label`
+    }, /* @__PURE__ */ jsxRuntime.jsxs("label", {
+      children: [option2.label, ":"]
+    })), /* @__PURE__ */ jsxRuntime.jsx(SelectDropdown, {
+      value: current[option2.name],
+      options: option2.options,
+      onChange: (value) => {
+        setCurrent({
+          ...current,
+          [option2.name]: value
+        });
+      }
+    }, option2.name)]
+  });
+}
+const dialogStyles$1 = {
+  trigger: {
+    height: "mly1ktj5wk",
+    $$css: true
+  },
+  content: {
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    boxShadow: "mly5n1uv4",
+    backgroundColor: "mly12peec7",
+    borderRadius: "mlyur7f20",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    padding: "mlye8ttls",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    minWidth: "mlylm99nl",
+    maxWidth: "mly1jkqq1h",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  editorCell: {
+    flexGrow: "mly1iyjqo2",
+    $$css: true
+  }
+};
 function Visualization$1({
   rootQuery,
   view
 }) {
+  var _a2;
   const {
     setQuery
   } = React.useContext(QueryEditorContext);
   const currentTag = view.getTag();
-  const currentRenderer = tagToRenderer(currentTag) ?? "table";
+  const rendererTag = view.getTag(RENDERER_PREFIX);
+  const currentRenderer = ((_a2 = rendererTag.tag("viz")) == null ? void 0 : _a2.text()) ?? legacyToViz(tagToRenderer(currentTag) ?? "table");
   const setRenderer = (renderer) => {
-    view.removeTagProperty([currentRenderer]);
-    view.setTagProperty([renderer]);
+    view.setTagProperty(["viz"], renderer, RENDERER_PREFIX);
     setQuery == null ? void 0 : setQuery(rootQuery.build());
   };
-  const vizes = QUERY_RENDERERS.map((viz) => ({
+  const items = VIZ_RENDERERS.map((viz) => ({
     icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: `viz_${viz}`
     }),
@@ -30305,16 +30663,30 @@ function Visualization$1({
     customStyle: styles$q.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
-    items: vizes,
+    items,
     onChange: (viz) => setRenderer(viz)
   }, "first")];
+  const options = VISUALIZATION_OPTIONS[currentRenderer];
+  if (options) {
+    tokens2.push(/* @__PURE__ */ jsxRuntime.jsx(RendererPopover, {
+      viz: currentRenderer,
+      options,
+      view,
+      rootQuery
+    }, "menu"));
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(TokenGroup, {
+    customStyle: styles$q.group,
     children: tokens2
   });
 }
 const styles$q = {
+  group: {
+    width: "mlyh8yej3",
+    gridTemplateColumns: "mly52fmzj",
+    $$css: true
+  },
   first: {
-    flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
     $$css: true
   }
@@ -31770,6 +32142,9 @@ function typeFromFilter(filter) {
   if (filter.operator === "null" && filter.not) {
     return "-null";
   }
+  if (filter.operator === "before" && filter.not) {
+    return "not_before";
+  }
   return filter.operator;
 }
 function unitsFromFilter(filter, isDateTime) {
@@ -31823,6 +32198,9 @@ const DateTimeFilterCore = ({
         }, {
           value: "next",
           label: "next complete"
+        }, {
+          value: "not_before",
+          label: "on or after"
         }, {
           value: "after",
           label: "after"
@@ -32184,6 +32562,12 @@ function dateTimeFilterChangeType(filter, type, units) {
         operator: type,
         before: fromMoment
       };
+    case "not_before":
+      return {
+        operator: "before",
+        before: fromMoment,
+        not: true
+      };
     case "in":
       return {
         operator: type,
@@ -33637,7 +34021,7 @@ const parsedToLabels = (parsed, filterString) => {
             const {
               not
             } = temporalClause;
-            op = `is${not ? " not" : ""} before`;
+            op = not ? "is on or after" : "is before";
             value = displayTimeFromMoment(temporalClause.before);
           }
           break;
@@ -35682,42 +36066,48 @@ function RenderedResult({
   result,
   source
 }) {
-  const [renderer, setRenderer] = React.useState();
   const {
     onDrill,
     setQuery
   } = React.useContext(QueryEditorContext);
-  React.useEffect(() => {
-    const renderer2 = document.createElement("malloy-render");
-    renderer2.malloyResult = result;
-    renderer2.onDrill = ({
-      stableQuery,
-      stableDrillClauses
-    }) => {
-      if (onDrill) {
-        onDrill({
-          stableQuery,
-          stableDrillClauses
+  const vizContainer = React.useRef(null);
+  const viz = React.useMemo(() => {
+    const renderer = new render.MalloyRenderer();
+    const viz2 = renderer.createViz({
+      onDrill: ({
+        stableQuery,
+        stableDrillClauses
+      }) => {
+        if (onDrill) {
+          onDrill({
+            stableQuery,
+            stableDrillClauses
+          });
+          return;
+        }
+        const rootQuery = new QB.ASTQuery({
+          query: stableQuery,
+          source
         });
-        return;
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      },
+      tableConfig: {
+        enableDrill: true
       }
-      const rootQuery = new QB.ASTQuery({
-        query: stableQuery,
-        source
-      });
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
-    };
-    renderer2.tableConfig = {
-      enableDrill: true
-    };
-    setRenderer(renderer2);
-  }, [onDrill, result, source, setQuery]);
-  if (renderer) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DOMElement, {
-      element: renderer,
-      style: {
-        overflow: "hidden",
-        height: "100%"
+    });
+    return viz2;
+  }, [onDrill, source, setQuery]);
+  React.useEffect(() => {
+    if (vizContainer.current && viz) {
+      viz.setResult(result);
+      viz.render(vizContainer.current);
+    }
+  }, [viz, result]);
+  if (viz) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref: vizContainer,
+      ...{
+        className: "mly5yr21d mly1n2onr6 mly1ja2u2z mlyb3r6kr mlyh8yej3"
       }
     });
   } else {