synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
199 lines • 9.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxGroup = exports.Facets = exports.FACET_NOT_SELECTED_CLASS = exports.FACET_SELECTED_CLASS = exports.SELECT_SINGLE_FACET = void 0;
var tslib_1 = require("tslib");
var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var utils_1 = require("../utils");
var React = (0, tslib_1.__importStar)(require("react"));
var facetUtils_1 = require("../utils/functions/facetUtils");
var ColorGradient_1 = require("./ColorGradient");
var SynapseTableConstants_1 = require("./table/SynapseTableConstants");
var TotalQueryResults_1 = (0, tslib_1.__importDefault)(require("./TotalQueryResults"));
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faPlus);
exports.SELECT_SINGLE_FACET = 'SELECT_SINGLE_FACET';
exports.FACET_SELECTED_CLASS = 'FACET_SELECTED_CLASS';
exports.FACET_NOT_SELECTED_CLASS = 'FACET_NOT_SELECTED_CLASS';
/**
* Checkbox group represents one column's set of checkbox filters
*
* @class CheckboxGroup
* @extends {React.Component}
*/
var CheckboxGroup = function (props) {
var facetColumnResult = props.facetColumnResult, showAllFacets = props.showAllFacets, lastFacetSelection = props.lastFacetSelection, isLoading = props.isLoading, rgbIndex = props.rgbIndex, isAllFilterSelected = props.isAllFilterSelected;
var children = [];
var ref = React.createRef();
// Note: this actually sorts the data when it appears in the
// table as it stands currently, this may change depending on
// if that arrangment is no longer desired
facetColumnResult.facetValues.sort(function (a, b) {
return b.count - a.count;
});
var _a = (0, ColorGradient_1.getColorPalette)(rgbIndex, facetColumnResult.facetValues.length), colorPalette = _a.colorPalette, textColors = _a.textColors;
facetColumnResult.facetValues.forEach(function (facetColumnResultValues, index) {
var key = facetColumnResult.columnName +
facetColumnResultValues.value +
facetColumnResultValues.count;
var textColor = textColors[index];
var curColor = colorPalette[index];
var style = {};
var isSelected = isAllFilterSelected
? true
: (0, facetUtils_1.getIsValueSelected)({
isLoading: isLoading,
lastFacetSelection: lastFacetSelection,
columnName: facetColumnResult.columnName,
curFacetSelection: facetColumnResultValues,
});
if (isSelected) {
style = {
background: curColor,
};
}
else {
style = {
background: '#C4C4C4',
};
}
// we add this class for testability
var backgroundClass = isSelected
? exports.FACET_SELECTED_CLASS
: exports.FACET_NOT_SELECTED_CLASS;
style.color = textColor;
var value = facetColumnResultValues.value, count = facetColumnResultValues.count;
var displayValue = value === utils_1.SynapseConstants.VALUE_NOT_SET
? utils_1.SynapseConstants.FRIENDLY_VALUE_NOT_SET
: value;
children.push(React.createElement("label", { style: style, className: "SRC-facets SRC-primary-background-color-hover ", key: key },
React.createElement("span", { className: "SRC-facets-text" },
displayValue,
" (",
count,
")"),
React.createElement("input", {
// @ts-ignore
onChange: props.applyChanges(ref, value, exports.SELECT_SINGLE_FACET, index), checked: isSelected, type: "checkbox", value: value, className: "SRC-hidden SRC-facet-checkboxes " + backgroundClass })));
});
// By default only show 5 facets unless the user has clicked a facet, in which case
// showAllFacets will be true.
var childrenView = showAllFacets ? children : children.slice(0, 5);
return (
// need a span so that we can have a ref attachable
React.createElement("span", { ref: ref }, childrenView));
};
exports.CheckboxGroup = CheckboxGroup;
var Facets = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Facets, _super);
function Facets(props) {
var _this = _super.call(this, props) || this;
/**
* Handle checkbox click event
*/
_this.applyChanges = function (ref, facetValue, selector, index) { return function (event) {
event.preventDefault();
if (!_this.state.showAllFacets) {
_this.setState({
showAllFacets: true,
});
}
var _a = _this.props, _b = _a.facet, facet = _b === void 0 ? '' : _b, _c = _a.isAllFilterSelectedForFacet, isAllFilterSelectedForFacet = _c === void 0 ? {} : _c;
var lastFacetSelection = {
facetValue: facetValue,
selector: selector,
columnName: facet,
};
isAllFilterSelectedForFacet[facet] = selector === SynapseTableConstants_1.SELECT_ALL;
_this.props.updateParentState({
lastFacetSelection: lastFacetSelection,
isAllFilterSelectedForFacet: isAllFilterSelectedForFacet,
chartSelectionIndex: index,
});
// read input and fetch data
var htmlCheckboxes = Array.from(ref.current.querySelectorAll('.SRC-facet-checkboxes'));
// queryRequest is a deep clone
var queryRequest = _this.props.getLastQueryRequest();
var newQueryRequest = (0, facetUtils_1.readFacetValues)({
htmlCheckboxes: htmlCheckboxes,
queryRequest: queryRequest,
selector: selector,
facet: facet,
value: facetValue,
}).newQueryRequest;
queryRequest.query.offset = 0;
_this.props.executeQueryRequest(newQueryRequest);
}; };
_this.applyChanges = _this.applyChanges.bind(_this);
_this.state = {
showAllFacets: false,
};
_this.showAllFacets = _this.showAllFacets.bind(_this);
_this.showButtons = _this.showButtons.bind(_this);
return _this;
}
/**
* Display the view of the facets
*
* @returns
* @memberof Facets
*/
Facets.prototype.showFacetFilter = function () {
var _this = this;
if (!this.props.data.facets) {
throw Error('Error on query request, must include facets in partmask to show facets');
}
// Find the facetcolumn result according to the input filter
var facetColumnResult = this.props.data.facets.find(function (el) {
return el.columnName === _this.props.facet && el.facetType === 'enumeration';
});
if (!facetColumnResult) {
throw Error('Error no matching facet found given specified facet');
}
return (React.createElement(CheckboxGroup, { isAllFilterSelected: this.props.isAllFilterSelectedForFacet[this.props.facet], showAllFacets: this.state.showAllFacets, rgbIndex: this.props.rgbIndex, key: facetColumnResult.columnName, facetColumnResult: facetColumnResult, applyChanges: this.applyChanges, isLoading: this.props.isLoading, lastFacetSelection: this.props.lastFacetSelection }));
};
Facets.prototype.showAllFacets = function (event) {
event.preventDefault();
this.setState({
showAllFacets: true,
});
};
Facets.prototype.showButtons = function (curFacetsLength, ref) {
if (this.state.showAllFacets || curFacetsLength <= 5) {
// this is hidden if there are > 5 facets, wait for user to make
// an action for this to appear
return (React.createElement("a", { className: "SRC-facet-select-all", onClick: this.applyChanges(ref, '', SynapseTableConstants_1.SELECT_ALL, 0) }, "Select All"));
}
return (React.createElement("a", { id: "showAllFacetsButton", onClick: this.showAllFacets },
"Show All (",
curFacetsLength,
")"));
};
Facets.prototype.render = function () {
if (!this.props.data) {
return React.createElement("div", null);
}
var _a = this.props, data = _a.data, facet = _a.facet, unitDescription = _a.unitDescription, isLoading = _a.isLoading, showBarChart = _a.showBarChart;
var facets = data.facets;
if (!facets) {
throw Error('Error on query request, must include facets in partmask to show facets');
}
var curFacetsIndex = facets.findIndex(function (curFacet) {
return curFacet.columnName === facet && curFacet.facetType === 'enumeration';
});
// cast is necessary because filter returns an array of arrays
var facetColumnResultValues = facets[curFacetsIndex];
if (!facetColumnResultValues) {
return React.createElement("div", null);
}
var ref = React.createRef();
return (React.createElement("div", { className: "SRC-syn-border-spacing" },
!showBarChart && (React.createElement(TotalQueryResults_1.default, { lastQueryRequest: this.props.getLastQueryRequest(), unitDescription: unitDescription, frontText: 'Displaying', isLoading: isLoading })),
React.createElement("form", null,
React.createElement("div", { ref: ref, className: "SRC-marginFive form-group" },
this.showFacetFilter(),
this.showButtons(facetColumnResultValues.facetValues.length, ref)))));
};
return Facets;
}(React.Component));
exports.Facets = Facets;
//# sourceMappingURL=Facets.js.map