synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
225 lines • 13.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var lodash_es_1 = require("lodash-es");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var use_deep_compare_effect_1 = (0, tslib_1.__importDefault)(require("use-deep-compare-effect"));
var __1 = require("../");
var getDataFromFromStorage_1 = require("../utils/functions/getDataFromFromStorage");
var SynapseContext_1 = require("../utils/SynapseContext");
var QueryFilter_1 = require("../utils/synapseTypes/Table/QueryFilter");
var QueryWrapper_1 = require("./QueryWrapper");
var SelectionCriteriaPill_1 = (0, tslib_1.__importDefault)(require("./widgets/facet-nav/SelectionCriteriaPill"));
var QueryFilter_2 = require("./widgets/query-filter/QueryFilter");
var RangeFacetFilter_1 = require("./widgets/query-filter/RangeFacetFilter");
// This is a stateful component so that during load the component can hold onto the previous
// total instead of showing 0 results for the intermittent loading state.
var TotalQueryResults = function (_a) {
var _b;
var style = _a.style, unitDescription = _a.unitDescription, frontText = _a.frontText, lastQueryRequest = _a.lastQueryRequest, parentLoading = _a.isLoading, executeQueryRequest = _a.executeQueryRequest, getInitQueryRequest = _a.getInitQueryRequest, _c = _a.showNotch, showNotch = _c === void 0 ? false : _c, topLevelControlsState = _a.topLevelControlsState, error = _a.error;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _d = (0, react_1.useState)(undefined), total = _d[0], setTotal = _d[1]; // undefined to start
var _e = (0, react_1.useState)(false), isLoading = _e[0], setIsLoading = _e[1];
var _f = (0, react_1.useState)([]), facetsWithSelection = _f[0], setFacetsWithSelection = _f[1];
var applyChanges = function (facets) {
var queryRequest = (0, lodash_es_1.cloneDeep)(lastQueryRequest);
queryRequest.query.selectedFacets = facets;
queryRequest.query.offset = 0;
executeQueryRequest(queryRequest);
};
var getEnumFacetsWithSelections = function (facets) {
var enumFacets = facets.filter(function (facet) { return facet.facetType === 'enumeration'; });
var enumFacetsWithSelections = enumFacets.filter(function (facet) {
return facet.facetValues.filter(function (value) { return value.isSelected === true; }).length > 0;
});
return enumFacetsWithSelections;
};
var getRangeFacetsWithSelections = function (facets) {
var rangeFacets = facets.filter(function (facet) { return facet.facetType === 'range'; });
var rangeFacetsWithSelections = rangeFacets.filter(function (facet) { return facet.selectedMax || facet.selectedMin; });
return rangeFacetsWithSelections;
};
var getDisplayValueForEntityColumn = function (entityHeaders, facetValue) {
var _a;
var entity = entityHeaders.find(function (item) { return item.id === facetValue; });
return (_a = entity === null || entity === void 0 ? void 0 : entity.name) !== null && _a !== void 0 ? _a : facetValue;
};
var getDisplayValueUserIdColumn = function (userProfiles, facetValue) {
var userProfile = userProfiles.find(function (item) { return item.ownerId === facetValue; });
return (userProfile === null || userProfile === void 0 ? void 0 : userProfile.userName) || facetValue;
};
var transformEnumFacetsForSelectionDisplay = function (facets, columnModels) {
var lookUpEntityHeaders = (0, getDataFromFromStorage_1.getStoredEntityHeaders)();
var lookUpUserProfiles = (0, getDataFromFromStorage_1.getStoredUserProfiles)();
var filteredEnumWithSelectedValuesOnly = [];
facets.forEach(function (facet) {
var columnModel = columnModels.find(function (model) { return model.name === facet.columnName; });
facet.facetValues.forEach(function (facetValue) {
if (facetValue.isSelected) {
var displayValue = facetValue.value;
if ((columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType) === 'ENTITYID') {
displayValue = getDisplayValueForEntityColumn(lookUpEntityHeaders, facetValue.value);
}
else if ((columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType) === 'USERID') {
displayValue = getDisplayValueUserIdColumn(lookUpUserProfiles, facetValue.value);
}
filteredEnumWithSelectedValuesOnly.push({
facet: facet,
displayValue: displayValue,
selectedValue: facetValue,
});
}
});
});
return filteredEnumWithSelectedValuesOnly;
};
(0, use_deep_compare_effect_1.default)(function () {
var calculateTotal = function () {
var cloneLastQueryRequest = (0, lodash_es_1.cloneDeep)(lastQueryRequest);
cloneLastQueryRequest.partMask =
__1.SynapseConstants.BUNDLE_MASK_QUERY_COUNT |
__1.SynapseConstants.BUNDLE_MASK_QUERY_FACETS |
__1.SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS;
if (parentLoading || total === undefined) {
setIsLoading(true);
__1.SynapseClient.getQueryTableResults(cloneLastQueryRequest, accessToken)
.then(function (data) {
setTotal(data.queryCount);
var rangeFacetsWithSelections = getRangeFacetsWithSelections(data.facets);
var enumFacetsWithSelections = getEnumFacetsWithSelections(data.facets);
var rangeFacetsForDisplay = rangeFacetsWithSelections.map(function (facet) { return ({ facet: facet }); });
var enumFacetsForDisplay = transformEnumFacetsForSelectionDisplay(enumFacetsWithSelections, data.columnModels);
setFacetsWithSelection((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], rangeFacetsForDisplay, true), enumFacetsForDisplay, true));
})
.catch(function (err) {
console.error('err ', err);
})
.finally(function () {
setIsLoading(false);
});
}
};
calculateTotal();
}, [parentLoading, accessToken, lastQueryRequest]);
var removeFacetSelection = function (facetWithSelection) {
var facet = facetWithSelection.facet, selectedValue = facetWithSelection.selectedValue;
if (facet.facetType === 'enumeration') {
(0, QueryFilter_2.applyChangesToValuesColumn)(lastQueryRequest, facet, applyChanges, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value, false);
}
else {
(0, QueryFilter_2.applyChangesToRangeColumn)(lastQueryRequest, facet, applyChanges, [RangeFacetFilter_1.RadioValuesEnum.ANY, RangeFacetFilter_1.RadioValuesEnum.ANY]);
}
};
var removeColumnSearchQuerySelection = function (columnName, value) {
var _a;
var cloneLastQueryRequest = (0, lodash_es_1.cloneDeep)(lastQueryRequest);
if (!cloneLastQueryRequest.query.additionalFilters) {
return;
}
cloneLastQueryRequest.query.additionalFilters =
(_a = cloneLastQueryRequest.query.additionalFilters) === null || _a === void 0 ? void 0 : _a.reduce(function (filtered, el) {
if ((0, QueryFilter_1.isColumnSingleValueQueryFilter)(el) ||
(0, QueryFilter_1.isColumnMultiValueFunctionQueryFilter)(el)) {
// For column-specific QueryFilters, filter out matching values on the matching column
var newElement = {
columnName: el.columnName,
values: el.columnName === columnName
? el.values.filter(function (el) { return el !== value; })
: el.values,
operator: (0, QueryFilter_1.isColumnSingleValueQueryFilter)(el)
? el.operator
: undefined,
function: (0, QueryFilter_1.isColumnMultiValueFunctionQueryFilter)(el)
? el.function
: undefined,
concreteType: el.concreteType,
};
// Drop this QueryFilter if it has no more values
if (newElement.values.length > 0) {
filtered.push(newElement);
}
}
else {
// Don't alter/drop non-column-specific QueryFilters
filtered.push(el);
}
return filtered;
}, []);
executeQueryRequest(cloneLastQueryRequest);
};
var removeTextMatchesQueryFilter = function (queryFilter) {
var cloneLastQueryRequest = (0, lodash_es_1.cloneDeep)(lastQueryRequest);
if (!cloneLastQueryRequest.query.additionalFilters) {
return;
}
cloneLastQueryRequest.query.additionalFilters =
cloneLastQueryRequest.query.additionalFilters.filter(function (el) {
return !((0, QueryFilter_1.isTextMatchesQueryFilter)(el) &&
el.searchExpression === queryFilter.searchExpression);
});
executeQueryRequest(cloneLastQueryRequest);
};
var clearAll = function () {
var initQueryRequest = (0, lodash_es_1.cloneDeep)(getInitQueryRequest());
initQueryRequest.query.additionalFilters = [];
executeQueryRequest(initQueryRequest);
};
var searchSelectionCriteriaPillProps = (_b = lastQueryRequest === null || lastQueryRequest === void 0 ? void 0 : lastQueryRequest.query.additionalFilters) === null || _b === void 0 ? void 0 : _b.reduce(function (pillProps, el) {
if ((0, QueryFilter_1.isTextMatchesQueryFilter)(el)) {
pillProps.push({
key: "fulltextsearch-" + el.searchExpression,
filter: {
value: el.searchExpression,
},
onRemove: function () { return removeTextMatchesQueryFilter(el); },
});
}
else if ((0, QueryFilter_1.isColumnSingleValueQueryFilter)(el) ||
(0, QueryFilter_1.isColumnMultiValueFunctionQueryFilter)(el)) {
var columnName_1 = el.columnName;
el.values.forEach(function (value) {
pillProps.push({
key: "columnsearch-" + value,
filter: {
columnName: columnName_1,
value: value,
},
onRemove: function () {
return removeColumnSearchQuerySelection(el.columnName, value);
},
});
});
}
else {
console.warn('Encountered unexpected QueryFilter: ', el);
}
return pillProps;
}, []);
var showFacetFilter = topLevelControlsState === null || topLevelControlsState === void 0 ? void 0 : topLevelControlsState.showFacetFilter;
if (error) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
return (react_1.default.createElement("div", { className: "TotalQueryResults " + (showNotch ? 'notch-down' : '') + " " + (showFacetFilter
? QueryWrapper_1.QUERY_FILTERS_EXPANDED_CSS
: QueryWrapper_1.QUERY_FILTERS_COLLAPSED_CSS), style: style },
react_1.default.createElement("span", { className: "SRC-boldText SRC-text-title SRC-centerContent" },
frontText,
" ",
total,
" ",
unitDescription,
isLoading && (react_1.default.createElement("span", { style: { marginLeft: '2px' }, className: 'spinner' }))),
react_1.default.createElement("div", { className: "TotalQueryResults__selections" },
searchSelectionCriteriaPillProps &&
searchSelectionCriteriaPillProps.map(function (props) { return (react_1.default.createElement(SelectionCriteriaPill_1.default, (0, tslib_1.__assign)({}, props, { key: props.key }))); }),
facetsWithSelection.map(function (selectedFacet) {
var _a, _b;
return (react_1.default.createElement(SelectionCriteriaPill_1.default, { key: "facets-" + ((_b = (_a = selectedFacet.selectedValue) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : selectedFacet.displayValue), facetWithSelection: selectedFacet, onRemove: function () { return removeFacetSelection(selectedFacet); } }));
})),
(facetsWithSelection.length > 0 ||
(searchSelectionCriteriaPillProps &&
searchSelectionCriteriaPillProps.length > 0)) && (react_1.default.createElement(react_bootstrap_1.Button, { onClick: clearAll, variant: "light", className: "TotalQueryResults__clearall" }, "Clear All"))));
};
exports.default = TotalQueryResults;
//# sourceMappingURL=TotalQueryResults.js.map