synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
122 lines • 7.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var plotly_js_basic_dist_1 = (0, tslib_1.__importDefault)(require("plotly.js-basic-dist"));
var factory_1 = (0, tslib_1.__importDefault)(require("react-plotly.js/factory"));
var react_sizeme_1 = require("react-sizeme");
var ColorGradient_1 = require("../../../containers/ColorGradient");
var unCamelCase_1 = require("../../../utils/functions/unCamelCase");
var react_1 = require("react");
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../../LoadingScreen"));
var FacetNavPanel_1 = require("../../widgets/facet-nav/FacetNavPanel");
var FacetNav_1 = require("../../widgets/facet-nav/FacetNav");
var SynapseContext_1 = require("../../../utils/SynapseContext");
var Plot = (0, factory_1.default)(plotly_js_basic_dist_1.default);
var layout = {
showlegend: false,
annotations: [],
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
yaxis: {
visible: false,
showgrid: false,
},
xaxis: {
visible: false,
showgrid: false,
},
};
var FacetPlotsCard = function (_a) {
var title = _a.title, description = _a.description, isLoadingNewData = _a.isLoadingNewData, rgbIndex = _a.rgbIndex, facetsToPlot = _a.facetsToPlot, detailsPagePath = _a.detailsPagePath, data = _a.data, isLoading = _a.isLoading, facetAliases = _a.facetAliases;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _b = (0, react_1.useState)([]), facetPlotDataArray = _b[0], setFacetPlotDataArray = _b[1];
var _c = (0, react_1.useState)([]), facetDataArray = _c[0], setFacetDataArray = _c[1];
var _d = (0, react_1.useState)(''), selectedFacetValue = _d[0], setSelectedFacetValue = _d[1];
var colorPalette = (0, ColorGradient_1.getColorPalette)(rgbIndex !== null && rgbIndex !== void 0 ? rgbIndex : 0, 2).colorPalette;
(0, react_1.useEffect)(function () {
var _a;
if (!facetsToPlot || !data) {
return;
}
else {
var getColumnType_1 = function (facetToPlot) {
var _a, _b;
return (_b = (_a = data === null || data === void 0 ? void 0 : data.columnModels) === null || _a === void 0 ? void 0 : _a.find(function (columnModel) { return columnModel.name === facetToPlot.columnName; })) === null || _b === void 0 ? void 0 : _b.columnType;
};
var facetsDataToPlot = (0, FacetNav_1.getFacets)(data, facetsToPlot);
setFacetDataArray(facetsDataToPlot);
Promise.all(facetsDataToPlot.map(function (item, index) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var plotData;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, (0, FacetNavPanel_1.extractPlotDataArray)(item, getColumnType_1(item), index + 1, //individual plot rgbIndex
'PIE', accessToken)];
case 1:
plotData = _a.sent();
return [2 /*return*/, plotData];
}
});
}); })).then(function (newPlotData) { return setFacetPlotDataArray(newPlotData); });
// If we are showing a facet selection based card, then set the selectedFacetValue. For example, facet column "study" with value "ROSMAP"
var selectedFacet = (_a = data === null || data === void 0 ? void 0 : data.facets) === null || _a === void 0 ? void 0 : _a.map(function (item) {
var facetValues = item
.facetValues;
if (facetValues) {
var filteredFacetValues = facetValues.filter(function (facetValue) {
return facetValue.isSelected;
});
return filteredFacetValues.length > 0
? filteredFacetValues[0]
: undefined;
}
else {
return undefined;
}
})[0];
if (selectedFacet && selectedFacet.value) {
setSelectedFacetValue(selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.value);
}
}
}, [facetsToPlot, data]);
if (isLoadingNewData ||
!facetPlotDataArray ||
!facetDataArray ||
facetDataArray.length === 0) {
return (React.createElement("div", { className: "FacetPlotsCard FacetPlotsCard__loading SRC-centerContentColumn" }, LoadingScreen_1.default));
}
else {
var detailsPageLink = React.createElement(React.Fragment, null);
if (detailsPagePath && selectedFacetValue) {
detailsPageLink = (React.createElement("div", { className: "FacetPlotsCard__link" },
React.createElement("a", { href: detailsPagePath },
"View ",
selectedFacetValue)));
}
var isShowingMultiplePlots_1 = facetPlotDataArray.length > 1;
var cardTitle = title !== null && title !== void 0 ? title : (isShowingMultiplePlots_1
? selectedFacetValue
: (0, unCamelCase_1.unCamelCase)(facetDataArray[0].columnName, facetAliases));
return (React.createElement("div", { className: "FacetPlotsCard cardContainer" },
React.createElement("div", { className: "FacetPlotsCard__titlebar", style: { backgroundColor: colorPalette[0].replace(')', ',.05)') } },
React.createElement("span", { className: "FacetPlotsCard__title" }, cardTitle),
description && (React.createElement("span", { className: "FacetPlotsCard__description" }, description)),
detailsPageLink,
isLoading && (React.createElement("span", { style: { marginLeft: '2px' }, className: 'spinner' }))),
React.createElement("div", { className: "FacetPlotsCard__body" }, facetPlotDataArray.map(function (plotData, index) {
return (React.createElement("div", { key: index },
index !== 0 && React.createElement("hr", null),
isShowingMultiplePlots_1 && (React.createElement("div", { className: "FacetPlotsCard__body__facetname" },
React.createElement("span", null, (0, unCamelCase_1.unCamelCase)(facetDataArray[index].columnName, facetAliases)))),
React.createElement("div", { className: "FacetPlotsCard__body__row" },
React.createElement(react_sizeme_1.SizeMe, { monitorHeight: true }, function (_a) {
var _b;
var size = _a.size;
return (React.createElement("div", { className: "FacetPlotsCard__body__plot" },
React.createElement(Plot, { key: facetsToPlot[index] + "-" + size.width, layout: layout, data: (_b = plotData === null || plotData === void 0 ? void 0 : plotData.data) !== null && _b !== void 0 ? _b : [], style: (0, FacetNavPanel_1.getPlotStyle)(size.width, 'PIE', 150), config: { displayModeBar: false } })));
}),
React.createElement(FacetNavPanel_1.FacetPlotLegend, { labels: plotData === null || plotData === void 0 ? void 0 : plotData.labels, colors: plotData === null || plotData === void 0 ? void 0 : plotData.colors, isExpanded: false }))));
}))));
}
};
exports.default = FacetPlotsCard;
//# sourceMappingURL=FacetPlotsCard.js.map