synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
124 lines • 7.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var QueryCount_1 = (0, tslib_1.__importDefault)(require("../QueryCount"));
var QueryWrapper_1 = require("../QueryWrapper");
var Typography_1 = (0, tslib_1.__importDefault)(require("../../utils/typography/Typography"));
var ColumnSelection_1 = require("./table-top/ColumnSelection");
var utils_1 = require("../../utils");
var ElementWithTooltip_1 = require("../widgets/ElementWithTooltip");
var lodash_es_1 = require("lodash-es");
var table_top_1 = require("./table-top");
var sqlFunctions_1 = require("../../utils/functions/sqlFunctions");
var SynapseContext_1 = require("../../utils/SynapseContext");
var controls = [
{
icon: 'search',
key: 'showSearchBar',
tooltipText: 'Show / Hide Search Bar',
},
{
icon: 'chart',
key: 'showFacetVisualization',
tooltipText: 'Show / Hide Visualizations',
},
{
icon: 'filter',
key: 'showFacetFilter',
tooltipText: 'Show / Hide Filters',
},
{
icon: 'download',
key: 'showDownloadConfirmation',
tooltipText: 'Show options for download',
},
];
var TopLevelControls = function (props) {
var name = props.name, sql = props.sql, updateParentState = props.updateParentState, topLevelControlsState = props.topLevelControlsState, data = props.data, _a = props.showColumnSelection, showColumnSelection = _a === void 0 ? false : _a, isColumnSelected = props.isColumnSelected, _b = props.hideDownload, hideDownload = _b === void 0 ? false : _b, _c = props.hideVisualizationsControl, hideVisualizationsControl = _c === void 0 ? false : _c, _d = props.hideFacetFilterControl, hideFacetFilterControl = _d === void 0 ? false : _d, _e = props.hideQueryCount, hideQueryCount = _e === void 0 ? false : _e, selectedRowIndices = props.selectedRowIndices, customControls = props.customControls, executeQueryRequest = props.executeQueryRequest, getLastQueryRequest = props.getLastQueryRequest, facetAliases = props.facetAliases;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var entityId = (0, sqlFunctions_1.parseEntityIdFromSqlStatement)(sql);
var _f = (0, react_1.useState)(false), isFileView = _f[0], setIsFileView = _f[1];
var setControlState = function (control) {
var _a;
var updatedTopLevelControlsState = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, topLevelControlsState), (_a = {}, _a[control] = !topLevelControlsState[control], _a));
if (control === 'showSearchBar') {
updatedTopLevelControlsState.showDownloadConfirmation = false;
}
if (control === 'showDownloadConfirmation') {
updatedTopLevelControlsState.showSearchBar = false;
}
updateParentState({
topLevelControlsState: updatedTopLevelControlsState,
});
};
(0, react_1.useEffect)(function () {
var getIsFileView = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var entityData;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, utils_1.SynapseClient.getEntity(accessToken, entityId)];
case 1:
entityData = _a.sent();
setIsFileView(entityData.concreteType.includes('EntityView'));
return [2 /*return*/];
}
});
}); };
getIsFileView();
}, [entityId, accessToken]);
var refresh = function () {
executeQueryRequest(getLastQueryRequest());
};
/**
* Handles the toggle of a column select, this will cause the table to
* either show the column or hide depending on the prior state of the column
*
* @memberof SynapseTable
*/
var toggleColumnSelection = function (columnName) {
var isColumnSelectedCopy = (0, lodash_es_1.cloneDeep)(isColumnSelected);
if (isColumnSelectedCopy.includes(columnName)) {
isColumnSelectedCopy = isColumnSelectedCopy.filter(function (el) { return el !== columnName; });
}
else {
isColumnSelectedCopy.push(columnName);
}
updateParentState({ isColumnSelected: isColumnSelectedCopy });
};
var showFacetFilter = topLevelControlsState === null || topLevelControlsState === void 0 ? void 0 : topLevelControlsState.showFacetFilter;
return (react_1.default.createElement("div", { className: "TopLevelControls " + (showFacetFilter
? QueryWrapper_1.QUERY_FILTERS_EXPANDED_CSS
: QueryWrapper_1.QUERY_FILTERS_COLLAPSED_CSS), "data-testid": 'TopLevelControls' },
react_1.default.createElement("h3", null,
react_1.default.createElement("div", { className: "TopLevelControls__querycount" }, name && react_1.default.createElement(Typography_1.default, { variant: 'sectionTitle', role: 'heading' },
name,
" ",
(!hideQueryCount && react_1.default.createElement(QueryCount_1.default, { sql: sql, parens: true })))),
react_1.default.createElement("div", { className: "TopLevelControls__actions" },
customControls &&
customControls.map(function (customControl) {
return (react_1.default.createElement("button", { key: customControl.buttonText, className: "btn SRC-roundBorder SRC-primary-background-color SRC-whiteText " + customControl.classNames, style: { marginRight: '5px' }, type: "button", onClick: function () {
return customControl.onClick({ data: data, selectedRowIndices: selectedRowIndices, refresh: refresh });
} },
customControl.icon,
"\u00A0",
customControl.buttonText));
}),
controls.map(function (control) {
var key = control.key, icon = control.icon, tooltipText = control.tooltipText;
if ((key === 'showDownloadConfirmation' && hideDownload) ||
(key === 'showFacetVisualization' && hideVisualizationsControl) ||
(key === 'showFacetFilter' && hideFacetFilterControl)) {
// needs to be a file view in order for download to make sense
return react_1.default.createElement(react_1.default.Fragment, null);
}
else if (key === 'showDownloadConfirmation') {
return (react_1.default.createElement(table_top_1.DownloadOptions, { darkTheme: true, onDownloadFiles: function () { return setControlState(key); }, queryResultBundle: data, queryBundleRequest: getLastQueryRequest(), isFileView: isFileView && !hideDownload }));
}
return (react_1.default.createElement(ElementWithTooltip_1.ElementWithTooltip, { idForToolTip: key, tooltipText: tooltipText, key: key, callbackFn: function () { return setControlState(key); }, darkTheme: true, icon: icon }));
}),
showColumnSelection && (react_1.default.createElement(ColumnSelection_1.ColumnSelection, { headers: data === null || data === void 0 ? void 0 : data.selectColumns, isColumnSelected: isColumnSelected, toggleColumnSelection: toggleColumnSelection, darkTheme: true, facetAliases: facetAliases }))))));
};
exports.default = TopLevelControls;
//# sourceMappingURL=TopLevelControls.js.map