@peak-ai/canvas 1.4.21 → 1.4.22

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

@@ -0,0 +1,1450 @@
+/* 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,
+  };
+}