Add import/export of node content

Author: benjaminaaron

src/contextmenu.js

@@ -93,6 +93,8 @@ const nodeHeaderCtxMenuItems = [
     { label: "Save current as initial value", action: "SaveInitialValueAction", onlyVisibleFor: [ "TurtleInputNodeWithCopyPasteInPort" ] },
     { label: "Info", action: "InfoAction", onlyVisibleFor: [ "ExternalTurtleFilesInputNode", "ExternalSparqlEndpointInputNode" ] },
     { label: "Toggle settings", action: "ToggleSettings", onlyVisibleFor: [ "ShaclValidationNode" ] },
+    { label: "Import content", action: "ImportContent", onlyVisibleFor: [ "JsonLdInputNode" ] }, //  visible for input nodes TODO
+    { label: "Export content", action: "ExportContent", onlyVisibleFor: [ "JavaScriptExecNode" ] }, // visible for processor nodes TODO
 ]
 
 const multipleNodesHeaderCtxMenuItems = (count) => {

src/graph/Graph.js

@@ -20,6 +20,15 @@ export class Graph {
         this.applySettings()
     }
 
+    registerNodeImportContentTrigger(func) {
+        this.triggerNodeImportContent = func
+    }
+
+    triggerNodeImportContentForNode(node) {
+        this.nodeToReceiveImportedContent = node
+        this.triggerNodeImportContent(node)
+    }
+
     applySettings() {
         for (let setting of Object.values(this.settings)) {
             document.documentElement.style.setProperty(setting.variable, setting.value)

src/graph/node/Node.js

@@ -276,7 +276,8 @@ export class Node {
     saveInitialValue() { this.err() }
     getInfo() { this.err() }
     toggleSettings() { this.err() }
-
+    importContent() { this.err() }
+    exportContent() { this.err() }
     err() {
         console.error("This 'abstract base method' should not be called")
     }

src/graph/node/input/JsonLdInputNode.js

@@ -5,4 +5,8 @@ export class JsonLdInputNode extends CodeNode {
     constructor(initialValues, graph) {
         super(initialValues, graph, [], [ PORT.JSONLD ], TYPE.INPUT)
     }
+
+    importContent() {
+        this.graph.triggerNodeImportContentForNode(this)
+    }
 }

src/graph/node/processor/JavaScriptExecNode.js

@@ -1,10 +1,12 @@
 import { CodeNode } from "../CodeNode.js"
 import { PORT, TYPE } from "../../nodeFactory.js"
 import { newStore, addTripleToStore, storeToTurtle } from "../../../assets/bundle.js"
+import { download, getTimestamp } from "../../../utils.js"
 
 export class JavaScriptExecNode extends CodeNode {
     constructor(initialValues, graph) {
-        super(initialValues, graph, [ PORT.ANY, PORT.JAVASCRIPT ], [ PORT.ANY ], TYPE.PROCESSOR)
+        // change back to PORT.ANY TODO
+        super(initialValues, graph, [ PORT.ANY, PORT.JAVASCRIPT ], [ PORT.TURTLE ], TYPE.PROCESSOR)
     }
 
     async processIncomingData() {
@@ -19,4 +21,8 @@ export class JavaScriptExecNode extends CodeNode {
             return this.handleError(err.message)
         }
     }
+
+    exportContent() {
+        download(this.getValue(), "text/turtle", `export_${getTimestamp()}.ttl`)
+    }
 }

src/index.html

@@ -212,6 +212,7 @@
                 <span id="githubBtn" class="spanBtn">GitHub</span>
             </span>
         </div>
+        <input type="file" id="nodeImportContentFileUpload" style="display: none" />
         <div id="drawflow"></div>
         <script type="module">
             import { checkForNewRepoCommits } from "./check-repo-updates.js"
@@ -231,6 +232,7 @@
             editor.start()
 
             let graph = new Graph(editor, showMessage)
+            graph.registerNodeImportContentTrigger(() => document.getElementById("nodeImportContentFileUpload").click())
 
             const wipe = () => {
                 editor.clear()
@@ -368,6 +370,16 @@
                 wipe()
                 reader.readAsText(file)
             })
+            document.getElementById("nodeImportContentFileUpload").addEventListener("change", () => {
+                const reader = new FileReader()
+                reader.onload = event => {
+                    const content = event.target.result
+                    graph.nodeToReceiveImportedContent.setValue(content)
+                    graph.nodeToReceiveImportedContent = null
+                }
+                const file = document.getElementById("nodeImportContentFileUpload").files[0]
+                reader.readAsText(file)
+            })
             document.getElementById("importBtn").addEventListener("click", () => document.getElementById("fileUpload").click())
             document.getElementById("exportBtn").addEventListener("click", () => {
                 let modalContent = showModal("Export")
@@ -671,6 +683,12 @@
                             case "ToggleSettings":
                                 node.toggleSettings()
                                 break;
+                            case "ImportContent":
+                                node.importContent()
+                                break;
+                            case "ExportContent":
+                                node.exportContent()
+                                break;
                         }
                     })
                     return