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

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartEvents.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupChartEvents = void 0;
+const tslib_1 = require("tslib");
+const SearchEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const web_resources_json_1 = tslib_1.__importDefault(require("../../../RcsbServerConfig/web.resources.json"));
+const SearchQueryContextManager_1 = require("../RcsbGroupSeacrhQuery/SearchQueryContextManager");
+const ChartConfigInterface_1 = require("@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface");
+const ChartTools_1 = require("@rcsb/rcsb-charts/lib/RcsbChartDataProvider/ChartTools");
+var GroupChartEvents;
+(function (GroupChartEvents) {
+    function addBarClickCallback(chart, returnType) {
+        if (!chart.chartConfig)
+            chart.chartConfig = {};
+        switch (chart.chartType) {
+            case ChartConfigInterface_1.ChartType.barplot:
+                addBarChartClick(chart, returnType);
+                break;
+            case ChartConfigInterface_1.ChartType.histogram:
+                addHistogramChartClick(chart, returnType);
+                break;
+        }
+    }
+    GroupChartEvents.addBarClickCallback = addBarClickCallback;
+    function addTooltipText(chart) {
+        var _a;
+        const tooltipText = (_a = chart.chartConfig) === null || _a === void 0 ? void 0 : _a.tooltipText;
+        const tooltipTitle = (d) => {
+            const tt = tooltipText === null || tooltipText === void 0 ? void 0 : tooltipText(d);
+            if (!tt)
+                return d.x.toString();
+            if (Array.isArray(tt))
+                return tt.join(" ");
+            return tt;
+        };
+        chart.chartConfig = Object.assign(Object.assign({}, chart.chartConfig), { tooltipText: (d) => {
+                const sum = d.values.reduce((prev, curr) => prev + curr.value, 0);
+                if (d.id == "included")
+                    return [
+                        tooltipTitle(d),
+                        ChartTools_1.ChartTools.digitGrouping(d.y) + (sum > 0 ? (" of " + sum) : ""),
+                        "Click to refine group",
+                        "Shift-click to search"
+                    ];
+                return [
+                    tooltipTitle(d),
+                    ChartTools_1.ChartTools.digitGrouping(d.y) + (sum > 0 ? (" of " + sum) : "")
+                ];
+            } });
+    }
+    GroupChartEvents.addTooltipText = addTooltipText;
+    function addBarChartClick(chart, returnType) {
+        if (chart.chartConfig)
+            chart.chartConfig.barClickCallback = (datum, data, e) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                if (datum.id === "excluded")
+                    return;
+                let query = SearchQueryTools_1.SearchQueryTools.searchAttributeQuery(chart.attribute, datum.x, SearchEnums_1.Operator.ExactMatch, SearchEnums_1.Service.Text);
+                if (chart.filters)
+                    chart.filters.forEach(f => {
+                        query = SearchQueryTools_1.SearchQueryTools.addNewNodeToAttributeSearchQuery(f.attribute, f.value, f.operator, query, f.service);
+                    });
+                yield clickEvent(e !== null && e !== void 0 ? e : { shiftKey: false }, chart, query, returnType);
+            });
+    }
+    function addHistogramChartClick(chart, returnType) {
+        if (chart.chartConfig)
+            chart.chartConfig.barClickCallback = (datum, data, e) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if (datum.id === "excluded")
+                    return;
+                if (((_a = chart.chartConfig) === null || _a === void 0 ? void 0 : _a.mergeDomainMaxValue) && parseFloat(datum.x.toString()) >= chart.chartConfig.mergeDomainMaxValue) {
+                    const query = SearchQueryTools_1.SearchQueryTools.searchAttributeQuery(chart.attribute, chart.chartConfig.mergeDomainMaxValue, SearchEnums_1.Operator.GreaterOrEqual, SearchEnums_1.Service.Text);
+                    yield clickEvent(e !== null && e !== void 0 ? e : { shiftKey: false }, chart, query, returnType);
+                }
+                else {
+                    const range = formatRange(chart, datum);
+                    const query = SearchQueryTools_1.SearchQueryTools.searchAttributeQuery(chart.attribute, range, SearchEnums_1.Operator.Range, SearchEnums_1.Service.Text);
+                    yield clickEvent(e !== null && e !== void 0 ? e : { shiftKey: false }, chart, query, returnType);
+                }
+            });
+    }
+    function clickEvent(e, chart, query, returnType) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const newQuery = yield SearchQueryContextManager_1.SearchQueryContextManager.updateSearchQuery(chart.attributeName, query, returnType);
+            if (e.shiftKey) {
+                location.href = web_resources_json_1.default.rcsb_search.url + encodeURI(JSON.stringify(newQuery));
+            }
+        });
+    }
+    function formatRange(chart, datum) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        switch (chart.contentType) {
+            case "date":
+                return {
+                    from: formatValue((parseFloat(datum.x.toString())) - ((_b = (_a = chart.chartConfig) === null || _a === void 0 ? void 0 : _a.histogramBinIncrement) !== null && _b !== void 0 ? _b : 0) * 0.5, chart.contentType),
+                    to: formatValue((parseFloat(datum.x.toString())) + ((_d = (_c = chart.chartConfig) === null || _c === void 0 ? void 0 : _c.histogramBinIncrement) !== null && _d !== void 0 ? _d : 0) * 0.5, chart.contentType),
+                    include_lower: true,
+                    include_upper: false
+                };
+            default:
+                return {
+                    from: formatValue((parseFloat(datum.x.toString())) - ((_f = (_e = chart.chartConfig) === null || _e === void 0 ? void 0 : _e.histogramBinIncrement) !== null && _f !== void 0 ? _f : 0) * 0.5, chart.contentType),
+                    to: formatValue((parseFloat(datum.x.toString())) + ((_h = (_g = chart.chartConfig) === null || _g === void 0 ? void 0 : _g.histogramBinIncrement) !== null && _h !== void 0 ? _h : 0) * 0.5, chart.contentType),
+                    include_lower: true,
+                    include_upper: false
+                };
+        }
+    }
+    function formatValue(value, contentType) {
+        switch (contentType) {
+            case "date":
+                return `${value}-01-01`;
+            default:
+                return value;
+        }
+    }
+})(GroupChartEvents || (exports.GroupChartEvents = GroupChartEvents = {}));

package/lib/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartLayout.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { RcsbChartInterface } from "../../../RcsbSeacrh/FacetTools";
+export type ChartMapType = Map<string, RcsbChartInterface[]>;
+export interface RcsbChartLayoutInterface {
+    layout: string[];
+    chartMap: ChartMapType;
+}
+export declare class GroupChartLayout extends React.Component<RcsbChartLayoutInterface, {}> {
+    render(): JSX.Element;
+    private renderCell;
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupChartLayout = 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 uniqid_1 = tslib_1.__importDefault(require("uniqid"));
+const ChartConfigInterface_1 = require("@rcsb/rcsb-charts/lib/RcsbChartComponent/ChartConfigInterface");
+const HistogramChartComponent_1 = require("../../../RcsbChartWeb/HistogramChartComponent");
+const BarChartComponent_1 = require("../../../RcsbChartWeb/BarChartComponent");
+const ChartTools_1 = require("@rcsb/rcsb-charts/lib/RcsbChartDataProvider/ChartTools");
+class GroupChartLayout extends react_1.default.Component {
+    render() {
+        return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Container, { fluid: "md", children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.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 == ChartConfigInterface_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+}
+exports.GroupChartLayout = GroupChartLayout;
+function chartCell(chartNode, title, chartDisplayConfig) {
+    return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { className: "mb-md-5", children: (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Col, { md: 12, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { className: "mb-md-2", children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 12, style: { paddingLeft: ChartTools_1.ChartTools.getConfig("paddingLeft", chartDisplayConfig) + ChartTools_1.ChartTools.getConfig("xDomainPadding", chartDisplayConfig) }, children: (0, jsx_runtime_1.jsx)("strong", { children: title }) }) }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Row, { children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 12, children: chartNode }) })] }) }) }, `${title}_${(0, uniqid_1.default)()}`));
+}
+function histogramChart(attributeName, chart) {
+    return ((0, jsx_runtime_1.jsx)("div", { id: `chart:${chart[0].labelList ? chart[0].labelList.join("-") + chart[0].attribute : chart[0].attribute}`, children: (0, jsx_runtime_1.jsx)(HistogramChartComponent_1.HistogramChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
+}
+function barChart(attributeName, chart) {
+    return ((0, jsx_runtime_1.jsx)("div", { id: `chart:${chart[0].labelList ? chart[0].labelList.join("-") + chart[0].attribute : chart[0].attribute}`, children: (0, jsx_runtime_1.jsx)(BarChartComponent_1.BarChartComponent, { data: chart.map(c => c.data), chartConfig: chart[0].chartConfig, attributeName: attributeName }) }));
+}

package/lib/commonjs/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/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/GroupChartTools.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupChartMap = void 0;
+const tslib_1 = require("tslib");
+const GroupProvenanceToAggregationType_1 = require("../../../RcsbUtils/Groups/GroupProvenanceToAggregationType");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const FacetTools_1 = require("../../../RcsbSeacrh/FacetTools");
+const lodash_1 = require("lodash");
+const GroupChartEvents_1 = require("./GroupChartEvents");
+const RcsbRequestContextManager_1 = require("../../../RcsbRequest/RcsbRequestContextManager");
+var GroupChartMap;
+(function (GroupChartMap) {
+    function getChartMap(groupProvenanceId, groupId, searchQuery) {
+        var _a;
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const facetStore = SearchQueryTools_1.SearchQueryTools.getFacetStoreFromGroupProvenance(groupProvenanceId);
+            let facets = [];
+            for (const service of facetStore.getServices()) {
+                const groupQuery = SearchQueryTools_1.SearchQueryTools.searchGroupQuery(groupProvenanceId, groupId, service);
+                const groupProperties = yield RcsbRequestContextManager_1.rcsbRequestCtxManager.getSearchQueryFacets(groupQuery, facetStore.getFacetService(service).map(f => f.facet), facetStore.returnType, SearchQueryTools_1.SearchQueryTools.searchContentType(searchQuery));
+                if (groupProperties)
+                    facets = facets.concat(groupProperties.facets);
+            }
+            let chartData = FacetTools_1.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 => {
+                GroupChartEvents_1.GroupChartEvents.addBarClickCallback(chart, GroupProvenanceToAggregationType_1.groupProvenanceToReturnType[groupProvenanceId]);
+                GroupChartEvents_1.GroupChartEvents.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 tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const facetStore = SearchQueryTools_1.SearchQueryTools.getFacetStoreFromGroupProvenance(groupProvenanceId);
+            let subData;
+            let partialFacets = [];
+            for (const service of facetStore.getServices()) {
+                if (searchQuery.query) {
+                    const groupQuery = SearchQueryTools_1.SearchQueryTools.addGroupNodeToSearchQuery(groupProvenanceId, groupId, searchQuery.query, service);
+                    const groupProperties = yield RcsbRequestContextManager_1.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 = (0, lodash_1.cloneDeep)(chartData);
+            if (partialFacets.length > 0) {
+                partialData = FacetTools_1.FacetTools.getResultDrilldowns(facetStore.getFacetService("all"), partialFacets);
+                subData = FacetTools_1.FacetTools.subtractDrilldowns(partialData, chartData);
+            }
+            else {
+                subData = (0, lodash_1.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 || (exports.GroupChartMap = GroupChartMap = {}));

package/lib/commonjs/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/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbGroupChartComponent.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcsbGroupChartComponent = 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("./GroupChartLayout");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const GroupChartTools_1 = require("./GroupChartTools");
+const bootstrap_group_display_module_scss_1 = tslib_1.__importDefault(require("../../../scss/bootstrap-group-display.module.scss"));
+const RcsbGroupSeacrhQueryComponent_1 = require("../RcsbGroupSeacrhQuery/RcsbGroupSeacrhQueryComponent");
+//TODO include chartDisplayConfig?: Partial<ChartDisplayConfigInterface> in props and propagate it
+class RcsbGroupChartComponent extends react_1.default.Component {
+    componentDidMount() {
+        return tslib_1.__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 ((0, jsx_runtime_1.jsxs)("div", { className: bootstrap_group_display_module_scss_1.default.bootstrapGroupComponentScope, children: [RcsbGroupSeacrhQueryComponent_1.SearchQueryComponentFactory.getGroupSearchComponent(this.props.groupProvenanceId, this.props.groupId, this.props.searchQuery), (0, jsx_runtime_1.jsx)(GroupChartLayout_1.GroupChartLayout, { layout: this.state.layout, chartMap: this.state.chartMap })] }));
+        }
+        else {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }
+    }
+    updateState() {
+        var _a, _b, _c;
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const layout = (_a = this.props.facetLayoutGrid) !== null && _a !== void 0 ? _a : SearchQueryTools_1.SearchQueryTools.getFacetStoreFromGroupProvenance(this.props.groupProvenanceId).facetLayoutGrid;
+            const chartMap = yield GroupChartTools_1.GroupChartMap.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);
+            });
+        });
+    }
+}
+exports.RcsbGroupChartComponent = RcsbGroupChartComponent;
+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/commonjs/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/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupChart/RcsbStatsChartComponent.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcsbStatsChartComponent = 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 GroupChartLayout_1 = require("./GroupChartLayout");
+const FacetTools_1 = require("../../../RcsbSeacrh/FacetTools");
+const RcsbRequestContextManager_1 = require("../../../RcsbRequest/RcsbRequestContextManager");
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+class RcsbStatsChartComponent extends react_1.default.Component {
+    componentDidMount() {
+        return tslib_1.__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 ((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.props.facetStore.facetLayoutGrid, chartMap: FacetTools_1.FacetTools.getResultDrilldowns(this.props.facetStore.getFacetService("all"), this.state.facets).reduce((prev, current) => {
+                        return prev.set(current.attribute, [current]);
+                    }, new Map()) }) }));
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    updateState() {
+        return tslib_1.__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 RcsbRequestContextManager_1.rcsbRequestCtxManager.getSearchQueryFacets(this.props.searchQuery.query, this.props.facetStore.getFacetService(service).map(f => f.facet), this.props.facetStore.returnType, SearchQueryTools_1.SearchQueryTools.searchContentType(this.props.searchQuery));
+                    if (groupProperties === null || groupProperties === void 0 ? void 0 : groupProperties.facets)
+                        facets = facets.concat(groupProperties.facets);
+                }
+            }
+            this.setState({ facets });
+        });
+    }
+}
+exports.RcsbStatsChartComponent = RcsbStatsChartComponent;

package/lib/commonjs/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/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupContent/RcsbGroupContentComponent.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcsbGroupContentComponent = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const RcsbGroupMembersComponent_1 = require("../RcsbGroupMembers/RcsbGroupMembersComponent");
+const SearchQueryContextManager_1 = require("../RcsbGroupSeacrhQuery/SearchQueryContextManager");
+const web_resources_json_1 = tslib_1.__importDefault(require("../../../RcsbServerConfig/web.resources.json"));
+const SearchQueryTools_1 = require("../../../RcsbSeacrh/SearchQueryTools");
+const GroupProvenanceToAggregationType_1 = require("../../../RcsbUtils/Groups/GroupProvenanceToAggregationType");
+const SearchEnums_1 = require("@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchEnums");
+const Operator_1 = require("../../../RcsbUtils/Helpers/Operator");
+class RcsbGroupContentComponent extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            subGroupMembers: 0,
+            fullGroupMembers: 0,
+            searchQuery: this.props.searchQuery
+        };
+    }
+    componentDidMount() {
+        var _a, _b;
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.subscribe();
+            const fullGroupMembers = (_a = (yield (0, RcsbGroupMembersComponent_1.searchRequest)(this.props.groupProvenanceId, this.props.groupId))) === null || _a === void 0 ? void 0 : _a.total_count;
+            const subGroupMembers = (_b = (yield (0, RcsbGroupMembersComponent_1.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 ((0, jsx_runtime_1.jsxs)("span", { children: [(_a = this.props.completeGroupText) !== null && _a !== void 0 ? _a : "", " ", (0, jsx_runtime_1.jsx)("a", { href: this.href().fullGroup, children: this.displayNumber(this.state.fullGroupMembers) })] }));
+        else
+            return ((0, jsx_runtime_1.jsxs)("span", { children: [this.props.subGroupText ? this.props.subGroupText + " " : "", (0, jsx_runtime_1.jsx)("a", { href: this.href().subGroup, children: this.displayNumber(this.state.subGroupMembers) }), this.props.delimiterText ? " " + this.props.delimiterText + " " : " / ", (0, jsx_runtime_1.jsx)("a", { href: this.href().fullGroup, children: this.displayNumber(this.state.fullGroupMembers) }), this.props.fullGroupText ? " " + this.props.fullGroupText : ""] }));
+    }
+    subscribe() {
+        SearchQueryContextManager_1.SearchQueryContextManager.subscribe((o) => tslib_1.__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_1.Operator.digitGrouping)(x);
+    }
+    updateGroupContent(o) {
+        var _a;
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const subGroupMembers = (_a = (yield (0, RcsbGroupMembersComponent_1.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) ? web_resources_json_1.default.rcsb_search.url + encodeURI(JSON.stringify(SearchQueryTools_1.SearchQueryTools.buildNodeSearchQuery(SearchQueryTools_1.SearchQueryTools.searchGroupQuery(this.props.groupProvenanceId, this.props.groupId, SearchEnums_1.Service.Text), this.state.searchQuery.query, GroupProvenanceToAggregationType_1.groupProvenanceToReturnType[this.props.groupProvenanceId], SearchQueryTools_1.SearchQueryTools.searchContentType(this.state.searchQuery)))) : "",
+            fullGroup: web_resources_json_1.default.rcsb_search.url + JSON.stringify({
+                query: SearchQueryTools_1.SearchQueryTools.searchGroupQuery(this.props.groupProvenanceId, this.props.groupId),
+                return_type: GroupProvenanceToAggregationType_1.groupProvenanceToReturnType[this.props.groupProvenanceId],
+                request_options: {
+                    pager: {
+                        start: 0,
+                        rows: 25
+                    },
+                    scoring_strategy: SearchEnums_1.ScoringStrategy.Combined,
+                    sort: [{
+                            sort_by: SearchEnums_1.RelevanceScoreRankingOption.Score,
+                            direction: SearchEnums_1.SortDirection.Desc
+                        }],
+                    results_content_type: ["computational", "experimental"]
+                }
+            })
+        };
+    }
+}
+exports.RcsbGroupContentComponent = RcsbGroupContentComponent;

package/lib/commonjs/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/commonjs/RcsbGroupWeb/RcsbGroupView/RcsbGroupDisplay.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcsbGroupDisplay = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RcsbGroupMembersComponent_1 = require("./RcsbGroupMembers/RcsbGroupMembersComponent");
+const RcsbGroupContentComponent_1 = require("./RcsbGroupContent/RcsbGroupContentComponent");
+const RcsbGroupChartComponent_1 = require("./RcsbGroupChart/RcsbGroupChartComponent");
+const RcsbStatsChartComponent_1 = require("./RcsbGroupChart/RcsbStatsChartComponent");
+const client_1 = require("react-dom/client");
+const RcsbResidueChartComponent_1 = require("./RcsbResidueChart/RcsbResidueChartComponent");
+const Assertions_1 = require("../../RcsbUtils/Helpers/Assertions");
+var assertDefined = Assertions_1.Assertions.assertDefined;
+class RcsbGroupDisplay {
+    static displayRcsbSearchStats(elementId, facetStore, searchQuery, returnType) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const e = document.getElementById(elementId);
+            assertDefined(e);
+            (0, client_1.createRoot)(e).render((0, jsx_runtime_1.jsx)(RcsbStatsChartComponent_1.RcsbStatsChartComponent, { facetStore: facetStore, searchQuery: searchQuery, returnType: returnType }));
+        });
+    }
+    static displaySearchAttributes(elementId, groupProvenanceId, groupId, searchQuery, facetLayoutGrid, additionalProperties) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const e = document.getElementById(elementId);
+            assertDefined(e);
+            (0, client_1.createRoot)(e).render((0, jsx_runtime_1.jsx)(RcsbGroupChartComponent_1.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);
+        (0, client_1.createRoot)(e).render((0, jsx_runtime_1.jsx)(RcsbGroupMembersComponent_1.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);
+        (0, client_1.createRoot)(e).render((0, jsx_runtime_1.jsx)(RcsbGroupContentComponent_1.RcsbGroupContentComponent, Object.assign({ groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: query }, textConfig)));
+    }
+    static displayResidueDistribution(elementId, granularity, rcsbId, facetLayoutGrid, chartDisplayConfig) {
+        const e = document.getElementById(elementId);
+        assertDefined(e);
+        (0, client_1.createRoot)(e).render((0, jsx_runtime_1.jsx)(RcsbResidueChartComponent_1.RcsbResidueChartComponent, { granularity: granularity, rcsbId: rcsbId, facetLayoutGrid: facetLayoutGrid, chartDisplayConfig: chartDisplayConfig }));
+    }
+}
+exports.RcsbGroupDisplay = RcsbGroupDisplay;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionIcon = exports.Slider = 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 Operator_1 = require("../../../../RcsbUtils/Helpers/Operator");
+class Slider extends react_1.default.Component {
+    render() {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "border", children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Container, { fluid: "md", children: (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Row, { className: "bg-secondary text-white", style: { height: 50 }, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 1, className: "text-md-end my-auto", onClick: () => { this.slide("prev"); }, children: actionIcon("prev") }), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Col, { className: "text-md-center my-auto", children: ["Member ", this.displayNumber(this.props.currentPage), " of ", this.displayNumber(this.props.pages)] }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Col, { md: 1, className: "text-md-start my-auto", onClick: () => { this.slide("next"); }, children: actionIcon("next") })] }) }), (0, jsx_runtime_1.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_1.Operator.digitGrouping)(x);
+    }
+}
+exports.Slider = Slider;
+function actionIcon(action) {
+    return ((0, jsx_runtime_1.jsx)("span", { style: { cursor: "pointer" }, className: "h1 user-select-none", children: action == "prev" ? "❮" : "❯" }));
+}
+exports.actionIcon = actionIcon;