synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
154 lines • 9.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFacets = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var TotalQueryResults_1 = (0, tslib_1.__importDefault)(require("../../../containers/TotalQueryResults"));
var QueryWrapper_1 = require("../../QueryWrapper");
var QueryFilter_1 = require("../query-filter/QueryFilter");
var FacetNavPanel_1 = (0, tslib_1.__importDefault)(require("./FacetNavPanel"));
var DEFAULT_VISIBLE_FACETS = 2;
function getFacets(data, facetsToPlot) {
var _a, _b;
var result = (_b = (_a = data === null || data === void 0 ? void 0 : data.facets) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
var isFacetToPlot = item.facetType === 'enumeration' &&
(!(facetsToPlot === null || facetsToPlot === void 0 ? void 0 : facetsToPlot.length) || facetsToPlot.indexOf(item.columnName) > -1);
// PORTALS-1993: only plot if the facet has count data
return (isFacetToPlot &&
item.facetValues.length > 0);
})) !== null && _b !== void 0 ? _b : [];
return result;
}
exports.getFacets = getFacets;
var FacetNav = function (_a) {
var data = _a.data, getLastQueryRequest = _a.getLastQueryRequest, isLoadingNewData = _a.isLoadingNewData, isLoading = _a.isLoading, executeQueryRequest = _a.executeQueryRequest, asyncJobStatus = _a.asyncJobStatus, topLevelControlsState = _a.topLevelControlsState, facetsToPlot = _a.facetsToPlot, getInitQueryRequest = _a.getInitQueryRequest, facetAliases = _a.facetAliases, _b = _a.showNotch, showNotch = _b === void 0 ? false : _b, error = _a.error;
var _c = (0, react_1.useState)([]), facetUiStateArray = _c[0], setFacetUiStateArray = _c[1];
var _d = (0, react_1.useState)(true), isFirstTime = _d[0], setIsFirstTime = _d[1];
var _e = topLevelControlsState, showFacetVisualization = _e.showFacetVisualization, showFacetFilter = _e.showFacetFilter;
var lastQueryRequest = getLastQueryRequest === null || getLastQueryRequest === void 0 ? void 0 : getLastQueryRequest();
(0, react_1.useEffect)(function () {
var result = getFacets(data, facetsToPlot);
if (result.length === 0) {
return;
}
if (isFirstTime) {
setFacetUiStateArray(result.map(function (item, index) { return ({
name: item.columnName,
isHidden: index >= DEFAULT_VISIBLE_FACETS,
plotType: 'PIE',
}); }));
setIsFirstTime(false);
}
}, [data, isFirstTime, facetsToPlot]);
// when 'show more/less' is clicked
var onShowMoreClick = function (shouldShowMore) {
setFacetUiStateArray(function (facetUiStateArray) {
return facetUiStateArray.map(function (item, index) {
if (shouldShowMore) {
// show everything
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { isHidden: false });
}
// otherwise hide everything except the first three items
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { isHidden: index >= DEFAULT_VISIBLE_FACETS });
});
});
};
// what needs to happen after the filters are adjusted from the plot
var applyChangesFromQueryFilter = function (facets) {
lastQueryRequest.query.selectedFacets = facets;
lastQueryRequest.query.offset = 0;
executeQueryRequest(lastQueryRequest);
};
// don't show hidden facets
var isFacetHiddenInGrid = function (columnName) {
var itemHidden = facetUiStateArray.find(function (item) { return item.name === columnName && item.isHidden === true; });
var result = itemHidden !== undefined;
return result;
};
var showMoreButtonState = (0, react_1.useMemo)(function () {
if (
// if at least one item is hidden
facetUiStateArray.find(function (item) { return item.isHidden === true; })) {
return 'MORE';
}
else if (facetUiStateArray.length <= DEFAULT_VISIBLE_FACETS) {
return 'NONE';
}
else {
return 'LESS';
}
}, [facetUiStateArray]);
// hides facet graph
var hideFacetInGrid = function (columnName) {
setUiPropertyForFacet(columnName, 'isHidden', true);
};
var setPlotType = function (columnName, plotType) {
setUiPropertyForFacet(columnName, 'plotType', plotType);
};
var getPlotType = function (columnName) {
var _a;
var plotType = (_a = facetUiStateArray.find(function (item) { return item.name === columnName; })) === null || _a === void 0 ? void 0 : _a.plotType;
return plotType !== null && plotType !== void 0 ? plotType : 'PIE';
};
var setUiPropertyForFacet = function (columnName, propName, value) {
setFacetUiStateArray(function (facetUiStateArray) {
return facetUiStateArray.map(function (item) {
var _a;
return item.name === columnName ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), (_a = {}, _a[propName] = value, _a)) : item;
});
});
};
var hasFacetsOrFilters = ((lastQueryRequest === null || lastQueryRequest === void 0 ? void 0 : lastQueryRequest.query.selectedFacets) !== undefined &&
lastQueryRequest.query.selectedFacets.length > 0) ||
((lastQueryRequest === null || lastQueryRequest === void 0 ? void 0 : lastQueryRequest.query.additionalFilters) !== undefined &&
(lastQueryRequest === null || lastQueryRequest === void 0 ? void 0 : lastQueryRequest.query.additionalFilters.length) > 0);
var facets = getFacets(data, facetsToPlot);
var colorTracker = getFacets(data, facetsToPlot).map(function (el, index) {
return {
columnName: el.columnName,
colorIndex: index,
};
});
if (error) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
else if (isLoadingNewData) {
return (react_1.default.createElement("div", { className: "SRC-loadingContainer SRC-centerContentColumn" }, (asyncJobStatus === null || asyncJobStatus === void 0 ? void 0 : asyncJobStatus.progressMessage) && (react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: "spinner" }),
asyncJobStatus.progressMessage))));
}
else {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(TotalQueryResults_1.default, { isLoading: isLoading, executeQueryRequest: executeQueryRequest, lastQueryRequest: getLastQueryRequest === null || getLastQueryRequest === void 0 ? void 0 : getLastQueryRequest(), getInitQueryRequest: getInitQueryRequest, unitDescription: hasFacetsOrFilters ? 'Results Filtered By' : 'Results', frontText: '', showNotch: showNotch, topLevelControlsState: topLevelControlsState }),
facets.length > 0 && (react_1.default.createElement("div", { className: "FacetNav " + (showFacetVisualization ? '' : 'hidden') + " " + (showFacetFilter
? QueryWrapper_1.QUERY_FILTERS_EXPANDED_CSS
: QueryWrapper_1.QUERY_FILTERS_COLLAPSED_CSS) + " " + (showMoreButtonState === 'LESS' ? 'less' : '') },
react_1.default.createElement("div", { className: "FacetNav__row", role: "list" }, facets.map(function (facet) {
var _a;
return (react_1.default.createElement("div", { className: "col-sm-12 col-md-4", style: {
display: isFacetHiddenInGrid(facet.columnName)
? 'none'
: 'block',
}, key: facet.columnName },
react_1.default.createElement(FacetNavPanel_1.default, { isLoading: isLoading, index: (_a = colorTracker.find(function (el) { return el.columnName === facet.columnName; })) === null || _a === void 0 ? void 0 : _a.colorIndex, data: data, onHide: function () { return hideFacetInGrid(facet.columnName); }, plotType: getPlotType(facet.columnName), onSetPlotType: function (plotType) {
return setPlotType(facet.columnName, plotType);
}, facetToPlot: facet, lastQueryRequest: lastQueryRequest,
/*
TODO: Simplify the nested functions below, all the logic should be contained
in the EnumFacetFilter component.
*/
applyChangesToFacetFilter: applyChangesFromQueryFilter, applyChangesToGraphSlice: function (facet, value, isSelected) {
return (0, QueryFilter_1.applyChangesToValuesColumn)(lastQueryRequest, facet, applyChangesFromQueryFilter, value === null || value === void 0 ? void 0 : value.value, isSelected);
}, isModalView: false, facetAliases: facetAliases })));
})),
showMoreButtonState !== 'NONE' && (react_1.default.createElement("div", { className: "FacetNav__showMoreContainer bootstrap-4-backport" },
react_1.default.createElement(react_bootstrap_1.Button, { variant: "secondary", className: "pill-xl FacetNav__showMore", onClick: function () {
return onShowMoreClick(showMoreButtonState === 'MORE');
}, style: { zIndex: 500 } }, showMoreButtonState === 'LESS'
? 'Hide Charts'
: 'View All Charts')))))));
}
};
exports.default = FacetNav;
//# sourceMappingURL=FacetNav.js.map