@malloydata/malloy-explorer 0.0.271-dev250506000031 → 0.0.275-dev250512182350

package/dist/cjs/index.cjs

@@ -19,7 +19,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const QB = require("@malloydata/malloy-query-builder");
 const malloyTag = require("@malloydata/malloy-tag");
-const render = require("@malloydata/render");
 require("@malloydata/render/webcomponent");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -40,7 +39,6 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const QB__namespace = /* @__PURE__ */ _interopNamespaceDefault(QB);
-const render__namespace = /* @__PURE__ */ _interopNamespaceDefault(render);
 const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -8176,6 +8174,82 @@ const styles$D = {
     $$css: true
   }
 };
+function CollapsiblePanel({
+  title,
+  children,
+  icon,
+  defaultOpen = true,
+  controls,
+  collapsedControls,
+  isFocused = false
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    ...{
+      0: {
+        className: "mlygbc89k mly1sxf85j mly1717udv"
+      },
+      1: {
+        className: "mly1sxf85j mly1717udv mlybwr872"
+      }
+    }[!!isFocused << 0],
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ...{
+        className: "mlyrvj5dj mly1mt1orb mly52fmzj mlylqzeqv mlyfawy5m mly167g77z mly6s0dn4"
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+        ...{
+          className: "mlyrvj5dj mly1mt1orb mlylqzeqv mly6s0dn4 mly167g77z"
+        },
+        children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
+          name: icon,
+          customStyle: styles$C.icon
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ...{
+            className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp mly117nqv4"
+          },
+          children: title
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        ...{
+          className: "mly78zum5"
+        },
+        children: [isExpanded ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ...{
+            className: "mly78zum5 mly6s0dn4 mly1jnr06f"
+          },
+          children: controls
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ...{
+            className: "mly78zum5 mly6s0dn4 mly1jnr06f"
+          },
+          children: collapsedControls
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button, {
+          variant: "flat",
+          size: "compact",
+          onClick: () => setIsExpanded(!isExpanded),
+          icon: isExpanded ? "chevronDown" : "chevronRight",
+          tooltip: isExpanded ? "Collapse" : "Expand"
+        })]
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ...{
+        0: {
+          className: "mly1l4tkcb"
+        },
+        1: {
+          className: "mly1l4tkcb mly1s85apg"
+        }
+      }[!!!isExpanded << 0],
+      children
+    })]
+  });
+}
+const styles$C = {
+  icon: {
+    $$css: true
+  }
+};
 function CollapsibleListItem({
   label,
   sublabel,
@@ -8203,10 +8277,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$C.label),
+          ..._stylex.props(fontStyles.body, styles$B.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$C.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$B.sublabel),
           children: sublabel
         })]
       })]
@@ -8218,7 +8292,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$C = {
+const styles$B = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19032,7 +19106,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$B.root, customStyle),
+    ..._stylex.props(styles$A.root, customStyle),
     children: /* @__PURE__ */ jsxRuntime.jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19052,7 +19126,7 @@ function Spinner({
     })
   });
 }
-const styles$B = {
+const styles$A = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -19515,7 +19589,7 @@ function invalidDate() {
   return this._invalidDate;
 }
 var defaultOrdinal = "%d", defaultDayOfMonthOrdinalParse = /\d{1,2}/;
-function ordinal(number2) {
+function ordinal$1(number2) {
   return this._ordinal.replace("%d", number2);
 }
 var defaultRelativeTime = {
@@ -22644,7 +22718,7 @@ var proto$1 = Locale.prototype;
 proto$1.calendar = calendar;
 proto$1.longDateFormat = longDateFormat;
 proto$1.invalidDate = invalidDate;
-proto$1.ordinal = ordinal;
+proto$1.ordinal = ordinal$1;
 proto$1.preparse = preParsePostFormat;
 proto$1.postformat = preParsePostFormat;
 proto$1.relativeTime = relativeTime;
@@ -23450,7 +23524,7 @@ const Popover = ({
     })
   });
 };
-const styles$A = {
+const styles$z = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23502,7 +23576,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$A.wrapper, customStyle),
+    ..._stylex.props(styles$z.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxRuntime.jsxs("button", {
       type: "button",
       autoFocus,
@@ -23570,7 +23644,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = React.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$A.selectListDiv, customStyle),
+      ..._stylex.props(styles$z.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23602,8 +23676,8 @@ function SelectList({
           }), /* @__PURE__ */ jsxRuntime.jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$A.checkIcon,
-              ...isSelected ? styles$A.checkIconSelected : void 0
+              ...styles$z.checkIcon,
+              ...isSelected ? styles$z.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsxRuntime.jsx("span", {
             ...{
@@ -23617,9 +23691,89 @@ function SelectList({
     })
   });
 }
+const formats = {
+  second: "YYYY-MM-DD HH:mm:ss",
+  minute: "YYYY-MM-DD HH:mm",
+  hour: "YYYY-MM-DD HH:00",
+  day: "YYYY-MM-DD",
+  week: "YYYY-MM-DD-[WK]",
+  month: "YYYY-MM",
+  quarter: "YYYY-[Q]Q",
+  year: "YYYY"
+};
+const regexps = {
+  second: /\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d/,
+  minute: /\d\d\d\d-\d\d-\d\d \d\d:\d\d/,
+  hour: /\d\d\d\d-\d\d-\d\d \d\d:00/,
+  day: /\d\d\d\d-\d\d-\d\d/,
+  week: /\d\d\d\d-\d\d-\d\d-WK/,
+  month: /\d\d\d\d-\d\d/,
+  quarter: /\d\d\d\d-Q\d/,
+  year: /\d\d\d\d/
+};
+const DateInput = ({
+  value,
+  setValue,
+  placeholder,
+  autoFocus,
+  units,
+  onFocus,
+  onBlur,
+  isActive,
+  customStyle,
+  forwardRef
+}) => {
+  const format2 = formats[units];
+  const [tempValue, setTempValue] = React.useState(hooks.utc(value).format(format2));
+  React.useEffect(() => {
+    setTempValue(hooks.utc(value).format(format2));
+  }, [value, format2]);
+  return /* @__PURE__ */ jsxRuntime.jsx("input", {
+    ..._stylex.props(customStyle, isActive ? styles$y.active : null),
+    type: "text",
+    placeholder: placeholder || format2,
+    value: tempValue,
+    onFocus,
+    onBlur,
+    onChange: (event) => {
+      const raw2 = event.target.value;
+      setTempValue(raw2);
+      const regex = regexps[units];
+      if (raw2.match(regex)) {
+        const m = hooks.utc(raw2, format2);
+        if (m.isValid()) {
+          setValue(m.toDate());
+        }
+      }
+    },
+    autoFocus,
+    ref: forwardRef
+  });
+};
+function guessUnits(moment2, isDateTime) {
+  if (moment2.moment === "literal") {
+    const {
+      literal
+    } = moment2;
+    for (const unit in regexps) {
+      const temporalUnit = unit;
+      if (literal.match(regexps[temporalUnit])) {
+        return temporalUnit;
+      }
+    }
+  }
+  return isDateTime ? "second" : "day";
+}
+const styles$y = {
+  active: {
+    backgroundColor: "mly1vzefiq",
+    $$css: true
+  }
+};
 function monthName(month) {
   return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month];
 }
+const ordinal = Object.keys(formats);
 function DatePicker({
   value,
   setValue,
@@ -23632,6 +23786,13 @@ function DatePicker({
   const calendar2 = getCalendar(date);
   const [pickLevel, setPickLevel] = React.useState(units);
   const yearBucket = Math.floor(hooks.utc(date).year() / 10) * 10;
+  React.useEffect(() => {
+    const unitOrd = ordinal.findIndex((unit) => unit === units);
+    const pickOrd = ordinal.findIndex((unit) => unit === pickLevel);
+    if (pickOrd < unitOrd) {
+      setPickLevel(units);
+    }
+  }, [units, pickLevel]);
   React.useEffect(() => {
     setDate(value);
   }, [value]);
@@ -23715,7 +23876,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$z.outer, customStyle),
+    ..._stylex.props(styles$x.outer, customStyle),
     ref: forwardRef,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
@@ -24031,7 +24192,7 @@ function DatePicker({
     })]
   });
 }
-const styles$z = {
+const styles$x = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24117,7 +24278,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ..._stylex.props(styles$y.header, variantColors[variant], children ? styles$y.headerWithContent : null),
+      ..._stylex.props(styles$w.header, variantColors[variant], children ? styles$w.headerWithContent : null),
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24130,22 +24291,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-          ..._stylex.props(styles$y.title, fontStyles.emphasized),
+          ..._stylex.props(styles$w.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ..._stylex.props(styles$y.description, fontStyles.supporting),
+          ..._stylex.props(styles$w.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$y.content, fontStyles.body),
+      ..._stylex.props(styles$w.content, fontStyles.body),
       children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$y = {
+const styles$w = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24287,14 +24448,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$x.main, customStyle),
+      ..._stylex.props(styles$v.main, customStyle),
       children: React__namespace.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [child, /* @__PURE__ */ jsxRuntime.jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$x = {
+const styles$v = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24331,10 +24492,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$w.label),
+          ..._stylex.props(fontStyles.body, styles$u.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24346,7 +24507,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$w = {
+const styles$u = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25631,7 +25792,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsxRuntime.jsx(Portal2, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$v.content),
+        ..._stylex.props(fontStyles.body, styles$t.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25658,22 +25819,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: icon,
-      customStyle: styles$v.icon
+      customStyle: styles$t.icon
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$v.label),
+        ..._stylex.props(fontStyles.body, styles$t.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$v.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$t.sublabel),
         children: sublabel
       })]
     })]
   });
 }
-const styles$v = {
+const styles$t = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25760,7 +25921,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$u.title),
+        ..._stylex.props(fontStyles.largeBody, styles$s.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -25805,13 +25966,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$u = {
+const styles$s = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$t = {
+const styles$r = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -29900,6 +30061,12 @@ function FieldToken({
   hoverActionsVisible,
   ...props2
 }) {
+  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}`;
+    }
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ...{
       0: {
@@ -29910,7 +30077,7 @@ function FieldToken({
       }
     }[!!hoverActionsVisible << 0],
     children: [/* @__PURE__ */ jsxRuntime.jsx(Token, {
-      label: field.name,
+      label,
       color: fieldKindToColor(field.kind),
       icon: fieldToIcon(field),
       ...props2
@@ -29930,32 +30097,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$s.noBackground
+      customStyle: styles$q.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$s.noBackground
+      customStyle: styles$q.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$s.noBackground
+      customStyle: styles$q.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$s.noBackground
+      customStyle: styles$q.noBackground
     });
   }
 }
-const styles$s = {
+const styles$q = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -29984,7 +30151,7 @@ function Visualization$1({
     onClick: () => setRenderer(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsxRuntime.jsx(SelectorToken, {
-    customStyle: styles$r.first,
+    customStyle: styles$p.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items: vizes,
@@ -29994,7 +30161,7 @@ function Visualization$1({
     children: tokens2
   });
 }
-const styles$r = {
+const styles$p = {
   first: {
     flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
@@ -30023,33 +30190,31 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$q.attributeTableContainer, style),
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
-      children: /* @__PURE__ */ jsxRuntime.jsx("table", {
-        ...{
-          className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", {
-          children: [/* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTableRow, {
-            attribute: "chart type",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-              ...{
-                className: "mly1rg5ohu"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(Visualization, {
-                annotations: viewInfo.annotations || []
-              })
+    ..._stylex.props(styles$o.attributeTableContainer, style),
+    children: /* @__PURE__ */ jsxRuntime.jsx("table", {
+      ...{
+        className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", {
+        children: [/* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTableRow, {
+          attribute: "chart type",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            ...{
+              className: "mly1rg5ohu"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(Visualization, {
+              annotations: viewInfo.annotations || []
             })
-          }), /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTableRow, {
-            attribute: "output",
-            children: dimensions.map((f2) => /* @__PURE__ */ jsxRuntime.jsx("span", {
-              children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
-                field: f2,
-                size: isCompact ? "compact" : "default"
-              })
-            }, `${f2.kind}::${f2.name}`))
-          })]
-        })
+          })
+        }), /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTableRow, {
+          attribute: "output",
+          children: dimensions.map((f2) => /* @__PURE__ */ jsxRuntime.jsx("span", {
+            children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
+              field: f2,
+              size: isCompact ? "compact" : "default"
+            })
+          }, `${f2.kind}::${f2.name}`))
+        })]
       })
     })
   });
@@ -30063,9 +30228,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsx("td", {
-      ..._stylex.props(styles$q.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$o.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$q.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$o.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsxRuntime.jsx("td", {
@@ -30076,7 +30241,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$q = {
+const styles$o = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -30103,6 +30268,9 @@ const styles$q = {
     boxSizing: "mly9f619",
     width: "mlyh8yej3",
     height: "mly1m3v4wt",
+    overflow: "mlyysyzu8",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   },
   attributeTableKeyCell: {
@@ -30224,7 +30392,7 @@ function HoverText({
           asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             ref: textRef,
-            ..._stylex.props(styles$p.text, fontStyles.supporting),
+            ..._stylex.props(styles$n.text, fontStyles.supporting),
             children: text2
           })
         }), /* @__PURE__ */ jsxRuntime.jsx(Portal$4, {
@@ -30232,7 +30400,7 @@ function HoverText({
             side,
             align,
             children: /* @__PURE__ */ jsxRuntime.jsx("pre", {
-              ..._stylex.props(styles$p.hoverText, fontStyles.tooltipText),
+              ..._stylex.props(styles$n.hoverText, fontStyles.tooltipText),
               children: text2
             })
           })
@@ -30241,7 +30409,7 @@ function HoverText({
     })
   });
 }
-const styles$p = {
+const styles$n = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -30294,11 +30462,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$o.container, fontStyles.body, customStyle),
+    ..._stylex.props(styles$m.container, fontStyles.body, customStyle),
     children
   });
 }
-const styles$o = {
+const styles$m = {
   container: {
     boxShadow: "mly5n1uv4",
     backgroundColor: "mly12peec7",
@@ -30343,7 +30511,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$n.viewAttributeTable
+      style: styles$l.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsxRuntime.jsx(TopValuesTable, {
@@ -30352,7 +30520,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, {
-    customStyle: styles$n.container,
+    customStyle: styles$l.container,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         ...{
@@ -30362,10 +30530,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$n.path),
+        ..._stylex.props(fontStyles.supporting, styles$l.path),
         children: pathString
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$n.title),
+        ..._stylex.props(fontStyles.emphasized, styles$l.title),
         children: field.name
       }), description && /* @__PURE__ */ jsxRuntime.jsx(HoverText, {
         text: description
@@ -30375,7 +30543,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$n = {
+const styles$l = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -30667,10 +30835,10 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$m.main),
+    ..._stylex.props(fontStyles.body, styles$k.main),
     children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ..._stylex.props(styles$m.content, customStyle),
+        ..._stylex.props(styles$k.content, customStyle),
         onKeyUp,
         onClick: () => {
           var _a2;
@@ -30737,7 +30905,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$m.pill, colorVariants[color]),
+    ..._stylex.props(styles$k.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsxRuntime.jsx("div", {
       title: "Remove",
       ...{
@@ -30752,7 +30920,7 @@ const Pill = ({
     })]
   });
 };
-const styles$m = {
+const styles$k = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -30936,7 +31104,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$l.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$j.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsxRuntime.jsx(Value, {
         value
@@ -30960,10 +31128,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$l.token
+    customStyle: styles$j.token
   });
 }
-const styles$l = {
+const styles$j = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -31139,7 +31307,7 @@ const StringFilterCore = ({
               setSearchValue("");
             }
           },
-          customStyle: styles$k.valueList
+          customStyle: styles$i.valueList
         })
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsxRuntime.jsx(StringEditor, {
@@ -31207,7 +31375,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$k = {
+const styles$i = {
   valueList: {
     maxHeight: "mly3d5gib",
     width: "mly1hfn5x7",
@@ -31462,85 +31630,6 @@ function makeFilterWithNewType(filter, type) {
       };
   }
 }
-const formats = {
-  second: "YYYY-MM-DD HH:mm:ss",
-  minute: "YYYY-MM-DD HH:mm",
-  hour: "YYYY-MM-DD HH:00",
-  day: "YYYY-MM-DD",
-  week: "[WK]YYYY-WW",
-  month: "YYYY-MM",
-  quarter: "YYYY-[Q]Q",
-  year: "YYYY"
-};
-const regexps = {
-  second: /\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d/,
-  minute: /\d\d\d\d-\d\d-\d\d \d\d:\d\d/,
-  hour: /\d\d\d\d-\d\d-\d\d \d\d:00/,
-  day: /\d\d\d\d-\d\d-\d\d/,
-  week: /WK\d\d\d\d-\d\d-\d\d/,
-  month: /\d\d\d\d-\d\d/,
-  quarter: /\d\d\d\d-Q\d/,
-  year: /\d\d\d\d/
-};
-const DateInput = ({
-  value,
-  setValue,
-  placeholder,
-  autoFocus,
-  units,
-  onFocus,
-  onBlur,
-  isActive,
-  customStyle,
-  forwardRef
-}) => {
-  const format2 = formats[units];
-  const [tempValue, setTempValue] = React.useState(hooks.utc(value).format(format2));
-  React.useEffect(() => {
-    setTempValue(hooks.utc(value).format(format2));
-  }, [value, format2]);
-  return /* @__PURE__ */ jsxRuntime.jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$j.active : null),
-    type: "text",
-    placeholder: placeholder || format2,
-    value: tempValue,
-    onFocus,
-    onBlur,
-    onChange: (event) => {
-      const raw2 = event.target.value;
-      setTempValue(raw2);
-      const regex = regexps[units];
-      if (raw2.match(regex)) {
-        const m = hooks.utc(raw2, format2);
-        if (m.isValid()) {
-          setValue(m.toDate());
-        }
-      }
-    },
-    autoFocus,
-    ref: forwardRef
-  });
-};
-function guessUnits(moment2, isDateTime) {
-  if (moment2.moment === "literal") {
-    const {
-      literal
-    } = moment2;
-    for (const unit in regexps) {
-      const temporalUnit = unit;
-      if (literal.match(regexps[temporalUnit])) {
-        return temporalUnit;
-      }
-    }
-  }
-  return isDateTime ? "second" : "day";
-}
-const styles$j = {
-  active: {
-    backgroundColor: "mly1vzefiq",
-    $$css: true
-  }
-};
 function typeFromFilter(filter) {
   if (filter.operator === "null" && filter.not) {
     return "-null";
@@ -31737,15 +31826,48 @@ function NUnitFilter({
   });
 }
 function UnitFilter({
+  currentFilter,
+  updateFilter,
   units,
   setUnits,
   maxLevel
 }) {
   const options = maxLevel === "day" ? DateUnits : [...DateUnits, ...TimeUnits];
+  const updateUnits = (units2) => {
+    setUnits(units2);
+    switch (currentFilter.operator) {
+      case "after":
+        updateFilter({
+          ...currentFilter,
+          after: updateMoment(currentFilter.after, units2)
+        });
+        return;
+      case "before":
+        updateFilter({
+          ...currentFilter,
+          before: updateMoment(currentFilter.before, units2)
+        });
+        return;
+      case "to":
+        updateFilter({
+          ...currentFilter,
+          fromMoment: updateMoment(currentFilter.fromMoment, units2),
+          toMoment: updateMoment(currentFilter.toMoment, units2)
+        });
+        return;
+      case "in": {
+        updateFilter({
+          ...currentFilter,
+          in: updateMoment(currentFilter.in, units2)
+        });
+        return;
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(SelectDropdown, {
     options,
     value: units,
-    onChange: setUnits,
+    onChange: updateUnits,
     customStyle: filterStyles.editorCell
   });
 }
@@ -31870,15 +31992,19 @@ function DoubleDateFilter({
 function createTemporalLiteral(date, units) {
   return {
     moment: "literal",
-    literal: hooks.utc(date).format(formats[units])
+    literal: hooks.utc(date).format(formats[units]),
+    units
   };
 }
 function extractDateFromMoment(momentObj) {
   if (momentObj && momentObj.moment === "literal") {
-    return hooks.utc(momentObj.literal).toDate();
+    return hooks.utc(momentObj.literal, formats[momentObj.units ?? "second"]).toDate();
   }
   return /* @__PURE__ */ new Date();
 }
+function updateMoment(moment2, units) {
+  return createTemporalLiteral(extractDateFromMoment(moment2), units);
+}
 function dateTimeFilterChangeType(filter, type, units) {
   let n = "7";
   let fromMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
@@ -31922,6 +32048,11 @@ function dateTimeFilterChangeType(filter, type, units) {
         operator: type,
         before: fromMoment
       };
+    case "in":
+      return {
+        operator: type,
+        in: fromMoment
+      };
     case "to":
       return {
         operator: type,
@@ -31987,6 +32118,13 @@ function FilterDialog({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ..._stylex.props(fontStyles.body, filterStyles.filterDialog),
+    onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        onApply();
+      } else if (event.key === "Esc") {
+        onCancel();
+      }
+    },
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       ..._stylex.props(filterStyles.filterDialogHeader),
       children: fieldInfo.name
@@ -32180,7 +32318,7 @@ function FieldList({
     ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
         "data-disabled": "true",
         children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
@@ -32190,7 +32328,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsxRuntime.jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
           children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
@@ -32217,7 +32355,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsxRuntime.jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
         children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -32240,7 +32378,7 @@ function FieldList({
     })
   });
 }
-const styles$i = {
+const styles$h = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -32258,7 +32396,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = React.useState("");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(addMenuStyles.content, styles$h.content),
+    ..._stylex.props(addMenuStyles.content, styles$g.content),
     role: "menu",
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -32284,7 +32422,7 @@ function FieldMenu({
     })]
   });
 }
-const styles$h = {
+const styles$g = {
   content: {
     maxHeight: "mly3d5gib",
     $$css: true
@@ -32311,6 +32449,7 @@ function segmentNestNo(segment, name) {
   }, 1);
 }
 function addGroupBy(view, field, path) {
+  const type = field.kind === "dimension" ? field.type.kind : "string";
   const segment = view.getOrAddDefaultSegment();
   const {
     fields
@@ -32319,7 +32458,13 @@ function addGroupBy(view, field, path) {
   if (fields.find((f2) => f2.name === field.name)) {
     rename = findUniqueFieldName(fields, field.name, path);
   }
-  segment.addGroupBy(field.name, path, rename);
+  if (type === "date_type") {
+    segment.addDateGroupBy(field.name, path, "day");
+  } else if (type === "timestamp_type") {
+    segment.addTimestampGroupBy(field.name, path, "second");
+  } else {
+    segment.addGroupBy(field.name, path, rename);
+  }
 }
 function addAggregate(view, field, path) {
   const segment = view.getOrAddDefaultSegment();
@@ -32343,6 +32488,18 @@ function addNest(view, field) {
   }
   segment.addNest(field.name, rename);
 }
+function addOrderBy(view, field, direction = "desc") {
+  const segment = view.getOrAddDefaultSegment();
+  segment.addOrderBy(field.name, direction);
+}
+function addFilter(view, field, path, filter) {
+  const segment = view.getOrAddDefaultSegment();
+  if (field.kind === "dimension") {
+    segment.addWhere(field.name, path, filter);
+  } else {
+    segment.addHaving(field.name, path, filter);
+  }
+}
 function getSegmentIfPresent(parent) {
   const definition = getViewDefinition(parent);
   if (definition instanceof QB.ASTSegmentViewDefinition) {
@@ -32368,7 +32525,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$t.title, hoverStyles.main),
+    ..._stylex.props(styles$r.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       children: title
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -32765,7 +32922,14 @@ function RenameDialog({
                 ..._stylex.props({
                   ...dialogStyles.editorCell,
                   ...dialogStyles.input
-                })
+                }),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") {
+                    onRename();
+                  } else if (event.key === "Esc") {
+                    setOpen(false);
+                  }
+                }
               }), badName && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {
                 errorMessage: "Name already in use"
               })]
@@ -32938,7 +33102,7 @@ function SortableOperations({
       fields,
       ...props2
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.tokenContainer),
+      ..._stylex.props(styles$r.tokenContainer),
       children: /* @__PURE__ */ jsxRuntime.jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -32946,6 +33110,7 @@ function SortableOperations({
         children: /* @__PURE__ */ jsxRuntime.jsx(SortableContext, {
           items,
           children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SortableOperation, {
+            rootQuery,
             id: item.id,
             color: kind === "group_by" ? "cyan" : "green",
             view,
@@ -32956,18 +33121,19 @@ function SortableOperations({
     })]
   });
 }
+const NULL_PATH = [];
 function SortableOperation({
+  rootQuery,
   id,
   view,
   operation,
   color
 }) {
   const {
-    rootQuery,
     setQuery
   } = React.useContext(QueryEditorContext);
   const fieldInfo = operation.getFieldInfo();
-  const path = operation.field.getReference().path ?? [];
+  const path = operation.field.getReference().path ?? NULL_PATH;
   const {
     attributes,
     listeners,
@@ -32987,37 +33153,64 @@ function SortableOperation({
     transform: CSS$1.Transform.toString(transform2),
     transition
   };
+  const hoverActions = React.useMemo(() => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, {
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, {
+          variant: "flat",
+          icon: "meatballs",
+          size: "compact",
+          tooltip: "More Actions"
+        }),
+        onOpenChange: setHoverActionsVisible,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
+          label: "Rename",
+          onClick: () => {
+            setRenameTarget(operation);
+            setRenameOpen(true);
+          }
+        }, "rename")]
+      }, [...path, fieldInfo.name].join(".")), /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
+        onClick: () => {
+          operation.delete();
+          setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+        }
+      })]
+    });
+  }, [fieldInfo, operation, path, rootQuery, setQuery]);
+  const granular = granularityMenuItems(fieldInfo, operation.field);
+  let icon = "orderBy";
+  if (fieldInfo.kind === "dimension" || fieldInfo.kind === "measure") {
+    icon = atomicTypeToIcon(fieldInfo.type.kind);
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     id,
     ref: setNodeRef,
     style,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
+    children: [granular ? /* @__PURE__ */ jsxRuntime.jsxs(TokenGroup, {
+      customStyle: customStyles.tokenGroup,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Token, {
+        color,
+        icon,
+        label: fieldInfo.name,
+        dragProps: {
+          attributes,
+          listeners
+        }
+      }), /* @__PURE__ */ jsxRuntime.jsx(SelectorToken, {
+        color,
+        value: granular.value,
+        onChange: (granulation) => {
+          if (operation.field.expression instanceof QB.ASTTimeTruncationExpression) operation.field.expression.truncation = granulation;
+          setQuery == null ? void 0 : setQuery(rootQuery.build());
+        },
+        items: granular.options
+      })]
+    }) : /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
       field: fieldInfo,
       color,
       hoverActionsVisible,
-      hoverActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, {
-          trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, {
-            variant: "flat",
-            icon: "meatballs",
-            size: "compact",
-            tooltip: "More Actions"
-          }),
-          onOpenChange: setHoverActionsVisible,
-          children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
-            label: "Rename",
-            onClick: () => {
-              setRenameTarget(operation);
-              setRenameOpen(true);
-            }
-          })
-        }, [...path, fieldInfo.name].join(".")), /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
-          onClick: () => {
-            operation.delete();
-            setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-          }
-        })]
-      }),
+      hoverActions,
       tooltip: /* @__PURE__ */ jsxRuntime.jsx(FieldHoverCard, {
         field: fieldInfo,
         path
@@ -33040,6 +33233,38 @@ 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 QB.ASTTimeTruncationExpression)) {
+    return null;
+  }
+  if (fieldInfo.type.kind === "timestamp_type") {
+    return {
+      value: fieldInfo.type.timeframe ?? "second",
+      options: TimestampGranulation.map((value) => ({
+        label: value,
+        value
+      }))
+    };
+  }
+  if (fieldInfo.type.kind === "date_type") {
+    return {
+      value: fieldInfo.type.timeframe ?? "day",
+      options: DateGranulation.map((value) => ({
+        label: value,
+        value
+      }))
+    };
+  }
+  return null;
+}
+const customStyles = {
+  tokenGroup: {
+    display: "mly78zum5",
+    $$css: true
+  }
+};
 function GroupByOperations({
   rootQuery,
   segment,
@@ -33088,10 +33313,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.title),
+      ..._stylex.props(styles$r.title),
       children: "filter by"
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.tokenContainer),
+      ..._stylex.props(styles$r.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -33355,7 +33580,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.title),
+      ..._stylex.props(styles$r.title),
       children: "limit"
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -33405,10 +33630,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.title),
+      ..._stylex.props(styles$r.title),
       children: "order by"
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.tokenContainer),
+      ..._stylex.props(styles$r.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -33476,77 +33701,6 @@ function View({
     })]
   });
 }
-function CollapsiblePanel({
-  title,
-  children,
-  icon,
-  defaultOpen = true,
-  controls,
-  collapsedControls,
-  isFocused = false
-}) {
-  const [isExpanded, setIsExpanded] = React.useState(defaultOpen);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...{
-      0: {
-        className: "mlygbc89k mly1sxf85j mly1717udv"
-      },
-      1: {
-        className: "mly1sxf85j mly1717udv mlybwr872"
-      }
-    }[!!isFocused << 0],
-    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ...{
-        className: "mlyrvj5dj mly1mt1orb mly52fmzj mlylqzeqv mlyfawy5m mly167g77z mly6s0dn4"
-      },
-      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ...{
-          className: "mlyrvj5dj mly1mt1orb mlylqzeqv mly6s0dn4 mly167g77z"
-        },
-        children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-          name: icon,
-          customStyle: styles$g.icon
-        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ...{
-            className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp"
-          },
-          children: title
-        })]
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ...{
-          className: "mly78zum5"
-        },
-        children: [isExpanded ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ...{
-            className: "mly78zum5 mly6s0dn4 mly1jnr06f"
-          },
-          children: controls
-        }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ...{
-            className: "mly78zum5 mly6s0dn4 mly1jnr06f"
-          },
-          children: collapsedControls
-        }), /* @__PURE__ */ jsxRuntime.jsx(Button, {
-          variant: "flat",
-          size: "compact",
-          onClick: () => setIsExpanded(!isExpanded),
-          icon: isExpanded ? "chevronDown" : "chevronRight",
-          tooltip: isExpanded ? "Collapse" : "Expand"
-        })]
-      })]
-    }), isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ...{
-        className: "mly1l4tkcb"
-      },
-      children
-    })]
-  });
-}
-const styles$g = {
-  icon: {
-    $$css: true
-  }
-};
 function AddItem({
   icon,
   label,
@@ -33669,7 +33823,8 @@ function AddFieldItem({
 }
 const styles$e = {
   list: {
-    width: "mlyqyf9gi",
+    minWidth: "mly2ixbly",
+    maxWidth: "mly1j9u4d2",
     $$css: true
   }
 };
@@ -33691,8 +33846,7 @@ function AddOrderBy({
     fields,
     types: ["dimension"],
     onAddOperation: (field) => {
-      const segment2 = view.getOrAddDefaultSegment();
-      segment2.addOrderBy(field.name, "asc");
+      addOrderBy(view, field);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     },
     disabledMessage: "There must be at least one field in the output to order by.",
@@ -33769,28 +33923,21 @@ function AddWhere({
   const {
     fields
   } = getInputSchemaFromViewParent(view);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsx(AddFieldItem, {
-      label: "Add filter",
-      icon: "filter",
-      view,
-      fields,
-      types: ["measure", "dimension"],
-      filter: (_segment, field) => (field.kind === "dimension" || field.kind === "measure") && FILTERABLE_TYPES$1.has(field.type.kind) && isNotAnnotatedFilteredField(field),
-      onAddOperation: (field, path, filter) => {
-        if (filter && (field.kind === "dimension" || field.kind === "measure")) {
-          const segment = view.getOrAddDefaultSegment();
-          if (field.kind === "dimension") {
-            segment.addWhere(field.name, path, filter);
-          } else {
-            segment.addHaving(field.name, path, filter);
-          }
-          setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-        }
-      },
-      isFilterOperation: true,
-      search
-    })
+  return /* @__PURE__ */ jsxRuntime.jsx(AddFieldItem, {
+    label: "Add filter",
+    icon: "filter",
+    view,
+    fields,
+    types: ["measure", "dimension"],
+    filter: (_segment, field) => (field.kind === "dimension" || field.kind === "measure") && FILTERABLE_TYPES$1.has(field.type.kind) && isNotAnnotatedFilteredField(field),
+    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());
+      }
+    },
+    isFilterOperation: true,
+    search
   });
 }
 const FILTERABLE_TYPES$1 = /* @__PURE__ */ new Set(["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"]);
@@ -34007,7 +34154,7 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$t.tokenContainer),
+    ..._stylex.props(styles$r.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsxRuntime.jsx(NestOperation, {
       rootQuery,
       view,
@@ -34046,7 +34193,6 @@ function NestOperation({
       onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
     }
   };
-  const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
   const getControls = (nest2) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, {
       trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, {
@@ -34085,7 +34231,7 @@ function NestOperation({
       children: [/* @__PURE__ */ jsxRuntime.jsx(CollapsiblePanel, {
         title: nest.name,
         icon: viewToVisualizationIcon(nest.view),
-        defaultOpen,
+        defaultOpen: true,
         controls: getControls(nest),
         collapsedControls: getControls(nest),
         isFocused: isCurrentNestQueryPanelFocused,
@@ -34210,7 +34356,7 @@ function ViewDefinition({
 function CollapsingView({
   viewDef
 }) {
-  const [collapsed, setCollapsed] = React.useState(true);
+  const [collapsed, setCollapsed] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ...{
       0: {
@@ -34284,6 +34430,7 @@ function Query({
     onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(null);
     onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
   };
+  const canEditViz = query.definition instanceof QB.ASTSegmentViewDefinition;
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     onPointerDownCapture: focusMainQueryPanel,
     children: /* @__PURE__ */ jsxRuntime.jsxs(CollapsiblePanel, {
@@ -34332,7 +34479,7 @@ function Query({
           flexDirection: "column",
           gap: 8
         },
-        children: [!query.isEmpty() && /* @__PURE__ */ jsxRuntime.jsx(Visualization$1, {
+        children: [!query.isEmpty() && canEditViz && /* @__PURE__ */ jsxRuntime.jsx(Visualization$1, {
           rootQuery,
           view: query
         }), /* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
@@ -34346,12 +34493,13 @@ function Query({
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
           ...{
-            className: "mly78zum5 mly6s0dn4"
+            className: "mly78zum5 mly6s0dn4 mlywzxoxx"
           },
           children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
             children: "Click"
           }), /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-            name: "insert"
+            name: "insert",
+            color: "disabled"
           }), /* @__PURE__ */ jsxRuntime.jsx("div", {
             children: "to get started"
           })]
@@ -34365,14 +34513,14 @@ function Source({
 }) {
   if (rootQuery.definition instanceof QB.ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$t.queryCard, styles$b.content),
+      ..._stylex.props(styles$r.queryCard, styles$b.content),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ..._stylex.props(styles$t.labelWithIcon),
+        ..._stylex.props(styles$r.labelWithIcon),
         children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsxRuntime.jsx("div", {
           ...{
-            className: "mlyb3r6kr mlylyipyv"
+            className: "mlyb3r6kr mlylyipyv mly117nqv4"
           },
           children: rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name
         })]
@@ -35173,34 +35321,22 @@ function Banners({
 function RenderedResult({
   result
 }) {
-  const [html2, setHTML] = React__namespace.useState();
-  const [rendering, setRendering] = React__namespace.useState(true);
-  React__namespace.useEffect(() => {
-    let canceled = false;
-    setRendering(true);
-    const updateResults = async () => {
-      const renderer = new render__namespace.HTMLView(document);
-      const html22 = await renderer.render(result, {
-        dataStyles: {},
-        isDrillingEnabled: true
-      });
-      if (canceled) {
-        return;
-      }
-      setRendering(false);
-      setHTML(html22);
-    };
-    updateResults();
-    return () => {
-      canceled = true;
-    };
+  const [renderer, setRenderer] = React.useState();
+  React.useEffect(() => {
+    const renderer2 = document.createElement("malloy-render");
+    renderer2.malloyResult = result;
+    setRenderer(renderer2);
   }, [result]);
-  if (!rendering) return html2 && /* @__PURE__ */ jsxRuntime.jsx(DOMElement, {
-    className: "malloy-render_result-wrapper",
-    element: html2
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+  if (renderer) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DOMElement, {
+      element: renderer,
+      style: {
+        overflow: "hidden",
+        height: "100%"
+      }
+    });
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ...{
         className: "mly78zum5 mlyl56j7k mly6s0dn4"
       },
@@ -35215,8 +35351,8 @@ function RenderedResult({
           children: "Rendering..."
         })]
       })
-    })
-  });
+    });
+  }
 }
 function LoadingDisplay({
   onCancel,
@@ -35413,7 +35549,7 @@ function ResultPanel({
       children: [/* @__PURE__ */ jsxRuntime.jsx(Content, {
         value: "Results",
         ...{
-          className: "mlyc7ga6q mlyh8yej3 mly5yr21d mly9f619 mlyysyzu8"
+          className: "mlyc7ga6q mlyh8yej3 mly5yr21d mly9f619"
         },
         children: submittedQuery && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [draftQuery && submittedQuery && !queriesAreEqual(draftQuery, submittedQuery.query) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -35772,6 +35908,7 @@ function FieldTokenWithActions({
     isOrderByAllowed
   } = useOperations(view, field, path);
   const [isFilterPopoverOpen, setIsFilterPopoverOpen] = React.useState();
+  const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
   const handleAddOperationAction = (operation, filter) => {
     if (field.kind === "dimension" || field.kind === "measure") {
       if (operation === "groupBy" && isGroupByAllowed) {
@@ -35779,15 +35916,9 @@ function FieldTokenWithActions({
       } else if (operation === "aggregate" && isAggregateAllowed) {
         addAggregate(view, field, path);
       } else if (operation === "orderBy" && isOrderByAllowed) {
-        const segment = view.getOrAddDefaultSegment();
-        segment.addOrderBy(field.name, "asc");
+        addOrderBy(view, field);
       } else if (operation === "filter" && isFilterAllowed && filter) {
-        const segment = view.getOrAddDefaultSegment();
-        if (field.kind === "dimension") {
-          segment.addWhere(field.name, path, filter);
-        } else {
-          segment.addHaving(field.name, path, filter);
-        }
+        addFilter(view, field, path, filter);
       }
       setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
     }
@@ -35811,18 +35942,21 @@ function FieldTokenWithActions({
         icon: "insert",
         disabled: !(rootQuery == null ? void 0 : rootQuery.isEmpty()),
         onClick: handleSetView,
-        tooltip: "Add view"
+        tooltip: "Add view",
+        onTooltipOpenChange: setIsTooltipOpen
       }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
         icon: "nest",
         onClick: handleAddView,
-        tooltip: "Add as new nested query"
+        tooltip: "Add as new nested query",
+        onTooltipOpenChange: setIsTooltipOpen
       })]
     }) : field.kind === "measure" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
         icon: "aggregate",
         tooltip: "Add as aggregate",
         disabled: !isAggregateAllowed,
-        onClick: () => handleAddOperationAction("aggregate")
+        onClick: () => handleAddOperationAction("aggregate"),
+        onTooltipOpenChange: setIsTooltipOpen
       }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
         fieldInfo: field,
         path,
@@ -35830,21 +35964,24 @@ function FieldTokenWithActions({
         trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
           icon: "filter",
           tooltip: "Add as filter",
-          disabled: !isFilterAllowed
+          disabled: !isFilterAllowed,
+          onTooltipOpenChange: setIsTooltipOpen
         }),
         onOpenChange: setIsFilterPopoverOpen
       }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
         icon: "orderBy",
         tooltip: "Add as order by",
         disabled: !isOrderByAllowed,
-        onClick: () => handleAddOperationAction("orderBy")
+        onClick: () => handleAddOperationAction("orderBy"),
+        onTooltipOpenChange: setIsTooltipOpen
       })]
     }) : field.kind === "dimension" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
         icon: "groupBy",
         tooltip: "Add as group by",
         disabled: !isGroupByAllowed,
-        onClick: () => handleAddOperationAction("groupBy")
+        onClick: () => handleAddOperationAction("groupBy"),
+        onTooltipOpenChange: setIsTooltipOpen
       }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
         fieldInfo: field,
         path,
@@ -35852,17 +35989,20 @@ function FieldTokenWithActions({
         trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
           icon: "filter",
           tooltip: "Add as filter",
-          disabled: !isFilterAllowed
+          disabled: !isFilterAllowed,
+          onTooltipOpenChange: setIsTooltipOpen
         }),
         onOpenChange: setIsFilterPopoverOpen
       }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
         icon: "orderBy",
         tooltip: "Add as order by",
         disabled: !isOrderByAllowed,
-        onClick: () => handleAddOperationAction("orderBy")
+        onClick: () => handleAddOperationAction("orderBy"),
+        onTooltipOpenChange: setIsTooltipOpen
       })]
     }) : null,
-    hoverActionsVisible: isFilterPopoverOpen,
+    onClick: field.kind === "dimension" && isGroupByAllowed ? () => handleAddOperationAction("groupBy") : field.kind === "measure" && isAggregateAllowed ? () => handleAddOperationAction("aggregate") : field.kind === "view" ? () => handleAddView() : void 0,
+    hoverActionsVisible: isFilterPopoverOpen || isTooltipOpen,
     tooltip: /* @__PURE__ */ jsxRuntime.jsx(FieldHoverCard, {
       field,
       path
@@ -35874,11 +36014,28 @@ function FieldTokenWithActions({
     }
   });
 }
-function ActionButton(props2) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, {
-    variant: "flat",
-    size: "compact",
-    ...props2
+function ActionButton({
+  tooltip,
+  onTooltipOpenChange,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, {
+    delayDuration: 300,
+    onOpenChange: onTooltipOpenChange,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button, {
+        variant: "flat",
+        size: "compact",
+        ...props2
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx(TooltipPortal, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, {
+        sideOffset: 8,
+        ..._stylex.props(fontStyles.body, tooltipStyles.default),
+        children: tooltip
+      })
+    })]
   });
 }
 const FIELD_KIND_ORDER = ["dimension", "measure", "view"];