@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
95 lines (94 loc) • 5.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchQueryComponentFactory = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const Slider_1 = require("../RcsbGroupMembers/Components/Slider");
const SearchQueryContextManager_1 = require("./SearchQueryContextManager");
const UrlTools_1 = require("../../../RcsbUtils/Helpers/UrlTools");
const react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
const classes = tslib_1.__importStar(require("../../../scss/bootstrap-group-display.module.scss"));
class SearchQueryComponentFactory {
static getGroupSearchComponent(groupProvenanceId, groupId, searchQuery) {
if (SearchQueryComponentFactory.unique) {
SearchQueryComponentFactory.unique = false;
return (0, jsx_runtime_1.jsx)(RcsbGroupSearchQueryComponent, { groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: searchQuery });
}
else {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
}
}
exports.SearchQueryComponentFactory = SearchQueryComponentFactory;
SearchQueryComponentFactory.unique = true;
class RcsbGroupSearchQueryComponent extends react_1.default.Component {
constructor(props) {
super(props);
this.COMPONENT_NAME = "group-search-query-component";
this.URL_STATE_PARAMETER_NAME = "searchQueryState";
this.URL_REQUEST_PARAMETER_NAME = "request";
this.draggableNodeRef = react_1.default.createRef();
this.state = {
index: 0,
searchQueryList: [this.props.searchQuery],
visibility: "hidden"
};
SearchQueryContextManager_1.SearchQueryContextManager.setConfig(Object.assign({}, this.props));
}
render() {
return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { nodeRef: this.draggableNodeRef, children: (0, jsx_runtime_1.jsx)("div", { ref: this.draggableNodeRef, className: "position-fixed", style: { visibility: this.state.visibility, zIndex: 1024, left: "15px", width: 124, top: "50%" }, children: (0, jsx_runtime_1.jsx)("div", { className: classes.queryHistoryBorder, children: (0, jsx_runtime_1.jsxs)("div", { className: "border px-1 pt-1 shadow bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center py-2 bg-secondary bg-gradient text-white", style: { cursor: "grab" }, children: "Query History" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(-1), children: (0, Slider_1.actionIcon)("prev") }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-nowrap flex-grow-1 my-auto", children: [this.state.index + 1, " / ", this.state.searchQueryList.length] }), (0, jsx_runtime_1.jsx)("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(+1), children: (0, Slider_1.actionIcon)("next") })] })] }) }) }) }));
}
componentDidMount() {
this.subscribe();
this.checkUrlState();
}
componentWillUnmount() {
this.unsubscribe();
}
unsubscribe() {
this.subscription.unsubscribe();
}
subscribe() {
this.subscription = SearchQueryContextManager_1.SearchQueryContextManager.subscribe((o) => {
this.addSearchQuery(o);
});
}
checkUrlState() {
const urlParams = UrlTools_1.UrlTools.decodeUrlParameters();
if (!urlParams)
return;
const urlState = urlParams.find(p => p.key === this.URL_STATE_PARAMETER_NAME);
if (urlState) {
this.setState(urlState.value);
const searchQuery = urlState.value.searchQueryList[urlState.value.index];
if (searchQuery)
SearchQueryContextManager_1.SearchQueryContextManager.setConfig({ searchQuery });
}
}
addSearchQuery(o) {
if (!o.searchQuery)
return;
this.setState({ visibility: "visible" });
if (o.searchQuery && o.attributeName != this.COMPONENT_NAME)
this.setState({ searchQueryList: [...this.state.searchQueryList.slice(0, this.state.index + 1), o.searchQuery], index: this.state.searchQueryList.slice(0, this.state.index + 1).length }, () => { if (o.searchQuery)
this.encodeUrlParameters(o.searchQuery); });
}
browseSearchQuery(n) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const index = this.state.index + n;
if (index >= 0 && index < this.state.searchQueryList.length) {
this.setState({ index: index }, () => tslib_1.__awaiter(this, void 0, void 0, function* () {
this.encodeUrlParameters(this.state.searchQueryList[this.state.index]);
yield SearchQueryContextManager_1.SearchQueryContextManager.replaceSearchQuery(this.COMPONENT_NAME, this.state.searchQueryList[this.state.index]);
}));
}
});
}
encodeUrlParameters(query) {
UrlTools_1.UrlTools.encodeUrlParameterList([
{ key: this.URL_REQUEST_PARAMETER_NAME, value: query },
{ key: this.URL_STATE_PARAMETER_NAME, value: this.state }
]);
}
}