Moved sidepanel to its own component

src/editor/components/settings.tsx

 import React from "react";
 
 interface SettingsProps {
-    labelVisibility: boolean;
+    labelVisibility: boolean; // TODO: Refactor to one settings object
     onLabelVisibilityChange: (state: boolean) => void;
 
     connectOnDrag: boolean;

src/editor/components/sidepanel.tsx

+import React from "react";
+import HistoryNavigator from "./historynavigator";
+import { DynamicGraph } from "../graph";
+import NodeDetails from "./nodedetails";
+import { NodeTypesEditor } from "./nodetypeseditor";
+import Settings from "./settings";
+import Instructions from "./instructions";
+import { Checkpoint, History } from "../../common/history";
+import { Node } from "../../common/graph/node";
+import { NodeType } from "../../common/graph/nodetype";
+import { SimGraphData } from "../../common/graph/graph";
+import { NodeDataChangeRequest } from "../editor";
+
+interface SidepanelProps {
+    graph: DynamicGraph;
+    onCheckpointLoad: { (checkpoint: Checkpoint<SimGraphData>): void };
+    onNodeTypeSelect: (type: NodeType) => void;
+    onConnectOnDragChange: (connectOnDrag: boolean) => void;
+    onLabelVisibilityChange: (state: boolean) => void;
+    onNodeDataChange: { (requests: NodeDataChangeRequest[]): void };
+    selectedNodes: Node[];
+    visibleLabels: boolean;
+    connectOnDrag: boolean;
+}
+
+function Sidepanel({
+    graph,
+    onCheckpointLoad,
+    onNodeTypeSelect,
+    onConnectOnDragChange,
+    onLabelVisibilityChange,
+    onNodeDataChange,
+    selectedNodes,
+    visibleLabels,
+    connectOnDrag,
+}: SidepanelProps) {
+    return (
+        <div id="sidepanel">
+            <HistoryNavigator
+                history={graph.history}
+                onCheckpointLoad={onCheckpointLoad}
+            />
+            <hr />
+            <NodeDetails
+                selectedNodes={selectedNodes}
+                nameToObjectType={graph.nameToObjectGroup} // TODO: Change to id
+                onNodeDataChange={onNodeDataChange}
+            />
+            <hr />
+            <NodeTypesEditor
+                onChange={() =>
+                    console.log("Refactor onChange for nodetypes editor!")
+                } // TODO: Refactor
+                graph={graph}
+                onSelectAll={onNodeTypeSelect}
+            />
+            <hr />
+            <Settings
+                labelVisibility={visibleLabels}
+                onLabelVisibilityChange={onLabelVisibilityChange}
+                connectOnDrag={connectOnDrag}
+                onConnectOnDragChange={onConnectOnDragChange}
+            />
+            <hr />
+
+            <Instructions connectOnDragEnabled={connectOnDrag} />
+        </div>
+    );
+}
+
+export default Sidepanel;

src/editor/editor.tsx

 import React from "react";
 import { DynamicGraph } from "./graph";
 import { listAllSpaces, loadGraphJson } from "../common/datasets";
-import NodeDetails from "./components/nodedetails";
 import SpaceSelect from "./components/spaceselect";
 import "./editor.css";
 import * as Helpers from "../common/helpers";
 import { Node, NodeProperties } from "../common/graph/node";
 
-import { NodeTypesEditor } from "./components/nodetypeseditor";
 import { SpaceManager } from "./components/spacemanager";
 import { SelectLayer } from "./components/selectlayer";
 import { GraphData } from "../common/graph/graph";
 import { NodeType } from "../common/graph/nodetype";
 import { GraphRenderer2D } from "./renderer";
-import Instructions from "./components/instructions";
-import Settings from "./components/settings";
-import HistoryNavigator from "./components/historynavigator";
 import * as Config from "../config";
+import Sidepanel from "./components/sidepanel";
 
 export interface NodeDataChangeRequest extends NodeProperties {
     id: number;
     type: NodeType;
 }
 
-type propTypes = {};
 type stateTypes = {
     /**
      * Graph structure holding the basic information.
@@ -63,11 +58,11 @@ type stateTypes = {
 /**
  * Knowledge space graph editor. Allows easy editing of the graph structure.
  */
-export class Editor extends React.PureComponent<propTypes, stateTypes> {
+export class Editor extends React.PureComponent<any, stateTypes> {
     private graphContainer: React.RefObject<HTMLDivElement>;
     private rendererRef: React.RefObject<GraphRenderer2D>;
 
-    constructor(props: propTypes) {
+    constructor(props: any) {
         super(props);
 
         // Making sure, all functions retain the proper this-bind
@@ -273,55 +268,36 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                                 />
                             </SelectLayer>
                         </div>
-                        <div id="sidepanel">
-                            <HistoryNavigator
-                                history={this.state.graph.history}
-                                onCheckpointLoad={(checkpoint) => {
-                                    const graph = new DynamicGraph();
-                                    this.setState({
-                                        graph: graph.fromSerializedObject(
-                                            checkpoint.data
-                                        ),
-                                    });
-                                }}
-                            />
-                            <hr />
-                            <NodeDetails
-                                selectedNodes={this.state.selectedNodes}
-                                nameToObjectType={
-                                    this.state.graph.nameToObjectGroup
-                                } // TODO: Change to id
-                                onNodeDataChange={this.handleNodeDataChange}
-                            />
-                            <hr />
-                            <NodeTypesEditor
-                                onChange={this.forceUpdate}
-                                graph={this.state.graph}
-                                onSelectAll={this.handleNodeTypeSelect}
-                            />
-                            <hr />
-                            <Settings
-                                labelVisibility={this.state.visibleLabels}
-                                onLabelVisibilityChange={(visible) =>
-                                    this.setState({
-                                        visibleLabels: visible,
-                                    })
-                                }
-                                connectOnDrag={this.state.connectOnDrag}
-                                onConnectOnDragChange={(connectOnDrag) =>
-                                    this.setState({
-                                        connectOnDrag: connectOnDrag,
-                                    })
-                                }
-                            />
-                            <hr />
-
-                            <Instructions
-                                connectOnDragEnabled={this.state.connectOnDrag}
-                            />
-                        </div>
                     </div>
                 )}
+                {this.state.graph && (
+                    <Sidepanel
+                        graph={this.state.graph}
+                        onCheckpointLoad={(checkpoint) => {
+                            const graph = new DynamicGraph();
+                            this.setState({
+                                graph: graph.fromSerializedObject(
+                                    checkpoint.data
+                                ),
+                            });
+                        }}
+                        onNodeTypeSelect={this.handleNodeTypeSelect}
+                        onConnectOnDragChange={(connectOnDrag) =>
+                            this.setState({
+                                connectOnDrag: connectOnDrag,
+                            })
+                        }
+                        onLabelVisibilityChange={(visible) =>
+                            this.setState({
+                                visibleLabels: visible,
+                            })
+                        }
+                        selectedNodes={this.state.selectedNodes}
+                        visibleLabels={this.state.visibleLabels}
+                        connectOnDrag={this.state.connectOnDrag}
+                        onNodeDataChange={this.handleNodeDataChange}
+                    />
+                )}
             </div>
         );
     }