assets/path_focus_bridge.js

/**
 * Path-finder: tap empty Cytoscape canvas → clear path-focus-store (no dimmed backdrop).
 */
(function () {
  function isLiveCy(cy) {
    return cy && typeof cy.destroyed === "function" && !cy.destroyed();
  }

  function cyOf(el) {
    if (!el) return null;
    if (isLiveCy(el._cytoscape)) return el._cytoscape;
    // cytoscape.js registers the live instance on its container as _cyreg.cy
    if (el._cyreg && isLiveCy(el._cyreg.cy)) return el._cyreg.cy;
    return null;
  }

  function findCy(host) {
    if (!host) return null;
    let cy = cyOf(host);
    if (cy) return cy;
    for (const el of host.querySelectorAll("div")) {
      cy = cyOf(el);
      if (cy) return cy;
    }
    return null;
  }

  function clearPathFocus() {
    if (
      window.dash_clientside &&
      typeof window.dash_clientside.set_props === "function"
    ) {
      window.dash_clientside.set_props("path-focus-store", { data: null });
      return;
    }
    const btn = document.getElementById("path-clear-highlight-btn");
    if (btn) btn.click();
  }

  function wireGraph(host) {
    const cy = findCy(host);
    if (!cy) return false;
    if (host.__pathFocusCy === cy) return true;
    host.__pathFocusCy = cy;

    cy.on("tap", (evt) => {
      if (evt.target !== cy) return;
      cy.$(":selected").unselect();
      clearPathFocus();
    });

    return true;
  }

  function boot() {
    const host = document.getElementById("graph");
    if (!host) return;
    if (!wireGraph(host)) {
      host.__pathFocusCy = null;
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }

  setInterval(boot, 800);
})();