Update playwright_model.py

playwright_model.py

@@ -6,7 +6,6 @@ from fpdf import FPDF
 
 OUTPUT_DIR = "static/outputs"
 
-
 async def capture_workflows(public_url: str, pdf_filename: str = "workflow_screens.pdf"):
     os.makedirs(OUTPUT_DIR, exist_ok=True)
     pdf_path = os.path.join(OUTPUT_DIR, pdf_filename)
@@ -17,6 +16,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         print(f"Opening page: {public_url}")
         await page.goto(public_url, wait_until="load")
 
+        # Wait for layout to stabilize
         async def wait_for_layout_stable():
             await page.evaluate("""
                 (async () => {
@@ -40,6 +40,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                 })();
             """)
 
+        # Fix sidebar permanently below top bar
         async def fix_sidebar_permanently():
             try:
                 await page.evaluate("""
@@ -47,7 +48,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                     if (sidebar) {
                         const rect = sidebar.getBoundingClientRect();
                         const sidebarWidth = rect.width || sidebar.offsetWidth || 220;
-                        const topOffset = 60; // pixels to push sidebar downward below header
+                        const topOffset = 60; // px height of top bar
                         sidebar.style.position = 'fixed';
                         sidebar.style.top = topOffset + 'px';
                         sidebar.style.left = '0';
@@ -58,43 +59,52 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                         sidebar.style.transition = 'none';
                         sidebar.dataset.locked = 'true';
                     }
+
                     const main = document.querySelector('main, .main-content, .app-body, .content');
                     if (main && sidebar) {
                         main.style.marginLeft = sidebar.offsetWidth + 'px';
                         main.style.position = 'relative';
                         main.style.top = '0';
                     }
+
                     window.scrollTo(0, 0);
                     document.documentElement.scrollTop = 0;
                     document.body.scrollTop = 0;
                     document.body.style.margin = '0';
                     document.body.style.padding = '0';
-                    document.body.style.overflow = 'hidden';                    
+                    document.body.style.overflow = 'hidden';
                 """)
             except Exception as e:
                 print(f"[WARN] Sidebar fix failed: {e}")
 
+        # Wait for sidebar to appear
         await page.wait_for_selector("aside, .sidebar, nav", timeout=5000)
         await wait_for_layout_stable()
         await fix_sidebar_permanently()
-        await asyncio.sleep(0.6)
+        await asyncio.sleep(1)
 
+        # JS to enumerate workflows and tabs
         js_logic = """
         (function(){
-          const getAllMenus = ()=>[...document.querySelectorAll('.menu-item, nav a, aside a, .sidebar a')];
+          const menus=[...document.querySelectorAll('.menu-item')];
           const screens=[...document.querySelectorAll('.screen')];
           window.__ordered=[];
           const seen=new Set();
-          for(const m of getAllMenus()){
+
+          for(const m of menus){
             let id=m.dataset.screen||m.dataset.target;
             if(!id){
-              const href=m.getAttribute('href')||m.getAttribute('data-target')||'';
+              const href=m.getAttribute('href');
               if(href && href.startsWith('#')) id=href.substring(1);
             }
             const s=screens.find(x=>x.id===id);
-            if(s && !seen.has(s)){seen.add(s);window.__ordered.push({menuRef:id,screen:s});}
+            if(s && !seen.has(s)){seen.add(s);window.__ordered.push({menu:m,screen:s});}
           }
-          for(const s of screens) if(!seen.has(s)) window.__ordered.push({menuRef:null,screen:s});
+
+          for(const s of screens)
+            if(!seen.has(s))
+              window.__ordered.push({menu:null,screen:s});
+
           window.__visitedWorkflows=[];
           window.__currentIndex=0;
           window.__done=false;
@@ -109,75 +119,28 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             return list;
           };
 
-          window.__findMenuForScreen = function(screen){
-            if(!screen) return null;
-            const idCandidates = [];
-            if(screen.id) idCandidates.push(screen.id);
-            const dataName = screen.getAttribute('data-name');
-            if(dataName) idCandidates.push(dataName);
-            // also try visible title text inside the screen
-            const titleEl = screen.querySelector('.page-title, .header-title, h1, h2, h3');
-            if(titleEl && titleEl.textContent) idCandidates.push(titleEl.textContent.trim());
-
-            const menus = getAllMenus();
-            for(const m of menus){
-              let mid = m.dataset.screen||m.dataset.target||'';
-              if(!mid){
-                const href = m.getAttribute('href')||m.getAttribute('data-target')||'';
-                if(href && href.startsWith('#')) mid = href.substring(1);
-              }
-              if(mid && idCandidates.includes(mid)) return m;
-            }
-            // fallback: try matching by visible text
-            for(const m of menus){
-              const txt = m.textContent?.trim();
-              if(txt && idCandidates.some(c=>c.toLowerCase()===txt.toLowerCase())) return m;
-            }
-            return null;
-          };
-
-          window.__clearHighlight = function(){
-            getAllMenus().forEach(el=>{
-              el.style.backgroundColor='';
-              el.style.color='';
-              el.style.borderRadius='';
-              el.style.boxShadow='';
-            });
-          };
-
-          window.__highlightMenuElement = function(menuEl){
-            window.__clearHighlight();
-            if(!menuEl) return;
-            menuEl.style.backgroundColor='#0078d4';
-            menuEl.style.color='white';
-            menuEl.style.borderRadius='4px';
-            menuEl.style.boxShadow='0 1px 3px rgba(0,0,0,0.15)';
-            menuEl.scrollIntoView({block:'nearest', inline:'nearest'});
-          };
-
           window.__captureNext=async function(){
             if(window.__done) return false;
             if(window.__currentIndex>=window.__ordered.length){window.__done=true;return false;}
+
             const pair=window.__ordered[window.__currentIndex];
-            const {screen}=pair;
+            const {menu,screen}=pair;
             if(!screen){window.__done=true;return false;}
+
             const wfName=screen.id || screen.getAttribute('data-name') || ('screen_'+window.__currentIndex);
             if(window.__visitedWorkflows.includes(wfName)){
               window.__currentIndex++;
               return window.__captureNext();
             }
-            window.__visitedWorkflows.push(wfName);
 
+            window.__visitedWorkflows.push(wfName);
             document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
+            document.querySelectorAll('.menu-item').forEach(m=>m.classList.remove('active'));
             screen.classList.add('active');
-
-            // find matching menu dynamically each time
-            const menuEl = window.__findMenuForScreen(screen);
-            window.__highlightMenuElement(menuEl);
-
-            // center screen in viewport
+            if(menu) menu.classList.add('active');
             screen.scrollIntoView({behavior:'smooth',block:'center'});
             window.__currentIndex++;
+
             const subs = window.__getSubScreens(screen);
             return {screenName:wfName, subScreens:subs};
           };
@@ -191,11 +154,12 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         })();
         """
         await page.evaluate(js_logic)
-        await asyncio.sleep(0.6)
+        await asyncio.sleep(1)
 
         screenshots = []
         index = 0
 
+        # Capture all screens + sub-screens
         while True:
             result = await page.evaluate("window.__captureNext()")
             if not result:
@@ -208,7 +172,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
 
             await wait_for_layout_stable()
             await fix_sidebar_permanently()
-            await asyncio.sleep(0.6)
+            await asyncio.sleep(0.8)
             await page.screenshot(path=screenshot_path, full_page=True)
             screenshots.append(screenshot_path)
 
@@ -232,11 +196,10 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                 await page.evaluate(f"window.__clickSubScreen('{sub}')")
                 await wait_for_layout_stable()
                 await fix_sidebar_permanently()
-                await asyncio.sleep(0.6)
+                await asyncio.sleep(0.8)
 
                 sub_name_clean = sub.replace(" ", "_").lower()
                 sub_path = os.path.join(OUTPUT_DIR, f"{screen_name}_{sub_name_clean}.png")
-
                 await page.screenshot(path=sub_path, full_page=True)
                 screenshots.append(sub_path)