Preview Mode

// Preview mode configuration for large documents
const previewOptions = {
  mode: "preview",
  enableTransform: true,    // Enable JMESPath transformations
  enableSort: false,        // Disable sorting for performance
  search: false,           // Search disabled for large documents
  mainMenuBar: true,       // Show format/transform controls
  statusBar: true          // Show document size and statistics
};

/**
 * Execute a function with a busy message for long operations
 * @param fn - Function to execute
 * @param message - Message to show during execution
 * @returns Promise resolving to function result
 */
executeWithBusyMessage(fn: () => any, message: string): Promise<any>;

// Execute expensive operation with user feedback
const result = await editor.executeWithBusyMessage(
  () => {
    // Perform expensive transformation
    const largeData = editor.get();
    return processLargeDataset(largeData);
  },
  "Processing large dataset..."
);

// Transform large JSON with progress indication
await editor.executeWithBusyMessage(
  () => editor.setText(transformedJsonString),
  "Applying transformation to large document..."
);

/**
 * Format JSON text with progress indication for large documents
 * Inherited from text mode functionality
 */
format(): void;

// Format large JSON - automatically shows progress for large documents
editor.format();

// For very large documents, this may trigger executeWithBusyMessage internally

/**
 * Compact JSON text by removing whitespace
 * Optimized for large documents
 */
compact(): void;

// Compact large JSON document
editor.compact();

// This operation is optimized for large documents
// and may show progress indication

/**
 * Repair invalid JSON syntax in large documents
 * Uses progressive parsing for better performance
 */
repair(): void;

// Repair large invalid JSON document
editor.repair();

// The repair process is optimized for large files
// and shows progress for operations taking longer than expected

// Information displayed in preview mode:
// - Document size (bytes, KB, MB)
// - JSON structure overview (objects, arrays, primitives)
// - Parse time and render time
// - Memory usage statistics

// Transform configuration for large documents
const transformOptions = {
  mode: "preview",
  enableTransform: true,
  
  // Custom query functions optimized for large data
  executeQuery: (json, query) => {
    // Custom implementation with progress tracking
    return executeQueryWithProgress(json, query);
  },
  
  queryDescription: "JMESPath transformations optimized for large datasets"
};

// Transform large dataset with progress indication
const largeDataEditor = new JSONEditor(container, {
  mode: "preview",
  enableTransform: true
});

// Load large JSON
largeDataEditor.setText(largeJsonString);

// Transformations automatically use busy messages for large operations
// User can filter, sort, and project data through the Transform modal

const previewConfig = {
  mode: "preview",
  
  // Enable/disable transform features
  enableTransform: true,
  enableSort: false,
  
  // UI components
  mainMenuBar: true,    // Show Transform/Format buttons
  statusBar: true,      // Show document statistics
  navigationBar: false, // Navigation disabled in preview
  
  // Text formatting
  indentation: 2,       // Spaces for formatting
  escapeUnicode: false  // Unicode display
};

const largeDocConfig = {
  mode: "preview",
  
  // Optimize for large documents
  enableTransform: true,  // Keep transforms enabled
  enableSort: false,      // Disable sorting for performance
  search: false,         // Disable search
  
  // Custom progress handling
  onError: (error) => {
    if (error.message.includes('memory')) {
      showMemoryWarning();
    }
  }
};

// Monitor memory usage in preview mode
const previewEditor = new JSONEditor(container, {
  mode: "preview",
  
  // Handle memory warnings
  onError: (error) => {
    if (error.name === 'MemoryWarning') {
      console.warn('Large document detected:', error.message);
      showPerformanceWarning();
    }
  }
});

// Check document size before loading
function loadLargeDocument(jsonString) {
  const sizeInMB = new Blob([jsonString]).size / (1024 * 1024);
  
  if (sizeInMB > 100) {
    console.warn(`Loading ${sizeInMB.toFixed(1)}MB document`);
    
    // Use preview mode for large documents
    previewEditor.setText(jsonString);
  }
}

// Use preview mode when:
// 1. Document size > 10MB
// 2. Read-only access is sufficient
// 3. Transform/filter operations are needed
// 4. Memory usage is a concern

function chooseMode(jsonString) {
  const size = new Blob([jsonString]).size;
  const sizeMB = size / (1024 * 1024);
  
  if (sizeMB > 10) {
    return "preview"; // Large documents
  } else if (sizeMB > 1) {
    return "code";    // Medium documents
  } else {
    return "tree";    // Small documents
  }
}

// 1. Minimize transformations on very large datasets
// 2. Use specific JMESPath queries rather than broad selections
// 3. Consider pre-processing large documents server-side
// 4. Monitor memory usage in browser dev tools

// Good: Specific query
const specificQuery = "users[?age > 25].{name: name, email: email}";

// Avoid: Broad query on large dataset
const broadQuery = "users[]"; // Returns entire large array