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

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

@@ -0,0 +1,98 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { GroupMemberItem } from "./GroupMemberItem";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { RcsbSearchMetadata } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchMetadata";
+import { ReturnType, SortDirection } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { rcsbRequestCtxManager } from "../../../RcsbRequest/RcsbRequestContextManager";
+import uniqid from "uniqid";
+import { TagDelimiter } from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
+export class GroupMembersGrid extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            itemList: []
+        };
+    }
+    render() {
+        if (this.state.itemList.length > 0) {
+            return (_jsx(Container, { fluid: "md", children: Array(this.props.nRows).fill(null).map((none, i) => (_jsx(Row, { children: Array(this.props.nColumns).fill(null).map((none, j) => {
+                        const ei = this.state.itemList[i * this.props.nColumns + j];
+                        if (ei)
+                            return (_jsx(Col, { className: "p-0", children: _jsx(GroupMemberItem, { item: ei, groupId: this.props.groupId, groupProvenanceId: this.props.groupProvenanceId, searchQuery: this.props.searchQuery }) }, `${uniqid("col_")}_${j}`));
+                        else
+                            return null;
+                    }) }, `${uniqid("row_")}_${i}`))) }));
+        }
+        else
+            return _jsx(_Fragment, {});
+    }
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.itemList.length == 0)
+                yield this.getMembersData();
+        });
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (prevProps.index != this.props.index)
+                yield this.getMembersData();
+        });
+    }
+    getMembersData() {
+        return __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 === GroupProvenanceId.ProvenanceMatchingDepositGroupId ?
+                (yield rcsbRequestCtxManager.getEntryProperties(searchResult.result_set.map(m => typeof m === "string" ? m : m.identifier)))
+                :
+                    (yield 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.entity + ei.entityId;
+                    if (visited.has(entityId))
+                        return false;
+                    visited.add(entityId);
+                    return true;
+                }).sort((a, b) => ((a.entryId + TagDelimiter.entity + a.entityId)).localeCompare(b.entryId + TagDelimiter.entity + b.entityId))
+            });
+        });
+    }
+    searchRequest() {
+        return __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);
+        });
+    }
+}
+function searchRequest(groupProvenanceId, groupId, start, rows, searchQuery) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield rcsbRequestCtxManager.getSearchQuery({
+            query: (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.query) ? SQT.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query) : SQT.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 : 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 : SortDirection.Asc
+                    }],
+                results_content_type: SQT.searchContentType(searchQuery)
+            },
+            return_type: groupProvenanceId === GroupProvenanceId.ProvenanceMatchingDepositGroupId ? ReturnType.Entry : ReturnType.PolymerEntity
+        });
+    });
+}
+function parseItems(groupProvenanceId, propsList) {
+    return groupProvenanceId === 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/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/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/RcsbGroupMembersComponent.js

@@ -0,0 +1,92 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import classes from "../../../scss/bootstrap-group-display.module.scss";
+import { GroupMembersGrid } from "./GroupMembersGrid";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { ReturnType } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { Slider } from "./Components/Slider";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQueryContextManager as SQCM } from "../RcsbGroupSeacrhQuery/SearchQueryContextManager";
+import { rcsbRequestCtxManager } from "../../../RcsbRequest/RcsbRequestContextManager";
+export class RcsbGroupMembersComponent extends React.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 (_jsx("div", { id: this.groupMembersDiv, style: { minHeight: 627 }, className: `${classes.bootstrapGroupComponentScope}`, children: _jsx(Slider, { slide: this.slide.bind(this), pages: this.state.nPages, currentPage: this.state.selectedIndex + 1, children: _jsx(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 _jsx(_Fragment, {});
+    }
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.subscribe();
+            if (this.state.nPages === 0)
+                yield this.loadPages();
+        });
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.nPages === 0)
+                yield this.loadPages();
+        });
+    }
+    subscribe() {
+        SQCM.subscribe((o) => {
+            this.updateSearchQuery(o);
+        });
+    }
+    updateSearchQuery(sqData) {
+        this.setState({ searchQuery: sqData.searchQuery, nPages: 0, selectedIndex: 0 });
+    }
+    loadPages() {
+        return __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 __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;
+        }
+    }
+}
+export function searchRequest(groupProvenanceId, groupId, searchQuery) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield rcsbRequestCtxManager.getSearchQuery({
+            query: searchQuery && searchQuery.query ? SQT.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query) : SQT.searchGroupQuery(groupProvenanceId, groupId),
+            request_options: {
+                return_counts: true,
+                results_content_type: SQT.searchContentType(searchQuery)
+            },
+            return_type: groupProvenanceId === GroupProvenanceId.ProvenanceMatchingDepositGroupId ? ReturnType.Entry : ReturnType.PolymerEntity
+        });
+    });
+}
+function mod(n, p) {
+    const r = n % p;
+    return r < 0 ? p + r : r;
+}

package/lib/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/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/RcsbGroupSeacrhQueryComponent.js

@@ -0,0 +1,86 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { actionIcon } from "../RcsbGroupMembers/Components/Slider";
+import { SearchQueryContextManager as SQCM } from "./SearchQueryContextManager";
+import { UrlTools } from "../../../RcsbUtils/Helpers/UrlTools";
+import Draggable from 'react-draggable';
+export class SearchQueryComponentFactory {
+    static getGroupSearchComponent(groupProvenanceId, groupId, searchQuery) {
+        if (SearchQueryComponentFactory.unique) {
+            SearchQueryComponentFactory.unique = false;
+            return _jsx(RcsbGroupSearchQueryComponent, { groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: searchQuery });
+        }
+        else {
+            return _jsx(_Fragment, {});
+        }
+    }
+}
+SearchQueryComponentFactory.unique = true;
+class RcsbGroupSearchQueryComponent extends React.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]
+        };
+        SQCM.setConfig(Object.assign({}, this.props));
+    }
+    render() {
+        return (_jsx(Draggable, { children: _jsx("div", { className: "position-fixed", style: { zIndex: 1024, left: "calc(50% - 700px)", width: 120, top: "50%" }, children: _jsxs("div", { className: "border px-1 pt-1 shadow bg-white", children: [_jsx("div", { className: "text-center py-2 bg-secondary bg-gradient text-white", style: { cursor: "grab" }, children: "Query History" }), _jsxs("div", { className: "d-flex flex-row", style: { height: 30 }, children: [_jsx("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(-1), children: actionIcon("prev") }), _jsxs("div", { className: "text-center text-nowrap flex-grow-1 my-auto", children: [this.state.index + 1, " / ", this.state.searchQueryList.length] }), _jsx("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(+1), children: actionIcon("next") })] })] }) }) }));
+    }
+    componentDidMount() {
+        this.subscribe();
+        this.checkUrlState();
+    }
+    componentWillUnmount() {
+        this.unsubscribe();
+    }
+    unsubscribe() {
+        this.subscription.unsubscribe();
+    }
+    subscribe() {
+        this.subscription = SQCM.subscribe((o) => {
+            this.addSearchQuery(o);
+        });
+    }
+    checkUrlState() {
+        const urlParams = 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)
+                SQCM.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 __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 }, () => __awaiter(this, void 0, void 0, function* () {
+                    this.encodeUrlParameters(this.state.searchQueryList[this.state.index]);
+                    yield SQCM.replaceSearchQuery(this.COMPONENT_NAME, this.state.searchQueryList[this.state.index]);
+                }));
+            }
+        });
+    }
+    encodeUrlParameters(query) {
+        UrlTools.encodeUrlParameterList([
+            { key: this.URL_REQUEST_PARAMETER_NAME, value: query },
+            { key: this.URL_STATE_PARAMETER_NAME, value: this.state }
+        ]);
+    }
+}

package/lib/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/RcsbGroupWeb/RcsbGroupView/RcsbGroupSeacrhQuery/SearchQueryContextManager.js

@@ -0,0 +1,91 @@
+import { __awaiter } from "tslib";
+import { Subject } from "rxjs";
+import { cloneDeep } from "lodash";
+import { DataContainer } from "../../../RcsbUtils/Helpers/DataContainer";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { GroupChartMap as GDCM } from "../RcsbGroupChart/GroupChartTools";
+export 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 __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 ?
+                SQT.buildNodeSearchQuery(searchQuery.query, query, returnType, SQT.searchContentType(searchQuery))
+                :
+                    SQT.buildSearchQuery(query, returnType);
+            const chartMap = yield GDCM.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 SQT.buildSearchQuery(SQT.addGroupNodeToSearchQuery(groupProvenanceId, groupId, newQuery.query), returnType);
+        });
+    }
+    static replaceSearchQuery(attributeName, searchQuery) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const groupProvenanceId = SearchQueryContextManager.groupProvenanceId.get();
+            const groupId = SearchQueryContextManager.groupId.get();
+            if (!groupProvenanceId || !groupId)
+                return;
+            const chartMap = yield GDCM.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 cloneDeep(this.attributeList);
+    }
+}
+SearchQueryContextManager.searchQueryObservable = new Subject();
+SearchQueryContextManager.dataObservable = new Subject();
+SearchQueryContextManager.attributeList = [];
+SearchQueryContextManager.currentSearchQuery = new DataContainer();
+SearchQueryContextManager.groupProvenanceId = new DataContainer();
+SearchQueryContextManager.groupId = new DataContainer();

package/lib/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/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/RcsbResidueChartComponent.js

@@ -0,0 +1,32 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { GroupChartLayout } from "../RcsbGroupChart/GroupChartLayout";
+import { ResidueChartTools as RCT } from "./ResidueChartTools/ResidueChartTools";
+import classes from "../../../scss/bootstrap-group-display.module.scss";
+import { FacetTools } from "../../../RcsbSeacrh/FacetTools";
+export class RcsbResidueChartComponent extends React.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 (_jsx("div", { className: classes.bootstrapComponentScope, children: _jsx(GroupChartLayout, { layout: this.state.layout, chartMap: this.state.chartMap }) }));
+        }
+        return _jsx(_Fragment, {});
+    }
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.updateState();
+        });
+    }
+    updateState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const charts = (yield (yield RCT.getResidueDistribution(this.props)))
+                .filter(chart => (!this.props.facetLayoutGrid || this.props.facetLayoutGrid.includes(chart.attribute)))
+                .map(ch => { var _a; return 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())
+            });
+        });
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/DistributionChartFactoryImpl/DistributionChartFactory.d.ts

@@ -0,0 +1,8 @@
+import { DistributionChartFactoryInterface, ResidueDistributionInterface } from "../ResidueDistributionFactoryInterface";
+import { RcsbChartInterface } from "../../../../../RcsbSeacrh/FacetTools";
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+export declare class DistributionChartFactory implements DistributionChartFactoryInterface {
+    private readonly distributionConfig;
+    constructor(distributionConfig?: RcsbDistributionConfig);
+    getChart(residueDistribution: ResidueDistributionInterface): RcsbChartInterface;
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/DistributionChartFactoryImpl/DistributionChartFactory.js

@@ -0,0 +1,34 @@
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+import { Operator } from "../../../../../RcsbUtils/Helpers/Operator";
+import { ChartType } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
+export class DistributionChartFactory {
+    constructor(distributionConfig) {
+        this.distributionConfig = distributionConfig !== null && distributionConfig !== void 0 ? distributionConfig : new RcsbDistributionConfig();
+    }
+    getChart(residueDistribution) {
+        var _a, _b;
+        const sort = (_a = this.distributionConfig.getBlockConfig(residueDistribution.attribute)) === null || _a === void 0 ? void 0 : _a.sort;
+        const axisLabel = (_b = this.distributionConfig.getBlockConfig(residueDistribution.attribute)) === null || _b === void 0 ? void 0 : _b.axisLabel;
+        return {
+            chartType: ChartType.barplot,
+            attribute: residueDistribution.attribute,
+            attributeName: residueDistribution.attribute,
+            contentType: "number",
+            data: residueDistribution.buckets.map(b => ({
+                label: b.label,
+                population: b.residueSet.size,
+                objectConfig: {
+                    color: b.color,
+                    objectId: b.id
+                }
+            })),
+            title: residueDistribution.title,
+            chartConfig: {
+                sort: sort ? (a, b) => (sort.findIndex(x => x === a.x) - sort.findIndex(x => x === b.x)) : undefined,
+                tooltipText: (d) => (`${Operator.digitGrouping(d.y)} residues`),
+                axisLabel,
+                domainEmptyBins: true
+            }
+        };
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/ResidueDistributionFactoryImpl/MultipleTrackDistributionFactory.d.ts

@@ -0,0 +1,8 @@
+import { ResidueDistributionFactoryInterface, ResidueDistributionInterface } from "../ResidueDistributionFactoryInterface";
+import { TrackManagerInterface } from "../../../../../RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockManager/TrackManagerInterface";
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+export declare class MultipleTrackDistributionFactory implements ResidueDistributionFactoryInterface<[string, number]> {
+    private readonly distributionConfig;
+    constructor(distributionConfig?: RcsbDistributionConfig);
+    getDistribution(tracks: TrackManagerInterface[], blockType: string, numberResidues: number): ResidueDistributionInterface;
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/ResidueDistributionFactoryImpl/MultipleTrackDistributionFactory.js

@@ -0,0 +1,32 @@
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+import { range } from "lodash";
+import { Assertions } from "../../../../../RcsbUtils/Helpers/Assertions";
+var assertDefined = Assertions.assertDefined;
+export class MultipleTrackDistributionFactory {
+    constructor(distributionConfig) {
+        this.distributionConfig = distributionConfig !== null && distributionConfig !== void 0 ? distributionConfig : new RcsbDistributionConfig();
+    }
+    getDistribution(tracks, blockType, numberResidues) {
+        const undefResidues = new Set(range(1, numberResidues + 1));
+        const blockConfig = this.distributionConfig.getBlockConfig(blockType);
+        assertDefined(blockConfig);
+        const undefTrack = blockConfig.undefTrack;
+        return {
+            attribute: blockConfig.type,
+            title: blockConfig.title,
+            buckets: tracks.map(track => {
+                const trackConfig = this.distributionConfig.getTrackConfig(track.getId());
+                assertDefined(trackConfig), assertDefined(trackConfig.label), assertDefined(trackConfig === null || trackConfig === void 0 ? void 0 : trackConfig.color);
+                return {
+                    label: trackConfig.label,
+                    color: trackConfig.color,
+                    id: trackConfig.type,
+                    residueSet: new Set(track.values().reduce((prev, curr) => { var _a; return (prev.concat(range(curr.begin, ((_a = curr.end) !== null && _a !== void 0 ? _a : curr.begin) + 1))); }, []).map(n => {
+                        undefResidues.delete(n);
+                        return n;
+                    }))
+                };
+            }).concat(undefTrack && undefResidues.size > 0 ? [Object.assign(Object.assign({}, undefTrack), { residueSet: undefResidues })] : [])
+        };
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/ResidueDistributionFactoryImpl/NumericalTrackDistributionFactory.d.ts

@@ -0,0 +1,8 @@
+import { ResidueDistributionFactoryInterface, ResidueDistributionInterface } from "../ResidueDistributionFactoryInterface";
+import { TrackManagerInterface } from "../../../../../RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockManager/TrackManagerInterface";
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+export declare class NumericalTrackDistributionFactory implements ResidueDistributionFactoryInterface<[string, number]> {
+    private readonly distributionConfig;
+    constructor(distributionConfig?: RcsbDistributionConfig);
+    getDistribution(tracks: [TrackManagerInterface], blockType: string, numberResidues: number): ResidueDistributionInterface;
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/ResidueDistributionFactoryImpl/NumericalTrackDistributionFactory.js

@@ -0,0 +1,37 @@
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+import { range } from "lodash";
+import { Assertions } from "../../../../../RcsbUtils/Helpers/Assertions";
+var assertDefined = Assertions.assertDefined;
+export class NumericalTrackDistributionFactory {
+    constructor(distributionConfig) {
+        this.distributionConfig = distributionConfig !== null && distributionConfig !== void 0 ? distributionConfig : new RcsbDistributionConfig();
+    }
+    getDistribution(tracks, blockType, numberResidues) {
+        var _a;
+        const track = tracks[0];
+        const numericalCategories = (_a = this.distributionConfig.getTrackConfig(track.getId())) === null || _a === void 0 ? void 0 : _a.numericalCategories;
+        assertDefined(numericalCategories);
+        const bucketMap = new Map();
+        const undefResidues = new Set(range(1, numberResidues + 1));
+        numericalCategories.categories.forEach(category => {
+            const label = category.label;
+            bucketMap.set(label, Object.assign(Object.assign({}, category), { residueSet: new Set() }));
+        });
+        track.forEach(ann => {
+            var _a;
+            let index = numericalCategories.thresholds.findIndex((x) => { var _a; return x >= ((_a = ann.value) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER); });
+            if (index < 0)
+                index = numericalCategories.thresholds.length;
+            const label = numericalCategories.categories[index].label;
+            (_a = bucketMap.get(label)) === null || _a === void 0 ? void 0 : _a.residueSet.add(ann.begin);
+            undefResidues.delete(ann.begin);
+        });
+        const bc = this.distributionConfig.getBlockConfig(blockType);
+        assertDefined(bc);
+        return {
+            attribute: bc.type,
+            title: bc.title,
+            buckets: Array.from(bucketMap.values()).concat(bc.undefTrack && undefResidues.size > 0 ? [Object.assign(Object.assign({}, bc.undefTrack), { residueSet: undefResidues })] : [])
+        };
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbResidueChart/ResidueChartFactories/ResidueDistributionFactoryImpl/TrackDistributionFactory.d.ts

@@ -0,0 +1,10 @@
+import { ResidueDistributionFactoryInterface, ResidueDistributionInterface } from "../ResidueDistributionFactoryInterface";
+import { RcsbDistributionConfig } from "../../../../../RcsbAnnotationConfig/RcsbDistributionConfig";
+import { TrackManagerInterface } from "../../../../../RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockManager/TrackManagerInterface";
+export declare class TrackDistributionFactory implements ResidueDistributionFactoryInterface<[string, number]> {
+    private readonly distributionConfig;
+    private readonly multipleTrackDistributionFactory;
+    private readonly numericalTrackDistributionFactory;
+    constructor(distributionConfig?: RcsbDistributionConfig);
+    getDistribution(tracks: TrackManagerInterface[], blockType: string, numberResidues: number): ResidueDistributionInterface | undefined;
+}