@databrainhq/plugin 0.4.7 → 0.5.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React$6 from "react";
-import React__default, { PureComponent, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext as createContext$1, useContext, useReducer, createRef, useCallback, memo } from "react";
+import React__default, { PureComponent, forwardRef, useRef, useEffect, useState, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement as cloneElement$1, createElement as createElement$1, createContext as createContext$1, useContext, useMemo, useReducer, createRef, useCallback, memo } from "react";
 import require$$2$1 from "react-dom";
 function _setPrototypeOf$7(o2, p2) {
   _setPrototypeOf$7 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p3) {
@@ -2512,73 +2512,75 @@ function useQuery(arg1, arg2, arg3) {
   var parsedOptions = parseQueryArgs(arg1, arg2, arg3);
   return useBaseQuery(parsedOptions, QueryObserver);
 }
-const container$e = "_container_11uys_1";
-const fixed = "_fixed_11uys_1";
-const absolute = "_absolute_11uys_1";
-const relative = "_relative_11uys_1";
-const sticky = "_sticky_11uys_1";
-const flex = "_flex_11uys_1";
-const table$4 = "_table_11uys_1";
-const grid = "_grid_11uys_1";
-const hidden = "_hidden_11uys_1";
-const transform = "_transform_11uys_1";
-const shadow = "_shadow_11uys_1";
-const filter$1 = "_filter_11uys_189";
-var styles$z = {
+const container$e = "_container_gr5gv_1";
+const fixed = "_fixed_gr5gv_1";
+const absolute = "_absolute_gr5gv_1";
+const flex = "_flex_gr5gv_1";
+const table$4 = "_table_gr5gv_1";
+const grid = "_grid_gr5gv_1";
+const hidden = "_hidden_gr5gv_1";
+const transform = "_transform_gr5gv_1";
+const border = "_border_gr5gv_1";
+const shadow = "_shadow_gr5gv_1";
+const filter$1 = "_filter_gr5gv_347";
+const floatingFilterButton = "_floatingFilterButton_gr5gv_355";
+const floatingFilterButtonIcon = "_floatingFilterButtonIcon_gr5gv_363";
+const floatingButton = "_floatingButton_gr5gv_371";
+const floatingButtonIcon = "_floatingButtonIcon_gr5gv_379";
+const staticContainer = "_staticContainer_gr5gv_387";
+const floatingContainer = "_floatingContainer_gr5gv_395";
+var styles$A = {
   container: container$e,
-  "static": "_static_11uys_1",
+  "static": "_static_gr5gv_387",
   fixed,
   absolute,
-  relative,
-  sticky,
-  "top-0": "_top-0_11uys_1",
-  "left-2": "_left-2_11uys_1",
-  "top-1": "_top-1_11uys_1",
-  "mb-2": "_mb-2_11uys_1",
-  "mt-2": "_mt-2_11uys_1",
-  "mt-2.5": "_mt-2.5_11uys_1",
-  "mb-3": "_mb-3_11uys_1",
+  "left-2": "_left-2_gr5gv_1",
+  "top-1": "_top-1_gr5gv_1",
+  "mb-2": "_mb-2_gr5gv_1",
+  "mt-2": "_mt-2_gr5gv_1",
+  "mt-2.5": "_mt-2.5_gr5gv_1",
+  "mb-3": "_mb-3_gr5gv_1",
   flex,
   table: table$4,
   grid,
   hidden,
-  "h-screen": "_h-screen_11uys_1",
-  "h-full": "_h-full_11uys_1",
-  "h-[4%]": "_h-[4%]_11uys_1",
-  "h-10": "_h-10_11uys_1",
-  "h-14": "_h-14_11uys_1",
-  "h-80": "_h-80_11uys_1",
-  "w-screen": "_w-screen_11uys_1",
-  "w-full": "_w-full_11uys_1",
-  "w-64": "_w-64_11uys_1",
+  "h-screen": "_h-screen_gr5gv_1",
+  "h-full": "_h-full_gr5gv_1",
+  "h-80": "_h-80_gr5gv_1",
+  "w-screen": "_w-screen_gr5gv_1",
+  "w-full": "_w-full_gr5gv_1",
   transform,
-  "flex-col": "_flex-col_11uys_1",
-  "items-center": "_items-center_11uys_1",
-  "justify-center": "_justify-center_11uys_1",
-  "gap-5": "_gap-5_11uys_1",
-  "divide-solid": "_divide-solid_11uys_1",
-  "overflow-y-auto": "_overflow-y-auto_11uys_1",
-  "overflow-x-hidden": "_overflow-x-hidden_11uys_1",
-  "border-2": "_border-2_11uys_1",
-  "border-l": "_border-l_11uys_1",
-  "bg-[#EAEEFC]": "_bg-[#EAEEFC]_11uys_1",
-  "p-4": "_p-4_11uys_1",
-  "p-2": "_p-2_11uys_1",
-  "px-4": "_px-4_11uys_1",
-  "pl-1": "_pl-1_11uys_1",
-  "text-center": "_text-center_11uys_1",
-  "text-lg": "_text-lg_11uys_1",
-  "text-6xl": "_text-6xl_11uys_1",
-  "text-sm": "_text-sm_11uys_1",
-  "text-xs": "_text-xs_11uys_1",
-  "text-blue-700": "_text-blue-700_11uys_1",
+  "flex-col": "_flex-col_gr5gv_1",
+  "items-center": "_items-center_gr5gv_1",
+  "justify-center": "_justify-center_gr5gv_1",
+  "gap-5": "_gap-5_gr5gv_1",
+  "divide-solid": "_divide-solid_gr5gv_1",
+  "overflow-y-auto": "_overflow-y-auto_gr5gv_1",
+  "overflow-x-hidden": "_overflow-x-hidden_gr5gv_1",
+  border,
+  "border-2": "_border-2_gr5gv_1",
+  "p-4": "_p-4_gr5gv_1",
+  "p-2": "_p-2_gr5gv_1",
+  "text-center": "_text-center_gr5gv_1",
+  "text-lg": "_text-lg_gr5gv_1",
+  "text-6xl": "_text-6xl_gr5gv_1",
+  "text-sm": "_text-sm_gr5gv_1",
+  "text-xs": "_text-xs_gr5gv_1",
+  "text-blue-700": "_text-blue-700_gr5gv_1",
   shadow,
   filter: filter$1,
-  "!filter": "_!filter_11uys_1",
-  "embedDashboard-container": "_embedDashboard-container_11uys_157",
-  "embedDashboard-header": "_embedDashboard-header_11uys_165",
-  "embedDashboard-wrapper": "_embedDashboard-wrapper_11uys_173",
-  "alt-container": "_alt-container_11uys_181"
+  "!filter": "_!filter_gr5gv_1",
+  "embedDashboard-container": "_embedDashboard-container_gr5gv_307",
+  "embedDashboard-header-static": "_embedDashboard-header-static_gr5gv_315",
+  "embedDashboard-header-floating": "_embedDashboard-header-floating_gr5gv_323",
+  "embedDashboard-wrapper": "_embedDashboard-wrapper_gr5gv_331",
+  "alt-container": "_alt-container_gr5gv_339",
+  floatingFilterButton,
+  floatingFilterButtonIcon,
+  floatingButton,
+  floatingButtonIcon,
+  staticContainer,
+  floatingContainer
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n2) {
@@ -7841,271 +7843,14 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.Responsive.utils = responsiveUtils;
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
-var styles$y = "";
-var styles$x = {
-  "MetricList-container": "_MetricList-container_7pasw_1",
-  "MetricList-wrapper": "_MetricList-wrapper_7pasw_9",
-  "noMetric-container": "_noMetric-container_7pasw_17",
-  "noMetric-wrapper": "_noMetric-wrapper_7pasw_25",
-  "alt-container": "_alt-container_7pasw_33"
-};
-const fetcher = (query, variables, options2) => {
-  return async () => {
-    const res = await fetch("https://backend.usedatabrain.com/v1/graphql", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Hasura-Role": "anonymous",
-        ...options2
-      },
-      body: JSON.stringify({
-        query,
-        variables
-      })
-    });
-    const json = await res.json();
-    if (json.errors) {
-      const { message } = json.errors[0];
-      throw new Error(message);
-    }
-    return json.data;
-  };
+var styles$z = "";
+var styles$y = {
+  "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"
 };
-const CreateExternalMetricDocument = `
-    mutation CreateExternalMetric($chartOptions: jsonb = "", $companyId: uuid = "", $companyIntegrationId: uuid = "", $description: String = "", $inputFields: jsonb = "", $integrationName: String = "", $metricId: String = "", $metricQuery: String = "", $name: String = "", $outputColumns: String = "", $query: String = "", $isLive: Boolean, $clientId: String = "", $isCreatedByClient: Boolean = false, $createdBy: String = "", $timeGrain: String = "", $externalDashboardIds: [externalDashboardMetrics_insert_input!] = {}, $selectedGroupBy: jsonb = [], $isEnableGroupBy: Boolean = false, $groupBy: jsonb = {}) {
-  insert_externalMetrics_one(
-    object: {chartOptions: $chartOptions, companyId: $companyId, companyIntegrationId: $companyIntegrationId, description: $description, inputFields: $inputFields, integrationName: $integrationName, metricId: $metricId, metricQuery: $metricQuery, name: $name, outputColumns: $outputColumns, query: $query, isLive: $isLive, clientId: $clientId, isCreatedByClient: $isCreatedByClient, createdBy: $createdBy, timeGrain: $timeGrain, externalDashboardMetrics: {data: $externalDashboardIds}, selectedGroupBy: $selectedGroupBy, isEnableGroupBy: $isEnableGroupBy, groupBy: $groupBy}
-  ) {
-    id
-    externalDashboardMetrics {
-      externalDashboardId
-    }
-  }
-}
-    `;
-const useCreateExternalMetricMutation = (options2) => useMutation(
-  ["CreateExternalMetric"],
-  (variables) => fetcher(CreateExternalMetricDocument, variables)(),
-  options2
-);
-const FetchColumnDataDocument = `
-    mutation FetchColumnData($companyId: String = "", $tableName: String = "", $columnName: String = "") {
-  fetchColumnData(
-    input: {columnName: $columnName, companyId: $companyId, tableName: $tableName}
-  ) {
-    data {
-      label
-      value
-    }
-    error {
-      message
-    }
-  }
-}
-    `;
-const useFetchColumnDataMutation = (options2) => useMutation(
-  ["FetchColumnData"],
-  (variables) => fetcher(
-    FetchColumnDataDocument,
-    variables
-  )(),
-  options2
-);
-const GenerateDatasetMetricsDocument = `
-    mutation GenerateDatasetMetrics($companyId: String = "", $userInputs: json = "") {
-  generateDatasetMetrics(input: {companyId: $companyId, userInputs: $userInputs}) {
-    error
-    query
-    result
-  }
-}
-    `;
-const useGenerateDatasetMetricsMutation = (options2) => useMutation(
-  ["GenerateDatasetMetrics"],
-  (variables) => fetcher(GenerateDatasetMetricsDocument, variables)(),
-  options2
-);
-const CompanyIntegrationDocument = `
-    query CompanyIntegration($companyId: uuid = "") {
-  companyIntegrations(where: {companyId: {_eq: $companyId}}) {
-    companyId
-    id
-    integrationId
-    name
-  }
-}
-    `;
-const useCompanyIntegrationQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["CompanyIntegration"] : ["CompanyIntegration", variables],
-  fetcher(
-    CompanyIntegrationDocument,
-    variables
-  ),
-  options2
-);
-const CompanySubsetTableListDocument = `
-    query CompanySubsetTableList($companyId: uuid = "") {
-  companySubsetTables(where: {companyId: {_eq: $companyId}}) {
-    tableList
-  }
-}
-    `;
-const useCompanySubsetTableListQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["CompanySubsetTableList"] : ["CompanySubsetTableList", variables],
-  fetcher(
-    CompanySubsetTableListDocument,
-    variables
-  ),
-  options2
-);
-const EmbeddedDashboardMetricsDocument = `
-    query EmbeddedDashboardMetrics($where: externalDashboardMetrics_bool_exp) {
-  externalDashboardMetrics(where: $where) {
-    externalMetricId
-    externalDashboardId
-    externalMetric {
-      chartOptions
-      clientId
-      companyId
-      companyIntegrationId
-      createdAt
-      createdBy
-      description
-      id
-      inputFields
-      integrationName
-      isCreatedByClient
-      isLive
-      metricId
-      metricQuery
-      name
-      outputColumns
-      query
-      resizeAttributes
-      timeGrain
-      updatedAt
-      selectedGroupBy
-      isEnableGroupBy
-      groupBy
-    }
-  }
-}
-    `;
-const useEmbeddedDashboardMetricsQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["EmbeddedDashboardMetrics"] : ["EmbeddedDashboardMetrics", variables],
-  fetcher(EmbeddedDashboardMetricsDocument, variables),
-  options2
-);
-const GetExternalDashboardClientThemeDocument = `
-    query GetExternalDashboardClientTheme($companyId: uuid!, $clientId: String!) {
-  externalDashboardThemes(
-    where: {companyId: {_eq: $companyId}, externalDashboardThemeClients: {clientId: {_eq: $clientId}}}
-    limit: 1
-  ) {
-    colors
-    createdAt
-    id
-    name
-  }
-}
-    `;
-const useGetExternalDashboardClientThemeQuery = (variables, options2) => useQuery(
-  ["GetExternalDashboardClientTheme", variables],
-  fetcher(GetExternalDashboardClientThemeDocument, variables),
-  options2
-);
-const GetExternalDashboardIdDocument = `
-    query GetExternalDashboardId($externalDashboardId: String = "") {
-  externalDashboards(where: {externalDashboardId: {_eq: $externalDashboardId}}) {
-    id
-    filters
-  }
-}
-    `;
-const useGetExternalDashboardIdQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["GetExternalDashboardId"] : ["GetExternalDashboardId", variables],
-  fetcher(
-    GetExternalDashboardIdDocument,
-    variables
-  ),
-  options2
-);
-const ExternalDashboardListDocument = `
-    query ExternalDashboardList($companyId: uuid = "") {
-  externalDashboards(where: {companyId: {_eq: $companyId}}) {
-    externalDashboardId
-    name
-    id
-  }
-}
-    `;
-const useExternalDashboardListQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["ExternalDashboardList"] : ["ExternalDashboardList", variables],
-  fetcher(
-    ExternalDashboardListDocument,
-    variables
-  ),
-  options2
-);
-const GuestTokenParamsDocument = `
-    query GuestTokenParams($id: uuid = "") {
-  guestTokens_by_pk(id: $id) {
-    clientId
-    companyId
-    id
-    params
-  }
-}
-    `;
-const useGuestTokenParamsQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["GuestTokenParams"] : ["GuestTokenParams", variables],
-  fetcher(
-    GuestTokenParamsDocument,
-    variables
-  ),
-  options2
-);
-const PreviewTableDocument = `
-    mutation PreviewTable($companyId: String = "", $tableName: String = "", $limit: Int = 10) {
-  previewTable(
-    input: {companyId: $companyId, tableName: $tableName, limit: $limit}
-  ) {
-    data {
-      data
-      isError
-      name
-    }
-    error {
-      message
-    }
-  }
-}
-    `;
-const usePreviewTableMutation = (options2) => useMutation(
-  ["PreviewTable"],
-  (variables) => fetcher(
-    PreviewTableDocument,
-    variables
-  )(),
-  options2
-);
-const QueryExternalMetricDocument = `
-    query QueryExternalMetric($id: String = "", $clientId: String = "", $filterValues: json = "", $globalFilters: json = []) {
-  externalMetricQuery(
-    input: {externalMetricId: $id, clientId: $clientId, filterValues: $filterValues, globalFilters: $globalFilters}
-  ) {
-    data
-  }
-}
-    `;
-const useQueryExternalMetricQuery = (variables, options2) => useQuery(
-  variables === void 0 ? ["QueryExternalMetric"] : ["QueryExternalMetric", variables],
-  fetcher(
-    QueryExternalMetricDocument,
-    variables
-  ),
-  options2
-);
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -8154,21 +7899,21 @@ var classnames = { exports: {} };
   })();
 })(classnames);
 var classNames = classnames.exports;
-const primary = "_primary_iy5fw_1";
-const secondary = "_secondary_iy5fw_5";
-const tertiary = "_tertiary_iy5fw_10";
-var styles$w = {
+const primary = "_primary_xtxvk_1";
+const secondary = "_secondary_xtxvk_5";
+const tertiary = "_tertiary_xtxvk_10";
+var styles$x = {
   primary,
   secondary,
   tertiary,
-  "font-18": "_font-18_iy5fw_14",
-  "font-20": "_font-20_iy5fw_18",
-  "font-14": "_font-14_iy5fw_22",
-  "font-14a": "_font-14a_iy5fw_26",
-  "font-14b": "_font-14b_iy5fw_30",
-  "font-14c": "_font-14c_iy5fw_34",
-  "font-15": "_font-15_iy5fw_38",
-  "font-34": "_font-34_iy5fw_41"
+  "font-18": "_font-18_xtxvk_14",
+  "font-20": "_font-20_xtxvk_18",
+  "font-14": "_font-14_xtxvk_22",
+  "font-14a": "_font-14a_xtxvk_26",
+  "font-14b": "_font-14b_xtxvk_30",
+  "font-14c": "_font-14c_xtxvk_34",
+  "font-15": "_font-15_xtxvk_38",
+  "font-34": "_font-34_xtxvk_41"
 };
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -8222,13 +7967,13 @@ const Text = ({
 }) => {
   const Tag = variants[variant];
   return /* @__PURE__ */ jsx(Tag, {
-    className: classNames(styleClass === "custom" ? null : `${styles$w[styleClass]}`, className),
+    className: classNames(styleClass === "custom" ? null : `${styles$x[styleClass]}`, className),
     onClick,
     children: children2
   });
 };
 const fullscreen = "_fullscreen_1wo1t_1";
-var styles$v = {
+var styles$w = {
   fullscreen
 };
 const SOMETHING_WENT_WRONG = "something went wrong, please try again";
@@ -84049,14 +83794,14 @@ class LineController extends DatasetController {
   getMaxOverflow() {
     const meta = this._cachedMeta;
     const dataset = meta.dataset;
-    const border = dataset.options && dataset.options.borderWidth || 0;
+    const border2 = dataset.options && dataset.options.borderWidth || 0;
     const data = meta.data || [];
     if (!data.length) {
-      return border;
+      return border2;
     }
     const firstPoint = data[0].size(this.resolveDataElementOptions(0));
     const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border, firstPoint, lastPoint) / 2;
+    return Math.max(border2, firstPoint, lastPoint) / 2;
   }
   draw() {
     const meta = this._cachedMeta;
@@ -86025,13 +85770,13 @@ class ScatterController extends DatasetController {
       return max3 > 0 && max3;
     }
     const dataset = meta.dataset;
-    const border = dataset.options && dataset.options.borderWidth || 0;
+    const border2 = dataset.options && dataset.options.borderWidth || 0;
     if (!data.length) {
-      return border;
+      return border2;
     }
     const firstPoint = data[0].size(this.resolveDataElementOptions(0));
     const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border, firstPoint, lastPoint) / 2;
+    return Math.max(border2, firstPoint, lastPoint) / 2;
   }
 }
 ScatterController.id = "scatter";
@@ -88771,7 +88516,7 @@ function boundingRects(bar) {
   const bounds = getBarBounds(bar);
   const width = bounds.right - bounds.left;
   const height = bounds.bottom - bounds.top;
-  const border = parseBorderWidth(bar, width / 2, height / 2);
+  const border2 = parseBorderWidth(bar, width / 2, height / 2);
   const radius = parseBorderRadius(bar, width / 2, height / 2);
   return {
     outer: {
@@ -88782,15 +88527,15 @@ function boundingRects(bar) {
       radius
     },
     inner: {
-      x: bounds.left + border.l,
-      y: bounds.top + border.t,
-      w: width - border.l - border.r,
-      h: height - border.t - border.b,
+      x: bounds.left + border2.l,
+      y: bounds.top + border2.t,
+      w: width - border2.l - border2.r,
+      h: height - border2.t - border2.b,
       radius: {
-        topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
-        topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r)),
-        bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border.b, border.l)),
-        bottomRight: Math.max(0, radius.bottomRight - Math.max(border.b, border.r))
+        topLeft: Math.max(0, radius.topLeft - Math.max(border2.t, border2.l)),
+        topRight: Math.max(0, radius.topRight - Math.max(border2.t, border2.r)),
+        bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border2.b, border2.l)),
+        bottomRight: Math.max(0, radius.bottomRight - Math.max(border2.b, border2.r))
       }
     }
   };
@@ -93664,6 +93409,7 @@ const BoxPlot = ({
     option: option2
   });
 };
+var styles$v = ".tableContainer{position:relative;max-height:24rem;max-width:56rem;overflow:scroll;border-radius:var(--databrainhq-plugin-border-radiusMd);border-width:1px;border-style:solid;border-color:var(--databrainhq-plugin-color-gray300)}.heatMap{position:relative;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.label{white-space:nowrap}.heatMap td,.heatMap th{border-right-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--databrainhq-plugin-color-gray300);padding:.25rem;text-align:center}.heatMap thead th{position:sticky;top:0px}.heatMap thead th:first-child{left:0px;z-index:10;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.heatMap tbody th{position:sticky;left:0px;z-index:10;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tablechart{position:relative;display:flex;height:100%;padding:1rem}.tablechartWrapper{display:flex;height:100%;width:100%;flex-direction:column}.tablechartContainer{position:sticky;height:4%;width:100%;padding-left:.25rem}.tablechartTable{width:100%}.tablechartHeaderRow{position:sticky;top:0px;height:2.5rem;background-color:var(--databrainhq-plugin-color-primaryLight)}.tablechartHeaderCol{width:16rem}.tablechartHeaderCol>:not([hidden])~:not([hidden]){border-style:solid}.tablechartHeaderCol{border-left-width:1px;padding-left:1rem;padding-right:1rem}.tablechartBodyRow{height:3.5rem}.tablechartBodyCol>:not([hidden])~:not([hidden]){border-style:solid}.tablechartBodyCol{border-left-width:1px;padding-left:1rem;padding-right:1rem;text-align:center}\n";
 const TableChart = ({
   data
 }) => {
@@ -93683,18 +93429,18 @@ const TableChart = ({
     }
   }
   return /* @__PURE__ */ jsx("div", {
-    className: "h-full relative flex p-4",
+    className: styles$v.tablechart,
     children: /* @__PURE__ */ jsx("div", {
-      className: "w-full h-full flex flex-col",
+      className: styles$v.tablechartWrapper,
       children: /* @__PURE__ */ jsx("div", {
-        className: "pl-1 sticky w-full h-[4%]",
+        className: styles$v.tablechartContainer,
         children: /* @__PURE__ */ jsxs("table", {
-          className: "w-full",
+          className: styles$v.tablechartTable,
           children: [/* @__PURE__ */ jsx("thead", {
             children: /* @__PURE__ */ jsxs("tr", {
-              className: "sticky top-0 bg-[#EAEEFC] h-10",
+              className: styles$v.tablechartHeaderRow,
               children: [/* @__PURE__ */ jsx("th", {
-                className: "w-64 px-4 border-l divide-solid",
+                className: styles$v.tableChartHeaderCol,
                 scope: "col",
                 children: /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14c",
@@ -93703,7 +93449,7 @@ const TableChart = ({
                 })
               }, "num"), data == null ? void 0 : data.datasets.map((item) => {
                 return /* @__PURE__ */ jsx("th", {
-                  className: "w-64 px-4 border-l divide-solid",
+                  className: styles$v.tablechartHeaderCol,
                   scope: "col",
                   children: /* @__PURE__ */ jsx(Text, {
                     styleClass: "font-14c",
@@ -93715,9 +93461,9 @@ const TableChart = ({
             })
           }), /* @__PURE__ */ jsx("tbody", {
             children: modifiedData.map((item, i2) => /* @__PURE__ */ jsx("tr", {
-              className: "h-14",
+              className: styles$v.tablechartBodyRow,
               children: item.map((d2, index) => /* @__PURE__ */ jsx("td", {
-                className: "px-4 text-center border-l divide-solid",
+                className: styles$v.tablechartBodyCol,
                 children: /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14",
                   variant: "p",
@@ -93991,12 +93737,12 @@ const MetricChart = ({
     children: "No chart selected"
   });
 };
-const modal = "_modal_15wtw_1";
-const popup = "_popup_15wtw_9";
-const header$4 = "_header_15wtw_17";
-const headerTitle = "_headerTitle_15wtw_25";
-const content = "_content_15wtw_33";
-const footer = "_footer_15wtw_41";
+const modal = "_modal_ul4ir_1";
+const popup = "_popup_ul4ir_9";
+const header$4 = "_header_ul4ir_17";
+const headerTitle = "_headerTitle_ul4ir_25";
+const content = "_content_ul4ir_33";
+const footer = "_footer_ul4ir_41";
 var styles$u = {
   modal,
   popup,
@@ -94006,17 +93752,17 @@ var styles$u = {
   footer
 };
 var styles$t = {
-  "btn-primary": "_btn-primary_14f0q_1",
-  "btn-secondary": "_btn-secondary_14f0q_5",
-  "btn-reject": "_btn-reject_14f0q_9",
-  "btn-outlined": "_btn-outlined_14f0q_14",
-  "btn-tertiary": "_btn-tertiary_14f0q_18",
-  "btn-default": "_btn-default_14f0q_22",
-  "btn-large": "_btn-large_14f0q_25",
-  "btn-small": "_btn-small_14f0q_28",
-  "btn-xs": "_btn-xs_14f0q_31",
-  "btn-medium": "_btn-medium_14f0q_34",
-  "btn-11rem": "_btn-11rem_14f0q_38"
+  "btn-primary": "_btn-primary_1h5ze_1",
+  "btn-secondary": "_btn-secondary_1h5ze_5",
+  "btn-reject": "_btn-reject_1h5ze_9",
+  "btn-outlined": "_btn-outlined_1h5ze_14",
+  "btn-tertiary": "_btn-tertiary_1h5ze_18",
+  "btn-default": "_btn-default_1h5ze_22",
+  "btn-large": "_btn-large_1h5ze_25",
+  "btn-small": "_btn-small_1h5ze_28",
+  "btn-xs": "_btn-xs_1h5ze_31",
+  "btn-medium": "_btn-medium_1h5ze_34",
+  "btn-11rem": "_btn-11rem_1h5ze_38"
 };
 const Button = ({
   isDisabled = false,
@@ -94104,7 +93850,7 @@ const FullScreenChart = ({
     onClose: onCancel,
     headerTitle: "Chart Preview",
     children: /* @__PURE__ */ jsx("div", {
-      className: styles$v.fullscreen,
+      className: styles$w.fullscreen,
       children: chart && /* @__PURE__ */ jsx(MetricChart, {
         labels: chart.labels,
         data: chart.data,
@@ -94143,18 +93889,18 @@ const eosIconsLoading = (props) => /* @__PURE__ */ jsxs("svg", {
     })
   })]
 });
-const cardContainer = "_cardContainer_1km9m_1";
-const listHeader = "_listHeader_1km9m_9";
-const metricName = "_metricName_1km9m_17";
-const info = "_info_1km9m_25";
-const csvBtn = "_csvBtn_1km9m_33";
-const infoTooltip = "_infoTooltip_1km9m_41";
-const metricData = "_metricData_1km9m_57";
-const singleValueData = "_singleValueData_1km9m_65";
-const singleValue = "_singleValue_1km9m_65";
-const noData$1 = "_noData_1km9m_81";
-const loading = "_loading_1km9m_89";
-const fullScreen = "_fullScreen_1km9m_97";
+const cardContainer = "_cardContainer_33mfg_1";
+const listHeader = "_listHeader_33mfg_9";
+const metricName = "_metricName_33mfg_17";
+const info = "_info_33mfg_25";
+const csvBtn = "_csvBtn_33mfg_33";
+const infoTooltip = "_infoTooltip_33mfg_41";
+const metricData = "_metricData_33mfg_57";
+const singleValueData = "_singleValueData_33mfg_65";
+const singleValue = "_singleValue_33mfg_65";
+const noData$1 = "_noData_33mfg_81";
+const loading = "_loading_33mfg_89";
+const fullScreen = "_fullScreen_33mfg_97";
 var styles$s = {
   cardContainer,
   listHeader,
@@ -94169,7 +93915,246 @@ var styles$s = {
   loading,
   fullScreen
 };
-const csvlink = "_csvlink_fci6i_1";
+const fetcher = (query, variables, options2) => {
+  return async () => {
+    const res = await fetch("https://backend.usedatabrain.com/v1/graphql", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Hasura-Role": "anonymous",
+        ...options2
+      },
+      body: JSON.stringify({
+        query,
+        variables
+      })
+    });
+    const json = await res.json();
+    if (json.errors) {
+      const { message } = json.errors[0];
+      throw new Error(message);
+    }
+    return json.data;
+  };
+};
+const CreateExternalMetricDocument = `
+    mutation CreateExternalMetric($chartOptions: jsonb = "", $companyId: uuid = "", $companyIntegrationId: uuid = "", $description: String = "", $inputFields: jsonb = "", $integrationName: String = "", $metricId: String = "", $metricQuery: String = "", $name: String = "", $outputColumns: String = "", $query: String = "", $isLive: Boolean, $clientId: String = "", $isCreatedByClient: Boolean = false, $createdBy: String = "", $timeGrain: String = "", $externalDashboardIds: [externalDashboardMetrics_insert_input!] = {}, $selectedGroupBy: jsonb = [], $isEnableGroupBy: Boolean = false, $groupBy: jsonb = {}) {
+  insert_externalMetrics_one(
+    object: {chartOptions: $chartOptions, companyId: $companyId, companyIntegrationId: $companyIntegrationId, description: $description, inputFields: $inputFields, integrationName: $integrationName, metricId: $metricId, metricQuery: $metricQuery, name: $name, outputColumns: $outputColumns, query: $query, isLive: $isLive, clientId: $clientId, isCreatedByClient: $isCreatedByClient, createdBy: $createdBy, timeGrain: $timeGrain, externalDashboardMetrics: {data: $externalDashboardIds}, selectedGroupBy: $selectedGroupBy, isEnableGroupBy: $isEnableGroupBy, groupBy: $groupBy}
+  ) {
+    id
+    externalDashboardMetrics {
+      externalDashboardId
+    }
+  }
+}
+    `;
+const useCreateExternalMetricMutation = (options2) => useMutation(
+  ["CreateExternalMetric"],
+  (variables) => fetcher(CreateExternalMetricDocument, variables)(),
+  options2
+);
+const FetchColumnDataDocument = `
+    mutation FetchColumnData($companyId: String = "", $tableName: String = "", $columnName: String = "") {
+  fetchColumnData(
+    input: {columnName: $columnName, companyId: $companyId, tableName: $tableName}
+  ) {
+    data {
+      label
+      value
+    }
+    error {
+      message
+    }
+  }
+}
+    `;
+const useFetchColumnDataMutation = (options2) => useMutation(
+  ["FetchColumnData"],
+  (variables) => fetcher(
+    FetchColumnDataDocument,
+    variables
+  )(),
+  options2
+);
+const GenerateDatasetMetricsDocument = `
+    mutation GenerateDatasetMetrics($companyId: String = "", $userInputs: json = "") {
+  generateDatasetMetrics(input: {companyId: $companyId, userInputs: $userInputs}) {
+    error
+    query
+    result
+  }
+}
+    `;
+const useGenerateDatasetMetricsMutation = (options2) => useMutation(
+  ["GenerateDatasetMetrics"],
+  (variables) => fetcher(GenerateDatasetMetricsDocument, variables)(),
+  options2
+);
+const CompanyIntegrationDocument = `
+    query CompanyIntegration($companyId: uuid = "") {
+  companyIntegrations(where: {companyId: {_eq: $companyId}}) {
+    companyId
+    id
+    integrationId
+    name
+  }
+}
+    `;
+const useCompanyIntegrationQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["CompanyIntegration"] : ["CompanyIntegration", variables],
+  fetcher(
+    CompanyIntegrationDocument,
+    variables
+  ),
+  options2
+);
+const CompanySubsetTableListDocument = `
+    query CompanySubsetTableList($companyId: uuid = "") {
+  companySubsetTables(where: {companyId: {_eq: $companyId}}) {
+    tableList
+  }
+}
+    `;
+const useCompanySubsetTableListQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["CompanySubsetTableList"] : ["CompanySubsetTableList", variables],
+  fetcher(
+    CompanySubsetTableListDocument,
+    variables
+  ),
+  options2
+);
+const EmbeddedDashboardMetricsDocument = `
+    query EmbeddedDashboardMetrics($where: externalDashboardMetrics_bool_exp) {
+  externalDashboardMetrics(where: $where) {
+    externalMetricId
+    externalDashboardId
+    externalMetric {
+      chartOptions
+      clientId
+      companyId
+      companyIntegrationId
+      createdAt
+      createdBy
+      description
+      id
+      inputFields
+      integrationName
+      isCreatedByClient
+      isLive
+      metricId
+      metricQuery
+      name
+      outputColumns
+      query
+      resizeAttributes
+      timeGrain
+      updatedAt
+      selectedGroupBy
+      isEnableGroupBy
+      groupBy
+    }
+  }
+}
+    `;
+const useEmbeddedDashboardMetricsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["EmbeddedDashboardMetrics"] : ["EmbeddedDashboardMetrics", variables],
+  fetcher(EmbeddedDashboardMetricsDocument, variables),
+  options2
+);
+const GetExternalDashboardIdDocument = `
+    query GetExternalDashboardId($externalDashboardId: String = "") {
+  externalDashboards(where: {externalDashboardId: {_eq: $externalDashboardId}}) {
+    id
+    filters
+  }
+}
+    `;
+const useGetExternalDashboardIdQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["GetExternalDashboardId"] : ["GetExternalDashboardId", variables],
+  fetcher(
+    GetExternalDashboardIdDocument,
+    variables
+  ),
+  options2
+);
+const ExternalDashboardListDocument = `
+    query ExternalDashboardList($companyId: uuid = "") {
+  externalDashboards(where: {companyId: {_eq: $companyId}}) {
+    externalDashboardId
+    name
+    id
+  }
+}
+    `;
+const useExternalDashboardListQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["ExternalDashboardList"] : ["ExternalDashboardList", variables],
+  fetcher(
+    ExternalDashboardListDocument,
+    variables
+  ),
+  options2
+);
+const GuestTokenParamsDocument = `
+    query GuestTokenParams($id: uuid = "") {
+  guestTokens_by_pk(id: $id) {
+    clientId
+    companyId
+    id
+    params
+  }
+}
+    `;
+const useGuestTokenParamsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["GuestTokenParams"] : ["GuestTokenParams", variables],
+  fetcher(
+    GuestTokenParamsDocument,
+    variables
+  ),
+  options2
+);
+const PreviewTableDocument = `
+    mutation PreviewTable($companyId: String = "", $tableName: String = "", $limit: Int = 10) {
+  previewTable(
+    input: {companyId: $companyId, tableName: $tableName, limit: $limit}
+  ) {
+    data {
+      data
+      isError
+      name
+    }
+    error {
+      message
+    }
+  }
+}
+    `;
+const usePreviewTableMutation = (options2) => useMutation(
+  ["PreviewTable"],
+  (variables) => fetcher(
+    PreviewTableDocument,
+    variables
+  )(),
+  options2
+);
+const QueryExternalMetricDocument = `
+    query QueryExternalMetric($id: String = "", $clientId: String = "", $filterValues: json = "", $globalFilters: json = []) {
+  externalMetricQuery(
+    input: {externalMetricId: $id, clientId: $clientId, filterValues: $filterValues, globalFilters: $globalFilters}
+  ) {
+    data
+  }
+}
+    `;
+const useQueryExternalMetricQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["QueryExternalMetric"] : ["QueryExternalMetric", variables],
+  fetcher(
+    QueryExternalMetricDocument,
+    variables
+  ),
+  options2
+);
+const csvlink = "_csvlink_kxdgj_1";
 var styles$r = {
   csvlink
 };
@@ -94651,23 +94636,18 @@ const SingleValueCard = ({
 };
 const GridLayout = reactGridLayout.exports.WidthProvider(reactGridLayout.exports.Responsive);
 const ExternalMetricList = ({
+  chartColors,
   globalFilters,
   client,
-  company,
   isLiveMode,
   params,
   externalDashboardMetrics,
-  isMetricListLoading
+  isMetricListLoading,
+  breakpoint,
+  layoutCols
 }) => {
   const [isFullScreen, setFullScreen] = useState(false);
   const [fullScreenChart, setFullScreenChart] = useState();
-  const {
-    data: themeData
-  } = useGetExternalDashboardClientThemeQuery({
-    companyId: company,
-    clientId: client
-  });
-  const theme2 = useMemo(() => themeData == null ? void 0 : themeData.externalDashboardThemes[0], [themeData == null ? void 0 : themeData.externalDashboardThemes[0]]);
   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);
@@ -94679,7 +94659,7 @@ const ExternalMetricList = ({
   return /* @__PURE__ */ jsx(Fragment, {
     children: metricsList.length ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        className: styles$x["MetricList-container"],
+        className: styles$y["MetricList-container"],
         children: /* @__PURE__ */ jsx(GridLayout, {
           layouts: {
             lg: metricsList.map(({
@@ -94701,14 +94681,14 @@ const ExternalMetricList = ({
           isDroppable: false,
           rowHeight: 30,
           width: 1200,
-          breakpoints: {
+          breakpoints: breakpoint != null ? breakpoint : {
             lg: 1200,
             md: 996,
             sm: 768,
             xs: 480,
             xxs: 0
           },
-          cols: {
+          cols: layoutCols != null ? layoutCols : {
             lg: 12,
             md: 10,
             sm: 6,
@@ -94716,7 +94696,7 @@ const ExternalMetricList = ({
             xxs: 2
           },
           children: metricsList.map((metricItem) => /* @__PURE__ */ jsx("div", {
-            className: styles$x["MetricList-wrapper"],
+            className: styles$y["MetricList-wrapper"],
             children: metricItem.chartOptions.chartType === "single value" ? /* @__PURE__ */ jsx(SingleValueCard, {
               metricItem,
               client,
@@ -94730,7 +94710,7 @@ const ExternalMetricList = ({
               },
               client,
               param: params == null ? void 0 : params.find((obj) => obj.metricId === metricItem.metricId),
-              colors: theme2 == null ? void 0 : theme2.colors,
+              colors: chartColors,
               globalFilters
             })
           }, metricItem.id))
@@ -94742,9 +94722,9 @@ const ExternalMetricList = ({
       })]
     }) : /* @__PURE__ */ jsx(Fragment, {
       children: !isMetricListLoading ? /* @__PURE__ */ jsx("div", {
-        className: styles$x["noMetric-container"],
+        className: styles$y["noMetric-container"],
         children: /* @__PURE__ */ jsx("div", {
-          className: styles$x["noMetric-wrapper"],
+          className: styles$y["noMetric-wrapper"],
           children: /* @__PURE__ */ jsx(Text, {
             variant: "h2",
             styleClass: "primary",
@@ -94752,7 +94732,7 @@ const ExternalMetricList = ({
           })
         })
       }) : /* @__PURE__ */ jsx("div", {
-        className: styles$x["alt-container"],
+        className: styles$y["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -94766,11 +94746,11 @@ const ExternalMetricList = ({
 };
 var ExternalMetricList$1 = React__default.memo(ExternalMetricList);
 var styles$q = {
-  "header-container": "_header-container_2cp30_1",
-  "btn-container": "_btn-container_2cp30_5",
-  "back-btn": "_back-btn_2cp30_9",
-  "sql-btn": "_sql-btn_2cp30_13",
-  "save-btn": "_save-btn_2cp30_17"
+  "header-container": "_header-container_pimqu_1",
+  "btn-container": "_btn-container_pimqu_5",
+  "back-btn": "_back-btn_pimqu_9",
+  "sql-btn": "_sql-btn_pimqu_13",
+  "save-btn": "_save-btn_pimqu_17"
 };
 const akarIconsArrowLeft = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
@@ -94858,10 +94838,14 @@ const Header = ({
     })]
   });
 };
+const floatingCreateButton = "_floatingCreateButton_6ovk2_13";
+const floatingCreateButtonIcon = "_floatingCreateButtonIcon_6ovk2_17";
 var styles$p = {
-  "create-btn": "_create-btn_fy7jc_1",
-  "modal-container": "_modal-container_fy7jc_5",
-  "query-modal": "_query-modal_fy7jc_9"
+  "create-btn": "_create-btn_6ovk2_1",
+  "modal-container": "_modal-container_6ovk2_5",
+  "query-modal": "_query-modal_6ovk2_9",
+  floatingCreateButton,
+  floatingCreateButtonIcon
 };
 const container$d = "_container_hveoi_1";
 const header$3 = "_header_hveoi_5";
@@ -94874,19 +94858,19 @@ var styles$o = {
   "col-container": "_col-container_hveoi_13",
   column
 };
-const container$c = "_container_1h5ex_1";
-const wrapper$2 = "_wrapper_1h5ex_5";
-const label$3 = "_label_1h5ex_9";
-const floatingLabel = "_floatingLabel_1h5ex_13";
-const dropdown$1 = "_dropdown_1h5ex_17";
-const options = "_options_1h5ex_21";
-const checkedOption = "_checkedOption_1h5ex_25";
-const option$1 = "_option_1h5ex_21";
-const icon$1 = "_icon_1h5ex_33";
-const text$1 = "_text_1h5ex_37";
-const floatingText = "_floatingText_1h5ex_41";
-const search = "_search_1h5ex_45";
-const loadMore$1 = "_loadMore_1h5ex_49";
+const container$c = "_container_np4zl_1";
+const wrapper$2 = "_wrapper_np4zl_5";
+const label$3 = "_label_np4zl_9";
+const floatingLabel = "_floatingLabel_np4zl_13";
+const dropdown$1 = "_dropdown_np4zl_17";
+const options = "_options_np4zl_21";
+const checkedOption = "_checkedOption_np4zl_25";
+const option$1 = "_option_np4zl_21";
+const icon$1 = "_icon_np4zl_33";
+const text$1 = "_text_np4zl_37";
+const floatingText = "_floatingText_np4zl_41";
+const search = "_search_np4zl_45";
+const loadMore$1 = "_loadMore_np4zl_49";
 var styles$n = {
   container: container$c,
   wrapper: wrapper$2,
@@ -96368,8 +96352,8 @@ function useForm(props = {}) {
   return _formControl.current;
 }
 var styles$m = {
-  "searchTab-container": "_searchTab-container_10vte_1",
-  "searchTab-input": "_searchTab-input_10vte_5"
+  "searchTab-container": "_searchTab-container_1peao_1",
+  "searchTab-input": "_searchTab-input_1peao_5"
 };
 const SearchTab = ({
   setSearchKeyword,
@@ -96834,7 +96818,7 @@ const Dataset = ({
       }), /* @__PURE__ */ jsx("div", {
         className: styles$o["col-container"],
         children: columnList.map(({
-          name,
+          as,
           datatype
         }) => /* @__PURE__ */ jsxs("div", {
           className: styles$o.column,
@@ -96843,26 +96827,26 @@ const Dataset = ({
           }), /* @__PURE__ */ jsx(Text, {
             variant: "p",
             styleClass: "font-14",
-            children: name
+            children: as
           })]
-        }, name))
+        }, as))
       })]
     })]
   });
 };
 var Dataset$1 = React__default.memo(Dataset);
-const container$b = "_container_rnpgp_1";
-const header$2 = "_header_rnpgp_7";
-const headerText = "_headerText_rnpgp_13";
-const crossIcon$1 = "_crossIcon_rnpgp_19";
-const form$3 = "_form_rnpgp_25";
-const inputWrapper = "_inputWrapper_rnpgp_31";
-const input$2 = "_input_rnpgp_31";
-const selectWrapper = "_selectWrapper_rnpgp_43";
-const select = "_select_rnpgp_43";
-const series = "_series_rnpgp_55";
-const seriesWrapper = "_seriesWrapper_rnpgp_61";
-const valueLabelWrapper = "_valueLabelWrapper_rnpgp_67";
+const container$b = "_container_13mal_1";
+const header$2 = "_header_13mal_7";
+const headerText = "_headerText_13mal_13";
+const crossIcon$1 = "_crossIcon_13mal_19";
+const form$3 = "_form_13mal_25";
+const inputWrapper = "_inputWrapper_13mal_31";
+const input$2 = "_input_13mal_31";
+const selectWrapper = "_selectWrapper_13mal_43";
+const select = "_select_13mal_43";
+const series = "_series_13mal_55";
+const seriesWrapper = "_seriesWrapper_13mal_61";
+const valueLabelWrapper = "_valueLabelWrapper_13mal_67";
 var styles$l = {
   container: container$b,
   header: header$2,
@@ -96877,9 +96861,9 @@ var styles$l = {
   seriesWrapper,
   valueLabelWrapper
 };
-const tab = "_tab_1afsd_1";
-const button$5 = "_button_1afsd_7";
-const activeTab = "_activeTab_1afsd_15";
+const tab = "_tab_ksqsk_1";
+const button$5 = "_button_ksqsk_7";
+const activeTab = "_activeTab_ksqsk_15";
 var styles$k = {
   tab,
   button: button$5,
@@ -96901,18 +96885,18 @@ const Tab = ({
     }))
   });
 };
-const label$2 = "_label_qyktv_1";
-const checkboxLabel = "_checkboxLabel_qyktv_13";
-const input$1 = "_input_qyktv_7";
-const checkboxField = "_checkboxField_qyktv_25";
+const label$2 = "_label_1xzvi_1";
+const checkboxLabel = "_checkboxLabel_1xzvi_13";
+const input$1 = "_input_1xzvi_7";
+const checkboxField = "_checkboxField_1xzvi_25";
 var styles$j = {
   label: label$2,
-  "inputField-container": "_inputField-container_qyktv_7",
+  "inputField-container": "_inputField-container_1xzvi_7",
   checkboxLabel,
   input: input$1,
   checkboxField
 };
-const error$3 = "_error_1oskr_1";
+const error$3 = "_error_1csa7_1";
 var styles$i = {
   error: error$3
 };
@@ -97855,37 +97839,37 @@ let Pe = "div", ie = S$1.RenderStrategy, oe = C$1(function(e$12, s2) {
   let n2 = useContext(A) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(J, { ref: s$12, ...e2 }) : React__default.createElement(oe, { ref: s$12, ...e2 }));
 }), Je = Object.assign(J, { Child: ye, Root: J });
-const listBoxButton = "_listBoxButton_1e3pa_5";
-const selectedOptionText = "_selectedOptionText_1e3pa_17";
-const transitionDiv = "_transitionDiv_1e3pa_21";
-const listboxButtonWrapper = "_listboxButtonWrapper_1e3pa_25";
-const arrowicon = "_arrowicon_1e3pa_28";
-const leave$1 = "_leave_1e3pa_31";
-const leaveFrom$1 = "_leaveFrom_1e3pa_34";
-const leaveTo$1 = "_leaveTo_1e3pa_37";
-const notAvailable = "_notAvailable_1e3pa_40";
-const option = "_option_1e3pa_43";
-const activeOption = "_activeOption_1e3pa_46";
-const optionSelected = "_optionSelected_1e3pa_49";
-const inactiveOption = "_inactiveOption_1e3pa_52";
-const optionLabel = "_optionLabel_1e3pa_55";
-const optionSubLabel = "_optionSubLabel_1e3pa_58";
-const selectedLabel = "_selectedLabel_1e3pa_61";
-const nonselectedLabel = "_nonselectedLabel_1e3pa_64";
-const check = "_check_1e3pa_67";
-const checkActive = "_checkActive_1e3pa_70";
-const checkInactive = "_checkInactive_1e3pa_73";
-const checkIcon$1 = "_checkIcon_1e3pa_76";
-const checkIconSelected = "_checkIconSelected_1e3pa_79";
-const checkIconUnselected = "_checkIconUnselected_1e3pa_82";
-const loadMore = "_loadMore_1e3pa_85";
-const selectedList = "_selectedList_1e3pa_88";
-const selectedListItem = "_selectedListItem_1e3pa_91";
+const listBoxButton = "_listBoxButton_syk7m_5";
+const selectedOptionText = "_selectedOptionText_syk7m_17";
+const transitionDiv = "_transitionDiv_syk7m_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_syk7m_25";
+const arrowicon = "_arrowicon_syk7m_28";
+const leave$1 = "_leave_syk7m_31";
+const leaveFrom$1 = "_leaveFrom_syk7m_34";
+const leaveTo$1 = "_leaveTo_syk7m_37";
+const notAvailable = "_notAvailable_syk7m_40";
+const option = "_option_syk7m_43";
+const activeOption = "_activeOption_syk7m_46";
+const optionSelected = "_optionSelected_syk7m_49";
+const inactiveOption = "_inactiveOption_syk7m_52";
+const optionLabel = "_optionLabel_syk7m_55";
+const optionSubLabel = "_optionSubLabel_syk7m_58";
+const selectedLabel = "_selectedLabel_syk7m_61";
+const nonselectedLabel = "_nonselectedLabel_syk7m_64";
+const check = "_check_syk7m_67";
+const checkActive = "_checkActive_syk7m_70";
+const checkInactive = "_checkInactive_syk7m_73";
+const checkIcon$1 = "_checkIcon_syk7m_76";
+const checkIconSelected = "_checkIconSelected_syk7m_79";
+const checkIconUnselected = "_checkIconUnselected_syk7m_82";
+const loadMore = "_loadMore_syk7m_85";
+const selectedList = "_selectedList_syk7m_88";
+const selectedListItem = "_selectedListItem_syk7m_91";
 var style = {
-  "listBox-label": "_listBox-label_1e3pa_1",
-  "listBoxButton-container": "_listBoxButton-container_1e3pa_5",
+  "listBox-label": "_listBox-label_syk7m_1",
+  "listBoxButton-container": "_listBoxButton-container_syk7m_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_1e3pa_13",
+  "listBox-option": "_listBox-option_syk7m_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -98442,15 +98426,15 @@ const ChartConfigure = ({
     })]
   });
 };
-const chartButtonContainer$1 = "_chartButtonContainer_xpqpb_9";
-const chartButtons$1 = "_chartButtons_xpqpb_17";
-const chartTypesButton = "_chartTypesButton_xpqpb_25";
-const button$4 = "_button_xpqpb_33";
-const propertyButton = "_propertyButton_xpqpb_41";
-const settings = "_settings_xpqpb_49";
-const crossIcon = "_crossIcon_xpqpb_57";
+const chartButtonContainer$1 = "_chartButtonContainer_1lfk7_9";
+const chartButtons$1 = "_chartButtons_1lfk7_17";
+const chartTypesButton = "_chartTypesButton_1lfk7_25";
+const button$4 = "_button_1lfk7_33";
+const propertyButton = "_propertyButton_1lfk7_41";
+const settings = "_settings_1lfk7_49";
+const crossIcon = "_crossIcon_1lfk7_57";
 var styles$h = {
-  "chartButton-header": "_chartButton-header_xpqpb_1",
+  "chartButton-header": "_chartButton-header_1lfk7_1",
   chartButtonContainer: chartButtonContainer$1,
   chartButtons: chartButtons$1,
   chartTypesButton,
@@ -99184,35 +99168,35 @@ const ChartSettings = ({
     })]
   });
 };
-const searchCommand$1 = "_searchCommand_g94x7_9";
-const chartText = "_chartText_g94x7_25";
-const charts = "_charts_g94x7_33";
-const metricChart = "_metricChart_g94x7_41";
-const metricChartEmpty = "_metricChartEmpty_g94x7_49";
-const fullQuery = "_fullQuery_g94x7_73";
-const noQuery = "_noQuery_g94x7_81";
-const chartButtonContainer = "_chartButtonContainer_g94x7_105";
-const searchWrapper = "_searchWrapper_g94x7_113";
-const searchIcon = "_searchIcon_g94x7_121";
-const chartConfigure = "_chartConfigure_g94x7_129";
-const chartSettings = "_chartSettings_g94x7_137";
-const labels = "_labels_g94x7_145";
-const chartButtons = "_chartButtons_g94x7_153";
-const chartButton = "_chartButton_g94x7_97";
+const searchCommand$1 = "_searchCommand_jk2ki_9";
+const chartText = "_chartText_jk2ki_25";
+const charts = "_charts_jk2ki_33";
+const metricChart = "_metricChart_jk2ki_41";
+const metricChartEmpty = "_metricChartEmpty_jk2ki_49";
+const fullQuery = "_fullQuery_jk2ki_73";
+const noQuery = "_noQuery_jk2ki_81";
+const chartButtonContainer = "_chartButtonContainer_jk2ki_105";
+const searchWrapper = "_searchWrapper_jk2ki_113";
+const searchIcon = "_searchIcon_jk2ki_121";
+const chartConfigure = "_chartConfigure_jk2ki_129";
+const chartSettings = "_chartSettings_jk2ki_137";
+const labels = "_labels_jk2ki_145";
+const chartButtons = "_chartButtons_jk2ki_153";
+const chartButton = "_chartButton_jk2ki_97";
 var styles$f = {
-  "outputTab-header": "_outputTab-header_g94x7_1",
+  "outputTab-header": "_outputTab-header_jk2ki_1",
   searchCommand: searchCommand$1,
-  "chartTab-container": "_chartTab-container_g94x7_17",
+  "chartTab-container": "_chartTab-container_jk2ki_17",
   chartText,
   charts,
   metricChart,
   metricChartEmpty,
-  "chartTab-wrapper": "_chartTab-wrapper_g94x7_57",
-  "chartTab-wrapper-head": "_chartTab-wrapper-head_g94x7_65",
+  "chartTab-wrapper": "_chartTab-wrapper_jk2ki_57",
+  "chartTab-wrapper-head": "_chartTab-wrapper-head_jk2ki_65",
   fullQuery,
   noQuery,
-  "tableTab-header": "_tableTab-header_g94x7_89",
-  "chartButton-header": "_chartButton-header_g94x7_97",
+  "tableTab-header": "_tableTab-header_jk2ki_89",
+  "chartButton-header": "_chartButton-header_jk2ki_97",
   chartButtonContainer,
   searchWrapper,
   searchIcon,
@@ -99465,17 +99449,19 @@ var styles$e = {
   text,
   table: table$3
 };
-const container$8 = "_container_m7ksd_1";
-const table$2 = "_table_m7ksd_9";
-const tableHead = "_tableHead_m7ksd_17";
-const tableHeadCol$1 = "_tableHeadCol_m7ksd_25";
-const tableRowCol$1 = "_tableRowCol_m7ksd_33";
-const empty = "_empty_m7ksd_41";
-const error$2 = "_error_m7ksd_49";
+const container$8 = "_container_1uho5_1";
+const table$2 = "_table_1uho5_9";
+const tableHead = "_tableHead_1uho5_17";
+const tableRow$1 = "_tableRow_1uho5_25";
+const tableHeadCol$1 = "_tableHeadCol_1uho5_33";
+const tableRowCol$1 = "_tableRowCol_1uho5_41";
+const empty = "_empty_1uho5_49";
+const error$2 = "_error_1uho5_57";
 var styles$d = {
   container: container$8,
   table: table$2,
   tableHead,
+  tableRow: tableRow$1,
   tableHeadCol: tableHeadCol$1,
   tableRowCol: tableRowCol$1,
   empty,
@@ -99492,6 +99478,7 @@ const MetricTable = ({
       children: [/* @__PURE__ */ jsx("thead", {
         className: styles$d.tableHead,
         children: /* @__PURE__ */ jsx("tr", {
+          className: styles$d.tableRow,
           children: Object.keys(data[0]).map((item) => {
             return /* @__PURE__ */ jsx("th", {
               className: styles$d.tableHeadCol,
@@ -99550,36 +99537,36 @@ const InputTables = ({
     })
   });
 };
-const container$7 = "_container_1nrs1_1";
-const header$1 = "_header_1nrs1_5";
-const tabButton$1 = "_tabButton_1nrs1_16";
-const selectedTab = "_selectedTab_1nrs1_19";
-const table$1 = "_table_1nrs1_22";
+const container$7 = "_container_12jmm_1";
+const header$1 = "_header_12jmm_5";
+const tabButton$1 = "_tabButton_12jmm_16";
+const selectedTab = "_selectedTab_12jmm_19";
+const table$1 = "_table_12jmm_22";
 var styles$c = {
   container: container$7,
   header: header$1,
-  "text-container": "_text-container_1nrs1_9",
-  "btn-container": "_btn-container_1nrs1_13",
+  "text-container": "_text-container_12jmm_9",
+  "btn-container": "_btn-container_12jmm_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
 };
-const tableData = "_tableData_1wybe_7";
-const tableHeadCol = "_tableHeadCol_1wybe_13";
-const tableRow = "_tableRow_1wybe_19";
-const tableRowCol = "_tableRowCol_1wybe_25";
-const row = "_row_1wybe_31";
-const container$6 = "_container_1wybe_37";
-const table = "_table_1wybe_1";
-const previewTable = "_previewTable_1wybe_49";
-const preview = "_preview_1wybe_49";
-const previewText = "_previewText_1wybe_61";
-const noData = "_noData_1wybe_67";
-const error$1 = "_error_1wybe_73";
-const errorMsg = "_errorMsg_1wybe_79";
-const tableIcon = "_tableIcon_1wybe_85";
+const tableData = "_tableData_1j4gc_7";
+const tableHeadCol = "_tableHeadCol_1j4gc_13";
+const tableRow = "_tableRow_1j4gc_19";
+const tableRowCol = "_tableRowCol_1j4gc_25";
+const row = "_row_1j4gc_31";
+const container$6 = "_container_1j4gc_37";
+const table = "_table_1j4gc_1";
+const previewTable = "_previewTable_1j4gc_49";
+const preview = "_preview_1j4gc_49";
+const previewText = "_previewText_1j4gc_61";
+const noData = "_noData_1j4gc_67";
+const error$1 = "_error_1j4gc_73";
+const errorMsg = "_errorMsg_1j4gc_79";
+const tableIcon = "_tableIcon_1j4gc_85";
 var styles$b = {
-  "table-loader-container": "_table-loader-container_1wybe_1",
+  "table-loader-container": "_table-loader-container_1j4gc_1",
   tableData,
   tableHeadCol,
   tableRow,
@@ -99725,7 +99712,7 @@ const TableTab = ({
         }), /* @__PURE__ */ jsx(Button, {
           type: "button",
           variant: "custom",
-          className: `${styles$c.tabButton} ${selectedTab2 === INPUT_TABLE && styles$c.selectedTab}`,
+          className: `${styles$c.tabButton} ${selectedTab2 === OUTPUT_TABLE && styles$c.selectedTab}`,
           onClick: () => setSelectedTab(OUTPUT_TABLE),
           children: "Output Table"
         })]
@@ -99742,13 +99729,13 @@ const TableTab = ({
     })]
   });
 };
-const wrapper = "_wrapper_k8yqf_9";
-const searchCommand = "_searchCommand_k8yqf_12";
-const tabButton = "_tabButton_k8yqf_15";
-const tabActive = "_tabActive_k8yqf_18";
+const wrapper = "_wrapper_8x5tf_9";
+const searchCommand = "_searchCommand_8x5tf_12";
+const tabButton = "_tabButton_8x5tf_15";
+const tabActive = "_tabActive_8x5tf_18";
 var styles$a = {
-  "main-container": "_main-container_k8yqf_1",
-  "outputTab-header": "_outputTab-header_k8yqf_5",
+  "main-container": "_main-container_8x5tf_1",
+  "outputTab-header": "_outputTab-header_8x5tf_5",
   wrapper,
   searchCommand,
   tabButton,
@@ -99866,26 +99853,26 @@ const MetricOutput = ({
     })]
   });
 };
-const group$1 = "_group_1p48k_1";
-const tooltipWrapper = "_tooltipWrapper_1p48k_37";
-const tooltip = "_tooltip_1p48k_37";
-const dropdown = "_dropdown_1p48k_49";
-const filterDropdown$1 = "_filterDropdown_1p48k_53";
-const filterValues = "_filterValues_1p48k_57";
-const columnText = "_columnText_1p48k_61";
-const disabled = "_disabled_1p48k_65";
-const checkIcon = "_checkIcon_1p48k_69";
-const generateButton = "_generateButton_1p48k_73";
+const group$1 = "_group_vmreb_1";
+const tooltipWrapper = "_tooltipWrapper_vmreb_37";
+const tooltip = "_tooltip_vmreb_37";
+const dropdown = "_dropdown_vmreb_49";
+const filterDropdown$1 = "_filterDropdown_vmreb_53";
+const filterValues = "_filterValues_vmreb_57";
+const columnText = "_columnText_vmreb_61";
+const disabled = "_disabled_vmreb_65";
+const checkIcon = "_checkIcon_vmreb_69";
+const generateButton = "_generateButton_vmreb_73";
 var styles$9 = {
-  "form-container": "_form-container_1p48k_1",
-  "field-container": "_field-container_1p48k_5",
-  "field-label": "_field-label_1p48k_9",
-  "field-wrapper": "_field-wrapper_1p48k_13",
-  "field-inner-container": "_field-inner-container_1p48k_17",
-  "field-value": "_field-value_1p48k_21",
-  "field-add-btn": "_field-add-btn_1p48k_25",
-  "field-value-container": "_field-value-container_1p48k_29",
-  "field-prompt": "_field-prompt_1p48k_33",
+  "form-container": "_form-container_vmreb_1",
+  "field-container": "_field-container_vmreb_5",
+  "field-label": "_field-label_vmreb_9",
+  "field-wrapper": "_field-wrapper_vmreb_13",
+  "field-inner-container": "_field-inner-container_vmreb_17",
+  "field-value": "_field-value_vmreb_21",
+  "field-add-btn": "_field-add-btn_vmreb_25",
+  "field-value-container": "_field-value-container_vmreb_29",
+  "field-prompt": "_field-prompt_vmreb_33",
   group: group$1,
   tooltipWrapper,
   tooltip,
@@ -99897,13 +99884,13 @@ var styles$9 = {
   checkIcon,
   generateButton
 };
-const button$3 = "_button_1qsdd_1";
-const menu$2 = "_menu_1qsdd_7";
-const inputLabel = "_inputLabel_1qsdd_13";
-const input = "_input_1qsdd_13";
-const menuContainer$1 = "_menuContainer_1qsdd_25";
-const icon = "_icon_1qsdd_31";
-const container$5 = "_container_1qsdd_37";
+const button$3 = "_button_1qzqi_1";
+const menu$2 = "_menu_1qzqi_7";
+const inputLabel = "_inputLabel_1qzqi_13";
+const input = "_input_1qzqi_13";
+const menuContainer$1 = "_menuContainer_1qzqi_25";
+const icon = "_icon_1qzqi_31";
+const container$5 = "_container_1qzqi_37";
 var styles$8 = {
   button: button$3,
   menu: menu$2,
@@ -99913,22 +99900,22 @@ var styles$8 = {
   icon,
   container: container$5
 };
-const container$4 = "_container_1td7j_1";
-const popover = "_popover_1td7j_9";
-const button$2 = "_button_1td7j_17";
-const buttonOpen = "_buttonOpen_1td7j_25";
-const menu$1 = "_menu_1td7j_33";
-const enter = "_enter_1td7j_41";
-const enterFrom = "_enterFrom_1td7j_49";
-const enterTo = "_enterTo_1td7j_57";
-const leave = "_leave_1td7j_65";
-const leaveFrom = "_leaveFrom_1td7j_73";
-const leaveTo = "_leaveTo_1td7j_81";
-const center = "_center_1td7j_89";
-const top = "_top_1td7j_97";
-const bottom = "_bottom_1td7j_105";
-const left = "_left_1td7j_113";
-const right = "_right_1td7j_121";
+const container$4 = "_container_1qflp_1";
+const popover = "_popover_1qflp_9";
+const button$2 = "_button_1qflp_17";
+const buttonOpen = "_buttonOpen_1qflp_25";
+const menu$1 = "_menu_1qflp_33";
+const enter = "_enter_1qflp_41";
+const enterFrom = "_enterFrom_1qflp_49";
+const enterTo = "_enterTo_1qflp_57";
+const leave = "_leave_1qflp_65";
+const leaveFrom = "_leaveFrom_1qflp_73";
+const leaveTo = "_leaveTo_1qflp_81";
+const center = "_center_1qflp_89";
+const top = "_top_1qflp_97";
+const bottom = "_bottom_1qflp_105";
+const left = "_left_1qflp_113";
+const right = "_right_1qflp_121";
 var styles$7 = {
   container: container$4,
   popover,
@@ -99946,18 +99933,18 @@ var styles$7 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_1td7j_129",
-  "right-top-end": "_right-top-end_1td7j_137",
-  "left-bottom-end": "_left-bottom-end_1td7j_145",
-  "right-bottom-end": "_right-bottom-end_1td7j_153",
-  "top-left": "_top-left_1td7j_161",
-  "top-right": "_top-right_1td7j_169",
-  "bottom-left": "_bottom-left_1td7j_177",
-  "bottom-right": "_bottom-right_1td7j_185",
-  "left-top": "_left-top_1td7j_129",
-  "left-bottom": "_left-bottom_1td7j_145",
-  "right-top": "_right-top_1td7j_137",
-  "right-bottom": "_right-bottom_1td7j_153"
+  "left-top-end": "_left-top-end_1qflp_129",
+  "right-top-end": "_right-top-end_1qflp_137",
+  "left-bottom-end": "_left-bottom-end_1qflp_145",
+  "right-bottom-end": "_right-bottom-end_1qflp_153",
+  "top-left": "_top-left_1qflp_161",
+  "top-right": "_top-right_1qflp_169",
+  "bottom-left": "_bottom-left_1qflp_177",
+  "bottom-right": "_bottom-right_1qflp_185",
+  "left-top": "_left-top_1qflp_129",
+  "left-bottom": "_left-bottom_1qflp_145",
+  "right-top": "_right-top_1qflp_137",
+  "right-bottom": "_right-bottom_1qflp_153"
 };
 const PopoverMenu = ({
   className = "",
@@ -100441,7 +100428,7 @@ const MetricForm = ({
     if (dateTimeColumnList.length) {
       setTimeColumn({
         value: dateTimeColumnList[0].name,
-        label: dateTimeColumnList[0].name
+        label: dateTimeColumnList[0].as
       });
     } else {
       setTimeColumn({
@@ -100544,10 +100531,11 @@ const MetricForm = ({
             onChange: setTimeColumn,
             selectedOption: timeColumn,
             options: dateTimeColumnList.map(({
-              name
+              name,
+              as
             }) => ({
               value: name,
-              label: name
+              label: as
             })),
             isDisabled: isDisableTimeColumn,
             labelVariant: "static",
@@ -100640,8 +100628,8 @@ const MetricForm = ({
                 isDisabled: !metricAggregate.value || !metricColumn.value,
                 onClick: () => {
                   setMetrics((prev) => [...prev, {
-                    value: `${metricAggregate.value}(${isBigQuery ? `${metricColumn.value}` : isMongoDb ? `\`${metricColumn.value}\`` : `"${metricColumn.value}"`})`,
-                    as: isBigQuery ? aliasValue || `_result` : aliasValue || `${metricAggregate.value}(${metricColumn.value})`
+                    value: `${metricAggregate.value}(${isBigQuery || isMySql ? `${metricColumn.value}` : isMongoDb ? `\`${metricColumn.value}\`` : `"${metricColumn.value}"`})`,
+                    as: isBigQuery ? aliasValue || `_result` : aliasValue || `${metricAggregate.value}(${metricColumn.label})`
                   }]);
                   setOpenMetric(false);
                 },
@@ -100731,7 +100719,7 @@ const MetricForm = ({
                   if (!columns.find((c2) => c2.as === aliasValue))
                     setColumns((prev) => [...prev, {
                       value: `${column2.value}`,
-                      as: aliasValue || `${column2.value}`
+                      as: aliasValue || `${column2.label}`
                     }]);
                   setOpenColumn(false);
                 },
@@ -100917,6 +100905,7 @@ const MetricForm = ({
       className: styles$9.generateButton,
       isDisabled: isGeneratingDataset || isDisableGenerate,
       onClick: () => {
+        var _a2, _b2, _c2;
         setError("");
         setLoading(true);
         setData([]);
@@ -100928,8 +100917,26 @@ const MetricForm = ({
           companyId,
           userInputs: {
             columns: columns.map((c2) => isBigQuery || isMySql ? `${c2.value} AS ${c2.as} ` : isMongoDb ? `\`${c2.value}\` AS "${c2.as}"` : `"${c2.value}" AS "${c2.as}"`),
-            dimensions: isBigQuery || isMySql ? selectedDimensions : isMongoDb ? selectedDimensions.map((d2) => `\`${d2}\``) : selectedDimensions.map((d2) => `"${d2}"`),
-            metrics: metrics.map((m2) => isBigQuery || isMySql ? `${m2.value} AS ${m2.as}` : `${m2.value} AS "${m2.as}"`),
+            dimensions: isBigQuery || isMySql ? selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: (_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }) : isMongoDb ? selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: `\`${(_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value}\``,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }) : selectedDimensions.map((d2) => {
+              var _a3, _b3;
+              return {
+                name: `"${(_a3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _a3.value}"`,
+                as: (_b3 = columnList.find((c2) => c2.value === d2)) == null ? void 0 : _b3.label
+              };
+            }),
+            metrics: metrics.map((m2) => isBigQuery ? `${m2.value} AS ${m2.as}` : `${m2.value} AS "${m2.as}"`),
             sort: sort2,
             isSortDescending,
             filters: filters2,
@@ -100937,16 +100944,25 @@ const MetricForm = ({
             rowLimit: rowLimit.value,
             timeFilter: {
               filter: timeGrain,
-              column: isBigQuery || isMySql ? timeColumn.value : isMongoDb ? `\`${timeColumn.value}\`` : `"${timeColumn.value}"`,
+              column: isBigQuery || isMySql ? {
+                name: timeColumn.value,
+                as: (_a2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _a2.label
+              } : isMongoDb ? {
+                name: `\`${timeColumn.value}\``,
+                as: (_b2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _b2.label
+              } : {
+                name: `"${timeColumn.value}"`,
+                as: (_c2 = columnList.find((c2) => c2.value === timeColumn.value)) == null ? void 0 : _c2.label
+              },
               isInclude: isIncludeTime
             }
           }
         }, {
           onSuccess(data) {
-            var _a2, _b2, _c2;
-            const error2 = (_a2 = data.generateDatasetMetrics) == null ? void 0 : _a2.error;
-            const result = (_b2 = data.generateDatasetMetrics) == null ? void 0 : _b2.result;
-            const outputQuery = (_c2 = data.generateDatasetMetrics) == null ? void 0 : _c2.query;
+            var _a3, _b3, _c3;
+            const error2 = (_a3 = data.generateDatasetMetrics) == null ? void 0 : _a3.error;
+            const result = (_b3 = data.generateDatasetMetrics) == null ? void 0 : _b3.result;
+            const outputQuery = (_c3 = data.generateDatasetMetrics) == null ? void 0 : _c3.query;
             if (error2 || generateError) {
               setError(error2.message || SOMETHING_WENT_WRONG);
               setLoading(false);
@@ -100967,10 +100983,10 @@ const MetricForm = ({
   });
 };
 var MetricForm$1 = React__default.memo(MetricForm);
-const container$3 = "_container_n3hil_1";
-const header = "_header_n3hil_5";
-const enableGroupBy = "_enableGroupBy_n3hil_8";
-const enableGroupButton = "_enableGroupButton_n3hil_11";
+const container$3 = "_container_7zhjn_1";
+const header = "_header_7zhjn_5";
+const enableGroupBy = "_enableGroupBy_7zhjn_8";
+const enableGroupButton = "_enableGroupButton_7zhjn_11";
 var styles$6 = {
   container: container$3,
   header,
@@ -101018,13 +101034,13 @@ const ConstructMetric = ({
   });
 };
 var ConstructMetric$1 = React__default.memo(ConstructMetric);
-const form$1 = "_form_2rli9_1";
-const container$2 = "_container_2rli9_7";
-const field = "_field_2rli9_13";
-const fieldLabel = "_fieldLabel_2rli9_19";
-const save = "_save_2rli9_25";
-const cancel = "_cancel_2rli9_31";
-const error = "_error_2rli9_37";
+const form$1 = "_form_qtwuf_1";
+const container$2 = "_container_qtwuf_7";
+const field = "_field_qtwuf_13";
+const fieldLabel = "_fieldLabel_qtwuf_19";
+const save = "_save_qtwuf_25";
+const cancel = "_cancel_qtwuf_31";
+const error = "_error_qtwuf_37";
 var styles$5 = {
   form: form$1,
   container: container$2,
@@ -101034,9 +101050,9 @@ var styles$5 = {
   cancel,
   error
 };
-const label$1 = "_label_xfwp3_1";
-const textarea = "_textarea_xfwp3_9";
-const resizable = "_resizable_xfwp3_17";
+const label$1 = "_label_1vo1x_1";
+const textarea = "_textarea_1vo1x_9";
+const resizable = "_resizable_1vo1x_17";
 var styles$4 = {
   label: label$1,
   textarea,
@@ -101080,20 +101096,20 @@ const TextAreaField = ({
     })]
   });
 };
-const group = "_group_1yux9_1";
-const button$1 = "_button_1yux9_7";
-const enabled = "_enabled_1yux9_19";
-const notenabled = "_notenabled_1yux9_25";
-const switchIcon = "_switchIcon_1yux9_31";
-const switchActive = "_switchActive_1yux9_37";
-const switchInactive = "_switchInactive_1yux9_43";
-const label = "_label_1yux9_49";
-const labelActive = "_labelActive_1yux9_55";
-const labelInactive = "_labelInactive_1yux9_61";
+const group = "_group_3fgum_1";
+const button$1 = "_button_3fgum_7";
+const enabled = "_enabled_3fgum_19";
+const notenabled = "_notenabled_3fgum_25";
+const switchIcon = "_switchIcon_3fgum_31";
+const switchActive = "_switchActive_3fgum_37";
+const switchInactive = "_switchInactive_3fgum_43";
+const label = "_label_3fgum_49";
+const labelActive = "_labelActive_3fgum_55";
+const labelInactive = "_labelInactive_3fgum_61";
 var styles$3 = {
   group,
   button: button$1,
-  "switch": "_switch_1yux9_13",
+  "switch": "_switch_3fgum_13",
   enabled,
   notenabled,
   switchIcon,
@@ -101415,11 +101431,22 @@ const useExternalMetric = ({
   };
   return { createExternalMetric, error: error2 };
 };
+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,
-  externalDashboardId
+  externalDashboardId,
+  variant = "static"
 }) => {
   var _a2;
   const [isLoading, setLoading] = useState(false);
@@ -101462,10 +101489,11 @@ const EmbeddedMetricCreation = ({
   const columnList = useMemo(() => {
     var _a3;
     return ((_a3 = selectedTableData == null ? void 0 : selectedTableData.columns) == null ? void 0 : _a3.map(({
-      name
+      name,
+      as
     }) => ({
       value: name,
-      label: name
+      label: as
     }))) || [];
   }, [selectedTableData]);
   useEffect(() => {
@@ -101652,10 +101680,13 @@ const EmbeddedMetricCreation = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Button, {
       type: "button",
-      variant: "primary",
+      variant: variant === "floating" ? "custom" : "primary",
       size: "large",
+      className: variant === "floating" ? styles$p.floatingCreateButton : "",
       onClick: () => setShowMetricCreateModal(true),
-      children: "Create Metric"
+      children: variant === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
+        className: styles$p.floatingCreateButtonIcon
+      }) : "Create Metric"
     }), /* @__PURE__ */ jsx(Modal$1, {
       headerTitle: "Create Metric",
       isOpen: isShowMetricCreateModal,
@@ -101784,15 +101815,15 @@ const useEmbeddedDashboard = (token) => {
     }
   };
 };
-const container$1 = "_container_16xx4_1";
-const form = "_form_16xx4_7";
-const title = "_title_16xx4_13";
-const apply = "_apply_16xx4_19";
-const reset = "_reset_16xx4_25";
-const filters = "_filters_16xx4_31";
-const filterItem = "_filterItem_16xx4_37";
-const filterItemOperator = "_filterItemOperator_16xx4_43";
-const remove = "_remove_16xx4_49";
+const container$1 = "_container_lfh6d_1";
+const form = "_form_lfh6d_7";
+const title = "_title_lfh6d_13";
+const apply = "_apply_lfh6d_19";
+const reset = "_reset_lfh6d_25";
+const filters = "_filters_lfh6d_31";
+const filterItem = "_filterItem_lfh6d_37";
+const filterItemOperator = "_filterItemOperator_lfh6d_43";
+const remove = "_remove_lfh6d_49";
 var styles$2 = {
   container: container$1,
   form,
@@ -102198,6 +102229,16 @@ const MetricFilters = ({
   });
 };
 var MetricFilters$1 = React__default.memo(MetricFilters);
+const icOutlineFilterAltOff = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    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 container = "_container_7vfcn_1";
 const windowIcon = "_windowIcon_7vfcn_7";
 var styles = {
@@ -102242,9 +102283,67 @@ const ErrorFallback = () => {
   });
 };
 var ErrorFallback$1 = React__default.memo(ErrorFallback);
+const applyTheme = (theme2) => {
+  const root = document.documentElement;
+  if (theme2.colors)
+    Object.entries(theme2.colors).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-color-${key}`, `${value}`);
+    });
+  if (theme2.border)
+    Object.entries(theme2.border).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-border-${key}`, `${value}`);
+    });
+  if (theme2.shadow)
+    Object.entries(theme2.shadow).forEach(([key, value]) => {
+      root.style.setProperty(`--databrainhq-plugin-shadow-${key}`, `${value}`);
+    });
+  if (theme2.typography)
+    Object.entries(theme2.typography).forEach(([key, value]) => {
+      root.style.setProperty(
+        `--databrainhq-plugin-typography-${key}`,
+        `${value}`
+      );
+    });
+  if (theme2.breakpoint)
+    Object.entries(theme2.breakpoint).forEach(([key, value]) => {
+      root.style.setProperty(
+        `--databrainhq-plugin-breakpoint-${key}`,
+        `${value}`
+      );
+    });
+};
+const akarIconsSettingsHorizontal = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsxs("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M3 5h4m14 0H11m-8 7h12m6 0h-2M3 19h2m16 0H9"
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 9,
+      cy: 5,
+      r: 2
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 17,
+      cy: 12,
+      r: 2
+    }), /* @__PURE__ */ jsx("circle", {
+      cx: 7,
+      cy: 19,
+      r: 2
+    })]
+  })
+});
 const queryClient = new QueryClient();
 const EmbeddedDashboard = React__default.memo(({
-  token
+  token,
+  options: options2,
+  theme: theme2
 }) => {
   var _a2, _b2;
   const {
@@ -102258,42 +102357,56 @@ const EmbeddedDashboard = React__default.memo(({
   });
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$z["embedDashboard-container"],
+      className: styles$A["embedDashboard-container"],
       children: [((_a2 = data.externalDashboard) == null ? void 0 : _a2.id) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$z["embedDashboard-header"],
-          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(Button, {
-            type: "button",
-            variant: "custom",
-            className: styles$z.filter,
-            onClick: () => setShowFilters((s2) => !s2),
-            children: /* @__PURE__ */ jsx(icOutlineFilterAlt, {
-              color: "#182C60"
+          className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A["embedDashboard-header-floating"] : styles$A["embedDashboard-header-static"],
+          children: [(options2 == null ? void 0 : options2.headerVariant) === "floating" && /* @__PURE__ */ jsx("span", {
+            className: styles$A.floatingButton,
+            children: /* @__PURE__ */ jsx(akarIconsSettingsHorizontal, {
+              className: styles$A.floatingButtonIcon
             })
-          }) : null, /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
-            clientId: data.clientId,
-            companyId: data.companyId,
-            mode: data.mode,
-            externalDashboardId: data.externalDashboard.id
+          }), /* @__PURE__ */ jsxs("div", {
+            className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A.floatingContainer : styles$A.staticContainer,
+            children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(Button, {
+              type: "button",
+              variant: "custom",
+              size: "large",
+              className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$A.floatingFilterButton : styles$A.filter,
+              onClick: () => setShowFilters((s2) => !s2),
+              children: isShowFilters ? /* @__PURE__ */ jsx(icOutlineFilterAltOff, {
+                className: styles$A.floatingFilterButtonIcon
+              }) : /* @__PURE__ */ jsx(icOutlineFilterAlt, {
+                className: styles$A.floatingFilterButtonIcon
+              })
+            }) : null, !(options2 == null ? void 0 : options2.disableMetricCreation) && /* @__PURE__ */ jsx(EmbeddedMetricCreation, {
+              clientId: data.clientId,
+              companyId: data.companyId,
+              mode: data.mode,
+              externalDashboardId: data.externalDashboard.id,
+              variant: options2 == null ? void 0 : options2.headerVariant
+            })]
           })]
         }), /* @__PURE__ */ jsxs("div", {
-          className: styles$z["embedDashboard-wrapper"],
+          className: styles$A["embedDashboard-wrapper"],
           children: [data.externalDashboard.filters.length && isShowFilters ? /* @__PURE__ */ jsx(MetricFilters$1, {
             companyId: data.companyId,
             filters: data.externalDashboard.filters,
             onApply: (values) => setGlobalFilters(values)
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList$1, {
             client: data.clientId,
-            company: data.companyId,
             isLiveMode: data.mode,
             params: Array.isArray(data.rlsSettings) ? data.rlsSettings : [],
             externalDashboardMetrics: data.externalDashboardMetrics,
             isMetricListLoading: isLoading,
-            globalFilters
+            globalFilters,
+            breakpoint: theme2 == null ? void 0 : theme2.breakpoint,
+            layoutCols: theme2 == null ? void 0 : theme2.metricLayoutCols,
+            chartColors: options2 == null ? void 0 : options2.chartColors
           })]
         })]
       }), isLoading && /* @__PURE__ */ jsx("div", {
-        className: styles$z["alt-container"],
+        className: styles$A["alt-container"],
         children: /* @__PURE__ */ jsx(eosIconsLoading, {
           style: {
             width: "50px",
@@ -102302,21 +102415,31 @@ const EmbeddedDashboard = React__default.memo(({
           }
         })
       }), !isLoading && !((_b2 = data.externalDashboard) == null ? void 0 : _b2.id) && /* @__PURE__ */ jsx("div", {
-        className: styles$z["alt-container"],
+        className: styles$A["alt-container"],
         children: "Invalid token or Dashboard id"
       })]
     })
   });
 });
 const Dashboard = React__default.memo(({
-  token
-}) => /* @__PURE__ */ jsx(ErrorBoundary, {
-  FallbackComponent: ErrorFallback$1,
-  children: /* @__PURE__ */ jsx(QueryClientProvider, {
-    client: queryClient,
-    children: /* @__PURE__ */ jsx(EmbeddedDashboard, {
-      token
+  token,
+  options: options2,
+  theme: theme2
+}) => {
+  useEffect(() => {
+    if (!theme2 || !Object.keys(theme2).length)
+      return;
+    applyTheme(theme2);
+  }, [theme2]);
+  return /* @__PURE__ */ jsx(ErrorBoundary, {
+    FallbackComponent: ErrorFallback$1,
+    children: /* @__PURE__ */ jsx(QueryClientProvider, {
+      client: queryClient,
+      children: /* @__PURE__ */ jsx(EmbeddedDashboard, {
+        token,
+        options: options2
+      })
     })
-  })
-}));
+  });
+});
 export { Dashboard };