@malloydata/malloy-explorer 0.0.257-dev250410160631 → 0.0.257-dev250412010850

package/dist/esm/index.js

@@ -17,7 +17,7 @@ import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo, useState, useRef, createElement, useContext, useCallback } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as QB from "@malloydata/malloy-query-builder";
-import { ASTLimitViewOperation, ASTNestViewOperation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTWhereViewOperation, ASTArrowViewDefinition, ASTRefinementViewDefinition, ASTSegmentViewDefinition, ASTArrowQueryDefinition } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTLimitViewOperation, ASTNestViewOperation, ASTRefinementViewDefinition, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTWhereViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import * as render from "@malloydata/render";
 import "@malloydata/render/webcomponent";
@@ -3592,6 +3592,15 @@ const tooltipStyles = {
   }
 };
 const fontStyles = {
+  largeBody: {
+    fontFamily: "x1rj5sg5",
+    color: "x1dhlylr",
+    fontWeight: "xo1l8bm",
+    fontSize: "x1j61zf2",
+    lineHeight: "x1fc57z9",
+    letterSpacing: "x12oo3zp",
+    $$css: true
+  },
   emphasized: {
     fontFamily: "x1rj5sg5",
     color: "x1dhlylr",
@@ -8141,16 +8150,17 @@ const styles$o = {
 function CollapsibleListItem({
   label,
   sublabel,
-  children
+  children,
+  isInitiallyExpanded = false
 }) {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(isInitiallyExpanded);
   const handleToggle = () => {
     setIsExpanded((prev) => !prev);
   };
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
-        className: "x78zum5 x6s0dn4 xl56j7k xe8ttls x167g77z xur7f20 x1ypdohk x1haqvef"
+        className: "xrvj5dj x1mt1orb x6s0dn4 xlqzeqv xe8ttls x167g77z xur7f20 x1ypdohk x1haqvef"
       },
       onClick: handleToggle,
       children: [isExpanded ? /* @__PURE__ */ jsx(Icon, {
@@ -8161,7 +8171,7 @@ function CollapsibleListItem({
         color: "secondary"
       }), /* @__PURE__ */ jsxs("div", {
         ...{
-          className: "x78zum5 xdt5ytf x1iyjqo2"
+          className: "x78zum5 xdt5ytf x1iyjqo2 xb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
           ..._stylex.props(fontStyles.body, styles$n.label),
@@ -8183,11 +8193,19 @@ const styles$n = {
   label: {
     flexGrow: "x1iyjqo2",
     fontWeight: "x1xlr1w8",
+    overflow: "xb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    textOverflow: "xlyipyv",
     $$css: true
   },
   sublabel: {
     flexGrow: "x1iyjqo2",
     color: "x12ohj93",
+    overflow: "xb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    textOverflow: "xlyipyv",
     $$css: true
   }
 };
@@ -25879,6 +25897,46 @@ function ClearButton({
     onClick
   });
 }
+function sortFieldInfoOrder(field) {
+  if (field.kind === "join") {
+    return 3;
+  } else if (field.kind === "view") {
+    return 2;
+  } else if (field.kind === "dimension") {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+function sortFieldInfos(fields) {
+  return fields.sort((a, b2) => {
+    const orderA = sortFieldInfoOrder(a);
+    const orderB = sortFieldInfoOrder(b2);
+    return orderA === orderB ? a.name.localeCompare(b2.name) : orderB - orderA;
+  });
+}
+const INDEX_FIELDS = ["fieldName", "fieldPath", "fieldValue", "fieldType", "fieldRange", "weight"];
+function isIndexView(field) {
+  const allFields = /* @__PURE__ */ new Set([...INDEX_FIELDS, ...field.schema.fields.map((field2) => field2.name)]);
+  return allFields.size === INDEX_FIELDS.length;
+}
+function getViewDefinition(parent) {
+  return parent instanceof ASTArrowQueryDefinition ? parent.view : parent.definition;
+}
+function getInputSchemaFromViewParent(parent) {
+  const definition = getViewDefinition(parent);
+  return definition.getInputSchema();
+}
+function viewParentHasField(parent, field, path) {
+  const definition = getViewDefinition(parent);
+  if (definition instanceof ASTSegmentViewDefinition) {
+    return definition.hasField(field.name, path);
+  }
+  return false;
+}
+function viewParentDoesNotHaveField(parent, field, path) {
+  return !viewParentHasField(parent, field, path);
+}
 function segmentHasLimit(segment) {
   return segment.operations.items.find((operation) => operation instanceof ASTLimitViewOperation) !== void 0;
 }
@@ -25904,11 +25962,21 @@ function segmentNestNo(segment, name) {
 function addGroupBy(rootQuery, segment, field, path, setQuery) {
   segment.addGroupBy(field.name, path);
   if (!segmentHasLimit(segment)) {
-    segment.setLimit(10);
+    segment.setLimit(1e3);
   }
-  segment.addOrderBy(field.name);
   setQuery == null ? void 0 : setQuery(rootQuery.build());
 }
+function getSegmentIfPresent(parent) {
+  const definition = getViewDefinition(parent);
+  if (definition instanceof ASTSegmentViewDefinition) {
+    return definition;
+  } else if (definition instanceof ASTRefinementViewDefinition) {
+    if (definition.refinement instanceof ASTSegmentViewDefinition) {
+      return definition.refinement;
+    }
+  }
+  return void 0;
+}
 const addMenuStyles = {
   content: {
     background: "x82tljd",
@@ -25999,29 +26067,6 @@ const addMenuStyles = {
     $$css: true
   }
 };
-function sortFieldInfoOrder(field) {
-  if (field.kind === "join") {
-    return 3;
-  } else if (field.kind === "view") {
-    return 2;
-  } else if (field.kind === "dimension") {
-    return 1;
-  } else {
-    return 0;
-  }
-}
-function sortFieldInfos(fields) {
-  return fields.sort((a, b2) => {
-    const orderA = sortFieldInfoOrder(a);
-    const orderB = sortFieldInfoOrder(b2);
-    return orderA === orderB ? a.name.localeCompare(b2.name) : orderB - orderA;
-  });
-}
-const INDEX_FIELDS = ["fieldName", "fieldPath", "fieldValue", "fieldType", "fieldRange", "weight"];
-function isIndexView(field) {
-  const allFields = /* @__PURE__ */ new Set([...INDEX_FIELDS, ...field.schema.fields.map((field2) => field2.name)]);
-  return allFields.size === INDEX_FIELDS.length;
-}
 function atomicTypeToIcon(type) {
   return atomicTypeMap[type];
 }
@@ -26463,7 +26508,7 @@ const styles$d = {
   }
 };
 function FieldList({
-  segment,
+  view,
   fields,
   onClick,
   search,
@@ -26473,7 +26518,7 @@ function FieldList({
   const groups = useMemo(() => {
     const groups2 = [];
     const buildGroups = (types22, path, name, fields2) => {
-      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => field.name.includes(search) && types22.includes(field.kind)).filter((field) => filter ? filter(segment, field, path) : true);
+      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => field.name.includes(search) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
       const joins = fields2.filter((field) => field.kind === "join");
       if (filteredFields.length) {
         groups2.push({
@@ -26494,7 +26539,7 @@ function FieldList({
     };
     buildGroups(types2, [], "Source", fields);
     return groups2;
-  }, [fields, filter, search, segment, types2]);
+  }, [fields, filter, search, view, types2]);
   return /* @__PURE__ */ jsx("div", {
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
@@ -26517,7 +26562,8 @@ function FieldList({
           tooltipProps: {
             side: "right",
             align: "start",
-            sideOffset: 4
+            sideOffset: 4,
+            alignOffset: 24
           }
         })
       }, group.name + ":" + field.name))]
@@ -26537,7 +26583,7 @@ const styles$c = {
   }
 };
 function FieldMenu({
-  segment,
+  view,
   fields,
   types: types2,
   filter,
@@ -26562,7 +26608,7 @@ function FieldMenu({
         flex: 1
       },
       children: /* @__PURE__ */ jsx(FieldList, {
-        segment,
+        view,
         fields,
         search,
         types: types2,
@@ -26574,7 +26620,7 @@ function FieldMenu({
 }
 function OperationActionTitle({
   actionTitle,
-  segment,
+  view,
   fields,
   title,
   types: types2,
@@ -26601,10 +26647,10 @@ function OperationActionTitle({
             align: "start",
             alignOffset: -16,
             children: /* @__PURE__ */ jsx(FieldMenu, {
-              segment,
+              view,
               fields,
               types: types2,
-              filter: (segment2, field, path) => !segment2.hasField(field.name, path),
+              filter: viewParentDoesNotHaveField,
               onClick
             })
           })
@@ -26638,7 +26684,7 @@ function FieldHover({
 }
 function GroupByOperations({
   rootQuery,
-  segment,
+  view,
   groupBys
 }) {
   const {
@@ -26649,16 +26695,17 @@ function GroupByOperations({
   }
   const {
     fields
-  } = segment.getInputSchema();
+  } = getInputSchemaFromViewParent(view);
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx(OperationActionTitle, {
       title: "group by",
       actionTitle: "Add group by",
       rootQuery,
-      segment,
+      view,
       fields,
       types: ["dimension"],
       onClick: (field, path) => {
+        const segment = view.getOrAddDefaultSegment();
         addGroupBy(rootQuery, segment, field, path, setQuery);
       }
     }), /* @__PURE__ */ jsx("div", {
@@ -27835,6 +27882,28 @@ function dateTimeFilterChangeType(filter, type) {
       return filter;
   }
 }
+class ErrorElement extends React.Component {
+  constructor(props2) {
+    super(props2);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(_error) {
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, info) {
+    console.error(error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}
 function WhereOperations({
   rootQuery,
   wheres
@@ -27852,117 +27921,139 @@ function WhereOperations({
     }), /* @__PURE__ */ jsx("div", {
       ..._stylex.props(styles$h.tokenContainer),
       children: wheres.map((where, key2) => {
-        const {
-          fieldReference,
-          filterString
-        } = where.filter;
-        const fieldInfo = fieldReference.getFieldInfo();
-        if (fieldInfo.kind !== "dimension" && fieldInfo.kind !== "measure") {
-          return null;
-        }
-        const icon = atomicTypeToIcon(fieldInfo.type.kind);
-        const color = fieldKindToColor(fieldInfo.kind);
-        const filter = where.filter.getFilter();
-        let rhsToken = null;
-        if (filter.kind === "string") {
-          rhsToken = /* @__PURE__ */ jsx(StringFilterToken, {
-            fieldInfo,
-            path: where.filter.fieldReference.path ?? [],
-            filter: filter.parsed,
-            setFilter: (filter2) => {
-              where.filter.setFilter({
-                kind: "string",
-                parsed: filter2
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          }, key2);
-        }
-        if (filter.kind === "boolean" && filter.parsed) {
-          rhsToken = /* @__PURE__ */ jsx(BooleanFilterToken, {
-            fieldInfo,
-            filter: filter.parsed,
-            setFilter: (filter2) => {
-              where.filter.setFilter({
-                kind: "boolean",
-                parsed: filter2
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          }, key2);
-        }
-        if (filter.kind === "number" && filter.parsed) {
-          rhsToken = /* @__PURE__ */ jsx(NumberFilterToken, {
-            fieldInfo,
-            filter: filter.parsed,
-            setFilter: (filter2) => {
-              where.filter.setFilter({
-                kind: "number",
-                parsed: filter2
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          }, key2);
-        }
-        if (filter.kind === "date" && filter.parsed) {
-          rhsToken = /* @__PURE__ */ jsx(DateTimeFilterToken, {
-            fieldInfo,
-            filter: filter.parsed,
-            setFilter: (filter2) => {
-              where.filter.setFilter({
-                kind: "date",
-                parsed: filter2
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          }, key2);
-        }
-        if (filter.kind === "timestamp" && filter.parsed) {
-          rhsToken = /* @__PURE__ */ jsx(DateTimeFilterToken, {
-            fieldInfo,
-            filter: filter.parsed,
-            setFilter: (filter2) => {
-              where.filter.setFilter({
-                kind: "timestamp",
-                parsed: filter2
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          }, key2);
-        }
-        const {
-          op,
-          value
-        } = parsedToLabels(filter, filterString);
-        if (!rhsToken) {
-          rhsToken = /* @__PURE__ */ jsxs(TokenGroup, {
-            color,
-            children: [/* @__PURE__ */ jsx(Token, {
-              icon,
-              label: fieldInfo.name
-            }), /* @__PURE__ */ jsx(Token, {
-              label: op
-            }), /* @__PURE__ */ jsx(Token, {
-              label: value
-            })]
-          });
-        }
-        return /* @__PURE__ */ jsxs("div", {
-          ..._stylex.props(hoverStyles.main),
-          children: [rhsToken, /* @__PURE__ */ jsx("div", {
-            ..._stylex.props(hoverStyles.hoverActions),
-            children: /* @__PURE__ */ jsx(ClearButton, {
+        return /* @__PURE__ */ jsx(ErrorElement, {
+          fallback: /* @__PURE__ */ jsxs("div", {
+            children: ["Invalid filter", /* @__PURE__ */ jsx(ClearButton, {
               onClick: () => {
                 where.delete();
                 setQuery == null ? void 0 : setQuery(rootQuery.build());
               }
-            })
-          })]
+            })]
+          }),
+          children: /* @__PURE__ */ jsx(SingleWhereOperation, {
+            where,
+            rootQuery
+          })
         }, key2);
       })
     })]
   });
 }
+function SingleWhereOperation({
+  rootQuery,
+  where
+}) {
+  const {
+    fieldReference,
+    filterString
+  } = where.filter;
+  const fieldInfo = fieldReference.getFieldInfo();
+  const {
+    setQuery
+  } = useContext(QueryEditorContext);
+  if (fieldInfo.kind !== "dimension" && fieldInfo.kind !== "measure") {
+    return null;
+  }
+  const icon = atomicTypeToIcon(fieldInfo.type.kind);
+  const color = fieldKindToColor(fieldInfo.kind);
+  const filter = where.filter.getFilter();
+  let rhsToken = null;
+  if (filter.kind === "string") {
+    rhsToken = /* @__PURE__ */ jsx(StringFilterToken, {
+      fieldInfo,
+      path: where.filter.fieldReference.path ?? [],
+      filter: filter.parsed,
+      setFilter: (filter2) => {
+        where.filter.setFilter({
+          kind: "string",
+          parsed: filter2
+        });
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      }
+    });
+  }
+  if (filter.kind === "boolean" && filter.parsed) {
+    rhsToken = /* @__PURE__ */ jsx(BooleanFilterToken, {
+      fieldInfo,
+      filter: filter.parsed,
+      setFilter: (filter2) => {
+        where.filter.setFilter({
+          kind: "boolean",
+          parsed: filter2
+        });
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      }
+    });
+  }
+  if (filter.kind === "number" && filter.parsed) {
+    rhsToken = /* @__PURE__ */ jsx(NumberFilterToken, {
+      fieldInfo,
+      filter: filter.parsed,
+      setFilter: (filter2) => {
+        where.filter.setFilter({
+          kind: "number",
+          parsed: filter2
+        });
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      }
+    });
+  }
+  if (filter.kind === "date" && filter.parsed) {
+    rhsToken = /* @__PURE__ */ jsx(DateTimeFilterToken, {
+      fieldInfo,
+      filter: filter.parsed,
+      setFilter: (filter2) => {
+        where.filter.setFilter({
+          kind: "date",
+          parsed: filter2
+        });
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      }
+    });
+  }
+  if (filter.kind === "timestamp" && filter.parsed) {
+    rhsToken = /* @__PURE__ */ jsx(DateTimeFilterToken, {
+      fieldInfo,
+      filter: filter.parsed,
+      setFilter: (filter2) => {
+        where.filter.setFilter({
+          kind: "timestamp",
+          parsed: filter2
+        });
+        setQuery == null ? void 0 : setQuery(rootQuery.build());
+      }
+    });
+  }
+  const {
+    op,
+    value
+  } = parsedToLabels(filter, filterString);
+  if (!rhsToken) {
+    rhsToken = /* @__PURE__ */ jsxs(TokenGroup, {
+      color,
+      children: [/* @__PURE__ */ jsx(Token, {
+        icon,
+        label: fieldInfo.name
+      }), /* @__PURE__ */ jsx(Token, {
+        label: op
+      }), /* @__PURE__ */ jsx(Token, {
+        label: value
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ..._stylex.props(hoverStyles.main),
+    children: [rhsToken, /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(hoverStyles.hoverActions),
+      children: /* @__PURE__ */ jsx(ClearButton, {
+        onClick: () => {
+          where.delete();
+          setQuery == null ? void 0 : setQuery(rootQuery.build());
+        }
+      })
+    })]
+  });
+}
 const parsedToLabels = (parsed, filterString) => {
   if (parsed.parsed === null) {
     return {
@@ -28169,7 +28260,7 @@ function LimitOperation({
 }
 function AggregateOperations({
   rootQuery,
-  segment,
+  view,
   aggregates
 }) {
   const {
@@ -28180,16 +28271,17 @@ function AggregateOperations({
   }
   const {
     fields
-  } = segment.getInputSchema();
+  } = getInputSchemaFromViewParent(view);
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx(OperationActionTitle, {
       title: "aggregate",
       actionTitle: "Add aggregate",
       rootQuery,
-      segment,
+      view,
       fields,
       types: ["measure"],
       onClick: (field, path) => {
+        const segment = view.getOrAddDefaultSegment();
         segment.addAggregate(field.name, path);
         setQuery == null ? void 0 : setQuery(rootQuery.build());
       }
@@ -28300,6 +28392,7 @@ function View({
       view
     }), /* @__PURE__ */ jsx(ViewDefinition, {
       rootQuery,
+      view,
       viewDef: view.definition
     })]
   });
@@ -28404,12 +28497,13 @@ function AddItem({
 }
 function AddLimit({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
-  const hasLimit = useMemo(() => segmentHasLimit(segment), [segment]);
+  const segment = getSegmentIfPresent(view);
+  const hasLimit = segment ? segmentHasLimit(segment) : false;
   return /* @__PURE__ */ jsx(AddItem, {
     icon: /* @__PURE__ */ jsx(Icon, {
       name: "limit"
@@ -28417,32 +28511,34 @@ function AddLimit({
     label: "Limit",
     disable: () => hasLimit,
     onClick: () => {
-      segment.setLimit(10);
+      const segment2 = view.getOrAddDefaultSegment();
+      segment2.setLimit(10);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     }
   });
 }
 function AddEmptyNest({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
-  const nestNo = segmentNestNo(segment, `Nest`);
   return /* @__PURE__ */ jsx(AddItem, {
     icon: /* @__PURE__ */ jsx(Icon, {
       name: "nest"
     }),
     label: "Add blank nested query",
     onClick: () => {
+      const segment = view.getOrAddDefaultSegment();
+      const nestNo = segmentNestNo(segment, `Nest`);
       segment.addEmptyNest(nestNo > 1 ? `Nest ${nestNo}` : `Nest`);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     }
   });
 }
 function AddFieldItem({
-  segment,
+  view,
   fields,
   icon,
   label,
@@ -28504,7 +28600,7 @@ function AddFieldItem({
         }), /* @__PURE__ */ jsx(FieldMenu, {
           types: types2,
           filter,
-          segment,
+          view,
           fields,
           onClick
         })]
@@ -28514,21 +28610,23 @@ function AddFieldItem({
 }
 function AddOrderBy({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
-  const outputSchemaFields = segment.getOutputSchema().fields;
-  const fields = useMemo(() => outputSchemaFields.filter((field) => field.kind === "dimension").filter((field) => ORDERABLE_TYPES$1.includes(field.type.kind)).filter((field) => !segmentHasOrderBy(segment, field.name)), [outputSchemaFields, segment]);
+  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]);
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add order by",
     icon: "orderBy",
-    segment,
+    view,
     fields,
     types: ["dimension"],
     onClick: (field) => {
-      segment.addOrderBy(field.name, "asc");
+      const segment2 = view.getOrAddDefaultSegment();
+      segment2.addOrderBy(field.name, "asc");
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     },
     disabledMessage: "There must be at least one field in the output to order by."
@@ -28537,44 +28635,46 @@ function AddOrderBy({
 const ORDERABLE_TYPES$1 = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function AddGroupBy({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const {
     fields
-  } = segment.getInputSchema();
+  } = getInputSchemaFromViewParent(view);
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add group by",
     icon: "groupBy",
-    segment,
+    view,
     fields,
     types: ["dimension"],
-    filter: (segment2, field, path) => !segment2.hasField(field.name, path),
+    filter: viewParentDoesNotHaveField,
     onClick: (field, path) => {
+      const segment = view.getOrAddDefaultSegment();
       addGroupBy(rootQuery, segment, field, path, setQuery);
     }
   });
 }
 function AddAggregate({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const {
     fields
-  } = segment.getInputSchema();
+  } = getInputSchemaFromViewParent(view);
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add aggregate",
     icon: "aggregate",
-    segment,
+    view,
     fields,
     types: ["measure"],
-    filter: (segment2, field, path) => !segment2.hasField(field.name, path),
+    filter: viewParentDoesNotHaveField,
     onClick: (field, path) => {
+      const segment = view.getOrAddDefaultSegment();
       segment.addAggregate(field.name, path);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     }
@@ -28582,22 +28682,23 @@ function AddAggregate({
 }
 function AddWhere({
   rootQuery,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const {
     fields
-  } = segment.getInputSchema();
+  } = getInputSchemaFromViewParent(view);
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add filter",
     icon: "filter",
-    segment,
+    view,
     fields,
     types: ["measure", "dimension"],
     filter: (_segment, field) => (field.kind === "dimension" || field.kind === "measure") && FILTERABLE_TYPES$1.has(field.type.kind),
     onClick: (field, path) => {
+      const segment = view.getOrAddDefaultSegment();
       if (field.kind === "dimension" || field.kind === "measure") {
         if (field.type.kind === "string_type") {
           segment.addWhere(field.name, path, "-null");
@@ -28618,24 +28719,24 @@ function AddWhere({
 const FILTERABLE_TYPES$1 = /* @__PURE__ */ new Set(["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"]);
 function AddView({
   rootQuery,
-  view,
-  segment
+  view
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
-  const allFields = segment.getInputSchema().fields;
+  const allFields = getInputSchemaFromViewParent(view).fields;
   const fields = useMemo(() => allFields.filter((field) => field.kind === "view" && !isIndexView(field)), [allFields]);
   return /* @__PURE__ */ jsx(AddFieldItem, {
     label: "Add view",
     icon: "view",
-    segment,
+    view,
     fields,
     types: ["view"],
     onClick: (field) => {
-      if (view === rootQuery && rootQuery.isEmpty()) {
+      if (rootQuery.isEmpty()) {
         rootQuery.setView(field.name);
       } else {
+        const segment = view.getOrAddDefaultSegment();
         const nestNo = segmentNestNo(segment, field.name);
         segment.addNest(field.name, nestNo > 1 ? `${field.name} ${nestNo}` : void 0);
       }
@@ -28730,7 +28831,6 @@ function AddMenu({
     setQuery
   } = useContext(QueryEditorContext);
   const [search, setSearch] = useState("");
-  const segment = view.getOrAddDefaultSegment();
   return /* @__PURE__ */ jsxs(Root2$2, {
     open,
     onOpenChange: (open2) => {
@@ -28770,16 +28870,16 @@ function AddMenu({
             flex: 1
           },
           children: [/* @__PURE__ */ jsx(FieldList, {
-            segment,
-            fields: segment.getInputSchema().fields,
+            view,
+            fields: getInputSchemaFromViewParent(view).fields,
             types: ["dimension", "measure", "view"],
             onClick: function(field, path) {
+              const segment = view.getOrAddDefaultSegment();
               if (field.kind === "dimension") {
                 segment.addGroupBy(field.name, path);
                 if (!segmentHasLimit(segment)) {
-                  segment.setLimit(10);
+                  segment.setLimit(1e3);
                 }
-                segment.addOrderBy(field.name);
               } else if (field.kind === "measure") {
                 segment.addAggregate(field.name, path);
               } else {
@@ -28794,6 +28894,7 @@ function AddMenu({
             onClick: (value) => {
               const path = value.fieldName.split(".");
               const name = path.pop();
+              const segment = view.getOrAddDefaultSegment();
               segment.addWhere(name, path, {
                 kind: "string",
                 parsed: {
@@ -28807,26 +28908,25 @@ function AddMenu({
         }) : /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(AddGroupBy, {
             rootQuery,
-            segment
+            view
           }), /* @__PURE__ */ jsx(AddAggregate, {
             rootQuery,
-            segment
+            view
           }), /* @__PURE__ */ jsx(AddWhere, {
             rootQuery,
-            segment
+            view
           }), /* @__PURE__ */ jsx(AddView, {
             rootQuery,
-            view,
-            segment
+            view
           }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(AddLimit, {
             rootQuery,
-            segment
+            view
           }), /* @__PURE__ */ jsx(AddOrderBy, {
             rootQuery,
-            segment
+            view
           }), /* @__PURE__ */ jsx(AddEmptyNest, {
             rootQuery,
-            segment
+            view
           })]
         })]
       })
@@ -28898,6 +28998,7 @@ function NestOperations({
 }
 function Operations({
   rootQuery,
+  view,
   viewDef
 }) {
   const groupBys = [];
@@ -28906,7 +29007,10 @@ function Operations({
   const orderBys = [];
   const nests = [];
   let limit;
-  const segment = viewDef.getOrAddDefaultSegment();
+  if (!(viewDef instanceof ASTSegmentViewDefinition)) {
+    return null;
+  }
+  const segment = viewDef;
   segment.operations.items.forEach((operation) => {
     if (operation instanceof ASTGroupByViewOperation) {
       groupBys.push(operation);
@@ -28928,53 +29032,54 @@ function Operations({
     },
     children: [/* @__PURE__ */ jsx(GroupByOperations, {
       rootQuery,
-      segment,
+      view,
       groupBys
     }), /* @__PURE__ */ jsx(AggregateOperations, {
       rootQuery,
-      segment,
+      view,
       aggregates
     }), /* @__PURE__ */ jsx(WhereOperations, {
       rootQuery,
-      segment,
       wheres
     }), /* @__PURE__ */ jsx(OrderByOperations, {
       rootQuery,
-      segment,
       orderBys
     }), /* @__PURE__ */ jsx(NestOperations, {
       rootQuery,
-      segment,
       nests
     }), /* @__PURE__ */ jsx(LimitOperation, {
       rootQuery,
-      segment,
       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 {
@@ -29087,10 +29192,10 @@ function Query({
           },
           disabled: rootQuery.isEmpty()
         }) : /* @__PURE__ */ jsx(Fragment, {})
-      }), /* @__PURE__ */ jsx(AddMenu, {
+      }), query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
         rootQuery,
-        view: query
-      })]
+        view: query.definition
+      }) : null]
     }),
     collapsedControls: /* @__PURE__ */ jsx(VisualizationIcon, {
       view: query
@@ -29106,6 +29211,7 @@ function Query({
         view: query
       }), /* @__PURE__ */ jsx(ViewDefinition, {
         rootQuery,
+        view: query.definition,
         viewDef: query.definition.view
       })]
     }) : null, query.isEmpty() ? /* @__PURE__ */ jsx("div", {
@@ -29237,7 +29343,7 @@ function Parameters({
       title: "Source parameters",
       children: /* @__PURE__ */ jsx("div", {
         ...{
-          className: "x78zum5 xf18ygs"
+          className: "x78zum5 xdt5ytf x1jnr06f xnm25rq"
         },
         children: sourceParameters.map((parameter) => {
           var _a2;
@@ -29637,11 +29743,6 @@ function ResponseDisplay({
       title: "Empty Response",
       variant: "critical"
     };
-  } else if (!response.result) {
-    bannerProps = {
-      title: "Empty Result",
-      variant: "critical"
-    };
   } else if (response.error && !response.error.customRenderer) {
     const e = response.error;
     let variant;
@@ -29666,6 +29767,11 @@ function ResponseDisplay({
       children: e.content,
       variant
     };
+  } else if (!response.result) {
+    bannerProps = {
+      title: "Empty Result",
+      variant: "critical"
+    };
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [bannerProps && /* @__PURE__ */ jsx(Banner, {
@@ -29756,6 +29862,38 @@ const styles$4 = {
     $$css: true
   }
 };
+function DebugPane({
+  query,
+  debug
+}) {
+  const [selectedDebugger, setSelectedDebugger] = useState();
+  return /* @__PURE__ */ jsxs("div", {
+    children: [debug && /* @__PURE__ */ jsxs("div", {
+      ...{
+        className: "x78zum5 x167g77z x6s0dn4"
+      },
+      children: [/* @__PURE__ */ jsx("div", {
+        ..._stylex.props(fontStyles.largeBody),
+        children: "Debug with:"
+      }), /* @__PURE__ */ jsx(SelectDropdown, {
+        options: debug.debuggers.map((d) => ({
+          label: d,
+          value: d
+        })),
+        value: selectedDebugger,
+        onChange: (v2) => setSelectedDebugger(v2)
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        label: "Run",
+        isDisabled: !selectedDebugger,
+        onClick: () => selectedDebugger && debug.onDebugQuery(query, selectedDebugger)
+      })]
+    }), /* @__PURE__ */ jsx(CodeBlock, {
+      code: JSON.stringify(query, null, 2),
+      language: "json"
+    })]
+  });
+}
 function ResultPanel({
   source,
   draftQuery,
@@ -29898,9 +30036,12 @@ function ResultPanel({
         ...{
           className: "xwp4ipm xh8yej3 x5yr21d x9f619"
         },
-        children: /* @__PURE__ */ jsx(CodeBlock, {
-          code: JSON.stringify(draftQuery, null, 2),
-          language: "json"
+        children: /* @__PURE__ */ jsx(DebugPane, {
+          query: draftQuery,
+          debug: options.debugOptions ? {
+            debuggers: options.debugOptions.debuggers,
+            onDebugQuery: options.debugOptions.onDebugQuery
+          } : void 0
         })
       })]
     })]
@@ -30520,9 +30661,10 @@ function FieldGroupList({
       ..._stylex.props(fontStyles.body, styles$1.title),
       children: title
     }), /* @__PURE__ */ jsx(List$1, {
-      children: items.map((item) => /* @__PURE__ */ jsx(CollapsibleListItem, {
+      children: items.map((item, index2) => /* @__PURE__ */ jsx(CollapsibleListItem, {
         label: getLabelFromPath(source, item.groupPath),
         sublabel: getSublabelFromPath(source, item.groupPath),
+        isInitiallyExpanded: index2 === 0,
         children: item.items.map(({
           field,
           path
@@ -30598,12 +30740,17 @@ function SourcePanel({
         },
         children: [subpanelType == null ? /* @__PURE__ */ jsxs("div", {
           ...{
-            className: "x78zum5 x6s0dn4 x167g77z xdqdrvq"
+            className: "x78zum5 x6s0dn4 x167g77z xdqdrvq xb3r6kr"
           },
           children: [/* @__PURE__ */ jsx(Icon, {
             name: "database",
             color: "gray"
-          }), source.name]
+          }), /* @__PURE__ */ jsx("div", {
+            ...{
+              className: "xb3r6kr xlyipyv"
+            },
+            children: source.name
+          })]
         }) : /* @__PURE__ */ jsx(Button, {
           icon: "chevronLeft",
           label: "Back",
@@ -30614,7 +30761,8 @@ function SourcePanel({
           children: /* @__PURE__ */ jsx(Button, {
             icon: "chevronLeft",
             tooltip: "Close the source panel",
-            onClick: () => setIsSourcePanelOpen(false)
+            onClick: () => setIsSourcePanelOpen(false),
+            size: "compact"
           })
         })]
       }), /* @__PURE__ */ jsx(TextInput, {