diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
index 557bdf854d74d7a2a9f0f2527272af9fc6a32150..b50a9f516d68d37500b912e7d5994ff09214e2ff 100644
--- a/src/editor/editor.tsx
+++ b/src/editor/editor.tsx
@@ -657,94 +657,99 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                             ) : undefined}
                         </SelectLayer>
                     </div>
-                    <div id="sidepanel">
-                        <HistoryNavigator
-                            spaceId="space"
-                            history={this.state.graph.history}
-                            onChange={this.onGraphDataChange}
-                        />
-                        <hr />
-                        <NodeDetails
-                            selectedNodes={this.state.selectedNodes}
-                            allTypes={
-                                this.state.graph
-                                    ? this.state.graph.objectGroups
-                                    : []
-                            }
-                            onChange={this.forceUpdate}
-                        />
-                        <hr />
-                        <h3>Node types</h3>
-                        <NodeTypesEditor
-                            onChange={this.forceUpdate}
-                            graph={this.state.graph}
-                            onSelectAll={this.handleNodeTypeSelect}
-                        />
-                        <hr />
-                        <h3>Settings</h3>
-                        <input
-                            id="node-labe-visibility"
-                            type={"checkbox"}
-                            checked={this.state.visibleLabels}
-                            onChange={(event) => {
-                                const newValue = event.target.checked;
-                                if (newValue == this.state.visibleLabels) {
-                                    return;
+                    {this.state.graph && (
+                        <div id="sidepanel">
+                            <HistoryNavigator
+                                spaceId="space"
+                                history={this.state.graph.history}
+                                onChange={this.onGraphDataChange}
+                            />
+                            <hr />
+                            <NodeDetails
+                                selectedNodes={this.state.selectedNodes}
+                                allTypes={
+                                    this.state.graph
+                                        ? this.state.graph.objectGroups
+                                        : []
                                 }
+                                onChange={this.forceUpdate}
+                            />
+                            <hr />
+                            <h3>Node types</h3>
+                            <NodeTypesEditor
+                                onChange={this.forceUpdate}
+                                graph={this.state.graph}
+                                onSelectAll={this.handleNodeTypeSelect}
+                            />
+                            <hr />
+                            <h3>Settings</h3>
+                            <input
+                                id="node-labe-visibility"
+                                type={"checkbox"}
+                                checked={this.state.visibleLabels}
+                                onChange={(event) => {
+                                    const newValue = event.target.checked;
+                                    if (newValue == this.state.visibleLabels) {
+                                        return;
+                                    }
 
-                                this.setState({
-                                    visibleLabels: newValue,
-                                });
-                            }}
-                        />
-                        <label htmlFor="node-labe-visibility">
-                            Node labels
-                        </label>
-                        <br />
-                        <input
-                            id="connect-on-drag"
-                            type={"checkbox"}
-                            checked={this.state.connectOnDrag}
-                            onChange={(event) => {
-                                const newValue = event.target.checked;
-                                if (newValue == this.state.connectOnDrag) {
-                                    return;
-                                }
+                                    this.setState({
+                                        visibleLabels: newValue,
+                                    });
+                                }}
+                            />
+                            <label htmlFor="node-labe-visibility">
+                                Node labels
+                            </label>
+                            <br />
+                            <input
+                                id="connect-on-drag"
+                                type={"checkbox"}
+                                checked={this.state.connectOnDrag}
+                                onChange={(event) => {
+                                    const newValue = event.target.checked;
+                                    if (newValue == this.state.connectOnDrag) {
+                                        return;
+                                    }
 
-                                this.setState({
-                                    connectOnDrag: newValue,
-                                });
-                            }}
-                        />
-                        <label htmlFor="connect-on-drag">
-                            Connect nodes when dragged
-                        </label>
-                        <hr />
-                        <ul className="instructions">
-                            <li>Click background to create node</li>
-                            <li>
-                                SHIFT+Click and drag on background to add nodes
-                                to selection
-                            </li>
-                            <li>CTRL+Click background to clear selection</li>
-                            <li>Click node to select and edit</li>
-                            <li>
-                                SHIFT+Click node to add or remove from selection
-                            </li>
-                            <li>CTRL+Click another node to connect</li>
-                            <li>Right-Click node to delete</li>
-                            <li>Right-Click link to delete</li>
-                            {this.state.connectOnDrag ? (
+                                    this.setState({
+                                        connectOnDrag: newValue,
+                                    });
+                                }}
+                            />
+                            <label htmlFor="connect-on-drag">
+                                Connect nodes when dragged
+                            </label>
+                            <hr />
+                            <ul className="instructions">
+                                <li>Click background to create node</li>
                                 <li>
-                                    Drag node close to other node to connect
+                                    SHIFT+Click and drag on background to add
+                                    nodes to selection
                                 </li>
-                            ) : (
-                                ""
-                            )}
-                            <li>DELETE to delete selected nodes</li>
-                            <li>ESCAPE to clear selection</li>
-                        </ul>
-                    </div>
+                                <li>
+                                    CTRL+Click background to clear selection
+                                </li>
+                                <li>Click node to select and edit</li>
+                                <li>
+                                    SHIFT+Click node to add or remove from
+                                    selection
+                                </li>
+                                <li>CTRL+Click another node to connect</li>
+                                <li>Right-Click node to delete</li>
+                                <li>Right-Click link to delete</li>
+                                {this.state.connectOnDrag ? (
+                                    <li>
+                                        Drag node close to other node to connect
+                                    </li>
+                                ) : (
+                                    ""
+                                )}
+                                <li>DELETE to delete selected nodes</li>
+                                <li>ESCAPE to clear selection</li>
+                            </ul>
+                        </div>
+                    )}
                 </div>
             </div>
         );
diff --git a/src/editor/graph.ts b/src/editor/graph.ts
index fe823c6016681825e0f2cda445006c52de0f0c76..9ea0fd5910c06905edfa1f85234b8a661e7c7606 100644
--- a/src/editor/graph.ts
+++ b/src/editor/graph.ts
@@ -3,7 +3,7 @@ import { NodeType } from "../common/graph/nodetype";
 import { Node, NodeData, SimNodeData } from "../common/graph/node";
 import * as Common from "../common/graph/graph";
 import { History } from "../common/history";
-import { GraphContent, SimGraphData } from "../common/graph/graph";
+import { GraphContent, GraphData, SimGraphData } from "../common/graph/graph";
 
 export class DynamicGraph extends Common.Graph {
     public history: History<SimGraphData>;
@@ -14,11 +14,25 @@ export class DynamicGraph extends Common.Graph {
     constructor(data?: GraphContent) {
         super(data);
         this.onChangeCallbacks = [];
+
+        if (data != undefined) {
+            this.history = new History<SimGraphData>(
+                this,
+                20,
+                "Created new graph."
+            );
+        }
+    }
+
+    public fromSerializedObject(data: GraphData | SimGraphData): DynamicGraph {
+        super.fromSerializedObject(data);
         this.history = new History<SimGraphData>(
             this,
             20,
             "Created new graph."
         );
+
+        return this;
     }
 
     /**