Parsing graph in front end now

datasets/datasets.js

@@ -7,9 +7,58 @@ import jQuery from "jquery";
  *
  * @param {String} spaceId Identification of graph to load.
  *
- * @returns Promise returning graph object.
+ * @returns Promise returning simple graph object.
  */
 export function loadGraphJson(spaceId) {
+    return loadSpaceJson(spaceId).then((json) => {
+        var space = Object.values(json.spaces)[0];
+
+        // Simplify nodes
+        var nodes = [];
+        Object.values(space.nodes).forEach((n) => {
+            var references = Object.values(n.references).map((r) => r.url);
+
+            nodes.push({
+                id: n.node_id,
+                name: n.title,
+                description: n.description,
+                type: n.type.name,
+                color: n.type.color,
+                video: n.video_url,
+                icon: n.icon_url,
+                header: n.header_url,
+                references: references
+            });
+        });
+
+        // Simplify links
+        var links = [];
+        Object.values(space.links).forEach((l) => {
+            links.push({
+                source: l.source_node_id,
+                target: l.target_node_id,
+            });
+        });
+
+        // Convert to simple object
+        return {
+            id: space.space_id,
+            name: space.name,
+            description: space.description,
+            nodes: nodes,
+            links: links,
+        };
+    });
+}
+
+/**
+ * Returns the json object from the stored graph as promise.
+ *
+ * @param {String} spaceId Identification of graph to load.
+ *
+ * @returns Promise returning detailed space object.
+ */
+export function loadSpaceJson(spaceId) {
     let payload = {
         action: "get_space",
         space_id: spaceId,

editor/editor.php

 <div id="ks-editor">
     <!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
-    <h1>Interface</h1>
+    <h1>Interface<span id="header-space-title"></span></h1>
     <div id="box-select-layer">
         <div id="2d-graph"></div>
     </div>

editor/js/editor.js

@@ -4,6 +4,7 @@ import { loadGraphJson } from "../../datasets/datasets";
 import ForceGraph from "force-graph";
 import * as Interactions from "./interactions";
 import { setSpace, SPACE } from "../../config";
+import jquery from "jquery";
 
 export var state = undefined;
 export var graph = undefined;
@@ -30,6 +31,8 @@ export function loadSpace(spaceId) {
     setSpace(spaceId);
 
     return loadGraphJson(SPACE).then((graphConfig) => {
+        jquery("#ks-editor #header-space-title").text(" - " + graphConfig.name + " [" + graphConfig.id + "]");
+
         state = new State();
         graph = new Graph.Graph(graphConfig);
         load();

knowledge-space.php

@@ -24,7 +24,7 @@ function ks_add_graph($atts = []): string
 function parse_atts($atts)
 {
     return shortcode_atts(array(
-        'space' => 'space',
+        'space' => '1',
         'mode' => 'default'
     ), $atts);
 }
@@ -44,14 +44,13 @@ function ks_localize($handle, $atts)
         echo '</pre>';
     }
 
-    $space_id = kg_get_space_id_from_atts($atts); // TODO: Replace with $params
     $plugin_dir = plugin_dir_url(__FILE__);
     wp_localize_script(
         $handle,
         'ks_global',
         array(
             'ajax_url' => admin_url('admin-ajax.php'),
-            'space_id' => $space_id,
+            'space_id' => $params['space'],
             'plugin_path' => $plugin_dir,
             'mode' => $params['mode']
         )
@@ -79,29 +78,6 @@ function ks_load_styles() {
     wp_enqueue_style('ks-style', plugins_url($styles_path, __FILE__));
 }
 
-
-function kg_escape_space_id($id)
-{
-    return str_replace(
-        "\\",
-        "-",
-        str_replace(
-            "/",
-            "-",
-            str_replace(" ", "-", $id)
-        )
-    );
-}
-
-function kg_get_space_id_from_atts($atts)
-{
-    if ($atts != "" && array_key_exists("space", $atts)) {
-        return kg_escape_space_id($atts["space"]);
-    } else {
-        return "space";
-    }
-}
-
 add_action('admin_menu', 'kg_editor_admin_add_page');
 function kg_editor_admin_add_page()
 {