bug(knowledge-graph): Cytoscape canvas blank after toggling from 3D back to 2D

[mrveiss]

Summary

When toggling from 3D back to 2D in the KnowledgeGraph view, the Cytoscape container renders blank (0×0 or empty). The v-if directive unmounts the Cytoscape container while in 3D mode, and a single nextTick is insufficient for Vue to both commit the DOM change and complete layout before Cytoscape initialises.

Root Cause

toggleViewMode used a single nextTick callback:

// Broken — DOM may not be fully laid out yet
nextTick(() => {
  if (!cy.value && cytoscapeContainer.value) {
    initCytoscape()
  }
  updateCytoscapeElements()
})

The first tick commits the v-if change; the second tick guarantees the container has non-zero dimensions.

Fix

Double nextTick pattern (mirrors the existing refreshGraph implementation in the codebase):

nextTick(() => {
  nextTick(() => {
    if (!cy.value && cytoscapeContainer.value) initCytoscape()
    updateCytoscapeElements()
  })
})

Already fixed in: PR #3372 (fix: code-review issues for 3D view toggle)

References

• PR feat(knowledge-graph): add 3D force-graph view toggle (#3330) #3359 (original implementation)
• PR fix(knowledge-graph): code-review fixes for 3D view toggle (#3330) #3372 (fix)
• Issue feat(knowledge-graph): add 3D force-graph view toggle to KnowledgeGraph.vue #3330 (parent feature)