diff --git a/addon/chrome/content/mindMap.html b/addon/chrome/content/mindMap.html
index 4b0c5e9..be7032e 100644
--- a/addon/chrome/content/mindMap.html
+++ b/addon/chrome/content/mindMap.html
@@ -141,9 +141,8 @@
           });
 
           // read in the predefined graph using the JSON format data held in the "mySavedModel" textarea
-          // getData();
           window.parent.postMessage({type: "ready"}, "*");
-
+          getData()
         }
 
         function spotConverter(dir, from) {
@@ -279,8 +278,29 @@
           }
         }
 
-        window.addEventListener("DOMContentLoaded", init);
-        window.addEventListener('resize', (e)=>{myDiagram.diagram.layoutDiagram(true)})
+        window.addEventListener("DOMContentLoaded",  ()=>{
+          try{
+            init()
+          }catch(e){
+            window.parent.postMessage({type: "error", event: e}, "*");
+          }
+        });
+
+        var resizeTime = new Date().getTime()
+        window.addEventListener('resize', (e)=>{
+          const canvas = document.getElementsByTagName("canvas")[0]
+          const div = document.getElementById('myDiagramDiv')
+          canvas.setAttribute('height', div.getAttribute('height'))
+          canvas.setAttribute('width', div.getAttribute('width'))
+          const currentResize = new Date().getTime()
+          resizeTime = currentResize
+          // Delay update
+          setTimeout(()=>{
+            if(resizeTime === currentResize){
+              getData()
+            }
+          }, 500)
+        })
 
       </script>
 
@@ -299,8 +319,6 @@
           <canvas
             tabindex="0"
             style="
-              width: 100%;
-              height: 100%;
               position: absolute;
               top: 0px;
               left: 0px;
diff --git a/addon/chrome/content/workspace.xul b/addon/chrome/content/workspace.xul
index 0f9feb3..f65d743 100644
--- a/addon/chrome/content/workspace.xul
+++ b/addon/chrome/content/workspace.xul
@@ -48,7 +48,7 @@
                 </div>
             </html:div>
             <html:div id="mindmap-container">
-                <iframe src="chrome://Knowledge4Zotero/content/mindMap.html" id="mindmapIframe"></iframe>
+                <!-- Inser Here -->
             </html:div>
             <html:div id="outline-tools" height="50" maxheight="50" minheight="50" style="display: flex; flex-flex-direction: row; justify-content: space-between; margin: 0px 30px 0px 30px;">
                 <div class="tooltip">
diff --git a/src/knowledge.ts b/src/knowledge.ts
index ef82d74..53b65ce 100644
--- a/src/knowledge.ts
+++ b/src/knowledge.ts
@@ -29,6 +29,7 @@ class Knowledge extends AddonBase {
     if (this.getWorkspaceWindow()) {
       (this.getWorkspaceWindow() as Window).focus();
     } else {
+      this._Addon.views._initIframe = Zotero.Promise.defer();
       let win = window.open(
         "chrome://Knowledge4Zotero/content/workspace.xul",
         "_blank",
diff --git a/src/views.ts b/src/views.ts
index 189ce51..6229f7d 100644
--- a/src/views.ts
+++ b/src/views.ts
@@ -5,7 +5,7 @@ class AddonViews extends AddonBase {
   editorIcon: object;
   $: any;
   outlineView: boolean;
-  _initIframe: typeof Promise;
+  _initIframe: any;
 
   constructor(parent: Knowledge4Zotero) {
     super(parent);
@@ -366,15 +366,7 @@ class AddonViews extends AddonBase {
     if (e.data.type === "ready") {
       this._initIframe.resolve();
     } else if (e.data.type === "getMindMapData") {
-      (
-        _window.document.getElementById("mindmapIframe") as HTMLIFrameElement
-      ).contentWindow.postMessage(
-        {
-          type: "setMindMapData",
-          nodes: this._Addon.knowledge.getNoteTreeAsList(),
-        },
-        "*"
-      );
+      this.updateMindMap();
     } else if (e.data.type === "jumpNode") {
       this.scrollToLine(
         await this._Addon.knowledge.getWorkspaceEditorInstance(),
@@ -399,18 +391,27 @@ class AddonViews extends AddonBase {
     const outline = _window.document.getElementById("outline-container");
     this.outlineView = status;
     if (this.outlineView) {
+      _window.document.getElementById("mindmapIframe").remove();
       mindmap.setAttribute("hidden", "hidden");
       outline.removeAttribute("hidden");
     } else {
+      const iframe = _window.document.createElement("iframe");
+      iframe.setAttribute("id", "mindmapIframe");
+      iframe.setAttribute(
+        "src",
+        "chrome://Knowledge4Zotero/content/mindMap.html"
+      );
       outline.setAttribute("hidden", "hidden");
       mindmap.removeAttribute("hidden");
+      mindmap.append(iframe);
+      this.setTreeViewSize();
     }
     this.buildOutline(this._Addon.knowledge.getWorkspaceNote());
   }
 
   async updateMindMap() {
     Zotero.debug("Knowledge4Zotero: updateMindMap");
-    await this._initIframe;
+    // await this._initIframe.promise;
     const _window = this._Addon.knowledge.getWorkspaceWindow();
     const iframe = _window.document.getElementById(
       "mindmapIframe"