diff --git a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js index 8323f72d8..a4b1502e0 100644 --- a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js +++ b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js @@ -1,11 +1,11 @@ import React, { Component } from 'react'; +import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory'; +import Manager from '@metacell/geppetto-meta-core/ModelManager'; +import Resources from '@metacell/geppetto-meta-core/Resources'; import model from './model'; import { Force } from '@metacell/geppetto-meta-ui/connectivity-viewer/layouts/Force'; import ConnectivityComponent from '@metacell/geppetto-meta-ui/connectivity-viewer/ConnectivityComponent'; import { withStyles } from '@material-ui/core'; -import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory'; -import Manager from '@metacell/geppetto-meta-core/ModelManager'; -import Resources from '@metacell/geppetto-meta-core/Resources'; const styles = { connectivity: { diff --git a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js deleted file mode 100644 index d9d3fc00a..000000000 --- a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseMatrix.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Component } from 'react'; -// import { Matrix } from '../../layouts/Matrix'; -import { Matrix } from '@metacell/geppetto-meta-ui/connectivity-viewer/layouts/Matrix'; -// import ConnectivityComponent from '../../ConnectivityComponent'; -import ConnectivityComponent from '@metacell/geppetto-meta-ui/connectivity-viewer/ConnectivityComponent'; -import { withStyles } from '@material-ui/core'; -import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory'; -import Resources from '@metacell/geppetto-meta-core/Resources'; - -const styles = { - connectivity: { - display: 'flex', - alignItems: 'stretch', - height: '600px', - width: '500px', - }, -}; - -class ConnectivityShowcaseMatrix extends Component { - constructor (props) { - super(props); - // Manager.loadModel(model); - this.linkType = this.linkType.bind(this); - } - - matrixHandler = () => { - console.log('Mock call to SceneController') - } - - linkType (c) { - return ModelFactory.getAllVariablesOfType( - c.getParent(), - ModelFactory.geppettoModel.neuroml.synapse - )[0].getId(); - } - - render () { - const data = Instances[0]; - const layout = new Matrix(); - const colors = ['#cb0000', '#003398']; - const names = ['pyramidals_48', 'baskets_12']; - const { classes } = this.props; - - return ( -
- -
- ); - } -} - -export default withStyles(styles)(ConnectivityShowcaseMatrix); diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md b/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md index 10945514a..8738e7f7a 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/README.md @@ -8,14 +8,6 @@ connectivity-viewer/ConnectivityComponent ## Examples -### Connectivity Matrix - -Draws an adjacency matrix where each row [column] correspond to a source [target] node. Therefore, squares at i,j denote a directed edge (or connection) from node i to node j. The rows/columns can be sorted by node name, number of incoming connections, and number of outgoing connections. Circles above each row/column indicate the type of nodes in that row/column. More info on adjacency matrix [here](https://en.wikipedia.org/wiki/Adjacency_matrix). - -``` -connectivity-viewer/ConnectivityShowcaseMatrix -``` - ### Connectivity Force Draws circles for each node, connected by lines for each edge. Nodes repel each other (force directed) in order to reduce clutter, and can be interactively dragged. On hover the node names are revealed as tooltips. More info on force directed graph visualisation [here](https://en.wikipedia.org/wiki/Force-directed_graph_drawing).