Made space selectable

config.js

@@ -10,4 +10,8 @@ export const COLOR_PALETTE = [
 
 // Just renaming a variable which is given by the PHP script. This avoids errors in all other files.
 export const PLUGIN_PATH = plugin.path;
-export const SPACE = space.id;
+export var SPACE = space.id;
+
+export function setSpace(space) {
+    SPACE = space;
+}

datasets/datasets.js

@@ -6,7 +6,7 @@ import jQuery from "jquery";
  *
  * @param {String} spaceId Identification of graph to load.
  *
- * @returns Promise returning graph object
+ * @returns Promise returning graph object.
  */
 export function loadGraphJson(spaceId) {
     let payload = {
@@ -28,6 +28,8 @@ export function loadGraphJson(spaceId) {
  *
  * @param {String} spaceId Identification of graph to save.
  * @param {object} json Graph object
+ *
+ * @returns Promise returning state of query.
  */
 export function saveGraphJson(spaceId, json) {
     let payload = {
@@ -36,10 +38,26 @@ export function saveGraphJson(spaceId, json) {
         space: spaceId,
     };
 
-    return jQuery
-        .ajax({
-            type: "POST",
-            url: ajax_object.ajax_url,
-            data: payload,
-        });
+    return jQuery.ajax({
+        type: "POST",
+        url: ajax_object.ajax_url,
+        data: payload,
+    });
+}
+
+/**
+ * Retrieves a list of all available spaces to choose from.
+ *
+ * @returns A promise containing an array containing all available space ids.
+ */
+export function listAllSpaces() {
+    let payload = {
+        action: "list_spaces",
+    };
+
+    return jQuery.ajax({
+        type: "POST",
+        url: ajax_object.ajax_url,
+        data: payload,
+    }).then((data) => JSON.parse(data)["spaces"]);
 }

datasets/datasets.php

@@ -10,6 +10,16 @@ function kg_get_space() {
     wp_die();
 }
 
+add_action("wp_ajax_list_spaces", "kg_list_spaces"); // Fires only for logged-in-users
+function kg_list_spaces() {
+    $spaces = kg_get_list_of_spaces();
+    $payload = array("spaces" => $spaces);
+
+    echo json_encode($payload);
+
+    wp_die();
+}
+
 add_action("wp_ajax_update_space", "kg_update_space"); // Fires only for logged-in-users
 //add_action("wp_ajax_nopriv_update_space", 'update_space' ); // Fires for everyone
 function kg_update_space() {
@@ -40,3 +50,30 @@ function kg_store_new_graph($graph, $space_id) {
 function kg_get_space_file_path($space_id) {
     return __DIR__."/".$space_id.".json";
 }
+
+function kg_get_list_of_spaces() {
+    $all_files = scandir(__DIR__);
+
+    if ($all_files == false) {
+        return [];
+    }
+
+    $spaces = [];
+
+    foreach ($all_files as $file) {
+        if (endsWith($file, ".json")) {
+            $spaces[] = substr($file, 0, -strlen(".json"));
+        }
+    }
+
+    return $spaces;
+}
+
+function endsWith( $haystack, $needle ) {
+    # Source: https://stackoverflow.com/a/834355/7376120
+    $length = strlen( $needle );
+    if( !$length ) {
+        return true;
+    }
+    return substr( $haystack, -$length ) === $needle;
+}

editor/editor.php

@@ -61,10 +61,19 @@
             </div>
         </div>
         <div id="settings-menu" class="hidden" checked>
+            <label for="space-id-select">Space</label>
+            </br>
+            <select id="space-id-select" name="space-id-select" class="bottom-space">
+            </select>
+
+            </br>
+            </br>
+
             <input type="checkbox" checked id="label-toggle" name="label-toggle" class="bottom-space">
             <label for="label-toggle">Show labels in graph</label>
             </input>
 
+            </br>
             </br>
 
             <label>Simulate physics from beginning</label>

editor/js/editor.js

@@ -3,11 +3,11 @@ import * as Graph from "./graph";
 import { loadGraphJson } from "../../datasets/datasets";
 import ForceGraph from "force-graph";
 import * as Interactions from "./interactions";
-import { SPACE } from "../../config";
+import { setSpace, SPACE } from "../../config";
 
 
-export var state;
-export var graph;
+export var state = undefined;
+export var graph = undefined;
 var graphObj;
 
 window.onload = function () {
@@ -21,7 +21,17 @@ window.onload = function () {
 
     Interactions.initInteractions();
 
-    loadGraphJson(SPACE) // space_id defined globaly through knowledge-space.php
+    loadSpace(SPACE);
+};
+
+
+export function loadSpace(spaceId) {
+    if (state !== undefined && spaceId === SPACE) {
+        return;
+    }
+    setSpace(spaceId);
+
+    return loadGraphJson(SPACE)
         .then((graphConfig) => {
             state = new State();
             graph = new Graph.Graph(graphConfig);
@@ -29,8 +39,7 @@ window.onload = function () {
 
             graph.restartSimulation();
         });
-};
-
+}
 
 function extractPositions(event) {
     return {

editor/js/interactions.js

 import jQuery from "jquery";
 import { state, graph } from "./editor";
-import { saveGraphJson } from "../../datasets/datasets";
+import { listAllSpaces, saveGraphJson } from "../../datasets/datasets";
 import { SPACE } from "../../config";
 
 /**
@@ -13,4 +13,19 @@ export function initInteractions() {
     jQuery("button#save").on("click", () => {
         saveGraphJson(SPACE, graph.getCleanData());    // space_id defined globaly through knowledge-space.php
     });
+
+    // Fill space dropdown
+    var selectContainer = jQuery("#space-id-select");
+    listAllSpaces().then((spaces) => {
+        spaces.forEach(space => {
+            var selectedTxt = "";
+            if (space === SPACE) {
+                selectedTxt = "selected ";
+            }
+
+            var child = "<option " + selectedTxt + "value=\"" + space + "\">" + space + "</option>"
+            selectContainer.append(child);
+        });
+    });
+    selectContainer.val(SPACE);
 }

editor/js/tools/menus/settingsmenu.js

+import { SPACE } from "../../../../config";
+import { loadSpace } from "../../editor";
 import ToolMenu from "./toolmenu";
 
 const LABEL_TOGGLE_ID = "#label-toggle";
 const RESIMULATE_BUTTON_ID = "#reanimate-button";
 const PHYSICS_DELAY_ID = "#stop-physics-delay";
+const SPACE_SELECT_ID = "#space-id-select";
 
 export const PHYSICS_DELAY_KEY = "delay";
 export const RESIMULATE_KEY = "resimulate";
@@ -28,5 +31,14 @@ export class SettingsMenu extends ToolMenu {
         this.find(RESIMULATE_BUTTON_ID).on("click", () => {
             this.notifyTool(RESIMULATE_KEY);
         });
+        this.find(SPACE_SELECT_ID).on("click", (e) => {
+            var newSpace = e.target.value;
+            if (newSpace === SPACE) {
+                return;
+            }
+
+            loadSpace(newSpace);
+            this.hide();
+        });
     }
 }