Jh lab editor gui

package.json

@@ -15,7 +15,8 @@
     "analyze:vendor": "source-map-explorer build/static/js/1.*",
     "analyze:app": "source-map-explorer build/static/js/main.*",
     "check-npm": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
-    "preinstall": "yarn run check-npm"
+    "preinstall": "yarn run check-npm",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.24",
@@ -26,10 +27,10 @@
     "@types/history": "^4.7.3",
     "@types/humanize-duration": "^3.18.0",
     "@types/jwt-decode": "^2.2.1",
+    "@types/lodash": "^4.14.171",
     "@types/luxon": "^1.21.0",
     "@types/node": "^13.7.0",
-    "@types/novnc-core": "^0.1.1",
-    "@types/react": "^16.9.2",
+    "@types/novnc-core": "^0.1.1",    "@types/react": "^16.9.2",
     "@types/react-burger-menu": "^2.2.1",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.0",
@@ -44,12 +45,14 @@
     "@types/zxcvbn": "^4.4.0",
     "axios": "^0.19.2",
     "axios-retry": "^3.1.2",
+    "beautiful-react-diagrams": "^0.5.1",
     "browser-detect": "^0.2.28",
     "connected-react-router": "^6.6.1",
     "formik": "2.0.3",
     "history": "^4.10.1",
     "humanize-duration": "^3.21.0",
     "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.21",
     "luxon": "^1.21.3",
     "node-sass": "^4.12.0",
     "novnc-core": "^0.2.1",
@@ -87,6 +90,8 @@
     "jest": "24.9.0",
     "jest-cli": "^25.2.3",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "puppeteer": "^2.1.1",
     "react-scripts": "^3.4.1",
     "source-map-explorer": "^2.2.2",

patches/beautiful-react-diagrams+0.5.1.patch

@@ -0,0 +1,124 @@
+diff --git a/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js b/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
+index e4a958b..5a34e47 100644
+--- a/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
++++ b/node_modules/beautiful-react-diagrams/Diagram/Link/Link.js
+@@ -62,9 +62,9 @@ var Link = function Link(props) {
+     return getEntityCoordinates['default'](output, portRefs, nodeRefs, canvas);
+   }, [output, portRefs, nodeRefs, canvas]);
+   var pathOptions = {
+-    type: input.type === 'port' || output.type === 'port' ? 'bezier' : 'curve',
+-    inputAlignment: input.entity.alignment || null,
+-    outputAlignment: output.entity.alignment || null
++    type: (input?.type === 'port' || output?.type === 'port') ? 'bezier' : 'curve',
++    inputAlignment: input?.entity?.alignment || null,
++    outputAlignment: output?.entity?.alignment || null
+   };
+   var path = React.useMemo(function () {
+     return makeSvgPath['default'](inputPoint, outputPoint, pathOptions);
+diff --git a/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js b/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
+index 87da7a7..1e69411 100644
+--- a/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
++++ b/node_modules/beautiful-react-diagrams/Diagram/Link/getEntityCoordinates.js
+@@ -6,13 +6,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
+ var getRelativePoint = require('../../shared/functions/getRelativePoint.js');
+
+ var getEntityCoordinates = function getEntityCoordinates(entity, portRefs, nodeRefs, canvas) {
+-  if (entity && entity.type === 'node' && nodeRefs[entity.entity.id]) {
++  if (entity && entity?.type === 'node' && entity?.entity?.id && nodeRefs[entity.entity.id]) {
+     var nodeEl = nodeRefs[entity.entity.id];
+     var bbox = nodeEl.getBoundingClientRect();
+     return [entity.entity.coordinates[0] + bbox.width / 2, entity.entity.coordinates[1] + bbox.height / 2];
+   }
+
+-  if (portRefs && portRefs[entity.entity.id]) {
++  if (portRefs && entity?.entity?.id && portRefs[entity.entity.id]) {
+     var portEl = portRefs[entity.entity.id];
+
+     var _bbox = portEl.getBoundingClientRect();
+diff --git a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
+index 306fffc..8d87c56 100644
+--- a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
++++ b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/Link.js
+@@ -52,9 +52,9 @@ var Link = function Link(props) {
+     return getEntityCoordinates(output, portRefs, nodeRefs, canvas);
+   }, [output, portRefs, nodeRefs, canvas]);
+   var pathOptions = {
+-    type: input.type === 'port' || output.type === 'port' ? 'bezier' : 'curve',
+-    inputAlignment: input.entity.alignment || null,
+-    outputAlignment: output.entity.alignment || null
++    type: (input?.type === 'port' || output?.type === 'port') ? 'bezier' : 'curve',
++    inputAlignment: input?.entity?.alignment || null,
++    outputAlignment: output?.entity?.alignment || null
+   };
+   var path = useMemo(function () {
+     return makeSvgPath(inputPoint, outputPoint, pathOptions);
+diff --git a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
+index be36a34..7a1e4f3 100644
+--- a/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
++++ b/node_modules/beautiful-react-diagrams/esm/Diagram/Link/getEntityCoordinates.js
+@@ -2,13 +2,13 @@
+ import getRelativePoint from '../../shared/functions/getRelativePoint.js';
+
+ var getEntityCoordinates = function getEntityCoordinates(entity, portRefs, nodeRefs, canvas) {
+-  if (entity && entity.type === 'node' && nodeRefs[entity.entity.id]) {
++  if (entity && entity?.type === 'node' && entity?.entity?.id && nodeRefs[entity.entity.id]) {
+     var nodeEl = nodeRefs[entity.entity.id];
+     var bbox = nodeEl.getBoundingClientRect();
+     return [entity.entity.coordinates[0] + bbox.width / 2, entity.entity.coordinates[1] + bbox.height / 2];
+   }
+
+-  if (portRefs && portRefs[entity.entity.id]) {
++  if (portRefs && entity?.entity?.id && portRefs[entity.entity.id]) {
+     var portEl = portRefs[entity.entity.id];
+
+     var _bbox = portEl.getBoundingClientRect();
+diff --git a/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js b/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
+index 829d14a..2198760 100644
+--- a/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
++++ b/node_modules/beautiful-react-diagrams/esm/hooks/useSchema/schemaReducer.js
+@@ -27,12 +27,14 @@ var schemaReducer = function schemaReducer(state, action) {
+
+         if (state.nodes) {
+           var index = findIndex(state.nodes, ['id', action.payload.nodeId]);
+-          var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
+-          var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
+-          nextLinks = nextLinks.filter(function (link) {
+-            return !inputPorts.includes(link.input) && !outputPorts.includes(link.output);
+-          });
+-          state.nodes.splice(index, 1);
++          if (index >= 0) {
++            var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
++            var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
++            nextLinks = nextLinks.filter(
++              (link) => !inputPorts.includes(link.input) && !outputPorts.includes(link.output),
++            );
++            state.nodes.splice(index, 1);
++          }
+         }
+
+         return {
+diff --git a/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js b/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
+index fd9b41c..82c69b8 100644
+--- a/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
++++ b/node_modules/beautiful-react-diagrams/hooks/useSchema/schemaReducer.js
+@@ -35,12 +35,14 @@ var schemaReducer = function schemaReducer(state, action) {
+
+         if (state.nodes) {
+           var index = findIndex__default['default'](state.nodes, ['id', action.payload.nodeId]);
+-          var inputPorts = getNodePortsId['default'](state.nodes[index], 'inputs');
+-          var outputPorts = getNodePortsId['default'](state.nodes[index], 'outputs');
+-          nextLinks = nextLinks.filter(function (link) {
+-            return !inputPorts.includes(link.input) && !outputPorts.includes(link.output);
+-          });
+-          state.nodes.splice(index, 1);
++          if (index >= 0) {
++            var inputPorts = getNodePortsId(state.nodes[index], 'inputs');
++            var outputPorts = getNodePortsId(state.nodes[index], 'outputs');
++            nextLinks = nextLinks.filter(
++              (link) => !inputPorts.includes(link.input) && !outputPorts.includes(link.output),
++            );
++            state.nodes.splice(index, 1);
++          }
+         }
+
+         return {

src/components/LabEditorGUI/ContextContainer.tsx

@@ -0,0 +1,20 @@
+import React, { useRef } from 'react';
+import ContextMenu from './ContextMenu';
+
+
+const ContextContainer = ({ children, menuItems, schema}: any) => {
+  const containerRef = useRef(null);
+
+  return (
+    <div ref={containerRef}>
+      {children}
+      <ContextMenu
+        schema={schema}
+        parentRef={containerRef}
+        items={menuItems}
+      />
+    </div>
+  );
+};
+
+export default ContextContainer;

src/components/LabEditorGUI/ContextMenu.css

@@ -0,0 +1,16 @@
+.context-menu {
+  position: fixed;
+  background-color: #d6d8db;
+  padding: 10px 0;
+  cursor: default;
+  border-radius: 5px;
+  z-index: 2000;
+}
+
+.context-menu__item {
+  padding: 0 30px;
+}
+
+.context-menu .context-menu__item:hover {
+  background-color: #c7c7c9;
+}

src/components/LabEditorGUI/ContextMenu.tsx

@@ -0,0 +1,58 @@
+import React, {useEffect, useState} from 'react';
+import './ContextMenu.css';
+
+const ContextMenu = ({parentRef, items}:any) => {
+  const [isVisible, setVisibility ] = useState(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+
+  useEffect(() => {
+    const parent = parentRef.current;
+    if (!parent) {
+      return;
+    }
+
+    const showMenu = (event: any) => {
+      event.preventDefault();
+      setX(event.clientX);
+      setY(event.clientY);
+      setVisibility(true);
+    };
+
+    const closeMenu = () => {
+      setVisibility(false);
+    };
+
+    parent.addEventListener('contextmenu', showMenu);
+    window.addEventListener('click', closeMenu);
+
+    return () => {
+      parent.removeEventListener('contextmenu', showMenu);
+      window.removeEventListener('click', closeMenu);
+    };
+  });
+
+  const style = {
+    top: y,
+    left: x
+  };
+
+
+  return isVisible ?  (
+    <div className='context-menu' style={style}>
+      {items.map((item: any, index: any) => {
+        return (
+          <div
+            key={index}
+            onClick={item.onClick}
+            className='context-menu__item'
+          >
+            {item.text}
+          </div>
+        );
+      })}
+    </div>
+  ) : null;
+};
+
+export default ContextMenu;