@peak-ai/canvas 1.4.21 → 1.4.22

package/src/plugins/helpers/query-cache-singleton.ts

@@ -0,0 +1,176 @@
+import {
+  QueryCacheEntry,
+  InteractionType,
+  InteractionState,
+  createInteractionKey
+} from './query-cache-utils';
+
+class QueryCacheManager {
+  private cache: Map<string, Map<string, QueryCacheEntry>> = new Map();
+  private totalEntries = 0;
+  private maxCacheSize = 100;
+  private maxCacheAge: number = 5 * 60 * 1000; // 5 minutes
+
+  constructor(maxCacheSize = 100, maxCacheAge = 5 * 60 * 1000) {
+    this.maxCacheSize = maxCacheSize;
+    this.maxCacheAge = maxCacheAge;
+  }
+
+  getCachedQuery(
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState
+  ): QueryCacheEntry | null {
+    const componentCache = this.cache.get(componentId);
+    
+    if (!componentCache) {
+      return null;
+    }
+    
+    const key = createInteractionKey(interactionType, state);
+    const entry = componentCache.get(key);
+    
+    if (!entry) {
+      return null;
+    }
+    
+    const now = Date.now();
+
+    if (now - entry.timestamp > this.maxCacheAge) {
+      componentCache.delete(key);
+      this.totalEntries -= 1;
+      
+      if (componentCache.size === 0) {
+        this.cache.delete(componentId);
+      }
+
+      return null;
+    }
+    
+    return entry;
+  }
+
+  setCachedQuery(
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState,
+    entry: QueryCacheEntry
+  ): void {
+    let componentCache = this.cache.get(componentId);
+    
+    if (!componentCache) {
+      componentCache = new Map();
+      this.cache.set(componentId, componentCache);
+    }
+    
+    const key = createInteractionKey(interactionType, state);
+    const isNewEntry = !componentCache.has(key);
+
+    componentCache.set(key, {
+      ...entry,
+      timestamp: Date.now(),
+    });
+    
+    if (isNewEntry) {
+      this.totalEntries += 1;
+    }
+
+    if (this.totalEntries > this.maxCacheSize) {
+      this.cleanupCache();
+    }
+  }
+
+  invalidateComponent(componentId: string): void {
+    const componentCache = this.cache.get(componentId);
+
+    if (componentCache) {
+      this.totalEntries -= componentCache.size;
+      this.cache.delete(componentId);
+    }
+  }
+
+  invalidateAll(): void {
+    this.cache.clear();
+    this.totalEntries = 0;
+  }
+
+  isCached(
+    componentId: string,
+    interactionType: InteractionType,
+    state: InteractionState
+  ): boolean {
+    return this.getCachedQuery(componentId, interactionType, state) !== null;
+  }
+
+  private cleanupCache(): void {
+    const now = Date.now();
+    const allEntries: Array<{ componentId: string; key: string; timestamp: number }> = [];
+    
+    for (const [componentId, componentCache] of this.cache.entries()) {
+      for (const [key, entry] of componentCache.entries()) {
+        if (now - entry.timestamp > this.maxCacheAge) {
+          componentCache.delete(key);
+          this.totalEntries -= 1;
+        } else {
+          allEntries.push({ componentId, key, timestamp: entry.timestamp });
+        }
+      }
+      
+      if (componentCache.size === 0) {
+        this.cache.delete(componentId);
+      }
+    }
+    
+    if (allEntries.length > this.maxCacheSize) {
+      allEntries.sort((a, b) => a.timestamp - b.timestamp);
+      
+      const entriesToRemove = allEntries.slice(0, allEntries.length - this.maxCacheSize);
+      
+      for (const { componentId, key } of entriesToRemove) {
+        const componentCache = this.cache.get(componentId);
+
+        if (componentCache) {
+          componentCache.delete(key);
+          this.totalEntries -= 1;
+          
+          // Remove empty component caches
+          if (componentCache.size === 0) {
+            this.cache.delete(componentId);
+          }
+        }
+      }
+    }
+  }
+  
+  private getTotalCacheSize(): number {
+    return this.totalEntries;
+  }
+
+  getStats(): { componentCount: number; maxAge: number; maxSize: number; size: number } {
+    return {
+      componentCount: this.cache.size,
+      maxAge: this.maxCacheAge,
+      maxSize: this.maxCacheSize,
+      size: this.getTotalCacheSize(),
+    };
+  }
+}
+
+let globalCacheInstance: QueryCacheManager | null = null;
+
+export function getGlobalQueryCache(): QueryCacheManager {
+  if (!globalCacheInstance) {
+    globalCacheInstance = new QueryCacheManager();
+  }
+
+  return globalCacheInstance;
+}
+
+export function resetGlobalQueryCache(): void {
+  globalCacheInstance = null;
+}
+
+export function configureGlobalQueryCache(maxCacheSize = 100, maxCacheAge = 5 * 60 * 1000): void {
+  globalCacheInstance = new QueryCacheManager(maxCacheSize, maxCacheAge);
+}
+

package/src/plugins/helpers/query-cache-utils.ts

@@ -0,0 +1,226 @@
+
+export type InteractionType = 'semanticLayerQuery' | 'tableButton';
+
+export type InteractionState = {
+  [key: string]: unknown;
+  bodyContent?: unknown;
+  chartData?: unknown;
+  chartDataFingerprint?: string;
+  chartDataLength?: number;
+  dataFingerprint?: string;
+  dataLength?: number;
+  error?: unknown;
+  filterValue?: unknown;
+  filters?: Record<string, unknown>;
+  footerContent?: unknown;
+  headerContent?: unknown;
+  isMissing?: unknown;
+  pageNumber?: number;
+  pageSize?: number;
+  searchQuery?: string;
+  searchValue?: string;
+  sortColumn?: string | null;
+  sortDirection?: 'asc' | 'desc' | null;
+  summaryText?: unknown;
+};
+
+export type QueryCacheEntry = {
+  queryHeadings: string[];
+  sqlQuery: string | string[];
+  tableButtonExplanations: Array<{
+    action: string;
+    buttonClassName?: string;
+    buttonStyle?: Record<string, unknown>;
+    explanation: string;
+    formFields?: Record<string, unknown>;
+    jsonBody?: unknown;
+    operationDescription?: string;
+    operationSummary?: string;
+    requestUrl?: string;
+  }>;
+  timestamp: number;
+};
+
+export type CacheKey = {
+  componentId: string;
+  interactionType: InteractionType;
+  state: InteractionState;
+};
+
+export function createCacheKey(
+  componentId: string,
+  interactionType: InteractionType,
+  interactionState: InteractionState
+): string {
+  const sortedState = sortObjectKeys(interactionState);
+  
+  try {
+    const stateString = JSON.stringify(sortedState);
+    
+    return `${componentId}::${interactionType}::${stateString}`;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to serialize interaction state:', error);
+    
+    return `${componentId}::${interactionType}::${Date.now()}::${Math.random()}`;
+  }
+}
+
+export function createInteractionKey(
+  interactionType: InteractionType,
+  interactionState: InteractionState
+): string {
+  const sortedState = sortObjectKeys(interactionState);
+  
+  try {
+    const stateString = JSON.stringify(sortedState);
+    
+    return `${interactionType}::${stateString}`;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to serialize interaction state:', error);
+    
+    return `${interactionType}::${Date.now()}::${Math.random()}`;
+  }
+}
+
+function sortObjectKeys(obj: unknown): unknown {
+  if (obj === null || obj === undefined) {
+    return obj;
+  }
+  
+  if (Array.isArray(obj)) {
+    return obj.map(item => sortObjectKeys(item));
+  }
+  
+  if (typeof obj === 'object') {
+    const sorted: Record<string, unknown> = {};
+    const keys = Object.keys(obj as Record<string, unknown>).sort();
+    
+    for (const key of keys) {
+      sorted[key] = sortObjectKeys((obj as Record<string, unknown>)[key]);
+    }
+    
+    return sorted;
+  }
+  
+  return obj;
+}
+
+export function extractInteractionState(componentProps: Record<string, unknown>): InteractionState {
+  const state: InteractionState = {};
+  
+  if ('pagination' in componentProps && typeof componentProps.pagination === 'object' && componentProps.pagination) {
+    const pagination = componentProps.pagination as Record<string, unknown>;
+
+    if ('pageNumber' in pagination && typeof pagination.pageNumber === 'number') {
+      state.pageNumber = pagination.pageNumber;
+    }
+
+    if ('pageSize' in pagination && typeof pagination.pageSize === 'number') {
+      state.pageSize = pagination.pageSize;
+    }
+  }
+  
+  if ('sortColumn' in componentProps) {
+    state.sortColumn = componentProps.sortColumn as string | null;
+  }
+  
+  if ('sortDirection' in componentProps) {
+    state.sortDirection = componentProps.sortDirection as 'asc' | 'desc' | null;
+  }
+  
+  if ('filters' in componentProps && typeof componentProps.filters === 'object') {
+    state.filters = componentProps.filters as Record<string, unknown>;
+  }
+  
+  if ('value' in componentProps) {
+    state.filterValue = componentProps.value as unknown;
+  }
+  
+  if ('searchQuery' in componentProps && typeof componentProps.searchQuery === 'string') {
+    state.searchQuery = componentProps.searchQuery;
+  }
+  
+  if ('searchValue' in componentProps && typeof componentProps.searchValue === 'string') {
+    state.searchValue = componentProps.searchValue;
+  }
+
+  if ('data' in componentProps) {
+    const data = componentProps.data;
+    
+    if (Array.isArray(data) && data.length > 0) {
+      state.dataLength = data.length;
+      const firstRow = data[0];
+      const lastRow = data[data.length - 1];
+      
+      if (firstRow && typeof firstRow === 'object') {
+        try {
+          state.dataFingerprint = JSON.stringify({
+            firstId: (firstRow as Record<string, unknown>).id || Object.values(firstRow)[0],
+            lastId: lastRow && typeof lastRow === 'object' 
+              ? ((lastRow as Record<string, unknown>).id || Object.values(lastRow)[0])
+              : null,
+            length: data.length
+          });
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to serialize data fingerprint:', error);
+          state.dataFingerprint = `fallback_${data.length}_${Date.now()}`;
+        }
+      }
+    } else if (data && typeof data === 'object' && (data as Record<string, unknown>).name === '__peak_placeholder') {
+      state.dataFingerprint = '__peak_placeholder';
+    } else {
+      state.dataFingerprint = 'empty';
+    }
+  }
+  
+  if ('bodyContent' in componentProps) {
+    state.bodyContent = componentProps.bodyContent as unknown;
+  }
+  
+  if ('headerContent' in componentProps) {
+    state.headerContent = componentProps.headerContent as unknown;
+  }
+  
+  if ('footerContent' in componentProps) {
+    state.footerContent = componentProps.footerContent as unknown;
+  }
+  
+  if ('chartData' in componentProps) {
+    const chartData = componentProps.chartData;
+
+    if (Array.isArray(chartData)) {
+      state.chartDataLength = chartData.length;
+
+      try {
+        state.chartDataFingerprint = JSON.stringify(chartData);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to serialize chart data fingerprint:', error);
+        state.chartDataFingerprint = `fallback_${chartData.length}_${Date.now()}`;
+      }
+    }
+  }
+  
+  if ('summaryText' in componentProps) {
+    state.summaryText = componentProps.summaryText as unknown;
+  }
+  
+  if ('error' in componentProps) {
+    state.error = componentProps.error as unknown;
+  }
+  
+  if ('isMissing' in componentProps) {
+    state.isMissing = componentProps.isMissing as unknown;
+  }
+  
+  return state;
+}
+
+export function areStatesEqual(state1: InteractionState, state2: InteractionState): boolean {
+  return createCacheKey('test', 'semanticLayerQuery', state1) === 
+         createCacheKey('test', 'semanticLayerQuery', state2);
+}
+