@sentio/ui-dashboard 0.3.9 → 0.3.11

package/dist/index.mjs

@@ -6906,6 +6906,67 @@ var EditDashboardDialog = ({
   );
 };
 
+// src/dashboard/ErrorChart.tsx
+import React4 from "react";
+import { BarLoading as BarLoading2, Button as Button5 } from "@sentio/ui-core";
+import { useResizeDetector as useResizeDetector5 } from "react-resize-detector";
+import { isString } from "lodash";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+var ErrorChart = React4.memo(function ErrorChart2({
+  data,
+  logoSrc,
+  onNavigateToDatasource
+}) {
+  const { ref, width, height } = useResizeDetector5();
+  let hintMessage;
+  if (data?.code === 5) {
+    hintMessage = /* @__PURE__ */ jsxs31("span", { children: [
+      "No active processor found",
+      /* @__PURE__ */ jsx41("br", {}),
+      " Check the",
+      /* @__PURE__ */ jsx41(Button5, { role: "link", onClick: onNavigateToDatasource, children: "datasource" }),
+      "page for more details."
+    ] });
+  } else if (data?.status === 429) {
+    return /* @__PURE__ */ jsx41(
+      BarLoading2,
+      {
+        className: "bg-default-bg absolute w-full",
+        hint: /* @__PURE__ */ jsx41("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__ */ jsx41("div", { className: "flex h-full w-full items-center", ref, children: /* @__PURE__ */ jsxs31("div", { className: "w-full space-y-4 text-center", children: [
+    imageSize < 10 || !logoSrc ? null : /* @__PURE__ */ jsx41(
+      "img",
+      {
+        className: "mx-auto",
+        src: logoSrc,
+        width: imageSize,
+        height: imageSize,
+        style: { width: imageSize, height: "auto" },
+        alt: "gray logo"
+      }
+    ),
+    /* @__PURE__ */ jsx41(
+      "div",
+      {
+        title: 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__ */ jsx41(RefreshButton, {})
+  ] }) });
+});
+
 // src/dashboard/EditGroupDialog.tsx
 import { useEffect as useEffect11, useMemo as useMemo13, useRef as useRef6, useState as useState12 } from "react";
 import { BaseDialog as BaseDialog2, Select as Select2, classNames as classNames12 } from "@sentio/ui-core";
@@ -6961,9 +7022,9 @@ function resolveHeaderStyle(style, colorKey, isDark) {
 }
 
 // src/dashboard/EditGroupDialog.tsx
-import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 function StyleCard({ selected, label, onClick, preview }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "button",
     {
       type: "button",
@@ -6973,8 +7034,8 @@ function StyleCard({ selected, label, onClick, preview }) {
         selected ? "border-primary-600 ring-primary-600/30 ring-3 shadow-sm" : "border-main hover:border-primary-400"
       ),
       children: [
-        /* @__PURE__ */ jsx41("div", { className: "bg-hover/40 flex h-28 items-center justify-center", children: preview }),
-        /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsx42("div", { className: "bg-hover/40 flex h-28 items-center justify-center", children: preview }),
+        /* @__PURE__ */ jsxs32(
           "div",
           {
             className: classNames12(
@@ -6982,7 +7043,7 @@ function StyleCard({ selected, label, onClick, preview }) {
               selected ? "text-primary-600 font-semibold" : "text-text-foreground font-medium"
             ),
             children: [
-              selected && /* @__PURE__ */ jsx41(LuCheck2, { className: "h-3.5 w-3.5" }),
+              selected && /* @__PURE__ */ jsx42(LuCheck2, { className: "h-3.5 w-3.5" }),
               label
             ]
           }
@@ -6992,13 +7053,13 @@ function StyleCard({ selected, label, onClick, preview }) {
   );
 }
 function DefaultPreview() {
-  return /* @__PURE__ */ jsx41("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__ */ jsx42("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__ */ jsxs31("div", { className: "border-main bg-default-bg flex h-16 w-32 flex-col rounded border", children: [
-    /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs32("div", { className: "border-main bg-default-bg flex h-16 w-32 flex-col rounded border", children: [
+    /* @__PURE__ */ jsx42(
       "div",
       {
         className: "flex h-9 items-center justify-center text-sm font-semibold",
@@ -7006,7 +7067,7 @@ function EmphasisPreview({
         children: "Title"
       }
     ),
-    /* @__PURE__ */ jsx41("div", { className: "flex-1" })
+    /* @__PURE__ */ jsx42("div", { className: "flex-1" })
   ] });
 }
 function EditGroupDialog({
@@ -7056,8 +7117,8 @@ function EditGroupDialog({
       return {
         value: c.key,
         title: c.name,
-        label: ({ selected }) => /* @__PURE__ */ jsxs31("div", { className: "flex w-full items-center gap-2.5 pr-2", children: [
-          /* @__PURE__ */ jsx41(
+        label: ({ selected }) => /* @__PURE__ */ jsxs32("div", { className: "flex w-full items-center gap-2.5 pr-2", children: [
+          /* @__PURE__ */ jsx42(
             "div",
             {
               className: "flex h-5 w-5 items-center justify-center rounded text-xs font-bold",
@@ -7068,14 +7129,14 @@ function EditGroupDialog({
               children: "T"
             }
           ),
-          /* @__PURE__ */ jsx41("span", { className: "flex-1 text-sm", children: c.name }),
-          selected && /* @__PURE__ */ jsx41(LuCheck2, { className: "text-primary-600 h-4 w-4" })
+          /* @__PURE__ */ jsx42("span", { className: "flex-1 text-sm", children: c.name }),
+          selected && /* @__PURE__ */ jsx42(LuCheck2, { className: "text-primary-600 h-4 w-4" })
         ] })
       };
     }),
     [isDark]
   );
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     BaseDialog2,
     {
       title: "Edit Group",
@@ -7087,10 +7148,10 @@ function EditGroupDialog({
       okText: "Save",
       panelClassName: "sm:max-w-xl",
       initialFocus: titleRef,
-      children: /* @__PURE__ */ jsxs31("div", { className: "text-text-foreground px-4 pb-2 pt-4", children: [
-        /* @__PURE__ */ jsx41("h4", { className: "text-text-foreground mb-3 text-sm font-semibold", children: "Display options" }),
-        /* @__PURE__ */ jsx41("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Title" }),
-        /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs32("div", { className: "text-text-foreground px-4 pb-2 pt-4", children: [
+        /* @__PURE__ */ jsx42("h4", { className: "text-text-foreground mb-3 text-sm font-semibold", children: "Display options" }),
+        /* @__PURE__ */ jsx42("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Title" }),
+        /* @__PURE__ */ jsx42(
           "input",
           {
             ref: titleRef,
@@ -7106,29 +7167,29 @@ 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__ */ jsxs31("div", { className: "mb-4 grid grid-cols-2 gap-3", children: [
-          /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs32("div", { className: "mb-4 grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx42(
             StyleCard,
             {
               selected: draftStyle === "DEFAULT",
               label: "Default",
               onClick: () => onPickStyle("DEFAULT"),
-              preview: /* @__PURE__ */ jsx41(DefaultPreview, {})
+              preview: /* @__PURE__ */ jsx42(DefaultPreview, {})
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             StyleCard,
             {
               selected: draftStyle === "EMPHASIS",
               label: "Emphasis",
               onClick: () => onPickStyle("EMPHASIS"),
-              preview: /* @__PURE__ */ jsx41(EmphasisPreview, { color: previewColor })
+              preview: /* @__PURE__ */ jsx42(EmphasisPreview, { color: previewColor })
             }
           )
         ] }),
-        draftStyle !== "DEFAULT" && /* @__PURE__ */ jsxs31(Fragment10, { children: [
-          /* @__PURE__ */ jsx41("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Highlight Color" }),
-          /* @__PURE__ */ jsx41(
+        draftStyle !== "DEFAULT" && /* @__PURE__ */ jsxs32(Fragment10, { children: [
+          /* @__PURE__ */ jsx42("label", { className: "text-text-foreground-secondary text-ilabel mb-1 block", children: "Highlight Color" }),
+          /* @__PURE__ */ jsx42(
             Select2,
             {
               value: draftColor || DEFAULT_HIGHLIGHT_KEY,
@@ -7152,7 +7213,7 @@ import { classNames as classNames13 } from "@sentio/ui-core";
 import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
 import { IoMdRefresh as IoMdRefresh2 } from "react-icons/io";
 import dayjsEn from "dayjs/locale/en";
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 dayjs6.extend(relativeTime);
 dayjs6.extend(updateLocale);
 dayjs6.locale("en.short", {
@@ -7216,7 +7277,7 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
     }
   }, []);
   const showReload = fetching || stats?.isRefreshing;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: classNames13(
@@ -7225,8 +7286,8 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
         showReload ? "pr-5" : "pr-1.5 hover:pr-5"
       ),
       children: [
-        /* @__PURE__ */ jsx42("span", { className: "cursor-default text-[10px]", ref: timeRef }),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43("span", { className: "cursor-default text-[10px]", ref: timeRef }),
+        /* @__PURE__ */ jsx43(
           "button",
           {
             onClick,
@@ -7234,7 +7295,7 @@ var DashboardRefresh = ({ stats, onRefresh }) => {
               "absolute right-1",
               showReload ? "block" : "hidden group-hover/refresh:block"
             ),
-            children: /* @__PURE__ */ jsx42(
+            children: /* @__PURE__ */ jsx43(
               IoMdRefresh2,
               {
                 className: classNames13(
@@ -7258,7 +7319,7 @@ import {
   Checkbox as Checkbox6,
   dateTimeToString as dateTimeToString2
 } from "@sentio/ui-core";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ShareDashboardDialog = ({
   open,
   initData,
@@ -7300,7 +7361,7 @@ var ShareDashboardDialog = ({
     setHideModifiers(checked);
     handleConfigChange(isReadonly, checked);
   };
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     BaseDialog3,
     {
       title: "Sharing: ON",
@@ -7320,10 +7381,10 @@ var ShareDashboardDialog = ({
       onClose,
       buttonsClassName: "justify-between",
       footerBorder: false,
-      children: /* @__PURE__ */ jsxs33("div", { className: "mx-4 my-4", children: [
-        /* @__PURE__ */ jsxs33("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
-          /* @__PURE__ */ jsx43("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
-          /* @__PURE__ */ jsx43("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsxs34("div", { className: "mx-4 my-4", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
+          /* @__PURE__ */ jsx44("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
+          /* @__PURE__ */ jsx44("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ jsx44(
             CopyButton3,
             {
               text: linkText,
@@ -7332,12 +7393,12 @@ var ShareDashboardDialog = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx43("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__ */ jsxs33("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
-          /* @__PURE__ */ jsx43("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
-          /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs33("div", { children: [
-              /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44("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__ */ jsxs34("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
+          /* @__PURE__ */ jsx44("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
+          /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs34("div", { children: [
+              /* @__PURE__ */ jsx44(
                 Checkbox6,
                 {
                   checked: isReadonly,
@@ -7345,10 +7406,10 @@ var ShareDashboardDialog = ({
                   label: "Panel read-only access"
                 }
               ),
-              /* @__PURE__ */ jsx43("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__ */ jsx44("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__ */ jsxs33("div", { children: [
-              /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsxs34("div", { children: [
+              /* @__PURE__ */ jsx44(
                 Checkbox6,
                 {
                   checked: hideModifiers,
@@ -7356,7 +7417,7 @@ var ShareDashboardDialog = ({
                   label: "Hide controls"
                 }
               ),
-              /* @__PURE__ */ jsx43("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
+              /* @__PURE__ */ jsx44("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
             ] })
           ] })
         ] })
@@ -7369,7 +7430,7 @@ var ShareDashboardDialog = ({
 import { defaults as defaults9 } from "lodash";
 import { produce as produce15 } from "immer";
 import { Switch, TimeRangePicker } from "@sentio/ui-core";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var defaultConfig8 = {
   enabled: false
 };
@@ -7415,8 +7476,8 @@ function TimeRangeOverride({
       onSetGlobalTimeRange(start, end, tz);
     }
   }
-  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
-    /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
+    /* @__PURE__ */ jsx45("div", { className: "flex items-center", children: /* @__PURE__ */ jsx45(
       Switch,
       {
         checked: config.enabled || false,
@@ -7424,7 +7485,7 @@ function TimeRangeOverride({
         label: "Override Global Time"
       }
     ) }),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       TimeRangePicker,
       {
         startTime: config.enabled ? fromTimeLike(config.timeRange?.start) : globalStartTime,
@@ -7443,33 +7504,33 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { LuChevronRight, LuMountainSnow } from "react-icons/lu";
 import { cloneDeep } from "lodash";
 import { Disclosure } from "@headlessui/react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var seriesChartTypes = [
   {
     value: "default",
-    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx45(LuMountainSnow, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ jsxs36("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx46(LuMountainSnow, { className: "mr-2 h-4 w-4" }),
       "Default"
     ] })
   },
   {
     value: "LINE",
-    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx45(LineIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ jsxs36("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx46(LineIcon_default, { className: "mr-2 h-4 w-4" }),
       "Line"
     ] })
   },
   {
     value: "BAR",
-    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx45(BarIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ jsxs36("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx46(BarIcon_default, { className: "mr-2 h-4 w-4" }),
       "Bar"
     ] })
   },
   {
     value: "AREA",
-    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx45(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
+    label: /* @__PURE__ */ jsxs36("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx46(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
       "Area"
     ] })
   }
@@ -7522,14 +7583,14 @@ var SeriesControls = ({
   };
   const renderSeriesItem = (seriesName) => {
     const currentType = config?.seriesConfig?.series?.[seriesName]?.type || "default";
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       "div",
       {
         className: "text-icontent inline-flex h-8 w-full basis-0 px-2",
         children: [
-          /* @__PURE__ */ jsx45("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__ */ jsx45("span", { className: "truncate", title: seriesName, children: seriesName }) }),
-          /* @__PURE__ */ jsx45("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__ */ jsx45("div", { className: "w-40", children: /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46("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__ */ jsx46("span", { className: "truncate", title: seriesName, children: seriesName }) }),
+          /* @__PURE__ */ jsx46("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__ */ jsx46("div", { className: "w-40", children: /* @__PURE__ */ jsx46(
             Select3,
             {
               options: seriesChartTypes,
@@ -7549,9 +7610,9 @@ var SeriesControls = ({
   if (!enabled) {
     return null;
   }
-  const titleWithReset = /* @__PURE__ */ jsxs35("div", { className: "flex w-full items-center justify-between pr-2", children: [
-    /* @__PURE__ */ jsx45("span", { children: `Series (${series.length})` }),
-    /* @__PURE__ */ jsx45(
+  const titleWithReset = /* @__PURE__ */ jsxs36("div", { className: "flex w-full items-center justify-between pr-2", children: [
+    /* @__PURE__ */ jsx46("span", { children: `Series (${series.length})` }),
+    /* @__PURE__ */ jsx46(
       "button",
       {
         type: "button",
@@ -7565,12 +7626,12 @@ var SeriesControls = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx45(Disclosure, { defaultOpen: true, children: ({ open }) => {
+  return /* @__PURE__ */ jsx46(Disclosure, { defaultOpen: true, children: ({ open }) => {
     useEffect13(() => {
       setIsDisclosureOpen(open);
     }, [open]);
-    return /* @__PURE__ */ jsxs35("div", { className: "bg-default-bg w-full rounded-sm", children: [
-      /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36("div", { className: "bg-default-bg w-full rounded-sm", children: [
+      /* @__PURE__ */ jsxs36(
         Disclosure.Button,
         {
           className: classNames14(
@@ -7578,7 +7639,7 @@ var SeriesControls = ({
             "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__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               LuChevronRight,
               {
                 className: classNames14(
@@ -7591,9 +7652,9 @@ var SeriesControls = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx45(Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
+      /* @__PURE__ */ jsx46(Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
         // Virtualized rendering for large lists - only render when open
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             ref: parentRef,
@@ -7601,7 +7662,7 @@ var SeriesControls = ({
             style: {
               contain: "strict"
             },
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               "div",
               {
                 style: {
@@ -7612,7 +7673,7 @@ var SeriesControls = ({
                 children: virtualizer?.getVirtualItems().map((virtualItem) => {
                   const seriesName = series[virtualItem.index];
                   if (!seriesName) return null;
-                  return /* @__PURE__ */ jsx45(
+                  return /* @__PURE__ */ jsx46(
                     "div",
                     {
                       style: {
@@ -7634,7 +7695,7 @@ var SeriesControls = ({
         )
       ) : (
         // Normal rendering for small lists
-        /* @__PURE__ */ jsx45("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
+        /* @__PURE__ */ jsx46("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
       ) })
     ] });
   } });
@@ -7644,7 +7705,7 @@ var SeriesControls = ({
 import { produce as produce16 } from "immer";
 import { defaults as defaults10 } from "lodash";
 import { Checkbox as Checkbox7, DisclosurePanel as DisclosurePanel12 } from "@sentio/ui-core";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultConfig9 = {
   calculation: "LAST",
   colorTheme: {
@@ -7687,41 +7748,41 @@ function QueryValueControls({
       })
     );
   }
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     DisclosurePanel12,
     {
       title: "Query Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap items-center gap-4", children: [
-        /* @__PURE__ */ jsxs36("div", { className: "shadow-xs flex h-8 rounded-md", children: [
-          /* @__PURE__ */ jsx46("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__ */ jsx46(
+      children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsxs37("div", { className: "shadow-xs flex h-8 rounded-md", children: [
+          /* @__PURE__ */ jsx47("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__ */ jsx47(
             "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__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+              children: CalculationItems4.map((d) => /* @__PURE__ */ jsx47("option", { value: d.value, children: d.label }, d.value))
             }
           ),
-          /* @__PURE__ */ jsx46("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__ */ jsx46(
+          /* @__PURE__ */ jsx47("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__ */ jsx47(
             "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__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+              children: CalculationItems4.map((d) => /* @__PURE__ */ jsx47("option", { value: d.value, children: d.label }, d.value))
             }
           ),
-          /* @__PURE__ */ jsx46("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__ */ jsx47("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__ */ jsxs36("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__ */ jsx46("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__ */ jsxs37("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__ */ jsx47("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__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           Checkbox7,
           {
             checked: config?.showBackgroundChart,
@@ -7733,6 +7794,136 @@ function QueryValueControls({
     }
   );
 }
+
+// src/dashboard/ImportPanelDialog.tsx
+import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo15, useRef as useRef9 } from "react";
+import { debounce } from "lodash";
+import { SlideOver, Button as Button6, useBoolean as useBoolean2, classNames as classNames15 } from "@sentio/ui-core";
+import { PiBracketsCurlyBold } from "react-icons/pi";
+import { jsx as jsx48, jsxs as jsxs38 } from "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 = useRef9(null);
+  const {
+    value: isInvalid,
+    setTrue: setInvalid,
+    setFalse: setValid
+  } = useBoolean2(false);
+  useEffect14(() => {
+    if (show) {
+      setTimeout(() => {
+        textareaRef.current?.focus();
+      }, 500);
+    }
+  }, [show]);
+  const debouncedValidate = useMemo15(
+    () => 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 = useCallback8(() => {
+    _onClose();
+    setValid();
+    if (textareaRef.current) {
+      textareaRef.current.value = "";
+    }
+  }, [_onClose, setValid]);
+  return /* @__PURE__ */ jsx48(
+    SlideOver,
+    {
+      title: "Import Panel",
+      open: show,
+      onClose,
+      size: "lg",
+      triggerClose: "button",
+      children: /* @__PURE__ */ jsxs38("div", { className: "w-full space-y-6 p-4", children: [
+        /* @__PURE__ */ jsx48(
+          "textarea",
+          {
+            ref: textareaRef,
+            className: classNames15(
+              "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__ */ jsxs38("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsx48("span", { children: /* @__PURE__ */ jsx48(Button6, { status: "danger", size: "lg", onClick: onClose, children: "Cancel" }) }),
+          /* @__PURE__ */ jsxs38("span", { className: "inline-flex gap-2", children: [
+            /* @__PURE__ */ jsx48(
+              Button6,
+              {
+                size: "lg",
+                onClick: () => {
+                  try {
+                    const parsed = JSON.parse(textareaRef.current?.value || "");
+                    textareaRef.current.value = JSON.stringify(parsed, null, 2);
+                  } catch {
+                    setInvalid();
+                  }
+                },
+                icon: /* @__PURE__ */ jsx48(PiBracketsCurlyBold, {}),
+                children: "Format"
+              }
+            ),
+            /* @__PURE__ */ jsx48(Button6, { role: "primary", size: "lg", onClick: handleSubmit, children: "Submit" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
 export {
   AggregateInput,
   AreaIcon_default as AreaIcon,
@@ -7750,6 +7941,7 @@ export {
   DataControls,
   EditDashboardDialog,
   EditGroupDialog,
+  ErrorChart,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
@@ -7757,6 +7949,7 @@ export {
   FunctionsCategories,
   FunctionsPanel,
   HIGHLIGHT_COLORS,
+  ImportPanelDialog,
   LabelControls,
   LabelSearchProvider,
   LabelsInput,