Merge branch 'metacell' into feature/45

installation.sh

@@ -0,0 +1,80 @@
+#!/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 ==="
+
+
+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
+	rm -rf yalc.lock
+	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,14 +1,22 @@
 import React from 'react';
-// import MechanismNode from '../model/nodes/mechanism/MechanismNode';
 import { withStyles } from '@mui/styles';
+import { PNLClasses } from '../constants';
 import BG from '../assets/svg/bg-dotted.svg';
 import ModelInterpreter from '../model/Interpreter';
-import MetaDiagram, { ComponentsMap } from '@metacell/meta-diagram';
-import CustomLinkWidget from './views/projections/CustomLinkWidget';
+import Composition from './views/compositions/Composition';
 import GenericMechanism from './views/mechanisms/GenericMechanism';
-import { buildModel } from '../model/utils';
-import { PNLClasses } from '../constants';
+import MetaDiagram, {
+  CallbackTypes,
+  ComponentsMap,
+  EventTypes,
+  Position,
+} from '@metacell/meta-diagram';
+import CustomLinkWidget from './views/projections/CustomLinkWidget';
+import { generateMetaGraph } from '../model/utils';
+import CompositionDrawer from './views/CompositionDrawer';
+import { sideBarNodes } from './views/sidebar/nodes';
 import { Sidebar } from './views/Sidebar/Sidebar';
+import { buildModel } from '../model/utils';
 
 const mockModel = require('../resources/model').mockModel;
 
@@ -25,26 +33,99 @@ 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);
+
+    this.metaGraph = generateMetaGraph([
+      ...this.metaModel[PNLClasses.COMPOSITION],
+      ...this.metaModel[PNLClasses.MECHANISM],
+    ]);
+    this.metaGraph.addLinks(this.metaModel[PNLClasses.PROJECTION]);
+  }
+
+  handlePostUpdates(event) {
+    const node = event.entity;
+    switch (event.function) {
+      case CallbackTypes.POSITION_CHANGED: {
+        this.metaGraph.updateGraph(
+          node,
+          this.mousePos.x,
+          this.mousePos.y,
+          event?.extraCondition === CallbackTypes.CHILD_POSITION_CHANGED
+        );
+        this.interpreter.updateModel(node);
+        return true;
+      }
+      default: {
+        console.log(
+          'Function callback type not yet implemented ' + event.function
+        );
+        return false;
+      }
+    }
+  }
+
+  handlePreUpdates(event) {
+    // console.log('preUpdates not yet implemented.');
+  }
+
+  metaCallback(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;
+  }
+
+  updateSelectedBar(id) {
+    this.setState({
+      selectedBarNode: id,
+    });
   }
 
   render() {
     const { classes } = this.props;
-    const interpreter = new ModelInterpreter(mockModel);
-    const model = interpreter.getModel();
-    const metaModel = buildModel(model);
-
-    const componentsMap = new ComponentsMap(
-      new Map(Object.entries({ mechanism: GenericMechanism })),
-      new Map(Object.entries({ projection: CustomLinkWidget }))
-    );
 
     return (
-      <div className={classes.root}>
+      <div className={classes.root} onMouseMove={this.mouseMoveCallback}>
         <MetaDiagram
-          metaNodes={metaModel[PNLClasses.MECHANISM]}
-          metaLinks={metaModel[PNLClasses.PROJECTION]}
-          componentsMap={componentsMap}
+          metaCallback={this.metaCallback}
+          componentsMap={this.componentsMap}
+          metaLinks={this.metaGraph.getLinks()}
+          metaNodes={this.metaGraph.getNodes()}
+          sidebarProps={{
+            sidebarNodes: sideBarNodes,
+            selectedBarNode: 'targetMechanism',
+          }}
           metaTheme={{
             customThemeVariables: {
               padding: 0,