x-ipe 1.0.24__py3-none-any.whl → 1.0.25__py3-none-any.whl

x_ipe/static/js/features/sidebar.js

@@ -16,6 +16,12 @@ class ProjectSidebar {
         this.changedPaths = new Set();
         this.previousPathMtimes = new Map();  // Map<path, mtime> for content change detection
         
+        // Track expanded/pinned state to preserve across re-renders
+        this.pinnedSections = new Set();  // Set of section IDs
+        this.pinnedFolders = new Set();   // Set of folder paths
+        this.expandedSections = new Set(); // Set of section IDs
+        this.expandedFolders = new Set();  // Set of folder paths
+        
         this._startPolling();
     }
     
@@ -225,6 +231,9 @@ class ProjectSidebar {
             return;
         }
         
+        // Save current expanded/pinned state before re-rendering
+        this._saveExpandedState();
+        
         let html = '';
         
         for (const section of this.sections) {
@@ -233,6 +242,95 @@ class ProjectSidebar {
         
         this.container.innerHTML = html;
         this.bindEvents();
+        
+        // Restore expanded/pinned state after re-rendering
+        this._restoreExpandedState();
+    }
+    
+    /**
+     * Save current expanded and pinned state from DOM
+     */
+    _saveExpandedState() {
+        // Save expanded sections
+        this.container.querySelectorAll('.nav-section-content.show').forEach(content => {
+            const sectionId = content.id.replace('section-', '');
+            this.expandedSections.add(sectionId);
+        });
+        
+        // Save pinned sections
+        this.container.querySelectorAll('.nav-section-header.pinned').forEach(header => {
+            const target = header.dataset.bsTarget;
+            if (target) {
+                const sectionId = target.replace('#section-', '');
+                this.pinnedSections.add(sectionId);
+            }
+        });
+        
+        // Save expanded folders
+        this.container.querySelectorAll('.nav-folder-content.show').forEach(content => {
+            const folderHeader = this.container.querySelector(`[data-bs-target="#${content.id}"]`);
+            if (folderHeader && folderHeader.dataset.path) {
+                this.expandedFolders.add(folderHeader.dataset.path);
+            }
+        });
+        
+        // Save pinned folders
+        this.container.querySelectorAll('.nav-folder.pinned').forEach(folder => {
+            if (folder.dataset.path) {
+                this.pinnedFolders.add(folder.dataset.path);
+            }
+        });
+    }
+    
+    /**
+     * Restore expanded and pinned state after render
+     */
+    _restoreExpandedState() {
+        // Restore expanded sections
+        this.expandedSections.forEach(sectionId => {
+            const content = document.getElementById(`section-${sectionId}`);
+            const header = this.container.querySelector(`[data-bs-target="#section-${sectionId}"]`);
+            if (content && header) {
+                content.classList.add('show');
+                header.classList.remove('collapsed');
+            }
+        });
+        
+        // Restore pinned sections (also expand them)
+        this.pinnedSections.forEach(sectionId => {
+            const content = document.getElementById(`section-${sectionId}`);
+            const header = this.container.querySelector(`[data-bs-target="#section-${sectionId}"]`);
+            if (content && header) {
+                content.classList.add('show');
+                header.classList.remove('collapsed');
+                header.classList.add('pinned');
+            }
+        });
+        
+        // Restore expanded folders
+        this.expandedFolders.forEach(folderPath => {
+            const folder = this.container.querySelector(`.nav-folder[data-path="${folderPath}"]`);
+            if (folder) {
+                const targetSelector = folder.dataset.bsTarget;
+                const content = document.querySelector(targetSelector);
+                if (content) {
+                    content.classList.add('show');
+                }
+            }
+        });
+        
+        // Restore pinned folders (also expand them)
+        this.pinnedFolders.forEach(folderPath => {
+            const folder = this.container.querySelector(`.nav-folder[data-path="${folderPath}"]`);
+            if (folder) {
+                folder.classList.add('pinned');
+                const targetSelector = folder.dataset.bsTarget;
+                const content = document.querySelector(targetSelector);
+                if (content) {
+                    content.classList.add('show');
+                }
+            }
+        });
     }
     
     /**
@@ -243,6 +341,8 @@ class ProjectSidebar {
         const hasChildren = section.children && section.children.length > 0;
         
         // CR-004: Special handling for Workplace section - show submenu with Ideation and UIUX Feedbacks
+        // FEATURE-023-B: Added Tracing submenu item
+        // FEATURE-024: Added Quality Evaluation submenu item
         if (section.id === 'workplace') {
             return `
                 <div class="nav-section" data-section-id="${section.id}">
@@ -260,6 +360,14 @@ class ProjectSidebar {
                             <i class="bi bi-chat-square-text"></i>
                             <span>UIUX Feedbacks</span>
                         </div>
+                        <div class="nav-section-header sidebar-child nav-tracing" data-section-id="tracing">
+                            <i class="bi bi-graph-up"></i>
+                            <span>Application Tracing</span>
+                        </div>
+                        <div class="nav-section-header sidebar-child nav-quality-evaluation" data-section-id="quality-evaluation">
+                            <i class="bi bi-clipboard-check"></i>
+                            <span>Quality Evaluation</span>
+                        </div>
                     </div>
                 </div>
             `;
@@ -267,7 +375,7 @@ class ProjectSidebar {
         
         let html = `
             <div class="nav-section" data-section-id="${section.id}">
-                <div class="nav-section-header collapsed" data-bs-toggle="collapse" data-bs-target="#section-${section.id}">
+                <div class="nav-section-header collapsed" data-bs-target="#section-${section.id}">
                     <i class="bi ${icon}"></i>
                     <span>${section.label}</span>
                     <i class="bi bi-chevron-down chevron"></i>
@@ -328,7 +436,6 @@ class ProjectSidebar {
         let html = `
             <div class="nav-item nav-folder${isChanged ? ' has-changes' : ''}" 
                  style="padding-left: ${paddingLeft}rem"
-                 data-bs-toggle="collapse" 
                  data-bs-target="#folder-${folderId}"
                  data-path="${folder.path}">
                 ${isChanged ? '<span class="change-indicator"></span>' : ''}
@@ -505,6 +612,88 @@ class ProjectSidebar {
             });
         }
         
+        // FEATURE-023-B: Tracing click handler - render Tracing Dashboard in content area
+        const tracingHeader = this.container.querySelector('.nav-tracing');
+        if (tracingHeader) {
+            tracingHeader.addEventListener('click', () => {
+                // Clear file selection
+                fileItems.forEach(f => f.classList.remove('active'));
+                this.selectedFile = null;
+                
+                // Update sidebar-child active state
+                const sidebarChildren = this.container.querySelectorAll('.sidebar-child');
+                sidebarChildren.forEach(child => child.classList.remove('active'));
+                tracingHeader.classList.add('active');
+                
+                // Clear contentRenderer.currentPath to prevent auto-refresh
+                if (window.contentRenderer) {
+                    window.contentRenderer.currentPath = null;
+                }
+                
+                // Hide Create Idea button
+                const createIdeaBtn = document.getElementById('btn-create-idea');
+                if (createIdeaBtn) {
+                    createIdeaBtn.classList.add('d-none');
+                }
+                
+                // Update breadcrumb
+                const breadcrumb = document.getElementById('breadcrumb');
+                breadcrumb.innerHTML = '<li class="breadcrumb-item active">Application Tracing</li>';
+                
+                // Render Tracing Dashboard in content area
+                const container = document.getElementById('content-body');
+                if (window.TracingDashboard) {
+                    // Clean up any existing dashboard
+                    if (window._tracingDashboardInstance) {
+                        window._tracingDashboardInstance.destroy();
+                    }
+                    window._tracingDashboardInstance = new window.TracingDashboard(container);
+                    window._tracingDashboardInstance.init();
+                }
+            });
+        }
+        
+        // FEATURE-024: Quality Evaluation submenu click handler
+        const qualityEvalHeader = this.container.querySelector('.nav-quality-evaluation');
+        if (qualityEvalHeader) {
+            qualityEvalHeader.addEventListener('click', () => {
+                // Clear file selection
+                fileItems.forEach(f => f.classList.remove('active'));
+                this.selectedFile = null;
+                
+                // Update sidebar-child active state
+                const sidebarChildren = this.container.querySelectorAll('.sidebar-child');
+                sidebarChildren.forEach(child => child.classList.remove('active'));
+                qualityEvalHeader.classList.add('active');
+                
+                // Clear contentRenderer.currentPath to prevent auto-refresh
+                if (window.contentRenderer) {
+                    window.contentRenderer.currentPath = null;
+                }
+                
+                // Hide Create Idea button
+                const createIdeaBtn = document.getElementById('btn-create-idea');
+                if (createIdeaBtn) {
+                    createIdeaBtn.classList.add('d-none');
+                }
+                
+                // Update breadcrumb
+                const breadcrumb = document.getElementById('breadcrumb');
+                breadcrumb.innerHTML = '<li class="breadcrumb-item active">Quality Evaluation</li>';
+                
+                // Render Quality Evaluation view in content area
+                const container = document.getElementById('content-body');
+                if (window.QualityEvaluationView) {
+                    // Clean up any existing view
+                    if (window._qualityEvaluationInstance) {
+                        window._qualityEvaluationInstance.destroy();
+                    }
+                    window._qualityEvaluationInstance = new window.QualityEvaluationView(container);
+                    window._qualityEvaluationInstance.init();
+                }
+            });
+        }
+        
         // CR-004: Prevent parent item click action
         const parentItems = this.container.querySelectorAll('.sidebar-parent[data-no-action="true"]');
         parentItems.forEach(item => {
@@ -548,7 +737,9 @@ class ProjectSidebar {
             
             let collapseTimeout = null;
             let expandTimeout = null;
-            let isPinned = false;
+            // Initialize isPinned from persisted state
+            const sectionId = targetSelector.replace('#section-', '');
+            let isPinned = this.pinnedSections.has(sectionId);
             const section = header.closest('.nav-section');
             
             // Click to pin/unpin
@@ -568,15 +759,17 @@ class ProjectSidebar {
                 if (isPinned) {
                     // Unpin and collapse
                     isPinned = false;
+                    this.pinnedSections.delete(sectionId);
+                    this.expandedSections.delete(sectionId);
                     header.classList.remove('pinned');
                     bootstrap.Collapse.getOrCreateInstance(target).hide();
                 } else {
-                    // Pin and expand
+                    // Pin and expand - always show to ensure it stays open
                     isPinned = true;
+                    this.pinnedSections.add(sectionId);
+                    this.expandedSections.add(sectionId);
                     header.classList.add('pinned');
-                    if (!target.classList.contains('show')) {
-                        bootstrap.Collapse.getOrCreateInstance(target).show();
-                    }
+                    bootstrap.Collapse.getOrCreateInstance(target).show();
                 }
             });
             
@@ -633,7 +826,9 @@ class ProjectSidebar {
             
             let collapseTimeout = null;
             let expandTimeout = null;
-            let isPinned = false;
+            // Initialize isPinned from persisted state
+            const folderPath = folder.dataset.path;
+            let isPinned = this.pinnedFolders.has(folderPath);
             
             // Click to pin/unpin
             folder.addEventListener('click', (e) => {
@@ -652,15 +847,17 @@ class ProjectSidebar {
                 if (isPinned) {
                     // Unpin and collapse
                     isPinned = false;
+                    this.pinnedFolders.delete(folderPath);
+                    this.expandedFolders.delete(folderPath);
                     folder.classList.remove('pinned');
                     bootstrap.Collapse.getOrCreateInstance(target).hide();
                 } else {
-                    // Pin and expand
+                    // Pin and expand - always show to ensure it stays open
                     isPinned = true;
+                    this.pinnedFolders.add(folderPath);
+                    this.expandedFolders.add(folderPath);
                     folder.classList.add('pinned');
-                    if (!target.classList.contains('show')) {
-                        bootstrap.Collapse.getOrCreateInstance(target).show();
-                    }
+                    bootstrap.Collapse.getOrCreateInstance(target).show();
                 }
             });
             
@@ -773,6 +970,52 @@ class ProjectSidebar {
         document.dispatchEvent(event);
     }
     
+    /**
+     * FEATURE-026: Expand a sidebar section by ID
+     * @param {string} sectionId - Section ID to expand
+     */
+    expandSection(sectionId) {
+        const sectionHeader = document.querySelector(`[data-section="${sectionId}"] .section-header`);
+        if (sectionHeader) {
+            const section = sectionHeader.closest('.sidebar-section');
+            if (section && !section.classList.contains('expanded')) {
+                sectionHeader.click();
+            }
+        }
+    }
+    
+    /**
+     * FEATURE-026: Highlight a sidebar item
+     * @param {string} selector - CSS selector for target item
+     * @param {Object} options - Highlight options
+     * @param {number} options.duration - Highlight duration in ms (default 3000)
+     */
+    highlightItem(selector, options = {}) {
+        const duration = options.duration || 3000;
+        const item = document.querySelector(selector);
+        
+        if (!item) {
+            console.warn(`Sidebar item not found: ${selector}`);
+            return;
+        }
+        
+        // Remove any existing highlights
+        document.querySelectorAll('.homepage-highlight').forEach(el => {
+            el.classList.remove('homepage-highlight');
+        });
+        
+        // Add highlight class
+        item.classList.add('homepage-highlight');
+        
+        // Scroll into view
+        item.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        
+        // Remove highlight after delay
+        setTimeout(() => {
+            item.classList.remove('homepage-highlight');
+        }, duration);
+    }
+    
     /**
      * Show toast notification
      */