@sentio/ui-dashboard 0.3.1 → 0.3.5

package/dist/index.js

@@ -41,13 +41,17 @@ __export(index_exports, {
   ChartLegend: () => ChartLegend,
   ChartTooltip: () => ChartTooltip,
   ChartTypeButtonGroup: () => ChartTypeButtonGroup,
+  DEFAULT_HIGHLIGHT_KEY: () => DEFAULT_HIGHLIGHT_KEY,
   DataControls: () => DataControls,
+  EditDashboardDialog: () => EditDashboardDialog,
+  EditGroupDialog: () => EditGroupDialog,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
   FunctionInput: () => FunctionInput,
   FunctionMap: () => FunctionMap,
   FunctionsCategories: () => FunctionsCategories,
   FunctionsPanel: () => FunctionsPanel,
+  HIGHLIGHT_COLORS: () => HIGHLIGHT_COLORS,
   LabelControls: () => LabelControls,
   LabelSearchProvider: () => LabelSearchProvider,
   LabelsInput: () => LabelsInput,
@@ -66,6 +70,7 @@ __export(index_exports, {
   ScatterControls: () => ScatterControls,
   ScatterIcon: () => ScatterIcon_default,
   SystemLabels: () => SystemLabels,
+  TableControls: () => TableControls,
   TableIcon: () => TableIcon_default,
   TimeSeriesChart: () => TimeSeriesChart,
   ValueControls: () => ValueControls,
@@ -78,9 +83,14 @@ __export(index_exports, {
   defaultDataConfig: () => defaultConfig5,
   defaultPieConfig: () => defaultConfig,
   defaultScatterConfig: () => defaultConfig6,
+  defaultTableConfig: () => defaultConfig7,
   defaultValueConfig: () => defaultConfig3,
   defaultValueControlsConfig: () => defaultConfig4,
+  getDefaultValueConfig: () => getDefaultValueConfig,
+  getHighlightHex: () => getHighlightHex,
   isAggrOrRollupFunction: () => isAggrOrRollupFunction,
+  resolveHeaderStyle: () => resolveHeaderStyle,
+  resolveHighlight: () => resolveHighlight,
   sentioColors: () => sentioColors,
   sentioTheme: () => sentioTheme,
   sentioThemeDark: () => sentioThemeDark,
@@ -5831,7 +5841,7 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-full w-full items-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mr-2 flex w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-full w-full items-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
@@ -5872,16 +5882,16 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex w-full flex-col gap-2 rounded-md", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
-          className: "text-text-foreground flex h-10 items-center py-1",
+          className: "text-text-foreground flex h-8 items-center",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sm:text-ilabel inline-flex h-full items-center pr-2 font-medium", children: "If value is" }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "select",
               {
@@ -5910,7 +5920,7 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-2 font-medium", children: ", then show" }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "input",
               {
@@ -5929,16 +5939,10 @@ function ValueStringMapping({ rules, onChange }) {
               "button",
               {
                 type: "button",
-                className: "mx-2",
+                className: "text-text-foreground-disabled hover:text-primary-600 mx-2 cursor-pointer",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  import_lu7.LuTrash2,
-                  {
-                    className: "icon text-text-foreground-disabled",
-                    "aria-hidden": "true"
-                  }
-                )
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lu7.LuTrash2, { className: "icon", "aria-hidden": "true" })
               }
             )
           ]
@@ -5946,18 +5950,16 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_ui_core21.Button,
       {
         type: "button",
         role: "secondary",
-        className: "mt-1 w-fit flex-none",
+        className: "py-1.5! w-fit flex-none",
         "aria-label": "remove",
         onClick: addRule,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lu7.LuPlus, { className: (0, import_ui_core21.classNames)("h-4 w-4"), "aria-hidden": "true" }),
-          "Add Formatting Rule"
-        ]
+        icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lu7.LuPlus, {}),
+        children: "Add Formatting Rule"
       }
     )
   ] });
@@ -6607,6 +6609,558 @@ function ScatterControls({
     }
   );
 }
+
+// src/charts/options/TableControls.tsx
+var import_react24 = require("react");
+var import_immer14 = require("immer");
+var import_lodash13 = require("lodash");
+var import_ui_core27 = require("@sentio/ui-core");
+
+// src/charts/table-utils.ts
+var import_lodash12 = require("lodash");
+var TEMPLATE_TOKEN = /{{([\s\S]+?)}}/g;
+function sanitizeLabels(labels) {
+  const result = {};
+  for (const k in labels) {
+    switch (k) {
+      case "contract_name":
+        result["contract"] = labels[k];
+        break;
+      case "contract_address":
+        result["address"] = labels[k];
+        break;
+    }
+    result[k] = labels[k];
+  }
+  return result;
+}
+function aliasTemplate(alias, labels) {
+  if (alias) {
+    try {
+      const safe = sanitizeLabels(labels);
+      return alias.replace(TEMPLATE_TOKEN, (_, m1) => {
+        const value = safe[m1.trim()];
+        return value == null ? `` : value;
+      });
+    } catch (e) {
+      return alias;
+    }
+  }
+}
+function escapeColumnId(id) {
+  return id.replace(/[\W_.]+/g, "_");
+}
+function getColumnNameId(labels, alias, displayName) {
+  const s = aliasTemplate(alias, labels) || (0, import_lodash12.startCase)(displayName);
+  return { columnName: s, columnId: escapeColumnId(s) };
+}
+
+// src/charts/options/TableControls.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var defaultConfig7 = {
+  calculation: "LAST",
+  sortColumns: [],
+  showColumns: void 0,
+  columnWidths: {},
+  columnOrders: [],
+  showPlainData: false,
+  calculations: {},
+  valueConfigs: {}
+};
+function getDefaultValueConfig(type) {
+  switch (type) {
+    case "NUMBER":
+      return {
+        ...defaultConfig4,
+        valueFormatter: "NumberFormatter"
+      };
+    case "TIME":
+      return {
+        ...defaultConfig4,
+        valueFormatter: "DateFormatter"
+      };
+    default:
+      return {
+        ...defaultConfig4,
+        valueFormatter: "StringFormatter"
+      };
+  }
+}
+var CalculationItems3 = [
+  { label: "All", value: "ALL" },
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+function TableControls({ config, defaultOpen, onChange, data }) {
+  config = (0, import_lodash13.defaults)({}, config, defaultConfig7);
+  function onCalculationChange(col, cal) {
+    config && onChange(
+      (0, import_immer14.produce)(config, (draft) => {
+        if (col === "") {
+          delete draft.calculations;
+          draft.calculation = cal;
+        } else {
+          draft.calculations = draft.calculations || {};
+          draft.calculations[col] = cal;
+        }
+      })
+    );
+  }
+  function onValueConfigChange(col, valueConfig) {
+    config && onChange(
+      (0, import_immer14.produce)(config, (draft) => {
+        draft.valueConfigs = draft.valueConfigs || {};
+        draft.valueConfigs[col] = valueConfig;
+      })
+    );
+  }
+  function onMapSeriesAsColumnsChange(checked) {
+    config && onChange((0, import_immer14.produce)(config, (draft) => void (draft.showPlainData = checked)));
+  }
+  const calculations = (0, import_react24.useMemo)(() => {
+    if (!config?.showPlainData) {
+      return CalculationItems3.filter((item) => item.value !== "ALL");
+    }
+    return CalculationItems3;
+  }, [config?.showPlainData]);
+  const isSql = data?.result !== void 0;
+  const columns = (0, import_react24.useMemo)(() => {
+    if (config?.showPlainData) {
+      return [];
+    }
+    const map = {};
+    if (isSql) {
+      const results = data?.result;
+      if (results) {
+        for (const [name, type] of Object.entries(results?.columnTypes || {})) {
+          map[name] = {
+            name,
+            type
+          };
+        }
+      }
+    } else {
+      const results = data?.results;
+      for (const r of results || []) {
+        for (const s of r?.matrix?.samples || []) {
+          const { columnId, columnName } = getColumnNameId(
+            s?.metric?.labels || {},
+            r.alias,
+            s.metric?.displayName
+          );
+          map[columnId] = {
+            name: columnName
+          };
+        }
+      }
+    }
+    return Object.keys(map).sort().map((k) => ({ columnId: k, column: map[k] }));
+  }, [data, config]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    import_ui_core27.DisclosurePanel,
+    {
+      title: "Table Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: [
+        !isSql && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "min-h-8 flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-48 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            import_ui_core27.Checkbox,
+            {
+              checked: config?.showPlainData,
+              onChange: onMapSeriesAsColumnsChange,
+              label: "Show plain data"
+            }
+          ) }),
+          config?.showPlainData && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "border-main sm:text-icontent inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Calculation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "select",
+              {
+                value: config.calculation,
+                className: "border-main text-text-foreground sm:text-icontent focus:border-primary-600 hover:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7 focus:ring-0",
+                onChange: (e) => {
+                  onCalculationChange("", e.target.value);
+                },
+                children: calculations.map((d) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: d.value, children: d.label }, d.value);
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "divide-border-color flex flex-col gap-2 divide-y", children: columns.map(({ columnId, column }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-start pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h4", { className: "text-text-foreground text-icontent leading-7.5 w-48 px-2 font-medium", children: column.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-1 flex-wrap items-start gap-2 rounded-md", children: [
+            !isSql && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Calculation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "select",
+                {
+                  value: config?.calculations && config?.calculations[columnId] || "LAST",
+                  className: "border-main text-text-foreground sm:text-icontent focus:border-primary-600 hover:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7 focus:ring-0",
+                  onChange: (e) => onCalculationChange(
+                    columnId,
+                    e.target.value
+                  ),
+                  children: calculations.map((d) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: d.value, children: d.label }, d.value);
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              ValueOptions,
+              {
+                onChange: (cfg) => onValueConfigChange(columnId, cfg),
+                config: config?.valueConfigs && config.valueConfigs[columnId] || getDefaultValueConfig(column.type)
+              }
+            )
+          ] })
+        ] }, columnId)) })
+      ]
+    }
+  );
+}
+
+// src/dashboard/EditDashboardDialog.tsx
+var import_react25 = require("react");
+var import_ui_core28 = require("@sentio/ui-core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var EditDashboardDialog = ({
+  dashboard,
+  open,
+  onClose,
+  onUpdate
+}) => {
+  const [processing, setProcessing] = (0, import_react25.useState)(false);
+  const [updateDisabled, setUpdateDisabled] = (0, import_react25.useState)(true);
+  const inputElementRef = (0, import_react25.useRef)(null);
+  const onCloseAndReset = (0, import_react25.useCallback)(() => {
+    onClose?.();
+    if (dashboard?.name && inputElementRef.current) {
+      inputElementRef.current.value = dashboard.name;
+    }
+  }, [onClose, dashboard?.name]);
+  const onOk = (0, import_react25.useCallback)(() => {
+    if (!inputElementRef.current?.value) {
+      return;
+    }
+    setProcessing(true);
+    onUpdate({ ...dashboard, name: inputElementRef.current?.value }).then(() => {
+      onCloseAndReset();
+    }).finally(() => {
+      setProcessing(false);
+    });
+  }, [onCloseAndReset, onUpdate, dashboard]);
+  (0, import_react25.useEffect)(() => {
+    if (open && dashboard?.name && inputElementRef.current) {
+      inputElementRef.current.value = dashboard.name;
+    }
+  }, [open, dashboard?.name]);
+  const onInputChange = (0, import_react25.useCallback)(
+    (evt) => {
+      const value = evt.target.value;
+      if (!value || value === dashboard?.name) {
+        setUpdateDisabled(true);
+      } else {
+        setUpdateDisabled(false);
+      }
+    },
+    [dashboard?.name]
+  );
+  const okProps = (0, import_react25.useMemo)(
+    () => ({
+      processing,
+      disabled: updateDisabled
+    }),
+    [updateDisabled, processing]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_ui_core28.BaseDialog,
+    {
+      title: "Edit Dashboard",
+      open,
+      onClose: onCloseAndReset,
+      cancelText: "Close",
+      onCancel: onCloseAndReset,
+      onOk,
+      okProps,
+      okText: "Update",
+      footerBorder: false,
+      initialFocus: inputElementRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "form",
+        {
+          method: "dialog",
+          className: "text-text-foreground relative mb-4 mt-2 px-4",
+          onSubmit: onOk,
+          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid py-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sm:text-ilabel text-text-foreground-secondary mb-2 mt-1", children: "Dashboard Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "input",
+              {
+                defaultValue: dashboard?.name,
+                placeholder: "Provide a new name for your dashboard",
+                type: "text",
+                required: true,
+                name: "dashboard-name",
+                id: "new-dashboard-name",
+                className: "focus:border-primary-600 focus:ring-primary-600/30 focus:ring-3 hover:border-primary-600 sm:text-ilabel border-main block w-full rounded-md",
+                ref: inputElementRef,
+                onChange: onInputChange
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+
+// src/dashboard/EditGroupDialog.tsx
+var import_react26 = require("react");
+var import_ui_core29 = require("@sentio/ui-core");
+var import_lu9 = require("react-icons/lu");
+
+// src/dashboard/group-styles.ts
+var CLASSIC_INDEX = {
+  blue: 0,
+  cyan: 1,
+  pink: 2,
+  yellow: 3,
+  green: 4,
+  lightblue: 5,
+  purple: 6,
+  red: 7,
+  orange: 8
+};
+var HIGHLIGHT_COLORS = [
+  { key: "green", name: "Sentio Green" },
+  { key: "blue", name: "Sentio Blue" },
+  { key: "cyan", name: "Sentio Cyan" },
+  { key: "lightblue", name: "Sentio Light Blue" },
+  { key: "purple", name: "Sentio Purple" },
+  { key: "pink", name: "Sentio Pink" },
+  { key: "red", name: "Sentio Red" },
+  { key: "orange", name: "Sentio Orange" },
+  { key: "yellow", name: "Sentio Yellow" }
+];
+var DEFAULT_HIGHLIGHT_KEY = "green";
+function getHighlightHex(key, isDark) {
+  if (!key) return void 0;
+  const idx = CLASSIC_INDEX[key];
+  if (idx === void 0) return void 0;
+  return sentioColors[isDark ? "dark" : "light"].classic[idx];
+}
+function readableForeground(hex) {
+  const m = hex.replace("#", "");
+  const r = parseInt(m.slice(0, 2), 16) / 255;
+  const g = parseInt(m.slice(2, 4), 16) / 255;
+  const b = parseInt(m.slice(4, 6), 16) / 255;
+  const lin = (v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  const L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return L > 0.5 ? "#1f2937" : "#ffffff";
+}
+function resolveHighlight(colorKey, isDark) {
+  const hex = getHighlightHex(colorKey, isDark) ?? getHighlightHex(DEFAULT_HIGHLIGHT_KEY, isDark);
+  return { solid: hex, foreground: readableForeground(hex) };
+}
+function resolveHeaderStyle(style, colorKey, isDark) {
+  if (!style || style === "DEFAULT") return {};
+  const color = resolveHighlight(colorKey, isDark);
+  return { backgroundColor: color.solid, color: color.foreground };
+}
+
+// src/dashboard/EditGroupDialog.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function StyleCard({ selected, label, onClick, preview }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: (0, import_ui_core29.classNames)(
+        "flex flex-col items-stretch overflow-hidden rounded-lg border bg-white text-left transition-colors",
+        "dark:bg-default-bg",
+        selected ? "border-primary-600 ring-primary-600/30 ring-3 shadow-sm" : "border-main hover:border-primary-400"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-hover/40 flex h-28 items-center justify-center", children: preview }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          "div",
+          {
+            className: (0, import_ui_core29.classNames)(
+              "border-main flex items-center justify-center gap-1.5 border-t px-2 py-2 text-sm",
+              selected ? "text-primary-600 font-semibold" : "text-text-foreground font-medium"
+            ),
+            children: [
+              selected && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lu9.LuCheck, { className: "h-3.5 w-3.5" }),
+              label
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultPreview() {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-main bg-default-bg text-text-foreground flex h-16 w-32 items-center rounded border px-2 text-base", children: "Title" });
+}
+function EmphasisPreview({
+  color
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "border-main bg-default-bg flex h-16 w-32 flex-col rounded border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: "flex h-9 items-center justify-center text-sm font-semibold",
+        style: { backgroundColor: color.solid, color: color.foreground },
+        children: "Title"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1" })
+  ] });
+}
+function EditGroupDialog({
+  open,
+  onClose,
+  title,
+  style,
+  highlightColor,
+  onSave
+}) {
+  const [draftTitle, setDraftTitle] = (0, import_react26.useState)(title);
+  const [draftStyle, setDraftStyle] = (0, import_react26.useState)(style);
+  const [draftColor, setDraftColor] = (0, import_react26.useState)(highlightColor);
+  const titleRef = (0, import_react26.useRef)(null);
+  const isDark = useDarkMode();
+  (0, import_react26.useEffect)(() => {
+    if (!open) return;
+    setDraftTitle(title);
+    setDraftStyle(style || "DEFAULT");
+    setDraftColor(
+      highlightColor || (style && style !== "DEFAULT" ? DEFAULT_HIGHLIGHT_KEY : "")
+    );
+  }, [open, title, style, highlightColor]);
+  const previewColor = (0, import_react26.useMemo)(
+    () => resolveHighlight(draftColor, isDark),
+    [draftColor, isDark]
+  );
+  const onPickStyle = (next) => {
+    setDraftStyle(next);
+    if (next !== "DEFAULT" && !draftColor) {
+      setDraftColor(DEFAULT_HIGHLIGHT_KEY);
+    }
+  };
+  const onOk = () => {
+    onSave({
+      title: draftTitle.trim() || "Group",
+      style: draftStyle,
+      // Persist '' for DEFAULT so we don't pollute the model with an unused
+      // color when the user reverts.
+      highlightColor: draftStyle === "DEFAULT" ? "" : draftColor || DEFAULT_HIGHLIGHT_KEY
+    });
+    onClose();
+  };
+  const colorOptions = (0, import_react26.useMemo)(
+    () => HIGHLIGHT_COLORS.map((c) => {
+      const resolved = resolveHighlight(c.key, isDark);
+      return {
+        value: c.key,
+        title: c.name,
+        label: ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full items-center gap-2.5 pr-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "div",
+            {
+              className: "flex h-5 w-5 items-center justify-center rounded text-xs font-bold",
+              style: {
+                backgroundColor: resolved.solid,
+                color: resolved.foreground
+              },
+              children: "T"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex-1 text-sm", children: c.name }),
+          selected && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lu9.LuCheck, { className: "text-primary-600 h-4 w-4" })
+        ] })
+      };
+    }),
+    [isDark]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_ui_core29.BaseDialog,
+    {
+      title: "Edit Group",
+      open,
+      onClose,
+      cancelText: "Cancel",
+      onCancel: onClose,
+      onOk,
+      okText: "Save",
+      panelClassName: "sm:max-w-xl",
+      initialFocus: titleRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "text-text-foreground px-4 pb-2 pt-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: "text-text-foreground mb-3 text-sm font-semibold", children: "Display options" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            ref: titleRef,
+            type: "text",
+            value: draftTitle,
+            onChange: (e) => setDraftTitle(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onOk();
+              }
+            },
+            className: "focus:border-primary-600 focus:ring-primary-600/30 focus:ring-3 hover:border-primary-600 sm:text-ilabel border-main mb-4 block w-full rounded-md"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4 grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            StyleCard,
+            {
+              selected: draftStyle === "DEFAULT",
+              label: "Default",
+              onClick: () => onPickStyle("DEFAULT"),
+              preview: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultPreview, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            StyleCard,
+            {
+              selected: draftStyle === "EMPHASIS",
+              label: "Emphasis",
+              onClick: () => onPickStyle("EMPHASIS"),
+              preview: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EmphasisPreview, { color: previewColor })
+            }
+          )
+        ] }),
+        draftStyle !== "DEFAULT" && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Highlight Color" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_ui_core29.Select,
+            {
+              value: draftColor || DEFAULT_HIGHLIGHT_KEY,
+              onChange: (v) => setDraftColor(v),
+              options: colorOptions,
+              size: "md",
+              asLayer: true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
@@ -6620,13 +7174,17 @@ function ScatterControls({
   ChartLegend,
   ChartTooltip,
   ChartTypeButtonGroup,
+  DEFAULT_HIGHLIGHT_KEY,
   DataControls,
+  EditDashboardDialog,
+  EditGroupDialog,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
   FunctionMap,
   FunctionsCategories,
   FunctionsPanel,
+  HIGHLIGHT_COLORS,
   LabelControls,
   LabelSearchProvider,
   LabelsInput,
@@ -6645,6 +7203,7 @@ function ScatterControls({
   ScatterControls,
   ScatterIcon,
   SystemLabels,
+  TableControls,
   TableIcon,
   TimeSeriesChart,
   ValueControls,
@@ -6657,9 +7216,14 @@ function ScatterControls({
   defaultDataConfig,
   defaultPieConfig,
   defaultScatterConfig,
+  defaultTableConfig,
   defaultValueConfig,
   defaultValueControlsConfig,
+  getDefaultValueConfig,
+  getHighlightHex,
   isAggrOrRollupFunction,
+  resolveHeaderStyle,
+  resolveHighlight,
   sentioColors,
   sentioTheme,
   sentioThemeDark,