Make saving and restoring workspaces faster and more reliable

Author: tntmarket

src/ts/core/common/mutation-observer.ts

@@ -40,10 +40,15 @@ const observeElement = (
 export const waitForSelectorToExist = (
     selector: string,
     observeInside: HTMLElement = document.body
+): Promise<HTMLElement> => waitForSelectionToExist(element => element.querySelector(selector), observeInside)
+
+export const waitForSelectionToExist = (
+    selectionFn: (element: HTMLElement) => HTMLElement | null,
+    observeInside = document.body
 ): Promise<HTMLElement> => {
     return new Promise(resolve => {
         const resolveIfElementExists = () => {
-            const element = observeInside.querySelector(selector) as HTMLElement
+            const element = selectionFn(observeInside)
             if (element) {
                 resolve(element)
                 return true

src/ts/core/features/spatial-mode/graph-visualization.ts

@@ -70,6 +70,7 @@ export class GraphVisualization {
     static instance: GraphVisualization | null
 
     private cy: cytoscape.Core
+    private layout: cytoscape.Layouts | null
     private synchronizer: SpatialDomSynchronizer
     viewport: SpatialViewport
 
@@ -78,6 +79,7 @@ export class GraphVisualization {
             container,
             style: getCytoscapeStyles(),
         })
+        this.layout = null
         this.synchronizer = new SpatialDomSynchronizer(this.cy)
         this.viewport = new SpatialViewport(this.cy)
     }
@@ -190,7 +192,9 @@ export class GraphVisualization {
                 node.style('height', panelElement.offsetHeight + 20)
             }
         })
-        this.cy
+
+        this.layout?.stop()
+        this.layout = this.cy
             .layout({
                 name: 'cola',
                 fit: false,
@@ -207,10 +211,16 @@ export class GraphVisualization {
                 // @ts-ignore if maxSimulationTime is too low, the layout doesn't actually run
                 nodeSpacing: SpatialSettings.getNodeSpacing(),
             })
-            .stop()
             .run()
 
-        return this.cy.promiseOn('layoutstop')
+        return this.waitForLayout()
+    }
+
+    private async waitForLayout() {
+        if (this.layout) {
+            await this.layout.promiseOn('layoutstop')
+            this.layout = null
+        }
     }
 
     save(): GraphData {
@@ -230,8 +240,9 @@ export class GraphVisualization {
         }
     }
 
-    load(savedData: GraphData) {
-        this.cy.stop()
+    async load(savedData: GraphData) {
+        this.layout?.stop()
+        await this.waitForLayout()
         this.cy.batch(() => {
             savedData.nodes.forEach(({id, position, width, height}) => {
                 let node = this.cy.getElementById(id)
@@ -252,9 +263,13 @@ export class GraphVisualization {
                     },
                 })
             })
-            this.cy.zoom(savedData.zoom)
-            this.cy.pan(savedData.pan)
         })
+        // Stop viewport animations that may have started up after adding nodes
+        this.cy.stop(true, true)
+        await delay(10)
+
+        this.cy.zoom(savedData.zoom)
+        this.cy.pan(savedData.pan)
     }
 
     cleanup() {

src/ts/core/features/spatial-mode/spatial-workspace.ts

@@ -1,43 +1,63 @@
 import {Selectors} from 'src/core/roam/selectors'
 import {Mouse} from 'src/core/common/mouse'
 import {assumeExists} from 'src/core/common/assert'
-import {delay} from 'src/core/common/async'
 
 import {GraphVisualization} from './graph-visualization'
+import {waitForSelectionToExist} from 'src/core/common/mutation-observer'
+import {RoamPanel} from 'src/core/roam/panel/roam-panel'
 
 export const saveWorkspace = (graph: GraphVisualization) => {
     const graphData = graph.save()
     if (graphData.nodes.some(({id}) => id.includes('Mentions of') || id.includes('block-input-'))) {
         window.alert("Saving block outline and mention panels isn't supported yet")
     }
-    const bulletsForPages = graphData.nodes.map(({id}) => `- [[${id}]]`).join('\n')
-    const graphJsonCodeBlock = '```' + JSON.stringify(graphData) + '```'
-    navigator.clipboard.writeText(bulletsForPages + '\n' + graphJsonCodeBlock)
+    const bulletsForPages = graphData.nodes.map(({id}) => `    - [[${id}]]`).join('\n')
+    const graphJsonCodeBlock = '    - ```' + JSON.stringify(graphData) + '```'
+    navigator.clipboard.writeText('#[[Roam Toolkit Workspace]]' + '\n' + bulletsForPages + '\n' + graphJsonCodeBlock)
 }
 
 export const restoreWorkspace = async (graph: GraphVisualization) => {
-    // first, open all blocks in the page so the dom nodes exist
-    const links = Array.from(document.querySelectorAll(`${Selectors.mainContent} ${Selectors.block} ${Selectors.link}`))
-    // ignore the links inside complex pages
-    const outerLinks = links.filter(link => !link.parentElement?.closest(Selectors.link)) as HTMLElement[]
-    // Open sidebar pages
-    outerLinks.forEach(link => Mouse.leftClick(link, true))
-    // Open main page
-    Mouse.leftClick(outerLinks[0])
-
     /** assume the format of the page is:
-     * - [[main page]]
-     * - [[side page 1]]
-     * - [[side page 2]]
-     * ```$JSON```
+     * - #[[Roam Toolkit Workspace]]
+     *     - [[main page]]
+     *     - [[side page 1]]
+     *     - [[side page 2]]
+     *     - ```$JSON```
      */
+    const savedWorkspaceBlocks = document
+        .querySelector('[data-tag="Roam Toolkit Workspace"]')
+        ?.closest(Selectors.blockContainer)
+    if (!savedWorkspaceBlocks) {
+        return
+    }
     const firstCodeBlockLine = assumeExists(
-        document.querySelector(`${Selectors.mainContent} .CodeMirror-line`)
+        savedWorkspaceBlocks.querySelector(`${Selectors.mainContent} .CodeMirror-line`)
     ) as HTMLElement
     const graphData = JSON.parse(firstCodeBlockLine.innerText)
 
+    if (graphData.nodes) {
+        await openAllLinksInBlocks(savedWorkspaceBlocks)
+        await graph.load(graphData)
+    }
+}
+
+const openAllLinksInBlocks = async (blockContainer: Element) => {
+    // first, open all blocks in the page so the dom nodes exist
+    const [, ...links] = Array.from(blockContainer.querySelectorAll(Selectors.link))
+    // ignore the links inside complex pages
+    const outerLinks = links.filter(link => !link.parentElement?.closest(Selectors.link)) as HTMLElement[]
+    const [mainLink, ...sidebarLinks] = outerLinks
+    // Open sidebar pages
+    sidebarLinks.forEach(link => Mouse.leftClick(link, true))
+    // Open main page
+    Mouse.leftClick(mainLink)
+
     // Wait for all pages to finish opening
-    await delay(500 + outerLinks.length * 200)
+    await Promise.all(outerLinks.map(assertLinkWasOpened))
+}
 
-    graph.load(graphData)
+const assertLinkWasOpened = async (linkElement: HTMLElement) => {
+    const panelId = assumeExists((linkElement.closest('[data-link-title]') as HTMLElement)?.dataset?.linkTitle)
+    // Wait for all pages to finish opening
+    await waitForSelectionToExist(() => RoamPanel.getPanel(panelId))
 }