@databrainhq/plugin 0.8.10 → 0.8.12

package/dist/index.es.js

@@ -2512,69 +2512,73 @@ function useQuery(arg1, arg2, arg3) {
   var parsedOptions = parseQueryArgs(arg1, arg2, arg3);
   return useBaseQuery(parsedOptions, QueryObserver);
 }
-const container$h = "_container_1mfl1_1";
-const fixed = "_fixed_1mfl1_1";
-const absolute = "_absolute_1mfl1_1";
-const flex = "_flex_1mfl1_1";
-const table$4 = "_table_1mfl1_1";
-const grid = "_grid_1mfl1_1";
-const hidden = "_hidden_1mfl1_1";
-const transform = "_transform_1mfl1_1";
-const resize = "_resize_1mfl1_1";
-const truncate = "_truncate_1mfl1_1";
-const border = "_border_1mfl1_1";
-const shadow = "_shadow_1mfl1_1";
-const filter$1 = "_filter_1mfl1_363";
-const floatingFilterButton = "_floatingFilterButton_1mfl1_371";
-const floatingFilterButtonIcon = "_floatingFilterButtonIcon_1mfl1_379";
-const floatingButton = "_floatingButton_1mfl1_387";
-const staticContainer = "_staticContainer_1mfl1_395";
-const floatingContainer = "_floatingContainer_1mfl1_403";
+const container$h = "_container_1pzq0_1";
+const fixed = "_fixed_1pzq0_1";
+const absolute = "_absolute_1pzq0_1";
+const flex = "_flex_1pzq0_1";
+const table$4 = "_table_1pzq0_1";
+const grid = "_grid_1pzq0_1";
+const hidden = "_hidden_1pzq0_1";
+const transform = "_transform_1pzq0_1";
+const resize = "_resize_1pzq0_1";
+const truncate = "_truncate_1pzq0_1";
+const border = "_border_1pzq0_1";
+const shadow = "_shadow_1pzq0_1";
+const filter$1 = "_filter_1pzq0_363";
+const floatingFilterButton = "_floatingFilterButton_1pzq0_371";
+const floatingFilterButtonIcon = "_floatingFilterButtonIcon_1pzq0_379";
+const floatingCreateButton = "_floatingCreateButton_1pzq0_387";
+const floatingCreateButtonIcon = "_floatingCreateButtonIcon_1pzq0_395";
+const floatingButton = "_floatingButton_1pzq0_403";
+const staticContainer = "_staticContainer_1pzq0_411";
+const floatingContainer = "_floatingContainer_1pzq0_419";
 var styles$F = {
   container: container$h,
-  "static": "_static_1mfl1_395",
+  "static": "_static_1pzq0_411",
   fixed,
   absolute,
-  "left-2": "_left-2_1mfl1_1",
-  "top-1": "_top-1_1mfl1_1",
-  "mt-2.5": "_mt-2.5_1mfl1_1",
-  "mt-2": "_mt-2_1mfl1_1",
-  "mb-3": "_mb-3_1mfl1_1",
+  "left-2": "_left-2_1pzq0_1",
+  "top-1": "_top-1_1pzq0_1",
+  "mt-2.5": "_mt-2.5_1pzq0_1",
+  "mt-2": "_mt-2_1pzq0_1",
+  "mb-3": "_mb-3_1pzq0_1",
   flex,
   table: table$4,
   grid,
   hidden,
-  "h-screen": "_h-screen_1mfl1_1",
-  "h-[10%]": "_h-[10%]_1mfl1_1",
-  "w-screen": "_w-screen_1mfl1_1",
-  "w-full": "_w-full_1mfl1_1",
+  "h-screen": "_h-screen_1pzq0_1",
+  "h-[10%]": "_h-[10%]_1pzq0_1",
+  "w-screen": "_w-screen_1pzq0_1",
+  "w-full": "_w-full_1pzq0_1",
   transform,
   resize,
-  "overflow-x-hidden": "_overflow-x-hidden_1mfl1_1",
+  "overflow-x-hidden": "_overflow-x-hidden_1pzq0_1",
   truncate,
   border,
-  "p-2": "_p-2_1mfl1_1",
-  "p-1": "_p-1_1mfl1_1",
-  "text-center": "_text-center_1mfl1_1",
-  "text-sm": "_text-sm_1mfl1_1",
-  "text-xs": "_text-xs_1mfl1_1",
-  "text-blue-700": "_text-blue-700_1mfl1_1",
+  "p-2": "_p-2_1pzq0_1",
+  "p-1": "_p-1_1pzq0_1",
+  "text-center": "_text-center_1pzq0_1",
+  "text-sm": "_text-sm_1pzq0_1",
+  "text-xs": "_text-xs_1pzq0_1",
+  "text-blue-700": "_text-blue-700_1pzq0_1",
   shadow,
   filter: filter$1,
-  "!filter": "_!filter_1mfl1_1",
-  "embedDashboard-container": "_embedDashboard-container_1mfl1_323",
-  "embedDashboard-header-static": "_embedDashboard-header-static_1mfl1_331",
-  "embedDashboard-header-floating": "_embedDashboard-header-floating_1mfl1_339",
-  "embedDashboard-wrapper": "_embedDashboard-wrapper_1mfl1_347",
-  "alt-container": "_alt-container_1mfl1_355",
+  "!filter": "_!filter_1pzq0_1",
+  "embedDashboard-container": "_embedDashboard-container_1pzq0_323",
+  "embedDashboard-header-static": "_embedDashboard-header-static_1pzq0_331",
+  "embedDashboard-header-floating": "_embedDashboard-header-floating_1pzq0_339",
+  "embedDashboard-wrapper": "_embedDashboard-wrapper_1pzq0_347",
+  "alt-container": "_alt-container_1pzq0_355",
   floatingFilterButton,
   floatingFilterButtonIcon,
+  floatingCreateButton,
+  floatingCreateButtonIcon,
   floatingButton,
   staticContainer,
   floatingContainer,
-  "hover:cursor-pointer": "_hover:cursor-pointer_1mfl1_1",
-  "hover:cursor-text": "_hover:cursor-text_1mfl1_1",
-  "disabled:cursor-text": "_disabled:cursor-text_1mfl1_1"
+  "hover:cursor-pointer": "_hover:cursor-pointer_1pzq0_1",
+  "hover:cursor-text": "_hover:cursor-text_1pzq0_1",
+  "disabled:cursor-text": "_disabled:cursor-text_1pzq0_1"
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n2) {
@@ -2641,17 +2645,17 @@ var classnames$1 = { exports: {} };
 })(classnames$1);
 var classnames = classnames$1.exports;
 var styles$E = {
-  "btn-primary": "_btn-primary_u81u9_1",
-  "btn-secondary": "_btn-secondary_u81u9_9",
-  "btn-reject": "_btn-reject_u81u9_17",
-  "btn-outlined": "_btn-outlined_u81u9_27",
-  "btn-tertiary": "_btn-tertiary_u81u9_35",
-  "btn-default": "_btn-default_u81u9_43",
-  "btn-large": "_btn-large_u81u9_49",
-  "btn-small": "_btn-small_u81u9_55",
-  "btn-xs": "_btn-xs_u81u9_61",
-  "btn-medium": "_btn-medium_u81u9_67",
-  "btn-11rem": "_btn-11rem_u81u9_75"
+  "btn-primary": "_btn-primary_17kvk_1",
+  "btn-secondary": "_btn-secondary_17kvk_5",
+  "btn-reject": "_btn-reject_17kvk_9",
+  "btn-outlined": "_btn-outlined_17kvk_14",
+  "btn-tertiary": "_btn-tertiary_17kvk_18",
+  "btn-default": "_btn-default_17kvk_22",
+  "btn-large": "_btn-large_17kvk_25",
+  "btn-small": "_btn-small_17kvk_28",
+  "btn-xs": "_btn-xs_17kvk_31",
+  "btn-medium": "_btn-medium_17kvk_34",
+  "btn-11rem": "_btn-11rem_17kvk_38"
 };
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -4940,39 +4944,39 @@ let xe = "div", ne = S.RenderStrategy, re = C$2(function(e2, s2) {
   let n2 = useContext(F) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(q, { ref: s$12, ...e2 }) : React__default.createElement(re, { ref: s$12, ...e2 }));
 }), We = Object.assign(q, { Child: Pe, Root: q });
-const listBoxButton = "_listBoxButton_kdipy_9";
-const selectedOptionText = "_selectedOptionText_kdipy_33";
-const transitionDiv = "_transitionDiv_kdipy_41";
-const listboxButtonWrapper = "_listboxButtonWrapper_kdipy_49";
-const arrowicon = "_arrowicon_kdipy_55";
-const leave$2 = "_leave_kdipy_61";
-const leaveFrom$2 = "_leaveFrom_kdipy_67";
-const leaveTo$2 = "_leaveTo_kdipy_73";
-const notAvailable = "_notAvailable_kdipy_79";
-const option$1 = "_option_kdipy_85";
-const activeOption = "_activeOption_kdipy_91";
-const optionSelected = "_optionSelected_kdipy_97";
-const inactiveOption = "_inactiveOption_kdipy_103";
-const optionLabel = "_optionLabel_kdipy_109";
-const optionSubLabel = "_optionSubLabel_kdipy_115";
-const selectedLabel = "_selectedLabel_kdipy_121";
-const nonselectedLabel = "_nonselectedLabel_kdipy_127";
-const check = "_check_kdipy_133";
-const checkActive = "_checkActive_kdipy_139";
-const checkInactive = "_checkInactive_kdipy_145";
-const checkIcon$1 = "_checkIcon_kdipy_151";
-const checkIconSelected = "_checkIconSelected_kdipy_157";
-const checkIconUnselected = "_checkIconUnselected_kdipy_163";
-const loadMore$1 = "_loadMore_kdipy_169";
-const selectedList = "_selectedList_kdipy_175";
-const selectedListItem = "_selectedListItem_kdipy_181";
-const label$7 = "_label_kdipy_187";
-const clientText$1 = "_clientText_kdipy_193";
+const listBoxButton = "_listBoxButton_fw8xj_5";
+const selectedOptionText = "_selectedOptionText_fw8xj_17";
+const transitionDiv = "_transitionDiv_fw8xj_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_fw8xj_25";
+const arrowicon = "_arrowicon_fw8xj_28";
+const leave$2 = "_leave_fw8xj_31";
+const leaveFrom$2 = "_leaveFrom_fw8xj_34";
+const leaveTo$2 = "_leaveTo_fw8xj_37";
+const notAvailable = "_notAvailable_fw8xj_40";
+const option$1 = "_option_fw8xj_43";
+const activeOption = "_activeOption_fw8xj_46";
+const optionSelected = "_optionSelected_fw8xj_49";
+const inactiveOption = "_inactiveOption_fw8xj_52";
+const optionLabel = "_optionLabel_fw8xj_55";
+const optionSubLabel = "_optionSubLabel_fw8xj_58";
+const selectedLabel = "_selectedLabel_fw8xj_61";
+const nonselectedLabel = "_nonselectedLabel_fw8xj_64";
+const check = "_check_fw8xj_67";
+const checkActive = "_checkActive_fw8xj_70";
+const checkInactive = "_checkInactive_fw8xj_73";
+const checkIcon$1 = "_checkIcon_fw8xj_76";
+const checkIconSelected = "_checkIconSelected_fw8xj_79";
+const checkIconUnselected = "_checkIconUnselected_fw8xj_82";
+const loadMore$1 = "_loadMore_fw8xj_85";
+const selectedList = "_selectedList_fw8xj_88";
+const selectedListItem = "_selectedListItem_fw8xj_91";
+const label$7 = "_label_fw8xj_94";
+const clientText$1 = "_clientText_fw8xj_97";
 var style = {
-  "listBox-label": "_listBox-label_kdipy_1",
-  "listBoxButton-container": "_listBoxButton-container_kdipy_9",
+  "listBox-label": "_listBox-label_fw8xj_1",
+  "listBoxButton-container": "_listBoxButton-container_fw8xj_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_kdipy_25",
+  "listBox-option": "_listBox-option_fw8xj_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -5001,22 +5005,22 @@ var style = {
   label: label$7,
   clientText: clientText$1
 };
-const primary = "_primary_1ipyg_1";
-const secondary = "_secondary_1ipyg_9";
-const tertiary = "_tertiary_1ipyg_19";
+const primary = "_primary_18yak_1";
+const secondary = "_secondary_18yak_5";
+const tertiary = "_tertiary_18yak_10";
 var styles$C = {
   primary,
   secondary,
   tertiary,
-  "font-18": "_font-18_1ipyg_27",
-  "font-20": "_font-20_1ipyg_35",
-  "font-14": "_font-14_1ipyg_43",
-  "font-14a": "_font-14a_1ipyg_51",
-  "font-14b": "_font-14b_1ipyg_59",
-  "font-14c": "_font-14c_1ipyg_67",
-  "font-14d": "_font-14d_1ipyg_75",
-  "font-15": "_font-15_1ipyg_83",
-  "font-34": "_font-34_1ipyg_89"
+  "font-18": "_font-18_18yak_14",
+  "font-20": "_font-20_18yak_18",
+  "font-14": "_font-14_18yak_22",
+  "font-14a": "_font-14a_18yak_26",
+  "font-14b": "_font-14b_18yak_30",
+  "font-14c": "_font-14c_18yak_34",
+  "font-14d": "_font-14d_18yak_38",
+  "font-15": "_font-15_18yak_42",
+  "font-34": "_font-34_18yak_45"
 };
 const variants = {
   h1: "h1",
@@ -5044,10 +5048,10 @@ const Text = ({
     children: children2
   });
 };
-const search$1 = "_search_qirxg_1";
+const search$1 = "_search_1klck_1";
 var styles$B = {
-  "searchTab-container": "_searchTab-container_qirxg_1",
-  "searchTab-input": "_searchTab-input_qirxg_9",
+  "searchTab-container": "_searchTab-container_1klck_1",
+  "searchTab-input": "_searchTab-input_1klck_5",
   search: search$1
 };
 const iconoirSearch = (props) => /* @__PURE__ */ jsx("svg", {
@@ -6945,6 +6949,63 @@ const useResizeExternalMetricMutation = (options2) => useMutation(
   (variables) => fetcher(ResizeExternalMetricDocument, variables)(),
   options2
 );
+const UpdateAdminMetricDocument = `
+    mutation UpdateAdminMetric($externalMetricId: uuid!, $object: externalMetrics_insert_input!, $clientId: String!) {
+  insert_clientDeletedMetrics_one(
+    object: {externalMetricId: $externalMetricId, clientId: $clientId}
+  ) {
+    clientId
+    externalMetricId
+  }
+  insert_externalMetrics_one(object: $object) {
+    chartOptions
+    clientId
+    companyId
+    companyIntegrationId
+    createdAt
+    createdBy
+    description
+    id
+    inputFields
+    integrationName
+    isCreatedByClient
+    isLive
+    metricId
+    metricQuery
+    name
+    outputColumns
+    query
+    resizeAttributes
+    timeGrain
+    updatedAt
+    selectedGroupBy
+    isEnableGroupBy
+    groupBy
+    rlsConditions
+    companyIntegration {
+      name
+    }
+    clickActions
+  }
+}
+    `;
+const useUpdateAdminMetricMutation = (options2) => useMutation(
+  ["UpdateAdminMetric"],
+  (variables) => fetcher(UpdateAdminMetricDocument, variables)(),
+  options2
+);
+const UpdateExternalMetricDocument = `
+    mutation UpdateExternalMetric($externalMetricId: uuid!, $set: externalMetrics_set_input!) {
+  update_externalMetrics_by_pk(pk_columns: {id: $externalMetricId}, _set: $set) {
+    id
+  }
+}
+    `;
+const useUpdateExternalMetricMutation = (options2) => useMutation(
+  ["UpdateExternalMetric"],
+  (variables) => fetcher(UpdateExternalMetricDocument, variables)(),
+  options2
+);
 const ExternalMetricForm = ({
   onSubmit,
   defaultValues,
@@ -6958,7 +7019,8 @@ const ExternalMetricForm = ({
   var _a2, _b2, _c2;
   const {
     register: register2,
-    handleSubmit
+    handleSubmit,
+    setValue
   } = useForm();
   const [isLiveMode, setLiveMode] = useState((_a2 = defaultValues == null ? void 0 : defaultValues.isLive) != null ? _a2 : false);
   const submitMetric = handleSubmit((data) => {
@@ -6980,6 +7042,13 @@ const ExternalMetricForm = ({
     value: dash.id,
     label: dash.name
   }))) != null ? _c2 : [];
+  useEffect(() => {
+    if (!defaultValues)
+      return;
+    setValue("name", defaultValues.name);
+    setValue("description", defaultValues.description);
+    setValue("metricId", defaultValues.metricId);
+  }, [defaultValues]);
   return /* @__PURE__ */ jsxs("form", {
     className: styles$x.form,
     onSubmit: submitMetric,
@@ -7009,8 +7078,7 @@ const ExternalMetricForm = ({
         placeholder: "Unique Id to identify metric",
         label: "Metric ID",
         register: register2("metricId", {
-          required: true,
-          disabled: !!(defaultValues == null ? void 0 : defaultValues.metricId)
+          required: true
         }),
         defaultValue: defaultValues == null ? void 0 : defaultValues.metricId
       }), /* @__PURE__ */ jsx(TextAreaField, {
@@ -7054,22 +7122,22 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1b6ua_1";
-const wrapper$3 = "_wrapper_1b6ua_9";
-const label$3 = "_label_1b6ua_17";
-const floatingLabel = "_floatingLabel_1b6ua_25";
-const clientText = "_clientText_1b6ua_33";
-const normalText = "_normalText_1b6ua_41";
-const dropdown$1 = "_dropdown_1b6ua_49";
-const options = "_options_1b6ua_57";
-const checkedOption = "_checkedOption_1b6ua_65";
-const option = "_option_1b6ua_57";
-const icon$1 = "_icon_1b6ua_81";
-const text$2 = "_text_1b6ua_89";
-const floatingText = "_floatingText_1b6ua_97";
-const search = "_search_1b6ua_105";
-const loadMore = "_loadMore_1b6ua_113";
-const loadMoreIcon = "_loadMoreIcon_1b6ua_121";
+const container$d = "_container_q0qrl_1";
+const wrapper$3 = "_wrapper_q0qrl_5";
+const label$3 = "_label_q0qrl_9";
+const floatingLabel = "_floatingLabel_q0qrl_13";
+const clientText = "_clientText_q0qrl_17";
+const normalText = "_normalText_q0qrl_21";
+const dropdown$1 = "_dropdown_q0qrl_25";
+const options = "_options_q0qrl_29";
+const checkedOption = "_checkedOption_q0qrl_33";
+const option = "_option_q0qrl_29";
+const icon$1 = "_icon_q0qrl_41";
+const text$2 = "_text_q0qrl_45";
+const floatingText = "_floatingText_q0qrl_49";
+const search = "_search_q0qrl_53";
+const loadMore = "_loadMore_q0qrl_57";
+const loadMoreIcon = "_loadMoreIcon_q0qrl_61";
 var styles$s = {
   container: container$d,
   wrapper: wrapper$3,
@@ -7097,7 +7165,7 @@ const useEmbeddedDashboard = (token) => {
   const companyId = tokenParams == null ? void 0 : tokenParams.companyId;
   const clientId = tokenParams == null ? void 0 : tokenParams.clientId;
   const workspace = params == null ? void 0 : params.workspace;
-  const mode = (_b2 = params == null ? void 0 : params.dashboard) == null ? void 0 : _b2.isLive;
+  const isLiveMode = (_b2 = params == null ? void 0 : params.dashboard) == null ? void 0 : _b2.isLive;
   const rlsSettings = params == null ? void 0 : params.rlsSettings;
   const companyTenancyType = params == null ? void 0 : params.companyTenancyType;
   const isTestKey = params == null ? void 0 : params.isTestKey;
@@ -7124,7 +7192,7 @@ const useEmbeddedDashboard = (token) => {
     data: {
       clientId,
       companyId,
-      mode,
+      isLiveMode,
       externalDashboardMetrics,
       externalDashboard: idData == null ? void 0 : idData.externalDashboards[0],
       externalDashboardId,
@@ -7231,40 +7299,31 @@ const getChartOption = ({
   };
 };
 const useExternalMetric = ({
+  onSuccess,
   companyIntegrationId,
   selectedColumns,
   query,
   metricQuery,
   integrationName,
   outputColumns,
-  xAxis,
-  yAxisList,
-  chartType: chartType2,
-  step,
-  measure,
-  sankeyValues,
-  singleValue: singleValue2,
-  margins,
-  legendSettings,
-  labelSettings,
-  axisSettings,
-  customSettings,
-  tableSettings,
-  backGroundColor,
+  chartSettings: chartSettings2,
   clientId,
   companyId,
-  mode,
+  isLiveMode,
   timeGrain,
   dashboardIds,
   isEnableGroupBy,
   groupBy,
-  selectedGroupBy
+  selectedGroupBy,
+  userProvidedDashboardId,
+  metric
 }) => {
   const [error2, setError] = useState("");
-  const createExternalMetricMutation = useCreateExternalMetricMutation();
+  const queryClient2 = useQueryClient();
+  const { mutate: createExternalMetricMutation, isLoading: isCreatingMetric } = useCreateExternalMetricMutation();
   const createExternalMetric = (data) => {
     setError("");
-    createExternalMetricMutation.mutate(
+    createExternalMetricMutation(
       {
         companyId,
         companyIntegrationId,
@@ -7276,24 +7335,9 @@ const useExternalMetric = ({
         metricQuery,
         integrationName,
         outputColumns,
-        createdBy: "external user",
-        isLive: mode || data.isLive,
-        chartOptions: getChartOption({
-          xAxis,
-          yAxisList,
-          chartType: chartType2,
-          step,
-          measure,
-          sankeyValues,
-          singleValue: singleValue2,
-          margins,
-          legendSettings,
-          labelSettings,
-          axisSettings,
-          customSettings,
-          backGroundColor,
-          tableSettings
-        }),
+        createdBy: clientId || "external user",
+        isLive: isLiveMode || data.isLive,
+        chartOptions: getChartOption(chartSettings2),
         clientId: clientId || null,
         isCreatedByClient: !!clientId,
         timeGrain: timeGrain || null,
@@ -7305,10 +7349,28 @@ const useExternalMetric = ({
         selectedGroupBy
       },
       {
-        onSuccess: (res) => {
-          var _a2;
+        onSuccess: (res, variables) => {
+          var _a2, _b2;
           if ((_a2 = res.insert_externalMetrics_one) == null ? void 0 : _a2.id) {
-            window.location.reload();
+            const metricId = (_b2 = res.insert_externalMetrics_one) == null ? void 0 : _b2.id;
+            queryClient2.setQueryData(
+              [
+                "EmbeddedDashboardMetrics",
+                { externalDashboardId: userProvidedDashboardId, clientId }
+              ],
+              (prev) => {
+                const externalDashboardMetrics = prev == null ? void 0 : prev.externalDashboardMetrics;
+                externalDashboardMetrics == null ? void 0 : externalDashboardMetrics.push({
+                  externalDashboardId: dashboardIds[0],
+                  externalMetricId: metricId,
+                  externalMetric: {
+                    ...variables,
+                    id: metricId
+                  }
+                });
+                return { ...prev, externalDashboardMetrics };
+              }
+            );
           }
         },
         onError: () => {
@@ -7319,7 +7381,123 @@ const useExternalMetric = ({
       }
     );
   };
-  return { createExternalMetric, error: error2 };
+  const { mutateAsync: updateAdminMetric, isLoading: isUpdatingAdminMetric } = useUpdateAdminMetricMutation({
+    onSuccess: (res) => {
+      var _a2;
+      if (!res.insert_clientDeletedMetrics_one || !res.insert_externalMetrics_one)
+        return;
+      const metricId = (_a2 = res.insert_externalMetrics_one) == null ? void 0 : _a2.id;
+      queryClient2.setQueryData(
+        [
+          "EmbeddedDashboardMetrics",
+          { externalDashboardId: userProvidedDashboardId, clientId }
+        ],
+        (prev) => {
+          var _a3;
+          const externalDashboardMetrics = (_a3 = prev == null ? void 0 : prev.externalDashboardMetrics) == null ? void 0 : _a3.filter(
+            (exdm) => exdm.externalMetricId !== (metric == null ? void 0 : metric.id)
+          );
+          externalDashboardMetrics == null ? void 0 : externalDashboardMetrics.push({
+            externalDashboardId: dashboardIds[0],
+            externalMetricId: metricId,
+            externalMetric: res.insert_externalMetrics_one
+          });
+          return { ...prev, externalDashboardMetrics };
+        }
+      );
+      setError("");
+      onSuccess();
+    },
+    onError: () => {
+      setError("Something went wrong! Please try again later.");
+    }
+  });
+  const { mutateAsync: updateMetric, isLoading: isUpdatingMetric } = useUpdateExternalMetricMutation({
+    onSuccess: (res, variables) => {
+      var _a2;
+      if (!((_a2 = res.update_externalMetrics_by_pk) == null ? void 0 : _a2.id))
+        return;
+      queryClient2.setQueryData(
+        [
+          "EmbeddedDashboardMetrics",
+          { externalDashboardId: userProvidedDashboardId, clientId }
+        ],
+        (prev) => {
+          const externalDashboardMetrics = prev == null ? void 0 : prev.externalDashboardMetrics;
+          const index2 = externalDashboardMetrics == null ? void 0 : externalDashboardMetrics.findIndex(
+            (exdm) => exdm.externalMetricId === (metric == null ? void 0 : metric.id)
+          );
+          if (index2 === -1)
+            return prev;
+          externalDashboardMetrics[index2].externalMetric = {
+            ...externalDashboardMetrics[index2].externalMetric,
+            ...variables.set
+          };
+          return { ...prev, externalDashboardMetrics };
+        }
+      );
+      setError("");
+      onSuccess();
+    },
+    onError: () => {
+      setError("Something went wrong! Please try again later.");
+    }
+  });
+  const updateExternalMetric = useCallback(
+    (data) => {
+      setError("");
+      if (!(metric == null ? void 0 : metric.isCreatedByClient))
+        updateAdminMetric({
+          externalMetricId: metric == null ? void 0 : metric.id,
+          clientId,
+          object: {
+            companyId,
+            companyIntegrationId: companyIntegrationId || (metric == null ? void 0 : metric.companyIntegrationId),
+            description: data.description,
+            inputFields: selectedColumns,
+            metricId: data.metricId === (metric == null ? void 0 : metric.metricId) ? `update_${data.metricId}_by_${clientId}_${Date.now()}` : data.metricId,
+            name: data.name,
+            query,
+            metricQuery,
+            integrationName,
+            outputColumns,
+            createdBy: clientId || "external user",
+            clientId,
+            isCreatedByClient: !!clientId,
+            resizeAttributes: metric == null ? void 0 : metric.resizeAttributes,
+            externalDashboardMetrics: {
+              data: dashboardIds.map((externalDashboardId) => ({
+                externalDashboardId
+              }))
+            },
+            isLive: isLiveMode || data.isLive,
+            chartOptions: getChartOption(chartSettings2)
+          }
+        });
+      else {
+        const set2 = {
+          chartOptions: getChartOption(chartSettings2)
+        };
+        if (data.description)
+          set2.description = data.description;
+        if (data.metricId)
+          set2.metricId = data.metricId;
+        if (data.name)
+          set2.name = data.name;
+        updateMetric({
+          externalMetricId: metric == null ? void 0 : metric.id,
+          set: set2
+        });
+      }
+    },
+    [chartSettings2, metric == null ? void 0 : metric.id, metric == null ? void 0 : metric.isCreatedByClient]
+  );
+  return {
+    createExternalMetric,
+    updateExternalMetric,
+    error: error2,
+    isLoading: isCreatingMetric || isUpdatingAdminMetric || isUpdatingMetric
+  };
 };
 const useGenerateDatasetMetrics = () => {
   const {
@@ -86096,7 +86274,7 @@ const menuContainer$1 = "_menuContainer_1ecv1_13";
 const buttonText = "_buttonText_1ecv1_19";
 const buttonIcon = "_buttonIcon_1ecv1_25";
 const filterName = "_filterName_1ecv1_31";
-const filterDropdown$1 = "_filterDropdown_1ecv1_37";
+const filterDropdown$2 = "_filterDropdown_1ecv1_37";
 var styles$n = {
   button: button$5,
   menu: menu$3,
@@ -86104,7 +86282,7 @@ var styles$n = {
   buttonText,
   buttonIcon,
   filterName,
-  filterDropdown: filterDropdown$1
+  filterDropdown: filterDropdown$2
 };
 const container$a = "_container_1qflp_1";
 const popover$1 = "_popover_1qflp_9";
@@ -86210,8 +86388,8 @@ const FilterField = ({
   tableName
 }) => {
   const [operator, setOperator] = useState({
-    value: "",
-    label: ""
+    value: "=",
+    label: "Equal to (=)"
   });
   const [option2, setOption] = useState({
     value: "",
@@ -86316,20 +86494,21 @@ const FilterField = ({
     })
   });
 };
-const container$9 = "_container_9vrf0_1";
-const form$1 = "_form_9vrf0_7";
-const filterHeader = "_filterHeader_9vrf0_13";
-const titleContent = "_titleContent_9vrf0_19";
-const title = "_title_9vrf0_19";
-const buttons = "_buttons_9vrf0_31";
-const apply = "_apply_9vrf0_37";
-const applyIcon = "_applyIcon_9vrf0_43";
-const reset = "_reset_9vrf0_49";
-const filterFields = "_filterFields_9vrf0_55";
-const filters = "_filters_9vrf0_61";
-const filterItem = "_filterItem_9vrf0_67";
-const filterItemOperator = "_filterItemOperator_9vrf0_73";
-const remove = "_remove_9vrf0_79";
+const container$9 = "_container_1cs1m_1";
+const form$1 = "_form_1cs1m_7";
+const filterHeader = "_filterHeader_1cs1m_13";
+const titleContent = "_titleContent_1cs1m_19";
+const title = "_title_1cs1m_19";
+const buttons = "_buttons_1cs1m_31";
+const apply = "_apply_1cs1m_37";
+const applyIcon = "_applyIcon_1cs1m_43";
+const reset = "_reset_1cs1m_49";
+const filterFields = "_filterFields_1cs1m_55";
+const filterDropdown$1 = "_filterDropdown_1cs1m_61";
+const filters = "_filters_1cs1m_67";
+const filterItem = "_filterItem_1cs1m_73";
+const filterItemOperator = "_filterItemOperator_1cs1m_79";
+const remove = "_remove_1cs1m_85";
 var styles$l = {
   container: container$9,
   form: form$1,
@@ -86341,6 +86520,7 @@ var styles$l = {
   applyIcon,
   reset,
   filterFields,
+  filterDropdown: filterDropdown$1,
   filters,
   filterItem,
   filterItemOperator,
@@ -86401,6 +86581,14 @@ const GlobalFilters = ({
       filters: filterColumns
     });
   };
+  const getSelectedOption = useCallback((col) => {
+    var _a2;
+    const colValue = ((_a2 = appliedfilters.find((filter2) => filter2.column === col)) == null ? void 0 : _a2.value) || "";
+    return {
+      label: colValue,
+      value: colValue
+    };
+  }, [appliedfilters]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$l.container,
@@ -86440,20 +86628,33 @@ const GlobalFilters = ({
           })]
         }), /* @__PURE__ */ jsx("div", {
           className: styles$l.filterFields,
-          children: filters2[0].columns.map((col) => /* @__PURE__ */ jsx(FilterField, {
-            tableName: filters2[0].tableName,
-            filter: col,
-            isResetted: !appliedfilters.find((a2) => a2.column === col.name),
-            onChange: (field2) => setAppliedFilters((prev) => {
-              const index2 = prev.findIndex((f2) => f2.column === field2.column);
-              if (index2 === -1)
-                return [...prev, field2];
-              const updated = [...prev];
-              updated[index2] = field2;
-              return updated;
-            }),
-            companyId
-          }, col.name))
+          children: filters2[0].columns.map((col) => /* @__PURE__ */ jsx("div", {
+            className: styles$l.filterDropdown,
+            children: /* @__PURE__ */ jsx(FilterDropDown, {
+              filter: {
+                tableName: filters2[0].tableName,
+                columnName: col.name
+              },
+              companyId,
+              selectedOption: getSelectedOption(col.name),
+              autoSelected: false,
+              onChange: (option2) => setAppliedFilters((prev) => {
+                const field2 = {
+                  column: col.name,
+                  operator: "=",
+                  value: option2.value
+                };
+                const index2 = prev.findIndex((f2) => f2.column === col.name);
+                if (index2 === -1)
+                  return [...prev, field2];
+                const updated = [...prev];
+                updated[index2] = field2;
+                return updated;
+              }),
+              labelDesign: "client",
+              isSearchEnabled: true
+            })
+          }))
         })]
       }), appliedfilters.length ? /* @__PURE__ */ jsx("ul", {
         className: styles$l.filters,
@@ -86515,12 +86716,12 @@ const InfoTooltip = ({
   });
 };
 var styles$j = {
-  "header-container": "_header-container_1pbz4_1",
-  "btn-container": "_btn-container_1pbz4_9",
-  "back-btn": "_back-btn_1pbz4_17",
-  "sql-btn": "_sql-btn_1pbz4_25",
-  "save-btn": "_save-btn_1pbz4_33",
-  "save-btn-icon": "_save-btn-icon_1pbz4_41"
+  "header-container": "_header-container_t2r6v_1",
+  "btn-container": "_btn-container_t2r6v_5",
+  "back-btn": "_back-btn_t2r6v_9",
+  "sql-btn": "_sql-btn_t2r6v_13",
+  "save-btn": "_save-btn_t2r6v_17",
+  "save-btn-icon": "_save-btn-icon_t2r6v_21"
 };
 const Header = ({
   setShowMetricCreateModal,
@@ -86572,25 +86773,21 @@ const Header = ({
     })]
   });
 };
-const floatingCreateButton = "_floatingCreateButton_jfq7q_25";
-const floatingCreateButtonIcon = "_floatingCreateButtonIcon_jfq7q_33";
 var styles$i = {
-  "create-btn": "_create-btn_jfq7q_1",
-  "modal-container": "_modal-container_jfq7q_9",
-  "query-modal": "_query-modal_jfq7q_17",
-  floatingCreateButton,
-  floatingCreateButtonIcon
+  "create-btn": "_create-btn_ihjk8_1",
+  "modal-container": "_modal-container_ihjk8_5",
+  "query-modal": "_query-modal_ihjk8_9"
 };
-const container$7 = "_container_u2z1d_1";
-const header$3 = "_header_u2z1d_9";
-const wrapper$2 = "_wrapper_u2z1d_17";
-const column = "_column_u2z1d_33";
-const columnText$1 = "_columnText_u2z1d_41";
+const container$7 = "_container_1q2ss_1";
+const header$3 = "_header_1q2ss_5";
+const wrapper$2 = "_wrapper_1q2ss_9";
+const column = "_column_1q2ss_17";
+const columnText$1 = "_columnText_1q2ss_21";
 var styles$h = {
   container: container$7,
   header: header$3,
   wrapper: wrapper$2,
-  "col-container": "_col-container_u2z1d_25",
+  "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
 };
@@ -87966,10 +88163,10 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_wjdaz_1";
-const wrapper$1 = "_wrapper_wjdaz_9";
-const text = "_text_wjdaz_17";
-const table$2 = "_table_wjdaz_23";
+const container$5 = "_container_yjeiv_1";
+const wrapper$1 = "_wrapper_yjeiv_5";
+const text = "_text_yjeiv_9";
+const table$2 = "_table_yjeiv_12";
 var styles$c = {
   container: container$5,
   wrapper: wrapper$1,
@@ -88002,16 +88199,16 @@ const InputTables = ({
     })
   });
 };
-const container$4 = "_container_127xg_1";
-const header$1 = "_header_127xg_9";
-const tabButton$1 = "_tabButton_127xg_31";
-const selectedTab = "_selectedTab_127xg_37";
-const table$1 = "_table_127xg_43";
+const container$4 = "_container_38zl3_1";
+const header$1 = "_header_38zl3_5";
+const tabButton$1 = "_tabButton_38zl3_16";
+const selectedTab = "_selectedTab_38zl3_19";
+const table$1 = "_table_38zl3_22";
 var styles$b = {
   container: container$4,
   header: header$1,
-  "text-container": "_text-container_127xg_17",
-  "btn-container": "_btn-container_127xg_25",
+  "text-container": "_text-container_38zl3_9",
+  "btn-container": "_btn-container_38zl3_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
@@ -88020,7 +88217,8 @@ const TableTab = ({
   outpuTableData,
   outputError,
   isOutputLoading,
-  previewTableDataList
+  previewTableDataList,
+  isUpdateMetric
 }) => {
   const [selectedTab2, setSelectedTab] = useState(OUTPUT_TABLE);
   const buttonColor = {
@@ -88037,6 +88235,11 @@ const TableTab = ({
     if (selectedTab2 !== INPUT_TABLE)
       setSelectedTab(INPUT_TABLE);
   }, [previewTableDataList]);
+  useEffect(() => {
+    if (!isUpdateMetric)
+      return;
+    setSelectedTab(OUTPUT_TABLE);
+  }, [isUpdateMetric]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$b.container,
     children: [/* @__PURE__ */ jsxs("div", {
@@ -88086,14 +88289,20 @@ const TableTab = ({
     })]
   });
 };
-const wrapper = "_wrapper_49kql_17";
-const searchCommand = "_searchCommand_49kql_23";
-const tabButton = "_tabButton_49kql_29";
-const tabActive = "_tabActive_49kql_35";
+const mainContainerUpdate = "_mainContainerUpdate_19iy1_4";
+const wrapper = "_wrapper_19iy1_12";
+const updateWrapper = "_updateWrapper_19iy1_15";
+const updateWrapperContent = "_updateWrapperContent_19iy1_18";
+const searchCommand = "_searchCommand_19iy1_21";
+const tabButton = "_tabButton_19iy1_24";
+const tabActive = "_tabActive_19iy1_27";
 var styles$a = {
-  "main-container": "_main-container_49kql_1",
-  "outputTab-header": "_outputTab-header_49kql_9",
+  "main-container": "_main-container_19iy1_1",
+  mainContainerUpdate,
+  "outputTab-header": "_outputTab-header_19iy1_8",
   wrapper,
+  updateWrapper,
+  updateWrapperContent,
   searchCommand,
   tabButton,
   tabActive
@@ -88138,7 +88347,8 @@ const MetricOutput = ({
   backGroundColor,
   setBackGroundColor,
   moreTabs,
-  chartColors
+  chartColors,
+  isUpdateMetric = false
 }) => {
   var _a2;
   const [selectedTab2, setSelectedTab] = useState(TABLE_TAB);
@@ -88147,8 +88357,8 @@ const MetricOutput = ({
     tableName = item.name;
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: styles$a["main-container"],
-    children: [/* @__PURE__ */ jsxs("div", {
+    className: `${styles$a["main-container"]} ${isUpdateMetric ? styles$a.mainContainerUpdate : ""}`,
+    children: [!isUpdateMetric && /* @__PURE__ */ jsxs("div", {
       className: styles$a["outputTab-header"],
       children: [/* @__PURE__ */ jsxs(Button, {
         type: "button",
@@ -88174,79 +88384,86 @@ const MetricOutput = ({
         children: tabObj.tab
       }, tabObj.name))]
     }), /* @__PURE__ */ jsxs("div", {
-      className: styles$a.wrapper,
-      children: [selectedTab2 === TABLE_TAB && /* @__PURE__ */ jsx(TableTab, {
-        outpuTableData: data,
-        isOutputLoading: isLoading,
-        outputError: error2,
-        previewTableDataList
-      }), selectedTab2 === CHART_TAB && /* @__PURE__ */ jsx(ChartTab, {
-        labels: labels2,
-        funnelData,
-        chartType: chartType2,
-        datasets,
-        data,
-        setChartType,
-        setXAxis,
-        setYAxisList,
-        yAxisList,
-        xAxis,
-        setMeasure,
-        setStep,
-        step,
-        measure,
-        setSankeyValues,
-        sankeyData,
-        singleValue: singleValue2,
-        setSingleValue,
-        singleValueData: singleValueData2,
-        setMargins,
-        margins,
-        legendSettings,
-        setLegendSettings,
-        labelSettings,
-        setLabelSettings,
-        axisSettings,
-        setAxisSettings,
-        customSettings,
-        setCustomSettings,
-        updateGroup,
-        isEnableGroupBy,
-        isLoading,
-        backGroundColor,
-        setBackGroundColor,
-        tableSettings,
-        setTableSettings,
-        tableName,
-        chartColors
+      className: `${styles$a.wrapper} ${isUpdateMetric ? styles$a.updateWrapper : ""}`,
+      children: [(selectedTab2 === TABLE_TAB || isUpdateMetric) && /* @__PURE__ */ jsx("div", {
+        className: isUpdateMetric ? styles$a.updateWrapperContent : "",
+        children: /* @__PURE__ */ jsx(TableTab, {
+          outpuTableData: data,
+          isOutputLoading: isLoading,
+          outputError: error2,
+          previewTableDataList,
+          isUpdateMetric
+        })
+      }), (selectedTab2 === CHART_TAB || isUpdateMetric) && /* @__PURE__ */ jsx("div", {
+        className: isUpdateMetric ? styles$a.updateWrapperContent : "",
+        children: /* @__PURE__ */ jsx(ChartTab, {
+          labels: labels2,
+          funnelData,
+          chartType: chartType2,
+          datasets,
+          data,
+          setChartType,
+          setXAxis,
+          setYAxisList,
+          yAxisList,
+          xAxis,
+          setMeasure,
+          setStep,
+          step,
+          measure,
+          setSankeyValues,
+          sankeyData,
+          singleValue: singleValue2,
+          setSingleValue,
+          singleValueData: singleValueData2,
+          setMargins,
+          margins,
+          legendSettings,
+          setLegendSettings,
+          labelSettings,
+          setLabelSettings,
+          axisSettings,
+          setAxisSettings,
+          customSettings,
+          setCustomSettings,
+          updateGroup,
+          isEnableGroupBy,
+          isLoading,
+          backGroundColor,
+          setBackGroundColor,
+          tableSettings,
+          setTableSettings,
+          tableName,
+          chartColors
+        })
       }), (_a2 = moreTabs == null ? void 0 : moreTabs.find((tabObj) => tabObj.name === selectedTab2)) == null ? void 0 : _a2.tabContent]
     })]
   });
 };
-const fieldValueIcon = "_fieldValueIcon_fl6kw_49";
-const fieldAddBtnIcon = "_fieldAddBtnIcon_fl6kw_65";
-const group = "_group_fl6kw_1";
-const tooltipWrapper = "_tooltipWrapper_fl6kw_89";
-const tooltip = "_tooltip_fl6kw_89";
-const dropdown = "_dropdown_fl6kw_113";
-const filterDropdown = "_filterDropdown_fl6kw_121";
-const filterValues = "_filterValues_fl6kw_129";
-const columnText = "_columnText_fl6kw_137";
-const disabled = "_disabled_fl6kw_145";
-const checkIcon = "_checkIcon_fl6kw_153";
-const generateButton = "_generateButton_fl6kw_161";
+const fieldValueIcon = "_fieldValueIcon_z8ldj_25";
+const fieldAddBtnIcon = "_fieldAddBtnIcon_z8ldj_33";
+const group = "_group_z8ldj_1";
+const tooltipWrapper = "_tooltipWrapper_z8ldj_45";
+const tooltip = "_tooltip_z8ldj_45";
+const dropdown = "_dropdown_z8ldj_57";
+const filterDropdown = "_filterDropdown_z8ldj_61";
+const filterValues = "_filterValues_z8ldj_65";
+const columnText = "_columnText_z8ldj_69";
+const disabled = "_disabled_z8ldj_73";
+const checkIcon = "_checkIcon_z8ldj_77";
+const generateButton = "_generateButton_z8ldj_81";
 var styles$9 = {
-  "form-container": "_form-container_fl6kw_1",
-  "field-container": "_field-container_fl6kw_9",
-  "field-label": "_field-label_fl6kw_17",
-  "field-wrapper": "_field-wrapper_fl6kw_25",
-  "field-inner-container": "_field-inner-container_fl6kw_33",
-  "field-value": "_field-value_fl6kw_41",
+  "form-container": "_form-container_z8ldj_1",
+  "field-container": "_field-container_z8ldj_5",
+  "field-label": "_field-label_z8ldj_9",
+  "field-wrapper": "_field-wrapper_z8ldj_13",
+  "field-inner-container": "_field-inner-container_z8ldj_17",
+  "field-value": "_field-value_z8ldj_21",
   fieldValueIcon,
-  "field-add-btn": "_field-add-btn_fl6kw_57",
+  "field-add-btn": "_field-add-btn_z8ldj_29",
   fieldAddBtnIcon,
-  "field-value-container": "_field-value-container_fl6kw_73",
-  "field-prompt": "_field-prompt_fl6kw_81",
+  "field-value-container": "_field-value-container_z8ldj_37",
+  "field-prompt": "_field-prompt_z8ldj_41",
   group,
   tooltipWrapper,
   tooltip,
@@ -89398,10 +89615,10 @@ const MetricForm = ({
     })]
   });
 };
-const container$2 = "_container_1v000_1";
-const header = "_header_1v000_9";
-const enableGroupBy = "_enableGroupBy_1v000_15";
-const enableGroupButton = "_enableGroupButton_1v000_21";
+const container$2 = "_container_rofqe_1";
+const header = "_header_rofqe_5";
+const enableGroupBy = "_enableGroupBy_rofqe_8";
+const enableGroupButton = "_enableGroupButton_rofqe_11";
 var styles$7 = {
   container: container$2,
   header,
@@ -89450,23 +89667,17 @@ const ConstructMetric = ({
     })]
   });
 };
-const mdiPlus = (props) => /* @__PURE__ */ jsx("svg", {
-  viewBox: "0 0 24 24",
-  width: "1.2em",
-  height: "1.2em",
-  ...props,
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"
-  })
-});
 const EmbeddedMetricCreation = ({
   clientId,
   companyId,
-  mode,
+  isLiveMode,
   externalDashboardId,
-  variant = "static",
+  userProvidedDashboardId,
   chartColors,
+  isShowMetricCreateModal,
+  setShowMetricCreateModal,
+  metric,
+  metricData: metricData2,
   workspaceId
 }) => {
   var _a2;
@@ -89478,7 +89689,6 @@ const EmbeddedMetricCreation = ({
   const [isEnableGroupBy, setEnableGroupBy] = useState(false);
   const [selectedGroupBy, setSelectedGroupBy] = useState([]);
   const [groupBy, setGroupBy] = useState();
-  const [isShowMetricCreateModal, setShowMetricCreateModal] = useState(false);
   const [isShowSqlModal, setShowSqlModal] = useState(false);
   const [isShowSaveMetricModal, setShowSaveMetricModal] = useState(false);
   const [selectTable, setSelectTable] = useState({
@@ -89636,36 +89846,45 @@ const EmbeddedMetricCreation = ({
   }, [data, isEnableGroupBy]);
   const {
     createExternalMetric,
-    error: saveError
+    error: saveError,
+    updateExternalMetric
   } = useExternalMetric({
     query,
-    xAxis,
-    backGroundColor,
-    customSettings,
-    tableSettings,
-    chartType: chartType2,
-    yAxisList,
-    step,
-    measure,
-    sankeyValues,
-    singleValue: singleValue2,
+    chartSettings: {
+      xAxis,
+      backGroundColor,
+      customSettings,
+      tableSettings,
+      chartType: chartType2,
+      yAxisList,
+      step,
+      measure,
+      sankeyValues,
+      singleValue: singleValue2,
+      margins,
+      legendSettings,
+      labelSettings,
+      axisSettings
+    },
     companyIntegrationId: companyIntegration == null ? void 0 : companyIntegration.id,
     integrationName: companyIntegration == null ? void 0 : companyIntegration.name,
-    margins,
-    legendSettings,
-    labelSettings,
-    axisSettings,
     metricQuery,
     outputColumns: void 0,
     selectedColumns: void 0,
     clientId,
     isEmbedded: true,
     companyId,
-    mode,
+    isLiveMode,
     dashboardIds: [externalDashboardId],
+    userProvidedDashboardId,
     isEnableGroupBy,
     groupBy,
-    selectedGroupBy
+    selectedGroupBy,
+    metric,
+    onSuccess: () => {
+      setShowSaveMetricModal(false);
+      setShowMetricCreateModal(false);
+    }
   });
   const {
     mutate: previewTable2
@@ -89729,22 +89948,64 @@ const EmbeddedMetricCreation = ({
       updateGroupData(data, [selectedGroupBy[0]], selectedGroupBy, setGroupedData);
     }
   }, [groupedData, isEnableGroupBy, selectedGroupBy]);
+  useEffect(() => {
+    if (!metric)
+      return;
+    setYAxisList(metric.chartOptions.yAxisList);
+    setXAxis(metric.chartOptions.xAxis);
+    setStep(metric.chartOptions.step);
+    setMeasure(metric.chartOptions.measure);
+    setChartType(metric.chartOptions.chartType);
+    setQuery(metric.query || "");
+    setSankeyValues(metric.chartOptions.sankeyValues);
+    setSingleValue(metric.chartOptions.singleValue);
+    setMargins(metric.chartOptions.margins);
+    setLegendSettings(metric.chartOptions.legendSettings);
+    setLabelSettings(metric.chartOptions.labelSettings);
+    setAxisSettings(metric.chartOptions.axisSettings ? metric.chartOptions.axisSettings : "left");
+    setSelectedGroupBy(metric.selectedGroupBy || []);
+    setGroupBy(metric.groupBy || {});
+    setEnableGroupBy(metric.isEnableGroupBy || false);
+    setBackGroundColor(metric.chartOptions.backGroundColor ? metric.chartOptions.backGroundColor : false);
+    setCustomSettings(metric.chartOptions.customSettings ? metric.chartOptions.customSettings : {
+      hideSplitLines: "none",
+      hideAxisLines: "none",
+      barWidth: 40,
+      barRadius: 0,
+      axisLabels: "none",
+      fontSize: 14,
+      subHeaderShow: false,
+      displayText: "",
+      subHeaderFontSize: 0,
+      dateFormatter: "none",
+      numberFormatter: "original"
+    });
+    setTableSettings(metric.chartOptions.tableSettings ? metric.chartOptions.tableSettings : {
+      contentAlignment: "center",
+      lineGap: "small",
+      hideVerticalDivider: false,
+      enableStripedRows: false,
+      showRowHover: false,
+      showTableTitle: false,
+      showTableDesc: false,
+      enableTableSearch: false,
+      enableFilter: false,
+      enableSorting: false
+    });
+    setCompanyIntegration(metric.companyIntegration);
+  }, [metric]);
+  useEffect(() => {
+    if (!metricData2)
+      return;
+    setData(Array.isArray(metricData2) ? metricData2 : []);
+  }, [metricData2]);
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Button, {
-      type: "button",
-      variant: variant === "floating" ? "custom" : "primary",
-      size: "large",
-      className: variant === "floating" ? styles$i.floatingCreateButton : "",
-      onClick: () => setShowMetricCreateModal(true),
-      children: variant === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
-        className: styles$i.floatingCreateButtonIcon
-      }) : "Create Metric"
-    }), /* @__PURE__ */ jsx(Modal, {
+    children: [/* @__PURE__ */ jsx(Modal, {
       headerTitle: "Create Metric",
       isOpen: isShowMetricCreateModal,
       onClose: () => setShowMetricCreateModal(false),
       customHeader: /* @__PURE__ */ jsx(Header, {
-        Heading: "Create Metric",
+        Heading: metric ? "Update Metric" : "Create Metric",
         setShowMetricCreateModal,
         isDisableSqlBtn: !query,
         isDisableSaveBtn: !(measure == null ? void 0 : measure.length) && !((_a2 = yAxisList == null ? void 0 : yAxisList.filter((item) => item)) == null ? void 0 : _a2.length) && !singleValue2,
@@ -89753,28 +90014,31 @@ const EmbeddedMetricCreation = ({
       }),
       children: /* @__PURE__ */ jsxs("div", {
         className: styles$i["modal-container"],
-        children: [/* @__PURE__ */ jsx(Dataset, {
-          setselectTable: setSelectTable,
-          selectTable,
-          tableList,
-          columnList: (selectedTableData == null ? void 0 : selectedTableData.columns) || []
-        }), /* @__PURE__ */ jsx(ConstructMetric, {
-          dateTimeColumnList,
-          columnList,
-          database: (companyIntegration == null ? void 0 : companyIntegration.name) || "",
-          companyId,
-          tableName: selectTable.value,
-          setData,
-          setError,
-          setQuery,
-          setLoading,
-          isEnableGroupBy,
-          setEnableGroupBy,
-          setSelectedGroupBy,
-          clientId,
-          clientColumn
+        children: [!metric && /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Dataset, {
+            setselectTable: setSelectTable,
+            selectTable,
+            tableList,
+            columnList: (selectedTableData == null ? void 0 : selectedTableData.columns) || []
+          }), /* @__PURE__ */ jsx(ConstructMetric, {
+            dateTimeColumnList,
+            columnList,
+            database: (companyIntegration == null ? void 0 : companyIntegration.name) || "",
+            companyId,
+            tableName: selectTable.value,
+            setData,
+            setError,
+            setQuery,
+            setLoading,
+            isEnableGroupBy,
+            setEnableGroupBy,
+            setSelectedGroupBy,
+            clientId,
+            clientColumn
+          })]
         }), /* @__PURE__ */ jsx(MetricOutput, {
           data: isEnableGroupBy ? groupedData : data,
+          isUpdateMetric: !!metric,
           error: error2,
           isLoading,
           labels: labels2,
@@ -89829,12 +90093,18 @@ const EmbeddedMetricCreation = ({
       headerTitle: "Save To Dashboard",
       children: /* @__PURE__ */ jsx(ExternalMetricForm, {
         onCancel: () => setShowSaveMetricModal(false),
-        onSubmit: createExternalMetric,
+        onSubmit: metric ? updateExternalMetric : createExternalMetric,
         dashboardIds: [externalDashboardId],
         onDashboardChange: () => {
         },
         companyId,
         error: saveError,
+        defaultValues: metric ? {
+          name: metric.name,
+          description: metric.description,
+          isLive: metric.isLive,
+          metricId: metric.isCreatedByClient ? metric.metricId : `update_${metric.metricId}_by_${clientId}_${Date.now()}`
+        } : void 0,
         isEmbedded: true
       })
     })]
@@ -95093,38 +95363,38 @@ var styles$5 = {
   "noMetric-wrapper": "_noMetric-wrapper_1jw09_25",
   "alt-container": "_alt-container_1jw09_33"
 };
-const cardContainer = "_cardContainer_1e5h2_1";
-const listHeader = "_listHeader_1e5h2_9";
-const metricName = "_metricName_1e5h2_17";
-const metricTitle = "_metricTitle_1e5h2_25";
-const metricDescription = "_metricDescription_1e5h2_33";
-const popup = "_popup_1e5h2_41";
-const metricFilter$1 = "_metricFilter_1e5h2_49";
-const popupIcon = "_popupIcon_1e5h2_57";
-const popupMenu = "_popupMenu_1e5h2_65";
-const popupItem = "_popupItem_1e5h2_73";
-const popupItemIcon = "_popupItemIcon_1e5h2_81";
-const csvBtn = "_csvBtn_1e5h2_89";
-const deleteBtn = "_deleteBtn_1e5h2_97";
-const metricData = "_metricData_1e5h2_105";
-const singleValueData = "_singleValueData_1e5h2_113";
-const singleValue = "_singleValue_1e5h2_113";
-const noData = "_noData_1e5h2_129";
-const noDataContent = "_noDataContent_1e5h2_137";
-const noDataText = "_noDataText_1e5h2_145";
-const loading$1 = "_loading_1e5h2_153";
-const features = "_features_1e5h2_161";
-const fullscreen$1 = "_fullscreen_1e5h2_169";
-const deleteModal = "_deleteModal_1e5h2_177";
-const cancelBtn = "_cancelBtn_1e5h2_185";
-const warningIcon = "_warningIcon_1e5h2_193";
-const downloadCsv = "_downloadCsv_1e5h2_201";
-const downloadCsvWrapper = "_downloadCsvWrapper_1e5h2_209";
-const downloadCsvHeader = "_downloadCsvHeader_1e5h2_215";
-const downloadCsvFooter = "_downloadCsvFooter_1e5h2_221";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_1e5h2_229";
-const downloadCsvNote = "_downloadCsvNote_1e5h2_237";
-const downloadCsvNoteText = "_downloadCsvNoteText_1e5h2_245";
+const cardContainer = "_cardContainer_vcex1_1";
+const listHeader = "_listHeader_vcex1_9";
+const metricName = "_metricName_vcex1_17";
+const metricTitle = "_metricTitle_vcex1_25";
+const metricDescription = "_metricDescription_vcex1_33";
+const popup = "_popup_vcex1_41";
+const metricFilter$1 = "_metricFilter_vcex1_49";
+const popupIcon = "_popupIcon_vcex1_57";
+const popupMenu = "_popupMenu_vcex1_65";
+const popupItem = "_popupItem_vcex1_73";
+const popupItemIcon = "_popupItemIcon_vcex1_81";
+const csvBtn = "_csvBtn_vcex1_89";
+const deleteBtn = "_deleteBtn_vcex1_97";
+const metricData = "_metricData_vcex1_105";
+const singleValueData = "_singleValueData_vcex1_113";
+const singleValue = "_singleValue_vcex1_113";
+const noData = "_noData_vcex1_129";
+const noDataContent = "_noDataContent_vcex1_137";
+const noDataText = "_noDataText_vcex1_145";
+const loading$1 = "_loading_vcex1_153";
+const features = "_features_vcex1_161";
+const fullscreen$1 = "_fullscreen_vcex1_169";
+const deleteModal = "_deleteModal_vcex1_177";
+const cancelBtn = "_cancelBtn_vcex1_185";
+const warningIcon = "_warningIcon_vcex1_193";
+const downloadCsv = "_downloadCsv_vcex1_201";
+const downloadCsvWrapper = "_downloadCsvWrapper_vcex1_209";
+const downloadCsvHeader = "_downloadCsvHeader_vcex1_215";
+const downloadCsvFooter = "_downloadCsvFooter_vcex1_221";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_vcex1_229";
+const downloadCsvNote = "_downloadCsvNote_vcex1_237";
+const downloadCsvNoteText = "_downloadCsvNoteText_vcex1_245";
 var styles$4 = {
   cardContainer,
   listHeader,
@@ -95170,6 +95440,16 @@ const materialSymbolsArchiveOutline = (props) => /* @__PURE__ */ jsx("svg", {
     d: "M5 21q-.825 0-1.413-.587Q3 19.825 3 19V6.5q0-.375.125-.675q.125-.3.325-.575l1.4-1.7q.2-.275.5-.413Q5.65 3 6 3h12q.35 0 .65.137q.3.138.5.413l1.4 1.7q.2.275.325.575q.125.3.125.675V19q0 .825-.587 1.413Q19.825 21 19 21Zm.4-15h13.2l-.85-1H6.25ZM5 8v11h14V8Zm7 10l4-4l-1.4-1.4l-1.6 1.6V10h-2v4.2l-1.6-1.6L8 14Zm-7 1h14H5Z"
   })
 });
+const materialSymbolsEditSquareOutline = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M5 23.7q-.825 0-1.413-.588Q3 22.525 3 21.7v-14q0-.825.587-1.413Q4.175 5.7 5 5.7h8.925l-2 2H5v14h14v-6.95l2-2v8.95q0 .825-.587 1.412q-.588.588-1.413.588Zm7-9Zm4.175-8.425l1.425 1.4l-6.6 6.6V15.7h1.4l6.625-6.625l1.425 1.4l-7.2 7.225H9v-4.25Zm4.275 4.2l-4.275-4.2l2.5-2.5q.6-.6 1.438-.6q.837 0 1.412.6l1.4 1.425q.575.575.575 1.4T22.925 8Z"
+  })
+});
 const handleSaveChartImage = (chartRef) => {
   var _a2;
   const chartInstance = (_a2 = chartRef.current) == null ? void 0 : _a2.getEchartsInstance();
@@ -95214,8 +95494,8 @@ const ChartImageDownloadButton = ({
     }), text2]
   });
 };
-const metricFilter = "_metricFilter_1xge8_1";
-const customContainer = "_customContainer_1xge8_7";
+const metricFilter = "_metricFilter_k2gef_1";
+const customContainer = "_customContainer_k2gef_4";
 var styles$3 = {
   metricFilter,
   customContainer
@@ -95284,24 +95564,24 @@ const MetricFilterDropDown = ({
     }) : void 0
   });
 };
-const container$1 = "_container_1hc1e_1";
-const popover = "_popover_1hc1e_9";
-const button = "_button_1hc1e_17";
-const buttonOpen = "_buttonOpen_1hc1e_25";
-const menu = "_menu_1hc1e_33";
-const enter = "_enter_1hc1e_41";
-const enterFrom = "_enterFrom_1hc1e_49";
-const enterTo = "_enterTo_1hc1e_57";
-const leave = "_leave_1hc1e_65";
-const leaveFrom = "_leaveFrom_1hc1e_73";
-const leaveTo = "_leaveTo_1hc1e_81";
-const center = "_center_1hc1e_89";
-const top = "_top_1hc1e_97";
-const bottom = "_bottom_1hc1e_105";
-const left = "_left_1hc1e_113";
-const right = "_right_1hc1e_121";
-const chartOptionBtn = "_chartOptionBtn_1hc1e_225";
-const chartpopup = "_chartpopup_1hc1e_233";
+const container$1 = "_container_1h8m9_1";
+const popover = "_popover_1h8m9_5";
+const button = "_button_1h8m9_9";
+const buttonOpen = "_buttonOpen_1h8m9_13";
+const menu = "_menu_1h8m9_17";
+const enter = "_enter_1h8m9_21";
+const enterFrom = "_enterFrom_1h8m9_25";
+const enterTo = "_enterTo_1h8m9_29";
+const leave = "_leave_1h8m9_33";
+const leaveFrom = "_leaveFrom_1h8m9_37";
+const leaveTo = "_leaveTo_1h8m9_41";
+const center = "_center_1h8m9_45";
+const top = "_top_1h8m9_49";
+const bottom = "_bottom_1h8m9_53";
+const left = "_left_1h8m9_57";
+const right = "_right_1h8m9_61";
+const chartOptionBtn = "_chartOptionBtn_1h8m9_113";
+const chartpopup = "_chartpopup_1h8m9_117";
 var styles$2 = {
   container: container$1,
   popover,
@@ -95319,23 +95599,23 @@ var styles$2 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_1hc1e_129",
-  "right-top-end": "_right-top-end_1hc1e_137",
-  "left-bottom-end": "_left-bottom-end_1hc1e_145",
-  "right-bottom-end": "_right-bottom-end_1hc1e_153",
-  "top-left": "_top-left_1hc1e_161",
-  "top-right": "_top-right_1hc1e_169",
-  "bottom-left": "_bottom-left_1hc1e_177",
-  "bottom-right": "_bottom-right_1hc1e_185",
-  "left-top": "_left-top_1hc1e_129",
-  "left-bottom": "_left-bottom_1hc1e_145",
-  "right-top": "_right-top_1hc1e_137",
-  "right-bottom": "_right-bottom_1hc1e_153",
+  "left-top-end": "_left-top-end_1h8m9_65",
+  "right-top-end": "_right-top-end_1h8m9_69",
+  "left-bottom-end": "_left-bottom-end_1h8m9_73",
+  "right-bottom-end": "_right-bottom-end_1h8m9_77",
+  "top-left": "_top-left_1h8m9_81",
+  "top-right": "_top-right_1h8m9_85",
+  "bottom-left": "_bottom-left_1h8m9_89",
+  "bottom-right": "_bottom-right_1h8m9_93",
+  "left-top": "_left-top_1h8m9_65",
+  "left-bottom": "_left-bottom_1h8m9_73",
+  "right-top": "_right-top_1h8m9_69",
+  "right-bottom": "_right-bottom_1h8m9_77",
   chartOptionBtn,
   chartpopup
 };
-const fullscreen = "_fullscreen_19jec_1";
-const loading = "_loading_19jec_9";
+const fullscreen = "_fullscreen_1gpy3_1";
+const loading = "_loading_1gpy3_5";
 var styles$1 = {
   fullscreen,
   loading
@@ -95680,7 +95960,8 @@ const MetricCard = ({
   param,
   companyTenancyType,
   renderHeaderName,
-  onArchive
+  onArchive,
+  onEdit
 }) => {
   var _a2;
   const chartRef = useRef(null);
@@ -96017,7 +96298,7 @@ const MetricCard = ({
             children: [/* @__PURE__ */ jsxs(Button, {
               type: "button",
               variant: "custom",
-              className: styles$4.popupItem,
+              className: `${styles$4.popupItem} ${styles$4.csvBtn}`,
               onClick: () => onMaximize({
                 labels: labels2,
                 data: {
@@ -96076,6 +96357,14 @@ const MetricCard = ({
                   className: styles$4.popupItemIcon
                 }), "Download Raw CSV"]
               })]
+            }), onEdit && /* @__PURE__ */ jsxs(Button, {
+              variant: "custom",
+              type: "button",
+              className: `${styles$4.popupItem} ${styles$4.csvBtn}`,
+              onClick: () => onEdit(metricItem, dataDb),
+              children: [/* @__PURE__ */ jsx(materialSymbolsEditSquareOutline, {
+                className: styles$4.popupItemIcon
+              }), "Edit Metric"]
             }), onArchive && /* @__PURE__ */ jsxs(Button, {
               variant: "custom",
               type: "button",
@@ -96230,7 +96519,8 @@ const SingleValueCard = ({
   param,
   companyTenancyType,
   renderHeaderName,
-  onArchive
+  onArchive,
+  onEdit
 }) => {
   var _a2;
   const filterValues2 = {};
@@ -96432,7 +96722,7 @@ const SingleValueCard = ({
                 })]
               }) : null
             })
-          })), onArchive && /* @__PURE__ */ jsx(PopoverMenu, {
+          })), (onEdit || onArchive) && /* @__PURE__ */ jsxs(PopoverMenu, {
             buttonClass: styles$4.popup,
             button: /* @__PURE__ */ jsx(Icons, {
               name: "more-icon",
@@ -96440,7 +96730,15 @@ const SingleValueCard = ({
             }),
             menuClass: styles$4.popupMenu,
             position: "bottom-right",
-            children: /* @__PURE__ */ jsxs(Button, {
+            children: [onEdit && /* @__PURE__ */ jsxs(Button, {
+              variant: "custom",
+              type: "button",
+              className: `${styles$4.popupItem} ${styles$4.csvBtn}`,
+              onClick: () => onEdit(metricItem, dataDb),
+              children: [/* @__PURE__ */ jsx(materialSymbolsEditSquareOutline, {
+                className: styles$4.popupItemIcon
+              }), "Edit Metric"]
+            }), onArchive && /* @__PURE__ */ jsxs(Button, {
               variant: "custom",
               type: "button",
               className: `${styles$4.popupItem} ${styles$4.csvBtn} ${styles$4.deleteBtn}`,
@@ -96448,7 +96746,7 @@ const SingleValueCard = ({
               children: [/* @__PURE__ */ jsx(materialSymbolsArchiveOutline, {
                 className: styles$4.popupItemIcon
               }), "Archive Metric"]
-            })
+            })]
           })]
         })]
       }), chartType2 && /* @__PURE__ */ jsx("div", {
@@ -96533,7 +96831,8 @@ const ArchiveMetricModal = ({
         if (!res.insert_clientDeletedMetrics_one)
           return;
         queryClient2.setQueryData(["EmbeddedDashboardMetrics", {
-          externalDashboardId: dashboardId
+          externalDashboardId: dashboardId,
+          clientId
         }], (prev) => {
           var _a2;
           const externalDashboardMetrics = (_a2 = prev == null ? void 0 : prev.externalDashboardMetrics) == null ? void 0 : _a2.filter((exDm) => exDm.externalMetricId !== metricId);
@@ -96592,13 +96891,18 @@ const ExternalMetricList = ({
   params,
   companyTenancyType = "TABLE",
   externalDashboardId,
-  externalDashboardPk
+  externalDashboardPk,
+  companyId,
+  workspaceId
 }) => {
   const [isFullScreen, setFullScreen] = useState(false);
   const [archiveModal, setArchiveModal] = useState({
     id: "",
     show: false
   });
+  const [editModal, setEditModal] = useState({
+    show: false
+  });
   const [fullScreenChart, setFullScreenChart] = useState();
   const {
     handleLayoutChange
@@ -96664,7 +96968,12 @@ const ExternalMetricList = ({
               onArchive: isAllowedToDeleteMetrics ? (id2) => setArchiveModal({
                 id: id2,
                 show: true
-              }) : void 0
+              }) : void 0,
+              onEdit: (metric, metricData2) => setEditModal({
+                show: true,
+                metric,
+                metricData: metricData2
+              })
             }) : /* @__PURE__ */ jsx(MetricCard, {
               metricItem,
               onMaximize: (chart) => {
@@ -96679,7 +96988,12 @@ const ExternalMetricList = ({
               onArchive: isAllowedToDeleteMetrics ? (id2) => setArchiveModal({
                 id: id2,
                 show: true
-              }) : void 0
+              }) : void 0,
+              onEdit: (metric, metricData2) => setEditModal({
+                show: true,
+                metric,
+                metricData: metricData2
+              })
             })
           }, metricItem.id))
         })
@@ -96700,7 +97014,23 @@ const ExternalMetricList = ({
           show: false
         }),
         dashboardId: externalDashboardId
-      }) : null]
+      }) : null, /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
+        clientId: client,
+        externalDashboardId: externalDashboardPk,
+        userProvidedDashboardId: externalDashboardId,
+        isLiveMode,
+        companyId,
+        metric: editModal.metric,
+        metricData: editModal.metricData,
+        isShowMetricCreateModal: editModal.show,
+        setShowMetricCreateModal: (show) => setEditModal({
+          metric: void 0,
+          metricData: void 0,
+          show: Boolean(show)
+        }),
+        chartColors,
+        workspaceId
+      })]
     }) : /* @__PURE__ */ jsx(Fragment, {
       children: !isMetricListLoading ? /* @__PURE__ */ jsx("div", {
         className: styles$5["noMetric-container"],
@@ -96860,17 +97190,28 @@ const icOutlineFilterAltOff = (props) => /* @__PURE__ */ jsx("svg", {
     d: "m16.95 6l-3.57 4.55l1.43 1.43c1.03-1.31 4.98-6.37 4.98-6.37A.998.998 0 0 0 19 4H6.83l2 2h8.12zM2.81 2.81L1.39 4.22L10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-2.17l5.78 5.78l1.41-1.41L2.81 2.81z"
   })
 });
+const mdiPlus = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"
+  })
+});
 const EmbeddedDashboard = React__default.memo(({
   token,
   options: options2,
   theme: theme2
 }) => {
-  var _a2, _b2, _c2;
+  var _a2, _b2, _c2, _d;
   const {
     data,
     isLoading
   } = useEmbeddedDashboard(token);
   const [isShowFilters, setShowFilters] = useState(false);
+  const [isShowMetricCreateModal, setShowMetricCreateModal] = useState(false);
   const [globalFilters, setGlobalFilters] = useState({
     tableName: "",
     filters: []
@@ -96883,11 +97224,11 @@ const EmbeddedDashboard = React__default.memo(({
     enabled: !!data.companyId
   });
   const [adminTheme, adminThemeChartColors] = useMemo(() => {
-    var _a3, _b3, _c3, _d;
-    const colors2 = (_d = (_c3 = (_b3 = (_a3 = adminThemeData == null ? void 0 : adminThemeData.themes[0]) == null ? void 0 : _a3.chart) == null ? void 0 : _b3.palettes) == null ? void 0 : _c3.find((palette) => {
+    var _a3, _b3, _c3, _d2;
+    const colors2 = (_d2 = (_c3 = (_b3 = (_a3 = adminThemeData == null ? void 0 : adminThemeData.themes[0]) == null ? void 0 : _a3.chart) == null ? void 0 : _b3.palettes) == null ? void 0 : _c3.find((palette) => {
       var _a4, _b4;
       return palette.name === ((_b4 = (_a4 = adminThemeData.themes[0]) == null ? void 0 : _a4.chart) == null ? void 0 : _b4.selected);
-    })) == null ? void 0 : _d.colors;
+    })) == null ? void 0 : _d2.colors;
     return [adminThemeData == null ? void 0 : adminThemeData.themes[0], colors2];
   }, [adminThemeData == null ? void 0 : adminThemeData.themes[0]]);
   useApplyAdminTheme(adminTheme);
@@ -96916,14 +97257,27 @@ const EmbeddedDashboard = React__default.memo(({
                 name: "filter-icon",
                 className: styles$F.floatingFilterButtonIcon
               })
-            }) : null, !(options2 == null ? void 0 : options2.disableMetricCreation) && data.isAllowedToCreateMetrics && /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
-              clientId: data.clientId,
-              companyId: data.companyId,
-              mode: data.mode,
-              externalDashboardId: data.externalDashboard.id,
-              variant: options2 == null ? void 0 : options2.headerVariant,
-              chartColors: adminThemeChartColors != null ? adminThemeChartColors : options2 == null ? void 0 : options2.chartColors,
-              workspaceId: (_b2 = data.workspace) == null ? void 0 : _b2.id
+            }) : null, !(options2 == null ? void 0 : options2.disableMetricCreation) && data.isAllowedToCreateMetrics && /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsx(Button, {
+                type: "button",
+                variant: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? "custom" : "primary",
+                size: "large",
+                className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$F.floatingCreateButton : "",
+                onClick: () => setShowMetricCreateModal(true),
+                children: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
+                  className: styles$F.floatingCreateButtonIcon
+                }) : "Create Metric"
+              }), /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
+                clientId: data.clientId,
+                companyId: data.companyId,
+                isLiveMode: data.isLiveMode,
+                externalDashboardId: data.externalDashboard.id,
+                chartColors: adminThemeChartColors != null ? adminThemeChartColors : options2 == null ? void 0 : options2.chartColors,
+                isShowMetricCreateModal,
+                setShowMetricCreateModal,
+                workspaceId: (_b2 = data.workspace) == null ? void 0 : _b2.id,
+                userProvidedDashboardId: data.externalDashboardId
+              })]
             })]
           })]
         }), /* @__PURE__ */ jsxs("div", {
@@ -96934,18 +97288,20 @@ const EmbeddedDashboard = React__default.memo(({
             onApply: (values) => setGlobalFilters(values)
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList, {
             client: data.clientId,
-            isLiveMode: data.mode,
+            isLiveMode: data.isLiveMode,
             externalDashboardId: data.externalDashboardId,
             externalDashboardPk: data.externalDashboard.id,
             isAllowedToDeleteMetrics: data.isAllowedToDeleteMetrics,
             externalDashboardMetrics: data.externalDashboardMetrics,
+            companyId: data.companyId,
             isMetricListLoading: isLoading,
             globalFilters,
             breakpoint: theme2 == null ? void 0 : theme2.breakpoint,
             layoutCols: theme2 == null ? void 0 : theme2.metricLayoutCols,
             chartColors: adminThemeChartColors != null ? adminThemeChartColors : options2 == null ? void 0 : options2.chartColors,
             params: Array.isArray(data.rlsSettings) ? data.rlsSettings : [],
-            companyTenancyType: data.companyTenancyType
+            companyTenancyType: data.companyTenancyType,
+            workspaceId: (_c2 = data.workspace) == null ? void 0 : _c2.id
           })]
         })]
       }), isLoading && /* @__PURE__ */ jsx("div", {
@@ -96957,7 +97313,7 @@ const EmbeddedDashboard = React__default.memo(({
             color: "blue"
           }
         })
-      }), !isLoading && !((_c2 = data.externalDashboard) == null ? void 0 : _c2.id) && /* @__PURE__ */ jsx("div", {
+      }), !isLoading && !((_d = data.externalDashboard) == null ? void 0 : _d.id) && /* @__PURE__ */ jsx("div", {
         className: styles$F["alt-container"],
         children: "Invalid token or Dashboard id"
       })]