@peak-ai/canvas 1.4.22 → 1.4.23

package/src/plugins/helpers/render-components.tsx

@@ -1,1450 +0,0 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable func-style */
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable func-names */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import chroma from 'chroma-js';
-import React, { useEffect, useState, JSX, useRef } from 'react';
-import { renderNoDataFallback } from './extra';
-import {
-  CircleAlert,
-  TrendingDown,
-  TrendingUp,
-  ShoppingCart,
-  ChartBarBig,
-  Tag,
-  MapPin,
-} from 'lucide-react';
-import { StyledInfoButton } from './styled-info-button';
-import { filterPlaceholders } from '../../helpers/filter-placeholder';
-
-import { theme } from '@peak-ai/ais-components/theme';
-
-import Markdown from 'markdown-to-jsx';
-
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Legend,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-} from 'recharts/lib';
-
-// @ts-ignore
-import * as domutil from 'recharts/lib/util/DOMUtils';
-
-import { TooltipButton } from '../../shadcn/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '../../shadcn/components/ui/card';
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '../../shadcn/components/ui/chart';
-import { renderFilter } from '../../shadcn/components/ui/filter';
-import { ScrollArea, ScrollBar } from '../../shadcn/components/ui/scroll-area';
-import { renderSearch } from '../../shadcn/components/ui/search';
-import { CardLoader, ChartLoader, MarkdownLoader } from '../../shadcn/components/ui/skeleton';
-import { SortDirection } from '../../shadcn/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../shadcn/components/ui/tabs';
-
-import { cn } from '../../shadcn/utils';
-import { getAffectedComponentsWithLoader } from '../../helpers';
-import { DataTable } from './data-table';
-import { ComponentWrapper } from '../../shadcn/components/ui/error-wrapper';
-
-// Monkey-patching the getOffset function to use iframe's window instead of global one
-// REMEMBER TO UDPATE THIS WHEN recharts IS UPGRADED
-// @ts-ignore
-domutil.getOffset = (
-  el: HTMLElement,
-): {
-  top: number;
-  left: number;
-} => {
-  const html = el.ownerDocument.documentElement;
-  let box = { top: 0, left: 0 };
-
-  if (typeof el.getBoundingClientRect !== 'undefined') {
-    box = el.getBoundingClientRect();
-  }
-
-  const iframe = document.querySelector('.gjs-frame');
-  const iframeWindow = (iframe as any)?.contentWindow;
-
-  return {
-    top: box.top + iframeWindow.pageYOffset - html.clientTop,
-    left: box.left + iframeWindow.pageXOffset - html.clientLeft,
-  };
-};
-
-const baseColors = [
-  [theme.colors.Blue_100, theme.colors.Blue_30],
-  [theme.colors.Purpley_100, theme.colors.Purpley_30],
-  [theme.colors.Light_Bluish_Green, '#06601b'],
-  [theme.colors.Wild_Strawberry, '#4d001c'],
-];
-
-const iconMap: Record<string, JSX.Element> = {
-  TrendingUp: <TrendingUp />,
-  TrendingDown: <TrendingDown />,
-  ShoppingCart: <ShoppingCart />,
-  Equalizer: <ChartBarBig />,
-  Style: <Tag />,
-  Place: <MapPin />,
-};
-
-function getIconFromString(iconString: string): JSX.Element | null {
-  if (!iconString) {
-    return null;
-  }
-
-  if (iconMap[iconString]) {
-    return iconMap[iconString];
-  }
-
-  const lowerIconString = iconString.toLowerCase();
-  const matchingKey = Object.keys(iconMap).find((key) => key.toLowerCase() === lowerIconString);
-
-  if (matchingKey) {
-    return iconMap[matchingKey];
-  }
-
-  return null;
-}
-
-function getNColors(n: number) {
-  const colors: Array<string[]> = [];
-  const safeBaseColors = Array.isArray(baseColors) ? baseColors : [];
-
-  for (const baseColor of safeBaseColors) {
-    // eslint-disable-next-line import/no-named-as-default-member
-    colors.push(chroma.scale(baseColor).mode('lab').colors(n));
-  }
-
-  function getOneColor(existing: Array<string>) {
-    let color: null | string = null;
-
-    do {
-      const base = colors[Math.floor(Math.random() * colors.length)];
-      const selectedColorIndex = Math.floor(Math.random() * base.length);
-      color = base[selectedColorIndex];
-    } while (existing.includes(color));
-
-    return color as string;
-  }
-
-  const selectedColors: Array<string> = [];
-
-  for (let i = 0; i < n; i++) {
-    selectedColors.push(getOneColor(selectedColors));
-  }
-
-  return selectedColors;
-}
-
-/* TODO: Loader remains */
-export function renderActionCard(props: any): JSX.Element {
-  const { gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...filterPlaceholders(gjsModel.get('componentProps')),
-    ...filterPlaceholders(props),
-  });
-
-  const {
-    headerContent = 'Default action card title',
-    icon,
-    bodyContent = 'Default body content. Click to edit.',
-  } = allData;
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData((prevData: any) => ({
-        ...prevData,
-        ...filterPlaceholders(gjsModel.get('componentProps')),
-      }));
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const defaultClasses = 'text-black p-4 rounded-lg shadow border flex flex-col h-full';
-
-  return (
-    <Card
-      className={`${defaultClasses} relative`}
-      style={{ backgroundColor: '#f9f9fe' }}
-      isEditable={false}
-      contentEditable={false}
-      {...rest}
-    >
-      <CardContent className="p-0" isEditable={false} contentEditable={false}>
-        <div className="px-4 py-3">
-          <div className="flex items-start flex-col">
-            <div className="flex items-center justify-between w-full">
-              <div className="text-xl font-semibold">{headerContent}</div>
-              <div className="text-5xl ml-2 flex items-center" aria-hidden="true">
-                {getIconFromString(icon)}
-              </div>
-            </div>
-            <div className="w-full mt-1">
-              {attributes.error ||
-              allData.error ||
-              attributes.isMissing ||
-              allData.isMissing ||
-              !bodyContent ? (
-                <span className="flex flex-row items-center px-3 py-2">
-                  <CircleAlert className="w-3 h-3 text-gray-400 mr-1" />
-                  <p className="text-sm text-gray-500 max-w-md text-center">
-                    No data available for given filters
-                  </p>
-                </span>
-              ) : (
-                <div className="text-base leading-relaxed">{bodyContent}</div>
-              )}
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function renderCard(props: any): JSX.Element {
-  const {
-    isEditable = false,
-    gjsModel,
-    performInteraction = () => Promise.resolve({}),
-    ...rest
-  } = props;
-
-  const [allData, setAllData] = useState({
-    ...filterPlaceholders(gjsModel.get('componentProps')),
-    ...filterPlaceholders(props),
-  });
-
-  const {
-    headerContent,
-    headerDescription,
-    bodyContent,
-    footerContent,
-    footerClass,
-    footerIcon,
-    contentMetadata,
-    contentMetadataClass,
-    className: dataClassName,
-    error: dataError,
-    isMissing: dataIsMissing,
-  } = allData;
-
-  function toSafeText(value: unknown): string {
-    if (value === null) {
-      return '';
-    }
-
-    return typeof value === 'string' ? value : JSON.stringify(value);
-  }
-
-  const safeHeaderContent = toSafeText(headerContent);
-  const safeHeaderDescription = toSafeText(headerDescription);
-  const safeBodyContent = toSafeText(bodyContent);
-  const safeFooterContent = toSafeText(footerContent);
-  const safeContentMetadata = toSafeText(contentMetadata);
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData((prevData: any) => ({
-        ...prevData,
-        ...filterPlaceholders(gjsModel.get('componentProps')),
-      }));
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const defaultClasses =
-    'bg-white text-black p-4 rounded-lg border flex flex-col h-full shadow-none';
-  const defaultFooterClasses = safeFooterContent
-    ? 'text-sm bg-pink-50 text-pink-900 shadow-sm'
-    : 'text-sm';
-  const defaultContentMetadataClasses = 'text-xs';
-
-  const mergedCardClassName = dataClassName ? cn(defaultClasses, dataClassName) : defaultClasses;
-  const mergedFooterClassName = footerClass
-    ? cn(defaultFooterClasses, footerClass)
-    : defaultFooterClasses;
-  const mergedContentMetadataClassName = contentMetadataClass
-    ? cn(defaultContentMetadataClasses, contentMetadataClass)
-    : defaultContentMetadataClasses;
-
-  const hasError = Boolean(attributes?.error ?? dataError);
-  const hasMissing = Boolean(attributes?.isMissing ?? dataIsMissing);
-  const isLoading = Boolean(
-    (attributes?.interactionApiInProgress || attributes?.loading) && !hasError && !hasMissing,
-  );
-
-  const footerIconText =
-    typeof footerIcon === 'string'
-      ? footerIcon
-      : footerIcon && typeof footerIcon === 'object' && 'icon' in (footerIcon as any)
-      ? String((footerIcon as any).icon)
-      : '';
-
-  function getCardContent() {
-    if (isLoading) {
-      return (
-        <CardContent>
-          <CardLoader />
-        </CardContent>
-      );
-    }
-
-    const showEmpty = hasError || hasMissing || !safeBodyContent;
-
-    return (
-      <React.Fragment>
-        <CardHeader>
-          <div className="flex items-start justify-between">
-            <div className="flex-1">
-              <CardTitle data-slot="headerContent" contentEditable={isEditable} className="text-lg">
-                {safeHeaderContent}
-              </CardTitle>
-              <CardDescription
-                data-slot="headerDescription"
-                contentEditable={isEditable}
-                className="text-sm"
-              >
-                {safeHeaderDescription}
-              </CardDescription>
-            </div>
-          </div>
-        </CardHeader>
-
-        {showEmpty ? (
-          <span className="flex flex-row items-center px-3 py-2">
-            <CircleAlert className="w-3 h-3 text-gray-400 mr-1" />
-            <p className="text-sm text-gray-500 max-w-md text-center">
-              No data available for given filters
-            </p>
-          </span>
-        ) : (
-          <CardContent data-slot="bodyContent" contentEditable={false} className="flex-grow">
-            <div className="text-3xl font-semibold truncate">{safeBodyContent}</div>
-            {safeContentMetadata && (
-              <div className={mergedContentMetadataClassName} style={{ color: '#2A44D4' }}>
-                {safeContentMetadata}
-              </div>
-            )}
-          </CardContent>
-        )}
-
-        <CardFooter
-          data-slot="footerContent"
-          contentEditable={isEditable}
-          className={cn(mergedFooterClassName)}
-        >
-          {(footerIconText || '').trim() && (
-            <span className="mr-2" aria-hidden="true">
-              {footerIconText}
-            </span>
-          )}
-          {safeFooterContent || ''}
-        </CardFooter>
-      </React.Fragment>
-    );
-  }
-
-  return (
-    <Card {...rest} className={`${mergedCardClassName} relative`}>
-      {getCardContent()}
-      <StyledInfoButton
-        componentId={gjsModel.get('id')}
-        performInteraction={performInteraction}
-        position="top-right"
-        isVisible={isEditable}
-        componentProps={allData}
-      />
-    </Card>
-  );
-}
-
-function renderChartComponent(chartType: string, data: any, config: any): JSX.Element {
-  const safeData = Array.isArray(data) ? data : [];
-
-  if (safeData.length === 0) {
-    return renderNoDataFallback();
-  }
-
-  switch (chartType) {
-    case 'pie':
-      return (
-        <PieChart>
-          {safeData.length >= 20 && (
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          )}
-          <Pie
-            data={safeData}
-            dataKey={config.dataKey}
-            nameKey={config.nameKey}
-            innerRadius={60}
-            strokeWidth={10}
-            label={
-              safeData.length < 20
-                ? ({ name, percent }: { name: string; percent: number }) =>
-                    `${name}: ${(percent * 100).toFixed(0)}%`
-                : undefined
-            }
-            labelLine={false}
-          />
-        </PieChart>
-      );
-
-    case 'bar': {
-      config.dataKeys = config.dataKeys || [];
-
-      const barDataKeys = Array.isArray(config.dataKeys) ? config.dataKeys : [];
-
-      return (
-        <BarChart data={safeData} {...config.chartUi}>
-          <CartesianGrid vertical={false} />
-          <XAxis dataKey={config.xAxis} />
-          <YAxis />
-          <Legend align="left" wrapperStyle={{ marginLeft: 20 }} />
-          {barDataKeys.map(({ key, name, color }: { key: string; name: string; color: string }) => {
-            return <Bar dataKey={key} fill={color ?? '#4caf50'} name={name} key={key} radius={2} />;
-          })}
-          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
-        </BarChart>
-      );
-    }
-
-    case 'line': {
-      config.dataKeys = config.dataKeys || [];
-      const safeDataKeysLine = Array.isArray(config.dataKeys) ? config.dataKeys : [];
-
-      return (
-        <LineChart data={safeData} {...config.chartUi}>
-          <CartesianGrid vertical={false} />
-          <XAxis dataKey={config.xAxis} />
-          <YAxis />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
-          {safeDataKeysLine.map(
-            ({ key, name, color }: { key: string; name: string; color: string }) => {
-              return (
-                <Line
-                  type="monotone"
-                  dataKey={key}
-                  stroke={color ?? '#4caf50'}
-                  name={name}
-                  key={key}
-                />
-              );
-            },
-          )}
-          <Legend align="left" />
-        </LineChart>
-      );
-    }
-
-    default:
-      return (
-        <PieChart>
-          {safeData.length >= 20 && (
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          )}
-          <Pie
-            data={safeData}
-            dataKey={config.dataKey}
-            nameKey={config.nameKey}
-            innerRadius={60}
-            strokeWidth={10}
-            label={
-              safeData.length < 20
-                ? ({ name, percent }: { name: string; percent: number }) =>
-                    `${name}: ${(percent * 100).toFixed(0)}%`
-                : undefined
-            }
-            labelLine={false}
-          />
-        </PieChart>
-      );
-  }
-}
-
-export function renderChart(props: any): JSX.Element {
-  const {
-    isEditable = false,
-    gjsModel,
-    performInteraction = () => Promise.resolve({}),
-    ...rest
-  } = props;
-
-  const [allData, setAllData] = useState({
-    ...filterPlaceholders(gjsModel.get('componentProps')),
-    ...filterPlaceholders(props),
-  });
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
-  useEffect(() => {
-    const handlePropsChange = () => {
-      const newProps = filterPlaceholders(gjsModel.get('componentProps'));
-      setAllData((prevData: any) => ({
-        ...prevData, // Preserve existing data (including __sql_query_params)
-        ...newProps,
-      }));
-    };
-
-    gjsModel.on('change:componentProps', handlePropsChange);
-
-    return () => {
-      gjsModel.off('change:componentProps', handlePropsChange);
-    };
-  }, [gjsModel]);
-
-  useEffect(() => {
-    const handleAttributesChange = () => {
-      const newAttributes = gjsModel.get('attributes');
-      setAttributes({
-        ...newAttributes,
-      });
-    };
-
-    gjsModel.on('change:attributes', handleAttributesChange);
-
-    return () => {
-      gjsModel.off('change:attributes', handleAttributesChange);
-    };
-  }, [gjsModel]);
-
-  useEffect(() => {
-    const updateContainerWidth = () => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.offsetWidth);
-      }
-    };
-
-    updateContainerWidth();
-    window.addEventListener('resize', updateContainerWidth);
-
-    return () => window.removeEventListener('resize', updateContainerWidth);
-  }, []);
-
-  const {
-    config = {},
-    chartType = 'pie',
-    chartData = [],
-    className,
-    title = 'Title',
-    subTitle = 'Subtitle',
-  } = allData;
-
-  const defaultClasses = 'aspect-auto h-[250px] w-full';
-  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
-
-  if (chartType === 'pie') {
-    const safeChartData = Array.isArray(chartData) ? chartData : [];
-    const colors = getNColors(safeChartData.length);
-
-    for (let i = 0; i < safeChartData.length; i++) {
-      const data = safeChartData[i];
-
-      if (!data.fill) {
-        data.fill = colors[i];
-      }
-    }
-  } else if (!config.color) {
-    const safeBaseColors = Array.isArray(baseColors) ? baseColors : [];
-
-    if (safeBaseColors.length > 0) {
-      config.color = safeBaseColors[Math.floor(Math.random() * safeBaseColors.length)];
-    }
-  }
-
-  let width: number | undefined = undefined;
-  let totalDataPoints = 0;
-
-  // Helper function to get responsive config
-  const getResponsiveConfig = () => {
-    if (
-      chartType === 'bar' &&
-      totalDataPoints > 15 &&
-      containerWidth > 0 &&
-      width &&
-      width <= containerWidth
-    ) {
-      // If chart fits in container, use responsive behavior
-      return { ...config, chartUi: {} };
-    }
-
-    return config;
-  };
-
-  if (chartType === 'bar') {
-    config.dataKeys = config.dataKeys || [];
-    const safeChartData = Array.isArray(chartData) ? chartData : [];
-    const safeDataKeys = Array.isArray(config.dataKeys) ? config.dataKeys : [];
-
-    totalDataPoints = safeChartData.length * Math.max(1, safeDataKeys.length);
-
-    if (totalDataPoints > 15) {
-      width =
-        totalDataPoints * 20 +
-        safeDataKeys.length * 8 * safeChartData.length +
-        safeChartData.length * 15;
-      config.chartUi = {
-        barCategoryGap: '10%',
-        width,
-      };
-    } else {
-      config.chartUi = {};
-    }
-  } else if (chartType === 'line') {
-    config.dataKeys = config.dataKeys || [];
-    const safeChartData = Array.isArray(chartData) ? chartData : [];
-    totalDataPoints = safeChartData.length;
-
-    if (totalDataPoints > 15) {
-      width = Math.max(800, totalDataPoints * 20);
-      config.chartUi = {
-        width,
-      };
-    } else {
-      config.chartUi = {};
-    }
-  }
-
-  const hasError = attributes.error || allData.error;
-  const hasMissing = attributes.isMissing || allData.isMissing;
-  const isLoading =
-    (attributes.interactionApiInProgress || attributes.loading) && !hasError && !hasMissing;
-
-  const chartUi = isLoading ? (
-    <ChartLoader />
-  ) : hasError || hasMissing || !chartData ? (
-    renderNoDataFallback()
-  ) : (
-    <React.Fragment>
-      {(chartType === 'bar' || chartType === 'line') &&
-      totalDataPoints > 15 &&
-      width &&
-      (containerWidth === 0 || width > containerWidth) ? (
-        <div className="w-full h-[250px]">
-          <ScrollArea className="w-full h-full">
-            <div style={{ minWidth: `${width}px`, width: 'max-content', height: '250px' }}>
-              <ResponsiveContainer width={width} height={250}>
-                <ChartContainer {...rest} config={config} className={mergedClasses}>
-                  {renderChartComponent(chartType, chartData, config)}
-                </ChartContainer>
-              </ResponsiveContainer>
-            </div>
-            <ScrollBar orientation="horizontal" />
-          </ScrollArea>
-        </div>
-      ) : (
-        <ResponsiveContainer width="100%" height={250}>
-          <ChartContainer {...rest} config={getResponsiveConfig()} className={mergedClasses}>
-            {renderChartComponent(chartType, chartData, getResponsiveConfig())}
-          </ChartContainer>
-        </ResponsiveContainer>
-      )}
-    </React.Fragment>
-  );
-
-  return (
-    <Card className="shadow border mt-2 mb-2 relative">
-      <CardHeader>
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
-              {title}
-            </CardTitle>
-            <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
-              {subTitle}
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent
-        ref={containerRef}
-        data-slot="bodyContent"
-        contentEditable={false}
-        className="px-6"
-      >
-        {chartUi}
-      </CardContent>
-      <StyledInfoButton
-        componentId={gjsModel.get('id')}
-        performInteraction={performInteraction}
-        position="top-right"
-        isVisible={isEditable}
-        componentProps={allData}
-      />
-    </Card>
-  );
-}
-
-export function renderTable(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, performInteraction = () => {}, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...filterPlaceholders(gjsModel.get('componentProps')),
-    ...filterPlaceholders(props),
-  });
-
-  const cardRef = useRef<HTMLDivElement>(null);
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  const {
-    data: rawData,
-    headerMapper: rawHeaderMapper = {},
-    className,
-    title = 'Title',
-    subTitle = 'Subtitle',
-    actions = [],
-    pagination,
-  } = allData;
-
-  const data = Array.isArray(rawData) ? rawData : [];
-  const headerMapper = (() => {
-    const cleaned = { ...rawHeaderMapper };
-
-    if ('id' in cleaned) {
-      delete cleaned.id;
-    }
-
-    if (data.length > 0) {
-      const dataKeys = Object.keys(data[0] || {});
-
-      return Object.fromEntries(Object.entries(cleaned).filter(([key]) => dataKeys.includes(key)));
-    }
-
-    return cleaned;
-  })();
-
-  const sortConfig = (() => {
-    const { sortColumn, sortDirection } = gjsModel.get('componentProps') ?? {};
-
-    return sortColumn && sortDirection ? { [sortColumn]: sortDirection } : {};
-  })();
-
-  const [viewportWidth, setViewportWidth] = useState<number>(0);
-  const [scrollAreaHeight, setScrollAreaHeight] = useState<number>(250);
-
-  const calculateTableHeight = (tableWidth: number, rowCount: number) => {
-    if (viewportWidth > 0) {
-      const widthRatio = tableWidth / viewportWidth;
-      const baseTableHeight = 250;
-      let targetScrollAreaHeight = baseTableHeight;
-
-      if (widthRatio >= 0.8) {
-        const headerHeight = 48;
-        const rowHeight = 40;
-        const calculatedHeight = headerHeight + rowCount * rowHeight;
-        targetScrollAreaHeight = Math.min(calculatedHeight, baseTableHeight);
-      }
-
-      const tableId = gjsModel.get('id');
-      const editor = gjsModel.em || gjsModel.collection?.em;
-      const canvasDocument = editor.Canvas.getDocument() || document;
-      const tableElement = canvasDocument.querySelector(
-        `[data-table-id="${tableId}"]`,
-      ) as HTMLElement;
-
-      if (tableElement) {
-        const headerElement = tableElement.querySelector(
-          '[data-slot="card-header"]',
-        ) as HTMLElement;
-
-        if (headerElement && headerElement.offsetHeight > 0) {
-          const actualHeaderHeight = headerElement.offsetHeight;
-          const standardHeaderHeight = 58;
-          const heightDifference = actualHeaderHeight - standardHeaderHeight;
-
-          if (heightDifference > 0) {
-            targetScrollAreaHeight = targetScrollAreaHeight - heightDifference;
-          }
-        }
-      }
-
-      setScrollAreaHeight(targetScrollAreaHeight);
-    }
-  };
-
-  useEffect(() => {
-    const updateViewportWidth = () => {
-      const iframe = document.querySelector('.gjs-frame');
-      const iframeWindow = (iframe as any)?.contentWindow;
-      const iframeDocument = iframeWindow?.document;
-
-      if (iframeDocument) {
-        const dashboardRoot = iframeDocument.getElementById('dashboard-root');
-        const effectiveViewportWidth =
-          dashboardRoot?.clientWidth || iframeDocument.documentElement.clientWidth;
-        setViewportWidth(effectiveViewportWidth);
-      }
-    };
-
-    updateViewportWidth();
-    window.addEventListener('resize', updateViewportWidth);
-
-    const iframe = document.querySelector('.gjs-frame');
-    const iframeWindow = (iframe as any)?.contentWindow;
-
-    if (iframeWindow) {
-      iframeWindow.addEventListener('resize', updateViewportWidth);
-    }
-
-    return () => {
-      window.removeEventListener('resize', updateViewportWidth);
-
-      if (iframeWindow) {
-        iframeWindow.removeEventListener('resize', updateViewportWidth);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    const updateTableWidthAndApplyCSS = () => {
-      const tableId = gjsModel.get('id');
-      const editor = gjsModel.em || gjsModel.collection?.em;
-      const canvasDocument = editor.Canvas.getDocument() || document;
-
-      let tableElement = canvasDocument.querySelector(
-        `[data-table-id="${tableId}"]`,
-      ) as HTMLElement;
-
-      if (!tableElement && window.parent !== window) {
-        tableElement = window.parent.document.querySelector(
-          `[data-table-id="${tableId}"]`,
-        ) as HTMLElement;
-      }
-
-      if (!tableElement) {
-        return;
-      }
-
-      const tableActualWidth = tableElement.getBoundingClientRect().width;
-
-      if (tableActualWidth > 0) {
-        calculateTableHeight(tableActualWidth, Array.isArray(data) ? data.length : 0);
-      }
-    };
-
-    const timeoutId = setTimeout(updateTableWidthAndApplyCSS, 150);
-    window.addEventListener('resize', updateTableWidthAndApplyCSS);
-
-    return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener('resize', updateTableWidthAndApplyCSS);
-    };
-  }, [allData, gjsModel, viewportWidth, data, calculateTableHeight]);
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData((prevData: any) => ({
-        ...prevData, // Preserve existing data (including __sql_query_params)
-        ...filterPlaceholders(gjsModel.get('componentProps')),
-      }));
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const parsedData = (() => {
-    if (
-      typeof data === 'object' &&
-      data !== null &&
-      !Array.isArray(data) &&
-      (data as any).name === '__peak_placeholder'
-    ) {
-      return [];
-    }
-
-    if (!Array.isArray(data)) {
-      return [];
-    }
-
-    return data.map((datum: any) => {
-      const newData = {
-        ...datum,
-      };
-
-      delete newData.id;
-
-      return newData;
-    });
-  })();
-
-  async function onRowAction(rowIndex: number, actionId: string) {
-    const id = gjsModel.get('id');
-
-    await performInteraction({
-      id: actionId,
-      interactionType: 'tableButton',
-      payload: {
-        row: data[rowIndex],
-        tableId: id,
-      },
-      affectedComponents: [],
-    });
-  }
-
-  async function onPageChange(pageNumber: number, pageSize: number) {
-    const id = gjsModel.get('id');
-    const { sortColumn, sortDirection } = gjsModel.get('componentProps') ?? {};
-
-    await performInteraction({
-      id,
-      interactionType: 'pagination',
-      payload: {
-        pageNumber,
-        pageSize,
-        ...(sortColumn && sortDirection && { sortColumn, sortDirection }),
-      },
-      affectedComponents: getAffectedComponentsWithLoader([id], true),
-    });
-  }
-
-  async function handleSort(column: string, direction: SortDirection) {
-    const currentProps = gjsModel.get('componentProps');
-    const id = gjsModel.get('id');
-
-    gjsModel.set('componentProps', {
-      ...currentProps,
-      sortColumn: direction ? column : null,
-      sortDirection: direction,
-    });
-
-    await performInteraction({
-      id,
-      interactionType: 'tableSort',
-      payload: {
-        sortColumn: direction ? column : null,
-        sortDirection: direction,
-        tableId: id,
-      },
-      affectedComponents: getAffectedComponentsWithLoader([id], true),
-    });
-  }
-
-  return (
-    <Card
-      ref={cardRef}
-      className="shadow border relative flex flex-col h-fit overflow-hidden"
-      data-component-type="table"
-      data-table-id={gjsModel.get('id')}
-    >
-      <CardHeader>
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
-              {title}
-            </CardTitle>
-            <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
-              {subTitle}
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent
-        data-slot="bodyContent"
-        contentEditable={false}
-        className="flex-1 flex flex-col overflow-hidden"
-      >
-        {attributes.error || allData.error || attributes.isMissing || allData.isMissing ? (
-          renderNoDataFallback()
-        ) : (
-          <DataTable
-            data={parsedData}
-            headerMapper={headerMapper}
-            className={className}
-            isEditable={isEditable}
-            actions={actions}
-            pagination={pagination}
-            isLoading={attributes.interactionApiInProgress}
-            onRowAction={onRowAction}
-            onPageChange={onPageChange}
-            onSort={handleSort}
-            sortConfig={sortConfig}
-            otherProps={rest}
-            height={scrollAreaHeight}
-          />
-        )}
-      </CardContent>
-      <StyledInfoButton
-        componentId={gjsModel.get('id')}
-        performInteraction={performInteraction}
-        position="top-right"
-        tableActions={actions}
-        firstRowData={Array.isArray(data) && data.length > 0 ? data[0] : {}}
-        isVisible={isEditable}
-        componentProps={allData}
-      />
-    </Card>
-  );
-}
-
-export function renderTab(props: any): JSX.Element {
-  let tabsWidth = 157;
-  const safeTabs = Array.isArray(props.tabs) ? props.tabs : [];
-  const showFallback = safeTabs.length === 0;
-
-  if (safeTabs.length > 4) {
-    tabsWidth = 157;
-  }
-
-  const defaultValue = props.defaultValue || (safeTabs.length > 0 ? safeTabs[0] : undefined);
-
-  return (
-    <Tabs defaultValue={defaultValue}>
-      <div className="text-center mb-4">
-        <TabsList className="bg-[#F9F9FE] border border-[#D4D5DE] p-1 rounded-lg h-auto">
-          {safeTabs.length > 0 ? (
-            safeTabs.map((tab: string) => (
-              <TabsTrigger
-                value={tab}
-                key={tab}
-                className={`
-                  w-[${tabsWidth}px] h-[38px] gap-1 px-3 py-[11px]
-                  font-medium text-sm leading-4
-                  border-0 bg-[#F9F9FE] text-[#687387] rounded-none
-                  data-[state=active]:border data-[state=active]:border-solid data-[state=active]:border-[#2A44D4] data-[state=active]:bg-[#EAECFB] data-[state=active]:text-[#263DBF] data-[state=active]:shadow-none data-[state=active]:rounded-md
-                  transition-all duration-200
-                `}
-                style={{
-                  fontFamily: 'Helvetica Neue',
-                  fontWeight: 500,
-                  fontSize: '14px',
-                  lineHeight: '16px',
-                  letterSpacing: '0%',
-                }}
-              >
-                {tab}
-              </TabsTrigger>
-            ))
-          ) : (
-            <TabsTrigger
-              value="no-data"
-              className={`
-                w-[${tabsWidth}px] h-[38px] gap-1 px-3 py-[11px]
-                font-medium text-sm leading-4
-                border-0 bg-[#F9F9FE] text-[#687387] rounded-none
-                data-[state=active]:border data-[state=active]:border-solid data-[state=active]:border-[#2A44D4] data-[state=active]:bg-[#EAECFB] data-[state=active]:text-[#263DBF] data-[state=active]:shadow-none data-[state=active]:rounded-md
-                transition-all duration-200
-              `}
-              style={{
-                fontFamily: 'Helvetica Neue',
-                fontWeight: 500,
-                fontSize: '14px',
-                lineHeight: '16px',
-                letterSpacing: '0%',
-              }}
-              disabled
-            >
-              No tabs
-            </TabsTrigger>
-          )}
-        </TabsList>
-      </div>
-      {showFallback ? (
-        <TabsContent
-          value={defaultValue || 'no-data'}
-          className="tabs-content"
-          data-fallback="true"
-        >
-          {renderNoDataFallback()}
-        </TabsContent>
-      ) : (
-        safeTabs.map((tab: string) => (
-          <TabsContent value={tab} className="tabs-content" key={tab} />
-        ))
-      )}
-    </Tabs>
-  );
-}
-
-export function renderMarkdown(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...filterPlaceholders(gjsModel.get('componentProps')),
-    ...filterPlaceholders(props),
-  });
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData((prevData: any) => ({
-        ...prevData, // Preserve existing data (including __sql_query_params)
-        ...filterPlaceholders(gjsModel.get('componentProps')),
-      }));
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const [isEditing, setIsEditing] = useState(false);
-  const editRef = useRef<HTMLDivElement>(null);
-
-  const startEditing = () => {
-    setIsEditing(true);
-    setTimeout(() => {
-      setupEditor();
-    }, 0);
-  };
-
-  const setupEditor = () => {
-    if (!editRef.current) {
-      return;
-    }
-
-    const editor = editRef.current;
-    editor.innerHTML = '';
-    editor.textContent = allData.summaryText;
-    editor.focus();
-  };
-
-  // Save changes and exit editing mode
-  const saveChanges = () => {
-    if (!editRef.current) {
-      return;
-    }
-
-    const content = editRef.current.innerText || '';
-    setAllData((prev: Record<string, any>) => ({
-      ...prev,
-      summaryText: content,
-    }));
-    setIsEditing(false);
-    editRef.current.innerHTML = '';
-  };
-
-  const markdownStyles = {
-    ul: { props: { className: 'list-disc' } },
-    h1: { props: { className: 'text-4xl font-bold leading-[4rem]' } },
-    h2: { props: { className: 'text-3xl font-bold leading-[3rem]' } },
-    h3: { props: { className: 'text-2xl font-bold leading-[2rem]' } },
-    h4: { props: { className: 'text-xl font-bold leading-[2.5rem]' } },
-    h5: { props: { className: 'text-lg font-bold leading-[2.5rem]' } },
-    h6: { props: { className: 'text-base font-bold leading-[2rem]' } },
-  };
-
-  const hasError = attributes.error || allData.error;
-  const hasMissing = attributes.isMissing || allData.isMissing;
-  const isLoading = attributes.loading && !hasError && !hasMissing;
-
-  if (isLoading) {
-    return <MarkdownLoader />;
-  }
-
-  if (hasError || hasMissing) {
-    return (
-      <div className="px-[1em] relative" {...rest}>
-        <h3 className="text-xl font-semibold text-left">Insights</h3>
-        <div
-          className="w-full py-8 flex flex-col items-center justify-center px-6 text-center"
-          style={{ minHeight: '180px' }}
-        >
-          <CircleAlert className="w-12 h-12 text-gray-400 mb-2" />
-          <h3 className="text-lg font-medium text-gray-900">No data available</h3>
-          <p className="mt-2 text-sm text-gray-500 max-w-md">
-            Check your filters or try a different time range.
-          </p>
-        </div>
-        <StyledInfoButton
-          componentId={gjsModel.get('id')}
-          performInteraction={props.performInteraction}
-          position="top-right"
-          isVisible={isEditable}
-          componentProps={allData}
-        />
-      </div>
-    );
-  }
-
-  if (!allData.isEditable) {
-    return (
-      <div className="px-[1em] relative" {...rest}>
-        <h3 className="text-xl font-semibold text-left">Insights</h3>
-        <div data-slot="summaryText">
-          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
-        </div>
-        <StyledInfoButton
-          componentId={gjsModel.get('id')}
-          performInteraction={props.performInteraction}
-          position="top-right"
-          isVisible={isEditable}
-          componentProps={allData}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-[1em] relative" {...rest}>
-      <h3 className="text-xl font-semibold text-left">Insights</h3>
-      {isEditing ? (
-        <div
-          ref={editRef}
-          contentEditable
-          onBlur={saveChanges}
-          data-slot="summaryText"
-          className="p-2 min-h-[100px] whitespace-pre-wrap"
-          suppressContentEditableWarning={true}
-          style={{
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }}
-        />
-      ) : (
-        <div
-          onClick={startEditing}
-          data-slot="summaryText"
-          style={{
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }}
-        >
-          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
-        </div>
-      )}
-      <StyledInfoButton
-        componentId={gjsModel.get('id')}
-        performInteraction={props.performInteraction}
-        position="top-right"
-        isVisible={isEditable}
-        componentProps={allData}
-      />
-    </div>
-  );
-}
-
-export function renderButton(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, performInteraction = () => {} } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const [attributes, setAttributes] = useState({
-    ...gjsModel.get('attributes'),
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const {
-    text,
-    className,
-    payload,
-    variant = 'default',
-    size = 'sm',
-    affectedComponents,
-    tooltipContent,
-  } = allData;
-
-  function interact() {
-    const id = gjsModel.get('id');
-    performInteraction({
-      id,
-      interactionType: 'button',
-      affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
-      payload,
-    });
-  }
-
-  return (
-    <TooltipButton
-      className={className}
-      isEditable={isEditable}
-      interact={interact}
-      attributes={attributes}
-      variant={variant}
-      size={size}
-      text={text}
-      tooltipContent={tooltipContent}
-    />
-  );
-}
-
-const renderActionCardWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'ActionCard' }}>
-    {renderActionCard(props)}
-  </ComponentWrapper>
-);
-
-const renderButtonWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Button' }}>
-    {renderButton(props)}
-  </ComponentWrapper>
-);
-
-const renderCardWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Card' }}>
-    {renderCard(props)}
-  </ComponentWrapper>
-);
-
-const renderChartWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Chart' }}>
-    {renderChart(props)}
-  </ComponentWrapper>
-);
-
-const renderFilterWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Filter' }}>
-    {renderFilter(props)}
-  </ComponentWrapper>
-);
-
-const renderMarkdownWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Markdown' }}>
-    {renderMarkdown(props)}
-  </ComponentWrapper>
-);
-
-const renderSearchWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Search' }}>
-    {renderSearch(props)}
-  </ComponentWrapper>
-);
-
-const renderTableWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Table' }}>
-    {renderTable(props)}
-  </ComponentWrapper>
-);
-
-const renderTabWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Tabs' }}>
-    {renderTab(props)}
-  </ComponentWrapper>
-);
-
-function renderActions(props: any): JSX.Element {
-  const { actions, isEditable = false, gjsModel } = props;
-
-  if (actions === null) {
-    return <div />;
-  }
-
-  if (!Array.isArray(actions) || actions.length === 0) {
-    return (
-      <div className="bg-white text-black p-4 rounded-lg border flex flex-col h-full shadow-none relative">
-        <CardLoader />
-      </div>
-    );
-  }
-
-  return (
-    <div className="dashboard-cards flex flex-wrap gap-4">
-      {actions.map((action: any, index: number) => {
-        const { icon, title, description } = action;
-
-        return (
-          <div key={index} className="flex-1 min-w-[200px]">
-            {renderActionCard({
-              icon,
-              headerContent: title,
-              bodyContent: description,
-              isEditable,
-              gjsModel,
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-const renderActionsWithWrapper = (props: any) => (
-  <ComponentWrapper componentProps={{ ...props, componentType: 'Actions' }}>
-    {renderActions(props)}
-  </ComponentWrapper>
-);
-
-export function getRenderers(): Record<string, (props: any) => JSX.Element> {
-  return {
-    ActionCard: renderActionCardWithWrapper,
-    Actions: renderActionsWithWrapper,
-    Button: renderButtonWithWrapper,
-    Card: renderCardWithWrapper,
-    Chart: renderChartWithWrapper,
-    Filter: renderFilterWithWrapper,
-    Markdown: renderMarkdownWithWrapper,
-    Search: renderSearchWithWrapper,
-    Table: renderTableWithWrapper,
-    Tabs: renderTabWithWrapper,
-  };
-}