Graph will now center according to width of free space

src/editor/js/components/editor.css

 div#ks-editor #force-graph-renderer {
     width: auto;
     overflow-x: hidden;
+    flex-grow: 1;
 }
 
 div#ks-editor #sidepanel {

src/editor/js/components/editor.tsx

@@ -20,6 +20,7 @@ type stateTypes = {
     connectOnDrag: boolean;
     selectedNode: Node;
     keys: { [name: string]: boolean };
+    graphWidth: number;
 };
 type clickPosition = {
     graph: { x: number; y: number };
@@ -36,6 +37,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     private defaultWarmupTicks = 100;
     private warmupTicks = 100;
     private renderer: any;
+    private graphContainer: any;
     private graphInFocus = false;
 
     constructor(props: propTypes) {
@@ -57,8 +59,10 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         this.handleNodeDragEnd = this.handleNodeDragEnd.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
         this.selectNode = this.selectNode.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
         this.renderer = React.createRef();
+        this.graphContainer = React.createRef();
 
         // Set as new state
         this.state = {
@@ -67,6 +71,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
             connectOnDrag: false,
             selectedNode: undefined,
             keys: {},
+            graphWidth: 1000,
         };
 
         Interactions.initInteractions();
@@ -111,10 +116,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
 
         this.state.graph.onChangeCallbacks.push(this.onHistoryChange);
 
-        // Subscribe to global key-press events
+        // Subscribe to global events
         document.onkeydown = this.handleKeyDown;
         document.onkeyup = this.handleKeyUp;
         document.onmousedown = this.handleMouseDown;
+        window.onresize = this.handleResize;
+
+        this.handleResize();
 
         return true;
     }
@@ -157,6 +165,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         });
     }
 
+    private handleResize() {
+        const newGraphWidth = this.graphContainer.current.clientWidth;
+        this.setState({
+            graphWidth: newGraphWidth,
+        });
+    }
+
     /**
      * Handler for background click event on force graph. Adds new node by default.
      * @param event Click event.
@@ -436,11 +451,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                 <SpaceSelect onLoadSpace={this.loadSpace} />
                 <SpaceManager />
                 <div id="content">
-                    <div id="force-graph-renderer">
+                    <div id="force-graph-renderer" ref={this.graphContainer}>
                         {this.state.graph ? (
                             <ReactForceGraph2d
                                 ref={this.renderer}
-                                width={2000}
+                                width={this.state.graphWidth}
                                 graphData={{
                                     nodes: this.state.graph.data.nodes,
                                     links: this.state.graph.links,