@rcsb/rcsb-saguaro-app 6.0.0-development.1 → 6.0.0-development.2

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMemberItem.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { GroupProvenanceId, StructureDeterminationMethodology } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+interface GroupMemberItemInterface {
+    item: ItemFeaturesInterface;
+    groupId: string;
+    groupProvenanceId: GroupProvenanceId;
+    searchQuery?: SearchQuery;
+}
+export interface ItemFeaturesInterface {
+    entryId: string;
+    asymId?: string;
+    entityId?: string;
+    taxNames: Array<string>;
+    name: string;
+    experimentalMethod: string;
+    resolution?: number;
+    sequenceLength?: number;
+    molecularWeight?: number;
+    structureDeterminationMethodology: StructureDeterminationMethodology;
+}
+export declare class GroupMemberItem extends React.Component<GroupMemberItemInterface, {}> {
+    private static readonly SEQUENCE_ALIGNMENT_3D_LINK;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMemberItem.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupMemberItem = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const web_resources_json_1 = tslib_1.__importDefault(require("../../../RcsbServerConfig/web.resources.json"));
+const DwEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums");
+const TagDelimiter_1 = require("@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter");
+const NA = "N/A";
+class GroupMemberItem extends react_1.default.Component {
+    render() {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { position: "relative", minHeight: 358 }, children: [imageIcon(this.props.item), (0, jsx_runtime_1.jsx)("img", { src: memberImgUrl(this.props.item, this.props.groupProvenanceId), alt: "image", style: { width: "100%" } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-light border-top p-md-4", children: [hasGroup3D(this.props.groupProvenanceId) ?
+                            (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bx bxs-cube" }), " Explore in 3D"] }), ": ", (0, jsx_runtime_1.jsx)("a", { href: alignment1d3dUrl(this.props.groupId, this.props.searchQuery), children: GroupMemberItem.SEQUENCE_ALIGNMENT_3D_LINK })] }) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: memberSummaryUrlText(this.props.item, this.props.groupProvenanceId) }), (0, jsx_runtime_1.jsx)("span", { children: " - " }), (0, jsx_runtime_1.jsx)("a", { href: memberSummaryUrl(this.props.item, this.props.groupProvenanceId), children: "Summary" }), (0, jsx_runtime_1.jsx)("span", { children: " | " }), (0, jsx_runtime_1.jsx)("a", { href: member3DViewUrl(this.props.item, this.props.groupProvenanceId), children: "Structure" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.name, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Name: " }), this.props.item.name] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Organism: " }), this.props.item.taxNames.join(", ")] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.experimentalMethod, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Experimental Method: " }), (_a = this.props.item.experimentalMethod) !== null && _a !== void 0 ? _a : NA] }), ((0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Resolution: " }), this.props.item.resolution ? `${this.props.item.resolution} Å` : NA] })), this.props.item.molecularWeight ? ((0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Molecular Weight: " }), `${this.props.item.molecularWeight} kDa`] })) : null] })] }));
+    }
+}
+exports.GroupMemberItem = GroupMemberItem;
+GroupMemberItem.SEQUENCE_ALIGNMENT_3D_LINK = "Sequence Alignments";
+function memberImgUrl(ei, groupProvenanceId) {
+    if (groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
+        return web_resources_json_1.default.rcsb_cdn.url + ei.entryId.toLowerCase().substring(1, 3) + "/" + ei.entryId.toLowerCase() + "/" + ei.entryId.toLowerCase() + "_model-1.jpeg";
+    return web_resources_json_1.default.rcsb_cdn.url + (ei.entityId && TagDelimiter_1.TagDelimiter.isRcsbId(ei.entityId) ? ei.entryId.toLowerCase().substring(1, 3) + "/" + ei.entryId.toLowerCase() : "") + "/" + ei.entryId.toLowerCase() + "_chain-" + ei.asymId + ".jpeg";
+}
+function alignment1d3dUrl(groupId, searchQuery) {
+    return web_resources_json_1.default["1d3d-alignment"].url + groupId + (searchQuery ? web_resources_json_1.default["1d3d-alignment"].url_suffix + JSON.stringify(searchQuery) : "");
+}
+function memberSummaryUrl(ei, groupProvenanceId) {
+    if (groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
+        return web_resources_json_1.default.rcsb_entry.url + ei.entryId.toLowerCase();
+    return web_resources_json_1.default.rcsb_entry.url + ei.entryId.toLowerCase() + "#entity-" + ei.entityId;
+}
+function member3DViewUrl(ei, groupProvenanceId) {
+    return web_resources_json_1.default.rcsb_3d_view.url + ei.entryId.toLowerCase();
+}
+function memberSummaryUrlText(ei, groupProvenanceId) {
+    if (groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
+        return ei.entryId;
+    return ei.entryId + TagDelimiter_1.TagDelimiter.entity + ei.entityId;
+}
+function hasGroup3D(groupProvenanceId) {
+    return groupProvenanceId !== DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId;
+}
+function imageIcon(ei) {
+    const isExperimental = ei.structureDeterminationMethodology === DwEnums_1.StructureDeterminationMethodology.Experimental;
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: "absolute",
+            top: "0.2em",
+            right: "0.2em"
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                width: 28,
+                height: 28,
+                fontSize: 18,
+                position: "relative",
+                display: "inline-block",
+                color: "#FFF",
+                borderRadius: 4,
+                backgroundColor: isExperimental ? "#325880" : "#05d0e7"
+            }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)"
+                }, className: `fa ${isExperimental ? "fa-flask" : "fa-desktop"}` }) }) }));
+}

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMembersGrid.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ItemFeaturesInterface } from "./GroupMemberItem";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+interface GroupMembersGridInterface {
+    groupProvenanceId: GroupProvenanceId;
+    groupId: string;
+    searchQuery?: SearchQuery;
+    index: number;
+    nRows: number;
+    nColumns: number;
+}
+interface GroupMembersGridState {
+    itemList: Array<ItemFeaturesInterface>;
+}
+export declare class GroupMembersGrid extends React.Component<GroupMembersGridInterface, GroupMembersGridState> {
+    readonly state: GroupMembersGridState;
+    render(): JSX.Element;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: GroupMembersGridInterface, prevState: GroupMembersGridState, snapshot?: any): Promise<void>;
+    private getMembersData;
+    private searchRequest;
+}
+export {};

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMembersGrid.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupMembersGrid = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GroupMemberItem_1 = require("./GroupMemberItem");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const SearchMetadata_1 = require("@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchMetadata");
+const SearchEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums");
+const DwEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums");
+const RcsbRequestContextManager_1 = require("../../../RcsbRequest/RcsbRequestContextManager");
+const uniqid_1 = tslib_1.__importDefault(require("uniqid"));
+const TagDelimiter_1 = require("@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter");
+class GroupMembersGrid extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            itemList: []
+        };
+    }
+    render() {
+        if (this.state.itemList.length > 0) {
+            return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Container, { fluid: "md", children: Array(this.props.nRows).fill(null).map((none, i) => ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { children: Array(this.props.nColumns).fill(null).map((none, j) => {
+                        const ei = this.state.itemList[i * this.props.nColumns + j];
+                        if (ei)
+                            return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { className: "p-0", children: (0, jsx_runtime_1.jsx)(GroupMemberItem_1.GroupMemberItem, { item: ei, groupId: this.props.groupId, groupProvenanceId: this.props.groupProvenanceId, searchQuery: this.props.searchQuery }) }, `${(0, uniqid_1.default)("col_")}_${j}`));
+                        else
+                            return null;
+                    }) }, `${(0, uniqid_1.default)("row_")}_${i}`))) }));
+        }
+        else
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    componentDidMount() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (this.state.itemList.length == 0)
+                yield this.getMembersData();
+        });
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (prevProps.index != this.props.index)
+                yield this.getMembersData();
+        });
+    }
+    getMembersData() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const searchResult = yield this.searchRequest();
+            if (!(searchResult === null || searchResult === void 0 ? void 0 : searchResult.result_set))
+                return;
+            const itemList = parseItems(this.props.groupProvenanceId, this.props.groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId ?
+                (yield RcsbRequestContextManager_1.rcsbRequestCtxManager.getEntryProperties(searchResult.result_set.map(m => typeof m === "string" ? m : m.identifier)))
+                :
+                    (yield RcsbRequestContextManager_1.rcsbRequestCtxManager.getEntityProperties(searchResult.result_set.map(m => typeof m === "string" ? m : m.identifier))));
+            const visited = new Set();
+            this.setState({
+                itemList: itemList
+                    .filter(ei => {
+                    const entityId = ei.entryId.toLowerCase() + TagDelimiter_1.TagDelimiter.entity + ei.entityId;
+                    if (visited.has(entityId))
+                        return false;
+                    visited.add(entityId);
+                    return true;
+                }).sort((a, b) => ((a.entryId + TagDelimiter_1.TagDelimiter.entity + a.entityId)).localeCompare(b.entryId + TagDelimiter_1.TagDelimiter.entity + b.entityId))
+            });
+        });
+    }
+    searchRequest() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            return yield searchRequest(this.props.groupProvenanceId, this.props.groupId, this.props.nRows * this.props.nColumns * this.props.index, this.props.nRows * this.props.nColumns, this.props.searchQuery);
+        });
+    }
+}
+exports.GroupMembersGrid = GroupMembersGrid;
+function searchRequest(groupProvenanceId, groupId, start, rows, searchQuery) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield RcsbRequestContextManager_1.rcsbRequestCtxManager.getSearchQuery({
+            query: (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.query) ? SearchQueryTools_1.SearchQueryTools.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query) : SearchQueryTools_1.SearchQueryTools.searchGroupQuery(groupProvenanceId, groupId),
+            request_options: {
+                paginate: {
+                    start: start,
+                    rows: rows
+                },
+                sort: [{
+                        sort_by: (_d = (_c = (_b = (_a = searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.request_options) === null || _a === void 0 ? void 0 : _a.group_by) === null || _b === void 0 ? void 0 : _b.ranking_criteria_type) === null || _c === void 0 ? void 0 : _c.sort_by) !== null && _d !== void 0 ? _d : SearchMetadata_1.RcsbSearchMetadata.RcsbEntryContainerIdentifiers.EntryId.path,
+                        direction: (_h = (_g = (_f = (_e = searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.request_options) === null || _e === void 0 ? void 0 : _e.group_by) === null || _f === void 0 ? void 0 : _f.ranking_criteria_type) === null || _g === void 0 ? void 0 : _g.direction) !== null && _h !== void 0 ? _h : SearchEnums_1.SortDirection.Asc
+                    }],
+                results_content_type: SearchQueryTools_1.SearchQueryTools.searchContentType(searchQuery)
+            },
+            return_type: groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId ? SearchEnums_1.ReturnType.Entry : SearchEnums_1.ReturnType.PolymerEntity
+        });
+    });
+}
+function parseItems(groupProvenanceId, propsList) {
+    return groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId ?
+        propsList.map((o) => (Object.assign(Object.assign({}, o), { molecularWeight: o.entryMolecularWeight })))
+        :
+            propsList.map((o) => (o.instances)).flat().map((o) => (Object.assign(Object.assign({}, o), { molecularWeight: o.entityMolecularWeight })));
+}

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/RcsbGroupMembersComponent.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { QueryResult } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchResultInterface";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+interface RcsbGroupMembersInterface {
+    groupProvenanceId: GroupProvenanceId;
+    groupId: string;
+    searchQuery?: SearchQuery;
+    nRows: number;
+    nColumns: number;
+}
+interface RcsbGroupMembersState {
+    nPages: number;
+    selectedIndex: number;
+    searchQuery?: SearchQuery;
+}
+export declare class RcsbGroupMembersComponent extends React.Component<RcsbGroupMembersInterface, RcsbGroupMembersState> {
+    readonly state: RcsbGroupMembersState;
+    readonly groupMembersDiv: string;
+    constructor(props: RcsbGroupMembersInterface);
+    render(): JSX.Element;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: Readonly<RcsbGroupMembersInterface>, prevState: Readonly<RcsbGroupMembersState>, snapshot?: any): Promise<void>;
+    private subscribe;
+    private updateSearchQuery;
+    private loadPages;
+    private searchRequest;
+    private slide;
+}
+export declare function searchRequest(groupProvenanceId: GroupProvenanceId, groupId: string, searchQuery?: SearchQuery): Promise<QueryResult | null>;
+export {};

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/RcsbGroupMembersComponent.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchRequest = exports.RcsbGroupMembersComponent = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const bootstrap_group_display_module_scss_1 = tslib_1.__importDefault(require("../../../scss/bootstrap-group-display.module.scss"));
+const GroupMembersGrid_1 = require("./GroupMembersGrid");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const SearchEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums");
+const Slider_1 = require("./Components/Slider");
+const DwEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums");
+const SearchQueryContextManager_1 = require("../RcsbGroupSeacrhQuery/SearchQueryContextManager");
+const RcsbRequestContextManager_1 = require("../../../RcsbRequest/RcsbRequestContextManager");
+class RcsbGroupMembersComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            nPages: 0,
+            selectedIndex: 0,
+            searchQuery: this.props.searchQuery
+        };
+        this.groupMembersDiv = "groupMembersDiv";
+    }
+    render() {
+        if (this.state.nPages > 0)
+            return ((0, jsx_runtime_1.jsx)("div", { id: this.groupMembersDiv, style: { minHeight: 627 }, className: `${bootstrap_group_display_module_scss_1.default.bootstrapGroupComponentScope}`, children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { slide: this.slide.bind(this), pages: this.state.nPages, currentPage: this.state.selectedIndex + 1, children: (0, jsx_runtime_1.jsx)(GroupMembersGrid_1.GroupMembersGrid, { groupProvenanceId: this.props.groupProvenanceId, groupId: this.props.groupId, nRows: this.props.nRows, nColumns: this.props.nColumns, index: this.state.selectedIndex, searchQuery: this.state.searchQuery }) }) }));
+        else
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    componentDidMount() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.subscribe();
+            if (this.state.nPages === 0)
+                yield this.loadPages();
+        });
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (this.state.nPages === 0)
+                yield this.loadPages();
+        });
+    }
+    subscribe() {
+        SearchQueryContextManager_1.SearchQueryContextManager.subscribe((o) => {
+            this.updateSearchQuery(o);
+        });
+    }
+    updateSearchQuery(sqData) {
+        this.setState({ searchQuery: sqData.searchQuery, nPages: 0, selectedIndex: 0 });
+    }
+    loadPages() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const searchResult = yield this.searchRequest();
+            if (!searchResult)
+                return;
+            const nPages = Math.ceil(searchResult.total_count / (this.props.nRows * this.props.nColumns));
+            this.setState({
+                nPages: nPages,
+                selectedIndex: 0
+            });
+        });
+    }
+    searchRequest() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            return yield searchRequest(this.props.groupProvenanceId, this.props.groupId, this.state.searchQuery);
+        });
+    }
+    slide(action) {
+        switch (action) {
+            case "next":
+                this.setState({ selectedIndex: mod(this.state.selectedIndex + 1, this.state.nPages) });
+                break;
+            case "prev":
+                this.setState({ selectedIndex: mod(this.state.selectedIndex - 1, this.state.nPages) });
+                break;
+        }
+    }
+}
+exports.RcsbGroupMembersComponent = RcsbGroupMembersComponent;
+function searchRequest(groupProvenanceId, groupId, searchQuery) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield RcsbRequestContextManager_1.rcsbRequestCtxManager.getSearchQuery({
+            query: searchQuery && searchQuery.query ? SearchQueryTools_1.SearchQueryTools.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query) : SearchQueryTools_1.SearchQueryTools.searchGroupQuery(groupProvenanceId, groupId),
+            request_options: {
+                return_counts: true,
+                results_content_type: SearchQueryTools_1.SearchQueryTools.searchContentType(searchQuery)
+            },
+            return_type: groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId ? SearchEnums_1.ReturnType.Entry : SearchEnums_1.ReturnType.PolymerEntity
+        });
+    });
+}
+exports.searchRequest = searchRequest;
+function mod(n, p) {
+    const r = n % p;
+    return r < 0 ? p + r : r;
+}

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/RcsbGroupSeacrhQueryComponent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+export declare class SearchQueryComponentFactory {
+    private static unique;
+    static getGroupSearchComponent(groupProvenanceId: GroupProvenanceId, groupId: string, searchQuery?: SearchQuery): JSX.Element;
+}

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/RcsbGroupSeacrhQueryComponent.js

@@ -0,0 +1,90 @@
+"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"));
+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.state = {
+            index: 0,
+            searchQueryList: [this.props.searchQuery]
+        };
+        SearchQueryContextManager_1.SearchQueryContextManager.setConfig(Object.assign({}, this.props));
+    }
+    render() {
+        return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { children: (0, jsx_runtime_1.jsx)("div", { className: "position-fixed", style: { zIndex: 1024, left: "calc(50% - 700px)", width: 120, top: "50%" }, 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", style: { height: 30 }, 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;
+        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 }
+        ]);
+    }
+}

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/SearchQueryContextManager.d.ts

@@ -0,0 +1,38 @@
+import { Subscription } from "rxjs";
+import { ChartMapType } from "../RcsbGroupChart/GroupChartLayout";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { ChartObjectInterface } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
+import { ReturnType } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { SearchQueryType } from "@rcsb/rcsb-search-tools/lib/SearchQueryTools/SearchQueryInterfaces";
+export interface SearchQueryContextManagerSubjectInterface {
+    attributeName: string;
+    chartMap: ChartMapType;
+    searchQuery?: SearchQuery;
+    groupId: string;
+    groupProvenanceId: GroupProvenanceId;
+}
+interface DataSubjectInterface {
+    attributeName: string;
+    chartMap: Map<string, ChartObjectInterface[][]>;
+}
+export declare class SearchQueryContextManager {
+    private static readonly searchQueryObservable;
+    private static readonly dataObservable;
+    private static readonly attributeList;
+    private static readonly currentSearchQuery;
+    private static readonly groupProvenanceId;
+    private static readonly groupId;
+    static setConfig(config: {
+        searchQuery?: SearchQuery;
+        groupProvenanceId?: GroupProvenanceId;
+        groupId?: string;
+    }): void;
+    static updateSearchQuery(attributeName: string, query: SearchQueryType, returnType: ReturnType): Promise<SearchQuery>;
+    static replaceSearchQuery(attributeName: string, searchQuery?: SearchQuery): Promise<void>;
+    static subscribe(f: (x: SearchQueryContextManagerSubjectInterface) => void, attr?: string): Subscription;
+    static dataSubscription(f: (x: DataSubjectInterface) => void, attr?: string): Subscription;
+    private static next;
+    static getAttributeList(): string[];
+}
+export {};

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/SearchQueryContextManager.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchQueryContextManager = void 0;
+const tslib_1 = require("tslib");
+const rxjs_1 = require("rxjs");
+const lodash_1 = require("lodash");
+const DataContainer_1 = require("../../../RcsbUtils/Helpers/DataContainer");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const GroupChartTools_1 = require("../RcsbGroupChart/GroupChartTools");
+class SearchQueryContextManager {
+    static setConfig(config) {
+        if (config.searchQuery)
+            SearchQueryContextManager.currentSearchQuery.set(config.searchQuery);
+        if (config.groupId)
+            SearchQueryContextManager.groupId.set(config.groupId);
+        if (config.groupProvenanceId)
+            SearchQueryContextManager.groupProvenanceId.set(config.groupProvenanceId);
+    }
+    static updateSearchQuery(attributeName, query, returnType) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const searchQuery = SearchQueryContextManager.currentSearchQuery.get();
+            const groupProvenanceId = SearchQueryContextManager.groupProvenanceId.get();
+            const groupId = SearchQueryContextManager.groupId.get();
+            if (!groupProvenanceId || !groupId)
+                throw new Error("Undefined group config");
+            const newQuery = searchQuery && searchQuery.query ?
+                SearchQueryTools_1.SearchQueryTools.buildNodeSearchQuery(searchQuery.query, query, returnType, SearchQueryTools_1.SearchQueryTools.searchContentType(searchQuery))
+                :
+                    SearchQueryTools_1.SearchQueryTools.buildSearchQuery(query, returnType);
+            const chartMap = yield GroupChartTools_1.GroupChartMap.getChartMap(groupProvenanceId, groupId, newQuery);
+            SearchQueryContextManager.next({
+                chartMap: chartMap,
+                attributeName: attributeName,
+                searchQuery: newQuery,
+                groupId: groupId,
+                groupProvenanceId: groupProvenanceId
+            });
+            if (!newQuery.query)
+                throw new Error("Search query error");
+            return SearchQueryTools_1.SearchQueryTools.buildSearchQuery(SearchQueryTools_1.SearchQueryTools.addGroupNodeToSearchQuery(groupProvenanceId, groupId, newQuery.query), returnType);
+        });
+    }
+    static replaceSearchQuery(attributeName, searchQuery) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const groupProvenanceId = SearchQueryContextManager.groupProvenanceId.get();
+            const groupId = SearchQueryContextManager.groupId.get();
+            if (!groupProvenanceId || !groupId)
+                return;
+            const chartMap = yield GroupChartTools_1.GroupChartMap.getChartMap(groupProvenanceId, groupId, searchQuery);
+            SearchQueryContextManager.next({
+                chartMap,
+                attributeName,
+                searchQuery,
+                groupId,
+                groupProvenanceId
+            });
+        });
+    }
+    static subscribe(f, attr) {
+        if (typeof attr === "string")
+            SearchQueryContextManager.attributeList.push(attr);
+        return SearchQueryContextManager.searchQueryObservable.subscribe({
+            next: (o) => {
+                f(o);
+            }
+        });
+    }
+    static dataSubscription(f, attr) {
+        return SearchQueryContextManager.dataObservable.subscribe({
+            next: (o) => {
+                f(o);
+            }
+        });
+    }
+    static next(o) {
+        this.currentSearchQuery.set(o.searchQuery);
+        SearchQueryContextManager.searchQueryObservable.next(o);
+        SearchQueryContextManager.dataObservable.next({
+            attributeName: o.attributeName,
+            chartMap: Array.from(o.chartMap.entries()).reduce((prev, [k, v]) => {
+                return prev.set(k, v.map(v => v.data));
+            }, new Map())
+        });
+    }
+    static getAttributeList() {
+        return (0, lodash_1.cloneDeep)(this.attributeList);
+    }
+}
+exports.SearchQueryContextManager = SearchQueryContextManager;
+SearchQueryContextManager.searchQueryObservable = new rxjs_1.Subject();
+SearchQueryContextManager.dataObservable = new rxjs_1.Subject();
+SearchQueryContextManager.attributeList = [];
+SearchQueryContextManager.currentSearchQuery = new DataContainer_1.DataContainer();
+SearchQueryContextManager.groupProvenanceId = new DataContainer_1.DataContainer();
+SearchQueryContextManager.groupId = new DataContainer_1.DataContainer();

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/RcsbResidueChartComponent.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChartMapType } from "../RcsbGroupChart/GroupChartLayout";
+import { ResidueChartInterface } from "./ResidueChartTools/ResidueChartTools";
+import { ChartDisplayConfigInterface } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
+interface RcsbResidueChartState {
+    layout: string[];
+    chartMap: ChartMapType;
+}
+export declare class RcsbResidueChartComponent extends React.Component<ResidueChartInterface & {
+    facetLayoutGrid?: string[];
+    chartDisplayConfig?: Partial<ChartDisplayConfigInterface>;
+}, RcsbResidueChartState> {
+    render(): JSX.Element;
+    componentDidMount(): Promise<void>;
+    private updateState;
+}
+export {};

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/RcsbResidueChartComponent.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcsbResidueChartComponent = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const GroupChartLayout_1 = require("../RcsbGroupChart/GroupChartLayout");
+const ResidueChartTools_1 = require("./ResidueChartTools/ResidueChartTools");
+const bootstrap_group_display_module_scss_1 = tslib_1.__importDefault(require("../../../scss/bootstrap-group-display.module.scss"));
+const FacetTools_1 = require("../../../RcsbSeacrh/FacetTools");
+class RcsbResidueChartComponent extends react_1.default.Component {
+    render() {
+        var _a, _b;
+        if ((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.flat().filter((e) => { var _a, _b; return ((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.chartMap) === null || _b === void 0 ? void 0 : _b.get(e)); })) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: bootstrap_group_display_module_scss_1.default.bootstrapComponentScope, children: (0, jsx_runtime_1.jsx)(GroupChartLayout_1.GroupChartLayout, { layout: this.state.layout, chartMap: this.state.chartMap }) }));
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    componentDidMount() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            yield this.updateState();
+        });
+    }
+    updateState() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const charts = (yield (yield ResidueChartTools_1.ResidueChartTools.getResidueDistribution(this.props)))
+                .filter(chart => (!this.props.facetLayoutGrid || this.props.facetLayoutGrid.includes(chart.attribute)))
+                .map(ch => { var _a; return FacetTools_1.FacetTools.addChartDisplayConfig(ch, (_a = this.props.chartDisplayConfig) !== null && _a !== void 0 ? _a : {}); });
+            this.setState({
+                layout: charts.map(c => c.attribute),
+                chartMap: charts.reduce((prev, curr) => (prev.set(curr.attribute, [curr])), new Map())
+            });
+        });
+    }
+}
+exports.RcsbResidueChartComponent = RcsbResidueChartComponent;