@peak-ai/canvas 1.4.22 → 1.4.23-rc.0

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

@@ -1,400 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { CustomModal } from './custom-modal';
-import { Copy, Check, ChevronDown, ChevronUp, X } from 'lucide-react';
-import { formatQueryHeading } from './query-heading-formatter';
-
-type CopyButtonProps = {
-  onClick: () => void;
-  isCopied: boolean;
-  variant?: 'default' | 'light';
-};
-
-function CopyButton({ onClick, isCopied, variant = 'default' }: CopyButtonProps) {
-  const baseClasses = "flex items-center gap-1 px-2 py-1 text-xs border rounded transition-colors";
-  const variantClasses = variant === 'light' 
-    ? "bg-gray-50 border-gray-300 hover:bg-gray-100"
-    : "bg-gray-100 border-gray-300 hover:bg-gray-200";
-
-  return (
-    <button
-      onClick={onClick}
-      className={`${baseClasses} ${variantClasses}`}
-      type="button"
-    >
-      {isCopied ? (
-        <>
-          <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>
-  );
-}
-
-type ContentTextProps = {
-  children: React.ReactNode;
-  hasOverflowHandling?: boolean;
-};
-
-function ContentText({ children, hasOverflowHandling = true }: ContentTextProps) {
-  const overflowClasses = hasOverflowHandling ? "overflow-hidden break-words" : "";
-
-  return (
-    <pre className={`whitespace-pre-wrap leading-relaxed text-xs text-gray-700 m-0 p-0 ${overflowClasses}`}>
-      {children}
-    </pre>
-  );
-}
-
-type ContentBlockProps = {
-  title: string;
-  children: React.ReactNode;
-  copyContent?: string;
-  copyId: string;
-  copied: Record<string, boolean>;
-  onCopy: (content: string, id: string) => void;
-  variant?: 'default' | 'bordered';
-  copyButtonVariant?: 'default' | 'light';
-};
-
-function ContentBlock({ 
-  title, 
-  children, 
-  copyContent, 
-  copyId, 
-  copied, 
-  onCopy,
-  variant = 'bordered',
-  copyButtonVariant = 'default'
-}: ContentBlockProps) {
-  const containerClasses = variant === 'bordered' 
-    ? "rounded-lg p-3"
-    : "bg-white border border-gray-200 rounded-lg p-4";
-  
-  const containerStyle = variant === 'bordered' 
-    ? { border: '1px solid #E9EAF5' }
-    : {};
-
-  const titleClasses = variant === 'bordered'
-    ? "text-sm font-medium text-gray-600"
-    : "font-semibold text-sm text-gray-500 m-0";
-
-  return (
-    <div className={containerClasses} style={containerStyle}>
-      <div className="flex justify-between items-start mb-2">
-        <span className={titleClasses}>{title}</span>
-        {copyContent && (
-          <CopyButton
-            onClick={() => onCopy(copyContent, copyId)}
-            isCopied={copied[copyId] || false}
-            variant={copyButtonVariant}
-          />
-        )}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-type QueryDetailsModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  isLoading: boolean;
-  error: string;
-  sqlQuery: string | string[];
-  queryHeadings?: string[];
-  tableButtonExplanations?: Array<{
-    action: string, 
-    explanation: string, 
-    operationSummary?: string,
-    operationDescription?: string,
-    buttonClassName?: string, 
-    buttonStyle?: Record<string, unknown>,
-    formFields?: Record<string, unknown>;
-    jsonBody?: unknown;
-    requestUrl?: string;
-  }>;
-  onRetry: () => void;
-};
-
-export function QueryDetailsModal({
-  isOpen,
-  onClose,
-  isLoading,
-  error,
-  sqlQuery,
-  queryHeadings = [],
-  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;
-    }
-
-    function hasValidJsonBody(jsonBody: unknown): boolean {
-      return jsonBody !== null && jsonBody !== undefined && jsonBody !== '';
-    }
-
-    function hasValidFormFields(formFields: Record<string, unknown> | undefined): boolean {
-      return formFields !== null && formFields !== undefined && Object.keys(formFields || {}).length > 0;
-    }
-
-    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">
-              <div className="flex items-center">
-                <button
-                  onClick={() => toggleButtonExpansion(index)}
-                  className={button.buttonClassName || "flex items-center justify-center px-3 rounded text-xs font-medium"}
-                  style={{
-                    height: '35px',
-                    width: 'fit-content',
-                    minWidth: 'fit-content',
-                    backgroundColor: (button.buttonStyle?.backgroundColor as string),
-                    color: (button.buttonStyle?.color as string),
-                    border: (button.buttonStyle?.border as string),
-                    ...(button.buttonStyle as React.CSSProperties || {})
-                    , ...button.buttonStyle as React.CSSProperties || {},
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                  }}
-                >
-                  {button.action}
-                </button>
-                <div className="ml-3 flex flex-col">
-                  {button.operationSummary && (
-                    <span className="text-xs text-gray-700 font-medium">
-                      {button.operationSummary}
-                    </span>
-                  )}
-                </div>
-              </div>
-              {expandedButtons[index] ? (
-                <ChevronUp 
-                  className="w-4 h-4 text-gray-500 transition-transform cursor-pointer"
-                  onClick={() => toggleButtonExpansion(index)}
-                />
-              ) : (
-                <ChevronDown 
-                  className="w-4 h-4 text-gray-500 transition-transform cursor-pointer"
-                  onClick={() => toggleButtonExpansion(index)}
-                />
-              )}
-            </div>
-            
-            {expandedButtons[index] && (
-              <div className="px-4 pb-3 border-t border-gray-200">
-                <div className="mt-2 space-y-3">
-                  {/* Description Block */}
-                  {button.operationDescription && (
-                    <ContentBlock
-                      title="Description"
-                      copyId={`description-${index}`}
-                      copied={copied}
-                      onCopy={copyToClipboard}
-                      variant="bordered"
-                    >
-                      <ContentText>
-                        {button.operationDescription}
-                      </ContentText>
-                    </ContentBlock>
-                  )}
-
-                  {(button.requestUrl || button.explanation) && (
-                    <ContentBlock
-                      title="URL"
-                      copyContent={button.requestUrl || button.explanation}
-                      copyId={`url-${index}`}
-                      copied={copied}
-                      onCopy={copyToClipboard}
-                      variant="bordered"
-                    >
-                      <ContentText>
-                        {button.requestUrl || button.explanation}
-                      </ContentText>
-                    </ContentBlock>
-                  )}
-                  
-                  {(hasValidJsonBody(button.jsonBody) || hasValidFormFields(button.formFields)) && (
-                    <ContentBlock
-                      title="Payload"
-                      copyContent={JSON.stringify(
-                        hasValidJsonBody(button.jsonBody) ? button.jsonBody : button.formFields, 
-                        null, 
-                        2
-                      )}
-                      copyId={`payload-${index}`}
-                      copied={copied}
-                      onCopy={copyToClipboard}
-                      variant="bordered"
-                    >
-                      <ContentText>
-                        {hasValidJsonBody(button.jsonBody) 
-                          ? JSON.stringify(button.jsonBody, null, 2)
-                          : JSON.stringify(button.formFields, null, 2)}
-                      </ContentText>
-                    </ContentBlock>
-                  )}
-                </div>
-              </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) => {
-
-              const rawHeading = queryHeadings[index] || `Query ${index + 1}`;
-              const heading = formatQueryHeading(rawHeading);
-
-              return (
-                <ContentBlock
-                  key={index}
-                  title={heading}
-                  copyContent={query}
-                  copyId={`query-${index}`}
-                  copied={copied}
-                  onCopy={copyToClipboard}
-                  variant="default"
-                  copyButtonVariant="light"
-                >
-                  <ContentText hasOverflowHandling={false}>
-                    {query}
-                  </ContentText>
-                </ContentBlock>
-              );
-            })}
-          {renderTableButtonExplanations()}
-        </div>
-      );
-    }
-
-    return (
-        <div className="p-6 space-y-4">
-          <ContentBlock
-            title={formatQueryHeading(queryHeadings[0] || "Query details")}
-            copyContent={typeof sqlQuery === 'string' ? sqlQuery : ''}
-            copyId="single"
-            copied={copied}
-            onCopy={copyToClipboard}
-            variant="default"
-            copyButtonVariant="light"
-          >
-            <ContentText hasOverflowHandling={false}>
-              {sqlQuery}
-            </ContentText>
-          </ContentBlock>
-          {renderTableButtonExplanations()}
-        </div>
-    );
-  }
-
-  return (
-    <CustomModal
-      isOpen={isOpen}
-      onClose={onClose}
-      title="How was this metric calculated?"
-    >
-      {renderModalContent()}
-    </CustomModal>
-  );
-}
-
-export default QueryDetailsModal;

package/src/plugins/helpers/query-heading-formatter.ts

@@ -1,24 +0,0 @@
-/**
- * Utility function to format query headings for display
- * Converts technical query keys into presentable headings
- */
-export function formatQueryHeading(heading: string): string {
-  if (!heading) {
-    return 'Query details';
-  }
-
-  let formatted = heading.replace(/_[a-z-]+-[a-z0-9]+$/i, '');
-  
-  formatted = formatted.replace(/_/g, ' ');
-  
-  formatted = formatted.replace(/([a-z])([A-Z])/g, '$1 $2');
-
-  const componentRegex = /\b(table|chart|card|button|text|image|list|modal|dropdown|tabs|header|footer|nav|menu|pagination|search|filter|sort|pagination)\b/gi;
-  formatted = formatted.replace(componentRegex, '').trim();
-  
-  formatted = formatted.replace(/\b\w/g, l => l.toUpperCase());
-  
-  formatted = formatted.replace(/\s+/g, ' ').trim();
-  
-  return formatted || 'Query details';
-}

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

@@ -1,94 +0,0 @@
- import React, { useEffect } from 'react';
-import { X } from 'lucide-react';
-import thinking from '../../shadcn/components/icons/thinking.gif';
-
-type QueryLoadingModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function QueryLoadingModal({ isOpen, onClose }: QueryLoadingModalProps) {
-  
-
-  useEffect(() => {
-    function handleEscapeKey(event: KeyboardEvent) {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-      document.body.style.overflow = 'hidden';
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen, onClose]);
-
-  function handleBackdropClick(event: React.MouseEvent<HTMLDivElement>) {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-      style={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }}
-      onClick={handleBackdropClick}
-    >
-      <div 
-        className="relative bg-white rounded-[16px] shadow-[0px_8px_16px_-4px_rgba(0,0,0,0.1)] w-[481px] h-[258px] flex items-center justify-center p-6"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <button
-          onClick={onClose}
-          className="absolute top-4 right-4 transition-colors duration-200 hover:bg-gray-100 rounded p-1 flex items-center justify-center"
-          type="button"
-          aria-label="Close modal"
-          style={{
-            width: '24px',
-            height: '24px'
-          }}
-        >
-          <X 
-            size={12}
-            className="text-gray-600"
-            style={{ 
-              opacity: 1,
-              transform: 'rotate(0deg)'
-            }}
-          />
-        </button>
-        <div className="flex flex-col items-center space-y-4">
-          <div 
-            className="flex flex-col justify-center items-center"
-            style={{ margin: '16px', gap: '16px' }}
-          >
-            <img 
-              src={thinking}
-              alt="Thinking..."
-              style={{
-                width: '24px',
-                height: '24px'
-              }}
-            />
-          </div>
-          <h3 className="text-xl font-semibold text-[#020D21]">
-            Thinking...
-          </h3>
-          <p className="text-base font-medium text-[#687387]">
-            Generating query for this component
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}