synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
114 lines • 4.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var plotly_js_basic_dist_1 = (0, tslib_1.__importDefault)(require("plotly.js-basic-dist"));
var React = (0, tslib_1.__importStar)(require("react"));
var factory_1 = (0, tslib_1.__importDefault)(require("react-plotly.js/factory"));
var utils_1 = require("../../utils/");
var SynapseClient_1 = require("../../utils/SynapseClient");
var sqlFunctions_1 = require("../../utils/functions/sqlFunctions");
var SynapseContext_1 = require("../../utils/SynapseContext");
var Plot = (0, factory_1.default)(plotly_js_basic_dist_1.default);
var SynapsePlot = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SynapsePlot, _super);
function SynapsePlot(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isLoaded: false,
queryData: {},
};
_this.fetchPlotlyData = _this.fetchPlotlyData.bind(_this);
_this.showPlot = _this.showPlot.bind(_this);
return _this;
}
SynapsePlot.prototype.componentDidMount = function () {
this.fetchPlotlyData();
};
/**
* Get data for plotly
*
* @returns data corresponding to plotly widget
*/
SynapsePlot.prototype.fetchPlotlyData = function () {
var _this = this;
var query = this.props.widgetparamsMapped.query;
var queryRequest = {
concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
partMask: utils_1.SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,
entityId: (0, sqlFunctions_1.parseEntityIdFromSqlStatement)(query),
query: {
sql: query,
},
};
(0, SynapseClient_1.getFullQueryTableResults)(queryRequest, this.context.accessToken)
.then(function (data) {
_this.setState({
isLoaded: true,
queryData: data,
});
})
.catch(function (err) {
console.log('Error on full table query ', err);
});
};
SynapsePlot.prototype.showPlot = function () {
if (!this.state.isLoaded) {
return;
}
var _a = this.props.widgetparamsMapped, title = _a.title, xtitle = _a.xtitle, ytitle = _a.ytitle, type = _a.type, xaxistype = _a.xaxistype, showlegend = _a.showlegend;
var queryData = this.state;
var isHorizontal = this.props.widgetparamsMapped.horizontal.toLowerCase();
var layout = {
showlegend: showlegend,
title: title,
};
if (xtitle) {
layout.xaxis = {
title: xtitle,
};
}
if (xaxistype) {
layout.xaxis = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, layout.xaxis), { xaxistype: xaxistype.toLowerCase() });
}
if (ytitle) {
layout.yaxis = {
title: ytitle,
};
}
// init plot_data
var plotData = [];
var orientation = isHorizontal ? 'v' : 'h';
var headers = queryData.queryData.queryResult.queryResults.headers;
for (var i = 0; i < headers.length - 1; i += 1) {
// make an entry for each set of data points
plotData[i] = {
orientation: orientation,
name: headers[i + 1].name,
type: type.toLowerCase(),
x: [],
y: [],
};
}
// grab all the data
for (var _i = 0, _b = queryData.queryData.queryResult.queryResults.rows; _i < _b.length; _i++) {
var row = _b[_i];
for (var j = 1; j < row.values.length; j += 1) {
// create pairs of data
var rowValues = row.values;
plotData[j - 1].x.push(rowValues[0]);
plotData[j - 1].y.push(rowValues[j]);
}
}
return React.createElement(Plot, { layout: layout, data: plotData });
};
SynapsePlot.prototype.render = function () {
if (!this.state.isLoaded) {
return null;
}
return this.showPlot();
};
SynapsePlot.contextType = SynapseContext_1.SynapseContext;
return SynapsePlot;
}(React.Component));
exports.default = SynapsePlot;
//# sourceMappingURL=SynapsePlot.js.map