fix UI diff scroll-sync-issue and not fetching historical revision on thing selection

Author: thjaeckle

ui/modules/things/subDiff.ts

@@ -28,6 +28,7 @@ export function SubDiff(targetTab, title: string) {
   let pendingLeft: string | null = null;
   let pendingRight: string | null = null;
   let onActivatedCallback: ((link: HTMLAnchorElement) => void) | null = null;
+  let scrollSyncing = false;
 
   return { ready, update, getTabLink, setOnActivated, destroy: destroyDiff };
 
@@ -77,8 +78,12 @@ export function SubDiff(targetTab, title: string) {
 
     if (diffInstance) {
       const editors = diffInstance.getEditors();
+      scrollSyncing = true;
       editors.left.setValue(left, -1);
       editors.right.setValue(right, -1);
+      editors.left.getSession().setScrollTop(0);
+      editors.right.getSession().setScrollTop(0);
+      scrollSyncing = false;
       diffInstance.diff();
     } else {
       diffInstance = new AceDiff({
@@ -87,7 +92,7 @@ export function SubDiff(targetTab, title: string) {
         mode: 'ace/mode/json',
         theme: null,
         diffGranularity: 'specific',
-        lockScrolling: true,
+        lockScrolling: false,
         showDiffs: true,
         showConnectors: true,
         charDiffs: true,
@@ -103,14 +108,45 @@ export function SubDiff(targetTab, title: string) {
           copyLinkEnabled: false,
         },
       });
+      setupScrollSync();
     }
   }
 
+  function setupScrollSync() {
+    if (!diffInstance) return;
+    const editors = diffInstance.getEditors();
+
+    const sync = (source, target) => {
+      if (scrollSyncing) return;
+      scrollSyncing = true;
+
+      const srcSession = source.getSession();
+      const tgtSession = target.getSession();
+      const srcTop = srcSession.getScrollTop();
+      const lineHeight = source.renderer.lineHeight || 16;
+      const srcTotal = srcSession.getLength() * lineHeight;
+      const srcVisible = source.renderer.$size.scrollerHeight;
+      const srcMax = Math.max(0, srcTotal - srcVisible);
+      const ratio = srcMax > 0 ? srcTop / srcMax : 0;
+
+      const tgtTotal = tgtSession.getLength() * lineHeight;
+      const tgtVisible = target.renderer.$size.scrollerHeight;
+      const tgtMax = Math.max(0, tgtTotal - tgtVisible);
+
+      tgtSession.setScrollTop(Math.round(ratio * tgtMax));
+      scrollSyncing = false;
+    };
+
+    editors.left.getSession().on('changeScrollTop', () => sync(editors.left, editors.right));
+    editors.right.getSession().on('changeScrollTop', () => sync(editors.right, editors.left));
+  }
+
   function destroyDiff() {
     if (diffInstance) {
       diffInstance.destroy();
       diffInstance = null;
     }
+    scrollSyncing = false;
     pendingLeft = null;
     pendingRight = null;
     if (container) {

ui/modules/things/thingsDiff.ts

@@ -34,6 +34,7 @@ export function ThingsDiff(targetTab) {
   let lastLeftJson: any = null;
   let lastRightJson: any = null;
   let syncing = false;
+  let scrollSyncing = false;
   let fetchToken = 0;
   let activeProbe: { cancel: () => void } | null = null;
   let overviewSvg: SVGSVGElement | null = null;
@@ -176,6 +177,7 @@ export function ThingsDiff(targetTab) {
       diffInstance.destroy();
       diffInstance = null;
     }
+    scrollSyncing = false;
     overviewSvg = null;
     if (dom.diffContainer) {
       dom.diffContainer.textContent = '';
@@ -373,8 +375,12 @@ export function ThingsDiff(targetTab) {
   function createOrUpdateDiff(leftContent: string, rightContent: string) {
     if (diffInstance) {
       const editors = diffInstance.getEditors();
+      scrollSyncing = true;
       editors.left.setValue(leftContent, -1);
       editors.right.setValue(rightContent, -1);
+      editors.left.getSession().setScrollTop(0);
+      editors.right.getSession().setScrollTop(0);
+      scrollSyncing = false;
       diffInstance.diff();
       renderChangeOverview(diffInstance.diffs);
     } else {
@@ -384,7 +390,7 @@ export function ThingsDiff(targetTab) {
         mode: 'ace/mode/json',
         theme: null,
         diffGranularity: 'specific',
-        lockScrolling: true,
+        lockScrolling: false,
         showDiffs: true,
         showConnectors: true,
         charDiffs: true,
@@ -401,9 +407,48 @@ export function ThingsDiff(targetTab) {
         },
         onDiffReady: renderChangeOverview,
       });
+      setupScrollSync();
     }
   }
 
+  /**
+   * Sets up proportional scroll synchronization between the two diff editors.
+   * AceDiff's built-in lockScrolling uses a throttled (16ms) handler with a
+   * synchronous re-entrancy guard, which allows a reverse-sync feedback loop
+   * because the guard resets before the throttled reverse handler fires.
+   * Our implementation uses direct (un-throttled) handlers, so the guard is
+   * still active when setScrollTop fires the reverse changeScrollTop event
+   * synchronously, reliably blocking the feedback loop.
+   */
+  function setupScrollSync() {
+    if (!diffInstance) return;
+    const editors = diffInstance.getEditors();
+
+    const sync = (source, target) => {
+      if (scrollSyncing) return;
+      scrollSyncing = true;
+
+      const srcSession = source.getSession();
+      const tgtSession = target.getSession();
+      const srcTop = srcSession.getScrollTop();
+      const lineHeight = source.renderer.lineHeight || 16;
+      const srcTotal = srcSession.getLength() * lineHeight;
+      const srcVisible = source.renderer.$size.scrollerHeight;
+      const srcMax = Math.max(0, srcTotal - srcVisible);
+      const ratio = srcMax > 0 ? srcTop / srcMax : 0;
+
+      const tgtTotal = tgtSession.getLength() * lineHeight;
+      const tgtVisible = target.renderer.$size.scrollerHeight;
+      const tgtMax = Math.max(0, tgtTotal - tgtVisible);
+
+      tgtSession.setScrollTop(Math.round(ratio * tgtMax));
+      scrollSyncing = false;
+    };
+
+    editors.left.getSession().on('changeScrollTop', () => sync(editors.left, editors.right));
+    editors.right.getSession().on('changeScrollTop', () => sync(editors.right, editors.left));
+  }
+
   /**
    * Renders a change overview minimap in the ace-diff gutter.
    * Each diff region is shown as a colored rectangle positioned proportionally

ui/modules/things/thingsHistory.ts

@@ -111,6 +111,11 @@ function onThingChanged(thing, isNewThingId: boolean) {
   }
 
   if (isNewThingId && Things.isHistoryModeActive()) {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    cancelActiveProbe();
     Things.setHistoryMode(false);
     dom.historyModeSwitch.checked = false;
     hideHistoryControls();
@@ -305,7 +310,7 @@ function debouncedFetch() {
 }
 
 function fetchHistoricalState() {
-  if (!currentThingId) return;
+  if (!currentThingId || !Things.isHistoryModeActive()) return;
 
   if (dom.historyRadioRevision.checked) {
     const revision = parseInt(dom.historyRevisionSlider.value, 10);