forked from PrincetonUniversity/PsyNeuLinkView
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'metacell' of https://github.com/MetaCell/PsyNeuLinkView …
…into feature/PSYNEU-51
- Loading branch information
Showing
11 changed files
with
461 additions
and
497 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 13 additions & 10 deletions
23
src/client/components/views/editView/mechanisms/InputOutputNode.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,21 @@ | ||
| import * as React from "react"; | ||
| import { Box, Typography } from "@mui/material"; | ||
| import {PortWidget} from "@projectstorm/react-diagrams"; | ||
|
|
||
| class InputOutputNode extends React.Component { | ||
| render() { | ||
| const { text, direction } = this.props; | ||
| const nodeClass = direction === 'right' ? 'block reverse' : 'block'; | ||
| render() { | ||
| const { text, direction, engine, port } = this.props; | ||
| const nodeClass = direction === 'right' ? 'block reverse' : 'block'; | ||
|
|
||
| return ( | ||
| <Box className={nodeClass}> | ||
| <Box className="disc" /> | ||
| <Typography>{text}</Typography> | ||
| </Box> | ||
| ); | ||
| } | ||
| return ( | ||
| <Box className={nodeClass}> | ||
| <PortWidget engine={engine} port={port} className="disc"> | ||
| <Box/> | ||
| </PortWidget> | ||
| <Typography>{text}</Typography> | ||
| </Box> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default InputOutputNode; |
181 changes: 95 additions & 86 deletions
181
src/client/components/views/editView/mechanisms/MechMetadata.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,117 @@ | ||
| import * as React from "react"; | ||
| import Box from "@mui/material/Box"; | ||
| import { withStyles } from "@mui/styles"; | ||
| import {withStyles} from "@mui/styles"; | ||
| import NodeSelection from "./NodeSelection"; | ||
| import InputOutputNode from "./InputOutputNode"; | ||
| // import TextField from '@mui/material/TextField'; | ||
| import Typography from "@mui/material/Typography"; | ||
| import { PortTypes, PortWidget } from "@metacell/meta-diagram"; | ||
| import {PortTypes} from "@metacell/meta-diagram"; | ||
| import vars from "../../../../assets/styles/variables"; | ||
|
|
||
| const styles = { | ||
| textColor: { | ||
| color: vars.functionTextColor | ||
| }, | ||
| codeColor: { | ||
| color: vars.functionCodeColor | ||
| } | ||
| textColor: { | ||
| color: vars.functionTextColor | ||
| }, | ||
| codeColor: { | ||
| color: vars.functionCodeColor | ||
| }, | ||
| }; | ||
|
|
||
| class MechMetadata extends React.Component { | ||
| render() { | ||
| const { classes, model, model: { options }, engine, changeVisibility } = this.props; | ||
| console.log(classes) | ||
| const functionValues = (label, value) => ( | ||
| <Box className="block"> | ||
| <Typography component="label">{label}</Typography> | ||
| {/* <TextField | ||
| id="outlined-multiline-flexible" | ||
| maxRows={4} | ||
| value={value} | ||
| onChange={ (e) => {console.log(e)} } | ||
| variant="outlined" | ||
| style={{ zIndex: 11 }} | ||
| /> */} | ||
| <Typography>{value}</Typography> | ||
| </Box> | ||
| ) | ||
|
|
||
| return ( | ||
| <Box className={`primary-node rounded ${options.variant}`}> | ||
| {options.selected && ( | ||
| <NodeSelection node={model} engine={engine} text={"Hide properties"} changeVisibility={changeVisibility} /> | ||
| )} | ||
| <Box className="primary-node_header"> | ||
| <Box className="icon" /> | ||
| <Typography component="p"> | ||
| {options.name} | ||
| </Typography> | ||
| </Box> | ||
| constructor() { | ||
| super(); | ||
| this.elementRef = React.createRef(); | ||
| } | ||
|
|
||
| <Box> | ||
| { options.ports.map(port => { | ||
| switch (port.getType()) { | ||
| case PortTypes.INPUT_PORT: | ||
| return ( | ||
| <PortWidget key={model.getID() + '_' + port.getId()} engine={engine} port={model.getPort(port.getId())}> | ||
| <InputOutputNode text={port.getId()} /> | ||
| </PortWidget> | ||
| ); | ||
| default: | ||
| return <></> | ||
| } | ||
| })} | ||
| </Box> | ||
| componentDidMount() { | ||
| this.forceUpdate() // so that we get the ref to the element | ||
| } | ||
|
|
||
| <Box className="seprator" /> | ||
| componentDidUpdate(prevProps, prevState, snapshot) { | ||
| const parentElement = this.elementRef.current.parentElement; | ||
| parentElement.style.clipPath = ''; | ||
| parentElement.style.zIndex = 10000; | ||
| } | ||
|
|
||
| <Box className="block-wrapper"> | ||
| { | ||
| functionValues('Context', '12') | ||
| } | ||
| { | ||
| functionValues('Size', '8.90') | ||
| } | ||
| { | ||
| functionValues('Prefs', '44') | ||
| } | ||
| render() { | ||
| const {classes, model, model: {options}, engine, changeVisibility} = this.props; | ||
| const functionValues = (label, value) => ( | ||
| <Box className="block"> | ||
| <Typography component="label">Function</Typography> | ||
| <Typography className="function"> | ||
| <Typography component="strong" className={classes?.textColor} > | ||
| function | ||
| </Typography>=pnl.<Typography className={classes?.codeColor} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography> | ||
| <Typography component="label">{label}</Typography> | ||
| <Typography>{value}</Typography> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
|
|
||
| return ( | ||
| <Box ref={this.elementRef} className={`primary-node rounded ${options.variant}`}> | ||
| {options.selected && ( | ||
| <NodeSelection node={model} engine={engine} text={"Hide properties"} | ||
| changeVisibility={changeVisibility}/> | ||
| )} | ||
| <Box className="primary-node_header"> | ||
| <Box className="icon"/> | ||
| <Typography component="p"> | ||
| {options.name} | ||
| </Typography> | ||
| </Box> | ||
|
|
||
| <Box className="seprator" /> | ||
| <Box> | ||
| {options.ports.map(port => { | ||
| switch (port.getType()) { | ||
| case PortTypes.INPUT_PORT: | ||
| return ( | ||
| <InputOutputNode key={model.getID() + '_' + port.getId()} engine={engine} | ||
| port={model.getPort(port.getId())} text={port.getId()}/> | ||
| ); | ||
| default: | ||
| return <></> | ||
| } | ||
| })} | ||
| </Box> | ||
|
|
||
| <Box> | ||
| { options.ports.map(port => { | ||
| switch (port.getType()) { | ||
| case PortTypes.OUTPUT_PORT: | ||
| return ( | ||
| <PortWidget key={model.getID() + '_' + port.getId()} engine={engine} port={model.getPort(port.getId())}> | ||
| <InputOutputNode text={port.getId()} direction="right" /> | ||
| </PortWidget> | ||
| ); | ||
| default: | ||
| return <></> | ||
| } | ||
| })} | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } | ||
| <Box className="seprator"/> | ||
|
|
||
| <Box className="block-wrapper"> | ||
| { | ||
| functionValues('Context', '12') | ||
| } | ||
| { | ||
| functionValues('Size', '8.90') | ||
| } | ||
| { | ||
| functionValues('Prefs', '44') | ||
| } | ||
| <Box className="block"> | ||
| <Typography component="label">Function</Typography> | ||
| <Typography className="function"> | ||
| <Typography component="strong" className={classes?.textColor}> | ||
| function | ||
| </Typography>=pnl.<Typography className={classes?.codeColor} | ||
| component="strong">Logistic</Typography>(gain=1.0, | ||
| bias=-4)</Typography> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box className="separator"/> | ||
|
|
||
| <Box> | ||
| {options.ports.map(port => { | ||
| switch (port.getType()) { | ||
| case PortTypes.OUTPUT_PORT: | ||
| return ( | ||
| <InputOutputNode key={model.getID() + '_' + port.getId()} engine={engine} | ||
| port={model.getPort(port.getId())} text={port.getId()} | ||
| direction="right"/> | ||
| ) | ||
| ; | ||
| default: | ||
| return <></> | ||
| } | ||
| })} | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withStyles(styles)(MechMetadata); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.