@malloydata/malloy-explorer 0.0.278-dev250516210719 → 0.0.282-dev250528154617

package/dist/esm/index.js

@@ -17,7 +17,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo, useState, useRef, createElement, useContext, useCallback, createContext, memo, useReducer } from "react";
 import * as QB from "@malloydata/malloy-query-builder";
-import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTRefinementViewDefinition, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTNestViewOperation, ASTTimeTruncationExpression, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTQuery } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import { TemporalFilterExpression, BooleanFilterExpression, NumberFilterExpression, StringFilterExpression } from "@malloydata/malloy-filter";
 import "@malloydata/render/webcomponent";
@@ -3324,29 +3324,105 @@ function useQueryBuilder(source, query) {
     }
   }, [source, query]);
 }
+const MalloyQueryFocusContext = /* @__PURE__ */ React.createContext({
+  focusMainView: () => {
+  },
+  isMainViewFocused: true,
+  focusNestView: () => {
+  },
+  isNestViewFocused: () => false,
+  focusedNestView: null
+});
+function MalloyQueryFocusProvider({
+  rootQuery,
+  focusedNestViewPath,
+  onFocusedNestViewPathChange,
+  children
+}) {
+  const focusedNestView = React.useMemo(() => {
+    if (focusedNestViewPath.length === 0) {
+      return null;
+    }
+    if (rootQuery) {
+      const queryDef = rootQuery.definition;
+      if (queryDef instanceof ASTArrowQueryDefinition) {
+        return findNestView(queryDef.view, [...focusedNestViewPath].reverse());
+      }
+    }
+    return null;
+  }, [rootQuery, focusedNestViewPath]);
+  const focusMainView = React.useCallback(() => {
+    onFocusedNestViewPathChange([]);
+  }, [onFocusedNestViewPathChange]);
+  const focusNestView = React.useCallback((path) => {
+    onFocusedNestViewPathChange([...path]);
+  }, [onFocusedNestViewPathChange]);
+  const isNestViewFocused = React.useCallback((path) => {
+    return JSON.stringify(path) === JSON.stringify(focusedNestViewPath);
+  }, [focusedNestViewPath]);
+  const isMainViewFocused = focusedNestViewPath.length === 0;
+  return /* @__PURE__ */ jsx(MalloyQueryFocusContext.Provider, {
+    value: {
+      focusMainView,
+      isMainViewFocused,
+      focusNestView,
+      isNestViewFocused,
+      focusedNestView
+    },
+    children
+  });
+}
+function useQueryFocus() {
+  return React.useContext(MalloyQueryFocusContext);
+}
+const findNestView = (currentView, remainingPath) => {
+  if (remainingPath.length === 0) {
+    return null;
+  }
+  if (currentView instanceof ASTArrowViewDefinition) {
+    return findNestView(currentView.view, remainingPath);
+  }
+  if (currentView instanceof ASTSegmentViewDefinition) {
+    const currentNestName = remainingPath.pop();
+    const currentNestOperation = currentView.operations.items.find((operation) => operation instanceof ASTNestViewOperation && operation.name === currentNestName);
+    if (currentNestOperation === void 0) {
+      remainingPath.push(currentNestName);
+      return null;
+    } else if (remainingPath.length === 0) {
+      return currentNestOperation.view;
+    } else {
+      return findNestView(currentNestOperation.view.definition, remainingPath);
+    }
+  }
+  if (currentView instanceof ASTRefinementViewDefinition) {
+    return findNestView(currentView.refinement, remainingPath);
+  }
+  return null;
+};
 function MalloyExplorerProvider({
   source,
   query,
-  setQuery,
+  onQueryChange,
+  focusedNestViewPath,
+  onFocusedNestViewPathChange,
   children,
   topValues
 }) {
   const rootQuery = useQueryBuilder(source, query);
-  const [currentNestView, setCurrentNestView] = React.useState(null);
-  const [currentNestQueryPanel, setCurrentNestQueryPanel] = React.useState(null);
   return /* @__PURE__ */ jsx(TooltipProvider, {
-    children: /* @__PURE__ */ jsx(QueryEditorContext.Provider, {
-      value: {
-        source,
-        rootQuery,
-        setQuery,
-        topValues,
-        currentNestQueryPanel,
-        onCurrentNestQueryPanelChange: setCurrentNestQueryPanel,
-        currentNestView,
-        onCurrentNestViewChange: setCurrentNestView
-      },
-      children
+    children: /* @__PURE__ */ jsx(MalloyQueryFocusProvider, {
+      rootQuery,
+      focusedNestViewPath,
+      onFocusedNestViewPathChange,
+      children: /* @__PURE__ */ jsx(QueryEditorContext.Provider, {
+        value: {
+          source,
+          rootQuery,
+          setQuery: onQueryChange,
+          topValues
+        },
+        children
+      })
     })
   });
 }
@@ -25863,13 +25939,14 @@ function QueryActionBar({
   const {
     rootQuery,
     setQuery,
-    source,
-    onCurrentNestQueryPanelChange,
-    onCurrentNestViewChange
+    source
   } = useContext(QueryEditorContext);
   const {
     onCollapse
   } = useContext(ResizableCollapsiblePanelContext);
+  const {
+    focusMainView
+  } = useQueryFocus();
   const isQueryEmpty = !rootQuery || rootQuery.isEmpty();
   const isRunEnabled = rootQuery == null ? void 0 : rootQuery.isRunnable();
   const onRunQuery = () => {
@@ -25877,10 +25954,6 @@ function QueryActionBar({
       runQuery(source, rootQuery.build());
     }
   };
-  const focusMainQueryPanel = () => {
-    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
-    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(null);
-  };
   return /* @__PURE__ */ jsxs("div", {
     ...{
       className: "mly78zum5 mly1qughib mly6s0dn4 mlye8ttls"
@@ -25901,7 +25974,7 @@ function QueryActionBar({
       },
       children: [/* @__PURE__ */ jsx(Button, {
         onClick: () => {
-          focusMainQueryPanel();
+          focusMainView();
           setQuery == null ? void 0 : setQuery(void 0);
         },
         isDisabled: !rootQuery || (rootQuery == null ? void 0 : rootQuery.isEmpty()),
@@ -26027,6 +26100,85 @@ const styles$s = {
     $$css: true
   }
 };
+function LiteralValue({
+  value,
+  customStyle
+}) {
+  if (!value) {
+    return /* @__PURE__ */ jsx(Token, {
+      label: "∅"
+    });
+  }
+  switch (value.kind) {
+    case "boolean_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: value.boolean_value ? "true" : "false",
+        customStyle
+      });
+    case "date_literal":
+    case "timestamp_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: "TODO",
+        customStyle
+      });
+    case "null_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: "∅"
+      });
+    case "number_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: value.number_value.toLocaleString(),
+        customStyle
+      });
+    case "string_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: value.string_value,
+        customStyle
+      });
+    case "filter_expression_literal":
+      return /* @__PURE__ */ jsx(Token, {
+        label: value.filter_expression_value,
+        customStyle
+      });
+  }
+}
+function DrillOperations({
+  drills
+}) {
+  if (!drills.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.title),
+      children: "drills"
+    }), /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mlydt5ytf mly1jnr06f"
+      },
+      children: drills.map((drill, key2) => /* @__PURE__ */ jsxs(TokenGroup, {
+        color: "cyan",
+        customStyle: localStyles.tokenGroup,
+        children: [/* @__PURE__ */ jsx(Token, {
+          label: drill.filter.fieldReference.name,
+          icon: "filter"
+        }), /* @__PURE__ */ jsx(Token, {
+          label: "="
+        }), drill.filter instanceof ASTFilterWithLiteralEquality ? /* @__PURE__ */ jsx(LiteralValue, {
+          value: drill.filter.value.node
+        }) : /* @__PURE__ */ jsx(Token, {
+          label: drill.filter.filterString
+        })]
+      }, key2))
+    })]
+  });
+}
+const localStyles = {
+  tokenGroup: {
+    display: "mly78zum5",
+    $$css: true
+  }
+};
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -32401,7 +32553,9 @@ function getOutputNameToInputNameMap(segment) {
   for (const operation of segment.operations.items) {
     if (operation instanceof ASTGroupByViewOperation || operation instanceof ASTAggregateViewOperation) {
       const reference = operation.field.getReference();
-      nameMap.set(operation.name, toFullName(reference.path, reference.name));
+      if (reference) {
+        nameMap.set(operation.name, toFullName(reference.path, reference.name));
+      }
     }
   }
   return nameMap;
@@ -32423,8 +32577,11 @@ function segmentHasFieldInOutputSpace(segment, path, name) {
   const match = segment.operations.items.find((operation) => {
     if (operation instanceof ASTGroupByViewOperation || operation instanceof ASTAggregateViewOperation) {
       const reference = operation.field.getReference();
-      const isEqual = areReferencesEqual(path, name, reference.path, reference.name);
-      return isEqual;
+      if (reference) {
+        return areReferencesEqual(path, name, reference.path, reference.name);
+      } else {
+        return false;
+      }
     }
     return false;
   });
@@ -33141,11 +33298,12 @@ function SortableOperation({
   operation,
   color
 }) {
+  var _a2;
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const fieldInfo = operation.getFieldInfo();
-  const path = operation.field.getReference().path ?? NULL_PATH;
+  const path = ((_a2 = operation.field.getReference()) == null ? void 0 : _a2.path) ?? NULL_PATH;
   const {
     attributes,
     listeners,
@@ -33346,28 +33504,62 @@ const parsedToLabels = (parsed, filterString) => {
             value = stringClause.escaped_values.join(", ");
             break;
           case "=":
-            op = "is";
-            value = stringClause.values.join(", ");
+            {
+              const {
+                not,
+                values
+              } = stringClause;
+              op = not ? "is not" : "is";
+              value = values.join(", ");
+            }
             break;
           case "contains":
-            op = "contains";
-            value = stringClause.values.join(", ");
+            {
+              const {
+                not,
+                values
+              } = stringClause;
+              op = not ? "does not contain" : "contains";
+              value = values.join(", ");
+            }
             break;
           case "starts":
-            op = "starts with";
-            value = stringClause.values.join(", ");
+            {
+              const {
+                not,
+                values
+              } = stringClause;
+              op = not ? "does not start with" : "starts with";
+              value = values.join(", ");
+            }
             break;
           case "ends":
-            op = "is like";
-            value = stringClause.values.join(", ");
+            {
+              const {
+                not,
+                values
+              } = stringClause;
+              op = not ? "does not end with" : "ends with";
+              value = values.join(", ");
+            }
             break;
           case "empty":
-            op = "is empty";
-            value = "";
+            {
+              const {
+                not
+              } = stringClause;
+              op = not ? "is not empty" : "is empty";
+              value = "";
+            }
             break;
           case "null":
-            op = stringClause.not ? "is not" : "is";
-            value = "null";
+            {
+              const {
+                not
+              } = stringClause;
+              op = not ? "is not" : "is";
+              value = "null";
+            }
             break;
         }
       }
@@ -33531,22 +33723,27 @@ function SingleFilterOperation({
   rootQuery,
   filterOperation
 }) {
+  const {
+    setQuery
+  } = useContext(QueryEditorContext);
+  const setFilter = useCallback((filter2) => {
+    if (filterOperation.filter instanceof ASTFilterWithFilterString) {
+      filterOperation.filter.setFilter(filter2);
+    }
+    setQuery == null ? void 0 : setQuery(rootQuery.build());
+  }, [filterOperation.filter, rootQuery, setQuery]);
+  if (!(filterOperation.filter instanceof ASTFilterWithFilterString)) {
+    return null;
+  }
   const {
     fieldReference,
     filterString
   } = filterOperation.filter;
   const filter = filterOperation.filter.getFilter();
   const fieldInfo = fieldReference.getFieldInfo();
-  const {
-    setQuery
-  } = useContext(QueryEditorContext);
   if (fieldInfo.kind !== "dimension" && fieldInfo.kind !== "measure") {
     throw new Error(`Invalid filter field kind: ${fieldInfo.kind}`);
   }
-  const setFilter = useCallback((filter2) => {
-    filterOperation.filter.setFilter(filter2);
-    setQuery == null ? void 0 : setQuery(rootQuery.build());
-  }, [filterOperation.filter, rootQuery, setQuery]);
   const {
     op,
     value
@@ -34157,6 +34354,35 @@ const styles$d = {
     $$css: true
   }
 };
+const NestViewPathContext = /* @__PURE__ */ React__default.createContext([]);
+function FocusableView({
+  children,
+  nest
+}) {
+  const {
+    focusNestView,
+    focusMainView
+  } = useQueryFocus();
+  const parentNestViewPath = useContext(NestViewPathContext);
+  return /* @__PURE__ */ jsx("div", {
+    onPointerDown: (e) => {
+      e.stopPropagation();
+      if (nest) {
+        focusNestView([...parentNestViewPath, nest.name]);
+      } else {
+        focusMainView();
+      }
+    },
+    children: nest ? /* @__PURE__ */ jsx(NestViewPathContext.Provider, {
+      value: [...parentNestViewPath, nest.name],
+      children: /* @__PURE__ */ jsx("div", {
+        children
+      })
+    }) : /* @__PURE__ */ jsx("div", {
+      children
+    })
+  });
+}
 function NestOperations({
   rootQuery,
   view,
@@ -34180,31 +34406,14 @@ function NestOperation({
   nest
 }) {
   const {
-    setQuery,
-    currentNestQueryPanel,
-    onCurrentNestQueryPanelChange,
-    onCurrentNestViewChange
+    setQuery
   } = useContext(QueryEditorContext);
   const [renameOpen, setRenameOpen] = useState(false);
-  const panelRef = React.useRef(null);
-  const isCurrentNestQueryPanelFocused = currentNestQueryPanel !== null && panelRef.current == currentNestQueryPanel;
-  React.useEffect(() => {
-    if (isCurrentNestQueryPanelFocused) {
-      onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(nest.view);
-    }
-  }, [nest, isCurrentNestQueryPanelFocused, onCurrentNestViewChange]);
-  const focusCurrentNestQueryPanel = () => {
-    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(panelRef.current);
-    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(nest.view);
-  };
-  const focusParentQueryPanel = () => {
-    const currentPanel = panelRef.current;
-    const parent = findParentNestQueryPanel(currentPanel);
-    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(parent);
-    if (parent === null) {
-      onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
-    }
-  };
+  const parentNestViewPath = useContext(NestViewPathContext);
+  const {
+    focusNestView,
+    isNestViewFocused
+  } = useQueryFocus();
   const getControls = (nest2) => /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(DropdownMenu, {
       trigger: /* @__PURE__ */ jsx(Button, {
@@ -34217,7 +34426,7 @@ function NestOperation({
         icon: "clear",
         label: "Delete Query",
         onClick: () => {
-          focusParentQueryPanel();
+          focusNestView([...parentNestViewPath]);
           nest2.delete();
           setQuery == null ? void 0 : setQuery(rootQuery.build());
         }
@@ -34232,21 +34441,19 @@ function NestOperation({
       view: nest2.view
     })]
   });
-  return /* @__PURE__ */ jsx("div", {
-    ...{
-      className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
-    },
+  return /* @__PURE__ */ jsx(FocusableView, {
+    nest,
     children: /* @__PURE__ */ jsxs("div", {
-      ref: panelRef,
-      onPointerDownCapture: focusCurrentNestQueryPanel,
-      "data-nest-panel": true,
+      ...{
+        className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
+      },
       children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
         title: nest.name,
         icon: viewToVisualizationIcon(nest.view),
         defaultOpen: true,
         controls: getControls(nest),
         collapsedControls: getControls(nest),
-        isFocused: isCurrentNestQueryPanelFocused,
+        isFocused: isNestViewFocused([...parentNestViewPath, nest.name]),
         children: /* @__PURE__ */ jsx(View, {
           rootQuery,
           view: nest.view
@@ -34258,14 +34465,8 @@ function NestOperation({
         open: renameOpen,
         setOpen: setRenameOpen
       })]
-    })
-  }, nest.name);
-}
-function findParentNestQueryPanel(element2) {
-  if (!element2 || !element2.parentElement) return null;
-  const parentElement = element2.parentElement;
-  if (parentElement.dataset.nestPanel !== void 0) return parentElement;
-  return findParentNestQueryPanel(parentElement);
+    }, nest.name)
+  });
 }
 function Operations({
   rootQuery,
@@ -34274,6 +34475,7 @@ function Operations({
 }) {
   const groupBys = [];
   const aggregates = [];
+  const drills = [];
   const filters = [];
   const orderBys = [];
   const nests = [];
@@ -34295,6 +34497,8 @@ function Operations({
       orderBys.push(operation);
     } else if (operation instanceof ASTNestViewOperation) {
       nests.push(operation);
+    } else if (operation instanceof ASTDrillViewOperation) {
+      drills.push(operation);
     } else {
       limit = operation;
     }
@@ -34313,6 +34517,9 @@ function Operations({
       segment,
       view,
       aggregates
+    }), /* @__PURE__ */ jsx(DrillOperations, {
+      rootQuery,
+      drills
     }), /* @__PURE__ */ jsx(FilterOperations, {
       rootQuery,
       filters
@@ -34434,19 +34641,13 @@ function Query({
   setQuery
 }) {
   const {
-    currentNestQueryPanel,
-    onCurrentNestQueryPanelChange,
-    onCurrentNestViewChange
-  } = React.useContext(QueryEditorContext);
-  const focusMainQueryPanel = () => {
-    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(null);
-    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
-  };
-  return /* @__PURE__ */ jsx("div", {
-    onPointerDownCapture: focusMainQueryPanel,
+    focusMainView,
+    isMainViewFocused
+  } = useQueryFocus();
+  return /* @__PURE__ */ jsx(FocusableView, {
     children: /* @__PURE__ */ jsxs(CollapsiblePanel, {
       title: "Main query",
-      isFocused: !currentNestQueryPanel,
+      isFocused: isMainViewFocused,
       controls: /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(DropdownMenu, {
           trigger: /* @__PURE__ */ jsx(Button, {
@@ -34460,7 +34661,7 @@ function Query({
               icon: "clear",
               label: "Clear query",
               onClick: () => {
-                focusMainQueryPanel();
+                focusMainView();
                 setQuery == null ? void 0 : setQuery(void 0);
               },
               disabled: rootQuery.isEmpty()
@@ -35341,6 +35542,7 @@ const styles$5 = {
   }
 };
 function ResultDisplay({
+  source,
   query
 }) {
   let displayComponent;
@@ -35374,6 +35576,7 @@ function ResultDisplay({
       break;
     case "finished":
       displayComponent = /* @__PURE__ */ jsx(ResponseDisplay, {
+        source,
         response: query.response
       });
       break;
@@ -35381,6 +35584,7 @@ function ResultDisplay({
   return displayComponent;
 }
 function ResponseDisplay({
+  source,
   response
 }) {
   let messageComponent = null;
@@ -35406,7 +35610,8 @@ function ResponseDisplay({
     children: [(response == null ? void 0 : response.runInfo) && /* @__PURE__ */ jsx(RunInfoHover, {
       runInfo: response.runInfo
     }), messageComponent, (response == null ? void 0 : response.result) && /* @__PURE__ */ jsx(RenderedResult, {
-      result: response.result
+      result: response.result,
+      source
     })]
   });
 }
@@ -35449,14 +35654,30 @@ function Banners({
   });
 }
 function RenderedResult({
-  result
+  result,
+  source
 }) {
   const [renderer, setRenderer] = useState();
+  const {
+    setQuery
+  } = useContext(QueryEditorContext);
   useEffect(() => {
     const renderer2 = document.createElement("malloy-render");
     renderer2.malloyResult = result;
+    renderer2.onDrill = ({
+      stableQuery
+    }) => {
+      const rootQuery = new ASTQuery({
+        query: stableQuery,
+        source
+      });
+      setQuery == null ? void 0 : setQuery(rootQuery.build());
+    };
+    renderer2.tableConfig = {
+      enableDrill: true
+    };
     setRenderer(renderer2);
-  }, [result]);
+  }, [result, source, setQuery]);
   if (renderer) {
     return /* @__PURE__ */ jsx(DOMElement, {
       element: renderer,
@@ -35696,6 +35917,7 @@ function ResultPanel({
               })]
             })]
           }), /* @__PURE__ */ jsx(ResultDisplay, {
+            source,
             query: submittedQuery
           })]
         })
@@ -36042,10 +36264,12 @@ function FieldTokenWithActions({
 }) {
   const {
     rootQuery,
-    setQuery,
-    currentNestView
+    setQuery
   } = React__default.useContext(QueryEditorContext);
-  const view = currentNestView ?? viewDef;
+  const {
+    focusedNestView
+  } = useQueryFocus();
+  const view = focusedNestView ?? viewDef;
   const {
     groupByDisabledReason,
     aggregateDisabledReason,
@@ -36146,7 +36370,13 @@ function FieldTokenWithActions({
         onTooltipOpenChange: setIsTooltipOpen
       })]
     }) : null,
-    onClick: field.kind === "dimension" && !groupByDisabledReason ? () => handleAddOperationAction("groupBy") : field.kind === "measure" && !aggregateDisabledReason ? () => handleAddOperationAction("aggregate") : field.kind === "view" ? () => handleAddView() : void 0,
+    onClick: field.kind === "dimension" && !groupByDisabledReason ? () => handleAddOperationAction("groupBy") : field.kind === "measure" && !aggregateDisabledReason ? () => handleAddOperationAction("aggregate") : field.kind === "view" ? () => {
+      if (rootQuery == null ? void 0 : rootQuery.isEmpty()) {
+        handleSetView();
+      } else {
+        handleAddView();
+      }
+    } : void 0,
     hoverActionsVisible: isFilterPopoverOpen || isTooltipOpen,
     tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
       field,