@metacell/geppetto-meta-ui
Version:
React components from geppetto-meta to create neuroscience applications and visualize data.
299 lines (295 loc) • 11.1 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
import React, { Component } from 'react';
import ConnectivityToolbar from './subcomponents/ConnectivityToolbar';
import ConnectivityPlot from './subcomponents/ConnectivityPlot';
import { Matrix } from './layouts/Matrix';
import { Hive } from './layouts/Hive';
import { Force } from './layouts/Force';
import { Chord } from './layouts/Chord';
import { PropTypes } from 'prop-types';
import './styles.css';
var styles = {
container: {
display: 'flex',
alignItems: 'stretch',
flex: 1
}
};
var ConnectivityComponent = /*#__PURE__*/function (_Component) {
function ConnectivityComponent(props) {
var _this;
_classCallCheck(this, ConnectivityComponent);
_this = _callSuper(this, ConnectivityComponent, [props]);
_this.state = {
layout: _this.props.layout !== null ? _this.props.layout : new Matrix(),
toolbarVisibility: true,
legendsVisibility: true,
dimensions: null
};
_this.legendHandler = _this.legendHandler.bind(_this);
_this.deckHandler = _this.deckHandler.bind(_this);
_this.sortOptionsHandler = _this.sortOptionsHandler.bind(_this);
_this.plotRef = /*#__PURE__*/React.createRef();
_this.containerRef = /*#__PURE__*/React.createRef();
return _this;
}
/**
*
* Handles legend toggle button
*
* @command legendHandler ()
*
*/
_inherits(ConnectivityComponent, _Component);
return _createClass(ConnectivityComponent, [{
key: "legendHandler",
value: function legendHandler() {
var _this2 = this;
this.setState(function () {
return {
legendsVisibility: !_this2.state.legendsVisibility
};
});
}
/**
*
* Handles toolbar visibility
*
* @command toolbarHandler (visibility)
*
*/
}, {
key: "toolbarHandler",
value: function toolbarHandler(visibility) {
this.setState(function () {
return {
toolbarVisibility: visibility
};
});
}
/**
*
* Handle layout selection
*
* @command deckHandler (layout)
*
* @param layout
*/
}, {
key: "deckHandler",
value: function deckHandler(layout) {
this.setState(function () {
return {
layout: layout
};
});
}
/**
*
* Updates the sorting order
*
* @command sortOptionsHandler (option)
*
*/
}, {
key: "sortOptionsHandler",
value: function sortOptionsHandler(option) {
this.state.layout.setOrder(this.plotRef.current, option);
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var toolbarHeight = 140;
this.setState({
dimensions: {
width: this.containerRef.current.clientWidth,
height: this.containerRef.current.clientHeight - toolbarHeight
}
});
}
}, {
key: "renderContent",
value: function renderContent() {
var _this$props = this.props,
id = _this$props.id,
data = _this$props.data,
colorMap = _this$props.colorMap,
colors = _this$props.colors,
names = _this$props.names,
modelFactory = _this$props.modelFactory,
resources = _this$props.resources,
matrixOnClickHandler = _this$props.matrixOnClickHandler,
nodeType = _this$props.nodeType,
linkWeight = _this$props.linkWeight,
linkType = _this$props.linkType,
library = _this$props.library,
toolbarOptions = _this$props.toolbarOptions;
var _this$state = this.state,
layout = _this$state.layout,
toolbarVisibility = _this$state.toolbarVisibility,
legendsVisibility = _this$state.legendsVisibility,
dimensions = _this$state.dimensions;
return /*#__PURE__*/React.createElement("div", {
styles: styles.container
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ConnectivityToolbar, {
id: id,
layout: layout,
toolbarVisibility: toolbarVisibility,
legendsVisibility: legendsVisibility,
legendHandler: this.legendHandler,
deckHandler: this.deckHandler,
sortOptionsHandler: this.sortOptionsHandler,
options: toolbarOptions
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ConnectivityPlot, {
ref: this.plotRef,
id: id,
size: dimensions,
data: data,
colorMap: colorMap,
colors: colors,
names: names,
layout: layout,
legendsVisibility: legendsVisibility,
toolbarVisibility: toolbarVisibility,
modelFactory: modelFactory,
resources: resources,
matrixOnClickHandler: matrixOnClickHandler,
nodeType: nodeType,
linkWeight: linkWeight,
linkType: linkType,
library: library
})));
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var dimensions = this.state.dimensions;
var content = dimensions != null ? this.renderContent() : '';
return /*#__PURE__*/React.createElement("div", {
ref: this.containerRef,
style: styles.container,
onMouseEnter: function onMouseEnter() {
return _this3.toolbarHandler(true);
},
onMouseLeave: function onMouseLeave() {
return _this3.toolbarHandler(false);
}
}, content);
}
}]);
}(Component);
ConnectivityComponent.defaultProps = {
names: [],
colorMap: function colorMap() {},
linkType: function linkType() {},
layout: new Matrix(),
linkWeight: function linkWeight() {},
nodeType: function nodeType() {},
library: function library() {},
toolbarOptions: {}
};
ConnectivityComponent.propTypes = {
/**
* Component identifier
*/
id: PropTypes.string.isRequired,
/**
* Array of colors to provide for each subtitle
*/
colors: PropTypes.array.isRequired,
/**
* Model entities to be visualized
*/
data: PropTypes.object.isRequired,
/**
* Geppetto Model Factory
*/
modelFactory: PropTypes.object.isRequired,
/**
* Geppetto Resources
*/
resources: PropTypes.object.isRequired,
/**
* Function to handle click events on Matrix layout
*/
matrixOnClickHandler: PropTypes.func.isRequired,
/**
* Array of names supplied to the connectivity plot. Defaults to an empty array
*/
names: PropTypes.arrayOf(PropTypes.string),
/**
* Function returning a d3 scaleOrdinal
*/
colorMap: PropTypes.func,
/**
* One of Matrix, Hive, Force or Chord objects. Defaults to Matrix
*/
layout: PropTypes.oneOfType([PropTypes.instanceOf(Matrix), PropTypes.instanceOf(Hive), PropTypes.instanceOf(Force), PropTypes.instanceOf(Chord)]),
/**
* Function to colour links (synapses) by neurotransmitter
*/
linkType: PropTypes.func,
/**
* Function to scale line widths based on the synaptic base conductance leve
*/
linkWeight: PropTypes.func,
/**
* Function that maps the connection source node (object of class EntityNode ) onto any type of value (coercible to string) which qualitatively identifies the node category
*/
nodeType: PropTypes.func,
/**
* Geppetto library that supplies a network type
*/
library: PropTypes.func,
/**
* Options to customize the toolbar
*/
toolbarOptions: PropTypes.shape({
/**
* Reference to toolbar component
*/
instance: PropTypes.elementType,
/**
* Custom toolbar props
*/
props: PropTypes.shape({}),
/**
* Styles to be applied to the toolbar container
*/
containerStyles: PropTypes.shape({}),
/**
* Styles to be applied to the toolbar
*/
toolBarClassName: PropTypes.shape({}),
/**
* Styles to be applied to the inner div
*/
innerDivStyles: PropTypes.shape({}),
/**
* Styles to be applied to the buttons
*/
buttonStyles: PropTypes.shape({}),
/**
* Styles to be applied to the menu button
*/
menuButtonStyles: PropTypes.shape({}),
/**
* Styles to be applied to the deck
*/
deckStyles: PropTypes.shape({})
})
};
export default ConnectivityComponent;