npm - @malloydata/malloy-explorer - Versions diffs - 0.0.295-dev250710213205 → 0.0.299-dev250808170326 - Mend

@malloydata/malloy-explorer 0.0.295-dev250710213205 → 0.0.299-dev250808170326

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -15,9 +15,8 @@ var __superGet = (cls, obj, key2) => __reflectGet(__getProtoOf(cls), key2, obj);
 var _a, _b, _captureMap, _compiled, _pattern, _nameMap, _strategy, __EmulatedRegExp_instances, execCore_fn, _c;
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useLayoutEffect, useEffect, useMemo, useState, useRef, createElement, useContext, useCallback, createContext, memo, useReducer } from "react";
-import * as QB from "@malloydata/malloy-query-builder";
-import { ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTAnnotation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTReferenceExpression, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTQuery } from "@malloydata/malloy-query-builder";
+import React__default, { useLayoutEffect, useEffect, useMemo, createContext, useContext, useCallback, useState, useRef, createElement, memo, useReducer } from "react";
+import { ASTQuery, ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTAnnotation, ASTLimitViewOperation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTCalculateViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTReferenceExpression, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTReferenceQueryArrowSource } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import { MalloyRenderer, isCoreVizPluginInstance } from "@malloydata/render";
 import { TemporalFilterExpression, BooleanFilterExpression, NumberFilterExpression, StringFilterExpression } from "@malloydata/malloy-filter";
@@ -3311,11 +3310,14 @@ var Root3$1 = Tooltip;
 var Trigger$4 = TooltipTrigger;
 var Portal$4 = TooltipPortal;
 var Content2$4 = TooltipContent;
-const QueryEditorContext = /* @__PURE__ */ React.createContext({});
+const QueryEditorContext = /* @__PURE__ */ React.createContext({
+  setQuery: () => {
+  }
+});
 function useQueryBuilder(source, query) {
   return useMemo(() => {
     if (source) {
-      return new QB.ASTQuery({
+      return new ASTQuery({
         query,
         source
       });
@@ -3399,10 +3401,29 @@ const findNestView = (currentView, remainingPath) => {
   }
   return null;
 };
+const UpdateQueryContext = /* @__PURE__ */ createContext({
+  updateQuery: () => {
+    console.warn("Missing <MalloyExplorerProvider>");
+  }
+});
+function useUpdateQuery() {
+  const {
+    updateQuery
+  } = useContext(UpdateQueryContext);
+  return updateQuery;
+}
+const TopValuesContext = /* @__PURE__ */ createContext({});
+function useTopValues() {
+  const {
+    topValues
+  } = useContext(TopValuesContext);
+  return topValues;
+}
 function MalloyExplorerProvider({
   source,
   query,
-  onQueryChange,
+  onQueryChange = () => {
+  },
   focusedNestViewPath,
   onFocusedNestViewPathChange,
   children,
@@ -3410,20 +3431,32 @@ function MalloyExplorerProvider({
   onDrill
 }) {
   const rootQuery = useQueryBuilder(source, query);
+  const updateQuery = useCallback(() => {
+    onQueryChange == null ? void 0 : onQueryChange(rootQuery == null ? void 0 : rootQuery.build());
+  }, [onQueryChange, rootQuery]);
   return /* @__PURE__ */ jsx(TooltipProvider, {
     children: /* @__PURE__ */ jsx(MalloyQueryFocusProvider, {
       rootQuery,
       focusedNestViewPath,
       onFocusedNestViewPathChange,
-      children: /* @__PURE__ */ jsx(QueryEditorContext.Provider, {
+      children: /* @__PURE__ */ jsx(UpdateQueryContext.Provider, {
         value: {
-          source,
-          rootQuery,
-          setQuery: onQueryChange,
-          topValues,
-          onDrill
+          updateQuery
         },
-        children
+        children: /* @__PURE__ */ jsx(TopValuesContext.Provider, {
+          value: {
+            topValues
+          },
+          children: /* @__PURE__ */ jsx(QueryEditorContext.Provider, {
+            value: {
+              source,
+              rootQuery,
+              setQuery: onQueryChange,
+              onDrill
+            },
+            children
+          })
+        })
       })
     })
   });
@@ -3795,6 +3828,7 @@ const SvgInfo = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns:
 const SvgError = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.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.createElement("svg", { height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("g", { fill: "none", stroke: "currentColor" }, /* @__PURE__ */ React.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.createElement("path", { d: "m9.9 2 2.89 2.89-3 3.01" })));
 const SvgSidebarCollapse = (props2) => /* @__PURE__ */ React.createElement("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", stroke: "none", ...props2 }, /* @__PURE__ */ React.createElement("path", { fill: "currentColor", stroke: "none", d: "m20 24h-16c-2.2 0-4-1.8-4-4v-16c0-2.2 1.8-4 4-4h16c2.2 0 4 1.8 4 4v16c0 2.2-1.8 4-4 4zm-16-22c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m8 24c-.6 0-1-.4-1-1v-22c0-.6.4-1 1-1s1 .4 1 1v22c0 .6-.4 1-1 1z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m14 13c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l3-3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-3 3c-.2.2-.4.3-.7.3z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m17 16c-.3 0-.5-.1-.7-.3l-3-3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l3 3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z" }));
+const SvgDownload = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "24px", height: "24px", viewBox: "0 0 80 80", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("path", { d: "M19.5833333,78.3333333 L74.4166667,78.3333333 L74.4166667,70.5 L19.5833333,70.5 L19.5833333,78.3333333 Z M74.4166667,35.25 L58.75,35.25 L58.75,11.75 L35.25,11.75 L35.25,35.25 L19.5833333,35.25 L47,62.6666667 L74.4166667,35.25 Z", fillRule: "nonzero", fill: "var(--vscode-icon-foreground)" })));
 const SvgFilterSliders = (props2) => /* @__PURE__ */ React.createElement("svg", { fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "m11 8h10m-10 0c0 1.65685-1.34315 3-3 3s-3-1.34315-3-3m6 0c0-1.65685-1.34315-3-3-3s-3 1.34315-3 3m0 0h-2m10 8h-10m10 0c0-1.6569 1.3431-3 3-3s3 1.3431 3 3m-6 0c0 1.6569 1.3431 3 3 3s3-1.3431 3-3m0 0h2", stroke: "currentColor", strokeWidth: 1.5 }));
 const SvgVizBarChart = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_bar_chart", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "Group-3", transform: "translate(20.000000, 24.000000)", fill: "currentColor" }, /* @__PURE__ */ React.createElement("g", { id: "Group-2", transform: "translate(34.500000, 31.000000) rotate(-270.000000) translate(-34.500000, -31.000000) translate(3.500000, -3.500000)" }, /* @__PURE__ */ React.createElement("path", { d: "M-26.056314,30.056314 L34.943686,30.056314 C37.152825,30.056314 38.943686,31.847175 38.943686,34.056314 L38.943686,34.943686 C38.943686,37.152825 37.152825,38.943686 34.943686,38.943686 L-26.056314,38.943686 C-28.265453,38.943686 -30.056314,37.152825 -30.056314,34.943686 L-30.056314,34.056314 C-30.056314,31.847175 -28.265453,30.056314 -26.056314,30.056314 Z", id: "Rectangle-Copy-59", transform: "translate(4.443686, 34.500000) rotate(-90.000000) translate(-4.443686, -34.500000) " }), /* @__PURE__ */ React.createElement("path", { d: "M-0.491247385,37.8466366 L44.9281075,37.8466366 C47.1372465,37.8466366 48.9281075,39.6374976 48.9281075,41.8466366 L48.9281075,42.7340086 C48.9281075,44.9431476 47.1372465,46.7340086 44.9281075,46.7340086 L-0.491247385,46.7340086 C-2.70038638,46.7340086 -4.49124739,44.9431476 -4.49124739,42.7340086 L-4.49124739,41.8466366 C-4.49124739,39.6374976 -2.70038638,37.8466366 -0.491247385,37.8466366 Z", id: "Rectangle-Copy-62", transform: "translate(22.218430, 42.290323) rotate(-90.000000) translate(-22.218430, -42.290323) " }), /* @__PURE__ */ React.createElement("path", { d: "M23.3837854,43.9469253 L56.6025627,43.9469253 C58.8117017,43.9469253 60.6025627,45.7377863 60.6025627,47.9469253 L60.6025627,48.8342973 C60.6025627,51.0434363 58.8117017,52.8342973 56.6025627,52.8342973 L23.3837854,52.8342973 C21.1746464,52.8342973 19.3837854,51.0434363 19.3837854,48.8342973 L19.3837854,47.9469253 C19.3837854,45.7377863 21.1746464,43.9469253 23.3837854,43.9469253 Z", id: "Rectangle-Copy-66", transform: "translate(39.993174, 48.390611) rotate(-90.000000) translate(-39.993174, -48.390611) " }), /* @__PURE__ */ React.createElement("path", { d: "M46.7286345,49.7286345 L68.8072017,49.7286345 C71.0163407,49.7286345 72.8072017,51.5194955 72.8072017,53.7286345 L72.8072017,54.1927983 C72.8072017,56.4019373 71.0163407,58.1927983 68.8072017,58.1927983 L46.7286345,58.1927983 C44.5194955,58.1927983 42.7286345,56.4019373 42.7286345,54.1927983 L42.7286345,53.7286345 C42.7286345,51.5194955 44.5194955,49.7286345 46.7286345,49.7286345 Z", id: "Rectangle-Copy-67", transform: "translate(57.767918, 53.960716) rotate(-90.000000) translate(-57.767918, -53.960716) " })))));
 const SvgVizBoolean = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_boolean", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414-2", transform: "translate(20.000000, 22.000000)", fill: "currentColor", fillRule: "nonzero" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414" }, /* @__PURE__ */ React.createElement("path", { d: "M15.2972028,30.8 L54.7027972,30.8 C63.151209,30.8 70,23.9051851 70,15.4 C70,6.89481485 63.151209,0 54.7027972,0 L15.2972028,0 C6.84879098,0 0,6.89481485 0,15.4 C0,23.9051851 6.84879098,30.8 15.2972028,30.8 Z M15.2972028,6.16 L54.7027972,6.16 C59.7718443,6.16 63.8811189,10.2968889 63.8811189,15.4 C63.8811189,20.5031111 59.7718443,24.64 54.7027972,24.64 L15.2972028,24.64 C10.2281557,24.64 6.11888112,20.5031111 6.11888112,15.4 C6.11888112,10.2968889 10.2281557,6.16 15.2972028,6.16 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M19.6340542,21.9997804 C22.2930484,22.0215224 24.7022661,20.4273668 25.7348338,17.9629544 C26.7674016,15.4985421 26.2191958,12.6510518 24.3466309,10.7523518 C22.474066,8.85365189 19.6473211,8.27908795 17.1885612,9.29740315 C14.7298014,10.3157183 13.125,12.7256064 13.125,15.3998806 C13.125,19.0240523 16.0305897,21.9703156 19.6340542,21.9997804 L19.6340542,21.9997804 Z", id: "Path" }), /* @__PURE__ */ React.createElement("path", { d: "M54.7027971,35.2 L15.2972025,35.2 C6.84879081,35.2 0,42.094815 0,50.6 C0,59.105185 6.84879081,66 15.2972025,66 L54.7027971,66 C63.151209,66 70,59.1051851 70,50.6 C70,42.0948149 63.151209,35.2 54.7027971,35.2 L54.7027971,35.2 Z M54.7027971,59.84 L15.2972025,59.84 C10.2281554,59.84 6.11888082,55.7031111 6.11888082,50.6 C6.11888082,45.4968889 10.2281554,41.36 15.2972025,41.36 L54.7027971,41.36 C59.7718442,41.36 63.8811189,45.4968889 63.8811189,50.6 C63.8811189,55.7031111 59.7718442,59.84 54.7027971,59.84 L54.7027971,59.84 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M50.3659458,44.0002196 C47.7069516,43.9784776 45.2977339,45.5726332 44.2651662,48.0370456 C43.2325984,50.5014579 43.7808042,53.3489482 45.6533691,55.2476482 C47.525934,57.1463481 50.3526789,57.720912 52.8114388,56.7025969 C55.2701986,55.6842817 56.875,53.2743936 56.875,50.6001194 C56.875,46.9759477 53.9694103,44.0296844 50.3659458,44.0002196 Z", id: "Path" })))));
@@ -3837,6 +3871,7 @@ const ICON_MAP = {
   refresh: SvgRefresh,
   sidebarCollapse: SvgSidebarCollapse,
   filterSliders: SvgFilterSliders,
+  download: SvgDownload,
   // Operations
   aggregate: SvgInsertMeasure,
   dimension: SvgTypeIconString,
@@ -3904,11 +3939,11 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$Q.main, colorVariants$3[color], customStyle),
+    ..._stylex.props(styles$R.main, colorVariants$3[color], customStyle),
     "data-testid": `icon-${color}-${name}`
   });
 }
-const styles$Q = {
+const styles$R = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -3977,18 +4012,18 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$P.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$Q.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
       "data-testid": "badge-label",
-      ..._stylex.props(fontStyles.badge, styles$P.label),
+      ..._stylex.props(fontStyles.badge, styles$Q.label),
       children: label
     })]
   });
 }
-const styles$P = {
+const styles$Q = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -4070,10 +4105,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$O.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$P.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$O = {
+const styles$P = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -4879,7 +4914,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$N.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$O.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     type: "button",
     disabled: isDisabled,
     ...props2,
@@ -4889,9 +4924,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$N.icon
+        customStyle: styles$O.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$N.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$O.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -4918,7 +4953,7 @@ function Button({
     return button;
   }
 }
-const styles$N = {
+const styles$O = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5169,7 +5204,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$M.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$N.nonInteractive, customStyle),
     ...dragProps == null ? void 0 : dragProps.attributes,
     ...dragProps == null ? void 0 : dragProps.listeners,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
@@ -5206,7 +5241,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$M = {
+const styles$N = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5230,7 +5265,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$L.main, customStyle),
+    ..._stylex.props(styles$M.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5241,16 +5276,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$L.onlyChild;
-  if (index2 === 0) return styles$L.firstChild;
-  if (index2 === count2 - 1) return styles$L.lastChild;
-  return styles$L.innerChild;
+  if (count2 === 1) return styles$M.onlyChild;
+  if (index2 === 0) return styles$M.firstChild;
+  if (index2 === count2 - 1) return styles$M.lastChild;
+  return styles$M.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$L = {
+const styles$M = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -5322,7 +5357,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$K.errorIcon
+          customStyle: styles$L.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -5335,7 +5370,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$K = {
+const styles$L = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5380,22 +5415,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$J.focused, !!errorMessage && styles$J.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$K.focused, !!errorMessage && styles$K.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$J.icon
+        customStyle: styles$K.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$J.placeholder),
+          ..._stylex.props(fontStyles.body, styles$K.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$J.input, fontStyles.body),
+          ..._stylex.props(styles$K.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -5420,7 +5455,7 @@ function EditableToken({
     })]
   });
 }
-const styles$J = {
+const styles$K = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7762,12 +7797,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$I.main, isFocused && styles$I.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$J.main, isFocused && styles$J.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$I.input),
+      ..._stylex.props(fontStyles.body, styles$J.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7775,7 +7810,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$I.actionButton, value === "" && styles$I.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$J.actionButton, value === "" && styles$J.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -7783,7 +7818,7 @@ function TextInput({
     })]
   });
 }
-const styles$I = {
+const styles$J = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -7992,7 +8027,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$H.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], customStyle),
+      ..._stylex.props(tokenStyles.main, styles$I.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8019,7 +8054,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$H.searchInput,
+            customStyle: styles$I.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8050,21 +8085,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$H.selectItem),
+    ..._stylex.props(fontStyles.body, styles$I.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$H.radioChecked
+      customStyle: styles$I.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$H.radioUnchecked
+      customStyle: styles$I.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$H = {
+const styles$I = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8154,7 +8189,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$G.container, customStyle),
+    ..._stylex.props(styles$H.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8168,7 +8203,7 @@ function Card({
     })]
   });
 }
-const styles$G = {
+const styles$H = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8261,7 +8296,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsx(Icon, {
           name: icon,
-          customStyle: styles$F.icon
+          customStyle: styles$G.icon
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp mly117nqv4"
@@ -8303,7 +8338,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$F = {
+const styles$G = {
   icon: {
     $$css: true
   }
@@ -8335,10 +8370,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$E.label),
+          ..._stylex.props(fontStyles.body, styles$F.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$E.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$F.sublabel),
           children: sublabel
         })]
       })]
@@ -8350,7 +8385,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$E = {
+const styles$F = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19164,7 +19199,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$D.root, customStyle),
+    ..._stylex.props(styles$E.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19184,7 +19219,7 @@ function Spinner({
     })
   });
 }
-const styles$D = {
+const styles$E = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -22253,7 +22288,7 @@ function toArray() {
     m.millisecond()
   ];
 }
-function toObject() {
+function toObject$1() {
   var m = this;
   return {
     years: m.year(),
@@ -22691,7 +22726,7 @@ proto.set = stringSet;
 proto.startOf = startOf;
 proto.subtract = subtract$1;
 proto.toArray = toArray;
-proto.toObject = toObject;
+proto.toObject = toObject$1;
 proto.toDate = toDate;
 proto.toISOString = toISOString;
 proto.inspect = inspect;
@@ -23582,7 +23617,7 @@ const Popover = ({
     })
   });
 };
-const styles$C = {
+const styles$D = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23634,7 +23669,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$C.wrapper, customStyle),
+    ..._stylex.props(styles$D.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23702,7 +23737,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$C.selectListDiv, customStyle),
+      ..._stylex.props(styles$D.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23734,8 +23769,8 @@ function SelectList({
           }), /* @__PURE__ */ jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$C.checkIcon,
-              ...isSelected ? styles$C.checkIconSelected : void 0
+              ...styles$D.checkIcon,
+              ...isSelected ? styles$D.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsx("span", {
             ...{
@@ -23787,7 +23822,7 @@ const DateInput = ({
     setTempValue(hooks.utc(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$B.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$C.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -23822,7 +23857,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$B = {
+const styles$C = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -23934,7 +23969,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$A.outer, customStyle),
+    ..._stylex.props(styles$B.outer, customStyle),
     ref: forwardRef,
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
@@ -24250,7 +24285,7 @@ function DatePicker({
     })]
   });
 }
-const styles$A = {
+const styles$B = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24336,7 +24371,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$z.header, variantColors[variant], children ? styles$z.headerWithContent : null),
+      ..._stylex.props(styles$A.header, variantColors[variant], children ? styles$A.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24349,22 +24384,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$z.title, fontStyles.emphasized),
+          ..._stylex.props(styles$A.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$z.description, fontStyles.supporting),
+          ..._stylex.props(styles$A.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$z.content, fontStyles.body),
+      ..._stylex.props(styles$A.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$z = {
+const styles$A = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24506,14 +24541,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$y.main, customStyle),
+      ..._stylex.props(styles$z.main, customStyle),
       children: React.Children.map(children, (child) => /* @__PURE__ */ jsxs(Fragment, {
         children: [child, /* @__PURE__ */ jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$y = {
+const styles$z = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24550,10 +24585,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$x.label),
+          ..._stylex.props(fontStyles.body, styles$y.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$y.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24565,7 +24600,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$x = {
+const styles$y = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25850,7 +25885,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$w.content),
+        ..._stylex.props(fontStyles.body, styles$x.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25877,22 +25912,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$w.icon
+      customStyle: styles$x.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$w.label),
+        ..._stylex.props(fontStyles.body, styles$x.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
         children: sublabel
       })]
     })]
   });
 }
-const styles$w = {
+const styles$x = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25976,7 +26011,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$v.title),
+        ..._stylex.props(fontStyles.largeBody, styles$w.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxs("div", {
@@ -25986,9 +26021,9 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsx(Button, {
         onClick: () => {
           focusMainView();
-          setQuery == null ? void 0 : setQuery(void 0);
+          setQuery(void 0);
         },
-        isDisabled: !rootQuery || (rootQuery == null ? void 0 : rootQuery.isEmpty()),
+        isDisabled: !rootQuery || rootQuery.isEmpty(),
         label: "Clear",
         variant: "flat",
         size: "compact"
@@ -26021,13 +26056,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$v = {
+const styles$w = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$u = {
+const styles$v = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -26198,6 +26233,7 @@ function fieldToIcon(field) {
       break;
     case "dimension":
     case "measure":
+    case "calculate":
       icon = atomicTypeToIcon(field.type.kind);
       break;
     case "join":
@@ -26209,8 +26245,7 @@ function fieldToIcon(field) {
 function relationshipToIcon(relationship) {
   return relationshipMap[relationship];
 }
-function viewToVisualizationIcon(view) {
-  const currentTag = view.getTag();
+function tagToVisualization(currentTag) {
   const currentRenderer = tagToRenderer(currentTag) ?? "table";
   return `viz_${currentRenderer}`;
 }
@@ -26230,6 +26265,7 @@ const fieldKindMap = {
   view: "purple",
   dimension: "cyan",
   measure: "green",
+  calculate: "green",
   join: void 0
 };
 const relationshipMap = {
@@ -26239,31 +26275,36 @@ const relationshipMap = {
 };
 function FieldToken({
   field,
+  additionalSiblings,
   hoverActions,
   hoverActionsVisible,
   ...props2
 }) {
+  const [isHovered, setIsHovered] = React.useState(false);
   let label = field.name;
   if (field.kind === "dimension" && (field.type.kind === "timestamp_type" || field.type.kind === "date_type")) {
     if (field.type.timeframe) {
       label += `.${field.type.timeframe}`;
     }
   }
+  const showHover = (isHovered || hoverActionsVisible) && !!hoverActions;
   return /* @__PURE__ */ jsxs("div", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
     ...{
       0: {
-        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly28fmrt mly1x0xcia"
+        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f"
       },
       1: {
         className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mlym9y5t7"
       }
-    }[!!hoverActionsVisible << 0],
+    }[!!showHover << 0],
     children: [/* @__PURE__ */ jsx(Token, {
       label,
       color: fieldKindToColor(field.kind),
       icon: fieldToIcon(field),
       ...props2
-    }), hoverActions && /* @__PURE__ */ jsx("div", {
+    }), additionalSiblings, showHover && /* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1vsucm1 mly2lah0s"
       },
@@ -26279,7 +26320,7 @@ function DrillOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "drills"
     }), /* @__PURE__ */ jsx("div", {
       ...{
@@ -30254,32 +30295,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   }
 }
-const styles$t = {
+const styles$u = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -30588,7 +30629,7 @@ var Content$1 = DialogContent;
 var Title = DialogTitle;
 var Description = DialogDescription;
 var Close = DialogClose;
-const styles$s = {
+const styles$t = {
   left: {
     display: "mly78zum5",
     justifyContent: "mly1lvf691",
@@ -30599,6 +30640,12 @@ const styles$s = {
     justifyContent: "mly1rfj78v",
     $$css: true
   },
+  nest: {
+    gridColumn: "mly623te4",
+    gridColumnStart: null,
+    gridColumnEnd: null,
+    $$css: true
+  },
   heading: {
     gridColumn: "mly623te4",
     gridColumnStart: null,
@@ -30722,11 +30769,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$r.container, fontStyles.body, customStyle),
+    ..._stylex.props(styles$s.container, fontStyles.body, customStyle),
     children
   });
 }
-const styles$r = {
+const styles$s = {
   container: {
     boxShadow: "mly5n1uv4",
     backgroundColor: "mly12peec7",
@@ -30763,7 +30810,7 @@ function InfoHover({
     children: [/* @__PURE__ */ jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.infoTrigger, fontStyles.body),
+        ..._stylex.props(styles$t.infoTrigger, fontStyles.body),
         children: /* @__PURE__ */ jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -30774,7 +30821,7 @@ function InfoHover({
         side: "right",
         align: "start",
         children: /* @__PURE__ */ jsx(HoverCard, {
-          customStyle: styles$s.card,
+          customStyle: styles$t.card,
           children: info
         })
       })
@@ -30896,9 +30943,9 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$q.main),
+    ..._stylex.props(fontStyles.body, styles$r.main),
     children: /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$q.content, customStyle),
+      ..._stylex.props(styles$r.content, customStyle),
       onKeyUp,
       onClick: () => {
         var _a2;
@@ -30964,7 +31011,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$q.pill, colorVariants[color]),
+    ..._stylex.props(styles$r.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -30979,7 +31026,7 @@ const Pill = ({
     })]
   });
 };
-const styles$q = {
+const styles$r = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -31111,6 +31158,20 @@ const colorVariants = {
     $$css: true
   }
 };
+function setAtPath(current, path, value) {
+  const newCurrent = {
+    ...current
+  };
+  let target = newCurrent;
+  for (let i2 = 0; i2 < path.length - 1; i2++) {
+    if (typeof target[path[i2]] !== "object") {
+      target[path[i2]] = {};
+    }
+    target = target[path[i2]];
+  }
+  target[path[path.length - 1]] = value;
+  return newCurrent;
+}
 function OneOfEditor({
   view,
   name,
@@ -31121,7 +31182,7 @@ function OneOfEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.label, styles$s.left),
+      ..._stylex.props(styles$t.label, styles$t.left),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31156,6 +31217,15 @@ function OneOfEditor({
             current,
             option: subOption
           }, key2);
+        case "object":
+          return /* @__PURE__ */ jsx(OneOfObjectEditor, {
+            view,
+            name,
+            path,
+            updateCurrent,
+            current,
+            option: subOption
+          }, key2);
       }
       return null;
     })]
@@ -31172,7 +31242,7 @@ function OneOfStringEditor({
   if (option2.enum) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsx("input", {
           type: "radio",
           checked: isString2 && option2.enum.includes(current),
@@ -31203,7 +31273,7 @@ function OneOfStringEditor({
   } else {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsx("input", {
           type: "radio",
           checked: isString2,
@@ -31241,7 +31311,7 @@ function OneOfNumberEditor({
   const [value, setValue] = useState(isNumber2 ? current : option2.minimum ?? 0);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsx("input", {
         type: "radio",
         checked: isNumber2,
@@ -31265,10 +31335,10 @@ function OneOfNumberEditor({
           valueAsNumber
         }
       }) => {
-        setValue(value);
+        setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }), /* @__PURE__ */ jsx("div", {})]
   });
 }
@@ -31281,7 +31351,7 @@ function OneOfArrayEditor({
   const [value, setValue] = useState(isArray2 ? current : []);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsx("input", {
         type: "radio",
         checked: isArray2,
@@ -31304,6 +31374,48 @@ function OneOfArrayEditor({
     }), /* @__PURE__ */ jsx("div", {})]
   });
 }
+function OneOfObjectEditor({
+  path,
+  current,
+  option: option2,
+  updateCurrent,
+  view
+}) {
+  const isObject2 = current != null && typeof current === "object" && !Array.isArray(current);
+  const [objectValue, setObjectValue] = useState(isObject2 ? current : {});
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$t.left),
+      children: /* @__PURE__ */ jsx("input", {
+        type: "radio",
+        checked: isObject2,
+        onChange: ({
+          target: {
+            checked
+          }
+        }) => {
+          if (checked) {
+            updateCurrent(path, objectValue);
+          }
+        }
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$t.nest, styles$t.editorGrid),
+      children: /* @__PURE__ */ jsx(ObjectEditor, {
+        current: objectValue,
+        updateCurrent: (path2, value) => {
+          const [_2, ...subPath] = path2;
+          setObjectValue(setAtPath(objectValue, subPath, value));
+          updateCurrent(path2, value);
+        },
+        view,
+        name: "",
+        path,
+        option: option2
+      })
+    })]
+  });
+}
 function ArrayEditor({
   name,
   path,
@@ -31313,7 +31425,7 @@ function ArrayEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31334,14 +31446,15 @@ function NumberEditor$1({
   option: option2,
   updateCurrent
 }) {
+  const [value, setValue] = React.useState(current ?? option2.minimum);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
     }), /* @__PURE__ */ jsx("input", {
-      value: current,
+      value,
       type: "number",
       min: option2.minimum,
       max: option2.maximum,
@@ -31350,9 +31463,10 @@ function NumberEditor$1({
           valueAsNumber
         }
       }) => {
+        setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }, name), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
       info: option2.description
     }) : /* @__PURE__ */ jsx("div", {})]
@@ -31368,7 +31482,7 @@ function StringEditor$1({
   if (option2.enum) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31388,7 +31502,7 @@ function StringEditor$1({
   } else {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31416,14 +31530,14 @@ function BooleanEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsxs("label", {
-        ..._stylex.props(styles$s.label),
+        ..._stylex.props(styles$t.label),
         htmlFor: `${name}-checkbox`,
         children: [option2.title ?? name, ":"]
       }, `${name}-label`)
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.right),
+      ..._stylex.props(styles$t.right),
       children: /* @__PURE__ */ jsx("input", {
         type: "checkbox",
         checked: current,
@@ -31472,7 +31586,7 @@ function FieldEditor({
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31548,11 +31662,12 @@ function ObjectEditor({
   option: option2,
   updateCurrent
 }) {
-  const [isExpanded, setIsExpanded] = useState(path.length === 0);
+  const [isExpanded, setIsExpanded] = useState(path.length === 0 || !name);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [name ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$s.label, styles$s.heading),
+        ..._stylex.props(styles$t.label, styles$t.heading),
+        onClick: () => setIsExpanded(!isExpanded),
         children: [/* @__PURE__ */ jsx("label", {
           children: option2.title ?? name
         }), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
@@ -31639,40 +31754,29 @@ function ObjectEditor({
       }
       return null;
     }) : null, /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.divider)
+      ..._stylex.props(styles$t.divider)
     })]
   });
 }
 function VizEditor({
-  rootQuery,
   view,
   plugin,
   setOpen
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [current, setCurrent] = useState(plugin.getSettings());
-  console.info("RendererEditor current settings:", current);
   const schema = plugin.getSchema();
   const updateCurrent = (path, value) => {
-    const newCurrent = {
-      ...current
-    };
-    let target = newCurrent;
-    for (let i2 = 0; i2 < path.length - 1; i2++) {
-      if (!(path[i2] in target)) {
-        target[path[i2]] = {};
-      }
-      target = target[path[i2]];
-    }
-    target[path[path.length - 1]] = value;
+    const newCurrent = setAtPath(current, path, value);
     setCurrent(newCurrent);
   };
+  React.useEffect(() => {
+    console.info("RendererEditor current settings:", current);
+  }, [current]);
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$s.editor),
+    ..._stylex.props(styles$t.editor),
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.editorGrid),
+      ..._stylex.props(styles$t.editorGrid),
       children: /* @__PURE__ */ jsx(ObjectEditor, {
         view,
         name: "",
@@ -31682,13 +31786,13 @@ function VizEditor({
         updateCurrent
       })
     }), /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$s.editorRow),
+      ..._stylex.props(styles$t.editorRow),
       children: [/* @__PURE__ */ jsx(Button, {
         label: "Cancel",
         onClick: () => {
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       }), /* @__PURE__ */ jsx(Button, {
         variant: "primary",
         label: "Apply",
@@ -31703,10 +31807,10 @@ function VizEditor({
           view.getOrAddAnnotations().add(new ASTAnnotation({
             value
           }));
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       })]
     })]
   });
@@ -31916,7 +32020,6 @@ const dialogStyles = {
   }
 };
 function VizEditorDialog({
-  rootQuery,
   plugin,
   view,
   customStyle,
@@ -31933,7 +32036,7 @@ function VizEditorDialog({
       children: /* @__PURE__ */ jsx(Overlay, {
         ..._stylex.props(dialogStyles.overlay),
         children: /* @__PURE__ */ jsxs(Content$1, {
-          ..._stylex.props(fontStyles.body, dialogStyles.content, styles$p.content, customStyle),
+          ..._stylex.props(fontStyles.body, dialogStyles.content, styles$q.content, customStyle),
           children: [/* @__PURE__ */ jsxs(Title, {
             ..._stylex.props(dialogStyles.title),
             children: ["Visualization Settings", /* @__PURE__ */ jsx(Close, {
@@ -31946,7 +32049,6 @@ function VizEditorDialog({
             ..._stylex.props(dialogStyles.displayNone),
             children: "Edit visualization parameters"
           }), /* @__PURE__ */ jsx(VizEditor, {
-            rootQuery,
             view,
             plugin,
             setOpen
@@ -31956,7 +32058,7 @@ function VizEditorDialog({
     })
   });
 }
-const styles$p = {
+const styles$q = {
   content: {
     maxWidth: "mly14zcgw3",
     width: "mly14rvwrp",
@@ -31965,12 +32067,9 @@ const styles$p = {
   }
 };
 function Visualization$1({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const renderer = useMemo(() => new MalloyRenderer(), []);
   const [currentRenderer, setCurrentRenderer] = useState("table");
   const [plugin, setPlugin] = useState();
@@ -32015,7 +32114,7 @@ function Visualization$1({
   }, [renderer, view, tag]);
   const updateViz = (renderer2) => {
     view.setTagProperty(["viz"], renderer2, RENDERER_PREFIX);
-    setQuery == null ? void 0 : setQuery(rootQuery.build());
+    updateQuery();
   };
   const items = VIZ_RENDERERS.map((viz) => ({
     icon: /* @__PURE__ */ jsx(Icon, {
@@ -32026,7 +32125,7 @@ function Visualization$1({
     onClick: () => updateViz(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$o.first,
+    customStyle: styles$p.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items,
@@ -32036,7 +32135,7 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsx(Token, {
       icon: "gear",
       onClick: () => setOpen(true),
-      customStyle: styles$o.trigger,
+      customStyle: styles$p.trigger,
       tooltip: "Edit Settings..."
     }, "gear"));
   }
@@ -32044,23 +32143,22 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsx(Token, {
       icon: "warning",
       tooltip: error,
-      customStyle: styles$o.trigger
+      customStyle: styles$p.trigger
     }));
   }
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(TokenGroup, {
-      customStyle: styles$o.group,
+      customStyle: styles$p.group,
       children: tokens2
     }), /* @__PURE__ */ jsx(VizEditorDialog, {
       open,
       setOpen,
-      rootQuery,
       plugin,
       view
     })]
   });
 }
-const styles$o = {
+const styles$p = {
   trigger: {
     height: "mly1ktj5wk",
     $$css: true
@@ -32097,7 +32195,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$n.attributeTableContainer, style),
+    ..._stylex.props(styles$o.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx("table", {
       ...{
         className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
@@ -32135,9 +32233,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$n.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$o.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$n.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$o.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -32148,7 +32246,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$n = {
+const styles$o = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -32197,9 +32295,7 @@ function TopValuesTable({
   field,
   path
 }) {
-  const {
-    topValues
-  } = useContext(QueryEditorContext);
+  const topValues = useTopValues();
   const fieldPath = [...path, field.name].join(".");
   const fieldTopValues = topValues == null ? void 0 : topValues.find((entry) => entry.fieldName === fieldPath);
   if (!fieldTopValues) {
@@ -32280,12 +32376,12 @@ function RichText({
   });
   return /* @__PURE__ */ jsx("div", {
     ref,
-    ..._stylex.props(multiLine && styles$m.preWrap, multiLine && styles$m.breakWord, customStyle),
+    ..._stylex.props(multiLine && styles$n.preWrap, multiLine && styles$n.breakWord, customStyle),
     ...props2,
     children: formatted
   });
 }
-const styles$m = {
+const styles$n = {
   preWrap: {
     whiteSpace: "mly126k92a",
     $$css: true
@@ -32314,7 +32410,7 @@ function HoverText({
         onMouseEnter: () => setIsTriggerHovered(true),
         onMouseLeave: () => setIsTriggerHovered(false),
         onPointerMove: (e) => e.preventDefault(),
-        customStyle: [fontStyles.supporting, styles$l.text],
+        customStyle: [fontStyles.supporting, styles$m.text],
         children: text2
       })
     }), /* @__PURE__ */ jsx(Portal$4, {
@@ -32333,7 +32429,7 @@ function HoverText({
     })]
   });
 }
-const styles$l = {
+const styles$m = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -32360,7 +32456,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$k.viewAttributeTable
+      style: styles$l.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -32369,7 +32465,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs(HoverCard, {
-    customStyle: styles$k.container,
+    customStyle: styles$l.container,
     children: [/* @__PURE__ */ jsxs("div", {
       ref,
       children: [/* @__PURE__ */ jsx("div", {
@@ -32380,10 +32476,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$k.path),
+        ..._stylex.props(fontStyles.supporting, styles$l.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$k.title),
+        ..._stylex.props(fontStyles.emphasized, styles$l.title),
         children: field.name
       }), description && /* @__PURE__ */ jsx(HoverText, {
         text: description,
@@ -32394,7 +32490,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$k = {
+const styles$l = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -32572,9 +32668,7 @@ function BooleanFilterCore({
   });
 }
 function useSearch(searchTerm, fieldPath) {
-  const {
-    topValues
-  } = useContext(QueryEditorContext);
+  const topValues = useTopValues();
   if (topValues && searchTerm) {
     let searchValues = topValues;
     if (fieldPath) {
@@ -32629,7 +32723,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$j.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$k.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -32653,10 +32747,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$j.token
+    customStyle: styles$k.token
   });
 }
-const styles$j = {
+const styles$k = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -32832,7 +32926,7 @@ const StringFilterCore = ({
               setSearchValue("");
             }
           },
-          customStyle: styles$i.valueList,
+          customStyle: styles$j.valueList,
           showPath: false,
           filter: (value) => !currentFilter.values.includes(value),
           hideNoMatchMessage: true
@@ -32903,7 +32997,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$i = {
+const styles$j = {
   valueList: {
     maxHeight: "mly3d5gib",
     width: "mly1hfn5x7",
@@ -33855,7 +33949,7 @@ function FieldList({
     ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem, styles$h.sticky),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem, styles$i.sticky),
         "data-disabled": "true",
         children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsx(FilterPopover, {
@@ -33865,7 +33959,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
           children: /* @__PURE__ */ jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsx(FieldToken, {
@@ -33892,7 +33986,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -33915,7 +34009,7 @@ function FieldList({
     })
   });
 }
-const styles$h = {
+const styles$i = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -33944,7 +34038,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = useState("");
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(addMenuStyles.content, styles$g.content),
+    ..._stylex.props(addMenuStyles.content, styles$h.content),
     role: "menu",
     children: [/* @__PURE__ */ jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -33970,12 +34064,48 @@ function FieldMenu({
     })]
   });
 }
-const styles$g = {
+const styles$h = {
   content: {
     maxHeight: "mly3d5gib",
     $$css: true
   }
 };
+const getPrimaryAxis = (view) => {
+  const schema = view.getOutputSchema();
+  return getPrimaryAxisFromSchema(schema);
+};
+const getPrimaryAxisFromSchema = (schema) => {
+  let primaryAxisField = void 0;
+  primaryAxisField = findAxisFieldByAnnotation(schema.fields) || findAxisFieldByType(schema.fields) || findDefaultAxisField(schema.fields);
+  return primaryAxisField;
+};
+const findAxisFieldByAnnotation = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension" && field.annotations && field.annotations.find((annotation) => annotation.value === "# x")) {
+      return true;
+    }
+    return false;
+  });
+};
+const findAxisFieldByType = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension") {
+      const dimension = field;
+      if (dimension.type.kind === "date_type" || dimension.type.kind === "timestamp_type") {
+        return true;
+      }
+    }
+    return false;
+  });
+};
+const findDefaultAxisField = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension") {
+      return true;
+    }
+    return false;
+  });
+};
 function toFullName(path, name) {
   return [...path || [], name].join(".");
 }
@@ -34054,6 +34184,34 @@ function addGroupBy(view, field, path) {
     segment.addTimestampGroupBy(field.name, path, "second");
   } else {
     segment.addGroupBy(field.name, path, rename);
+    recomputePartitionByAndPrimaryAxis(segment);
+  }
+}
+function recomputePartitionByAndPrimaryAxis(segment) {
+  var _a2;
+  const primaryAxis = getPrimaryAxisFromSchema(segment.getOutputSchema());
+  const groupBys = segment.operations.items.filter((op) => op.kind === "group_by");
+  const movingAverages = segment.operations.items.filter((op) => op.kind === "calculate" && op.expression.kind === "moving_average");
+  const canSmooth = primaryAxis !== null && (primaryAxis == null ? void 0 : primaryAxis.kind) === "dimension" && (primaryAxis.type.kind === "timestamp_type" || primaryAxis.type.kind === "date_type");
+  if (!canSmooth) {
+    movingAverages.forEach((operation) => {
+      operation.delete();
+      segment.addAggregate(operation.getFieldInfo().name);
+    });
+  } else {
+    const nonPrimaryGroupByNames = groupBys.filter((gb) => gb.name !== primaryAxis.name);
+    movingAverages.forEach((operation) => {
+      operation.expression.edit();
+      operation.expression.setPartitionFields(nonPrimaryGroupByNames.map((gb) => gb.field.getReference()).filter((ref) => !!ref));
+    });
+    const primaryTimeAxisOperation = groupBys.find((gb) => gb.name === primaryAxis.name);
+    if (primaryTimeAxisOperation) {
+      const expression = (_a2 = primaryTimeAxisOperation.field) == null ? void 0 : _a2.expression;
+      if (expression && expression.kind === "time_truncation") {
+        const truncationExpression = primaryTimeAxisOperation.field.expression;
+        truncationExpression.truncation = "day";
+      }
+    }
   }
 }
 function addAggregate(view, field, path) {
@@ -34131,7 +34289,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$u.title, hoverStyles.main),
+    ..._stylex.props(styles$v.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -34165,16 +34323,13 @@ function OperationActionTitle({
   });
 }
 function RenameDialog({
-  rootQuery,
   view,
   target,
   open,
   setOpen
 }) {
   const [name, setName] = useState("");
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   useEffect(() => {
     if (target) {
       setName(target.name);
@@ -34184,8 +34339,9 @@ function RenameDialog({
     return null;
   }
   const onRename = () => {
+    target.edit();
     target.name = name;
-    setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+    updateQuery();
     setOpen(false);
   };
   const {
@@ -34248,15 +34404,12 @@ function RenameDialog({
   });
 }
 function SortableOperations({
-  rootQuery,
   segment,
   view,
   operations,
   kind
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const sensors = useSensors(useSensor(PointerSensor));
   const items = useMemo(() => {
     return operations.map((operation) => ({
@@ -34278,7 +34431,7 @@ function SortableOperations({
       const oldIndex = names.indexOf(active.id);
       const newIndex = names.indexOf(over.id);
       segment.reorderFields(arrayMove(names, oldIndex, newIndex));
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   }
   const {
@@ -34290,7 +34443,7 @@ function SortableOperations({
     types: ["dimension"],
     onClick: (field, path) => {
       addGroupBy(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   } : {
     title: "aggregate",
@@ -34298,17 +34451,16 @@ function SortableOperations({
     types: ["measure"],
     onClick: (field, path) => {
       addAggregate(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   };
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx(OperationActionTitle, {
-      rootQuery,
       view,
       fields,
       ...props2
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: /* @__PURE__ */ jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -34316,7 +34468,6 @@ function SortableOperations({
         children: /* @__PURE__ */ jsx(SortableContext, {
           items,
           children: items.map((item) => /* @__PURE__ */ jsx(SortableOperation, {
-            rootQuery,
             id: item.id,
             color: kind === "group_by" ? "cyan" : "green",
             view,
@@ -34329,18 +34480,16 @@ function SortableOperations({
 }
 const NULL_PATH = [];
 function SortableOperation({
-  rootQuery,
   id,
   view,
   operation,
   color
 }) {
   var _a2;
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const fieldInfo = operation.getFieldInfo();
-  const path = ((_a2 = operation.field.getReference()) == null ? void 0 : _a2.path) ?? NULL_PATH;
+  const field = operation instanceof ASTCalculateViewOperation ? null : operation.field;
+  const path = operation instanceof ASTCalculateViewOperation ? operation.expression.node.field_reference.path ?? NULL_PATH : ((_a2 = operation.field.getReference()) == null ? void 0 : _a2.path) ?? NULL_PATH;
   const {
     attributes,
     listeners,
@@ -34360,6 +34509,18 @@ function SortableOperation({
     transform: CSS$1.Transform.toString(transform2),
     transition
   };
+  const primaryAxis = useMemo(() => {
+    return getPrimaryAxis(view);
+  }, [view]);
+  const canSmooth = operation.kind === "aggregate" && primaryAxis !== null && (primaryAxis == null ? void 0 : primaryAxis.kind) === "dimension" && (primaryAxis.type.kind === "timestamp_type" || primaryAxis.type.kind === "date_type");
+  const enableSmoothing = useCallback((operation2) => {
+    if (!canSmooth) {
+      return;
+    }
+    operation2.convertToCalculateMovingAverage(operation2.name + "_smoothed", 7);
+    recomputePartitionByAndPrimaryAxis(view.getOrAddDefaultSegment());
+    updateQuery();
+  }, [canSmooth, updateQuery, view]);
   const hoverActions = useMemo(() => {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(DropdownMenu, {
@@ -34370,7 +34531,14 @@ function SortableOperation({
           tooltip: "More Actions"
         }),
         onOpenChange: setHoverActionsVisible,
-        children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+        children: [canSmooth ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+          label: "Add smoothing",
+          onClick: () => {
+            if (operation instanceof ASTAggregateViewOperation) {
+              enableSmoothing(operation);
+            }
+          }
+        }, "smoothing") : null, /* @__PURE__ */ jsx(DropdownMenuItem, {
           label: "Rename",
           onClick: () => {
             setRenameTarget(operation);
@@ -34380,12 +34548,21 @@ function SortableOperation({
       }, [...path, fieldInfo.name].join(".")), /* @__PURE__ */ jsx(ClearButton, {
         onClick: () => {
           operation.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+          recomputePartitionByAndPrimaryAxis(view.getOrAddDefaultSegment());
+          updateQuery();
         }
       })]
     });
-  }, [fieldInfo, operation, path, rootQuery, setQuery]);
-  const granular = granularityMenuItems(fieldInfo, operation.field);
+  }, [canSmooth, enableSmoothing, fieldInfo.name, operation, path, updateQuery, view]);
+  const hasSmoothedField = useMemo(() => {
+    return view.getOrAddDefaultSegment().operations.items.some((operation2) => {
+      return operation2.kind === "calculate";
+    });
+  }, [view]);
+  const granular = granularityMenuItems(fieldInfo, field);
+  if (hasSmoothedField && granular && operation.name === (primaryAxis == null ? void 0 : primaryAxis.name)) {
+    granular.options = granular.options.filter((option2) => option2.value === "day");
+  }
   let icon = "orderBy";
   if (fieldInfo.kind === "dimension" || fieldInfo.kind === "measure") {
     icon = atomicTypeToIcon(fieldInfo.type.kind);
@@ -34394,7 +34571,7 @@ function SortableOperation({
     id,
     ref: setNodeRef,
     style,
-    children: [granular ? /* @__PURE__ */ jsxs("div", {
+    children: [field && granular ? /* @__PURE__ */ jsxs("div", {
       ...{
         0: {
           className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly11ogjb6 mly1g9of4s"
@@ -34417,8 +34594,8 @@ function SortableOperation({
           color,
           value: granular.value,
           onChange: (granulation) => {
-            if (operation.field.expression instanceof ASTTimeTruncationExpression) operation.field.expression.truncation = granulation;
-            setQuery == null ? void 0 : setQuery(rootQuery.build());
+            if (field.expression instanceof ASTTimeTruncationExpression) field.expression.truncation = granulation;
+            updateQuery();
           },
           items: granular.options
         })]
@@ -34428,7 +34605,7 @@ function SortableOperation({
         },
         children: hoverActions
       })]
-    }) : /* @__PURE__ */ jsx(FieldToken, {
+    }) : operation instanceof ASTCalculateViewOperation ? /* @__PURE__ */ jsx(FieldToken, {
       field: fieldInfo,
       color,
       hoverActionsVisible,
@@ -34445,9 +34622,67 @@ function SortableOperation({
       dragProps: {
         attributes,
         listeners
-      }
+      },
+      additionalSiblings: /* @__PURE__ */ jsx(SelectorToken, {
+        color,
+        value: "" + (operation.expression.node.rows_preceding ?? 7),
+        onChange: (value) => {
+          if (value === "1") {
+            view.getOrAddDefaultSegment().operations.add(new ASTAggregateViewOperation({
+              kind: "aggregate",
+              field: {
+                expression: {
+                  kind: "field_reference",
+                  name: operation.expression.node.field_reference.name
+                }
+              }
+            }));
+            operation.delete();
+            updateQuery();
+          } else {
+            operation.expression.edit();
+            operation.expression.rowsPreceding = parseInt(value, 10);
+            updateQuery();
+          }
+        },
+        items: [{
+          label: "7d",
+          value: "7"
+        }, {
+          label: "14d",
+          value: "14"
+        }, {
+          label: "28d",
+          value: "28"
+        }, {
+          label: "30d",
+          value: "30"
+        }, {
+          label: "Remove smoothing",
+          value: "1"
+        }]
+      })
+    }) : /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx(FieldToken, {
+        field: fieldInfo,
+        color,
+        hoverActionsVisible,
+        hoverActions,
+        tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
+          field: fieldInfo,
+          path
+        }),
+        tooltipProps: {
+          side: "right",
+          align: "start",
+          alignOffset: 28
+        },
+        dragProps: {
+          attributes,
+          listeners
+        }
+      })
     }), /* @__PURE__ */ jsx(RenameDialog, {
-      rootQuery,
       view,
       target: renameTarget,
       open: renameOpen,
@@ -34458,7 +34693,7 @@ function SortableOperation({
 const DateGranulation = ["day", "week", "month", "quarter", "year"];
 const TimestampGranulation = ["second", "minute", "hour", "day", "week", "month", "quarter", "year"];
 function granularityMenuItems(fieldInfo, field) {
-  if (fieldInfo.kind !== "dimension" || !(field.expression instanceof ASTTimeTruncationExpression)) {
+  if (!field || fieldInfo.kind !== "dimension" || !(field.expression instanceof ASTTimeTruncationExpression)) {
     return null;
   }
   if (fieldInfo.type.kind === "timestamp_type") {
@@ -34488,13 +34723,11 @@ const customStyles = {
   }
 };
 function GroupByOperations({
-  rootQuery,
   segment,
   view,
   groupBys
 }) {
   return /* @__PURE__ */ jsx(SortableOperations, {
-    rootQuery,
     segment,
     view,
     operations: groupBys,
@@ -34737,34 +34970,30 @@ function displayTimeFromMoment(momentObj) {
   return momentObj.moment;
 }
 function FilterOperations({
-  rootQuery,
   filters
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (filters.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
             children: ["Invalid filter", /* @__PURE__ */ jsx(ClearButton, {
               onClick: () => {
                 filterOperation.delete();
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }),
           children: /* @__PURE__ */ jsx(SingleFilterOperation, {
-            filterOperation,
-            rootQuery
+            filterOperation
           })
         }, key2);
       })
@@ -34772,18 +35001,15 @@ function FilterOperations({
   });
 }
 function SingleFilterOperation({
-  rootQuery,
   filterOperation
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const setFilter = useCallback((filter2) => {
     if (filterOperation.filter instanceof ASTFilterWithFilterString) {
       filterOperation.filter.setFilter(filter2);
     }
-    setQuery == null ? void 0 : setQuery(rootQuery.build());
-  }, [filterOperation.filter, rootQuery, setQuery]);
+    updateQuery();
+  }, [filterOperation.filter, updateQuery]);
   const {
     filter
   } = filterOperation;
@@ -34827,25 +35053,22 @@ function SingleFilterOperation({
       children: /* @__PURE__ */ jsx(ClearButton, {
         onClick: () => {
           filterOperation.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         }
       })
     })]
   });
 }
 function LimitOperation({
-  rootQuery,
   limit
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (!limit) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -34854,7 +35077,7 @@ function LimitOperation({
         value: limit.limit,
         onChange: (value) => {
           limit.limit = value;
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         },
         errorMessage: limit.limit < 0 ? "Limit must be positive" : void 0
       }), /* @__PURE__ */ jsx("div", {
@@ -34862,7 +35085,7 @@ function LimitOperation({
         children: /* @__PURE__ */ jsx(ClearButton, {
           onClick: () => {
             limit.delete();
-            setQuery == null ? void 0 : setQuery(rootQuery.build());
+            updateQuery();
           }
         })
       })]
@@ -34870,13 +35093,11 @@ function LimitOperation({
   });
 }
 function AggregateOperations({
-  rootQuery,
   segment,
   view,
   aggregates
 }) {
   return /* @__PURE__ */ jsx(SortableOperations, {
-    rootQuery,
     segment,
     view,
     operations: aggregates,
@@ -34884,21 +35105,18 @@ function AggregateOperations({
   });
 }
 function OrderByOperations({
-  rootQuery,
   orderBys
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (orderBys.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -34929,7 +35147,7 @@ function OrderByOperations({
               value: orderBy.direction ?? "asc",
               onChange: (direction) => {
                 orderBy.direction = direction;
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }), /* @__PURE__ */ jsx("div", {
@@ -34937,7 +35155,7 @@ function OrderByOperations({
             children: /* @__PURE__ */ jsx(ClearButton, {
               onClick: () => {
                 orderBy.delete();
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })
           })]
@@ -34947,7 +35165,6 @@ function OrderByOperations({
   });
 }
 function View({
-  rootQuery,
   view
 }) {
   return /* @__PURE__ */ jsxs("div", {
@@ -34957,10 +35174,8 @@ function View({
       gap: 8
     },
     children: [/* @__PURE__ */ jsx(Visualization$1, {
-      rootQuery,
       view
     }), /* @__PURE__ */ jsx(ViewDefinition, {
-      rootQuery,
       view,
       viewDef: view.definition
     })]
@@ -34984,7 +35199,7 @@ function AddItem({
       children: /* @__PURE__ */ jsxs("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$f.open : null),
+        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$g.open : null),
         onClick: doOnClick,
         "data-disabled": disabled ? "true" : void 0,
         children: [/* @__PURE__ */ jsxs("div", {
@@ -35008,7 +35223,7 @@ function AddItem({
     }) : null]
   });
 }
-const styles$f = {
+const styles$g = {
   open: {
     background: "mly16o7sp0",
     backgroundAttachment: null,
@@ -35025,12 +35240,9 @@ const styles$f = {
   }
 };
 function AddLimit({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const segment = getSegmentIfPresent(view);
   const hasLimit = segment ? segmentHasLimit(segment) : false;
   return /* @__PURE__ */ jsx(AddItem, {
@@ -35042,17 +35254,14 @@ function AddLimit({
     onClick: () => {
       const segment2 = view.getOrAddDefaultSegment();
       segment2.setLimit(10);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   });
 }
 function AddEmptyNest({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   return /* @__PURE__ */ jsx(AddItem, {
     icon: /* @__PURE__ */ jsx(Icon, {
       name: "nest"
@@ -35062,7 +35271,7 @@ function AddEmptyNest({
       const segment = view.getOrAddDefaultSegment();
       const nestNo = segmentNestNo(segment, `Nest`);
       segment.addEmptyNest(nestNo > 1 ? `Nest ${nestNo}` : `Nest`);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   });
 }
@@ -35083,10 +35292,10 @@ function AddFieldItem({
     onAddOperation,
     isFilterOperation,
     search,
-    customStyle: styles$e.list
+    customStyle: styles$f.list
   });
 }
-const styles$e = {
+const styles$f = {
   list: {
     minWidth: "mly2ixbly",
     maxWidth: "mly1j9u4d2",
@@ -35094,13 +35303,10 @@ const styles$e = {
   }
 };
 function AddOrderBy({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const outputSchemaFields = view.getOutputSchema().fields;
   const segment = getSegmentIfPresent(view);
   const fields = useMemo(() => outputSchemaFields.filter((field) => field.kind === "dimension").filter((field) => ORDERABLE_TYPES$1.includes(field.type.kind)).filter((field) => segment ? !segmentHasOrderBy(segment, field.name) : true), [outputSchemaFields, segment]);
@@ -35112,7 +35318,7 @@ function AddOrderBy({
     types: ["dimension"],
     onAddOperation: (field) => {
       addOrderBy(view, field);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     disabledMessage: "There must be at least one field in the output to order by.",
     search
@@ -35120,13 +35326,10 @@ function AddOrderBy({
 }
 const ORDERABLE_TYPES$1 = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function AddGroupBy({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35143,19 +35346,16 @@ function AddGroupBy({
     filter,
     onAddOperation: (field, path) => {
       addGroupBy(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
 }
 function AddAggregate({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35172,7 +35372,7 @@ function AddAggregate({
     filter,
     onAddOperation: (field, path) => {
       addAggregate(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
@@ -35181,10 +35381,7 @@ function AddWhere({
   view,
   search
 }) {
-  const {
-    rootQuery,
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35198,7 +35395,7 @@ function AddWhere({
     onAddOperation: (field, path, filter) => {
       if (filter && (field.kind === "dimension" || field.kind === "measure")) {
         addFilter(view, field, path, filter);
-        setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+        updateQuery();
       }
     },
     isFilterOperation: true,
@@ -35207,15 +35404,18 @@ function AddWhere({
 }
 const FILTERABLE_TYPES$1 = /* @__PURE__ */ new Set(["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"]);
 function AddView({
-  rootQuery,
   view,
   search
 }) {
   const {
-    setQuery
+    rootQuery
   } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const allFields = getInputSchemaFromViewParent(view).fields;
   const fields = useMemo(() => allFields.filter((field) => field.kind === "view" && !isIndexView(field)), [allFields]);
+  if (!rootQuery) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add view",
     icon: "view",
@@ -35229,20 +35429,17 @@ function AddView({
       } else {
         addNest(view, field);
       }
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
 }
 function AddMenu({
-  rootQuery,
   view
 }) {
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState("");
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [search, setSearch] = useState("");
   const segment = getSegmentIfPresent(view);
   const toggleActive = (toggle) => {
@@ -35283,7 +35480,7 @@ function AddMenu({
             value: search,
             onChange: setSearch,
             placeholder: "Search...",
-            customStyle: styles$d.search
+            customStyle: styles$e.search
           })
         }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs("div", {
           ...{
@@ -35306,7 +35503,7 @@ function AddMenu({
                 } else {
                   addNest(view, field);
                 }
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               },
               search
             }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ValueList, {
@@ -35322,7 +35519,7 @@ function AddMenu({
                     values: [value.fieldValue ?? "∅"]
                   }
                 });
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }) : /* @__PURE__ */ jsxs("div", {
@@ -35359,7 +35556,6 @@ function AddMenu({
               onClick: () => toggleActive("view"),
               open: active === "view"
             }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(AddLimit, {
-              rootQuery,
               view
             }), /* @__PURE__ */ jsx(AddItem, {
               icon: /* @__PURE__ */ jsx(Icon, {
@@ -35369,7 +35565,6 @@ function AddMenu({
               onClick: () => toggleActive("order_by"),
               open: active === "order_by"
             }), /* @__PURE__ */ jsx(AddEmptyNest, {
-              rootQuery,
               view
             })]
           }), /* @__PURE__ */ jsxs("div", {
@@ -35378,23 +35573,18 @@ function AddMenu({
               overflowY: "auto"
             },
             children: [active === "group_by" && /* @__PURE__ */ jsx(AddGroupBy, {
-              rootQuery,
               view,
               search
             }), active === "aggregate" && /* @__PURE__ */ jsx(AddAggregate, {
-              rootQuery,
               view,
               search
             }), active === "where" && /* @__PURE__ */ jsx(AddWhere, {
-              rootQuery,
               view,
               search
             }), active === "view" && /* @__PURE__ */ jsx(AddView, {
-              rootQuery,
               view,
               search
             }), active === "order_by" && /* @__PURE__ */ jsx(AddOrderBy, {
-              rootQuery,
               view,
               search
             })]
@@ -35404,7 +35594,7 @@ function AddMenu({
     })]
   });
 }
-const styles$d = {
+const styles$e = {
   search: {
     width: "mlyh8yej3",
     $$css: true
@@ -35440,7 +35630,6 @@ function FocusableView({
   });
 }
 function NestOperations({
-  rootQuery,
   view,
   nests
 }) {
@@ -35448,22 +35637,18 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$u.tokenContainer),
+    ..._stylex.props(styles$v.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsx(NestOperation, {
-      rootQuery,
       view,
       nest
     }, nest.name))
   });
 }
 function NestOperation({
-  rootQuery,
   view,
   nest
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [renameOpen, setRenameOpen] = useState(false);
   const parentNestViewPath = useContext(NestViewPathContext);
   const {
@@ -35484,7 +35669,7 @@ function NestOperation({
         onClick: () => {
           focusNestView([...parentNestViewPath]);
           nest2.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         }
       }), /* @__PURE__ */ jsx(DropdownMenuItem, {
         label: "Rename",
@@ -35493,7 +35678,6 @@ function NestOperation({
         }
       })]
     }), /* @__PURE__ */ jsx(AddMenu, {
-      rootQuery,
       view: nest2.view
     })]
   });
@@ -35505,17 +35689,15 @@ function NestOperation({
       },
       children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
         title: nest.name,
-        icon: viewToVisualizationIcon(nest.view),
+        icon: tagToVisualization(nest.view.getTag()),
         defaultOpen: true,
         controls: getControls(nest),
         collapsedControls: getControls(nest),
         isFocused: isNestViewFocused([...parentNestViewPath, nest.name]),
         children: /* @__PURE__ */ jsx(View, {
-          rootQuery,
           view: nest.view
         })
       }), /* @__PURE__ */ jsx(RenameDialog, {
-        rootQuery,
         view,
         target: nest,
         open: renameOpen,
@@ -35525,7 +35707,6 @@ function NestOperation({
   });
 }
 function Operations({
-  rootQuery,
   view,
   viewDef
 }) {
@@ -35543,7 +35724,7 @@ function Operations({
   segment.operations.items.forEach((operation) => {
     if (operation instanceof ASTGroupByViewOperation) {
       groupBys.push(operation);
-    } else if (operation instanceof ASTAggregateViewOperation) {
+    } else if (operation instanceof ASTAggregateViewOperation || operation instanceof ASTCalculateViewOperation) {
       aggregates.push(operation);
     } else if (operation instanceof ASTWhereViewOperation) {
       filters.push(operation);
@@ -35564,66 +35745,53 @@ function Operations({
       className: "mly1tpqehw mly10lvyaf"
     },
     children: [/* @__PURE__ */ jsx(GroupByOperations, {
-      rootQuery,
       segment,
       view,
       groupBys
     }), /* @__PURE__ */ jsx(AggregateOperations, {
-      rootQuery,
       segment,
       view,
       aggregates
     }), /* @__PURE__ */ jsx(DrillOperations, {
-      rootQuery,
       drills
     }), /* @__PURE__ */ jsx(FilterOperations, {
-      rootQuery,
       filters
     }), /* @__PURE__ */ jsx(OrderByOperations, {
-      rootQuery,
       orderBys
     }), /* @__PURE__ */ jsx(NestOperations, {
-      rootQuery,
       view,
       nests
     }), /* @__PURE__ */ jsx(LimitOperation, {
-      rootQuery,
       limit
     })]
   });
 }
 function ViewDefinition({
-  rootQuery,
   view,
   viewDef
 }) {
   if (viewDef instanceof ASTArrowViewDefinition) {
     return /* @__PURE__ */ jsx(ViewDefinition, {
-      rootQuery,
       view,
       viewDef: viewDef.view
     });
   } else if (viewDef instanceof ASTRefinementViewDefinition) {
     return /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx(ViewDefinition, {
-        rootQuery,
         view,
         viewDef: viewDef.base
       }), /* @__PURE__ */ jsx(ViewDefinition, {
-        rootQuery,
         view,
         viewDef: viewDef.refinement
       })]
     });
   } else if (viewDef instanceof ASTSegmentViewDefinition) {
     return /* @__PURE__ */ jsx(Operations, {
-      rootQuery,
       view,
       viewDef
     });
   } else {
     return /* @__PURE__ */ jsx(CollapsingView, {
-      rootQuery,
       viewDef
     });
   }
@@ -35660,11 +35828,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$c.preview
+      style: styles$d.preview
     })]
   });
 }
-const styles$c = {
+const styles$d = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -35692,14 +35860,21 @@ const styles$c = {
   }
 };
 function Query({
-  rootQuery,
-  query,
-  setQuery
+  definition
 }) {
   const {
     focusMainView,
     isMainViewFocused
   } = useQueryFocus();
+  const {
+    rootQuery,
+    setQuery
+  } = useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
+  if (!rootQuery) {
+    return null;
+  }
+  const isEmpty = rootQuery.isEmpty();
   return /* @__PURE__ */ jsx(FocusableView, {
     children: /* @__PURE__ */ jsxs(CollapsiblePanel, {
       title: "Main query",
@@ -35718,44 +35893,41 @@ function Query({
               label: "Clear query",
               onClick: () => {
                 focusMainView();
-                setQuery == null ? void 0 : setQuery(void 0);
+                setQuery(void 0);
               },
-              disabled: rootQuery.isEmpty()
+              disabled: isEmpty
             }), /* @__PURE__ */ jsx(DropdownMenuItem, {
               icon: "nest",
               label: "Nest query",
               onClick: () => {
-                if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
-                  rootQuery.definition.view.convertToNest("Nest");
+                if (definition instanceof ASTArrowQueryDefinition) {
+                  definition.view.convertToNest("Nest");
                 }
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               },
-              disabled: rootQuery.isEmpty() || !(rootQuery.definition instanceof ASTArrowQueryDefinition)
+              disabled: isEmpty || !(definition instanceof ASTArrowQueryDefinition)
             })]
           }) : /* @__PURE__ */ jsx(Fragment, {})
-        }), query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
-          rootQuery,
-          view: query.definition
+        }), definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
+          view: definition
         }) : null]
       }),
       collapsedControls: /* @__PURE__ */ jsx(Icon, {
-        name: viewToVisualizationIcon(query)
+        name: tagToVisualization(rootQuery.getTag())
       }),
-      children: [query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsxs("div", {
+      children: [definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
           flexDirection: "column",
           gap: 8
         },
-        children: [!query.isEmpty() && /* @__PURE__ */ jsx(Visualization$1, {
-          rootQuery,
-          view: query
+        children: [!isEmpty && /* @__PURE__ */ jsx(Visualization$1, {
+          view: rootQuery
         }), /* @__PURE__ */ jsx(ViewDefinition, {
-          rootQuery,
-          view: query.definition,
-          viewDef: query.definition.view
+          view: definition,
+          viewDef: definition.view
         })]
-      }) : null, query.isEmpty() ? /* @__PURE__ */ jsx("div", {
+      }) : null, isEmpty ? /* @__PURE__ */ jsx("div", {
         ...{
           className: "mly78zum5 mlyl56j7k mly6s0dn4 mlyng8ra"
         },
@@ -35777,27 +35949,27 @@ function Query({
   });
 }
 function Source({
-  rootQuery
+  definition
 }) {
-  if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
+  if (definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.queryCard, styles$b.content),
+      ..._stylex.props(styles$v.queryCard, styles$c.content),
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$u.labelWithIcon),
+        ..._stylex.props(styles$v.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyb3r6kr mlylyipyv mly117nqv4"
           },
-          children: rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name
+          children: definition.source.getSourceInfo().name
         })]
       })
     });
   }
   return null;
 }
-const styles$b = {
+const styles$c = {
   content: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -35848,15 +36020,15 @@ function DateLiteralEditor({
     children: [/* @__PURE__ */ jsx(Trigger$2, {
       asChild: true,
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(tokenStyles.main, styles$a.wrapper, customStyle),
+        ..._stylex.props(tokenStyles.main, styles$b.wrapper, customStyle),
         children: /* @__PURE__ */ jsx(DateInput, {
           value: hooks.utc(date).toDate(),
           setValue: onSetValue,
           units,
           onFocus: () => setOpen(true),
           customStyle: {
-            ...styles$a.input,
-            ...isDate2 ? styles$a.dateInput : styles$a.timestampInput
+            ...styles$b.input,
+            ...isDate2 ? styles$b.dateInput : styles$b.timestampInput
           },
           forwardRef: input
         })
@@ -35872,14 +36044,14 @@ function DateLiteralEditor({
           setValue: onSetValue,
           units,
           maxLevel: units,
-          customStyle: styles$a.datePicker,
+          customStyle: styles$b.datePicker,
           forwardRef: picker
         })
       })
     })]
   });
 }
-const styles$a = {
+const styles$b = {
   input: {
     border: "mly1gs6z28",
     borderWidth: null,
@@ -36127,13 +36299,13 @@ function LiteralValueEditor({
   }
 }
 function Parameters({
-  rootQuery
+  definition
 }) {
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
-  if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
-    const source = rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource();
+  const updateQuery = useUpdateQuery();
+  if (definition instanceof ASTArrowQueryDefinition && definition.source instanceof ASTReferenceQueryArrowSource) {
+    const {
+      source
+    } = definition;
     const sourceParameters = source.getSourceParameters();
     if (!sourceParameters || sourceParameters.length === 0) {
       return null;
@@ -36147,7 +36319,7 @@ function Parameters({
         children: sourceParameters.map((parameter) => {
           var _a2;
           return /* @__PURE__ */ jsxs(TokenGroup, {
-            customStyle: styles$9.tokenGroup,
+            customStyle: styles$a.tokenGroup,
             children: [/* @__PURE__ */ jsx(Token, {
               icon: atomicTypeToIcon(parameter.type.kind),
               label: parameter.name
@@ -36156,7 +36328,7 @@ function Parameters({
               value: ((_a2 = source.tryGetParameter(parameter.name)) == null ? void 0 : _a2.parameter.value) ?? parameter.default_value,
               setValue: (value) => {
                 source.setParameter(parameter.name, value);
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }, parameter.name);
@@ -36166,7 +36338,7 @@ function Parameters({
   }
   return null;
 }
-const styles$9 = {
+const styles$a = {
   tokenGroup: {
     display: "mly78zum5",
     $$css: true
@@ -36174,27 +36346,27 @@ const styles$9 = {
 };
 function QueryEditor() {
   const {
-    rootQuery,
-    setQuery
+    rootQuery
   } = useContext(QueryEditorContext);
   if (!rootQuery) {
     console.error("Missing <MalloyExplorerProvider>");
     return null;
   }
+  const {
+    definition
+  } = rootQuery;
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(fontStyles.body, styles$8.main),
+    ..._stylex.props(fontStyles.body, styles$9.main),
     children: [/* @__PURE__ */ jsx(Source, {
-      rootQuery
+      definition
     }), /* @__PURE__ */ jsx(Parameters, {
-      rootQuery
+      definition
     }), /* @__PURE__ */ jsx(Query, {
-      rootQuery,
-      query: rootQuery,
-      setQuery
+      definition
     })]
   });
 }
-const styles$8 = {
+const styles$9 = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -36244,7 +36416,7 @@ function BookmarkedView({
             label: "view",
             icon: "view_filled",
             color: "purple",
-            customStyle: styles$7.viewBadge
+            customStyle: styles$8.viewBadge
           }), /* @__PURE__ */ jsx(Button, {
             variant: "default",
             size: "compact",
@@ -36260,14 +36432,14 @@ function BookmarkedView({
           })]
         })]
       }),
-      customStyle: styles$7.card,
+      customStyle: styles$8.card,
       children: /* @__PURE__ */ jsx(ViewAttributeTable, {
         viewInfo
       })
     })
   });
 }
-const styles$7 = {
+const styles$8 = {
   viewBadge: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -36290,7 +36462,7 @@ function EmptyQueryDisplay({
         className: "mly1bpp3o7 mly78zum5 mlydt5ytf mlyl56j7k mly6s0dn4"
       },
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$6.header, fontStyles.emphasized),
+        ..._stylex.props(styles$7.header, fontStyles.emphasized),
         children: "Start with a Bookmarked View"
       }), /* @__PURE__ */ jsx("div", {
         ...{
@@ -36306,7 +36478,7 @@ function EmptyQueryDisplay({
     })
   });
 }
-const styles$6 = {
+const styles$7 = {
   header: {
     paddingBottom: "mly1l90r2v",
     $$css: true
@@ -36500,7 +36672,7 @@ function RunInfoHover({
     children: [/* @__PURE__ */ jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$5.triggerContentContainer, fontStyles.body),
+        ..._stylex.props(styles$6.triggerContentContainer, fontStyles.body),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -36511,7 +36683,7 @@ function RunInfoHover({
         side: HOVER_SIDE,
         align: HOVER_ALIGN,
         children: /* @__PURE__ */ jsx(HoverCard, {
-          customStyle: styles$5.card,
+          customStyle: styles$6.card,
           children: /* @__PURE__ */ jsxs(Fragment, {
             children: [runInfo.customContent, (runInfo == null ? void 0 : runInfo.performanceAspects) && Object.entries(runInfo.performanceAspects).map(([aspect, properties2]) => {
               return /* @__PURE__ */ jsx("div", {
@@ -36529,7 +36701,7 @@ function RunInfoHover({
               href: runInfo.queryLink.href,
               target: "_blank",
               rel: "noreferrer",
-              ..._stylex.props(styles$5.link, fontStyles.link),
+              ..._stylex.props(styles$6.link, fontStyles.link),
               children: runInfo.queryLink.linkText
             })]
           })
@@ -36538,7 +36710,7 @@ function RunInfoHover({
     })]
   });
 }
-const styles$5 = {
+const styles$6 = {
   card: {
     maxWidth: "mly1dc814f",
     $$css: true
@@ -36733,7 +36905,7 @@ function RenderedResult({
           query: stableQuery,
           source
         });
-        setQuery == null ? void 0 : setQuery(rootQuery.build());
+        setQuery(rootQuery.build());
       },
       tableConfig: {
         enableDrill: true
@@ -36789,7 +36961,7 @@ function LoadingDisplay({
       },
       children: [/* @__PURE__ */ jsx(Spinner, {
         size: "large",
-        customStyle: styles$4.spinner
+        customStyle: styles$5.spinner
       }), /* @__PURE__ */ jsx("div", {
         ..._stylex.props(fontStyles.emphasized),
         children: `${EXECUTION_STATES[executionState]} query...`
@@ -36813,7 +36985,7 @@ function useTimeElapsedMillis(queryResolutionStartMillis) {
   }, [queryResolutionStartMillis]);
   return time;
 }
-const styles$4 = {
+const styles$5 = {
   spinner: {
     marginBottom: "mly1e56ztr",
     $$css: true
@@ -36882,6 +37054,383 @@ function CopyToClipboard({
     }
   });
 }
+class DataWriter {
+  constructor(stream, result) {
+    this.stream = stream;
+    this.result = result;
+  }
+}
+class JSONWriter extends DataWriter {
+  async process(data) {
+    this.stream.write("[\n");
+    let first = true;
+    for await (const row of data) {
+      if (first) {
+        first = false;
+      } else {
+        this.stream.write(",\n");
+      }
+      const json2 = JSON.stringify(toObject(this.result.schema.fields.filter((field) => field.kind === "dimension"), row.record_value), null, 2);
+      const jsonLines = json2.split("\n");
+      for (let i2 = 0; i2 < jsonLines.length; i2++) {
+        const line = jsonLines[i2];
+        this.stream.write(`  ${line}`);
+        if (i2 < jsonLines.length - 1) {
+          this.stream.write("\n");
+        }
+      }
+    }
+    this.stream.write("\n]\n");
+    this.stream.close();
+  }
+}
+class CSVWriter extends DataWriter {
+  constructor() {
+    super(...arguments);
+    this.columnSeparator = ",";
+    this.rowSeparator = "\n";
+    this.quoteCharacter = '"';
+    this.includeHeader = true;
+    this.emptyCell = "";
+  }
+  escape(value) {
+    const hasInnerQuote = value.includes(this.quoteCharacter);
+    const hasInnerCommas = value.includes(this.columnSeparator);
+    const hasNewline = value.includes(this.rowSeparator);
+    const needsQuoting = hasInnerCommas || hasInnerQuote || hasNewline;
+    if (hasInnerQuote) {
+      value = value.replace(new RegExp(this.quoteCharacter, "g"), this.quoteCharacter + this.quoteCharacter);
+    }
+    if (needsQuoting) {
+      value = this.quoteCharacter + value + this.quoteCharacter;
+    }
+    return value;
+  }
+  // Re-using the old stringify method for sanity.
+  stringify(value) {
+    switch (value.kind) {
+      case "string_cell":
+        return this.escape(value.string_value);
+      case "boolean_cell":
+        return JSON.stringify(value.boolean_value);
+      case "number_cell":
+        return JSON.stringify(value.number_value);
+      case "date_cell":
+        return value.date_value;
+      case "timestamp_cell":
+        return value.timestamp_value;
+      case "json_cell":
+        return this.escape(value.json_value);
+      case "null_cell":
+        return this.emptyCell;
+      case "sql_native_cell":
+        return this.escape(value.sql_native_value);
+    }
+    return "";
+  }
+  // Extra weight to be added because of nested tables inside the cells.
+  getColWeight(fields) {
+    let numKeys = 0;
+    for (const field of fields) {
+      numKeys = numKeys + 1;
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const weight = this.getColWeight(field.type.element_type.fields) - 1;
+        numKeys = numKeys + weight;
+      }
+    }
+    return numKeys;
+  }
+  // Get header row along with extra empty spaces for nested children.
+  getHeaderRow(fields) {
+    const csv = [];
+    let width = 0;
+    for (const field of fields) {
+      csv.push(this.escape(field.name));
+      width++;
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const numKeys = this.getColWeight(field.type.element_type.fields) - 1;
+        width = width + numKeys;
+        for (let i2 = 0; i2 < numKeys; i2++) {
+          csv.push(this.emptyCell);
+        }
+      }
+    }
+    return {
+      rows: [csv.join(this.columnSeparator)],
+      length: 1,
+      width
+    };
+  }
+  // Merge the child matrices i.e. merge the columns into one bigger matrix i.e. CSV.
+  mergeMatrices(matrices) {
+    const maxLength = Math.max(...matrices.map((matrix) => matrix.length));
+    const matrixWidth = matrices.reduce((sum, matrix) => sum + matrix.width, 0);
+    const csvMatrix = [];
+    for (let i2 = 0; i2 < maxLength; i2++) {
+      const csvRow = [];
+      for (const matrix of matrices) {
+        if (i2 < matrix.length) {
+          csvRow.push(matrix.rows[i2]);
+        } else {
+          const emptyCells = Array(matrix.width).fill(this.emptyCell);
+          csvRow.push(...emptyCells);
+        }
+      }
+      csvMatrix.push(csvRow.join(this.columnSeparator));
+    }
+    return {
+      rows: csvMatrix,
+      length: maxLength,
+      width: matrixWidth
+    };
+  }
+  // Gets CSV for a data cell that has nested data.
+  getChildMatrix(fields, value) {
+    if (value.kind !== "array_cell") {
+      return {
+        rows: ["Invalid data found, value is not an array"],
+        length: 1,
+        width: 1
+      };
+    } else if (value.array_value.length === 0) {
+      return {
+        rows: [""],
+        length: 1,
+        width: 1
+      };
+    }
+    const csvMatrix = [];
+    const header = this.getHeaderRow(fields);
+    csvMatrix.push(...header.rows);
+    const width = header.width;
+    let rowCount = 1;
+    for (const row of value.array_value) {
+      if (row.kind === "record_cell") {
+        const rowMatrix = this.getRowMatrix(fields, row.record_value);
+        rowCount = rowCount + rowMatrix.length;
+        csvMatrix.push(...rowMatrix.rows);
+      }
+    }
+    return {
+      rows: csvMatrix,
+      length: rowCount,
+      width
+    };
+  }
+  // Creates CSV content for one row of data.
+  getRowMatrix(fields, row) {
+    const matrices = [];
+    for (let idx = 0; idx < fields.length; idx++) {
+      const field = fields[idx];
+      const val = row[idx];
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const cell = this.getChildMatrix(field.type.element_type.fields, val);
+        matrices.push(cell);
+      } else {
+        const cell = {
+          rows: [this.stringify(val)],
+          length: 1,
+          width: 1
+        };
+        matrices.push(cell);
+      }
+    }
+    return this.mergeMatrices(matrices);
+  }
+  async process(data) {
+    let headerDefined = false;
+    for await (const row of data) {
+      const fields = this.result.schema.fields.filter((field) => field.kind === "dimension");
+      if (!headerDefined && this.includeHeader) {
+        const header = this.getHeaderRow(fields);
+        this.stream.write(header.rows[0]);
+        this.stream.write(this.rowSeparator);
+        headerDefined = true;
+      }
+      const rowCsv = this.getRowMatrix(fields, row.record_value);
+      for (const line of rowCsv.rows) {
+        this.stream.write(line);
+        this.stream.write(this.rowSeparator);
+      }
+    }
+    this.stream.close();
+  }
+}
+function toObject(fields, data) {
+  const result = {};
+  for (let idx = 0; idx < fields.length; idx++) {
+    const field = fields[idx];
+    const value = data[idx];
+    switch (value.kind) {
+      case "string_cell":
+        result[field.name] = value.string_value;
+        break;
+      case "boolean_cell":
+        result[field.name] = value.boolean_value;
+        break;
+      case "date_cell":
+        result[field.name] = value.date_value;
+        break;
+      case "timestamp_cell":
+        result[field.name] = value.timestamp_value;
+        break;
+      case "number_cell":
+        result[field.name] = value.number_value;
+        break;
+      case "json_cell":
+        result[field.name] = value.json_value;
+        break;
+      case "record_cell":
+        result[field.name] = toObject(fields, value.record_value);
+        break;
+      case "array_cell":
+        if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+          const ary = [];
+          for (const cell of value.array_value) {
+            if (cell.kind === "record_cell") {
+              ary.push(toObject(field.type.element_type.fields, cell.record_value));
+            }
+          }
+          result[field.name] = ary;
+        }
+        break;
+      case "null_cell":
+        result[field.name] = null;
+        break;
+      case "sql_native_cell":
+        result[field.name] = value.sql_native_value;
+        break;
+    }
+  }
+  return result;
+}
+async function* dataIterator(result) {
+  var _a2;
+  if (((_a2 = result.data) == null ? void 0 : _a2.kind) === "array_cell") {
+    for (const row of result.data.array_value) {
+      if (row.kind === "record_cell") {
+        yield row;
+      }
+    }
+  }
+}
+function DownloadButton({
+  name = "malloy",
+  result
+}) {
+  const [href, setHref] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [format2, _setFormat] = useState("csv");
+  useEffect(() => {
+    const createBlob = async () => {
+      if (!result) {
+        setHref("");
+        return;
+      }
+      const writeStream = new MemoryWriteStream();
+      let writer;
+      let type;
+      let fileName2;
+      if (format2 === "json") {
+        writer = new JSONWriter(writeStream, result);
+        type = "text/json";
+        fileName2 = `${name}.json`;
+      } else {
+        writer = new CSVWriter(writeStream, result);
+        type = "text/csv";
+        fileName2 = `${name}.csv`;
+      }
+      const rowStream = dataIterator(result);
+      await writer.process(rowStream);
+      writeStream.close();
+      const data = writeStream.data;
+      const blob = new Blob([data], {
+        type
+      });
+      setHref(window.URL.createObjectURL(blob));
+      setFileName(fileName2);
+    };
+    void createBlob();
+  }, [name, format2, result]);
+  useEffect(() => {
+    return () => {
+      if (href) {
+        window.URL.revokeObjectURL(href);
+      }
+    };
+  }, [href]);
+  if (href) {
+    return /* @__PURE__ */ jsxs("a", {
+      href,
+      download: fileName,
+      ...props(styles$4.link, fontStyles.body),
+      children: [/* @__PURE__ */ jsx(Icon, {
+        name: "download"
+      }), /* @__PURE__ */ jsx("div", {
+        children: "Download CSV"
+      })]
+    });
+  } else {
+    return null;
+  }
+}
+class MemoryWriteStream {
+  constructor() {
+    this._data = [];
+  }
+  write(data) {
+    this._data.push(data);
+  }
+  close() {
+  }
+  get data() {
+    return this._data.join("");
+  }
+}
+const styles$4 = {
+  link: {
+    display: "mly78zum5",
+    alignContent: "mlyc26acl",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    textDecoration: "mly1hl2dhg",
+    textDecorationColor: null,
+    textDecorationLine: null,
+    textDecorationStyle: null,
+    textDecorationThickness: null,
+    background: "mly1md70p1 mly14hn1a8 mlywghvya",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    borderRadius: "mlyur7f20",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    padding: "mlyfawy5m",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    $$css: true
+  }
+};
 var Tab = /* @__PURE__ */ function(Tab2) {
   Tab2["RESULTS"] = "Results";
   Tab2["MALLOY"] = "Malloy";
@@ -36896,7 +37445,7 @@ function ResultPanel({
   submittedQuery,
   options
 }) {
-  var _a2, _b2, _c2;
+  var _a2, _b2, _c2, _d;
   const [tab, setTab] = useState(Tab.MALLOY);
   const malloyText = (_a2 = useQueryBuilder(source, draftQuery)) == null ? void 0 : _a2.toMalloy();
   const views = source.schema.fields.filter((f2) => f2.kind === "view");
@@ -36954,6 +37503,8 @@ function ResultPanel({
       }), tab !== Tab.RESULTS && clipboardText && /* @__PURE__ */ jsx(CopyToClipboard, {
         text: clipboardText,
         label: "Copy Code"
+      }), tab === Tab.RESULTS && /* @__PURE__ */ jsx(DownloadButton, {
+        result: (_b2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _b2.result
       })]
     }), /* @__PURE__ */ jsxs("div", {
       ...{
@@ -37003,7 +37554,7 @@ function ResultPanel({
         ...{
           className: "mlywp4ipm mlyh8yej3 mly5yr21d mly9f619"
         },
-        children: ((_c2 = (_b2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _b2.result) == null ? void 0 : _c2.sql) && /* @__PURE__ */ jsx(CodeBlock, {
+        children: ((_d = (_c2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _c2.result) == null ? void 0 : _d.sql) && /* @__PURE__ */ jsx(CodeBlock, {
           code: submittedQuery.response.result.sql,
           language: "sql"
         })
@@ -37259,7 +37810,7 @@ function useOperations(view, field, path) {
   const groupByDisabledReason = useMemo(() => {
     const segment = getSegmentIfPresent(view);
     if ((matchingFieldItem == null ? void 0 : matchingFieldItem.field.kind) !== "dimension") {
-      return "Grouping is only available on a dimenion.";
+      return "Grouping is only available on a dimension.";
     }
     if (segment == null ? void 0 : segment.hasField(field.name, path)) {
       return "Cannot group by a field already in the view.";
@@ -37314,145 +37865,44 @@ function useOperations(view, field, path) {
     return "";
   }, [matchingFieldItem, view, path, field.name, fullName]);
   return {
-    isGroupByAllowed: !groupByDisabledReason,
     groupByDisabledReason,
-    isAggregateAllowed: !aggregateDisabledReason,
     aggregateDisabledReason,
-    isFilterAllowed: !filterDisabledReason,
     filterDisabledReason,
-    isOrderByAllowed: !orderByDisabledReason,
     orderByDisabledReason
   };
 }
 const FILTERABLE_TYPES = ["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"];
 const ORDERABLE_TYPES = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function FieldTokenWithActions({
+  rootQuery,
   field,
   path,
   viewDef
 }) {
-  const {
-    rootQuery,
-    setQuery
-  } = React__default.useContext(QueryEditorContext);
   const {
     focusedNestView
   } = useQueryFocus();
+  const updateQuery = useUpdateQuery();
   const view = focusedNestView ?? viewDef;
-  const {
-    groupByDisabledReason,
-    aggregateDisabledReason,
-    filterDisabledReason,
-    orderByDisabledReason
-  } = useOperations(view, field, path);
-  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState();
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const handleAddOperationAction = (operation, filter) => {
-    if (field.kind === "dimension" || field.kind === "measure") {
-      if (operation === "groupBy" && !groupByDisabledReason) {
-        addGroupBy(view, field, path);
-      } else if (operation === "aggregate" && !aggregateDisabledReason) {
-        addAggregate(view, field, path);
-      } else if (operation === "orderBy" && !orderByDisabledReason) {
-        addOrderByFromSource(view, path, field.name);
-      } else if (operation === "filter" && !filterDisabledReason && filter) {
-        addFilter(view, field, path, filter);
-      }
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
-  const handleSetView = () => {
-    if (field.kind === "view" && (rootQuery == null ? void 0 : rootQuery.isEmpty())) {
-      rootQuery == null ? void 0 : rootQuery.setView(field.name);
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
-  const handleAddView = () => {
-    if (field.kind === "view") {
-      addNest(view, field);
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
+  const showHover = isFilterPopoverOpen || isTooltipOpen;
   return /* @__PURE__ */ jsx(FieldToken, {
     field,
-    hoverActions: field.kind === "view" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(ActionButton, {
-        icon: "insert",
-        disabled: !(rootQuery == null ? void 0 : rootQuery.isEmpty()),
-        onClick: handleSetView,
-        tooltip: !(rootQuery == null ? void 0 : rootQuery.isEmpty()) ? "Can only add a view to an empty query." : "Add view",
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsx(ActionButton, {
-        icon: "nest",
-        onClick: handleAddView,
-        tooltip: "Add as new nested query",
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(ActionButton, {
-        icon: "aggregate",
-        tooltip: aggregateDisabledReason || "Add as aggregate",
-        disabled: !!aggregateDisabledReason,
-        onClick: () => handleAddOperationAction("aggregate"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ jsx(ActionButton, {
-        icon: "orderBy",
-        tooltip: orderByDisabledReason || "Add as order by",
-        disabled: !!orderByDisabledReason,
-        onClick: () => handleAddOperationAction("orderBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(ActionButton, {
-        icon: "groupBy",
-        tooltip: groupByDisabledReason || "Add as group by",
-        disabled: !!groupByDisabledReason,
-        onClick: () => handleAddOperationAction("groupBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ jsx(ActionButton, {
-        icon: "orderBy",
-        tooltip: orderByDisabledReason || "Add as order by",
-        disabled: !!orderByDisabledReason,
-        onClick: () => handleAddOperationAction("orderBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : null,
-    onClick: field.kind === "dimension" && !groupByDisabledReason ? () => handleAddOperationAction("groupBy") : field.kind === "measure" && !aggregateDisabledReason ? () => handleAddOperationAction("aggregate") : field.kind === "view" ? () => {
-      if (rootQuery == null ? void 0 : rootQuery.isEmpty()) {
-        handleSetView();
-      } else {
-        handleAddView();
+    hoverActions: /* @__PURE__ */ jsx(QueryEditorActions, {
+      rootQuery,
+      field,
+      view,
+      path,
+      setIsFilterPopoverOpen,
+      setIsTooltipOpen
+    }),
+    onClick: () => {
+      if (queryEditorClick(rootQuery, view, field, path)) {
+        updateQuery();
       }
-    } : void 0,
-    hoverActionsVisible: isFilterPopoverOpen || isTooltipOpen,
+    },
+    hoverActionsVisible: showHover,
     tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
       field,
       path
@@ -37488,8 +37938,146 @@ function ActionButton({
     })]
   });
 }
+function QueryEditorActions({
+  rootQuery,
+  view,
+  field,
+  path,
+  setIsTooltipOpen,
+  setIsFilterPopoverOpen
+}) {
+  const updateQuery = useUpdateQuery();
+  const {
+    groupByDisabledReason,
+    aggregateDisabledReason,
+    filterDisabledReason,
+    orderByDisabledReason
+  } = useOperations(view, field, path);
+  const handleAddOperationAction = (operation, filter) => {
+    if (field.kind === "dimension" || field.kind === "measure") {
+      if (operation === "groupBy" && !groupByDisabledReason) {
+        addGroupBy(view, field, path);
+      } else if (operation === "aggregate" && !aggregateDisabledReason) {
+        addAggregate(view, field, path);
+      } else if (operation === "orderBy" && !orderByDisabledReason) {
+        addOrderByFromSource(view, path, field.name);
+      } else if (operation === "filter" && !filterDisabledReason && filter) {
+        addFilter(view, field, path, filter);
+      }
+      updateQuery();
+    }
+  };
+  const handleSetView = () => {
+    if (field.kind === "view" && rootQuery.isEmpty()) {
+      rootQuery.setView(field.name);
+      updateQuery();
+    }
+  };
+  const handleAddView = () => {
+    if (field.kind === "view") {
+      addNest(view, field);
+      updateQuery();
+    }
+  };
+  return field.kind === "view" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ActionButton, {
+      icon: "insert",
+      disabled: !rootQuery.isEmpty(),
+      onClick: handleSetView,
+      tooltip: !rootQuery.isEmpty() ? "Can only add a view to an empty query." : "Add view",
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsx(ActionButton, {
+      icon: "nest",
+      onClick: handleAddView,
+      tooltip: "Add as new nested query",
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ActionButton, {
+      icon: "aggregate",
+      tooltip: aggregateDisabledReason || "Add as aggregate",
+      disabled: !!aggregateDisabledReason,
+      onClick: () => handleAddOperationAction("aggregate"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ jsx(ActionButton, {
+      icon: "orderBy",
+      tooltip: orderByDisabledReason || "Add as order by",
+      disabled: !!orderByDisabledReason,
+      onClick: () => handleAddOperationAction("orderBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ActionButton, {
+      icon: "groupBy",
+      tooltip: groupByDisabledReason || "Add as group by",
+      disabled: !!groupByDisabledReason,
+      onClick: () => handleAddOperationAction("groupBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ jsx(ActionButton, {
+      icon: "orderBy",
+      tooltip: orderByDisabledReason || "Add as order by",
+      disabled: !!orderByDisabledReason,
+      onClick: () => handleAddOperationAction("orderBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : null;
+}
+function queryEditorClick(rootQuery, view, field, path) {
+  const segment = getSegmentIfPresent(view);
+  if (field.kind === "dimension") {
+    if (!(segment == null ? void 0 : segment.hasField(field.name, path))) {
+      addGroupBy(view, field, path);
+    } else {
+      return false;
+    }
+  } else if (field.kind === "measure") {
+    if (!(segment == null ? void 0 : segment.hasField(field.name, path))) {
+      addAggregate(view, field, path);
+    } else {
+      return false;
+    }
+  } else if (field.kind === "view") {
+    if (rootQuery.isEmpty()) {
+      rootQuery.setView(field.name);
+    } else {
+      addNest(view, field);
+    }
+  } else {
+    return false;
+  }
+  return true;
+}
 const FIELD_KIND_ORDER = ["dimension", "measure", "view"];
 function SearchResultList({
+  rootQuery,
   source,
   items
 }) {
@@ -37499,10 +38087,7 @@ function SearchResultList({
       items: groupFieldItemsByPath(source, group.items)
     }));
   }, [source, items]);
-  const {
-    rootQuery
-  } = React.useContext(QueryEditorContext);
-  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
+  const viewDef = rootQuery.definition;
   if (!(viewDef instanceof ASTArrowQueryDefinition)) {
     return null;
   }
@@ -37539,6 +38124,7 @@ function SearchResultList({
           field,
           path
         }) => /* @__PURE__ */ jsx(FieldTokenWithActions, {
+          rootQuery,
           field,
           path,
           viewDef
@@ -37565,6 +38151,7 @@ const getSublabelFromPath = (source, path) => {
   return path.length > 0 ? `joined to ${[...path.slice(0, -1), source.name].join(" > ")}` : void 0;
 };
 function FieldGroupList({
+  rootQuery,
   source,
   fieldItems,
   fieldGroupType
@@ -37584,10 +38171,7 @@ function FieldGroupList({
       group
     }) => group === fieldGroupType)) == null ? void 0 : _a2.items) ?? [];
   }, [fieldGroupsByKindByPath, fieldGroupType]);
-  const {
-    rootQuery
-  } = React.useContext(QueryEditorContext);
-  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
+  const viewDef = rootQuery.definition;
   if (!(viewDef instanceof ASTArrowQueryDefinition)) {
     return null;
   }
@@ -37604,6 +38188,7 @@ function FieldGroupList({
           field,
           path
         }) => /* @__PURE__ */ jsx(FieldTokenWithActions, {
+          rootQuery,
           field,
           path,
           viewDef
@@ -37616,7 +38201,8 @@ function SourcePanel({
   onRefresh
 }) {
   const {
-    source
+    source,
+    rootQuery
   } = React.useContext(QueryEditorContext);
   const [searchQuery, setSearchQuery] = React.useState("");
   const {
@@ -37639,7 +38225,7 @@ function SourcePanel({
     return [];
   }, [fieldItems, searchQuery]);
   const isSearchActive = !!searchQuery;
-  if (!source) {
+  if (!source || !rootQuery) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
@@ -37694,6 +38280,7 @@ function SourcePanel({
         className: "mly78zum5 mlydt5ytf mlyysyzu8 mly1iyjqo2"
       },
       children: isSearchActive ? /* @__PURE__ */ jsx(SearchResultList, {
+        rootQuery,
         source,
         items: searchResultItems
       }) : /* @__PURE__ */ jsxs(AccordionList, {
@@ -37710,6 +38297,7 @@ function SourcePanel({
             color: "cyan"
           }),
           children: /* @__PURE__ */ jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "dimension"
@@ -37726,6 +38314,7 @@ function SourcePanel({
             color: "green"
           }),
           children: /* @__PURE__ */ jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "measure"
@@ -37742,6 +38331,7 @@ function SourcePanel({
             color: "purple"
           }),
           children: /* @__PURE__ */ jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "view"