@peak-ai/canvas 1.4.22 → 1.4.23

package/src/plugins/helpers/styled-info-button.tsx

@@ -1,504 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { QueryDetailsModal } from './query-details-modal';
-import { QueryLoadingModal } from './query-loading-modal';
-import { formatQueryHeading } from './query-heading-formatter';
-import { useQueryCache } from './query-cache-context';
-import { extractInteractionState } from './query-cache-utils';
-
-const POSITION_CLASSES = {
-  'top-right': 'absolute top-0 right-0',
-  'top-left': 'absolute top-2 left-2', 
-  'bottom-left': 'absolute bottom-0 left-1/2 transform -translate-x-1/2',
-  'bottom-right': 'absolute bottom-0 right-0 ',
-  'card-overlay': 'absolute bottom-0 right-0'
-} as const;
-
-const ERROR_MESSAGES = {
-  FETCH_FAILED: 'Failed to fetch query details from semantic layer',
-  LOAD_FAILED: 'Failed to load query information',
-  SQL_NOT_AVAILABLE: 'SQL not available'
-} as const;
-
-
-type ButtonStyle = {
-  backgroundColor?: string;
-  color?: string;
-  border?: string;
-  [key: string]: unknown;
-};
-
-type TableButtonExplanation = {
-  action: string;
-  explanation: string;
-  operationName?: string;
-  operationSummary?: string;
-  operationDescription?: string;
-  buttonClassName?: string;
-  buttonStyle?: ButtonStyle;
-  formFields?: Record<string, unknown>;
-  jsonBody?: unknown;
-  filesArg?: Record<string, unknown>;
-  hasPayload?: boolean;
-};
-
-type TableAction = {
-  id: string;
-  text: string;
-  className?: string;
-  [key: string]: unknown;
-};
-
-type Position = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right' | 'card-overlay';
-
-type StyledInfoButtonProps = {
-  buttonStyle?: ButtonStyle;
-  onClick?: () => void;
-  isVisible?: boolean;
-  tableName?: string;
-  position?: Position;
-  componentId?: string;
-  className?: string;
-  onSqlFetch?: (sql: string | string[]) => void;
-  performInteraction?: (payload: Record<string, unknown>) => Promise<Record<string, unknown>>;
-  tableActions?: TableAction[];
-  firstRowData?: Record<string, unknown>;
-  componentProps?: Record<string, unknown>;
-}
-
-
-export function StyledInfoButton({ 
-  position = 'bottom-right', 
-  componentId,
-  className = '',
-  isVisible = true,
-  onSqlFetch,
-  performInteraction = () => Promise.resolve({} as Record<string, unknown>),
-  tableActions = [],
-  firstRowData = {},
-  componentProps = {}
-}: StyledInfoButtonProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isLoadingModalOpen, setIsLoadingModalOpen] = useState(false);
-  
-  const [sqlQuery, setSqlQuery] = useState<string | string[]>('');
-  const [queryHeadings, setQueryHeadings] = useState<string[]>([]);
-  const [tableButtonExplanations, setTableButtonExplanations] = useState<TableButtonExplanation[]>([]);
-  
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string>('');
-  
-  const modalOpen = useRef(false);
-  
-  const queryCache = useQueryCache();
-  
-  const currentInteractionState = extractInteractionState(componentProps);
-  
-  let interactionStateKey = '';
-
-  try {
-    interactionStateKey = JSON.stringify(currentInteractionState);
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.warn('Failed to serialize interaction state:', err);
-    interactionStateKey = `fallback_${Date.now()}_${Math.random()}`;
-  }
-  
-  const prevInteractionStateKeyRef = useRef<string | undefined>(undefined);
-  
-  const interactionState = currentInteractionState;
-
-  useEffect(() => {
-    const prevKey = prevInteractionStateKeyRef.current;
-    const currentKey = interactionStateKey;
-    
-    if (prevKey !== currentKey && prevKey !== undefined) {
-      if (componentId) {
-        queryCache.invalidateComponent(componentId);
-        
-        setSqlQuery('');
-        setQueryHeadings([]);
-        setTableButtonExplanations([]);
-        setError('');
-      }
-    }
-    
-    prevInteractionStateKeyRef.current = currentKey;
-  }, [interactionStateKey, componentId, queryCache]);
-
-  async function fetchTableButtonExplanations(): Promise<TableButtonExplanation[]> {
-    try {
-      if (!tableActions || tableActions.length === 0) {
-        return [];
-      }
-      
-
-      const buttonPromises = tableActions.map(async (action) => {
-        try {
-          const result = await performInteraction({
-            id: action.id || componentId,
-            interactionType: 'tableButton',
-            payload: {
-              row: firstRowData,
-              params: { isInfoButtonInteraction: true }
-            },
-            affectedComponents: []
-          });
-
-                  if (result && typeof result === 'object' && 'apiResponse' in result && 
-                      result.apiResponse && typeof result.apiResponse === 'object') {
-                    const response = result.apiResponse as Record<string, unknown>;
-                    
-                    if (response.request_url && typeof response.request_url === 'string') {
-                      const buttonStyle: ButtonStyle = {};
-                      const actionClassName = (action.className as string) || '';
-                      
-                      if (typeof actionClassName === 'string') {
-                        const bgMatch = actionClassName.match(/bg-\[(#[0-9A-Fa-f]{6})\]/);
-
-                        if (bgMatch) {
-                          buttonStyle.backgroundColor = bgMatch[1];
-                        }
-                        
-                        const textMatch = actionClassName.match(/text-\[(#[0-9A-Fa-f]{6})\]/);
-
-                        if (textMatch) {
-                          buttonStyle.color = textMatch[1];
-                        }
-                        
-                        const borderMatch = actionClassName.match(/border-\[(#[0-9A-Fa-f]{6})\]/);
-
-                        if (borderMatch) {
-                          buttonStyle.border = `1px solid ${borderMatch[1]}`;
-                        }
-                      }
-                      
-                      const formFields = response.form_fields as Record<string, unknown> || {};
-                      const jsonBody = response.json_body;
-                      const filesArg = response.files_arg as Record<string, unknown> || {};
-                      
-                      // Check if any payload fields have content
-                      const hasFormFields = Object.keys(formFields).length > 0;
-                      const hasJsonBody = jsonBody !== null && jsonBody !== undefined && jsonBody !== '';
-                      const hasFilesArg = Object.keys(filesArg).length > 0;
-                      const hasPayload = hasFormFields || hasJsonBody || hasFilesArg;
-                      
-                      return {
-                        action: action.text || action.id || 'Button Action',
-                        explanation: response.request_url,
-                        operationName: response.operation_name as string,
-                        operationSummary: response.operation_summary as string,
-                        operationDescription: response.operation_description as string,
-                        buttonClassName: actionClassName,
-                        buttonStyle,
-                        formFields,
-                        jsonBody,
-                        filesArg,
-                        hasPayload
-                      };
-                    }
-                  }
-
-          return null;
-        } catch (err) {
-          return null;
-        }
-      });
-
-      const results = await Promise.all(buttonPromises);
-
-      return results.filter((result) => result !== null) as TableButtonExplanation[];
-    } catch (err) {
-      return [];
-    }
-  }
-
-  async function fetchSemanticLayerQuery(): Promise<{sql: string | string[], headings: string[]}> {
-    try {
-      setIsLoading(true);
-      setError('');
-      
-      const result = await performInteraction({
-        id: componentId || 'styled-info-button',
-        interactionType: 'semanticLayerQuery',
-        affectedComponents: []
-      });
-
-      if (result && typeof result === 'object' && 'apiResponse' in result && 
-          result.apiResponse && typeof result.apiResponse === 'object') {
-        const apiResponse = result.apiResponse as Record<string, unknown>;
-        
-        if (!('sql' in apiResponse)) {
-          return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-        }
-        
-        const sqlResponse = apiResponse.sql;
-        
-        if (!sqlResponse || (typeof sqlResponse !== 'object')) {
-          return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-        }
-        
-        if ('success' in sqlResponse && Array.isArray(sqlResponse.success)) {
-          const successArray = sqlResponse.success as Array<{
-            error: boolean;
-            sql?: string;
-            errorMessage?: string;
-            query_key?: string;
-          }>;
-          
-          const hasAnyValidQuery = successArray.some(item => 
-            item && typeof item === 'object' && 
-            item.error === false && 
-            'sql' in item && 
-            typeof item.sql === 'string' && 
-            item.sql.trim()
-          );
-          
-          if (!hasAnyValidQuery) {
-            return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-          }
-          
-          const validQueries = successArray
-            .filter(item => 
-              item && 
-              typeof item === 'object' && 
-              item.error === false && 
-              'sql' in item && 
-              typeof item.sql === 'string' && 
-              item.sql.trim()
-            )
-            .map(item => ({
-              sql: item.sql as string,
-              queryKey: item.query_key || 'Query details'
-            }));
-          
-          if (validQueries.length === 0) {
-            return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-          }
-          
-          // Extract SQL and headings in the correct order
-          const sqlQueries = validQueries.map(q => q.sql);
-          const extractedHeadings = validQueries.map(q => formatQueryHeading(q.queryKey));
-          
-          return {
-            sql: sqlQueries.length > 1 ? sqlQueries : sqlQueries[0],
-            headings: extractedHeadings
-          };
-        }
-        
-        if ('error' in sqlResponse && typeof sqlResponse.error === 'string') {
-          return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-        }
-        
-        if (Array.isArray(sqlResponse)) {
-          const sqlObjects = sqlResponse as Array<{sql: string, error: boolean, query_key?: string}>;
-          
-          const validQueries = sqlObjects
-            .filter(obj => obj && typeof obj === 'object' && 'sql' in obj && 'error' in obj && !obj.error && obj.sql && obj.sql.trim())
-            .map(obj => ({
-              sql: obj.sql,
-              queryKey: obj.query_key || 'Query details'
-            }));
-          
-          if (validQueries.length === 0) {
-            return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-          }
-          
-          const sqlQueries = validQueries.map(q => q.sql);
-          const extractedHeadings = validQueries.map(q => formatQueryHeading(q.queryKey));
-          
-          return {
-            sql: sqlQueries.length > 1 ? sqlQueries : sqlQueries[0],
-            headings: extractedHeadings
-          };
-        }
-        
-        return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-      }
-
-      return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-
-    } catch (err) {
-
-      return {sql: ERROR_MESSAGES.SQL_NOT_AVAILABLE, headings: []};
-
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
-  async function handleInfoClick(e: React.MouseEvent) {
-    e.stopPropagation();
-    e.preventDefault();
-    
-    modalOpen.current = true;
-    
-    try {
-      const cachedSemanticQuery = componentId 
-        ? queryCache.getCachedQuery(componentId, 'semanticLayerQuery', interactionState)
-        : null;
-      
-      const cachedTableButton = componentId && tableActions.length > 0
-        ? queryCache.getCachedQuery(componentId, 'tableButton', interactionState)
-        : null;
-      
-      if (cachedSemanticQuery && (tableActions.length === 0 || cachedTableButton)) {
-        setSqlQuery(cachedSemanticQuery.sqlQuery);
-        setQueryHeadings(cachedSemanticQuery.queryHeadings);
-        setTableButtonExplanations(
-          cachedTableButton?.tableButtonExplanations || cachedSemanticQuery.tableButtonExplanations
-        );
-        setError('');
-        
-        if (modalOpen.current) {
-          setIsModalOpen(true);
-        }
-        
-        if (onSqlFetch && cachedSemanticQuery.sqlQuery && 
-            cachedSemanticQuery.sqlQuery !== ERROR_MESSAGES.SQL_NOT_AVAILABLE) {
-          onSqlFetch(cachedSemanticQuery.sqlQuery);
-        }
-        
-        return;
-      }
-      
-      setIsLoadingModalOpen(true);
-      setError('');
-
-      const [sqlResult, buttonExplanations] = await Promise.all([
-        fetchSemanticLayerQuery(),
-        fetchTableButtonExplanations()
-      ]);
-      
-      if (componentId) {
-        const cacheEntry = {
-          sqlQuery: sqlResult.sql || ERROR_MESSAGES.SQL_NOT_AVAILABLE,
-          queryHeadings: sqlResult.headings || [],
-          tableButtonExplanations: buttonExplanations,
-          timestamp: Date.now(),
-        };
-        
-        queryCache.setCachedQuery(componentId, 'semanticLayerQuery', interactionState, cacheEntry);
-        
-        if (tableActions.length > 0) {
-          queryCache.setCachedQuery(componentId, 'tableButton', interactionState, {
-            ...cacheEntry,
-            tableButtonExplanations: buttonExplanations,
-          });
-        }
-      }
-      
-      setSqlQuery(sqlResult.sql || ERROR_MESSAGES.SQL_NOT_AVAILABLE);
-      setQueryHeadings(sqlResult.headings || []);
-      setTableButtonExplanations(buttonExplanations);
-      
-      setIsLoadingModalOpen(false);
-      
-      if (modalOpen.current) {
-        setIsModalOpen(true);
-      }
-      
-      if (onSqlFetch && sqlResult.sql && sqlResult.sql !== ERROR_MESSAGES.SQL_NOT_AVAILABLE) {
-        onSqlFetch(sqlResult.sql);
-      }
-    } catch (err) {
-      setSqlQuery(ERROR_MESSAGES.SQL_NOT_AVAILABLE);
-      setTableButtonExplanations([]);
-      setIsLoadingModalOpen(false);
-      
-      if (modalOpen.current) {
-        setIsModalOpen(true);
-      }
-    }
-  }
-
-  function resetState() {
-    setIsModalOpen(false);
-    setIsLoadingModalOpen(false);
-    setSqlQuery('');
-    setQueryHeadings([]);
-    setTableButtonExplanations([]);
-    setError('');
-    setIsLoading(false);
-  }
-
-  function handleModalClose() {
-    // User explicitly closed the modal
-    modalOpen.current = false;
-    resetState();
-  }
-
-  function handleRetry() {
-    resetState();
-    const mockEvent = { 
-      stopPropagation: () => void 0,
-      preventDefault: () => void 0
-    } as React.MouseEvent;
-    handleInfoClick(mockEvent);
-  }
-
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <>
-      <button
-        className={`${POSITION_CLASSES[position]} ${className}`}
-        onClick={handleInfoClick}
-        title="View Query Details"
-        type="button"
-        style={{
-          width: '60px',
-          height: '60px',
-          transform: 'rotate(0deg)',
-          opacity: 1,
-          border: 'none',
-          background: 'transparent',
-          padding: 0,
-        }}
-      >
-        <svg 
-          width="50" 
-          height="50" 
-          viewBox="0 0 67 66" 
-          fill="none" 
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g filter="url(#filter0_d_4766_2811)">
-            <rect x="16.1667" y="15.5" width="35" height="35" rx="7.5" stroke="#A601FF" strokeWidth="1" shapeRendering="crispEdges"/>
-            <path d="M33.0756 28.0171C33.3312 27.5498 34.0023 27.5498 34.2578 28.0171L35.7159 30.683C35.7777 30.7961 35.8706 30.889 35.9837 30.9508L38.6496 32.4089C39.1169 32.6644 39.1169 33.3355 38.6496 33.5911L35.9837 35.0491C35.8706 35.111 35.7777 35.2039 35.7159 35.317L34.2578 37.9829C34.0023 38.4501 33.3312 38.4501 33.0756 37.9829L31.6176 35.317C31.5557 35.2039 31.4628 35.111 31.3497 35.0491L28.6838 33.5911C28.2166 33.3355 28.2166 32.6644 28.6838 32.4089L31.3497 30.9508C31.4628 30.889 31.5557 30.7961 31.6176 30.683L33.0756 28.0171Z" fill="#A601FF"/>
-            <path d="M29.0634 27.1601C29.1801 26.9466 29.4866 26.9466 29.6033 27.1601L29.9973 27.8804C30.0255 27.932 30.068 27.9745 30.1196 28.0027L30.84 28.3967C31.0534 28.5134 31.0534 28.8199 30.84 28.9367L30.1196 29.3306C30.068 29.3589 30.0255 29.4013 29.9973 29.4529L29.6033 30.1733C29.4866 30.3867 29.1801 30.3867 29.0634 30.1733L28.6694 29.4529C28.6412 29.4013 28.5987 29.3589 28.5471 29.3306L27.8268 28.9367C27.6133 28.8199 27.6133 28.5134 27.8268 28.3967L28.5471 28.0027C28.5987 27.9745 28.6412 27.932 28.6694 27.8804L29.0634 27.1601Z" fill="#A601FF"/>
-            <path d="M38.0346 36.5104C38.1638 36.2743 38.5029 36.2743 38.6321 36.5105L38.8874 36.9773C38.9186 37.0344 38.9656 37.0814 39.0227 37.1126L39.4896 37.368C39.7257 37.4971 39.7257 37.8363 39.4896 37.9654L39.0227 38.2207C38.9656 38.252 38.9186 38.2989 38.8874 38.3561L38.6321 38.8229C38.5029 39.059 38.1638 39.059 38.0346 38.8229L37.7793 38.3561C37.748 38.2989 37.7011 38.252 37.6439 38.2207L37.1771 37.9654C36.941 37.8363 36.941 37.4971 37.1771 37.368L37.6439 37.1126C37.7011 37.0814 37.748 37.0344 37.7793 36.9773L38.0346 36.5104Z" fill="#A601FF"/>
-          </g>
-          <defs>
-            <filter id="filter0_d_4766_2811" x="0.666687" y="0" width="66" height="66" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4766_2811"/>
-              <feOffset/>
-              <feGaussianBlur stdDeviation="5"/>
-              <feComposite in2="hardAlpha" operator="out"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0.0317231 0 0 0 0 0.0834676 0 0 0 0 0.370052 0 0 0 0.05 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4766_2811"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4766_2811" result="shape"/>
-            </filter>
-          </defs>
-        </svg>
-      </button>
-      
-      <QueryLoadingModal isOpen={isLoadingModalOpen} onClose={handleModalClose} />
-      
-      <QueryDetailsModal
-        isOpen={isModalOpen}
-        onClose={handleModalClose}
-        isLoading={isLoading}
-        error={error}
-        sqlQuery={sqlQuery}
-        queryHeadings={queryHeadings}
-        tableButtonExplanations={tableButtonExplanations}
-        onRetry={handleRetry}
-      />
-    </>
-  );
-}

package/src/public/canvas.css

@@ -1,42 +0,0 @@
-@import "tailwindcss";
-@config "../../tailwind.config.js";
-
-
-@theme inline {
-  --color-background: oklch(1 0 0);
-  --color-foreground: oklch(0.145 0 0);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.145 0 0);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.145 0 0);
-  --color-primary: oklch(0.205 0 0);
-  --color-primary-foreground: oklch(0.985 0 0);
-  --color-secondary: oklch(0.97 0 0);
-  --color-secondary-foreground: oklch(0.205 0 0);
-  --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.556 0 0);
-  --color-accent: oklch(0.97 0 0);
-  --color-accent-foreground: oklch(0.205 0 0);
-  --color-destructive: oklch(0.577 0.245 27.325);
-  --color-destructive-foreground: oklch(0.577 0.245 27.325);
-  --color-border: oklch(0.922 0 0);
-  --color-input: oklch(0.922 0 0);
-  --color-ring: oklch(0.708 0 0);
-  --color-chart-1: oklch(0.646 0.222 41.116);
-  --color-chart-2: oklch(0.6 0.118 184.704);
-  --color-chart-3: oklch(0.398 0.07 227.392);
-  --color-chart-4: oklch(0.828 0.189 84.429);
-  --color-chart-5: oklch(0.769 0.188 70.08);
-  --radius-sm: calc(0.625rem - 4px);
-  --radius-md: calc(0.625rem - 2px);
-  --radius-lg: 0.625rem;
-  --radius-xl: calc(0.625rem + 4px);
-  --color-sidebar: oklch(0.985 0 0);
-  --color-sidebar-foreground: oklch(0.145 0 0);
-  --color-sidebar-primary: oklch(0.205 0 0);
-  --color-sidebar-primary-foreground: oklch(0.985 0 0);
-  --color-sidebar-accent: oklch(0.97 0 0);
-  --color-sidebar-accent-foreground: oklch(0.205 0 0);
-  --color-sidebar-border: oklch(0.922 0 0);
-  --color-sidebar-ring: oklch(0.708 0 0);
-}