synapse-react-client 2.1.23 → 3.0.2

package/dist/containers/table/SynapseTable.js

@@ -2,36 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DOWNLOAD_OPTIONS_CONTAINER_CLASS = exports.SORT_STATE = exports.EMPTY_HEADER = void 0;
 var tslib_1 = require("tslib");
+var column_resizer_1 = (0, tslib_1.__importDefault)(require("column-resizer"));
 var lodash_es_1 = require("lodash-es");
 var React = (0, tslib_1.__importStar)(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var sql_parser_1 = require("sql-parser");
+var file_dotted_svg_1 = require("../../assets/icons/file-dotted.svg");
 var utils_1 = require("../../utils");
+var EntityTypeUtils_1 = require("../../utils/functions/EntityTypeUtils");
+var getEndpoint_1 = require("../../utils/functions/getEndpoint");
 var getUserData_1 = require("../../utils/functions/getUserData");
+var queryUtils_1 = require("../../utils/functions/queryUtils");
 var sqlFunctions_1 = require("../../utils/functions/sqlFunctions");
 var synapseTypes_1 = require("../../utils/synapseTypes/");
+var AddToDownloadListV2_1 = (0, tslib_1.__importDefault)(require("../AddToDownloadListV2"));
+var DirectDownload_1 = (0, tslib_1.__importDefault)(require("../DirectDownload"));
 var HasAccess_1 = (0, tslib_1.__importDefault)(require("../HasAccess"));
-var TotalQueryResults_1 = (0, tslib_1.__importDefault)(require("../TotalQueryResults"));
-var unCamelCase_1 = require("./../../utils/functions/unCamelCase");
-var SynapseTableConstants_1 = require("./SynapseTableConstants");
-var file_dotted_svg_1 = require("../../assets/icons/file-dotted.svg");
-var SynapseTableCell_1 = require("../synapse_table_functions/SynapseTableCell");
-var getUniqueEntities_1 = require("../synapse_table_functions/getUniqueEntities");
+var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../LoadingScreen"));
+var ModalDownload_1 = (0, tslib_1.__importDefault)(require("../ModalDownload"));
+var utils_2 = require("../row_renderers/utils");
 var getColumnIndiciesWithType_1 = require("../synapse_table_functions/getColumnIndiciesWithType");
+var getUniqueEntities_1 = require("../synapse_table_functions/getUniqueEntities");
+var SynapseTableCell_1 = require("../synapse_table_functions/SynapseTableCell");
+var TotalQueryResults_1 = (0, tslib_1.__importDefault)(require("../TotalQueryResults"));
 var Checkbox_1 = require("../widgets/Checkbox");
 var EnumFacetFilter_1 = require("../widgets/query-filter/EnumFacetFilter");
 var QueryFilter_1 = require("../widgets/query-filter/QueryFilter");
-var column_resizer_1 = (0, tslib_1.__importDefault)(require("column-resizer"));
-var ModalDownload_1 = (0, tslib_1.__importDefault)(require("../ModalDownload"));
-var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../LoadingScreen"));
-var utils_2 = require("../row_renderers/utils");
+var unCamelCase_1 = require("./../../utils/functions/unCamelCase");
 var SearchResultsNotFound_1 = (0, tslib_1.__importDefault)(require("./SearchResultsNotFound"));
-var SynapseConstants_1 = require("../../utils/SynapseConstants");
-var AddToDownloadListV2_1 = (0, tslib_1.__importDefault)(require("../AddToDownloadListV2"));
-var SynapseContext_1 = require("../../utils/SynapseContext");
-var getEndpoint_1 = require("../../utils/functions/getEndpoint");
-var DirectDownload_1 = (0, tslib_1.__importDefault)(require("../DirectDownload"));
-var queryUtils_1 = require("../../utils/functions/queryUtils");
+var SynapseTableConstants_1 = require("./SynapseTableConstants");
 exports.EMPTY_HEADER = {
     id: '',
     name: '',
@@ -62,7 +61,7 @@ var SynapseTable = /** @class */ (function (_super) {
         _this.tableElement = undefined;
         _this.showGroupRowData = function (selectedRow) {
             // magic happens - parse query, deep copy query bundle request, modify, encode, send to Synapse.org.  Easy!
-            var queryCopy = _this.props.getLastQueryRequest().query;
+            var queryCopy = _this.props.queryContext.getLastQueryRequest().query;
             var parsed = _this.getSqlUnderlyingDataForRow(selectedRow, queryCopy.sql);
             queryCopy.sql = parsed.newSql;
             var queryJSON = JSON.stringify(queryCopy);
@@ -72,11 +71,10 @@ var SynapseTable = /** @class */ (function (_super) {
         };
         _this.renderTable = function (headers, columnModels, facets, rows) {
             var _a, _b;
-            var lastQueryRequest = (_b = (_a = _this.props).getLastQueryRequest) === null || _b === void 0 ? void 0 : _b.call(_a);
+            var lastQueryRequest = (_b = (_a = _this.props.queryContext).getLastQueryRequest) === null || _b === void 0 ? void 0 : _b.call(_a);
             // handle displaying the previous button -- if offset is zero then it
             // shouldn't be displayed
-            var pastZero = lastQueryRequest.query.offset > 0;
-            var _c = _this.props, hasMoreData = _c.hasMoreData, showAccessColumn = _c.showAccessColumn, showDownloadColumn = _c.showDownloadColumn, isRowSelectionVisible = _c.isRowSelectionVisible;
+            var _c = _this.props, _d = _c.queryContext, entity = _d.entity, hasNextPage = _d.hasNextPage, hasPreviousPage = _d.hasPreviousPage, showAccessColumn = _c.showAccessColumn, showDownloadColumn = _c.showDownloadColumn, isRowSelectionVisible = _c.isRowSelectionVisible;
             var nextBtn = (React.createElement(react_bootstrap_1.Button, { variant: "secondary", className: "pill-xl", onClick: _this.handlePaginationClick(NEXT), style: {
                     marginRight: 0,
                     marginBottom: '20px',
@@ -85,17 +83,29 @@ var SynapseTable = /** @class */ (function (_super) {
                     alignItems: 'center',
                 }, type: "button" }, "Next"));
             var previousBtn = (React.createElement(react_bootstrap_1.Button, { variant: "secondary", className: "pill-xl", onClick: _this.handlePaginationClick(PREVIOUS), type: "button", style: {
-                    marginRight: !hasMoreData && pastZero ? 0 : '10px',
+                    marginRight: !hasNextPage && hasPreviousPage ? 0 : '10px',
                     marginBottom: '20px',
                     display: 'inline-flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                 } }, "Previous"));
-            var isShowingAccessColumn = showAccessColumn && _this.state.isEntityView;
-            var isLoggedIn = !!_this.context.accessToken;
             var containsGroupBy = (0, queryUtils_1.isGroupBy)(lastQueryRequest.query.sql);
-            var isShowingAddToV2DownloadListColumn = _this.state.isFileView && !_this.props.hideDownload && isLoggedIn && !containsGroupBy;
-            var isShowingDirectDownloadColumn = _this.state.isFileView && showDownloadColumn && isLoggedIn && !containsGroupBy;
+            var isShowingAccessColumn = showAccessColumn && entity && (0, EntityTypeUtils_1.isEntityView)(entity) && !containsGroupBy;
+            var isLoggedIn = !!_this.props.synapseContext.accessToken;
+            // PORTALS-2010:  Enhance change made for PORTALS-1973.  File specific action will only be shown for rows that represent FileEntities.
+            // Set isFileView to true if the Entity could have any Files in it.  Check if bit 1 is set in the viewTypeMask.
+            //  http://rest-docs.synapse.org/rest/org/sagebionetworks/repo/model/table/EntityView.html
+            // TODO: is file view or is dataset
+            var isShowingAddToV2DownloadListColumn = !!(entity &&
+                (((0, EntityTypeUtils_1.isEntityView)(entity) && (0, EntityTypeUtils_1.hasFilesInView)(entity)) || (0, EntityTypeUtils_1.isDataset)(entity)) &&
+                !_this.props.hideDownload &&
+                isLoggedIn &&
+                !containsGroupBy);
+            var isShowingDirectDownloadColumn = entity &&
+                (((0, EntityTypeUtils_1.isEntityView)(entity) && (0, EntityTypeUtils_1.hasFilesInView)(entity)) || (0, EntityTypeUtils_1.isDataset)(entity)) &&
+                showDownloadColumn &&
+                isLoggedIn &&
+                !containsGroupBy;
             /* min height ensure if no rows are selected that a dropdown menu is still accessible */
             var tableEntityId = lastQueryRequest === null || lastQueryRequest === void 0 ? void 0 : lastQueryRequest.entityId;
             return (React.createElement("div", { style: { minHeight: '400px' }, className: "SRC-overflowAuto", "data-testid": "SynapseTable" },
@@ -104,8 +114,8 @@ var SynapseTable = /** @class */ (function (_super) {
                         React.createElement("tr", null, _this.createTableHeader(headers, columnModels, facets, isShowingAccessColumn, isShowingDirectDownloadColumn, isShowingAddToV2DownloadListColumn, isRowSelectionVisible, lastQueryRequest))),
                     React.createElement("tbody", null, _this.createTableRows(rows, headers, isShowingAccessColumn, isShowingDirectDownloadColumn, isShowingAddToV2DownloadListColumn, isRowSelectionVisible, tableEntityId))),
                 React.createElement("div", { className: "bootstrap-4-backport", style: { textAlign: 'right' } },
-                    pastZero && previousBtn,
-                    hasMoreData && nextBtn)));
+                    hasPreviousPage && previousBtn,
+                    hasNextPage && nextBtn)));
         };
         /**
          * Handle a click on next or previous
@@ -113,19 +123,13 @@ var SynapseTable = /** @class */ (function (_super) {
          * @memberof SynapseTable
          */
         _this.handlePaginationClick = function (eventType) { return function (_event) {
-            var _a, _b;
-            var queryRequest = _this.props.getLastQueryRequest();
-            var currentOffset = queryRequest.query.offset;
-            // if its a "previous" click subtract from the offset
-            // otherwise its next and we paginate forward
+            var _a = _this.props.queryContext, goToNextPage = _a.goToNextPage, goToPreviousPage = _a.goToPreviousPage;
             if (eventType === PREVIOUS) {
-                currentOffset -= (_a = queryRequest.query.limit) !== null && _a !== void 0 ? _a : SynapseConstants_1.DEFAULT_PAGE_SIZE;
+                goToPreviousPage();
             }
             if (eventType === NEXT) {
-                currentOffset += (_b = queryRequest.query.limit) !== null && _b !== void 0 ? _b : SynapseConstants_1.DEFAULT_PAGE_SIZE;
+                goToNextPage();
             }
-            queryRequest.query.offset = currentOffset;
-            _this.props.executeQueryRequest(queryRequest);
         }; };
         /**
          * Handle a column having been selected
@@ -153,10 +157,10 @@ var SynapseTable = /** @class */ (function (_super) {
                     direction: exports.SORT_STATE[columnIconSortState[dict.index]],
                 });
             }
-            var queryRequest = _this.props.getLastQueryRequest();
+            var queryRequest = _this.props.queryContext.getLastQueryRequest();
             queryRequest.query.sort = sortedColumnSelection;
             queryRequest.query.offset = 0;
-            _this.props.executeQueryRequest(queryRequest);
+            _this.props.queryContext.executeQueryRequest(queryRequest);
             _this.setState({
                 columnIconSortState: columnIconSortState,
                 sortedColumnSelection: sortedColumnSelection,
@@ -169,20 +173,21 @@ var SynapseTable = /** @class */ (function (_super) {
          * @memberof SynapseTable
          */
         _this.toggleColumnSelection = function (columnName) {
-            var isColumnSelected = (0, lodash_es_1.cloneDeep)(_this.props.isColumnSelected);
-            if (isColumnSelected.includes(columnName)) {
-                isColumnSelected = isColumnSelected.filter(function (el) { return el !== columnName; });
+            var _a = _this.props.queryVisualizationContext, columnsToShowInTable = _a.columnsToShowInTable, setColumnsToShowInTable = _a.setColumnsToShowInTable;
+            var columnsToShowInTableCopy = (0, lodash_es_1.cloneDeep)(columnsToShowInTable);
+            if (columnsToShowInTableCopy.includes(columnName)) {
+                columnsToShowInTableCopy = columnsToShowInTableCopy.filter(function (el) { return el !== columnName; });
             }
             else {
-                isColumnSelected.push(columnName);
+                columnsToShowInTableCopy.push(columnName);
             }
-            _this.props.updateParentState({ isColumnSelected: isColumnSelected });
+            setColumnsToShowInTable(columnsToShowInTableCopy);
         };
         _this.applyChangesFromQueryFilter = function (facets) {
-            var queryRequest = _this.props.getLastQueryRequest();
+            var queryRequest = _this.props.queryContext.getLastQueryRequest();
             queryRequest.query.selectedFacets = facets;
             queryRequest.query.offset = 0;
-            _this.props.executeQueryRequest(queryRequest);
+            _this.props.queryContext.executeQueryRequest(queryRequest);
         };
         _this.componentDidMount = _this.componentDidMount.bind(_this);
         _this.componentWillUnmount = _this.componentWillUnmount.bind(_this);
@@ -209,8 +214,6 @@ var SynapseTable = /** @class */ (function (_super) {
             isExportTableDownloadOpen: false,
             isExpanded: false,
             isColumnSelectionOpen: false,
-            isEntityView: false,
-            isFileView: false,
             // sortedColumnSelection contains the columns which are
             // selected currently and their sort status as eithet
             // off, desc, or asc.
@@ -218,7 +221,6 @@ var SynapseTable = /** @class */ (function (_super) {
             mapEntityIdToHeader: {},
             mapUserIdToHeader: {},
             isFetchingEntityHeaders: false,
-            isFetchingEntityVersion: false,
         };
         _this.getEntityHeadersInData = _this.getEntityHeadersInData.bind(_this);
         return _this;
@@ -232,10 +234,12 @@ var SynapseTable = /** @class */ (function (_super) {
     };
     SynapseTable.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         // ignore isFetching state variables when checking for change in state
+        var _a = this.state, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var _a = this.state, oldIsFetchingEntityHeaders = _a.isFetchingEntityHeaders, oldIsFetchingEntityVersion = _a.isFetchingEntityVersion, oldState = (0, tslib_1.__rest)(_a, ["isFetchingEntityHeaders", "isFetchingEntityVersion"]);
+        oldIsFetchingEntityHeaders = _a.isFetchingEntityHeaders, oldState = (0, tslib_1.__rest)(_a, ["isFetchingEntityHeaders"]);
+        var 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var newIsFetchingEntityHeaders = nextState.isFetchingEntityHeaders, newIsFetchingEntityVersion = nextState.isFetchingEntityVersion, newState = (0, tslib_1.__rest)(nextState, ["isFetchingEntityHeaders", "isFetchingEntityVersion"]);
+        newIsFetchingEntityHeaders = nextState.isFetchingEntityHeaders, newState = (0, tslib_1.__rest)(nextState, ["isFetchingEntityHeaders"]);
         var isPropsChange = !(0, lodash_es_1.eq)(this.props, nextProps);
         var isStateChange = !(0, lodash_es_1.eq)(oldState, newState);
         var shouldComponentUpdate = isPropsChange || isStateChange;
@@ -246,52 +250,17 @@ var SynapseTable = /** @class */ (function (_super) {
     };
     SynapseTable.prototype.componentDidUpdate = function (prevProps, prevState) {
         // PORTALS-2081: if the data changed, then get the new entity headers
-        if (!(0, lodash_es_1.eq)(prevProps.data, this.props.data)) {
+        if (!(0, lodash_es_1.eq)(prevProps.queryContext.data, this.props.queryContext.data)) {
             this.getEntityHeadersInData(false);
         }
-        else if (!(0, lodash_es_1.eq)(prevState.isEntityView, this.state.isEntityView)) {
+        else if (prevProps.queryContext.entity &&
+            this.props.queryContext.entity &&
+            !(0, lodash_es_1.eq)((0, EntityTypeUtils_1.isEntityView)(prevProps.queryContext.entity), (0, EntityTypeUtils_1.isEntityView)(this.props.queryContext.entity))) {
             // if we determined that this is an entity view, force refresh the entity headers (for Views we need to get the rowIds!)
             this.getEntityHeadersInData(true);
         }
-        this.getTableConcreteType(prevProps);
         this.enableResize();
     };
-    SynapseTable.prototype.getTableConcreteType = function (prevProps) {
-        var _a;
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var token, data, currentTableId, previousTableId, entityData, isEntityView, isFileView;
-            return (0, tslib_1.__generator)(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        token = this.context.accessToken;
-                        data = this.props.data;
-                        if (!data || this.state.isFetchingEntityVersion) {
-                            return [2 /*return*/];
-                        }
-                        currentTableId = data === null || data === void 0 ? void 0 : data.queryResult.queryResults.tableId;
-                        previousTableId = (_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.queryResult.queryResults.tableId;
-                        if (!(currentTableId && previousTableId !== currentTableId)) return [3 /*break*/, 2];
-                        this.setState({
-                            isFetchingEntityVersion: true,
-                        });
-                        return [4 /*yield*/, utils_1.SynapseClient.getEntity(token, currentTableId)];
-                    case 1:
-                        entityData = _b.sent();
-                        isEntityView = entityData.concreteType.includes('EntityView');
-                        isFileView = isEntityView
-                            ? (entityData.viewTypeMask & 1) != 0
-                            : false;
-                        this.setState({
-                            isEntityView: isEntityView,
-                            isFileView: isFileView,
-                            isFetchingEntityVersion: false,
-                        });
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
     SynapseTable.prototype.enableResize = function () {
         var _this = this;
         if (!this.resizer) {
@@ -315,12 +284,12 @@ var SynapseTable = /** @class */ (function (_super) {
     };
     SynapseTable.prototype.getEntityHeadersInData = function (forceRefresh) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var data, mapEntityIdToHeader, mapUserIdToHeader, entityIdColumnIndicies, userIdColumnIndicies, distinctEntityIds, queryResult, queryResults, rows, distinctUserIds, referenceList, data_1, results, err_1, userPorfileIds, ids, data_2, err_2, data_3, err_3;
-            return (0, tslib_1.__generator)(this, function (_a) {
-                switch (_a.label) {
+            var _a, data, entity, mapEntityIdToHeader, mapUserIdToHeader, entityIdColumnIndicies, userIdColumnIndicies, distinctEntityIds, queryResult, queryResults, rows, distinctUserIds, referenceList, data_1, results, err_1, userPorfileIds, ids, data_2, err_2, data_3, err_3;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        data = this.props.data;
-                        if (!data) {
+                        _a = this.props.queryContext, data = _a.data, entity = _a.entity;
+                        if (!data || !entity) {
                             return [2 /*return*/];
                         }
                         else if (this.state.isFetchingEntityHeaders && !forceRefresh) {
@@ -328,11 +297,11 @@ var SynapseTable = /** @class */ (function (_super) {
                         }
                         mapEntityIdToHeader = (0, lodash_es_1.cloneDeep)(this.state.mapEntityIdToHeader);
                         mapUserIdToHeader = (0, lodash_es_1.cloneDeep)(this.state.mapUserIdToHeader);
-                        entityIdColumnIndicies = (0, getColumnIndiciesWithType_1.getColumnIndiciesWithType)(this.props.data, synapseTypes_1.ColumnType.ENTITYID);
-                        userIdColumnIndicies = (0, getColumnIndiciesWithType_1.getColumnIndiciesWithType)(this.props.data, synapseTypes_1.ColumnType.USERID);
+                        entityIdColumnIndicies = (0, getColumnIndiciesWithType_1.getColumnIndiciesWithType)(data, synapseTypes_1.ColumnType.ENTITYID);
+                        userIdColumnIndicies = (0, getColumnIndiciesWithType_1.getColumnIndiciesWithType)(data, synapseTypes_1.ColumnType.USERID);
                         distinctEntityIds = (0, getUniqueEntities_1.getUniqueEntities)(data, mapEntityIdToHeader, entityIdColumnIndicies);
                         // also include row entity ids if this is a view (it's possible that the ID column was not selected)
-                        if (this.state.isEntityView) {
+                        if ((0, EntityTypeUtils_1.isEntityView)(entity)) {
                             queryResult = data.queryResult;
                             queryResults = queryResult.queryResults;
                             rows = queryResults.rows;
@@ -352,35 +321,35 @@ var SynapseTable = /** @class */ (function (_super) {
                         referenceList = Array.from(distinctEntityIds).map(function (id) {
                             return { targetId: id };
                         });
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         // initialize mapEntityIdToHeader
                         referenceList.forEach(function (el) {
                             mapEntityIdToHeader[el.targetId] = exports.EMPTY_HEADER;
                         });
-                        return [4 /*yield*/, utils_1.SynapseClient.getEntityHeaders(referenceList, this.context.accessToken)];
+                        return [4 /*yield*/, utils_1.SynapseClient.getEntityHeaders(referenceList, this.props.synapseContext.accessToken)];
                     case 2:
-                        data_1 = _a.sent();
+                        data_1 = _b.sent();
                         results = data_1.results;
                         results.forEach(function (el) {
                             mapEntityIdToHeader[el.id] = el;
                         });
                         return [3 /*break*/, 4];
                     case 3:
-                        err_1 = _a.sent();
+                        err_1 = _b.sent();
                         console.error('Error on retrieving entity header list , ', err_1);
                         return [3 /*break*/, 4];
                     case 4:
                         userPorfileIds = [];
                         if (!(distinctUserIds.size > 0)) return [3 /*break*/, 8];
                         ids = Array.from(distinctUserIds);
-                        _a.label = 5;
+                        _b.label = 5;
                     case 5:
-                        _a.trys.push([5, 7, , 8]);
-                        return [4 /*yield*/, utils_1.SynapseClient.getGroupHeadersBatch(ids, this.context.accessToken)];
+                        _b.trys.push([5, 7, , 8]);
+                        return [4 /*yield*/, utils_1.SynapseClient.getGroupHeadersBatch(ids, this.props.synapseContext.accessToken)];
                     case 6:
-                        data_2 = _a.sent();
+                        data_2 = _b.sent();
                         data_2.children.forEach(function (el) {
                             if (el.isIndividual) {
                                 userPorfileIds.push(el.ownerId);
@@ -391,23 +360,23 @@ var SynapseTable = /** @class */ (function (_super) {
                         });
                         return [3 /*break*/, 8];
                     case 7:
-                        err_2 = _a.sent();
+                        err_2 = _b.sent();
                         console.error('Error on getGroupHeaders batch: ', err_2);
                         return [3 /*break*/, 8];
                     case 8:
                         if (!(userPorfileIds.length > 0)) return [3 /*break*/, 12];
-                        _a.label = 9;
+                        _b.label = 9;
                     case 9:
-                        _a.trys.push([9, 11, , 12]);
+                        _b.trys.push([9, 11, , 12]);
                         return [4 /*yield*/, (0, getUserData_1.getUserProfileWithProfilePicAttached)(userPorfileIds)];
                     case 10:
-                        data_3 = _a.sent();
+                        data_3 = _b.sent();
                         data_3.list.forEach(function (el) {
                             mapUserIdToHeader[el.ownerId] = el;
                         });
                         return [3 /*break*/, 12];
                     case 11:
-                        err_3 = _a.sent();
+                        err_3 = _b.sent();
                         console.error('Error on getUserProfile : ', err_3);
                         return [3 /*break*/, 12];
                     case 12:
@@ -426,26 +395,24 @@ var SynapseTable = /** @class */ (function (_super) {
      */
     SynapseTable.prototype.render = function () {
         var _this = this;
-        if (this.props.isLoadingNewData) {
+        if (!this.props.queryContext.data &&
+            this.props.queryContext.isLoadingNewBundle) {
             return LoadingScreen_1.default;
         }
-        else if (!this.props.data) {
+        else if (!this.props.queryContext.data) {
             return React.createElement(React.Fragment, null);
         }
         // unpack all the data
-        var _a = this.props, data = _a.data, _b = _a.isLoading, isLoading = _b === void 0 ? true : _b, unitDescription = _a.unitDescription, showBarChart = _a.showBarChart, topLevelControlsState = _a.topLevelControlsState;
+        var _a = this.props, data = _a.queryContext.data, _b = _a.queryVisualizationContext, topLevelControlsState = _b.topLevelControlsState, unitDescription = _b.unitDescription;
         var queryResult = data.queryResult, _c = data.columnModels, columnModels = _c === void 0 ? [] : _c;
         var queryResults = queryResult.queryResults;
         var rows = queryResults.rows;
         var headers = queryResults.headers;
         var _d = data.facets, facets = _d === void 0 ? [] : _d;
         var _e = this.state, isExpanded = _e.isExpanded, isExportTableDownloadOpen = _e.isExportTableDownloadOpen;
-        var queryRequest = this.props.getLastQueryRequest();
+        var queryRequest = this.props.queryContext.getLastQueryRequest();
         var showFacetFilter = topLevelControlsState.showFacetFilter;
         var className = '';
-        if (showBarChart) {
-            className = 'SRC-marginBottomTop';
-        }
         var hasResults = data.queryResult.queryResults.rows.length > 0;
         // Show the No Results UI if the current page has no rows, and this is the first page of data (offset === 0).
         if (!hasResults && queryRequest.query.offset === 0) {
@@ -469,14 +436,14 @@ var SynapseTable = /** @class */ (function (_super) {
                 !showFacetFilter &&
                     unitDescription &&
                     !(0, sqlFunctions_1.isGroupByInSql)(queryRequest.query.sql) && (React.createElement("div", { className: "SRC-centerContent text-left", style: { minHeight: '20px' } },
-                    React.createElement(TotalQueryResults_1.default, { isLoading: isLoading, style: { fontSize: 15 }, unitDescription: unitDescription, lastQueryRequest: queryRequest, frontText: 'Showing', applyChanges: function (newFacets) {
+                    React.createElement(TotalQueryResults_1.default, { style: { fontSize: 15 }, frontText: 'Showing', applyChanges: function (newFacets) {
                             return _this.applyChangesFromQueryFilter(newFacets);
                         } }))),
                 React.createElement("div", null, table))));
         return (React.createElement(React.Fragment, null,
             isExpanded && (React.createElement(react_bootstrap_1.Modal, { animation: false, show: true, 
                 // @ts-ignore
-                onHide: function () { return _this.setState({ isExpanded: false }); }, dialogClassName: 'modal-90w', backdrop: 'static' },
+                onHide: function () { return _this.setState({ isExpanded: false }); }, dialogClassName: 'modal-90w', backdrop: "static" },
                 React.createElement(react_bootstrap_1.Modal.Header
                 // @ts-ignore
                 , { 
@@ -547,7 +514,7 @@ var SynapseTable = /** @class */ (function (_super) {
         ]);
         // add new items to where clause, but only if the column name corresponds to a real column in the table/view!
         // use row.values
-        if (this.props.data === undefined) {
+        if (this.props.queryContext.data === undefined) {
             return { synId: '', newSql: '' };
         }
         var whereIndex = tokens.findIndex(function (el) { return el[0] === 'WHERE'; });
@@ -580,18 +547,18 @@ var SynapseTable = /** @class */ (function (_super) {
     SynapseTable.prototype.createTableRows = function (rows, headers, isShowingAccessColumn, isShowingDownloadColumn, isShowingAddToV2DownloadListColumn, isRowSelectionVisible, tableEntityId) {
         var _this = this;
         var rowsFormatted = [];
-        var _a = this.props, data = _a.data, isColumnSelected = _a.isColumnSelected, selectedRowIndices = _a.selectedRowIndices, updateParentState = _a.updateParentState, _b = _a.columnLinks, columnLinks = _b === void 0 ? [] : _b;
-        var _c = data, _d = _c.selectColumns, selectColumns = _d === void 0 ? [] : _d, _e = _c.columnModels, columnModels = _e === void 0 ? [] : _e;
-        var _f = this.state, mapEntityIdToHeader = _f.mapEntityIdToHeader, mapUserIdToHeader = _f.mapUserIdToHeader;
+        var _a = this.props, _b = _a.queryContext, data = _b.data, entity = _b.entity, _c = _a.queryVisualizationContext, columnsToShowInTable = _c.columnsToShowInTable, selectedRowIndices = _c.selectedRowIndices, setSelectedRowIndices = _c.setSelectedRowIndices, _d = _a.columnLinks, columnLinks = _d === void 0 ? [] : _d;
+        var _e = data, _f = _e.selectColumns, selectColumns = _f === void 0 ? [] : _f, _g = _e.columnModels, columnModels = _g === void 0 ? [] : _g;
+        var _h = this.state, mapEntityIdToHeader = _h.mapEntityIdToHeader, mapUserIdToHeader = _h.mapUserIdToHeader;
         // find column indices that are COUNT type
-        var countColumnIndexes = this.getCountFunctionColumnIndexes(this.props.getLastQueryRequest().query.sql);
+        var countColumnIndexes = this.getCountFunctionColumnIndexes(this.props.queryContext.getLastQueryRequest().query.sql);
         rows.forEach(function (row, rowIndex) {
             var _a, _b;
             var entityVersionNumber = (_a = row.versionNumber) === null || _a === void 0 ? void 0 : _a.toString();
             var rowSynapseId = "syn" + row.rowId;
             var rowContent = row.values.map(function (columnValue, colIndex) {
                 var columnName = headers[colIndex].name;
-                var isColumnActive = isColumnSelected.includes(columnName);
+                var isColumnActive = columnsToShowInTable.includes(columnName);
                 var columnLinkConfig = columnLinks.find(function (el) {
                     return el.matchColumnName === columnName;
                 });
@@ -602,7 +569,7 @@ var SynapseTable = /** @class */ (function (_super) {
                     return (React.createElement("td", { className: "SRC_noBorderTop SRC-synapseTableTd", key: "(" + rowIndex + columnValue + colIndex + ")" },
                         isCountColumn && (React.createElement("a", { href: _this.showGroupRowData(row), target: "_blank", rel: "noopener noreferrer" },
                             React.createElement("p", { className: isBold }, columnValue))),
-                        !isCountColumn && (React.createElement(SynapseTableCell_1.SynapseTableCell, { columnType: headers[colIndex].columnType, columnValue: columnValue, isBold: isBold, mapEntityIdToHeader: mapEntityIdToHeader, mapUserIdToHeader: mapUserIdToHeader, rowIndex: rowIndex, columnLinkConfig: columnLinkConfig, columnName: columnName, tableEntityId: tableEntityId, rowData: row.values, selectColumns: selectColumns, columnModels: columnModels, isEntityView: _this.state.isEntityView, rowId: row.rowId, rowVersionNumber: row.versionNumber }))));
+                        !isCountColumn && (React.createElement(SynapseTableCell_1.SynapseTableCell, { columnType: headers[colIndex].columnType, columnValue: columnValue, isBold: isBold, mapEntityIdToHeader: mapEntityIdToHeader, mapUserIdToHeader: mapUserIdToHeader, rowIndex: rowIndex, columnLinkConfig: columnLinkConfig, columnName: columnName, tableEntityId: tableEntityId, rowData: row.values, selectColumns: selectColumns, columnModels: columnModels, isEntityView: !!(entity && (0, EntityTypeUtils_1.isEntityView)(entity)), rowId: row.rowId, rowVersionNumber: row.versionNumber }))));
                 }
                 return React.createElement("td", { className: "SRC-hidden", key: "(" + rowIndex + "," + colIndex + ")" });
             });
@@ -633,10 +600,8 @@ var SynapseTable = /** @class */ (function (_super) {
                                     cloneSelectedRowIndices.splice(index, 1);
                                 }
                             }
-                            // update parent state on change
-                            updateParentState({
-                                selectedRowIndices: cloneSelectedRowIndices,
-                            });
+                            // update context on change
+                            setSelectedRowIndices(cloneSelectedRowIndices);
                         } })));
             }
             var rowFormatted = React.createElement("tr", { key: row.rowId }, rowContent);
@@ -657,10 +622,10 @@ var SynapseTable = /** @class */ (function (_super) {
     SynapseTable.prototype.createTableHeader = function (headers, columnModels, facets, isShowingAccessColumn, isShowingDownloadColumn, isShowingAddToV2DownloadListColumn, isRowSelectionVisible, lastQueryRequest) {
         var _this = this;
         var _a = this.state, sortedColumnSelection = _a.sortedColumnSelection, columnIconSortState = _a.columnIconSortState;
-        var _b = this.props, _c = _b.facetAliases, facetAliases = _c === void 0 ? {} : _c, isColumnSelected = _b.isColumnSelected, lockedFacet = _b.lockedFacet;
+        var _b = this.props, _c = _b.queryVisualizationContext, _d = _c.facetAliases, facetAliases = _d === void 0 ? {} : _d, columnsToShowInTable = _c.columnsToShowInTable, lockedFacet = _b.queryContext.lockedFacet;
         var tableColumnHeaderElements = headers.map(function (column, index) {
             var _a;
-            var isHeaderSelected = isColumnSelected.includes(column.name);
+            var isHeaderSelected = columnsToShowInTable.includes(column.name);
             if (isHeaderSelected) {
                 // for background color
                 var isSelected = _this.findSelectionIndex(sortedColumnSelection, column.name) !== -1;
@@ -745,7 +710,7 @@ var SynapseTable = /** @class */ (function (_super) {
     // Direct user to corresponding query on synapse
     SynapseTable.prototype.advancedSearch = function (event) {
         event && event.preventDefault();
-        var lastQueryRequest = this.props.getLastQueryRequest();
+        var lastQueryRequest = this.props.queryContext.getLastQueryRequest();
         var query = lastQueryRequest.query;
         // base 64 encode the json of the query and go to url with the encoded object
         var encodedQuery = btoa(JSON.stringify(query));
@@ -753,7 +718,7 @@ var SynapseTable = /** @class */ (function (_super) {
         window.open(getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Synapse:" + synTable + "/tables/query/" + encodedQuery, '_blank');
     };
     SynapseTable.prototype.getLengthOfPropsData = function () {
-        var data = this.props.data;
+        var data = this.props.queryContext.data;
         return data.queryResult.queryResults.headers.length;
     };
     /**
@@ -774,7 +739,6 @@ var SynapseTable = /** @class */ (function (_super) {
                 (0, QueryFilter_1.applyChangesToValuesColumn)(lastQueryRequest, facetColumnResult, _this.applyChangesFromQueryFilter);
             } }));
     };
-    SynapseTable.contextType = SynapseContext_1.SynapseContext;
     return SynapseTable;
 }(React.Component));
 exports.default = SynapseTable;