synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
141 lines • 8.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_2 = (0, tslib_1.__importStar)(require("@upsetjs/react"));
var utils_1 = require("../utils");
var react_sizeme_1 = require("react-sizeme");
var ColorGradient_1 = (0, tslib_1.__importDefault)(require("./ColorGradient"));
var sqlFunctions_1 = require("../utils/functions/sqlFunctions");
var ErrorBanner_1 = require("./ErrorBanner");
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("./LoadingScreen"));
var react_bootstrap_1 = require("react-bootstrap");
var SynapseContext_1 = require("../utils/SynapseContext");
/**
* Upset plot. See https://medium.com/@sgratzl/upset-js-javascript-tutorial-1b84bfd6896d
* Currently this is driven by a Synapse Table/View, but we may want to alter it to read in the data from a flat file instead.
*/
var UpsetPlot = function (_a) {
var sql = _a.sql, rgbIndex = _a.rgbIndex, maxBarCount = _a.maxBarCount, setName = _a.setName, combinationName = _a.combinationName, _b = _a.height, height = _b === void 0 ? 700 : _b, summaryLinkText = _a.summaryLinkText, summaryLink = _a.summaryLink;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _c = (0, react_1.useState)(), isLoading = _c[0], setIsLoading = _c[1];
var _d = (0, react_1.useState)(), data = _d[0], setData = _d[1];
var _e = (0, react_1.useState)(), error = _e[0], setError = _e[1];
var _f = (0, react_1.useState)(null), selection = _f[0], setSelection = _f[1];
var colorPalette = (0, ColorGradient_1.default)(rgbIndex, 2).colorPalette;
var updateFontSizes = {
setLabel: '14px',
};
(0, react_1.useEffect)(function () {
var isCancelled = false;
var getPlotData = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var entityId, partMask, queryRequest, queryResult, keyValuesMap, caseInsensitiveSetNames, _i, _a, row, _loop_1, j, elems, sets, sortedSets, combinations, err_1, errorMessage;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
setIsLoading(true);
_b.label = 1;
case 1:
_b.trys.push([1, 3, , 4]);
entityId = (0, sqlFunctions_1.parseEntityIdFromSqlStatement)(sql);
partMask = utils_1.SynapseConstants.BUNDLE_MASK_QUERY_RESULTS;
queryRequest = {
partMask: partMask,
concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
entityId: entityId,
query: {
sql: sql,
},
};
return [4 /*yield*/, utils_1.SynapseClient.getFullQueryTableResults(queryRequest, accessToken)
// transform query data into plot data, and store.
// collect all values for each key
];
case 2:
queryResult = (_b.sent()).queryResult;
keyValuesMap = {};
caseInsensitiveSetNames = {};
// caseInsensitiveSetNames looks like { 'RNASEQ': 'rnaSeq', 'NOMe-SEQ': 'NOMe-seq'}.
for (_i = 0, _a = queryResult.queryResults.rows; _i < _a.length; _i++) {
row = _a[_i];
_loop_1 = function (j) {
var rowValues = row.values;
var key = rowValues[0];
var newValue = rowValues[j];
keyValuesMap[key] = keyValuesMap[key] || {};
keyValuesMap[key].name = key;
keyValuesMap[key].sets = keyValuesMap[key].sets || [];
var found = keyValuesMap[key].sets.find(function (v) { return v == newValue; });
if (!found && newValue) {
if (caseInsensitiveSetNames[newValue.toUpperCase()]) {
newValue = caseInsensitiveSetNames[newValue.toUpperCase()];
}
else {
caseInsensitiveSetNames[newValue.toUpperCase()] = newValue;
}
keyValuesMap[key].sets.push(newValue);
}
};
for (j = 1; j < row.values.length; j += 1) {
_loop_1(j);
}
}
elems = Object.values(keyValuesMap);
sets = (0, react_2.extractSets)(elems);
sortedSets = sets.sort(function (a, b) {
return ('' + b.name).localeCompare(a.name);
});
combinations = (0, react_2.generateCombinations)(sortedSets, {
type: 'intersection',
min: 1,
limit: maxBarCount,
order: 'cardinality:desc',
});
if (!isCancelled) {
setData({ sets: sets, combinations: combinations });
setIsLoading(false);
}
return [3 /*break*/, 4];
case 3:
err_1 = _b.sent();
if (!isCancelled) {
setIsLoading(false);
errorMessage = err_1['reason'];
if (!errorMessage) {
console.error(err_1);
errorMessage = 'Error retrieving data';
}
setError(errorMessage);
}
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
getPlotData();
return function () {
isCancelled = true;
};
}, [sql, accessToken]);
return (react_1.default.createElement(react_1.default.Fragment, null,
isLoading && LoadingScreen_1.default,
!isLoading && data && (react_1.default.createElement(react_sizeme_1.SizeMe, null, function (_a) {
var size = _a.size;
return (react_1.default.createElement("div", { className: "UpsetPlot bootstrap-4-backport" },
react_1.default.createElement(react_2.default, { sets: data.sets, combinations: data.combinations, width: size.width, height: height, onHover: setSelection,
// onClick={setSelection}
selection: selection, color: colorPalette[0], selectionColor: colorPalette[0], hasSelectionOpacity: 0.3,
// alternatingBackgroundColor={false}
setName: setName === null || setName === void 0 ? void 0 : setName.toUpperCase(), combinationName: combinationName === null || combinationName === void 0 ? void 0 : combinationName.toUpperCase(), fontFamily: "Lato, sans-serif", fontSizes: updateFontSizes, exportButtons: false, notMemberColor: "transparent" }),
summaryLink && summaryLinkText && (react_1.default.createElement("div", { className: "UpsetPlot__summary" },
react_1.default.createElement(react_bootstrap_1.Button, { variant: "secondary", size: "lg", className: "pill", href: summaryLink }, summaryLinkText)))));
})),
react_1.default.createElement(ErrorBanner_1.ErrorBanner, { error: error })));
};
exports.default = UpsetPlot;
//# sourceMappingURL=UpsetPlot.js.map