@databrainhq/plugin 0.8.3 → 0.8.5

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React$6 from "react";
-import React__default, { useEffect, useLayoutEffect, useRef, useState, forwardRef, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext, useContext, useReducer, createRef, useMemo, PureComponent, memo as memo$1 } from "react";
+import React__default, { useEffect, useLayoutEffect, useRef, useState, forwardRef, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext, useContext, useReducer, createRef, useMemo, useCallback, PureComponent, memo as memo$1 } from "react";
 import ReactDOM from "react-dom";
 function _setPrototypeOf$7(o2, p2) {
   _setPrototypeOf$7 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p3) {
@@ -2641,17 +2641,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,37 +4940,37 @@ 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_1uwmw_9";
-const selectedOptionText = "_selectedOptionText_1uwmw_33";
-const transitionDiv = "_transitionDiv_1uwmw_41";
-const listboxButtonWrapper = "_listboxButtonWrapper_1uwmw_49";
-const arrowicon = "_arrowicon_1uwmw_55";
-const leave$2 = "_leave_1uwmw_61";
-const leaveFrom$2 = "_leaveFrom_1uwmw_67";
-const leaveTo$2 = "_leaveTo_1uwmw_73";
-const notAvailable = "_notAvailable_1uwmw_79";
-const option$1 = "_option_1uwmw_85";
-const activeOption = "_activeOption_1uwmw_91";
-const optionSelected = "_optionSelected_1uwmw_97";
-const inactiveOption = "_inactiveOption_1uwmw_103";
-const optionLabel = "_optionLabel_1uwmw_109";
-const optionSubLabel = "_optionSubLabel_1uwmw_115";
-const selectedLabel = "_selectedLabel_1uwmw_121";
-const nonselectedLabel = "_nonselectedLabel_1uwmw_127";
-const check = "_check_1uwmw_133";
-const checkActive = "_checkActive_1uwmw_139";
-const checkInactive = "_checkInactive_1uwmw_145";
-const checkIcon$1 = "_checkIcon_1uwmw_151";
-const checkIconSelected = "_checkIconSelected_1uwmw_157";
-const checkIconUnselected = "_checkIconUnselected_1uwmw_163";
-const loadMore$1 = "_loadMore_1uwmw_169";
-const selectedList = "_selectedList_1uwmw_175";
-const selectedListItem = "_selectedListItem_1uwmw_181";
+const listBoxButton = "_listBoxButton_1xd0l_5";
+const selectedOptionText = "_selectedOptionText_1xd0l_17";
+const transitionDiv = "_transitionDiv_1xd0l_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_1xd0l_25";
+const arrowicon = "_arrowicon_1xd0l_28";
+const leave$2 = "_leave_1xd0l_31";
+const leaveFrom$2 = "_leaveFrom_1xd0l_34";
+const leaveTo$2 = "_leaveTo_1xd0l_37";
+const notAvailable = "_notAvailable_1xd0l_40";
+const option$1 = "_option_1xd0l_43";
+const activeOption = "_activeOption_1xd0l_46";
+const optionSelected = "_optionSelected_1xd0l_49";
+const inactiveOption = "_inactiveOption_1xd0l_52";
+const optionLabel = "_optionLabel_1xd0l_55";
+const optionSubLabel = "_optionSubLabel_1xd0l_58";
+const selectedLabel = "_selectedLabel_1xd0l_61";
+const nonselectedLabel = "_nonselectedLabel_1xd0l_64";
+const check = "_check_1xd0l_67";
+const checkActive = "_checkActive_1xd0l_70";
+const checkInactive = "_checkInactive_1xd0l_73";
+const checkIcon$1 = "_checkIcon_1xd0l_76";
+const checkIconSelected = "_checkIconSelected_1xd0l_79";
+const checkIconUnselected = "_checkIconUnselected_1xd0l_82";
+const loadMore$1 = "_loadMore_1xd0l_85";
+const selectedList = "_selectedList_1xd0l_88";
+const selectedListItem = "_selectedListItem_1xd0l_91";
 var style = {
-  "listBox-label": "_listBox-label_1uwmw_1",
-  "listBoxButton-container": "_listBoxButton-container_1uwmw_9",
+  "listBox-label": "_listBox-label_1xd0l_1",
+  "listBoxButton-container": "_listBoxButton-container_1xd0l_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_1uwmw_25",
+  "listBox-option": "_listBox-option_1xd0l_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -4997,22 +4997,22 @@ var style = {
   selectedList,
   selectedListItem
 };
-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",
@@ -5040,10 +5040,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", {
@@ -6661,6 +6661,22 @@ const useGenerateEmbeddedMeticMutation = (options2) => useMutation(
   (variables) => fetcher(GenerateEmbeddedMeticDocument, variables)(),
   options2
 );
+const GetClientDashboardLayoutDocument = `
+    query GetClientDashboardLayout($clientId: String!, $externalDashboardId: uuid!) {
+  clientDashboardMetrics_by_pk(
+    clientId: $clientId
+    externalDashboardId: $externalDashboardId
+  ) {
+    clientId
+    externalDashboardId
+  }
+}
+    `;
+const useGetClientDashboardLayoutQuery = (variables, options2) => useQuery(
+  ["GetClientDashboardLayout", variables],
+  fetcher(GetClientDashboardLayoutDocument, variables),
+  options2
+);
 const CompanySubsetTableDataDocument = `
     mutation CompanySubsetTableData($clientId: String = "", $companyId: String = "") {
   companySubsetTableData(input: {clientId: $clientId, companyId: $companyId}) {
@@ -6819,14 +6835,35 @@ const useUnderlyingDataMutation = (options2) => useMutation(
   (variables) => fetcher(UnderlyingDataDocument, variables)(),
   options2
 );
+const MarkClientDashboardLayoutChangeDocument = `
+    mutation MarkClientDashboardLayoutChange($clientId: String!, $externalDashboardId: uuid!) {
+  insert_clientDashboardMetrics_one(
+    object: {clientId: $clientId, externalDashboardId: $externalDashboardId}
+  ) {
+    clientId
+    externalDashboardId
+  }
+}
+    `;
+const useMarkClientDashboardLayoutChangeMutation = (options2) => useMutation(
+  ["MarkClientDashboardLayoutChange"],
+  (variables) => fetcher(MarkClientDashboardLayoutChangeDocument, variables)(),
+  options2
+);
 const MarkDeleteMetricDocument = `
-    mutation MarkDeleteMetric($id: uuid! = "") {
+    mutation MarkDeleteMetric($id: uuid! = "", $clientId: String! = "") {
   update_externalMetrics_by_pk(
     pk_columns: {id: $id}
     _set: {isMarkedDeleted: true}
   ) {
     id
   }
+  insert_clientDeletedMetrics_one(
+    object: {externalMetricId: $id, clientId: $clientId}
+  ) {
+    clientId
+    externalMetricId
+  }
 }
     `;
 const useMarkDeleteMetricMutation = (options2) => useMutation(
@@ -6887,6 +6924,21 @@ const useRawCsvMutation = (options2) => useMutation(
   (variables) => fetcher(RawCsvDocument, variables)(),
   options2
 );
+const ResizeExternalMetricDocument = `
+    mutation resizeExternalMetric($id: uuid!, $resizeAttributes: jsonb!) {
+  update_externalMetrics_by_pk(
+    pk_columns: {id: $id}
+    _set: {resizeAttributes: $resizeAttributes}
+  ) {
+    resizeAttributes
+  }
+}
+    `;
+const useResizeExternalMetricMutation = (options2) => useMutation(
+  ["resizeExternalMetric"],
+  (variables) => fetcher(ResizeExternalMetricDocument, variables)(),
+  options2
+);
 const ExternalMetricForm = ({
   onSubmit,
   defaultValues,
@@ -6996,22 +7048,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,
@@ -7417,6 +7469,73 @@ const useApplyAdminTheme = (adminTheme) => {
     document.head.appendChild(adminStyles);
   }, [adminTheme]);
 };
+const useClientDashboardLayout = ({
+  externalDashboardId,
+  clientId
+}) => {
+  const queryClient2 = useQueryClient();
+  const { data: clientLayoutData } = useGetClientDashboardLayoutQuery(
+    {
+      clientId,
+      externalDashboardId
+    },
+    { enabled: Boolean(externalDashboardId && clientId) }
+  );
+  const isLayoutChanged = useMemo(
+    () => !!(clientLayoutData == null ? void 0 : clientLayoutData.clientDashboardMetrics_by_pk),
+    [clientLayoutData == null ? void 0 : clientLayoutData.clientDashboardMetrics_by_pk]
+  );
+  const { mutateAsync: markClientLayoutChangeMutation } = useMarkClientDashboardLayoutChangeMutation();
+  const markClientLayoutChange = useCallback(async () => {
+    if (!clientId || !externalDashboardId || isLayoutChanged)
+      return;
+    await markClientLayoutChangeMutation(
+      {
+        clientId,
+        externalDashboardId
+      },
+      {
+        onSuccess: (res) => {
+          if (!res.insert_clientDashboardMetrics_one)
+            return;
+          queryClient2.setQueryData(
+            ["GetClientDashboardLayout", { clientId, externalDashboardId }],
+            (prev) => {
+              return {
+                ...prev,
+                clientDashboardMetrics_by_pk: res.insert_clientDashboardMetrics_one
+              };
+            }
+          );
+        }
+      }
+    );
+  }, [
+    markClientLayoutChangeMutation,
+    isLayoutChanged,
+    clientId,
+    externalDashboardId
+  ]);
+  const { mutateAsync: resizeMetricCard } = useResizeExternalMetricMutation();
+  const handleLayoutChange = useCallback(
+    async (_layout, _oldItem, newItem) => {
+      await Promise.all([
+        resizeMetricCard({
+          id: newItem.i,
+          resizeAttributes: {
+            width: newItem.w,
+            height: newItem.h,
+            xAxis: newItem.x,
+            yAxis: newItem.y
+          }
+        }),
+        markClientLayoutChange()
+      ]);
+    },
+    [resizeMetricCard, markClientLayoutChange]
+  );
+  return { handleLayoutChange, markClientLayoutChange, isLayoutChanged };
+};
 var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   useEmbeddedDashboard,
@@ -7424,7 +7543,8 @@ var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   useGenerateDatasetMetrics,
   useGenerateEmbeddedMetric,
   useOutsideAlerter,
-  useApplyAdminTheme
+  useApplyAdminTheme,
+  useClientDashboardLayout
 }, Symbol.toStringTag, { value: "Module" }));
 const materialSymbolsKeyboardArrowDown = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
@@ -86385,12 +86505,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,
@@ -86442,25 +86562,25 @@ const Header = ({
     })]
   });
 };
-const floatingCreateButton = "_floatingCreateButton_jfq7q_25";
-const floatingCreateButtonIcon = "_floatingCreateButtonIcon_jfq7q_33";
+const floatingCreateButton = "_floatingCreateButton_6ovk2_13";
+const floatingCreateButtonIcon = "_floatingCreateButtonIcon_6ovk2_17";
 var styles$i = {
-  "create-btn": "_create-btn_jfq7q_1",
-  "modal-container": "_modal-container_jfq7q_9",
-  "query-modal": "_query-modal_jfq7q_17",
+  "create-btn": "_create-btn_6ovk2_1",
+  "modal-container": "_modal-container_6ovk2_5",
+  "query-modal": "_query-modal_6ovk2_9",
   floatingCreateButton,
   floatingCreateButtonIcon
 };
-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
 };
@@ -87813,10 +87933,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,
@@ -87849,16 +87969,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
@@ -87929,13 +88049,13 @@ const TableTab = ({
     })]
   });
 };
-const wrapper = "_wrapper_49kql_17";
-const searchCommand = "_searchCommand_49kql_23";
-const tabButton = "_tabButton_49kql_29";
-const tabActive = "_tabActive_49kql_35";
+const wrapper = "_wrapper_wy97p_9";
+const searchCommand = "_searchCommand_wy97p_12";
+const tabButton = "_tabButton_wy97p_15";
+const tabActive = "_tabActive_wy97p_18";
 var styles$a = {
-  "main-container": "_main-container_49kql_1",
-  "outputTab-header": "_outputTab-header_49kql_9",
+  "main-container": "_main-container_wy97p_1",
+  "outputTab-header": "_outputTab-header_wy97p_5",
   wrapper,
   searchCommand,
   tabButton,
@@ -88066,30 +88186,30 @@ const MetricOutput = ({
     })]
   });
 };
-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,
@@ -89240,10 +89360,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,
@@ -94926,11 +95046,11 @@ function WidthProvideRGL(ComposedComponent) {
 })(reactGridLayout);
 var styles$6 = "";
 var styles$5 = {
-  "MetricList-container": "_MetricList-container_1b506_1",
-  "MetricList-wrapper": "_MetricList-wrapper_1b506_9",
-  "noMetric-container": "_noMetric-container_1b506_17",
-  "noMetric-wrapper": "_noMetric-wrapper_1b506_25",
-  "alt-container": "_alt-container_1b506_33"
+  "MetricList-container": "_MetricList-container_1jw09_1",
+  "MetricList-wrapper": "_MetricList-wrapper_1jw09_9",
+  "noMetric-container": "_noMetric-container_1jw09_17",
+  "noMetric-wrapper": "_noMetric-wrapper_1jw09_25",
+  "alt-container": "_alt-container_1jw09_33"
 };
 const cardContainer = "_cardContainer_1wz4e_1";
 const listHeader = "_listHeader_1wz4e_9";
@@ -95053,8 +95173,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
@@ -95121,24 +95241,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,
@@ -95156,23 +95276,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
@@ -95923,6 +96043,9 @@ const MetricCard = ({
         })]
       }), chartType2 && /* @__PURE__ */ jsxs("div", {
         className: styles$4.metricData,
+        onContextMenu: (e2) => {
+          e2.preventDefault();
+        },
         children: [!isQueryLoading && !dataDb.length ? /* @__PURE__ */ jsx("div", {
           className: styles$4.noData,
           children: /* @__PURE__ */ jsxs("div", {
@@ -96342,7 +96465,8 @@ const DeleteMetricModal = ({
   onClose,
   onSuccess,
   metricId,
-  dashboardId
+  dashboardId,
+  clientId
 }) => {
   const queryClient2 = useQueryClient();
   const {
@@ -96350,14 +96474,17 @@ const DeleteMetricModal = ({
     isLoading
   } = useMarkDeleteMetricMutation();
   const handleDeleteMetric = async () => {
-    if (!metricId || !dashboardId)
+    if (!metricId || !dashboardId || !clientId)
       return;
     await deleteMetric({
-      id: metricId
+      id: metricId,
+      clientId
     }, {
-      onSuccess: () => {
+      onSuccess: (res) => {
+        if (!res.update_externalMetrics_by_pk)
+          return;
         queryClient2.setQueryData(["EmbeddedDashboardMetrics", {
-          dashboardId
+          externalDashboardId: dashboardId
         }], (prev) => {
           var _a2;
           const externalDashboardMetrics = (_a2 = prev == null ? void 0 : prev.externalDashboardMetrics) == null ? void 0 : _a2.filter((exDm) => exDm.externalMetricId !== metricId);
@@ -96415,7 +96542,8 @@ const ExternalMetricList = ({
   layoutCols,
   params,
   companyTenancyType = "TABLE",
-  externalDashboardId
+  externalDashboardId,
+  externalDashboardPk
 }) => {
   const [isFullScreen, setFullScreen] = useState(false);
   const [deleteModal2, setDeleteModal] = useState({
@@ -96423,6 +96551,12 @@ const ExternalMetricList = ({
     show: false
   });
   const [fullScreenChart, setFullScreenChart] = useState();
+  const {
+    handleLayoutChange
+  } = useClientDashboardLayout({
+    clientId: client,
+    externalDashboardId: externalDashboardPk
+  });
   const metricListData = externalDashboardMetrics == null ? void 0 : externalDashboardMetrics.map((data) => data.externalMetric);
   const adminMetrics = metricListData == null ? void 0 : metricListData.filter((data) => !data.isCreatedByClient);
   const clientMetrics = metricListData == null ? void 0 : metricListData.filter((data) => data.isCreatedByClient && data.clientId === client);
@@ -96452,9 +96586,8 @@ const ExternalMetricList = ({
               maxH: 15
             }))
           },
-          isResizable: false,
-          isDraggable: false,
-          isDroppable: false,
+          onResizeStop: handleLayoutChange,
+          onDragStop: handleLayoutChange,
           rowHeight: 30,
           width: 1200,
           breakpoints: breakpoint != null ? breakpoint : {
@@ -96508,6 +96641,7 @@ const ExternalMetricList = ({
       }), isAllowedToDeleteMetrics ? /* @__PURE__ */ jsx(DeleteMetricModal, {
         metricId: deleteModal2.id,
         isOpen: deleteModal2.show,
+        clientId: client,
         onSuccess: () => setDeleteModal({
           id: "",
           show: false
@@ -96752,6 +96886,7 @@ const EmbeddedDashboard = React__default.memo(({
             client: data.clientId,
             isLiveMode: data.mode,
             externalDashboardId: data.externalDashboardId,
+            externalDashboardPk: data.externalDashboard.id,
             isAllowedToDeleteMetrics: data.isAllowedToDeleteMetrics,
             externalDashboardMetrics: data.externalDashboardMetrics,
             isMetricListLoading: isLoading,