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

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartLayout.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import uniqid from "uniqid";
+import { ChartType } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
+import { HistogramChartComponent } from "../../../RcsbChartWeb/HistogramChartComponent";
+import { BarChartComponent } from "../../../RcsbChartWeb/BarChartComponent";
+import { ChartTools } from "@rcsb/rcsb-charts/lib/RcsbChartDataProvider/ChartTools";
+export class GroupChartLayout extends React.Component {
+    render() {
+        return (_jsx(Container, { fluid: "md", children: _jsx(Row, { children: this.props.layout.filter(attr => {
+                    var _a, _b;
+                    return ((_b = (_a = this.props.chartMap.get(attr)) === null || _a === void 0 ? void 0 : _a.filter(ch => ch.data.length > 0)) !== null && _b !== void 0 ? _b : []).length > 0;
+                }).map((attr) => this.renderCell(attr)) }) }));
+    }
+    renderCell(attr) {
+        var _a;
+        const chart = this.props.chartMap.get(attr);
+        if (chart && chart.filter(ch => ch.data.length > 0).length > 0) {
+            const node = chart[0].chartType == ChartType.histogram ? histogramChart(attr, chart) : barChart(attr, chart);
+            return chartCell(node, chart[0].title, (_a = chart[0].chartConfig) === null || _a === void 0 ? void 0 : _a.chartDisplayConfig);
+        }
+        return _jsx(_Fragment, {});
+    }
+}
+function chartCell(chartNode, title, chartDisplayConfig) {
+    return (_jsx(Col, { children: _jsx(Row, { className: "mb-md-5", children: _jsxs(Col, { md: 12, children: [_jsx(Row, { className: "mb-md-2", children: _jsx(Col, { md: 12, style: { paddingLeft: ChartTools.getConfig("paddingLeft", chartDisplayConfig) + ChartTools.getConfig("xDomainPadding", chartDisplayConfig) }, children: _jsx("strong", { children: title }) }) }), _jsx(Row, { children: _jsx(Col, { md: 12, children: chartNode }) })] }) }) }, `${title}_${uniqid()}`));
+}
+function histogramChart(attributeName, chart) {
+    return (_jsx("div", { id: `chart:${chart[0].labelList ? chart[0].labelList.join("-") + chart[0].attribute : chart[0].attribute}`, children: _jsx(HistogramChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
+}
+function barChart(attributeName, chart) {
+    return (_jsx("div", { id: `chart:${chart[0].labelList ? chart[0].labelList.join("-") + chart[0].attribute : chart[0].attribute}`, children: _jsx(BarChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartTools.d.ts

@@ -0,0 +1,7 @@
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { ChartMapType } from "./GroupChartLayout";
+export declare namespace GroupChartMap {
+    type ChartObjectIdType = "included" | "excluded";
+    function getChartMap(groupProvenanceId: GroupProvenanceId, groupId: string, searchQuery?: SearchQuery): Promise<ChartMapType>;
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartTools.js

@@ -0,0 +1,91 @@
+import { __awaiter } from "tslib";
+import { groupProvenanceToReturnType } from "../../../RcsbUtils/Groups/GroupProvenanceToAggregationType";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { FacetTools } from "../../../RcsbSeacrh/FacetTools";
+import { cloneDeep } from "lodash";
+import { GroupChartEvents as GDE } from "./GroupChartEvents";
+import { rcsbRequestCtxManager } from "../../../RcsbRequest/RcsbRequestContextManager";
+export var GroupChartMap;
+(function (GroupChartMap) {
+    function getChartMap(groupProvenanceId, groupId, searchQuery) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const facetStore = SQT.getFacetStoreFromGroupProvenance(groupProvenanceId);
+            let facets = [];
+            for (const service of facetStore.getServices()) {
+                const groupQuery = SQT.searchGroupQuery(groupProvenanceId, groupId, service);
+                const groupProperties = yield rcsbRequestCtxManager.getSearchQueryFacets(groupQuery, facetStore.getFacetService(service).map(f => f.facet), facetStore.returnType, SQT.searchContentType(searchQuery));
+                if (groupProperties)
+                    facets = facets.concat(groupProperties.facets);
+            }
+            let chartData = FacetTools.getResultDrilldowns(facetStore.getFacetService("all"), facets);
+            let subData = [];
+            if (searchQuery) {
+                const searchData = yield subtractSearchQuery(chartData, groupProvenanceId, groupId, searchQuery);
+                chartData = searchData.chartData;
+                subData = (_a = searchData.subData) !== null && _a !== void 0 ? _a : [];
+            }
+            addCharMapColor("#5e94c3", chartData);
+            addCharMapIds("included", chartData);
+            addCharMapColor("#d0d0d0", subData);
+            addCharMapIds("excluded", subData);
+            chartData.forEach((chart => {
+                GDE.addBarClickCallback(chart, groupProvenanceToReturnType[groupProvenanceId]);
+                GDE.addTooltipText(chart);
+            }));
+            return chartData.reduce((prev, current) => {
+                var _a;
+                prev.set(current.attributeName, [current]);
+                const comp = subData === null || subData === void 0 ? void 0 : subData.find((c) => (c.attributeName === current.attributeName));
+                if (comp)
+                    (_a = prev.get(current.attributeName)) === null || _a === void 0 ? void 0 : _a.push(comp);
+                return prev;
+            }, new Map());
+        });
+    }
+    GroupChartMap.getChartMap = getChartMap;
+    function subtractSearchQuery(chartData, groupProvenanceId, groupId, searchQuery) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const facetStore = SQT.getFacetStoreFromGroupProvenance(groupProvenanceId);
+            let subData;
+            let partialFacets = [];
+            for (const service of facetStore.getServices()) {
+                if (searchQuery.query) {
+                    const groupQuery = SQT.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query, service);
+                    const groupProperties = yield rcsbRequestCtxManager.getSearchQueryFacets(groupQuery, facetStore.getFacetService(service).map(f => f.facet), facetStore.returnType, (_b = (_a = searchQuery.request_options) === null || _a === void 0 ? void 0 : _a.results_content_type) !== null && _b !== void 0 ? _b : ["computational", "experimental"]);
+                    if (groupProperties)
+                        partialFacets = partialFacets.concat(groupProperties.facets);
+                }
+            }
+            let partialData = cloneDeep(chartData);
+            if (partialFacets.length > 0) {
+                partialData = FacetTools.getResultDrilldowns(facetStore.getFacetService("all"), partialFacets);
+                subData = FacetTools.subtractDrilldowns(partialData, chartData);
+            }
+            else {
+                subData = cloneDeep(chartData);
+                partialData.forEach(chart => {
+                    chart.data.forEach(d => {
+                        d.population = 0;
+                    });
+                });
+            }
+            return { chartData: partialData, subData: subData };
+        });
+    }
+    function addCharMapColor(color, char) {
+        char.forEach(ch => {
+            ch.data.forEach(d => {
+                d.objectConfig = Object.assign(Object.assign({}, d.objectConfig), { color });
+            });
+        });
+    }
+    function addCharMapIds(id, char) {
+        char.forEach(ch => {
+            ch.data.forEach(d => {
+                d.objectConfig = Object.assign(Object.assign({}, d.objectConfig), { objectId: id });
+            });
+        });
+    }
+})(GroupChartMap || (GroupChartMap = {}));

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbGroupChartComponent.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ChartMapType } from "./GroupChartLayout";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { GroupChartAdditionalProperties } from "./GroupChartAdditionalProperties";
+interface RcsbGroupChartInterface {
+    groupProvenanceId: GroupProvenanceId;
+    groupId: string;
+    searchQuery?: SearchQuery;
+    facetLayoutGrid?: string[];
+    additionalProperties?: GroupChartAdditionalProperties;
+}
+interface RcsbGroupChartState {
+    layout?: string[];
+    chartMap?: ChartMapType;
+}
+export declare class RcsbGroupChartComponent extends React.Component<RcsbGroupChartInterface, RcsbGroupChartState> {
+    componentDidMount(): Promise<void>;
+    render(): JSX.Element;
+    private updateState;
+}
+export {};

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbGroupChartComponent.js

@@ -0,0 +1,49 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { GroupChartLayout } from "./GroupChartLayout";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { GroupChartMap as GDCM } from "./GroupChartTools";
+import classes from "../../../scss/bootstrap-group-display.module.scss";
+import { SearchQueryComponentFactory } from "../RcsbGroupSeacrhQuery/RcsbGroupSeacrhQueryComponent";
+//TODO include chartDisplayConfig?: Partial<ChartDisplayConfigInterface> in props and propagate it
+export class RcsbGroupChartComponent extends React.Component {
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.updateState();
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        if (((_a = this.state) === null || _a === void 0 ? void 0 : _a.layout) && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.chartMap) && ((_e = (_d = (_c = this.state) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.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)); })) !== null && _e !== void 0 ? _e : []).length > 0) {
+            return (_jsxs("div", { className: classes.bootstrapGroupComponentScope, children: [SearchQueryComponentFactory.getGroupSearchComponent(this.props.groupProvenanceId, this.props.groupId, this.props.searchQuery), _jsx(GroupChartLayout, { layout: this.state.layout, chartMap: this.state.chartMap })] }));
+        }
+        else {
+            return _jsx(_Fragment, {});
+        }
+    }
+    updateState() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            const layout = (_a = this.props.facetLayoutGrid) !== null && _a !== void 0 ? _a : SQT.getFacetStoreFromGroupProvenance(this.props.groupProvenanceId).facetLayoutGrid;
+            const chartMap = yield GDCM.getChartMap(this.props.groupProvenanceId, this.props.groupId, this.props.searchQuery);
+            if ((_b = this.props.additionalProperties) === null || _b === void 0 ? void 0 : _b.layoutConfig)
+                applyLayoutConfig(layout, chartMap, (_c = this.props.additionalProperties) === null || _c === void 0 ? void 0 : _c.layoutConfig);
+            this.setState({ layout, chartMap }, () => {
+                var _a;
+                if (typeof ((_a = this.props.additionalProperties) === null || _a === void 0 ? void 0 : _a.componentMountCallback) === "function")
+                    this.props.additionalProperties.componentMountCallback(this.state.chartMap, this.state.layout);
+            });
+        });
+    }
+}
+function applyLayoutConfig(layout, chartMap, layoutConfig) {
+    layout.forEach(attr => {
+        var _a;
+        if (chartMap.has(attr) && layoutConfig[attr]) {
+            const o = (_a = chartMap.get(attr)) === null || _a === void 0 ? void 0 : _a[0];
+            if (o)
+                o.title = layoutConfig[attr].title;
+        }
+    });
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbStatsChartComponent.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { FacetStoreInterface } from "../../../RcsbSeacrh/FacetStore/FacetStoreInterface";
+import { BucketFacet } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchResultInterface";
+import { ReturnType } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+interface RcsbStatsChartInterface {
+    facetStore: FacetStoreInterface;
+    searchQuery: SearchQuery;
+    returnType: ReturnType;
+}
+interface RcsbStatsChartState {
+    facets: Array<BucketFacet>;
+}
+export declare class RcsbStatsChartComponent extends React.Component<RcsbStatsChartInterface, RcsbStatsChartState> {
+    componentDidMount(): Promise<void>;
+    render(): JSX.Element;
+    private updateState;
+}
+export {};

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbStatsChartComponent.js

@@ -0,0 +1,36 @@
+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 { GroupChartLayout } from "./GroupChartLayout";
+import { FacetTools } from "../../../RcsbSeacrh/FacetTools";
+import { rcsbRequestCtxManager } from "../../../RcsbRequest/RcsbRequestContextManager";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+export class RcsbStatsChartComponent extends React.Component {
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.updateState();
+        });
+    }
+    render() {
+        var _a;
+        if ((_a = this.state) === null || _a === void 0 ? void 0 : _a.facets)
+            return (_jsx("div", { className: classes.bootstrapComponentScope, children: _jsx(GroupChartLayout, { layout: this.props.facetStore.facetLayoutGrid, chartMap: FacetTools.getResultDrilldowns(this.props.facetStore.getFacetService("all"), this.state.facets).reduce((prev, current) => {
+                        return prev.set(current.attribute, [current]);
+                    }, new Map()) }) }));
+        return _jsx(_Fragment, {});
+    }
+    updateState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let facets = [];
+            for (const service of this.props.facetStore.getServices()) {
+                if (this.props.searchQuery.query) {
+                    const groupProperties = yield rcsbRequestCtxManager.getSearchQueryFacets(this.props.searchQuery.query, this.props.facetStore.getFacetService(service).map(f => f.facet), this.props.facetStore.returnType, SQT.searchContentType(this.props.searchQuery));
+                    if (groupProperties === null || groupProperties === void 0 ? void 0 : groupProperties.facets)
+                        facets = facets.concat(groupProperties.facets);
+                }
+            }
+            this.setState({ facets });
+        });
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupContent/RcsbGroupContentComponent.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+interface RcsbGroupContentInterface extends RcsbGroupContentTextInterface {
+    groupProvenanceId: GroupProvenanceId;
+    groupId: string;
+    searchQuery?: SearchQuery;
+}
+export interface RcsbGroupContentTextInterface {
+    subGroupText?: string;
+    delimiterText?: string;
+    fullGroupText?: string;
+    completeGroupText?: string;
+    displayNumber?(x: number): string;
+}
+interface RcsbGroupContentState {
+    subGroupMembers: number;
+    fullGroupMembers: number;
+    searchQuery?: SearchQuery;
+}
+export declare class RcsbGroupContentComponent extends React.Component<RcsbGroupContentInterface, RcsbGroupContentState> {
+    readonly state: RcsbGroupContentState;
+    componentDidMount(): Promise<void>;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private subscribe;
+    private displayNumber;
+    private updateGroupContent;
+    private href;
+}
+export {};

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupContent/RcsbGroupContentComponent.js

@@ -0,0 +1,76 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { searchRequest } from "../RcsbGroupMembers/RcsbGroupMembersComponent";
+import { SearchQueryContextManager as SQCM } from "../RcsbGroupSeacrhQuery/SearchQueryContextManager";
+import resource from "../../../RcsbServerConfig/web.resources.json";
+import { SearchQueryTools as SQT } from "../../../RcsbSeacrh/SearchQueryTools";
+import { groupProvenanceToReturnType } from "../../../RcsbUtils/Groups/GroupProvenanceToAggregationType";
+import { RelevanceScoreRankingOption, ScoringStrategy, Service, SortDirection } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { Operator } from "../../../RcsbUtils/Helpers/Operator";
+export class RcsbGroupContentComponent extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            subGroupMembers: 0,
+            fullGroupMembers: 0,
+            searchQuery: this.props.searchQuery
+        };
+    }
+    componentDidMount() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.subscribe();
+            const fullGroupMembers = (_a = (yield searchRequest(this.props.groupProvenanceId, this.props.groupId))) === null || _a === void 0 ? void 0 : _a.total_count;
+            const subGroupMembers = (_b = (yield searchRequest(this.props.groupProvenanceId, this.props.groupId, this.props.searchQuery))) === null || _b === void 0 ? void 0 : _b.total_count;
+            if (fullGroupMembers && subGroupMembers)
+                this.setState({ subGroupMembers, fullGroupMembers });
+        });
+    }
+    render() {
+        var _a;
+        if (this.state.subGroupMembers === this.state.fullGroupMembers)
+            return (_jsxs("span", { children: [(_a = this.props.completeGroupText) !== null && _a !== void 0 ? _a : "", " ", _jsx("a", { href: this.href().fullGroup, children: this.displayNumber(this.state.fullGroupMembers) })] }));
+        else
+            return (_jsxs("span", { children: [this.props.subGroupText ? this.props.subGroupText + " " : "", _jsx("a", { href: this.href().subGroup, children: this.displayNumber(this.state.subGroupMembers) }), this.props.delimiterText ? " " + this.props.delimiterText + " " : " / ", _jsx("a", { href: this.href().fullGroup, children: this.displayNumber(this.state.fullGroupMembers) }), this.props.fullGroupText ? " " + this.props.fullGroupText : ""] }));
+    }
+    subscribe() {
+        SQCM.subscribe((o) => __awaiter(this, void 0, void 0, function* () {
+            yield this.updateGroupContent(o);
+        }));
+    }
+    displayNumber(x) {
+        var _a;
+        return ((_a = this.props.displayNumber) !== null && _a !== void 0 ? _a : Operator.digitGrouping)(x);
+    }
+    updateGroupContent(o) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const subGroupMembers = (_a = (yield searchRequest(this.props.groupProvenanceId, this.props.groupId, o.searchQuery))) === null || _a === void 0 ? void 0 : _a.total_count;
+            if (subGroupMembers)
+                this.setState({ subGroupMembers, searchQuery: o.searchQuery });
+        });
+    }
+    href() {
+        var _a;
+        return {
+            subGroup: ((_a = this.state.searchQuery) === null || _a === void 0 ? void 0 : _a.query) ? resource.rcsb_search.url + encodeURI(JSON.stringify(SQT.buildNodeSearchQuery(SQT.searchGroupQuery(this.props.groupProvenanceId, this.props.groupId, Service.Text), this.state.searchQuery.query, groupProvenanceToReturnType[this.props.groupProvenanceId], SQT.searchContentType(this.state.searchQuery)))) : "",
+            fullGroup: resource.rcsb_search.url + JSON.stringify({
+                query: SQT.searchGroupQuery(this.props.groupProvenanceId, this.props.groupId),
+                return_type: groupProvenanceToReturnType[this.props.groupProvenanceId],
+                request_options: {
+                    pager: {
+                        start: 0,
+                        rows: 25
+                    },
+                    scoring_strategy: ScoringStrategy.Combined,
+                    sort: [{
+                            sort_by: RelevanceScoreRankingOption.Score,
+                            direction: SortDirection.Desc
+                        }],
+                    results_content_type: ["computational", "experimental"]
+                }
+            })
+        };
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupDisplay.d.ts

@@ -0,0 +1,15 @@
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { FacetStoreInterface } from "../../RcsbSeacrh/FacetStore/FacetStoreInterface";
+import { ReturnType } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { GroupChartAdditionalProperties } from "./RcsbGroupChart/GroupChartAdditionalProperties";
+import { RcsbGroupContentTextInterface } from "./RcsbGroupContent/RcsbGroupContentComponent";
+import { ResidueChartInterface } from "./RcsbResidueChart/ResidueChartTools/ResidueChartTools";
+import { ChartDisplayConfigInterface } from "@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface";
+export declare class RcsbGroupDisplay {
+    static displayRcsbSearchStats(elementId: string, facetStore: FacetStoreInterface, searchQuery: SearchQuery, returnType: ReturnType): Promise<void>;
+    static displaySearchAttributes(elementId: string, groupProvenanceId: GroupProvenanceId, groupId: string, searchQuery?: SearchQuery, facetLayoutGrid?: string[], additionalProperties?: GroupChartAdditionalProperties): Promise<void>;
+    static displayGroupMembers(elementId: string, groupProvenanceId: GroupProvenanceId, groupId: string, nRows: number, nColumns: number, query?: SearchQuery): void;
+    static displayGroupContent(elementId: string, groupProvenanceId: GroupProvenanceId, groupId: string, query?: SearchQuery, textConfig?: RcsbGroupContentTextInterface): void;
+    static displayResidueDistribution(elementId: string, granularity: ResidueChartInterface["granularity"], rcsbId: string, facetLayoutGrid?: string[], chartDisplayConfig?: Partial<ChartDisplayConfigInterface>): void;
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupDisplay.js

@@ -0,0 +1,41 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RcsbGroupMembersComponent } from "./RcsbGroupMembers/RcsbGroupMembersComponent";
+import { RcsbGroupContentComponent } from "./RcsbGroupContent/RcsbGroupContentComponent";
+import { RcsbGroupChartComponent } from "./RcsbGroupChart/RcsbGroupChartComponent";
+import { RcsbStatsChartComponent } from "./RcsbGroupChart/RcsbStatsChartComponent";
+import { createRoot } from "react-dom/client";
+import { RcsbResidueChartComponent } from "./RcsbResidueChart/RcsbResidueChartComponent";
+import { Assertions } from "../../RcsbUtils/Helpers/Assertions";
+var assertDefined = Assertions.assertDefined;
+export class RcsbGroupDisplay {
+    static displayRcsbSearchStats(elementId, facetStore, searchQuery, returnType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const e = document.getElementById(elementId);
+            assertDefined(e);
+            createRoot(e).render(_jsx(RcsbStatsChartComponent, { facetStore: facetStore, searchQuery: searchQuery, returnType: returnType }));
+        });
+    }
+    static displaySearchAttributes(elementId, groupProvenanceId, groupId, searchQuery, facetLayoutGrid, additionalProperties) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const e = document.getElementById(elementId);
+            assertDefined(e);
+            createRoot(e).render(_jsx(RcsbGroupChartComponent, { groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: searchQuery, facetLayoutGrid: facetLayoutGrid, additionalProperties: additionalProperties }));
+        });
+    }
+    static displayGroupMembers(elementId, groupProvenanceId, groupId, nRows, nColumns, query) {
+        const e = document.getElementById(elementId);
+        assertDefined(e);
+        createRoot(e).render(_jsx(RcsbGroupMembersComponent, { groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: query, nRows: nRows, nColumns: nColumns }));
+    }
+    static displayGroupContent(elementId, groupProvenanceId, groupId, query, textConfig) {
+        const e = document.getElementById(elementId);
+        assertDefined(e);
+        createRoot(e).render(_jsx(RcsbGroupContentComponent, Object.assign({ groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: query }, textConfig)));
+    }
+    static displayResidueDistribution(elementId, granularity, rcsbId, facetLayoutGrid, chartDisplayConfig) {
+        const e = document.getElementById(elementId);
+        assertDefined(e);
+        createRoot(e).render(_jsx(RcsbResidueChartComponent, { granularity: granularity, rcsbId: rcsbId, facetLayoutGrid: facetLayoutGrid, chartDisplayConfig: chartDisplayConfig }));
+    }
+}

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/Components/Slider.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ReactNode } from "react";
+export type SlideAction = "next" | "prev";
+export interface SliderInterface {
+    slide(action: SlideAction): void;
+    pages: number;
+    currentPage: number;
+    children: ReactNode;
+    displayNumber?(x: number): string;
+}
+export declare class Slider extends React.Component<SliderInterface> {
+    render(): JSX.Element;
+    private slide;
+    private displayNumber;
+}
+export declare function actionIcon(action: SlideAction): JSX.Element;

package/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/Components/Slider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { Operator } from "../../../../RcsbUtils/Helpers/Operator";
+export class Slider extends React.Component {
+    render() {
+        return (_jsxs("div", { className: "border", children: [_jsx(Container, { fluid: "md", children: _jsxs(Row, { className: "bg-secondary text-white", style: { height: 50 }, children: [_jsx(Col, { md: 1, className: "text-md-end my-auto", onClick: () => { this.slide("prev"); }, children: actionIcon("prev") }), _jsxs(Col, { className: "text-md-center my-auto", children: ["Member ", this.displayNumber(this.props.currentPage), " of ", this.displayNumber(this.props.pages)] }), _jsx(Col, { md: 1, className: "text-md-start my-auto", onClick: () => { this.slide("next"); }, children: actionIcon("next") })] }) }), _jsx("div", { children: this.props.children })] }));
+    }
+    slide(action) {
+        this.props.slide(action);
+    }
+    displayNumber(x) {
+        var _a;
+        return ((_a = this.props.displayNumber) !== null && _a !== void 0 ? _a : Operator.digitGrouping)(x);
+    }
+}
+export function actionIcon(action) {
+    return (_jsx("span", { style: { cursor: "pointer" }, className: "h1 user-select-none", children: action == "prev" ? "❮" : "❯" }));
+}

package/lib/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/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMemberItem.js

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

package/lib/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 {};