Merge branch 'development' into review/bdm

KNowledgeOnWebScale · Aug 5, 2022 · ddeba8f · ddeba8f
2 parents c4650c0 + 1b2f560
commit ddeba8f
Show file tree

Hide file tree

Showing 21 changed files with 362 additions and 172 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,19 @@
+# Changelog
+
+Dates are DD-MM-YYYY
+
+
+
+## [0.1.0] - 04-08-2022
+First ever release. You can make flows from JSON or YAML.
+
+
+
+## Unreleased
+
+### Added
+
+### Changed
+- Issue #4: Global settings have nested objects 'graph', 'node' and 'edge'. 
+
+### Removed
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,16 +1,16 @@
 {
   "files": {
     "main.css": "/dataflow-visualization/static/css/main.98435179.css",
-    "main.js": "/dataflow-visualization/static/js/main.94411a13.js",
+    "main.js": "/dataflow-visualization/static/js/main.318873d1.js",
     "static/media/rmlio.png": "/dataflow-visualization/static/media/rmlio.859bf1ae940ec1adc300.png",
     "static/media/comunica.svg": "/dataflow-visualization/static/media/comunica.273048f85711071b81289050f3fe05b5.svg",
     "static/media/solid.svg": "/dataflow-visualization/static/media/solid.a1e6ec7c34310abf76c8239e197d822e.svg",
     "index.html": "/dataflow-visualization/index.html",
     "main.98435179.css.map": "/dataflow-visualization/static/css/main.98435179.css.map",
-    "main.94411a13.js.map": "/dataflow-visualization/static/js/main.94411a13.js.map"
+    "main.318873d1.js.map": "/dataflow-visualization/static/js/main.318873d1.js.map"
   },
   "entrypoints": [
     "static/css/main.98435179.css",
-    "static/js/main.94411a13.js"
+    "static/js/main.318873d1.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/dataflow-visualization/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/dataflow-visualization/logo192.png"/><link rel="manifest" href="/dataflow-visualization/manifest.json"/><title>Flow Visualization</title><script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script><script>var Alert=ReactBootstrap.Alert</script><script defer="defer" src="/dataflow-visualization/static/js/main.94411a13.js"></script><link href="/dataflow-visualization/static/css/main.98435179.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/dataflow-visualization/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/dataflow-visualization/logo192.png"/><link rel="manifest" href="/dataflow-visualization/manifest.json"/><title>Flow Visualization</title><script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script><script>var Alert=ReactBootstrap.Alert</script><script defer="defer" src="/dataflow-visualization/static/js/main.318873d1.js"></script><link href="/dataflow-visualization/static/css/main.98435179.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/js/main.94411a13.js → build/static/js/main.318873d1.js b/build/static/js/main.94411a13.js → build/static/js/main.318873d1.js
diff --git a/build/static/js/main.94411a13.js.LICENSE.txt → build/static/js/main.318873d1.js.LICENSE.txt b/build/static/js/main.94411a13.js.LICENSE.txt → build/static/js/main.318873d1.js.LICENSE.txt
diff --git a/build/static/js/main.318873d1.js.map b/build/static/js/main.318873d1.js.map
diff --git a/build/static/js/main.94411a13.js.map b/build/static/js/main.94411a13.js.map
diff --git a/src/App.js b/src/App.js
@@ -18,11 +18,7 @@ const nodeTypes = {
 
 
 //TODO: before parsing, check if all necessary keys are present, if not, do user friendly error handling
-// TODO:  mss ook een regex test doen op de values (bv height moet een nummer zijn [0-9]+, orientation is "vertical|horizontal" ...
 
-//let defaults = parseGlobalDefaults(globalDefaults);
-//let parsedNodes = parseNodes(defaults, nodesData);
-//let parsedEdges = parseEdges(defaults, edgesData, nodesData);
 
 const EdgesFlow = () => {
 

diff --git a/src/custom/editors/EditorArea.js b/src/custom/editors/EditorArea.js
@@ -40,15 +40,15 @@ import {
 } from "../../data/exampleData6";
 
 
-import {parseEdges, parseGlobalDefaults, parseNodes} from "./editorUtil";
+import {GRAPH, parseEdges, parseGlobalDefaults, parseNodes} from "./editorUtil";
 import {getLayoutedElementsDagre} from "./editorUtilPositioning";
 import {edgeSchema, globalDefaultSchema, nodeSchema, validateJSON} from "./schemaValidation";
 import MyEditor from "./MyEditor";
 
 
 const EditorArea = ({setNodes, setEdges}) => {
 
-    const [globalDefaults, setGlobalDefaults] = useState(JSON.stringify({}));
+    const [globalDefaults, setGlobalDefaults] = useState(JSON.stringify({"graph": {}, "node": {}, "edge": {}}));
     const [nodesData, setNodesData] = useState(JSON.stringify([]));
     const [edgesData, setEdgesData] = useState(JSON.stringify([]));
 
@@ -117,7 +117,6 @@ const EditorArea = ({setNodes, setEdges}) => {
 
     // TODO note how I changed the very vague `e` to a more descriptive variable name
     function changeLanguage(eventKey) {
-
         let newLang = eventKey;
 
         if (newLang === "yaml" && language === "json") {
@@ -191,16 +190,17 @@ const EditorArea = ({setNodes, setEdges}) => {
         let nodes = parseNodes(defaults, parsedNd);
         let edges = parseEdges(defaults, parsedEd, nodes);
 
+        console.log(edges)
 
-        if (defaults["autoLayout"]) {
+        //TODO met keys uit hashmap werken
+        if (defaults[GRAPH]["autoLayout"]) {
             const dagreGraph = new dagre.graphlib.Graph();
             dagreGraph.setDefaultEdgeLabel(() => ({}));
             [nodes, edges] = getLayoutedElementsDagre(dagreGraph, nodes, edges, defaults);
         }
 
         setNodes(nodes);
         setEdges(edges);
-
     }
 
 
@@ -215,16 +215,19 @@ const EditorArea = ({setNodes, setEdges}) => {
                 {errorMessages.map(e => <p>{e}</p>)}
             </Modal.Body>
             <Modal.Footer>
-                <Button variant="danger" onClick={() => handleErrorPopUpClose()}>
+                <Button variant="danger" onClick={handleErrorPopUpClose}>
                     OK
                 </Button>
             </Modal.Footer>
         </Modal>
 
         <div className="d-flex">
             {
-                examples.map((_, i) => <Button className="primary" onClick={e => loadExample(e, i + 1)}
-                                               key={i}>example {i + 1}</Button>
+                examples.map((_, i) => (
+                        <Button className="primary" onClick={e => loadExample(e, i + 1)}
+                                key={i}>example {i + 1}
+                        </Button>
+                    )
                 )
             }
         </div>
@@ -243,15 +246,11 @@ const EditorArea = ({setNodes, setEdges}) => {
         <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}
                           modelName={"global-defaults-model"} schema={globalDefaultSchema}/>
-
             </div>
 
-            <div className="d-flex resizable code-editor"
-                 style={{height: "350px"}}>
-
+            <div className="d-flex resizable code-editor" style={{height: "350px"}}>
                 <div className="node-edge-editor">
                     <h5>Node editor</h5>
                     <MyEditor language={language} data={nodesData} setData={setNodesData} modelName={"nodes-model"}

diff --git a/src/custom/editors/MyEditor.js b/src/custom/editors/MyEditor.js
@@ -64,7 +64,7 @@ const MyEditor = ({language, data, setData, modelName, schema}) => {
                 onChange={content => setData(content)}
                 theme="vs-dark"
                 style={{
-                    width: "100%",
+                    width: "100%"
                 }}
             />
         </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/dataflow-visualization/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/dataflow-visualization/logo192.png"/><link rel="manifest" href="/dataflow-visualization/manifest.json"/><title>Flow Visualization</title><script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script><script>var Alert=ReactBootstrap.Alert</script><script defer="defer" src="/dataflow-visualization/static/js/main.94411a13.js"></script><link href="/dataflow-visualization/static/css/main.98435179.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/dataflow-visualization/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/dataflow-visualization/logo192.png"/><link rel="manifest" href="/dataflow-visualization/manifest.json"/><title>Flow Visualization</title><script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script><script>var Alert=ReactBootstrap.Alert</script><script defer="defer" src="/dataflow-visualization/static/js/main.318873d1.js"></script><link href="/dataflow-visualization/static/css/main.98435179.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>