Implemented simple datasets interface

datasets/datasets.js

+import { PLUGIN_PATH } from "../config";
+
+export const DATASETS_URL = PLUGIN_PATH + "datasets/datasets.php";
+
+/**
+ * Returns the json object from the stored graph as promise.
+ *
+ * @param {String} spaceId Identification of graph to load.
+ * 
+ * @returns Promise returning graph object
+ */
+export function loadGraphJson(spaceId) {
+    return fetch(DATASETS_URL + "?space_id=" + spaceId)
+        .then((r) => r.json());
+}
+
+/**
+ * Takes the graph json object and stores it in the backend.
+ *
+ * @param {object} json Graph object
+ */
+export function saveGraphJson(spaceId, json) {
+    var payload = {
+        space_id: spaceId,
+        graph: JSON.stringify(json),
+    };
+
+    var auth = getAuthPayload();
+    if (auth === undefined) {
+        return undefined;
+    }
+
+    return fetch(DATASETS_URL, {
+        method: "POST",
+        body: JSON.stringify(Object.assign(payload, auth)),
+    });
+}
+
+function getAuthPayload() {
+    //! TODO: Implement auth
+    return {};
+}

datasets/datasets.php

+<?php
+
+function handle_request()
+{
+    if ($_SERVER["REQUEST_METHOD"] == "GET") {
+        handle_get($_GET);
+    } else if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        handle_post(get_post_data());
+    }
+}
+
+function get_post_data()
+{
+    return json_decode(file_get_contents('php://input'), true);
+}
+
+function handle_get($request_data) {
+    $file_path = get_space_file_path($request_data["space_id"]);
+
+    $content = file_get_contents($file_path);
+    echo $content;
+}
+
+function handle_post($request_data) {
+    $file_path = get_space_file_path($request_data["space_id"]);
+
+    file_put_contents($file_path, $request_data["graph"], "w");
+}
+
+function get_space_file_path($space_id) {
+    return __DIR__."/".$space_id.".json";
+}
+
+handle_request();

display/graph.js

 import * as Config from "../config";
 import * as Helpers from "./helpers";
+import { loadGraphJson } from "../datasets/datasets";
 import { NodeInfoOverlay } from "./overlays/nodeinfo";
 import { LinkSelectionOverlay } from "./overlays/linkselection";
 
@@ -20,7 +21,7 @@ class Graph {
      * Constructs a new Graph object.
      * @param {string} dataUrl URL to a JSON object defining the graph structure.
      */
-    constructor(dataUrl) {
+    constructor(spaceId) {
         this.graph = null;
         this.gData = null;
 
@@ -35,17 +36,17 @@ class Graph {
 
         this.edgeTypeVisibility = {};
 
-        this.loadGraph(dataUrl);
+        this.loadGraph(spaceId);
     }
 
     /**
      * Loads the graph by constructing a new ForceGraph3D object.
-     * Also fetches the JSON data from the given URL.
-     * @param {string} dataUrl URL to a JSON object defining the graph structure.
+     * Also fetches the JSON data from the given space.
+     * @param {string} spaceId ID to a JSON object defining the graph structure.
      * @returns {Promise<void>}
      */
-    async loadGraph(dataUrl) {
-        this.gData = await fetch(dataUrl).then((res) => res.json());
+    async loadGraph(spaceId) {
+        this.gData = await loadGraphJson(spaceId);
         this.graph = ForceGraph3D({
             extraRenderers: [new CSS2DRenderer(), new CSS3DRenderer()],
         })(document.getElementById("3d-graph"))
@@ -399,7 +400,7 @@ var infooverlay;
 
 // Only execute, if corresponding dom is present
 if (document.getElementById("3d-graph") !== null) {
-    G = new Graph(dataUrl);
+    G = new Graph(space_id);    // space_id defined globaly through knowledge-space.php
     linkoverlay = new LinkSelectionOverlay(G);
     infooverlay = new NodeInfoOverlay(G);
     G.infooverlay = infooverlay;

editor/js/editor.js

 import { State } from "./state";
 import * as Graph from "./graph";
+import { loadGraphJson } from "../../datasets/datasets";
 import ForceGraph from "force-graph";
 import * as Interactions from "./interactions";
 
@@ -19,10 +20,7 @@ window.onload = function () {
 
     Interactions.initInteractions();
 
-    fetch(Graph.JSON_CONFIG)
-        .then((r) => {
-            return r.json();
-        })
+    loadGraphJson(space_id) // space_id defined globaly through knowledge-space.php
         .then((graphConfig) => {
             state = new State();
             graph = new Graph.Graph(graphConfig);

knowledge-space.php

@@ -9,13 +9,15 @@ Author: Matthias Konitzny
 
 $GLOBALS['build'] = 'debug';
 
-function ks_add_graph(): string
+function ks_add_graph($atts = []): string
 {
+    $space_id = get_space_id_from_atts($atts);
     $div = '<div id="3d-graph"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
     $plugin_dir = plugin_dir_url(__FILE__);
     //$dataset = $plugin_dir.'datasets/miserables.json';
     $variables = "<script> 
                   var plugin_path = '$plugin_dir';
+                  var space_id = '$space_id';
                   </script>";
 
     $script_path = $plugin_dir . 'build' . DIRECTORY_SEPARATOR . $GLOBALS['build'] . DIRECTORY_SEPARATOR . 'graph.js';
@@ -25,13 +27,15 @@ function ks_add_graph(): string
     return $div . $variables . $script;
 }
 
-function ks_add_editor()
+function ks_add_editor($atts = [])
 {
     ks_add_editor_dependencies();
 
+    $space_id = get_space_id_from_atts($atts);
     $plugin_dir = plugin_dir_url(__FILE__);
     echo "<script> 
         var plugin_path = '$plugin_dir';
+        var space_id = '$space_id';
         </script>";
 
     require_once(__DIR__ . '/editor/editor.php');
@@ -54,6 +58,27 @@ function kg_load_css()
     wp_enqueue_style('kg-style', $plugin_dir . 'kg-style.css');
 }
 
+function escape_space_id($id)
+{
+    return str_replace(
+        "\\",
+        "-",
+        str_replace(
+            "/",
+            "-",
+            str_replace(" ", "-", $id)
+        )
+    );
+}
+
+function get_space_id_from_atts($atts) {
+    if ($atts != "" && array_key_exists("space", $atts)) {
+        return escape_space_id($atts["space"]);
+    } else {
+        return "space";
+    }
+}
+
 add_action('wp_enqueue_scripts', 'kg_load_css');
 add_shortcode('knowledge-space', 'ks_add_graph');
 add_shortcode('knowledge-space-editor', 'ks_add_editor');