#PSYNEU-139 - Fixing bugs to render EM Models and more

.gitignore

@@ -50,4 +50,8 @@ yalc.lock
 
 .idea
 
-package/.eggs
+package/.eggs
+
+psyneulinkviewer-darwin-x64/
+package/psyneulinkviewer/__pycache__
+package/__pycache__

public/appState.js

@@ -1,5 +1,6 @@
 const appStates = require('../src/nodeConstants').appStates;
 const stateTransitions = require('../src/nodeConstants').stateTransitions;
+const environments = require('../src/nodeConstants').environments;
 
 const appStateFactory = (function(){
     function AppState() {
@@ -19,7 +20,11 @@ const appStateFactory = (function(){
             if (this.checkAppState(states.VIEWER_DEP_INSTALLED)) {
                 await psyneulinkHandler.runServer();
             } else {
-                psyneulinkHandler.stopServer();
+                if (psyneulinkHandler.environment === environments.DEV) {
+                    console.warn('The server should be restarted after the dependencies are installed.');
+                } else {
+                    psyneulinkHandler.stopServer();
+                }
             }
         };
 

public/electron.js

@@ -301,6 +301,7 @@ app.whenReady().then(() => {
 app.on("window-all-closed", () => {
   if (process.platform !== "darwin") {
     app.quit();
+    psyneulinkHandler.stopServer();
   }
 });
 

src/client/components/views/editView/leftSidebar/nodeFactory.js

@@ -4,7 +4,7 @@ import { PNLMechanisms } from "../../../../../constants";
 import QueryService from "../../../../services/queryService";
 import { PNLClasses, PNLLoggables } from "../../../../../constants";
 import MechanismNode from "../../../../model/nodes/mechanism/MechanismNode";
-// import CompositionNode from "../../../../model/nodes/composition/CompositionNode";
+import CompositionNode from "../../../../model/nodes/composition/CompositionNode";
 
 export class NodeFactory {
   static createNode(nodeType, name, extra, engine) {
@@ -16,9 +16,12 @@ export class NodeFactory {
 
     switch (nodeType) {
       case PNLClasses.COMPOSITION:
-        // TODO: return a composition node
-        // return new CompositionNode(name, nodeType, undefined, undefined, extra);
-        return new MechanismNode(name, nodeType, undefined, QueryService.getPortsNewNode(name, nodeType), extra);
+        return new CompositionNode(name, nodeType, undefined, {}, extra);
+      case PNLClasses.AUTODIFF_COMPOSITION:
+        return new CompositionNode(name, nodeType, undefined, {}, extra);
+      case PNLClasses.EM_COMPOSITION:
+        console.log("EM COMPOSITION")
+        return new CompositionNode(name, nodeType, undefined, {}, extra);
       case PNLClasses.PROJECTION:
         const selectedNodes = engine.getModel().getSelectedEntities();
 

src/client/components/views/editView/mechanisms/shared/FunctionInput.js

@@ -173,6 +173,7 @@ export const CustomCheckInput = ({ label, ...props }) => {
       className="block"
       sx={{
         minWidth: '100%',
+        ...props.sx
       }}
     >
       <Stack direction="row" className={classes.switch}>
@@ -242,7 +243,7 @@ export const CustomValueInput = ({ label, minWidth, ...props }) => {
   const classes = useStyles();
 
   return (
-    <Box className="block" sx={{ minWidth }}>
+    <Box className="block" sx={{ 'minWidth': minWidth, ...props.sx }}>
       <Tooltip title={label} arrow>
         <Typography noWrap component="label" className={classes.label}>
           {label}
@@ -295,7 +296,7 @@ export const MatrixInput = ({
             renderValue={(value) => (
               <Typography fontSize={14} textTransform="">
                 {value.charAt(0).toUpperCase() +
-                  value.slice(1).replace('-', ' ')}
+                  value.slice(1).replaceAll('-', ' ')}
               </Typography>
             )}
           >
@@ -418,7 +419,7 @@ const FunctionInput = ({ label, ...props }) => {
   }
 
   return (
-    <Box className="block" sx={{ minWidth: '100%' }} zIndex={1009101}>
+    <Box className="block" sx={{ minWidth: '100%', ...props.sx }} zIndex={1009101}>
       <Box data-color-mode="light" width="100%">
         <Stack
           direction="row"
@@ -440,7 +441,7 @@ const FunctionInput = ({ label, ...props }) => {
             renderValue={(value) => (
               <Typography fontSize={14} textTransform="">
                 {value.charAt(0).toUpperCase() +
-                  value.slice(1).replace('-', ' ')}
+                  value.slice(1).replaceAll('-', ' ')}
               </Typography>
             )}
           >

src/client/components/views/editView/mechanisms/shared/PortsList.js

@@ -54,7 +54,7 @@ const PortsList = ({
 
   async function addPorts() {
     const newPorts = [...ports];
-    const filteredPorts = ports.filter((port) => port.type === portType);
+    const filteredPorts = ports?.filter((port) => port.type === portType);
     const allPortsNames = filteredPorts.map((port) => port.name);
     let currentIndex = filteredPorts.length;
     while (allPortsNames.includes(portType + '_' + currentIndex)) {
@@ -78,9 +78,9 @@ const PortsList = ({
   }
 
   function removePort(port, portId) {
-    const inputPorts = ports.filter((port) => port.type === portType);
+    const inputPorts = ports?.filter((port) => port.type === portType);
     if (inputPorts.length > 1) {
-      const filteredPorts = ports.filter((port) => port.id !== portId);
+      const filteredPorts = ports?.filter((port) => port.id !== portId);
       model.removePort(port); // remove target port in target node
 
       if (handleValueChange) {

src/client/components/views/editView/mechanisms/shared/subclass/ModulatoryMechForm.js

@@ -14,6 +14,7 @@ function ModulatoryMechForm(props) {
         model={model}
         label={optionKeys.modulation}
         value={optionsValue.modulation}
+        sx={{ borderTopRightRadius: '0.625rem !important' }}
         onChange={(e) =>
           handleOptionChange(
             {

src/client/components/views/editView/mechanisms/shared/subclass/ProcessingMechForm.js

@@ -14,6 +14,7 @@ function ProcessingMechForm(props) {
         model={model}
         label={optionKeys.function}
         value={optionsValue.function}
+        sx={{ borderTopRightRadius: '0.625rem !important' }}
         onChange={(e) =>
           handleOptionChange(
             {

src/client/components/views/editView/mechanisms/shared/subclass/TransferMechForm.js

@@ -17,6 +17,7 @@ function TransferMechForm(props) {
         model={model}
         label={optionKeys.noise}
         value={optionsValue.noise}
+        sx={{ width: 'calc((100% - 0.125rem) / 2) !important' }}
         onChange={(e) =>
           handleOptionChange(
             {
@@ -32,6 +33,7 @@ function TransferMechForm(props) {
         model={model}
         label={optionKeys.clip}
         value={optionsValue.clip}
+        sx={{ width: 'calc((100% - 0.125rem) / 2) !important', borderTopRightRadius: '0.625rem !important' }}
         onChange={(e) =>
           handleOptionChange(
             {
@@ -43,24 +45,10 @@ function TransferMechForm(props) {
           )
         }
       />
-      <CustomValueInput
-        model={model}
-        label={optionKeys.integration_rate}
-        value={optionsValue.integration_rate}
-        onChange={(e) =>
-          handleOptionChange(
-            {
-              key: optionKeys.integration_rate,
-              value: e.target.value,
-            },
-            updateOptions,
-            updateModelOption
-          )
-        }
-      />
       <CustomCheckInput
         label={optionKeys.integrator_mode}
         checked={optionsValue.integrator_mode}
+        sx={{ borderTopRightRadius: '0 !important' }}
         onChange={(e) =>
           handleOptionChange(
             {
@@ -72,7 +60,7 @@ function TransferMechForm(props) {
           )
         }
       />
-      <FunctionInput
+      {/* <FunctionInput
         model={model}
         label={optionKeys.integrator_function}
         value={optionsValue.integrator_function}
@@ -87,8 +75,8 @@ function TransferMechForm(props) {
           )
         }
         updateModelOption={updateModelOption}
-      />
-      <CustomValueInput
+      /> */}
+      {/* <CustomValueInput
         model={model}
         label={optionKeys.on_resume_integrator_mode}
         value={optionsValue.on_resume_integrator_mode}
@@ -102,11 +90,28 @@ function TransferMechForm(props) {
             updateModelOption
           )
         }
+      /> */}
+      <CustomValueInput
+        model={model}
+        label={optionKeys.integration_rate}
+        value={optionsValue.integration_rate}
+        sx={{ width: 'calc((100% - 0.125rem) / 2) !important' }}
+        onChange={(e) =>
+          handleOptionChange(
+            {
+              key: optionKeys.integration_rate,
+              value: e.target.value,
+            },
+            updateOptions,
+            updateModelOption
+          )
+        }
       />
       <CustomValueInput
         model={model}
         label={optionKeys.termination_threshold}
         value={optionsValue.termination_threshold}
+        sx={{ width: 'calc((100% - 0.125rem) / 2) !important' }}
         onChange={(e) =>
           handleOptionChange(
             {
@@ -118,7 +123,7 @@ function TransferMechForm(props) {
           )
         }
       />
-      <CustomValueInput
+      {/* <CustomValueInput
         model={model}
         label={optionKeys.termination_comparison_op}
         value={optionsValue.termination_comparison_op}
@@ -132,7 +137,7 @@ function TransferMechForm(props) {
             updateModelOption
           )
         }
-      />
+      /> */}
       <FunctionInput
         model={model}
         label={optionKeys.termination_measure}

src/client/components/views/editView/utils.js

@@ -78,4 +78,4 @@ export function getNodeParentID(node) {
 export function getScaleTransform(engine) {
     const zoomLevel = engine.getModel().getZoomLevel();
     return zoomLevel / BASE_ZOOM
-}
+}

src/client/components/views/visualiseView/VisualizeLayout.js

@@ -19,6 +19,7 @@ const useStyles = makeStyles({
     height: 'calc(100vh - 4.375rem)',
     '&> div': {
       height: '100%',
+      width: '100%',
     },
   },
   iconButton: {

src/client/components/views/visualiseView/main/DroppableChart.js

@@ -177,7 +177,7 @@ export const DroppableChart = ({ id, model, accept = 'element' }) => {
   return (
     <Box
       ref={dropRef}
-      style={{ backgroundColor, height: '100%', position: 'relative' }}
+      style={{ backgroundColor, height: '100%', width: '100%', position: 'relative' }}
     >
       {chart}
       <Box className={classes.filter}>
@@ -190,7 +190,7 @@ export const DroppableChart = ({ id, model, accept = 'element' }) => {
               {renderChartIcon(value)}
               <Typography fontSize={14} textTransform="">
                 {value.charAt(0).toUpperCase() +
-                  value.slice(1).replace('-', ' ')}
+                  value.slice(1).replaceAll('-', ' ')}
               </Typography>
             </Stack>
           )}

src/client/grpc/grpcClient.js

@@ -127,6 +127,26 @@ const grpcClientFactory = (function(){
             });
         }
 
+        this.stopServer = (callback, errorCallback) => {
+            const request = new messages.NullArgument()
+            this._client.stopServer(request, (err, response) => {
+                if (err) {
+                    if (errorCallback) {
+                        errorCallback(err);
+                    } else {
+                        console.log(err);
+                    }
+                } else {
+                    if (callback) {
+                        callback(response);
+                    } else {
+                        console.log(response);
+                        console.log(response.getResponse());
+                        console.log(response.getMessage());
+                    }
+                }
+            });
+        }
     }
 
     var instance;

src/client/grpc/psyneulink_grpc_pb.js

@@ -48,6 +48,17 @@ function deserialize_psyneulinkviewer_ModelPath(buffer_arg) {
   return psyneulink_pb.ModelPath.deserializeBinary(new Uint8Array(buffer_arg));
 }
 
+function serialize_psyneulinkviewer_NullArgument(arg) {
+  if (!(arg instanceof psyneulink_pb.NullArgument)) {
+    throw new Error('Expected argument of type psyneulinkviewer.NullArgument');
+  }
+  return Buffer.from(arg.serializeBinary());
+}
+
+function deserialize_psyneulinkviewer_NullArgument(buffer_arg) {
+  return psyneulink_pb.NullArgument.deserializeBinary(new Uint8Array(buffer_arg));
+}
+
 function serialize_psyneulinkviewer_PNLJson(arg) {
   if (!(arg instanceof psyneulink_pb.PNLJson)) {
     throw new Error('Expected argument of type psyneulinkviewer.PNLJson');
@@ -127,6 +138,17 @@ var ServeGraphService = exports.ServeGraphService = {
     responseSerialize: serialize_psyneulinkviewer_Response,
     responseDeserialize: deserialize_psyneulinkviewer_Response,
   },
+  stopServer: {
+    path: '/psyneulinkviewer.ServeGraph/StopServer',
+    requestStream: false,
+    responseStream: false,
+    requestType: psyneulink_pb.NullArgument,
+    responseType: psyneulink_pb.Response,
+    requestSerialize: serialize_psyneulinkviewer_NullArgument,
+    requestDeserialize: deserialize_psyneulinkviewer_NullArgument,
+    responseSerialize: serialize_psyneulinkviewer_Response,
+    responseDeserialize: deserialize_psyneulinkviewer_Response,
+  },
 };
 
 exports.ServeGraphClient = grpc.makeGenericClientConstructor(ServeGraphService);

src/client/interfaces/psyneulinkHandler.js

@@ -7,6 +7,8 @@ const spawnCommand = require("./utils").spawnCommand;
 const executeCommand = require("./utils").executeCommand;
 const executeSyncCommand = require("./utils").executeSyncCommand;
 const parseArguments = require("./utils").parseArguments;
+const grpcClient = require("../grpc/grpcClient").grpcClientFactory.getInstance();
+const rpcAPIMessageTypes = require("../../nodeConstants").rpcAPIMessageTypes;
 
 const environments = require("../../nodeConstants").environments;
 
@@ -95,7 +97,6 @@ const psyneulinkHandlerFactory = (function(){
 
         this.runServer = async () => {
             try {
-                // TODO - remove this when we have a proper server
                 if (this.environment === environments.DEV) {
                     this.serverProc = 'DEVELOPMENT MODE';
                     logOutput(Date.now() + " START: Starting Python RPC server IN DEVELOPMENT MODE\n", true);
@@ -140,17 +141,11 @@ const psyneulinkHandlerFactory = (function(){
 
         this.stopServer = async () => {
             try {
-                if (this.environment === environments.DEV) {
-                    this.serverProc = 'DEVELOPMENT MODE';
-                    logOutput(Date.now() + " STOP: Simulation of the development server STOPPED\n", true);
-                    return true;
-                }
-
-                if (this.serverProc !== null && this.serverProc !== undefined) {
-                    killProcess(this.serverProc.pid);
-                    logOutput(Date.now() + " STOP: Server STOPPED with pid " + this.serverProc.pid + "\n", true);
-                    this.serverProc = null;
-                }
+                grpcClient.stopServer(undefined, () => {
+                    console.log('Server closed');
+                }, (error) => {
+                    console.error(error);
+                });
                 return true;
             } catch (error) {
                 logOutput(Date.now() + " ERROR: " + error + "\n", true);