Merge pull request #32 from KNowledgeOnWebScale/review/bdm

Review/bdm
KNowledgeOnWebScale · Aug 5, 2022 · 761e128 · 761e128
2 parents 1b2f560 + ee12a53
commit 761e128
Show file tree

Hide file tree

Showing 15 changed files with 1,867 additions and 1,901 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Tibo Stroo
+Copyright (c) 2022 KNowledge on Web Scale
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,12 +10,12 @@
     "ajv": "^8.11.0",
     "ajv-errors": "^3.0.0",
     "bootstrap": "^5.2.0",
-    "dagre": "latest",
+    "dagre": "^0.8.5",
     "js-yaml": "^4.1.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.4.0",
+    "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
-    "react-flow-renderer": "^10.3.11",
+    "react-flow-renderer": "^10.3.12",
     "react-scripts": "5.0.1"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -2,7 +2,7 @@ import React, {useCallback} from 'react';
 
 import ReactFlow, {addEdge, Controls, useEdgesState, useNodesState,} from 'react-flow-renderer';
 
-import SvgNode from "./custom/node/SvgNode";
+import SvgNode from "./custom/node/Node";
 
 import EditorArea from "./custom/editors/EditorArea";
 
@@ -38,10 +38,11 @@ const EdgesFlow = () => {
 
 
             <div style={{
-                width: window.innerWidth * 0.96,
+                width: window.innerWidth * 0.48,
                 height: window.innerHeight * 0.96,
                 border: "solid 1px black",
-                margin: "10px auto 10px auto"
+                margin: "10px auto 10px auto",
+                display: "inline-block"
             }}>
                 <ReactFlow
                     nodes={nodes}

diff --git a/src/CustomEdge.js b/src/CustomEdge.js
diff --git a/src/custom/editors/MyEditor.js → src/custom/editors/CodeEditor.js b/src/custom/editors/MyEditor.js → src/custom/editors/CodeEditor.js
@@ -1,23 +1,23 @@
 import Editor from "@monaco-editor/react";
 import {useState} from "react";
 
-const MyEditor = ({language, data, setData, modelName, schema}) => {
+const CodeEditor = ({language, data, setData, modelName, schema}) => {
 
-    const [myEditor, setMyEditor] = useState(null);
-    const [myMonaco, setMyMonaco] = useState(null);
-    const [myModel, setMyModel] = useState(null)
-    const [myModelUri, setMyModelUri] = useState(null)
+    const [editorInstance, setEditorInstance] = useState(null);
+    const [monacoInstance, setMonacoInstance] = useState(null);
+    const [modelInstance, setModelInstance] = useState(null)
+    const [modelUriInstance, setModelUriInstance] = useState(null)
 
     function editorDidMountNodes(editor, monaco) {
         // https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults
 
         const modelUri = monaco.Uri.parse(modelName + ".json"); // a made up unique URI for our model
         const model = monaco.editor.createModel(data, 'json', modelUri);
 
-        setMyEditor(editor);
-        setMyMonaco(monaco);
-        setMyModel(model);
-        setMyModelUri(modelUri)
+        setEditorInstance(editor);
+        setMonacoInstance(monaco);
+        setModelInstance(model);
+        setModelUriInstance(modelUri)
 
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
@@ -38,18 +38,18 @@ const MyEditor = ({language, data, setData, modelName, schema}) => {
     // This component gets created multiple times and the changes you do on monaco or editor are probably overwritten
     // In this function, I just overwrite it again when you click with you mouse on the editor
     function initAgain() {
-        myMonaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        monacoInstance.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
             schemas: [
                 {
                     // uri: "http://.....-schema.json",
-                    fileMatch: [myModelUri.toString()],
+                    fileMatch: [modelUriInstance.toString()],
                     schema: schema
                 }
             ]
         })
 
-        myEditor.setModel(myModel);
+        editorInstance.setModel(modelInstance);
     }
 
 
@@ -69,4 +69,4 @@ const MyEditor = ({language, data, setData, modelName, schema}) => {
     </>
 }
 
-export default MyEditor;
+export default CodeEditor;
diff --git a/src/custom/editors/EditorArea.js b/src/custom/editors/EditorArea.js
@@ -4,6 +4,10 @@ import dagre from "dagre";
 import YAML from "js-yaml";
 import {useState} from "react";
 
+// TODO make this cleaner, something like below, which abstracts away all the example handling you're now doing in a UI component
+/*
+import examples from "../../data/examples"
+*/
 import {
     edgesJSON as edgesJSON1,
     globalDefaultsJSON as globalDefaultsJSON1,
@@ -36,10 +40,11 @@ import {
 } from "../../data/exampleData6";
 
 
-import {GRAPH, parseEdges, parseGlobalDefaults, parseNodes} from "./editorUtil";
+import {GRAPH, parseEdges, parseGlobalDefaults, parseNodes} from "./configParsing";
 import {getLayoutedElementsDagre} from "./editorUtilPositioning";
 import {edgeSchema, globalDefaultSchema, nodeSchema, validateJSON} from "./schemaValidation";
-import MyEditor from "./MyEditor";
+import MyEditor from "./CodeEditor";
+import ErrorModal from "./ErrorModal";
 
 
 const EditorArea = ({setNodes, setEdges}) => {
@@ -55,18 +60,15 @@ const EditorArea = ({setNodes, setEdges}) => {
     const [errorMessages, setErrorMessages] = useState([]);
 
 
+    // TODO see previous todo: this should not be here anymore
     const examples = [
         [globalDefaultsJSON1, nodesJSON1, edgesJSON1], [globalDefaultsJSON2, nodesJSON2, edgesJSON2],
         [globalDefaultsJSON3, nodesJSON3, edgesJSON3], [globalDefaultsJSON4, nodesJSON4, edgesJSON4],
         [globalDefaultsJSON5, nodesJSON5, edgesJSON5], [globalDefaultsJSON6, nodesJSON6, edgesJSON6],
     ];
 
-    function handleErrorPopUpClose() {
-        setErrorMessageTitle("")
-        setErrorMessages([])
-        setErrorModalVisible(false)
-    }
 
+    // TODO this is generic code
     function json2yaml(jsonData) {
         let yamlValue;
         try {
@@ -88,7 +90,7 @@ const EditorArea = ({setNodes, setEdges}) => {
         }
     }
 
-
+    // TODO this is a mix of non-UI code, and creates a dependency on 'examples', I'd split in 2 functions
     function loadExample(e, number) {
         e.preventDefault();
 
@@ -109,19 +111,19 @@ const EditorArea = ({setNodes, setEdges}) => {
         setEdgesData(edges);
     }
 
-    function changeLanguage(e) {
-        let newLang = e;
+    function changeLanguage(eventKey) {
+        let newLang = eventKey;
 
         if (newLang === "yaml" && language === "json") {
             setGlobalDefaults(json2yaml(globalDefaults));
             setNodesData(json2yaml(nodesData));
             setEdgesData(json2yaml(edgesData));
-            setLanguage(e);
+            setLanguage(eventKey);
         } else if (newLang === "json" && language === "yaml") {
             setGlobalDefaults(yaml2json(globalDefaults));
             setNodesData(yaml2json(nodesData));
             setEdgesData(yaml2json(edgesData));
-            setLanguage(e);
+            setLanguage(eventKey);
         }
 
     }
@@ -197,22 +199,19 @@ const EditorArea = ({setNodes, setEdges}) => {
     }
 
 
+    function handleErrorPopUpClose() {
+        setErrorMessageTitle("")
+        setErrorMessages([])
+        setErrorModalVisible(false)
+    }
+
     return <>
+        <ErrorModal errorModalVisible={errorModalVisible}
+                    errorMessageTitle={errorMessageTitle}
+                    errorMessages={errorMessages}
+                    handleErrorPopUpClose={handleErrorPopUpClose}
+        />
 
-        <Modal show={errorModalVisible} onHide={handleErrorPopUpClose}
-               scrollable={true}>
-            <Modal.Header closeButton>
-                <Modal.Title>{errorMessageTitle}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-                {errorMessages.map(e => <p>{e}</p>)}
-            </Modal.Body>
-            <Modal.Footer>
-                <Button variant="danger" onClick={handleErrorPopUpClose}>
-                    OK
-                </Button>
-            </Modal.Footer>
-        </Modal>
 
         <div className="d-flex">
             {
@@ -236,7 +235,7 @@ const EditorArea = ({setNodes, setEdges}) => {
         </Dropdown>
 
 
-        <div className="edit-area" id="global-default-editor">
+        <div className="edit-area" id="global-default-editor" style={{width: "49%", display: "inline-block"}}>
             <div className="code-editor resizable" style={{height: "200px"}}>
                 <h5>Global defaults editor</h5>
                 <MyEditor language={language} data={globalDefaults} setData={setGlobalDefaults}
@@ -249,7 +248,9 @@ const EditorArea = ({setNodes, setEdges}) => {
                     <MyEditor language={language} data={nodesData} setData={setNodesData} modelName={"nodes-model"}
                               schema={nodeSchema}/>
                 </div>
-
+            </div>
+            <div className="d-flex resizable code-editor"
+                 style={{height: "350px"}}>
                 <div className="node-edge-editor">
                     <h5>Edge editor</h5>
                     <MyEditor language={language} data={edgesData} setData={setEdgesData} modelName={"edges-model"}

diff --git a/src/custom/editors/ErrorModal.js b/src/custom/editors/ErrorModal.js
@@ -0,0 +1,27 @@
+import {Button, Modal} from "react-bootstrap";
+
+const ErrorModal = ({errorModalVisible, errorMessageTitle, errorMessages, handleErrorPopUpClose}) => {
+
+
+    return <>
+
+        <Modal show={errorModalVisible} onHide={handleErrorPopUpClose}
+               scrollable={true}>
+            <Modal.Header closeButton>
+                <Modal.Title>{errorMessageTitle}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {errorMessages.map(e => <p>{e}</p>)}
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="danger" onClick={handleErrorPopUpClose}>
+                    OK
+                </Button>
+            </Modal.Footer>
+        </Modal>
+
+    </>
+
+}
+
+export default ErrorModal;