synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
130 lines • 8.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var sqlFunctions_1 = require("../utils/functions/sqlFunctions");
var utils_1 = require("../utils");
var Table_1 = require("../utils/synapseTypes/Table");
var SynapseContext_1 = require("../utils/SynapseContext");
var MarkdownSynapse_1 = (0, tslib_1.__importDefault)(require("./MarkdownSynapse"));
var SkeletonTable_1 = require("../assets/skeletons/SkeletonTable");
var Typography_1 = (0, tslib_1.__importDefault)(require("../utils/typography/Typography"));
var use_deep_compare_effect_1 = require("use-deep-compare-effect");
var LIST_COLUMN_TYPES = [Table_1.ColumnType.BOOLEAN_LIST, Table_1.ColumnType.DATE_LIST, Table_1.ColumnType.ENTITYID_LIST, Table_1.ColumnType.INTEGER_LIST, Table_1.ColumnType.STRING_LIST];
var SubsectionRowRenderer = function (_a) {
var sql = _a.sql, searchParams = _a.searchParams, sqlOperator = _a.sqlOperator, _b = _a.isMarkdown, isMarkdown = _b === void 0 ? false : _b, columnLink = _a.columnLink, friendlyValuesMap = _a.friendlyValuesMap, _c = _a.columnNameIsSectionTitle, columnNameIsSectionTitle = _c === void 0 ? false : _c, limit = _a.limit;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _d = (0, react_1.useState)(), rowSet = _d[0], setRowSet = _d[1];
var _e = (0, react_1.useState)(), isLoading = _e[0], setIsLoading = _e[1];
var mounted = true;
(0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(function () {
var fetchData = function () {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var sqlUsed, entityId, partMask, request, queryResultBundle, queryResult, queryResults;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
setIsLoading(true);
sqlUsed = (0, sqlFunctions_1.insertConditionsFromSearchParams)(sql, searchParams, sqlOperator);
entityId = (0, sqlFunctions_1.parseEntityIdFromSqlStatement)(sql);
partMask = utils_1.SynapseConstants.BUNDLE_MASK_QUERY_RESULTS;
request = {
partMask: partMask,
concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
entityId: entityId,
query: {
sql: sqlUsed,
limit: limit,
},
};
return [4 /*yield*/, utils_1.SynapseClient.getQueryTableResults(request, accessToken)];
case 1:
queryResultBundle = _a.sent();
setIsLoading(false);
queryResult = queryResultBundle.queryResult;
queryResults = queryResult.queryResults;
if (queryResults) {
if (mounted) {
setRowSet(queryResults);
}
}
else {
console.log('SubsectionRowRenderer: Error getting data');
}
return [2 /*return*/];
}
});
});
};
fetchData();
return function () {
mounted = false;
};
}, [sql, accessToken, searchParams, sqlOperator]);
/**
* If a "friendly values map" was provided, then use the friendly value if any of the raw values match.
* Otherwise, just return the raw value.
* @param rawValue
* @returns
*/
var getFriendlyValue = function (rawValue) {
if (!friendlyValuesMap) {
return rawValue;
}
var friendlyValue = friendlyValuesMap[rawValue];
return friendlyValue ? friendlyValue : rawValue;
};
return (react_1.default.createElement("div", { className: "SubsectionRowRenderer bootstrap-4-backport" },
isLoading && react_1.default.createElement(SkeletonTable_1.SkeletonTable, { numRows: 2, numCols: 1 }),
!isLoading && rowSet && rowSet.rows.length > 0 && (rowSet.headers.map(function (selectColumn, colIndex) {
// If a link column was provided (that contain URLs), do not create a page sub-section for that column.
if (columnLink && selectColumn.name == columnLink.linkColumnName) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
return react_1.default.createElement("div", { key: "" + colIndex, className: "SubsectionRowRenderer__item", role: "table" },
react_1.default.createElement(Typography_1.default, { variant: columnNameIsSectionTitle ? 'sectionTitle' : 'subsectionHeader', role: 'heading' }, selectColumn.name),
columnNameIsSectionTitle && react_1.default.createElement("hr", null),
react_1.default.createElement("div", { role: "rowgroup" }, rowSet.rows.map(function (row, rowIndex) {
var cellValue = row.values[colIndex];
// If the cell value is undefined, then go to the next row.
if (!cellValue) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
var values;
// If this cell value represents a multi-value (the select column type is a *_LIST column), then parse it and break it apart
if (LIST_COLUMN_TYPES.includes(selectColumn.columnType)) {
var jsonData = JSON.parse(cellValue);
values = jsonData.map(function (val, index) {
return (react_1.default.createElement("div", { key: index, className: "SubsectionRowRenderer__item__value", role: "row" },
isMarkdown && react_1.default.createElement(MarkdownSynapse_1.default, { markdown: getFriendlyValue(val) }),
!isMarkdown && react_1.default.createElement("p", null, getFriendlyValue(val))));
});
}
else {
// If this cell value represents a single value
var renderedValue = void 0;
var friendlyCellValue = getFriendlyValue(cellValue);
if (isMarkdown) {
renderedValue = react_1.default.createElement(MarkdownSynapse_1.default, { markdown: friendlyCellValue });
}
else if (columnLink && columnLink.matchColumnName == selectColumn.name) {
// If a link column was provided, then we need to create links (the url is in this other column)
var urlColumnIndex = rowSet.headers.findIndex(function (col) { return col.name == columnLink.linkColumnName; });
if (urlColumnIndex > -1) {
renderedValue = react_1.default.createElement("a", { rel: "noopener noreferrer", target: "_blank", href: row.values[urlColumnIndex] }, friendlyCellValue);
}
else {
renderedValue = react_1.default.createElement("p", null, friendlyCellValue);
}
}
else {
renderedValue = react_1.default.createElement("p", null, friendlyCellValue);
}
values = react_1.default.createElement("div", { key: rowIndex, className: "SubsectionRowRenderer__item__value", role: "row" }, renderedValue);
}
return values;
})));
}))));
};
exports.default = SubsectionRowRenderer;
//# sourceMappingURL=SubsectionRowRenderer.js.map