frontend/latex/output: simplify auto sync state management

Author: haraldschilly

src/packages/frontend/frame-editors/latex-editor/actions.ts

@@ -1,4 +1,4 @@
- /*
+/*
  *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
@@ -7,7 +7,6 @@
 LaTeX Editor Actions.
 */
 
-
 // cSpell:ignore rtex cmdl ramdisk maketitle documentclass outdirflag latexer rescan
 
 const MINIMAL = `\\documentclass{article}
@@ -106,7 +105,7 @@ interface LatexEditorState extends CodeEditorState {
   switch_output_to_pdf_tab?: boolean; // used for SyncTeX to switch output panel to PDF tab
   output_panel_id_for_sync?: string; // stores the output panel ID for SyncTeX operations
   // job_infos: JobInfos;
-  sync_in_progress?: boolean; // flag to prevent sync loops - true when any sync operation is in progress
+  autoSyncInProgress?: boolean; // unified flag to prevent sync loops - true when any auto sync operation is in progress
 }
 
 export class Actions extends BaseActions<LatexEditorState> {
@@ -136,8 +135,6 @@ export class Actions extends BaseActions<LatexEditorState> {
   private canonical_paths: { [path: string]: string } = {};
   private parsed_output_log?: IProcessedLatexLog;
 
-  // Flag to prevent infinite sync loops - use local variable for immediate sync control
-  private _sync_in_progress = false;
   private _last_sync_time = 0;
 
   // Auto-sync function for cursor position changes (forward sync: source → PDF)
@@ -146,19 +143,26 @@ export class Actions extends BaseActions<LatexEditorState> {
     column: number,
     filename: string,
   ): Promise<void> {
-    if (this._sync_in_progress) {
+    if (this.is_auto_sync_in_progress()) {
       return; // Prevent sync loops
     }
 
-    this._sync_in_progress = true;
-    this.set_sync_in_progress(true); // Also update state for UI
+    this.set_auto_sync_in_progress(true);
     try {
       await this.synctex_tex_to_pdf(line, column, filename);
+
+      // Fallback: Clear flag after timeout if viewport change doesn't happen
+      setTimeout(() => {
+        if (this.is_auto_sync_in_progress()) {
+          this.set_auto_sync_in_progress(false);
+        }
+      }, 2000);
+
+      // Note: The autoSyncInProgress flag will be cleared when PDF viewport actually changes
     } catch (error) {
       console.warn("Auto-sync forward search failed:", error);
-    } finally {
-      this._sync_in_progress = false;
-      this.set_sync_in_progress(false); // Also update state for UI
+      // Clear flag on error since viewport won't change
+      this.set_auto_sync_in_progress(false);
     }
   }
 
@@ -1332,8 +1336,20 @@ export class Actions extends BaseActions<LatexEditorState> {
     this.update_gutters();
   }
 
-  async synctex_pdf_to_tex(page: number, x: number, y: number): Promise<void> {
-    // Note: Flag management is handled by the caller
+  async synctex_pdf_to_tex(
+    page: number,
+    x: number,
+    y: number,
+    manual: boolean = false,
+  ): Promise<void> {
+    // Only check auto sync flag for automatic sync, not manual double-clicks
+    if (!manual && this.is_auto_sync_in_progress()) {
+      return; // Prevent sync loops
+    }
+
+    if (!manual) {
+      this.set_auto_sync_in_progress(true);
+    }
     this.set_status("Running SyncTex...");
     try {
       const info = await synctex.pdf_to_tex({
@@ -1365,10 +1381,18 @@ export class Actions extends BaseActions<LatexEditorState> {
         this.set_error(
           'Synctex failed to run.  Try "Force Rebuild" your project (use the Build frame) or retry once the build is complete.',
         );
+        // Clear flag since sync failed (only for automatic sync)
+        if (!manual) {
+          this.set_auto_sync_in_progress(false);
+        }
         return;
       }
       console.warn("ERROR ", err);
       this.set_error(err);
+      // Clear flag since sync failed (only for automatic sync)
+      if (!manual) {
+        this.set_auto_sync_in_progress(false);
+      }
     } finally {
       this.set_status("");
     }
@@ -1381,6 +1405,13 @@ export class Actions extends BaseActions<LatexEditorState> {
     if (this.knitr) {
       // #v0 will not support multi-file knitr.
       this.programmatically_goto_line(line, true, true);
+      // Clear auto sync flag after cursor has moved (backward sync completion)
+      // Only for automatic sync - manual sync doesn't set the flag
+      if (this.is_auto_sync_in_progress()) {
+        setTimeout(() => {
+          this.set_auto_sync_in_progress(false);
+        }, 200); // Give time for cursor to actually move
+      }
       return;
     }
     // Focus a cm frame so that we split a code editor below.
@@ -1393,6 +1424,14 @@ export class Actions extends BaseActions<LatexEditorState> {
       throw Error(`actions for "${path}" must be defined`);
     }
     (actions as BaseActions).programmatically_goto_line(line, true, true, id);
+
+    // Clear auto sync flag after cursor has moved (backward sync completion)
+    // Only for automatic sync - manual sync doesn't set the flag
+    if (this.is_auto_sync_in_progress()) {
+      setTimeout(() => {
+        this.set_auto_sync_in_progress(false);
+      }, 200); // Give time for cursor to actually move
+    }
   }
 
   // Check if auto-sync is enabled for any output panel
@@ -1404,9 +1443,10 @@ export class Actions extends BaseActions<LatexEditorState> {
     for (const [key, value] of local_view_state.entrySeq()) {
       // Only check output panels
       if (this._is_output_panel(key) && value) {
-        const autoSyncEnabled = typeof value.get === 'function'
-          ? value.get("autoSyncEnabled")
-          : value.autoSyncEnabled;
+        const autoSyncEnabled =
+          typeof value.get === "function"
+            ? value.get("autoSyncEnabled")
+            : value.autoSyncEnabled;
         if (autoSyncEnabled) {
           return true;
         }
@@ -1415,25 +1455,22 @@ export class Actions extends BaseActions<LatexEditorState> {
     return false;
   }
 
-  // Set sync in progress flag in state (for UI components)
-  private set_sync_in_progress(inProgress: boolean): void {
-    // Defer state update to avoid React rendering conflicts
-    setTimeout(() => {
-      this.setState({ sync_in_progress: inProgress });
-    }, 0);
+  // Set auto sync in progress flag in state
+  private set_auto_sync_in_progress(inProgress: boolean): void {
+    this.setState({ autoSyncInProgress: inProgress });
   }
 
-  // Check if sync is currently in progress
-  private is_sync_in_progress(): boolean {
-    return this._sync_in_progress;
+  // Check if auto sync is currently in progress
+  private is_auto_sync_in_progress(): boolean {
+    return this.store.get("autoSyncInProgress") ?? false;
   }
 
   // Handle cursor movement - called by BaseActions.set_cursor_locs
   public handle_cursor_move(locs: any[]): void {
     if (!this.is_auto_sync_enabled() || locs.length === 0) return;
 
     // Prevent duplicate sync operations
-    if (this.is_sync_in_progress()) return;
+    if (this.is_auto_sync_in_progress()) return;
 
     // Throttle sync operations to prevent excessive calls (max once every 500ms)
     const now = Date.now();
@@ -1457,7 +1494,7 @@ export class Actions extends BaseActions<LatexEditorState> {
     if (!this.is_auto_sync_enabled()) return;
 
     // Prevent duplicate sync operations
-    if (this.is_sync_in_progress()) return;
+    if (this.is_auto_sync_in_progress()) return;
 
     // Use current file if filename not provided
     const file = filename || this.path;
@@ -1474,7 +1511,10 @@ export class Actions extends BaseActions<LatexEditorState> {
 
   _get_most_recent_output_panel(): string | undefined {
     let result = this._get_most_recent_active_frame_id_of_type("output");
-    console.log("LaTeX: _get_most_recent_output_panel() via active history returning", result);
+    console.log(
+      "LaTeX: _get_most_recent_output_panel() via active history returning",
+      result,
+    );
 
     // If no recently active output panel found, look for any output panel
     if (!result) {
@@ -1546,20 +1586,22 @@ export class Actions extends BaseActions<LatexEditorState> {
       this._get_most_recent_output_panel();
     let pdfjs_id: string | undefined;
 
-    console.log("LaTeX forward sync: output_panel_id =", output_panel_id);
+    // console.log("LaTeX forward sync: output_panel_id =", output_panel_id);
 
     if (output_panel_id) {
       // There's an output panel - switch it to PDF tab and use it
-      console.log("LaTeX forward sync: Using output panel", output_panel_id);
+      // console.log("LaTeX forward sync: Using output panel", output_panel_id);
       this._switch_output_panel_to_pdf(output_panel_id);
       pdfjs_id = output_panel_id;
     } else {
       // No output panel, look for standalone PDF viewer
-      console.log("LaTeX forward sync: No output panel found, looking for standalone PDFJS");
+      // console.log(
+      //   "LaTeX forward sync: No output panel found, looking for standalone PDFJS",
+      // );
       pdfjs_id = this._get_most_recent_pdfjs();
       if (!pdfjs_id) {
         // no pdfjs preview, so make one
-        console.log("LaTeX forward sync: Creating new PDFJS panel");
+        // console.log("LaTeX forward sync: Creating new PDFJS panel");
         this.split_frame("col", this._get_active_id(), "pdfjs_canvas");
         pdfjs_id = this._get_most_recent_pdfjs();
         if (!pdfjs_id) {

src/packages/frontend/frame-editors/latex-editor/output.tsx

@@ -34,10 +34,7 @@ import {
 } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { EditorState } from "@cocalc/frontend/frame-editors/frame-tree/types";
-import {
-  exec,
-  project_api,
-} from "@cocalc/frontend/frame-editors/generic/client";
+import { project_api } from "@cocalc/frontend/frame-editors/generic/client";
 import { filenameIcon } from "@cocalc/frontend/file-associations";
 import { editor, labels } from "@cocalc/frontend/i18n";
 import { path_split, plural } from "@cocalc/util/misc";
@@ -119,15 +116,6 @@ export function Output(props: OutputProps) {
     setViewportInfo(null);
   }, []);
 
-  // Flag to temporarily disable viewport tracking during auto-sync
-  const [disableViewportTracking, setDisableViewportTracking] = useState(false);
-
-  // Watch for sync in progress to disable viewport tracking
-  const syncInProgress = useRedux([name, "sync_in_progress"]) ?? false;
-  React.useEffect(() => {
-    setDisableViewportTracking(syncInProgress);
-  }, [syncInProgress]);
-
   // Table of contents data
   const contents: TableOfContentsEntryList | undefined = useRedux([
     name,
@@ -170,16 +158,6 @@ export function Output(props: OutputProps) {
     setTimeout(() => actions.updateTableOfContents(true));
   }, []);
 
-  // Also disable viewport tracking during PDF scrolling operations
-  const scrollIntoView = useRedux([name, "scroll_pdf_into_view"]);
-  React.useEffect(() => {
-    if (scrollIntoView) {
-      setDisableViewportTracking(true);
-      // Re-enable after scroll completes
-      setTimeout(() => setDisableViewportTracking(false), 1000);
-    }
-  }, [scrollIntoView]);
-
   // Sync state with stored values when they change
   React.useEffect(() => {
     setActiveTab(storedTab);
@@ -325,8 +303,17 @@ export function Output(props: OutputProps) {
               (actions as any)._save_local_view_state?.();
             }}
             onViewportInfo={(page, x, y) => {
-              if (!disableViewportTracking) {
-                setViewportInfo({ page, x, y });
+              setViewportInfo({ page, x, y });
+
+              // Clear auto sync flag when PDF viewport changes (forward sync completion)
+              const autoSyncInProgress =
+                actions.store.get("autoSyncInProgress");
+              if (autoSyncInProgress) {
+                // Debounce the flag clearing to avoid clearing too early during scrolling
+                clearTimeout((window as any).__autoSyncClearTimeout);
+                (window as any).__autoSyncClearTimeout = setTimeout(() => {
+                  actions.setState({ autoSyncInProgress: false });
+                }, 500); // Wait longer to ensure scrolling has stabilized
               }
             }}
           />

src/packages/frontend/frame-editors/latex-editor/pdf-controls.tsx

@@ -95,21 +95,17 @@ export function PDFControls({
     storedAutoSyncEnabled,
   );
 
-  // Check if sync is in progress
-  const syncInProgress = useRedux([actions.name, "sync_in_progress"]) ?? false;
+  // Check if auto sync is in progress
+  const autoSyncInProgress =
+    useRedux([actions.name, "autoSyncInProgress"]) ?? false;
 
   // Handle inverse sync (PDF → source)
   const handleViewportSync = useCallback(
     async (page: number, x: number, y: number) => {
-      if (syncInProgress) {
+      if (autoSyncInProgress) {
         return; // Prevent sync loops
       }
 
-      // Set sync in progress flag (deferred to avoid React rendering conflicts)
-      setTimeout(() => {
-        actions.setState({ sync_in_progress: true });
-      }, 0);
-
       try {
         await actions.synctex_pdf_to_tex(page, x, y);
 
@@ -121,14 +117,9 @@ export function PDFControls({
         }
       } catch (error) {
         console.warn("Auto-sync reverse search failed:", error);
-      } finally {
-        // Clear sync in progress flag (deferred to avoid React rendering conflicts)
-        setTimeout(() => {
-          actions.setState({ sync_in_progress: false });
-        }, 0);
       }
     },
-    [actions, syncInProgress],
+    [actions, autoSyncInProgress, onClearViewportInfo],
   );
 
   // Sync state with stored values when they change
@@ -138,10 +129,15 @@ export function PDFControls({
 
   // Auto-sync effect when viewport changes and auto-sync is enabled
   useEffect(() => {
-    if (localAutoSyncEnabled && viewportInfo && !syncInProgress) {
+    if (localAutoSyncEnabled && viewportInfo && !autoSyncInProgress) {
       handleViewportSync(viewportInfo.page, viewportInfo.x, viewportInfo.y);
     }
-  }, [localAutoSyncEnabled, viewportInfo, syncInProgress, handleViewportSync]);
+  }, [
+    localAutoSyncEnabled,
+    viewportInfo,
+    autoSyncInProgress,
+    handleViewportSync,
+  ]);
 
   // Note: Page initialization is handled by the output component through actions.setPage
   // and page updates from PDF scrolling are handled through onPageInfo callback

src/packages/frontend/frame-editors/latex-editor/pdfjs-page.tsx

@@ -101,7 +101,7 @@ export default function Page({
           const offsetY = event.nativeEvent.clientY - divRect.top;
           const x: number = offsetX / scale;
           const y: number = offsetY / scale;
-          actions.synctex_pdf_to_tex(n, x, y);
+          actions.synctex_pdf_to_tex(n, x, y, true); // true = manual sync
         }}
       >
         <CanvasPage