@peak-ai/canvas 1.4.11 → 1.4.12-rc.12

package/src/plugins/helpers/data-table.tsx

@@ -1,300 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState, Fragment } from 'react';
-import {
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
-  TableHeadSortable,
-  SortDirection,
-} from '../../shadcn/components/ui/table';
-import { TableLoader } from '../../shadcn/components/ui/skeleton';
-import { ScrollArea, ScrollBar } from '../../shadcn/components/ui/scroll-area';
-import {
-  Pagination,
-  PaginationContent,
-  renderPaginationArrows,
-} from '../../shadcn/components/ui/pagination';
-import { TableButton } from '../../shadcn/components/ui/button';
-import { cn } from '../../shadcn/utils';
-import { renderNoDataFallback } from './extra'
-
-type RowAction = {
-  id: string;
-  text: string;
-  variant?: string;
-  tooltipContent?: string;
-  className?: string;
-};
-
-export type DataTableProps = {
-   data: Record<string, any>[];
-  headerMapper?: Record<string, string>;
-  className?: string;
-  isEditable?: boolean;
-  actions?: RowAction[];
-  pagination?: {
-    values?: {
-      pageNumber: number;
-      pageSize: number;
-    };
-    initialPage?: number;
-    initialPageSize?: number;
-    totalCount: number;
-    pageSizeOptions: number[];
-  };
-  isLoading?: boolean;
-  onRowAction?: (rowIndex: number, actionId: string) => void;
-  onPageChange?: (pageNumber: number, pageSize: number) => void;
-  onSort?: (column: string, direction: SortDirection) => void;
-  sortConfig?: Record<string, SortDirection>;
-  otherProps?: Record<string, any>;
-  height?: string | number;
-};
-
-export function DataTable({
-  data = [],
-  headerMapper = {},
-  className = '',
-  actions = [],
-  isEditable = false,
-  pagination,
-  isLoading = false,
-  onRowAction,
-  onPageChange,
-  onSort,
-  sortConfig,
-  otherProps = {},
-  height,
-}: DataTableProps) {
-
-  if (!data || data.length === 0) {
-    return (
-      <Fragment>
-        <div className="flex flex-col overflow-hidden">
-          <div
-            data-slot="table-container"
-            className="aspect-auto w-full"
-            style={{ height: 'auto', minHeight: '180px' }}
-          >
-            {isLoading ? <TableLoader /> : renderNoDataFallback()}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
-  const [activeSortColumn, setActiveSortColumn] = useState<string | null>(null);
-  const [sortDirections, setSortDirections] = useState<Record<string, SortDirection>>({});
-
-  const [pageNumber, setPageNumber] = useState(
-    Number(pagination?.values?.pageNumber ?? pagination?.initialPage ?? 1),
-  );
-  const [pageSize, setPageSize] = useState(
-    Number(pagination?.values?.pageSize ?? pagination?.initialPageSize ?? 10),
-  );
-  const [totalPages, setTotalPages] = useState(
-    Math.ceil((pagination?.totalCount || 0) / pageSize) || 1,
-  );
-
-  useEffect(() => {
-    setPageNumber(Number(pagination?.values?.pageNumber ?? pagination?.initialPage ?? 1));
-    setPageSize(Number(pagination?.values?.pageSize ?? pagination?.initialPageSize ?? 25));
-  }, [pagination]);
-
-  useEffect(() => {
-    setTotalPages(Math.ceil((pagination?.totalCount || 0) / pageSize) || 1);
-  }, [pagination?.totalCount, pageSize]);
-
-  useEffect(() => {
-    if (sortConfig) {
-      setSortDirections(sortConfig);
-      const first = Object.keys(sortConfig)[0];
-
-      if (first) {
-        setActiveSortColumn(first);
-      }
-    }
-  }, [sortConfig]);
-
-  useEffect(() => {
-      if (sortConfig?.sortColumn || sortConfig?.sortDirection) {
-          sortConfig.sortColumn = null;
-          sortConfig.sortDirection = null;
-        }
-        
-        setActiveSortColumn(null);
-        setSortDirections({});
-    }, []);
-  
-  const originalKeys = Object.keys(data[0] || {}).filter((key) => key in headerMapper);
-  const headers = originalKeys.map((key) => headerMapper[key]);
-
-  if (actions.length > 0) {
-    headers.push('');
-  }
-
-  const rows = data.map((datum: any) => originalKeys.map((key) => datum[key]));
-
-  async function handlePageChange(newPage = pageNumber, newSize = pageSize) {
-    setPageNumber(newPage);
-    setPageSize(newSize);
-    onPageChange?.(newPage, newSize);
-  }
-
-  function handleSortClick(column: string, direction: SortDirection) {
-    setActiveSortColumn(direction ? column : null);
-    setSortDirections((prev) => ({
-      ...prev,
-      [column]: direction,
-    }));
-    onSort?.(column, direction);
-  }
-
-  function renderActions(rowIndex: number, rowActions: RowAction[]) {
-    if (!actions.length) {
-      return null;
-    }
-
-    return (
-      <TableCell className="sticky right-0 bg-white">
-        {rowActions.map((action) => (
-          <TableButton
-            key={action.id}
-            className={action.className}
-            isEditable={isEditable}
-            onClick={() => onRowAction?.(rowIndex, action.id)}
-            variant={action.variant}
-            text={action.text}
-            tooltipContent={action.tooltipContent}
-            disabled={isLoading}
-          />
-        ))}
-      </TableCell>
-    );
-  }
-
-  const defaultClasses = `aspect-auto w-full`;
-  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
-
-  function renderTableComponent() {
-    if (isLoading || (!data || data.length === 0)) {
-      return <TableLoader />;
-    }
-
-    return (
-      <Table
-        {...otherProps}
-        className={`caption-bottom text-sm relative ${mergedClasses}`}
-        data-slot="table"
-      >
-        <TableHeader data-slot="table-header" className="sticky top-0 z-2">
-          <TableRow>
-            {headers.map((head: string, idx: number) => {
-              const isActionColumn = actions.length > 0 && idx === headers.length - 1;
-              const originalKey = originalKeys[idx];
-
-              if (isActionColumn) {
-                return (
-                  <TableHead
-                    key={idx}
-                    data-slot={`table-header-${idx}`}
-                    contentEditable={isEditable}
-                    className="sticky right-0 bg-slate-100"
-                  >
-                    {head}
-                  </TableHead>
-                );
-              }
-
-              return (
-                <TableHeadSortable
-                  key={idx}
-                  data-slot={`table-header-${idx}`}
-                  sortDirection={sortDirections[originalKey] || 'asc'}
-                  isActive={activeSortColumn === originalKey}
-                  onSort={(direction) => handleSortClick(originalKey, direction)}
-                  sortable={!isLoading}
-                  isEditable={isEditable}
-                >
-                  {head}
-                </TableHeadSortable>
-              );
-            })}
-          </TableRow>
-        </TableHeader>
-        <TableBody data-slot="table-body">
-          {rows.map((row: any[], rIdx: number) => (
-            <TableRow
-              key={rIdx}
-              data-slot={`row-${rIdx}`}
-              className="hover:bg-muted/50 border-b transition-colors"
-            >
-              {row.map((cell: string, cIdx: number) => (
-                <TableCell
-                  key={cIdx}
-                  data-slot={`cell-${rIdx}-${cIdx}`}
-                  className="p-2 align-middle whitespace-nowrap"
-                  contentEditable={false}
-                >
-                  {cell === null ? '-' : String(cell)}
-                </TableCell>
-              ))}
-              {renderActions(rIdx, actions)}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    );
-  }
-
-  return (
-    <Fragment>
-      <div className="flex flex-col h-full overflow-hidden">
-        <ScrollArea
-          data-slot="table-container"
-          className={mergedClasses}
-          {...(height !== undefined && { style: { height } })}
-        >
-          {renderTableComponent()}
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </div>
-      {pagination && pagination.totalCount > 0 && (
-        <div className="flex-shrink-0 flex items-center justify-between mt-2 w-full overflow-x-auto border-t pt-2">
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <label htmlFor="page-size-select" className="text-sm whitespace-nowrap">
-              Rows per page:
-            </label>
-            <select
-              id="page-size-select"
-              value={pageSize}
-              onChange={(e) => handlePageChange(1, Number(e.target.value))}
-              className="border rounded px-2 py-1 text-sm cursor-pointer"
-              disabled={isLoading}
-            >
-              {pagination.pageSizeOptions.map((size: number) => (
-                <option key={size} value={size}>
-                  {size}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <span className="text-xs text-muted-foreground whitespace-nowrap ml-1.5">
-              {(pageNumber - 1) * pageSize + 1}–
-              {Math.min(pageNumber * pageSize, pagination.totalCount)} of {pagination.totalCount}
-            </span>
-            <Pagination>
-              <PaginationContent className="gap-0.2 flex-shrink-0">
-                {renderPaginationArrows(pageNumber, totalPages, isLoading, handlePageChange)}
-              </PaginationContent>
-            </Pagination>
-          </div>
-        </div>
-      )}
-    </Fragment>
-  );
-}

package/src/plugins/helpers/extra.tsx

@@ -1,164 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { JSX } from 'react';
-
-import { cn } from '../../shadcn/utils';
-import { Checkbox } from '../../shadcn/components/ui/checkbox';
-import { CircleAlert } from 'lucide-react';
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from '../../shadcn/components/ui/hover-card';
-import { Input } from '../../shadcn/components/ui/input';
-import { Label } from '../../shadcn/components/ui/label';
-import { Separator } from '../../shadcn/components/ui/separator';
-import { Textarea } from '../../shadcn/components/ui/textarea';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../../shadcn/components/ui/tooltip';
-
-export function renderNoDataFallback() {
-  return (
-    <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>
-  );
-}
-
-export function renderCheckbox(props: any): JSX.Element {
-  const { label = '', defaultChecked = false, className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'flex items-center';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={merged} {...rest}>
-      <Checkbox defaultChecked={defaultChecked} />
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="ml-2">
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-}
-
-export function renderHoverCard(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover over me',
-    cardContent = 'Additional information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] max-w-[320px] shadow rounded-lg';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <HoverCard className={merged} {...rest}>
-      <HoverCardTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <div data-slot="cardContent" contentEditable={isEditable}>
-          {cardContent}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-}
-
-export function renderInput(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Input placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderLabel(props: any): JSX.Element {
-  const { text = 'Label', className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'text-base font-semibold mb-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <Label data-slot="text" contentEditable={isEditable} className={merged} {...rest}>
-      {text}
-    </Label>
-  );
-}
-
-export function renderSeparator(props: any): JSX.Element {
-  const { className, ...rest } = props;
-  const defaultClasses = 'my-4 border-t-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return <Separator className={merged} {...rest} />;
-}
-
-export function renderTextarea(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Textarea placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderTooltip(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover here',
-    tooltipContent = 'Tooltip information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const merged = className || '';
-
-  return (
-    <Tooltip className={merged} {...rest}>
-      <TooltipTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent data-slot="tooltipContent" contentEditable={isEditable}>
-        {tooltipContent}
-      </TooltipContent>
-    </Tooltip>
-  );
-}

package/src/plugins/helpers/query-details-modal.tsx

@@ -1,240 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { CustomModal } from './custom-modal';
-import { Copy, Check, ChevronDown } from 'lucide-react';
-
-type QueryDetailsModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  isLoading: boolean;
-  error: string;
-  sqlQuery: string | string[];
-  tableButtonExplanations?: Array<{action: string, explanation: string, operationName?: string, buttonClassName?: string, buttonStyle?: Record<string, unknown>}>;
-  onRetry: () => void;
-};
-
-export function QueryDetailsModal({
-  isOpen,
-  onClose,
-  isLoading,
-  error,
-  sqlQuery,
-  tableButtonExplanations = [],
-  onRetry
-}: QueryDetailsModalProps) {
-  const [copied, setCopied] = useState<{ [key: string]: boolean }>({});
-  const [expandedButtons, setExpandedButtons] = useState<{ [key: string]: boolean }>({});
-
-  // Reset expanded state when modal closes
-  useEffect(() => {
-    if (!isOpen) {
-      setExpandedButtons({});
-    }
-  }, [isOpen]);
-
-  async function copyToClipboard(queryToCopy?: string, copyId?: string) {
-    let textToCopy = queryToCopy;
-    
-    if (!textToCopy) {
-      if (Array.isArray(sqlQuery)) {
-        textToCopy = sqlQuery.filter(q => q && typeof q === 'string').join('\n\n-- Next Query --\n\n');
-      } else if (typeof sqlQuery === 'string') {
-        textToCopy = sqlQuery;
-      } else {
-        textToCopy = '';
-      }
-    }
-    
-    if (!textToCopy) {
-      return;
-    }
-    
-    const id = copyId || 'main';
-    
-    try {
-      await navigator.clipboard.writeText(textToCopy);
-      setCopied(prev => ({ ...prev, [id]: true }));
-      setTimeout(() => setCopied(prev => ({ ...prev, [id]: false })), 2000);
-    } catch (err) {
-      // Silently fail if clipboard API is not available
-    }
-  }
-
-  function toggleButtonExpansion(buttonIndex: number) {
-    setExpandedButtons(prev => ({
-      ...prev,
-      [buttonIndex]: !prev[buttonIndex]
-    }));
-  }
-
-  function renderTableButtonExplanations() {
-    if (!tableButtonExplanations || tableButtonExplanations.length === 0) {
-      return null;
-    }
-
-    return (
-      <div className="mb-6">
-        {tableButtonExplanations.map((button, index) => (
-          <div key={index} className="mb-3 border border-gray-200 rounded-lg">
-            <div className="w-full px-4 py-3 flex items-center justify-between rounded-lg">
-              <span className="font-medium text-xs text-gray-500">
-                What does this button do?
-              </span>
-              <div className="flex items-center">
-                <button
-                  onClick={() => toggleButtonExpansion(index)}
-                  className={button.buttonClassName || "flex items-center px-3 py-1.5 rounded text-xs font-medium"}
-                  style={{
-                    backgroundColor: (button.buttonStyle?.backgroundColor as string) || '#f3f4f6',
-                    color: (button.buttonStyle?.color as string) || '#374151',
-                    border: (button.buttonStyle?.border as string) || '1px solid #d1d5db',
-                    ...(button.buttonStyle as React.CSSProperties || {})
-                  }}
-                >
-                  {button.action}
-                </button>
-                <ChevronDown 
-                  className={`ml-2 w-4 h-4 text-gray-500 transition-transform cursor-pointer ${
-                    expandedButtons[index] ? 'rotate-180' : ''
-                  }`}
-                  onClick={() => toggleButtonExpansion(index)}
-                />
-              </div>
-            </div>
-            
-            {expandedButtons[index] && (
-              <div className="px-4 pb-3 border-t border-gray-200">
-                <p className="text-xs text-gray-700 mt-2">
-                  This button will hit <span className="font-semibold">{button.explanation}</span> 
-                </p>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  function renderModalContent() {
-    if (isLoading) {
-      return (
-        <div className="flex flex-col items-center justify-center py-12">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mb-4"></div>
-          <span className="text-xs text-gray-600">Fetching query details from semantic layer...</span>
-          <span className="text-xs text-gray-400 mt-2">This may take a few moments</span>
-        </div>
-      );
-    }
-
-    if (error) {
-      return (
-        <div className="text-red-600 p-4 bg-red-50 rounded-lg border border-red-200 m-6">
-          <p className="font-medium mb-2 text-xs">Unable to fetch query details</p>
-          <p className="text-xs mb-3">{error}</p>
-          <button 
-            onClick={onRetry}
-            className="px-4 py-2 bg-red-100 hover:bg-red-200 rounded text-xs font-medium transition-colors"
-            type="button"
-          >
-            Retry
-          </button>
-        </div>
-      );
-    }
-
-    if (!sqlQuery || (Array.isArray(sqlQuery) && sqlQuery.length === 0)) {
-      return (
-        <div className="text-gray-600 p-6">
-          <p className="text-xs">No query details available</p>
-        </div>
-      );
-    }
-
-    // Handle multiple queries
-    if (Array.isArray(sqlQuery)) {
-      return (
-        <div className="p-6 space-y-4">
-          {sqlQuery
-            .filter(query => query && typeof query === 'string' && query.trim())
-            .map((query, index) => (
-            <div 
-              key={index} 
-              className="bg-white border border-gray-200 rounded-lg p-4 h-28 overflow-y-auto"
-            >
-              <div className="flex justify-between items-start mb-3">
-                <h3 className="font-semibold text-xs text-gray-500 m-0">
-                  Query details
-                </h3>
-                <button
-                  onClick={() => copyToClipboard(query, `query-${index}`)}
-                  className="flex items-center gap-2 px-2 py-1 text-xs bg-gray-50 border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-                  type="button"
-                >
-                  {copied[`query-${index}`] ? (
-                    <>
-                      <Check className="w-3 h-3 text-green-600" />
-                      <span className="text-green-600">Copied!</span>
-                    </>
-                  ) : (
-                    <>
-                      <Copy className="w-3 h-3 text-gray-600" />
-                      <span className="text-gray-600">Copy</span>
-                    </>
-                  )}
-                </button>
-              </div>
-              <pre className="whitespace-pre-wrap leading-relaxed text-xs text-gray-700 m-0 p-0">
-                {query}
-              </pre>
-            </div>
-          ))}
-          {renderTableButtonExplanations()}
-        </div>
-      );
-    }
-
-    return (
-        <div className="p-6 space-y-4">
-          <div className="bg-white border border-gray-200 rounded-lg p-4 h-28 overflow-y-auto">
-            <div className="flex justify-between items-start mb-3">
-              <h3 className="font-semibold text-xs text-gray-500 m-0">
-                Query details
-              </h3>
-              <button
-                onClick={() => copyToClipboard(undefined, 'single')}
-                className="flex items-center gap-2 px-2 py-1 text-xs bg-gray-50 border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-                type="button"
-              >
-                {copied.single ? (
-                  <>
-                    <Check className="w-3 h-3 text-green-600" />
-                    <span className="text-green-600">Copied!</span>
-                  </>
-                ) : (
-                  <>
-                    <Copy className="w-3 h-3 text-gray-600" />
-                    <span className="text-gray-600">Copy</span>
-                  </>
-                )}
-              </button>
-            </div>
-            <pre className="whitespace-pre-wrap leading-relaxed text-xs text-gray-700 m-0 p-0">
-              {sqlQuery}
-            </pre>
-          </div>
-          {renderTableButtonExplanations()}
-        </div>
-    );
-  }
-
-  return (
-    <CustomModal
-      isOpen={isOpen}
-      onClose={onClose}
-      title="How was this metric calculated?"
-    >
-      {renderModalContent()}
-    </CustomModal>
-  );
-}
-
-export default QueryDetailsModal;