diff options
Diffstat (limited to 'static/js')
| -rw-r--r-- | static/js/app.js | 285 |
1 files changed, 285 insertions, 0 deletions
diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..5cde1b7 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,285 @@ +let editor;
+let currentLanguage = 'javascript';
+let chart = null;
+let loadingInterval = null;
+let loadingMessageIndex = 0;
+
+const loadingMessages = [
+ "Parsing code structure...",
+ "Analyzing algorithm patterns...",
+ "Detecting time complexity...",
+ "Identifying nested loops...",
+ "Checking for recursion...",
+ "Examining data structures...",
+ "Loading execution environment...",
+ "Compiling test cases...",
+ "Generating test data...",
+ "Running performance benchmarks...",
+ "Measuring execution time...",
+ "Testing with small inputs...",
+ "Testing with large inputs...",
+ "Analyzing growth patterns...",
+ "Calculating complexity metrics...",
+ "Fitting complexity curves...",
+ "Validating results...",
+ "Finalizing analysis..."
+];
+
+const irregularIntervals = [2400, 3800, 4500, 1000, 2900, 4300, 1100, 3400, 950, 2250, 850, 3200, 2050, 1200, 1400, 1800, 900, 1300];
+
+require.config({
+ paths: {
+ vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs'
+ }
+});
+
+require(['vs/editor/editor.main'], function () {
+ editor = monaco.editor.create(document.getElementById('editor'), {
+ value: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}',
+ language: 'javascript',
+ theme: 'vs-dark',
+ fontSize: 14,
+ minimap: { enabled: false },
+ scrollBeyondLastLine: false,
+ automaticLayout: true,
+ lineNumbers: 'on',
+ roundedSelection: false,
+ scrollbar: {
+ vertical: 'visible',
+ horizontal: 'visible'
+ }
+ });
+
+ setupEventListeners();
+});
+
+function setupEventListeners() {
+ // Language selector
+ document.getElementById('languageSelect').addEventListener('change', (e) => {
+ currentLanguage = e.target.value;
+ monaco.editor.setModelLanguage(editor.getModel(), currentLanguage);
+
+ // default code template
+ const templates = {
+ javascript: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}',
+ python: '# Write your algorithm here\ndef algorithm(arr):\n # Your code\n return arr',
+ go: '// Write your algorithm here\nfunc algorithm(arr []int) []int {\n // Your code\n return arr\n}'
+ };
+ editor.setValue(templates[currentLanguage]);
+ });
+
+ // Analyze button
+ document.getElementById('analyzeBtn').addEventListener('click', analyzeCode);
+}
+
+function startDynamicLoading() {
+ loadingMessageIndex = 0;
+ const loadingText = document.querySelector('#loadingState p');
+
+ function updateMessage() {
+ if (loadingMessageIndex < loadingMessages.length) {
+ loadingText.textContent = loadingMessages[loadingMessageIndex];
+
+ if (loadingMessageIndex < loadingMessages.length - 1) {
+ const nextInterval = irregularIntervals[loadingMessageIndex];
+ loadingMessageIndex++;
+ loadingInterval = setTimeout(updateMessage, nextInterval);
+ } else {
+ loadingMessageIndex++;
+ }
+ }
+ }
+
+ updateMessage();
+}
+
+function stopDynamicLoading() {
+ if (loadingInterval) {
+ clearTimeout(loadingInterval);
+ loadingInterval = null;
+ }
+}
+
+async function analyzeCode() {
+ const code = editor.getValue();
+
+ if (!code.trim()) {
+ alert('Please enter code to analyze');
+ return;
+ }
+
+ showLoading();
+ startDynamicLoading();
+
+ const analyzeBtn = document.getElementById('analyzeBtn');
+ analyzeBtn.disabled = true;
+
+ try {
+ const response = await fetch('/api/analyze', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ code: code,
+ language: currentLanguage
+ })
+ });
+
+ const result = await response.json();
+
+ if (!response.ok) {
+ throw new Error(result.error || 'Analysis failed');
+ }
+
+ displayResults(result);
+ } catch (error) {
+ displayError(error.message);
+ } finally {
+ stopDynamicLoading();
+ analyzeBtn.disabled = false;
+ }
+}
+
+function showLoading() {
+ document.getElementById('resultsContent').style.display = 'none';
+ document.getElementById('loadingState').classList.add('active');
+}
+
+function displayResults(result) {
+ stopDynamicLoading();
+ document.getElementById('loadingState').classList.remove('active');
+ document.getElementById('resultsContent').style.display = 'block';
+
+ const resultsHTML = `
+ <div class="result-section">
+ <h3>Detected Complexity</h3>
+ <div class="complexity-badge">${result.complexity}</div>
+ <p style="margin-top: 8px; font-size: 12px; color: #858585;">
+ Confidence: ${result.confidence.toFixed(1)}%
+ </p>
+ </div>
+
+ <div class="result-section">
+ <h3>Static Analysis</h3>
+ <ul class="info-list">
+ ${result.staticAnalysis.map(item => `<li>${item}</li>`).join('')}
+ </ul>
+ </div>
+
+ <div class="result-section">
+ <h3>Performance Graph</h3>
+ <div class="chart-container">
+ <canvas id="performanceChart"></canvas>
+ </div>
+ </div>
+
+ <div class="result-section">
+ <h3>Execution Timings</h3>
+ <ul class="info-list">
+ ${result.performanceData.map(t =>
+ `<li>n = ${t.size}: ${t.time.toFixed(3)}ms</li>`
+ ).join('')}
+ </ul>
+ </div>
+ `;
+
+ document.getElementById('resultsContent').innerHTML = resultsHTML;
+
+ renderChart(result.performanceData, result.complexity);
+}
+
+function renderChart(data, complexity) {
+ if (typeof Chart === 'undefined') {
+ console.error('Chart.js is not available');
+ return;
+ }
+
+ const ctx = document.getElementById('performanceChart');
+
+ // Destroy previous chart if exists
+ if (chart) {
+ chart.destroy();
+ }
+
+ chart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: data.map(d => d.size),
+ datasets: [{
+ label: `Execution Time (${complexity})`,
+ data: data.map(d => d.time),
+ borderColor: '#667eea',
+ backgroundColor: 'rgba(102, 126, 234, 0.1)',
+ borderWidth: 2,
+ pointRadius: 4,
+ pointBackgroundColor: '#667eea',
+ tension: 0.4
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: { color: '#d4d4d4' }
+ },
+ tooltip: {
+ backgroundColor: '#252526',
+ titleColor: '#fff',
+ bodyColor: '#d4d4d4',
+ borderColor: '#3e3e42',
+ borderWidth: 1
+ }
+ },
+ scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Input Size (n)',
+ color: '#d4d4d4'
+ },
+ ticks: { color: '#858585' },
+ grid: { color: '#3e3e42' }
+ },
+ y: {
+ title: {
+ display: true,
+ text: 'Time (ms)',
+ color: '#d4d4d4'
+ },
+ ticks: { color: '#858585' },
+ grid: { color: '#3e3e42' }
+ }
+ }
+ }
+ });
+}
+
+function displayError(message) {
+ stopDynamicLoading();
+ document.getElementById('loadingState').classList.remove('active');
+ document.getElementById('resultsContent').style.display = 'block';
+ document.getElementById('resultsContent').innerHTML = `
+ <div class="result-section">
+ <h3 style="color: #f48771;">Error</h3>
+ <div style="background: #1e1e1e; padding: 12px; border-radius: 4px; color: #f48771;">
+ ${message}
+ </div>
+ </div>
+ `;
+}
+
+// Initialize app when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initApp);
+} else {
+ initApp();
+}
+
+function initApp() {
+ if (typeof Chart === 'undefined') {
+ console.error('Chart.js failed to load');
+ alert('Failed to load required libraries. Please refresh the page.');
+ }
+}
\ No newline at end of file |