@malloydata/malloy-explorer 0.0.282-dev250527225235 → 0.0.284-dev250528183401

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, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation } 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";
@@ -26100,6 +26100,186 @@ 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
+      });
+  }
+}
+const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map", "sparkline"];
+const ATOMIC_RENDERERS = ["number", "boolean", "currency", "image", "url", "percent", "text", "time"];
+const RENDERERS = [...QUERY_RENDERERS, ...ATOMIC_RENDERERS];
+function tagToRenderer(tag) {
+  if (tag) {
+    const tagProps = tag.getProperties();
+    const tags = Object.keys(tagProps);
+    for (const tag2 of tags) {
+      if (RENDERERS.includes(tag2) && !tagProps[tag2].deleted) {
+        return tag2;
+      }
+    }
+  }
+  return null;
+}
+function atomicTypeToIcon(type) {
+  return atomicTypeMap[type];
+}
+function fieldKindToColor(kind) {
+  return fieldKindMap[kind];
+}
+function fieldToIcon(field) {
+  let icon;
+  switch (field.kind) {
+    case "view":
+      icon = "query";
+      break;
+    case "dimension":
+    case "measure":
+      icon = atomicTypeToIcon(field.type.kind);
+      break;
+    case "join":
+      icon = relationshipToIcon(field.relationship);
+      break;
+  }
+  return icon;
+}
+function relationshipToIcon(relationship) {
+  return relationshipMap[relationship];
+}
+function viewToVisualizationIcon(view) {
+  const currentTag = view.getTag();
+  const currentRenderer = tagToRenderer(currentTag) ?? "table";
+  return `viz_${currentRenderer}`;
+}
+const atomicTypeMap = {
+  array_type: "array",
+  string_type: "string",
+  date_type: "date",
+  boolean_type: "boolean",
+  number_type: "number",
+  json_type: "json",
+  record_type: "json",
+  sql_native_type: "sql_native",
+  timestamp_type: "date",
+  filter_expression_type: "filter"
+};
+const fieldKindMap = {
+  view: "purple",
+  dimension: "cyan",
+  measure: "green",
+  join: void 0
+};
+const relationshipMap = {
+  many: "many_to_one",
+  cross: "one_to_many",
+  one: "one_to_one"
+};
+function FieldToken({
+  field,
+  hoverActions,
+  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__ */ jsxs("div", {
+    ...{
+      0: {
+        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly28fmrt mly1x0xcia"
+      },
+      1: {
+        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mlym9y5t7"
+      }
+    }[!!hoverActionsVisible << 0],
+    children: [/* @__PURE__ */ jsx(Token, {
+      label,
+      color: fieldKindToColor(field.kind),
+      icon: fieldToIcon(field),
+      ...props2
+    }), hoverActions && /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly1vsucm1 mly2lah0s"
+      },
+      children: hoverActions
+    })]
+  });
+}
+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(FieldToken, {
+          field: drill.filter.fieldReference.getFieldInfo()
+        }), /* @__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];
@@ -30036,108 +30216,6 @@ function findUniqueFieldName(fields, rename, path = []) {
   }
   return `${rename} ${idx}`;
 }
-const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map", "sparkline"];
-const ATOMIC_RENDERERS = ["number", "boolean", "currency", "image", "url", "percent", "text", "time"];
-const RENDERERS = [...QUERY_RENDERERS, ...ATOMIC_RENDERERS];
-function tagToRenderer(tag) {
-  if (tag) {
-    const tagProps = tag.getProperties();
-    const tags = Object.keys(tagProps);
-    for (const tag2 of tags) {
-      if (RENDERERS.includes(tag2) && !tagProps[tag2].deleted) {
-        return tag2;
-      }
-    }
-  }
-  return null;
-}
-function atomicTypeToIcon(type) {
-  return atomicTypeMap[type];
-}
-function fieldKindToColor(kind) {
-  return fieldKindMap[kind];
-}
-function fieldToIcon(field) {
-  let icon;
-  switch (field.kind) {
-    case "view":
-      icon = "query";
-      break;
-    case "dimension":
-    case "measure":
-      icon = atomicTypeToIcon(field.type.kind);
-      break;
-    case "join":
-      icon = relationshipToIcon(field.relationship);
-      break;
-  }
-  return icon;
-}
-function relationshipToIcon(relationship) {
-  return relationshipMap[relationship];
-}
-function viewToVisualizationIcon(view) {
-  const currentTag = view.getTag();
-  const currentRenderer = tagToRenderer(currentTag) ?? "table";
-  return `viz_${currentRenderer}`;
-}
-const atomicTypeMap = {
-  array_type: "array",
-  string_type: "string",
-  date_type: "date",
-  boolean_type: "boolean",
-  number_type: "number",
-  json_type: "json",
-  record_type: "json",
-  sql_native_type: "sql_native",
-  timestamp_type: "date",
-  filter_expression_type: "filter"
-};
-const fieldKindMap = {
-  view: "purple",
-  dimension: "cyan",
-  measure: "green",
-  join: void 0
-};
-const relationshipMap = {
-  many: "many_to_one",
-  cross: "one_to_many",
-  one: "one_to_one"
-};
-function FieldToken({
-  field,
-  hoverActions,
-  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__ */ jsxs("div", {
-    ...{
-      0: {
-        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly28fmrt mly1x0xcia"
-      },
-      1: {
-        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mlym9y5t7"
-      }
-    }[!!hoverActionsVisible << 0],
-    children: [/* @__PURE__ */ jsx(Token, {
-      label,
-      color: fieldKindToColor(field.kind),
-      icon: fieldToIcon(field),
-      ...props2
-    }), hoverActions && /* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly1vsucm1 mly2lah0s"
-      },
-      children: hoverActions
-    })]
-  });
-}
 function BadgeForField({
   field
 }) {
@@ -34396,6 +34474,7 @@ function Operations({
 }) {
   const groupBys = [];
   const aggregates = [];
+  const drills = [];
   const filters = [];
   const orderBys = [];
   const nests = [];
@@ -34417,8 +34496,9 @@ function Operations({
       orderBys.push(operation);
     } else if (operation instanceof ASTNestViewOperation) {
       nests.push(operation);
-    } else if (operation instanceof ASTDrillViewOperation) ;
-    else {
+    } else if (operation instanceof ASTDrillViewOperation) {
+      drills.push(operation);
+    } else {
       limit = operation;
     }
   });
@@ -34436,6 +34516,9 @@ function Operations({
       segment,
       view,
       aggregates
+    }), /* @__PURE__ */ jsx(DrillOperations, {
+      rootQuery,
+      drills
     }), /* @__PURE__ */ jsx(FilterOperations, {
       rootQuery,
       filters
@@ -35458,6 +35541,7 @@ const styles$5 = {
   }
 };
 function ResultDisplay({
+  source,
   query
 }) {
   let displayComponent;
@@ -35491,6 +35575,7 @@ function ResultDisplay({
       break;
     case "finished":
       displayComponent = /* @__PURE__ */ jsx(ResponseDisplay, {
+        source,
         response: query.response
       });
       break;
@@ -35498,6 +35583,7 @@ function ResultDisplay({
   return displayComponent;
 }
 function ResponseDisplay({
+  source,
   response
 }) {
   let messageComponent = null;
@@ -35523,7 +35609,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
     })]
   });
 }
@@ -35566,14 +35653,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,
@@ -35813,6 +35916,7 @@ function ResultPanel({
               })]
             })]
           }), /* @__PURE__ */ jsx(ResultDisplay, {
+            source,
             query: submittedQuery
           })]
         })