@peak-ai/canvas 1.4.21 → 1.4.22

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

@@ -0,0 +1,300 @@
+/* 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

@@ -0,0 +1,164 @@
+/* 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-cache-context.tsx

@@ -0,0 +1,154 @@
+import React, { createContext, useContext, useCallback, useRef, useMemo } from 'react';
+import {
+  QueryCacheEntry,
+  InteractionType,
+  InteractionState,
+} from './query-cache-utils';
+import { getGlobalQueryCache, configureGlobalQueryCache } from './query-cache-singleton';
+
+type QueryCacheContextValue = {
+  getCachedQuery: (
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState
+  ) => QueryCacheEntry | null;
+  
+  setCachedQuery: (
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState,
+    entry: QueryCacheEntry
+  ) => void;
+  
+  invalidateComponent: (componentId: string) => void;
+
+  invalidateAll: () => void;
+
+  isCached: (
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState
+  ) => boolean;
+};
+
+const QueryCacheContext = createContext<QueryCacheContextValue | null>(null);
+
+type QueryCacheProviderProps = {
+  children: React.ReactNode;
+  maxCacheSize?: number;
+  maxCacheAge?: number;
+};
+
+export function QueryCacheProvider({
+  children,
+  maxCacheSize = 100,
+  maxCacheAge = 5 * 60 * 1000, // 5 minutes
+}: QueryCacheProviderProps) {
+  const isConfigured = useRef(false);
+  
+  if (!isConfigured.current) {
+    configureGlobalQueryCache(maxCacheSize, maxCacheAge);
+    isConfigured.current = true;
+  }
+
+  const cacheManager = useRef(getGlobalQueryCache()).current;
+  
+  const getCachedQuery = useCallback(
+    (
+      componentId: string,
+      interactionType: InteractionType,
+      state: InteractionState
+    ): QueryCacheEntry | null => {
+      return cacheManager.getCachedQuery(componentId, interactionType, state);
+    },
+    [cacheManager]
+  );
+  
+  const setCachedQuery = useCallback(
+    (
+      componentId: string,
+      interactionType: InteractionType,
+      state: InteractionState,
+      entry: QueryCacheEntry
+    ) => {
+      cacheManager.setCachedQuery(componentId, interactionType, state, entry);
+    },
+    [cacheManager]
+  );
+  
+  const invalidateComponent = useCallback(
+    (componentId: string) => {
+      cacheManager.invalidateComponent(componentId);
+    },
+    [cacheManager]
+  );
+  
+  const invalidateAll = useCallback(() => {
+    cacheManager.invalidateAll();
+  }, [cacheManager]);
+  
+  const isCached = useCallback(
+    (
+      componentId: string,
+      interactionType: InteractionType,
+      state: InteractionState
+    ): boolean => {
+      return cacheManager.isCached(componentId, interactionType, state);
+    },
+    [cacheManager]
+  );
+  
+  const value = useMemo(
+    () => ({
+      getCachedQuery,
+      setCachedQuery,
+      invalidateComponent,
+      invalidateAll,
+      isCached,
+    }),
+    [getCachedQuery, setCachedQuery, invalidateComponent, invalidateAll, isCached]
+  );
+  
+  return (
+    <QueryCacheContext.Provider value={value}>
+      {children}
+    </QueryCacheContext.Provider>
+  );
+}
+
+export function useQueryCache(): QueryCacheContextValue {
+  const context = useContext(QueryCacheContext);
+  
+  if (!context) {
+    throw new Error('useQueryCache must be used within a QueryCacheProvider');
+  }
+  
+  return context;
+}
+
+export function useInvalidateCacheOnChange(
+  componentId: string | undefined,
+  dependencies: unknown[]
+): void {
+  const { invalidateComponent } = useQueryCache();
+  const prevDepsRef = useRef<unknown[]>([]);
+  
+  React.useEffect(() => {
+    if (prevDepsRef.current.length === 0) {
+      prevDepsRef.current = dependencies;
+
+      return;
+    }
+    
+    const hasChanged = dependencies.some(
+      (dep, index) => dep !== prevDepsRef.current[index]
+    );
+    
+    if (hasChanged && componentId) {
+      invalidateComponent(componentId);
+    }
+    
+    prevDepsRef.current = dependencies;
+  }, [componentId, invalidateComponent, dependencies]);
+}
+