🎮 Interactive Demos & Code Playgrounds¶

// Architecture Builder Configuration
const architectureBuilder = {
  components: {
    compute: ['Serverless SQL', 'Dedicated SQL', 'Spark Pools'],
    storage: ['Data Lake Gen2', 'Blob Storage', 'Cosmos DB'],
    integration: ['Data Factory', 'Event Hubs', 'IoT Hub'],
    security: ['Private Endpoints', 'Managed VNet', 'AAD Auth']
  },
  features: {
    validation: true,        // Real-time architecture validation
    costEstimation: true,   // Live cost calculator
    bestPractices: true,    // Automatic recommendations
    exportOptions: ['ARM', 'Bicep', 'Terraform']
  },
  constraints: {
    maxComponents: 50,
    regions: ['East US', 'West Europe', 'Southeast Asia'],
    compliance: ['HIPAA', 'GDPR', 'SOC2']
  }
};

// Query Optimizer Configuration
class QueryOptimizer {
  constructor() {
    this.rules = [
      {
        name: 'Index Usage',
        check: (query) => this.checkIndexUsage(query),
        suggestion: 'Consider adding indexes on JOIN columns'
      },
      {
        name: 'Partition Elimination',
        check: (query) => this.checkPartitionElimination(query),
        suggestion: 'Add partition filters to reduce data scan'
      },
      {
        name: 'Distribution Strategy',
        check: (query) => this.checkDistribution(query),
        suggestion: 'Use HASH distribution for large fact tables'
      }
    ];
  }

  analyze(query) {
    const results = {
      originalQuery: query,
      issues: [],
      optimizedQuery: '',
      estimatedImprovement: 0
    };

    this.rules.forEach(rule => {
      if (!rule.check(query)) {
        results.issues.push({
          rule: rule.name,
          suggestion: rule.suggestion
        });
      }
    });

    results.optimizedQuery = this.optimize(query);
    results.estimatedImprovement = this.calculateImprovement(query);

    return results;
  }
}

class PerformanceCalculator {
  constructor() {
    this.metrics = {
      dataSize: 0,
      complexity: 'simple',
      concurrency: 1,
      indexing: false,
      partitioning: false,
      caching: false
    };
  }

  calculate() {
    let baseTime = this.metrics.dataSize * 0.01; // seconds per GB

    // Complexity multiplier
    const complexityFactors = {
      simple: 1,
      moderate: 2.5,
      complex: 5,
      extreme: 10
    };
    baseTime *= complexityFactors[this.metrics.complexity];

    // Concurrency impact
    baseTime *= Math.log10(this.metrics.concurrency + 1);

    // Optimization benefits
    if (this.metrics.indexing) baseTime *= 0.3;
    if (this.metrics.partitioning) baseTime *= 0.5;
    if (this.metrics.caching) baseTime *= 0.2;

    return {
      estimatedTime: baseTime,
      throughput: this.metrics.dataSize / baseTime,
      recommendations: this.getRecommendations()
    };
  }

  getRecommendations() {
    const recommendations = [];

    if (!this.metrics.indexing && this.metrics.complexity !== 'simple') {
      recommendations.push('Add indexes to improve query performance');
    }

    if (!this.metrics.partitioning && this.metrics.dataSize > 100) {
      recommendations.push('Implement partitioning for large datasets');
    }

    if (!this.metrics.caching && this.metrics.concurrency > 10) {
      recommendations.push('Enable result caching for high concurrency');
    }

    return recommendations;
  }
}

class LearningPathTracker {
  constructor(userId) {
    this.userId = userId;
    this.progress = this.loadProgress();
  }

  loadProgress() {
    return localStorage.getItem(`progress_${this.userId}`) || {
      completed: [],
      inProgress: [],
      bookmarks: [],
      achievements: []
    };
  }

  completeModule(moduleId) {
    this.progress.completed.push({
      moduleId,
      completedAt: new Date().toISOString(),
      score: this.calculateScore(moduleId)
    });

    this.checkAchievements();
    this.saveProgress();
  }

  getRecommendations() {
    // AI-powered recommendation engine
    const completed = this.progress.completed.map(m => m.moduleId);
    const recommendations = [];

    // Logic to suggest next modules based on completion
    if (completed.includes('basics')) {
      recommendations.push('intermediate-queries');
    }

    if (completed.includes('intermediate-queries')) {
      recommendations.push('performance-optimization');
    }

    return recommendations;
  }
}

// Base Interactive Component Class
class InteractiveComponent {
  constructor(containerId, config = {}) {
    this.container = document.getElementById(containerId);
    this.config = {
      theme: 'light',
      responsive: true,
      accessibility: true,
      analytics: true,
      ...config
    };

    this.init();
  }

  init() {
    this.setupDOM();
    this.attachEventListeners();
    this.loadState();
    this.render();

    if (this.config.analytics) {
      this.trackUsage();
    }
  }

  setupDOM() {
    // Create component structure
    this.container.innerHTML = this.getTemplate();
  }

  getTemplate() {
    return `
      <div class="interactive-component">
        <div class="component-header">
          <h3>${this.config.title}</h3>
          <button class="reset-btn" aria-label="Reset">↻</button>
        </div>
        <div class="component-body">
          ${this.getBodyContent()}
        </div>
        <div class="component-footer">
          ${this.getFooterContent()}
        </div>
      </div>
    `;
  }

  attachEventListeners() {
    // Add interactivity
    this.container.querySelector('.reset-btn')
      .addEventListener('click', () => this.reset());
  }

  trackUsage() {
    // Analytics tracking
    if (window.gtag) {
      window.gtag('event', 'interactive_component_loaded', {
        component_type: this.constructor.name,
        component_id: this.container.id
      });
    }
  }
}

// Track user interactions for improvement
const InteractionTracker = {
  track(event, data) {
    const payload = {
      timestamp: new Date().toISOString(),
      event,
      data,
      sessionId: this.getSessionId(),
      userId: this.getUserId()
    };

    // Send to analytics endpoint
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
  },

  trackDemoUsage(demoId, action) {
    this.track('demo_interaction', {
      demoId,
      action,
      duration: performance.now()
    });
  }
};