#36 handling parent child relationship and moving logic out of meta-d…

…iagram

installation.sh

@@ -0,0 +1,84 @@
+#!/bin/bash
+
+
+#!/bin/bash
+set -e
+
+INSTALL=false
+UPDATE=false
+
+function parse() {
+    for arg in "$@"; do # transform long options to short ones
+        shift
+        case "$arg" in
+            "--install") set -- "$@" "-n" ;;
+            "--update") set -- "$@" "-v" ;;
+            *) set -- "$@" "$arg"
+        esac
+    done
+
+    while getopts "iu" optname
+    do
+        case "$optname" in
+            "i") INSTALL=true ;;
+            "u") UPDATE=true ;;
+        esac
+    done
+    shift "$((OPTIND-1))" # shift out all the already processed options
+}
+
+
+parse "$@"
+
+echo "=== Install / Update script for PsyNeuLinkViewer and meta-diagram ==="
+#echo "Install is"
+#echo $INSTALL
+#echo "Update is"
+#echo $UPDATE
+
+
+
+if [ "$INSTALL" = true ]; then
+	echo " ### re-installing all the packages"
+	npm -g install yalc
+	PSYVIEW=`pwd`
+
+	if [ -d '../meta-diagram' ]; then
+		cd ../meta-diagram;
+		yarn && yarn run build:dev && yalc push --changed
+		cd $PSYVIEW
+	else
+		cd ../
+		git clone https://github.com/metacell/meta-diagram
+		cd meta-diagram
+		yarn && yarn run build:dev && yalc push --changed
+		cd $PSYVIEW
+	fi
+
+	yalc add @metacell/meta-diagram
+	rm -rf node_modules/
+	yarn
+	yarn run start
+elif [ "$UPDATE" = true ]; then
+	echo " ### Updating meta-diagram"
+	yarn remove @metacell/meta-diagram
+	PSYVIEW=`pwd`
+
+	if [ -d '../meta-diagram' ]; then
+		cd ../meta-diagram;
+		yarn && yarn run build:dev && yalc push --changed
+		cd $PSYVIEW
+	else
+		cd ../
+		git clone https://github.com/metacell/meta-diagram
+		cd meta-diagram
+		yarn && yarn run build:dev && yalc push --changed
+		cd $PSYVIEW
+	fi
+	yalc add @metacell/meta-diagram
+	yarn
+	yarn run start
+else
+	echo " - The script can be run in update (-u / --update) or install (-i / --install) mode."
+	echo " - please use the option desidered to run the script again."
+fi

src/App.js

@@ -3,7 +3,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 import Layout from './components/common/Layout';
-import Loader from './components/common/Loader';
+// import Loader from './components/common/Loader';
 
 function App() {
   return (

src/components/Main.js

@@ -1,13 +1,11 @@
 import React from 'react';
-// import MechanismNode from '../model/nodes/mechanism/MechanismNode';
 import { withStyles } from '@mui/styles';
 import { PNLClasses } from '../constants';
-import { buildModel } from '../model/utils';
 import BG from "../assets/svg/bg-dotted.svg";
 import ModelInterpreter from '../model/Interpreter';
 import Composition from './views/compositions/Composition';
 import GenericMechanism from './views/mechanisms/GenericMechanism';
-import MetaDiagram, { ComponentsMap } from "@metacell/meta-diagram";
+import MetaDiagram, { CallbackTypes, ComponentsMap, EventTypes, Position } from "@metacell/meta-diagram";
 import CustomLinkWidget from './views/projections/CustomLinkWidget';
 const mockModel = require('../resources/model').mockModel;
 
@@ -24,33 +22,75 @@ const styles = () => ({
 class Main extends React.Component {
   constructor (props) {
     super(props);
+    // interpreter and model stored in the state will be moved to redux later
     this.state = {};
+
+    this.mousePos = {x: 0, y: 0};
     this.interpreter = new ModelInterpreter(mockModel);
     this.model = this.interpreter.getModel();
     this.metaModel = this.interpreter.getMetaModel();
+    this.modelMap = this.interpreter.getModelElementsMap();
     this.componentsMap = new ComponentsMap(new Map(), new Map());
-
     this.componentsMap.nodes.set(PNLClasses.COMPOSITION, Composition);
     this.componentsMap.nodes.set(PNLClasses.MECHANISM, GenericMechanism);
     this.componentsMap.links.set(PNLClasses.PROJECTION, CustomLinkWidget);
 
+    // functions bond to this scope
     this.metaCallback = this.metaCallback.bind(this);
+    this.handlePreUpdates = this.handlePreUpdates.bind(this);
+    this.handlePostUpdates = this.handlePostUpdates.bind(this);
+    this.mouseMoveCallback = this.mouseMoveCallback.bind(this);
+  }
+
+  calculateDelta(metaNode, metaNodeModel) {
+    let oldPosition = new Position(metaNode.position.x, metaNode.position.y);
+    let newPosition = new Position(metaNodeModel.position.x, metaNodeModel.position.y);
+    return oldPosition.sub(newPosition)
   }
 
-  shouldComponentUpdate() {
-    return false;
+  handlePostUpdates(event) {
+    switch(event.function) {
+      case CallbackTypes.POSITION_CHANGED: {
+        this.interpreter.updateModel(event.entity);
+        break;
+      }
+      default: {
+        console.log('Function callback type not yet implemented ' + event.function);
+        break;
+      }
+    }
+  }
+
+  handlePreUpdates(event) {
+    console.log('preUpdates not yet implemented.');
   }
 
   metaCallback(event) {
-    console.log('metacallback');
-    console.log(event);
+    switch (event.metaEvent) {
+      case EventTypes.PRE_UPDATE: {
+        this.handlePreUpdates(event);
+        break;
+      }
+      case EventTypes.POST_UPDATE: {
+        this.handlePostUpdates(event);
+        break;
+      }
+      default: {
+        throw Error('Unknown event type received from meta-diagram.');
+      }
+    }
+  }
+
+  mouseMoveCallback(event) {
+    this.mousePos.x = event.clientX;
+    this.mousePos.y = event.clientY;
   }
 
   render() {
     const { classes } = this.props;
 
     return (
-      <div className={classes.root}>
+      <div className={classes.root} onMouseMove={this.mouseMoveCallback}>
         <MetaDiagram
           metaCallback={this.metaCallback}
           componentsMap={this.componentsMap}

src/components/views/compositions/Composition.js

@@ -106,6 +106,7 @@ class Composition extends React.Component {
             this.setState({ x: d.x, y: d.y });
           }}
           onResizeStop={(e, direction, ref, delta, position) => {
+            this.props.model.updateSize(ref.style.width, ref.style.height);
             this.setState({
               width: ref.style.width,
               height: ref.style.height,

src/components/views/mechanisms/MechSimple.js

@@ -36,7 +36,7 @@ class MechSimple extends React.Component {
                 );
               default:
                 // TODO: what to do with other ports?
-                // console.log('different port found' + port.getName() + ' ' + port.getType());
+                return (<></>);
             }
           })}
         </Box>

src/model/Interpreter.ts

@@ -10,20 +10,27 @@ export default class ModelInterpreter {
     jsonModel: Object;
     modelMap: { [key: string]: Map<String, CompositionNode|MechanismNode|ProjectionLink|any> };
     pnlModel: { [key: string]: Array<CompositionNode|MechanismNode|ProjectionLink|any> };
+    metaModelMap: { [key: string]: Map<String, CompositionNode|MechanismNode|ProjectionLink|any> };
     metaModel: { [key: string]: Array<MetaNode|MetaLink> };
     nodeIdsMap: Map<any, any>;
     linkIdsMap: Map<any, any>;
 
     constructor(model: any) {
         this.modelMap = {
-            'nodes': new Map(),
-            'links': new Map()
+            [PNLClasses.COMPOSITION]: new Map(),
+            [PNLClasses.MECHANISM]: new Map(),
+            [PNLClasses.PROJECTION]: new Map(),
         };
         this.pnlModel = {
             [PNLClasses.COMPOSITION]: [],
             [PNLClasses.MECHANISM]: [],
             [PNLClasses.PROJECTION]: [],
         };
+        this.metaModelMap = {
+            [PNLClasses.COMPOSITION]: new Map(),
+            [PNLClasses.MECHANISM]: new Map(),
+            [PNLClasses.PROJECTION]: new Map(),
+        };
         this.metaModel = {
             [PNLClasses.COMPOSITION]: [],
             [PNLClasses.MECHANISM]: [],
@@ -48,10 +55,6 @@ export default class ModelInterpreter {
         return this.pnlModel;
     }
 
-    updateModel(newModel: any) {
-        this.jsonModel = this._convertModel(newModel);
-    }
-
     getModel() {
         return this.jsonModel;
     }
@@ -60,12 +63,29 @@ export default class ModelInterpreter {
         this.metaModel[PNLClasses.COMPOSITION] = this.pnlModel[PNLClasses.COMPOSITION].map(
             (item:CompositionNode) => item.getMetaNode()
         );
+        this.metaModelMap[PNLClasses.COMPOSITION] = new Map(
+            this.metaModel[PNLClasses.COMPOSITION].map(object => {
+                return [object.getId(), object];
+            })
+        );
+
         this.metaModel[PNLClasses.MECHANISM] = this.pnlModel[PNLClasses.MECHANISM].map(
             (item:MechanismNode) => item.getMetaNode()
         );
+        this.metaModelMap[PNLClasses.MECHANISM] = new Map(
+            this.metaModel[PNLClasses.MECHANISM].map(object => {
+                return [object.getId(), object];
+            })
+        );
+
         this.metaModel[PNLClasses.PROJECTION] = this.pnlModel[PNLClasses.PROJECTION].map(
             (item:ProjectionLink) => item.getMetaLink()
         );
+        this.metaModelMap[PNLClasses.PROJECTION] = new Map(
+            this.metaModel[PNLClasses.PROJECTION].map(object => {
+                return [object.getId(), object];
+            })
+        );
     }
 
     getMetaModel() {
@@ -80,6 +100,13 @@ export default class ModelInterpreter {
         return this.modelMap;
     }
 
+    updateModel(item: MetaNode|MetaLink) {
+        // if (this.metaModelMap[item.getShape()].has(item.getId())) {
+            console.log('this is where I update the node');
+            console.log(item);
+        // }
+    }
+
     parseNodePorts(name: string, type: string): { [key: string]: any } {
         let ports: { [key: string]: any[] } = {
             [PortTypes.INPUT_PORT]: [],
@@ -136,7 +163,7 @@ export default class ModelInterpreter {
         }
         extra['isExpanded'] = false;
         newNode = new CompositionNode(item?.name, parent, ports, extra);
-        modelMap['nodes'].set(newNode.getName(), newNode);
+        modelMap[PNLClasses.COMPOSITION].set(newNode.getName(), newNode);
         // temp array to host all the nested compositions
         let childrenCompositions: Array<any> = [];
 
@@ -147,7 +174,7 @@ export default class ModelInterpreter {
                 // we park for now nested compositions
                 childrenCompositions.push(child)
             } else {
-                newChild = this.castMechanism(child, newNode, this.modelMap);
+                newChild = this.castMechanism(child, newNode, modelMap);
                 newChild.setParent(newNode);
                 newNode.addChild(newChild);
             }
@@ -159,7 +186,7 @@ export default class ModelInterpreter {
         // Now da we have all the mechanisms in the idsMap we continue with the compositions
         childrenCompositions.forEach((child: any) => {
             let newChild = undefined;
-            newChild = this.nestedComposition(child, newNode, this.modelMap);
+            newChild = this.nestedComposition(child, newNode, modelMap);
             newNode.addChild(newChild);
 
             if (newChild && !this.nodeIdsMap.has(child?._gvid)) {
@@ -170,7 +197,7 @@ export default class ModelInterpreter {
         item.edges.forEach((edge: any) => {
             let tail = this.nodeIdsMap.get(edge.tail);
             let head = this.nodeIdsMap.get(edge.head);
-            let newChild = this.castEdge(edge, tail, head, newNode, this.modelMap);
+            let newChild = this.castEdge(edge, tail, head, newNode, modelMap);
             if (newChild && !this.linkIdsMap.has(edge?._gvid)) {
                 this.linkIdsMap.set(edge?._gvid, newChild);
             }
@@ -209,7 +236,7 @@ export default class ModelInterpreter {
         }
         extra['isExpanded'] = false;
         newNode = new CompositionNode(item?.name, parent, ports, extra);
-        modelMap['nodes'].set(newNode.getName(), newNode);
+        modelMap[PNLClasses.COMPOSITION].set(newNode.getName(), newNode);
 
         // Iterates nodes of the nested composition to fill the children map/array
         item.nodes.forEach((id: any) => {
@@ -240,7 +267,7 @@ export default class ModelInterpreter {
                 }
             };
             newNode = new MechanismNode(item?.name, parent, ports, extra,);
-            modelMap['nodes'].set(newNode.getName(), newNode);
+            modelMap[PNLClasses.MECHANISM].set(newNode.getName(), newNode);
             this.pnlModel[PNLClasses.MECHANISM].push(newNode);
             return newNode;
     }
@@ -267,7 +294,7 @@ export default class ModelInterpreter {
                 false,
                 extra
             );
-            modelMap['links'].set(newNode.getName(), newNode);
+            modelMap[PNLClasses.PROJECTION].set(newNode.getName(), newNode);
             this.pnlModel[PNLClasses.PROJECTION].push(newNode);
             return newNode;
     }

src/model/links/ProjectionLink.ts

@@ -64,15 +64,15 @@ export default class ProjectionLink implements IMetaLinkConverter {
         return new MetaLink(
             this.name,
             this.name,
-            'projection',
+            PNLClasses.PROJECTION,
             this.sender,
             this.senderPort,
             this.receiver,
             this.receiverPort,
             'undefined',
             new Map(
                 Object.entries({
-                    color: 'rgb(255,192,0)'
+                    pnlClass: PNLClasses.PROJECTION,
                 })
             )
         );