Reimplemented save button.

src/editor/components/historynavigator.css

-div#ks-editor #history-navigator {
+.history-navigator {
     display: flex;
 }
 
-div#ks-editor #history-navigator > select {
+.history-navigator > select {
     flex-grow: 1;
-    width: auto;
-    max-width: 48%;
 }
 
-div#ks-editor #history-navigator > button {
+.history-navigator > button {
     flex-grow: 0;
 }

src/editor/components/historynavigator.tsx

@@ -12,7 +12,7 @@ function HistoryNavigator<HistoryDataType>({
     onCheckpointLoad,
 }: HistoryNavigatorProps<HistoryDataType>) {
     return (
-        <div id="history-navigator">
+        <div className={"history-navigator"}>
             <button onClick={() => onCheckpointLoad(history.undo())}>
                 Undo
             </button>

src/editor/components/sidepanel.css

@@ -16,3 +16,8 @@
 .editor-sidepanel > * {
     margin: 0.25rem;
 }
+
+.editor-sidepanel-topbar {
+    display: flex;
+    flex-direction: row;
+}
\ No newline at end of file

src/editor/components/sidepanel.tsx

@@ -19,6 +19,7 @@ interface SidepanelProps {
     onNodeTypeSelect: (type: NodeType) => void;
     onSettingsChange: (settings: EditorSettings) => void;
     onNodeDataChange: { (requests: NodeDataChangeRequest[]): void };
+    onSave: () => void;
     selectedNodes: Node[];
     settings: EditorSettings;
 }
@@ -29,15 +30,19 @@ function Sidepanel({
     onNodeTypeSelect,
     onSettingsChange,
     onNodeDataChange,
+    onSave,
     selectedNodes,
     settings,
 }: SidepanelProps) {
     return (
         <div className={"editor-sidepanel"}>
-            <HistoryNavigator
-                history={graph.history}
-                onCheckpointLoad={onCheckpointLoad}
-            />
+            <div className={"editor-sidepanel-topbar"}>
+                <HistoryNavigator
+                    history={graph.history}
+                    onCheckpointLoad={onCheckpointLoad}
+                />
+                <button onClick={onSave}>Save</button>
+            </div>
             <hr />
             <NodeDetails
                 selectedNodes={selectedNodes}

src/editor/editor.css

@@ -4,6 +4,10 @@ div#ks-editor #force-graph-renderer {
     flex-grow: 1;
 }
 
+#content {
+    border: 2px solid darkgray;
+}
+
 div#ks-editor #content {
     display: flex;
 }

src/editor/editor.tsx

 import React from "react";
 import { DynamicGraph } from "./graph";
-import { listAllSpaces, loadGraphJson } from "../common/datasets";
+import {
+    listAllSpaces,
+    loadGraphJson,
+    saveGraphJson,
+} from "../common/datasets";
 import SpaceSelect from "./components/spaceselect";
 import "./editor.css";
 import * as Helpers from "../common/helpers";
@@ -72,6 +76,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
         // Making sure, all functions retain the proper this-bind
         this.loadGraph = this.loadGraph.bind(this);
         this.loadSpace = this.loadSpace.bind(this);
+        this.saveSpace = this.saveSpace.bind(this);
         this.forceUpdate = this.forceUpdate.bind(this);
         this.handleNodeTypeSelect = this.handleNodeTypeSelect.bind(this);
         this.handleBoxSelect = this.handleBoxSelect.bind(this);
@@ -136,7 +141,19 @@ export class Editor extends React.PureComponent<any, stateTypes> {
      * @returns Promise with boolean value that is true, if successful.
      */
     public loadSpace(spaceId: string): any {
-        return loadGraphJson(spaceId).then(this.loadGraph);
+        return loadGraphJson(spaceId).then((data: GraphData) =>
+            this.loadGraph(data, spaceId)
+        );
+    }
+
+    public saveSpace() {
+        return saveGraphJson(
+            this.state.spaceId,
+            this.state.graph.toJSONSerializableObject()
+        ).then(
+            () => console.log("Successfully saved space!"),
+            () => console.log("Something went wrong when saving the space! :(")
+        );
     }
 
     /**
@@ -144,7 +161,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
      * @param data Serialized graph data.
      * @returns True, if successful.
      */
-    public loadGraph(data: GraphData): boolean {
+    public loadGraph(data: GraphData, id: string): boolean {
         console.log("Starting to load new graph ...");
         console.log(data);
 
@@ -160,6 +177,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
         // Set as new state
         console.log(graph);
         this.setState({
+            spaceId: id,
             graph: graph,
         });
 
@@ -315,6 +333,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
                             selectedNodes={this.state.selectedNodes}
                             settings={this.state.settings}
                             onNodeDataChange={this.handleNodeDataChange}
+                            onSave={this.saveSpace}
                         />
                     </div>
                 )}