@sentio/ui-dashboard 0.3.9 → 0.3.11

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   DataControls: () => DataControls,
   EditDashboardDialog: () => EditDashboardDialog,
   EditGroupDialog: () => EditGroupDialog,
+  ErrorChart: () => ErrorChart,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
   FunctionInput: () => FunctionInput,
@@ -53,6 +54,7 @@ __export(index_exports, {
   FunctionsCategories: () => FunctionsCategories,
   FunctionsPanel: () => FunctionsPanel,
   HIGHLIGHT_COLORS: () => HIGHLIGHT_COLORS,
+  ImportPanelDialog: () => ImportPanelDialog,
   LabelControls: () => LabelControls,
   LabelSearchProvider: () => LabelSearchProvider,
   LabelsInput: () => LabelsInput,
@@ -6953,9 +6955,70 @@ var EditDashboardDialog = ({
   );
 };
 
-// src/dashboard/EditGroupDialog.tsx
-var import_react26 = require("react");
+// src/dashboard/ErrorChart.tsx
+var import_react26 = __toESM(require("react"));
 var import_ui_core29 = require("@sentio/ui-core");
+var import_react_resize_detector5 = require("react-resize-detector");
+var import_lodash14 = require("lodash");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ErrorChart = import_react26.default.memo(function ErrorChart2({
+  data,
+  logoSrc,
+  onNavigateToDatasource
+}) {
+  const { ref, width, height } = (0, import_react_resize_detector5.useResizeDetector)();
+  let hintMessage;
+  if (data?.code === 5) {
+    hintMessage = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { children: [
+      "No active processor found",
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("br", {}),
+      " Check the",
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_ui_core29.Button, { role: "link", onClick: onNavigateToDatasource, children: "datasource" }),
+      "page for more details."
+    ] });
+  } else if (data?.status === 429) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_ui_core29.BarLoading,
+      {
+        className: "bg-default-bg absolute w-full",
+        hint: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xs font-normal", children: "Too many simultaneous requests, retrying later..." }),
+        width: 160
+      }
+    );
+  } else {
+    hintMessage = data?.message ?? "Something went wrong";
+  }
+  const imageSize = Math.min(
+    Math.min(64, width ? width * 0.4 : 64),
+    Math.min(64, height ? height * 0.4 : 64)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex h-full w-full items-center", ref, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full space-y-4 text-center", children: [
+    imageSize < 10 || !logoSrc ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "img",
+      {
+        className: "mx-auto",
+        src: logoSrc,
+        width: imageSize,
+        height: imageSize,
+        style: { width: imageSize, height: "auto" },
+        alt: "gray logo"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        title: (0, import_lodash14.isString)(hintMessage) ? hintMessage : void 0,
+        className: `text-text-foreground-secondary font-icontent text-icontent px-4 ${height && height < 200 ? "line-clamp-1" : "line-clamp-2"}`,
+        children: hintMessage
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RefreshButton, {})
+  ] }) });
+});
+
+// src/dashboard/EditGroupDialog.tsx
+var import_react27 = require("react");
+var import_ui_core30 = require("@sentio/ui-core");
 var import_lu9 = require("react-icons/lu");
 
 // src/dashboard/group-styles.ts
@@ -7008,28 +7071,28 @@ function resolveHeaderStyle(style, colorKey, isDark) {
 }
 
 // src/dashboard/EditGroupDialog.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function StyleCard({ selected, label, onClick, preview }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "button",
     {
       type: "button",
       onClick,
-      className: (0, import_ui_core29.classNames)(
+      className: (0, import_ui_core30.classNames)(
         "flex flex-col items-stretch overflow-hidden rounded-lg border text-left transition-colors",
         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)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "bg-hover/40 flex h-28 items-center justify-center", children: preview }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
-            className: (0, import_ui_core29.classNames)(
+            className: (0, import_ui_core30.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" }),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lu9.LuCheck, { className: "h-3.5 w-3.5" }),
               label
             ]
           }
@@ -7039,13 +7102,13 @@ function StyleCard({ selected, label, onClick, preview }) {
   );
 }
 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" });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "border-main bg-default-bg flex h-16 w-32 flex-col rounded border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         className: "flex h-9 items-center justify-center text-sm font-semibold",
@@ -7053,7 +7116,7 @@ function EmphasisPreview({
         children: "Title"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1" })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1" })
   ] });
 }
 function EditGroupDialog({
@@ -7064,12 +7127,12 @@ function EditGroupDialog({
   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 [draftTitle, setDraftTitle] = (0, import_react27.useState)(title);
+  const [draftStyle, setDraftStyle] = (0, import_react27.useState)(style);
+  const [draftColor, setDraftColor] = (0, import_react27.useState)(highlightColor);
+  const titleRef = (0, import_react27.useRef)(null);
   const isDark = useDarkMode();
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     setDraftTitle(title);
     setDraftStyle(style || "DEFAULT");
@@ -7077,7 +7140,7 @@ function EditGroupDialog({
       highlightColor || (style && style !== "DEFAULT" ? DEFAULT_HIGHLIGHT_KEY : "")
     );
   }, [open, title, style, highlightColor]);
-  const previewColor = (0, import_react26.useMemo)(
+  const previewColor = (0, import_react27.useMemo)(
     () => resolveHighlight(draftColor, isDark),
     [draftColor, isDark]
   );
@@ -7097,14 +7160,14 @@ function EditGroupDialog({
     });
     onClose();
   };
-  const colorOptions = (0, import_react26.useMemo)(
+  const colorOptions = (0, import_react27.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)(
+        label: ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full items-center gap-2.5 pr-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               className: "flex h-5 w-5 items-center justify-center rounded text-xs font-bold",
@@ -7115,15 +7178,15 @@ function EditGroupDialog({
               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" })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1 text-sm", children: c.name }),
+          selected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lu9.LuCheck, { className: "text-primary-600 h-4 w-4" })
         ] })
       };
     }),
     [isDark]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_ui_core29.BaseDialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_ui_core30.BaseDialog,
     {
       title: "Edit Group",
       open,
@@ -7134,10 +7197,10 @@ function EditGroupDialog({
       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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "text-text-foreground px-4 pb-2 pt-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-text-foreground mb-3 text-sm font-semibold", children: "Display options" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "input",
           {
             ref: titleRef,
@@ -7153,30 +7216,30 @@ function EditGroupDialog({
             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)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-4 grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             StyleCard,
             {
               selected: draftStyle === "DEFAULT",
               label: "Default",
               onClick: () => onPickStyle("DEFAULT"),
-              preview: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultPreview, {})
+              preview: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DefaultPreview, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             StyleCard,
             {
               selected: draftStyle === "EMPHASIS",
               label: "Emphasis",
               onClick: () => onPickStyle("EMPHASIS"),
-              preview: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EmphasisPreview, { color: previewColor })
+              preview: /* @__PURE__ */ (0, import_jsx_runtime42.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,
+        draftStyle !== "DEFAULT" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Highlight Color" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            import_ui_core30.Select,
             {
               value: draftColor || DEFAULT_HIGHLIGHT_KEY,
               onChange: (v) => setDraftColor(v),
@@ -7195,11 +7258,11 @@ function EditGroupDialog({
 var import_dayjs6 = __toESM(require("dayjs"));
 var import_relativeTime = __toESM(require("dayjs/plugin/relativeTime"));
 var import_updateLocale = __toESM(require("dayjs/plugin/updateLocale"));
-var import_ui_core30 = require("@sentio/ui-core");
-var import_react27 = require("react");
+var import_ui_core31 = require("@sentio/ui-core");
+var import_react28 = require("react");
 var import_io2 = require("react-icons/io");
 var import_en = __toESM(require("dayjs/locale/en"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 import_dayjs6.default.extend(import_relativeTime.default);
 import_dayjs6.default.extend(import_updateLocale.default);
 import_dayjs6.default.locale("en.short", {
@@ -7223,10 +7286,10 @@ import_dayjs6.default.locale("en.short", {
 });
 import_dayjs6.default.locale("en");
 var DashboardRefresh = ({ stats, onRefresh }) => {
-  const timeRef = (0, import_react27.useRef)(null);
-  const [fetching, setFetching] = (0, import_react27.useState)(false);
-  const [currentColor, setCurrentColor] = (0, import_react27.useState)("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
-  (0, import_react27.useEffect)(() => {
+  const timeRef = (0, import_react28.useRef)(null);
+  const [fetching, setFetching] = (0, import_react28.useState)(false);
+  const [currentColor, setCurrentColor] = (0, import_react28.useState)("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
+  (0, import_react28.useEffect)(() => {
     const updateFn = () => {
       if (!stats || !stats.computedAt) return;
       const computedAt = (0, import_dayjs6.default)(stats.computedAt).locale("en.short");
@@ -7245,7 +7308,7 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
       clearInterval(interval);
     };
   }, [stats]);
-  const onClick = (0, import_react27.useCallback)(() => {
+  const onClick = (0, import_react28.useCallback)(() => {
     setFetching((prevState) => {
       if (prevState) return prevState;
       onRefresh().finally(() => {
@@ -7254,7 +7317,7 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
       return true;
     });
   }, [onRefresh]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (typeof window == "object") {
       window.addEventListener("refresh_all", onClick);
       return () => {
@@ -7263,28 +7326,28 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
     }
   }, []);
   const showReload = fetching || stats?.isRefreshing;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
-      className: (0, import_ui_core30.classNames)(
+      className: (0, import_ui_core31.classNames)(
         "group/refresh relative ml-1 flex items-center gap-1 rounded-sm py-px pl-1 text-xs transition-all",
         currentColor,
         showReload ? "pr-5" : "pr-1.5 hover:pr-5"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "cursor-default text-[10px]", ref: timeRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "cursor-default text-[10px]", ref: timeRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             onClick,
-            className: (0, import_ui_core30.classNames)(
+            className: (0, import_ui_core31.classNames)(
               "absolute right-1",
               showReload ? "block" : "hidden group-hover/refresh:block"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               import_io2.IoMdRefresh,
               {
-                className: (0, import_ui_core30.classNames)(
+                className: (0, import_ui_core31.classNames)(
                   "h-3.5 w-3.5",
                   showReload ? "animate-spin" : ""
                 )
@@ -7298,9 +7361,9 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
 };
 
 // src/dashboard/ShareDashboardDialog.tsx
-var import_react28 = require("react");
-var import_ui_core31 = require("@sentio/ui-core");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_ui_core32 = require("@sentio/ui-core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var ShareDashboardDialog = ({
   open,
   initData,
@@ -7311,15 +7374,15 @@ var ShareDashboardDialog = ({
   endTime,
   tz
 }) => {
-  const [isReadonly, setIsReadonly] = (0, import_react28.useState)(
+  const [isReadonly, setIsReadonly] = (0, import_react29.useState)(
     initData?.config?.isReadonly ?? false
   );
-  const [hideModifiers, setHideModifiers] = (0, import_react28.useState)(
+  const [hideModifiers, setHideModifiers] = (0, import_react29.useState)(
     initData?.config?.hideModifiers ?? false
   );
-  const linkText = (0, import_react28.useMemo)(() => {
+  const linkText = (0, import_react29.useMemo)(() => {
     if (initData?.id) {
-      let timeSuffix = startTime && endTime ? `?from=${encodeURIComponent((0, import_ui_core31.dateTimeToString)(startTime))}&to=${encodeURIComponent((0, import_ui_core31.dateTimeToString)(endTime))}&tz=${tz}` : "";
+      let timeSuffix = startTime && endTime ? `?from=${encodeURIComponent((0, import_ui_core32.dateTimeToString)(startTime))}&to=${encodeURIComponent((0, import_ui_core32.dateTimeToString)(endTime))}&tz=${tz}` : "";
       if (tz) {
         timeSuffix += `&tz=${tz}`;
       }
@@ -7342,8 +7405,8 @@ var ShareDashboardDialog = ({
     setHideModifiers(checked);
     handleConfigChange(isReadonly, checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_ui_core31.BaseDialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_ui_core32.BaseDialog,
     {
       title: "Sharing: ON",
       open,
@@ -7362,11 +7425,11 @@ var ShareDashboardDialog = ({
       onClose,
       buttonsClassName: "justify-between",
       footerBorder: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mx-4 my-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_ui_core31.CopyButton,
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mx-4 my-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_ui_core32.CopyButton,
             {
               text: linkText,
               size: 18,
@@ -7374,31 +7437,31 @@ var ShareDashboardDialog = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary mt-2 text-[11px]", children: "Anyone with the link can access this dashboard. You can revoke the link at any time." }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                import_ui_core31.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-text-foreground-secondary mt-2 text-[11px]", children: "Anyone with the link can access this dashboard. You can revoke the link at any time." }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_ui_core32.Checkbox,
                 {
                   checked: isReadonly,
                   onChange: handleReadonlyChange,
                   label: "Panel read-only access"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Viewers can only view the dashboard without entering panel edit mode or copy configuration." })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Viewers can only view the dashboard without entering panel edit mode or copy configuration." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                import_ui_core31.Checkbox,
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_ui_core32.Checkbox,
                 {
                   checked: hideModifiers,
                   onChange: handleHideModifiersChange,
                   label: "Hide controls"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
             ] })
           ] })
         ] })
@@ -7408,10 +7471,10 @@ var ShareDashboardDialog = ({
 };
 
 // src/dashboard/TimeRangeOverride.tsx
-var import_lodash14 = require("lodash");
+var import_lodash15 = require("lodash");
 var import_immer15 = require("immer");
-var import_ui_core32 = require("@sentio/ui-core");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_ui_core33 = require("@sentio/ui-core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultConfig8 = {
   enabled: false
 };
@@ -7423,7 +7486,7 @@ function TimeRangeOverride({
   globalTz,
   onSetGlobalTimeRange
 }) {
-  config = (0, import_lodash14.defaults)(config || {}, defaultConfig8);
+  config = (0, import_lodash15.defaults)(config || {}, defaultConfig8);
   const setEnabled = (enabled) => {
     config && onChange(
       (0, import_immer15.produce)(config, (draft) => {
@@ -7457,17 +7520,17 @@ function TimeRangeOverride({
       onSetGlobalTimeRange(start, end, tz);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_ui_core32.Switch,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_ui_core33.Switch,
       {
         checked: config.enabled || false,
         onChange: setEnabled,
         label: "Override Global Time"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_ui_core32.TimeRangePicker,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_ui_core33.TimeRangePicker,
       {
         startTime: config.enabled ? fromTimeLike(config.timeRange?.start) : globalStartTime,
         endTime: config.enabled ? fromTimeLike(config.timeRange?.end) : globalEndTime,
@@ -7479,39 +7542,39 @@ function TimeRangeOverride({
 }
 
 // src/dashboard/SeriesControls.tsx
-var import_react29 = require("react");
-var import_ui_core33 = require("@sentio/ui-core");
+var import_react30 = require("react");
+var import_ui_core34 = require("@sentio/ui-core");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_lu10 = require("react-icons/lu");
-var import_lodash15 = require("lodash");
-var import_react30 = require("@headlessui/react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_lodash16 = require("lodash");
+var import_react31 = require("@headlessui/react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var seriesChartTypes = [
   {
     value: "default",
-    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lu10.LuMountainSnow, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lu10.LuMountainSnow, { className: "mr-2 h-4 w-4" }),
       "Default"
     ] })
   },
   {
     value: "LINE",
-    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LineIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LineIcon_default, { className: "mr-2 h-4 w-4" }),
       "Line"
     ] })
   },
   {
     value: "BAR",
-    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BarIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BarIcon_default, { className: "mr-2 h-4 w-4" }),
       "Bar"
     ] })
   },
   {
     value: "AREA",
-    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
       "Area"
     ] })
   }
@@ -7522,8 +7585,8 @@ var SeriesControls = ({
   series,
   enabled
 }) => {
-  const parentRef = (0, import_react29.useRef)(null);
-  const [isDisclosureOpen, setIsDisclosureOpen] = (0, import_react29.useState)(true);
+  const parentRef = (0, import_react30.useRef)(null);
+  const [isDisclosureOpen, setIsDisclosureOpen] = (0, import_react30.useState)(true);
   const shouldVirtualize = series.length > 10;
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: shouldVirtualize && isDisclosureOpen ? series.length : 0,
@@ -7532,7 +7595,7 @@ var SeriesControls = ({
     overscan: 5
     // Render 5 extra items outside viewport for smooth scrolling
   });
-  (0, import_react29.useLayoutEffect)(() => {
+  (0, import_react30.useLayoutEffect)(() => {
     if (isDisclosureOpen && shouldVirtualize && parentRef.current) {
       const timeoutId = setTimeout(() => {
         virtualizer.measure();
@@ -7543,7 +7606,7 @@ var SeriesControls = ({
   const handleSeriesTypeChange = (seriesName, selectedType) => {
     const currentSeriesConfig = config?.seriesConfig || { series: {} };
     if (selectedType === "default") {
-      const newSeriesConfig2 = (0, import_lodash15.cloneDeep)(currentSeriesConfig);
+      const newSeriesConfig2 = (0, import_lodash16.cloneDeep)(currentSeriesConfig);
       if (newSeriesConfig2.series && newSeriesConfig2.series[seriesName]) {
         delete newSeriesConfig2.series[seriesName];
       }
@@ -7564,15 +7627,15 @@ var SeriesControls = ({
   };
   const renderSeriesItem = (seriesName) => {
     const currentType = config?.seriesConfig?.series?.[seriesName]?.type || "default";
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       {
         className: "text-icontent inline-flex h-8 w-full basis-0 px-2",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex shrink items-center rounded-l-md border border-r-0 px-2 font-medium sm:min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", title: seriesName, children: seriesName }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex items-center whitespace-nowrap border border-r-0 px-2", children: "Show as" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-40", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_ui_core33.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex shrink items-center rounded-l-md border border-r-0 px-2 font-medium sm:min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "truncate", title: seriesName, children: seriesName }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex items-center whitespace-nowrap border border-r-0 px-2", children: "Show as" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-40", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            import_ui_core34.Select,
             {
               options: seriesChartTypes,
               value: currentType,
@@ -7591,9 +7654,9 @@ var SeriesControls = ({
   if (!enabled) {
     return null;
   }
-  const titleWithReset = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full items-center justify-between pr-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: `Series (${series.length})` }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  const titleWithReset = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full items-center justify-between pr-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: `Series (${series.length})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "button",
       {
         type: "button",
@@ -7607,23 +7670,23 @@ var SeriesControls = ({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react30.Disclosure, { defaultOpen: true, children: ({ open }) => {
-    (0, import_react29.useEffect)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react31.Disclosure, { defaultOpen: true, children: ({ open }) => {
+    (0, import_react30.useEffect)(() => {
       setIsDisclosureOpen(open);
     }, [open]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "bg-default-bg w-full rounded-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-        import_react30.Disclosure.Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "bg-default-bg w-full rounded-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        import_react31.Disclosure.Button,
         {
-          className: (0, import_ui_core33.classNames)(
+          className: (0, import_ui_core34.classNames)(
             open ? "rounded-t" : "rounded-sm",
             "focus-visible:ring-primary-500/75 text-ilabel font-ilabel text-text-foreground hover:bg-sentio-gray-100 dark:hover:bg-sentio-gray-400 focus:outline-hidden focus-visible:ring-3 flex w-full px-2 py-1.5 text-left"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               import_lu10.LuChevronRight,
               {
-                className: (0, import_ui_core33.classNames)(
+                className: (0, import_ui_core34.classNames)(
                   open ? "rotate-90 transform" : "",
                   "mr-1 h-5 w-5 self-center transition-all"
                 )
@@ -7633,9 +7696,9 @@ var SeriesControls = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react30.Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react31.Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
         // Virtualized rendering for large lists - only render when open
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             ref: parentRef,
@@ -7643,7 +7706,7 @@ var SeriesControls = ({
             style: {
               contain: "strict"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "div",
               {
                 style: {
@@ -7654,7 +7717,7 @@ var SeriesControls = ({
                 children: virtualizer?.getVirtualItems().map((virtualItem) => {
                   const seriesName = series[virtualItem.index];
                   if (!seriesName) return null;
-                  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "div",
                     {
                       style: {
@@ -7676,7 +7739,7 @@ var SeriesControls = ({
         )
       ) : (
         // Normal rendering for small lists
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
       ) })
     ] });
   } });
@@ -7684,9 +7747,9 @@ var SeriesControls = ({
 
 // src/dashboard/QueryValueControls.tsx
 var import_immer16 = require("immer");
-var import_lodash16 = require("lodash");
-var import_ui_core34 = require("@sentio/ui-core");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_lodash17 = require("lodash");
+var import_ui_core35 = require("@sentio/ui-core");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var defaultConfig9 = {
   calculation: "LAST",
   colorTheme: {
@@ -7708,7 +7771,7 @@ function QueryValueControls({
   onChange,
   renderColorSelect
 }) {
-  config = (0, import_lodash16.defaults)(config, defaultConfig9);
+  config = (0, import_lodash17.defaults)(config, defaultConfig9);
   function onCalculationChange(cal) {
     config && onChange((0, import_immer16.produce)(config, (draft) => void (draft.calculation = cal)));
   }
@@ -7729,42 +7792,42 @@ function QueryValueControls({
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_ui_core34.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_ui_core35.DisclosurePanel,
     {
       title: "Query Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "shadow-xs flex h-8 rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md border bg-gray-50 px-3", children: "For each series, calculate the" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "shadow-xs flex h-8 rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md border border-r-0 bg-gray-50 px-3", children: "For each series, calculate the" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "select",
             {
               value: config?.calculation,
-              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex items-center border py-0.5 pl-4 pr-7 focus:relative focus:z-10 focus:outline-none",
               onChange: (e) => onCalculationChange(e.target.value),
-              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: d.value, children: d.label }, d.value))
+              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: d.value, children: d.label }, d.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap border bg-gray-50 px-3", children: "value, then show the" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap border border-x-0 bg-gray-50 px-3", children: "value, then show the" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "select",
             {
               value: config?.seriesCalculation,
-              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex items-center border py-0.5 pl-4 pr-7 focus:relative focus:z-10 focus:outline-none",
               onChange: (e) => onSeriesCalculationChange(e.target.value),
-              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: d.value, children: d.label }, d.value))
+              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: d.value, children: d.label }, d.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-r-md border bg-gray-50 px-3", children: "value of multiple series" })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-r-md border-b border-r border-t bg-gray-50 px-3", children: "value of multiple series" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "focus-within:ring-primary-500 shadow-xs border-main flex h-8 divide-x divide-gray-300 rounded-md border focus-within:border-transparent focus-within:ring-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md bg-gray-50 px-3", children: "Color Theme" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "focus-within:ring-primary-500 shadow-xs border-main flex h-8 divide-x divide-gray-300 rounded-md border focus-within:border-transparent focus-within:ring-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sm:text-ilabel text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md bg-gray-50 px-3", children: "Color Theme" }),
           renderColorSelect(config?.colorTheme, onSelectColor)
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_ui_core34.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_ui_core35.Checkbox,
           {
             checked: config?.showBackgroundChart,
             onChange: toggleShowBackgroundChart,
@@ -7775,6 +7838,136 @@ function QueryValueControls({
     }
   );
 }
+
+// src/dashboard/ImportPanelDialog.tsx
+var import_react32 = require("react");
+var import_lodash18 = require("lodash");
+var import_ui_core36 = require("@sentio/ui-core");
+var import_pi = require("react-icons/pi");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var panelExample = `Paste the panel configuration here.
+Here is an note type example:
+  {
+    "name": "",
+    "chart": {
+      "type": "NOTE",
+      "queries": [],
+      "formulas": [],
+      "config": null,
+      "note": {
+        "content": "* asdasda",
+        "fontSize": "MD",
+        "textAlign": "LEFT"
+      },
+      "datasourceType": "NOTES",
+      "segmentationQueries": [],
+      "insightsQueries": [],
+      "eventLogsConfig": null,
+      "retentionQuery": null,
+      "sqlQuery": ""
+    }
+  }
+`;
+function isValidPanelData(data) {
+  try {
+    const parsed = JSON.parse(data);
+    return parsed.name !== void 0 || parsed.chart !== void 0;
+  } catch {
+    return false;
+  }
+}
+var ImportPanelDialog = ({
+  show,
+  onClose: _onClose,
+  onSubmit
+}) => {
+  const textareaRef = (0, import_react32.useRef)(null);
+  const {
+    value: isInvalid,
+    setTrue: setInvalid,
+    setFalse: setValid
+  } = (0, import_ui_core36.useBoolean)(false);
+  (0, import_react32.useEffect)(() => {
+    if (show) {
+      setTimeout(() => {
+        textareaRef.current?.focus();
+      }, 500);
+    }
+  }, [show]);
+  const debouncedValidate = (0, import_react32.useMemo)(
+    () => (0, import_lodash18.debounce)((value) => {
+      if (isValidPanelData(value)) {
+        setValid();
+      } else {
+        setInvalid();
+      }
+    }, 500),
+    [setValid, setInvalid]
+  );
+  const handleSubmit = () => {
+    if (isInvalid) return;
+    try {
+      const parsed = JSON.parse(textareaRef.current?.value || "");
+      onSubmit(parsed);
+    } catch {
+      setInvalid();
+    }
+  };
+  const onClose = (0, import_react32.useCallback)(() => {
+    _onClose();
+    setValid();
+    if (textareaRef.current) {
+      textareaRef.current.value = "";
+    }
+  }, [_onClose, setValid]);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_ui_core36.SlideOver,
+    {
+      title: "Import Panel",
+      open: show,
+      onClose,
+      size: "lg",
+      triggerClose: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "w-full space-y-6 p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "textarea",
+          {
+            ref: textareaRef,
+            className: (0, import_ui_core36.classNames)(
+              "text-icontent text-text-foreground h-[60vh] w-full rounded-sm border",
+              isInvalid ? "border-rose-600! ring-rose-600! focus:border-rose-600! focus:[box-shadow:0_0_0_1px_rgb(225_29_72)]!" : ""
+            ),
+            rows: 10,
+            onChange: (evt) => debouncedValidate(evt.target.value),
+            placeholder: panelExample
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui_core36.Button, { status: "danger", size: "lg", onClick: onClose, children: "Cancel" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "inline-flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_ui_core36.Button,
+              {
+                size: "lg",
+                onClick: () => {
+                  try {
+                    const parsed = JSON.parse(textareaRef.current?.value || "");
+                    textareaRef.current.value = JSON.stringify(parsed, null, 2);
+                  } catch {
+                    setInvalid();
+                  }
+                },
+                icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_pi.PiBracketsCurlyBold, {}),
+                children: "Format"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_ui_core36.Button, { role: "primary", size: "lg", onClick: handleSubmit, children: "Submit" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
@@ -7793,6 +7986,7 @@ function QueryValueControls({
   DataControls,
   EditDashboardDialog,
   EditGroupDialog,
+  ErrorChart,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
@@ -7800,6 +7994,7 @@ function QueryValueControls({
   FunctionsCategories,
   FunctionsPanel,
   HIGHLIGHT_COLORS,
+  ImportPanelDialog,
   LabelControls,
   LabelSearchProvider,
   LabelsInput,