synapse-react-client 2.0.44 → 2.0.45

package/dist/containers/entity_finder/details/configurations/SearchDetails.js

@@ -2,35 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchDetails = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = (0, tslib_1.__importStar)(require("react"));
 var react_error_boundary_1 = require("react-error-boundary");
 var useSearch_1 = require("../../../../utils/hooks/SynapseAPI/useSearch");
 var ErrorUtils_1 = require("../../../../utils/ErrorUtils");
 var DetailsView_1 = require("../view/DetailsView");
 var SearchDetails = function (_a) {
     var _b;
-    var searchQuery = _a.searchQuery, sharedProps = tslib_1.__rest(_a, ["searchQuery"]);
-    var _c = useSearch_1.useSearchInfinite(searchQuery, {
+    var searchQuery = _a.searchQuery, sharedProps = (0, tslib_1.__rest)(_a, ["searchQuery"]);
+    var _c = (0, useSearch_1.useSearchInfinite)(searchQuery, {
         enabled: !!searchQuery.queryTerm,
-    }), data = _c.data, status = _c.status, isFetching = _c.isFetching, hasNextPage = _c.hasNextPage, fetchNextPage = _c.fetchNextPage, error = _c.error, isError = _c.isError;
-    var handleError = react_error_boundary_1.useErrorHandler();
-    react_1.useEffect(function () {
+    }), data = _c.data, isLoading = _c.isLoading, hasNextPage = _c.hasNextPage, fetchNextPage = _c.fetchNextPage, isFetchingNextPage = _c.isFetchingNextPage, error = _c.error, isError = _c.isError;
+    var handleError = (0, react_error_boundary_1.useErrorHandler)();
+    (0, react_1.useEffect)(function () {
         if (isError && error) {
-            handleError(ErrorUtils_1.toError(error));
+            handleError((0, ErrorUtils_1.toError)(error));
         }
     }, [isError, error, handleError]);
     if (searchQuery.queryTerm) {
-        return (react_1.default.createElement(DetailsView_1.DetailsView, tslib_1.__assign({ entities: (_b = data === null || data === void 0 ? void 0 : data.pages.flatMap(function (page) { return page.hits; })) !== null && _b !== void 0 ? _b : [], queryStatus: status, queryIsFetching: isFetching, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, noResultsPlaceholder: react_1.default.createElement(react_1.default.Fragment, null,
+        return (react_1.default.createElement(DetailsView_1.DetailsView, (0, tslib_1.__assign)({ entities: (_b = data === null || data === void 0 ? void 0 : data.pages.flatMap(function (page) { return page.hits; })) !== null && _b !== void 0 ? _b : [], isLoading: isLoading, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isFetchingNextPage: isFetchingNextPage, noResultsPlaceholder: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("img", { className: "SearchPlaceholderImage", alt: "No results found", src: "https://s3.amazonaws.com/static.synapse.org/images/search-sad.svg" }),
                 react_1.default.createElement("p", null,
                     "No results for \u201C",
                     searchQuery.queryTerm.join(' '),
-                    "\u201D")) }, sharedProps)));
+                    "\u201D")) }, sharedProps, { enableSelectAll: false })));
     }
     else {
-        return (react_1.default.createElement(DetailsView_1.DetailsView, tslib_1.__assign({ entities: [], queryStatus: 'success', queryIsFetching: false, hasNextPage: false, noResultsPlaceholder: react_1.default.createElement(react_1.default.Fragment, null,
+        return (react_1.default.createElement(DetailsView_1.DetailsView, (0, tslib_1.__assign)({ entities: [], isLoading: false, hasNextPage: false, noResultsPlaceholder: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("img", { className: "SearchPlaceholderImage", alt: "Begin searching", src: "https://s3.amazonaws.com/static.synapse.org/images/search-happy.svg" }),
-                react_1.default.createElement("p", null, "Enter a term or Synapse ID to start searching")) }, sharedProps)));
+                react_1.default.createElement("p", null, "Enter a term or Synapse ID to start searching")) }, sharedProps, { enableSelectAll: false })));
     }
 };
 exports.SearchDetails = SearchDetails;

package/dist/containers/entity_finder/details/configurations/SearchDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchDetails.js","sourceRoot":"","sources":["../../../../../src/lib/containers/entity_finder/details/configurations/SearchDetails.tsx"],"names":[],"mappings":";;;;AAAA,qDAAwC;AACxC,6DAAsD;AACtD,0EAAgF;AAEhF,2DAAsD;AAEtD,mDAAiD;AAM1C,IAAM,aAAa,GAAgD,UAAC,EAG1E;;IAFC,IAAA,WAAW,iBAAA,EACR,WAAW,sBAF2D,eAG1E,CADe;IAER,IAAA,KAQF,6BAAiB,CAAC,WAAW,EAAE;QACjC,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,SAAS;KACjC,CAAC,EATA,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,OAAO,aAGP,CAAA;IACF,IAAM,WAAW,GAAG,sCAAe,EAAE,CAAA;IAErC,iBAAS,CAAC;QACR,IAAI,OAAO,IAAI,KAAK,EAAE;YACpB,WAAW,CAAC,oBAAO,CAAC,KAAK,CAAC,CAAC,CAAA;SAC5B;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IAEjC,IAAI,WAAW,CAAC,SAAS,EAAE;QACzB,OAAO,CACL,8BAAC,yBAAW,qBACV,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,EAAT,CAAS,CAAC,mCAAI,EAAE,EACtD,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAClB;gBACE,uCACE,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,kBAAkB,EACtB,GAAG,EAAC,mEAAmE,GACvE;gBACF;;oBACyB,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;6BACpD,CACH,IAED,WAAW,EACf,CACH,CAAA;KACF;SAAM;QACL,OAAO,CACL,8BAAC,yBAAW,qBACV,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,SAAS,EACtB,eAAe,EAAE,KAAK,EACtB,WAAW,EAAE,KAAK,EAClB,oBAAoB,EAClB;gBACE,uCACE,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,iBAAiB,EACrB,GAAG,EAAC,qEAAqE,GACzE;gBACF,yFAAoD,CACnD,IAED,WAAW,EACf,CACH,CAAA;KACF;AACH,CAAC,CAAA;AAnEY,QAAA,aAAa,iBAmEzB"}
+{"version":3,"file":"SearchDetails.js","sourceRoot":"","sources":["../../../../../src/lib/containers/entity_finder/details/configurations/SearchDetails.tsx"],"names":[],"mappings":";;;;AAAA,0DAAwC;AACxC,6DAAsD;AACtD,0EAAgF;AAEhF,2DAAsD;AAEtD,mDAAiD;AAM1C,IAAM,aAAa,GAAgD,UAAC,EAG1E;;IAFC,IAAA,WAAW,iBAAA,EACR,WAAW,2BAF2D,eAG1E,CADe;IAER,IAAA,KAQF,IAAA,6BAAiB,EAAC,WAAW,EAAE;QACjC,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,SAAS;KACjC,CAAC,EATA,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,KAAK,WAAA,EACL,OAAO,aAGP,CAAA;IACF,IAAM,WAAW,GAAG,IAAA,sCAAe,GAAE,CAAA;IAErC,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,IAAI,KAAK,EAAE;YACpB,WAAW,CAAC,IAAA,oBAAO,EAAC,KAAK,CAAC,CAAC,CAAA;SAC5B;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IAEjC,IAAI,WAAW,CAAC,SAAS,EAAE;QACzB,OAAO,CACL,8BAAC,yBAAW,0BACV,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,EAAT,CAAS,CAAC,mCAAI,EAAE,EACtD,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,kBAAkB,EACtC,oBAAoB,EAClB;gBACE,uCACE,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,kBAAkB,EACtB,GAAG,EAAC,mEAAmE,GACvE;gBACF;;oBACyB,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;6BACpD,CACH,IAED,WAAW,IACf,eAAe,EAAE,KAAK,IACtB,CACH,CAAA;KACF;SAAM;QACL,OAAO,CACL,8BAAC,yBAAW,0BACV,QAAQ,EAAE,EAAE,EACZ,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,KAAK,EAClB,oBAAoB,EAClB;gBACE,uCACE,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,iBAAiB,EACrB,GAAG,EAAC,qEAAqE,GACzE;gBACF,yFAAoD,CACnD,IAED,WAAW,IACf,eAAe,EAAE,KAAK,IACtB,CACH,CAAA;KACF;AACH,CAAC,CAAA;AApEY,QAAA,aAAa,iBAoEzB"}

package/dist/containers/entity_finder/details/configurations/useGetIsAllSelectedInfiniteList.d.ts

@@ -0,0 +1,39 @@
+import { Map } from 'immutable';
+import { FetchNextPageOptions, InfiniteQueryObserverResult } from 'react-query';
+import { SynapseClientError } from '../../../../utils/SynapseClient';
+import { EntityHeader, EntityType, ProjectHeader } from '../../../../utils/synapseTypes';
+import { Hit } from '../../../../utils/synapseTypes/Search';
+/**
+ * Given a list of entities and a map of which are selected, return a boolean indicating if all of the entities that can be selected
+ * are selected.
+ *
+ * This function is compatible with react-query's useInfiniteQuery pagination, in which case it's recommended to use the hook version
+ * of this function to get updates as pages are fetched and updated.
+ *
+ * We don't currently support an indeterminate checkbox state because that would require always fetching all pages of a given query, which does not scale.
+ * @param entities An arbitrary list of entities that are displayed
+ * @param selected A map where keys are selected entity IDs
+ * @param selectableTypes A list of entity types which can be selected. Will be used to filter the list of entities
+ * @param hasNextPage Whether or not there are additional pages of entities (typically supplied by useInfiniteQuery)
+ * @param fetchNextPage A function to be invoked to fetch an additional page of entities (typically supplied by useInfiniteQuery)
+ * @param isFetchingNextPage Indicates if the next page of entities is being fetched (typically supplied by useInfiniteQuery)
+ * @returns  true iff all selectable entities have been selected, and there are no additional pages to fetch (because an unfetched page may include an unselected entity)
+ */
+export declare function getIsAllSelectedFromInfiniteList<T>(entities: (EntityHeader | ProjectHeader | Hit)[], selected: Map<string, number>, selectableTypes: EntityType[], hasNextPage?: boolean | undefined, fetchNextPage?: (options?: FetchNextPageOptions | undefined) => Promise<InfiniteQueryObserverResult<T, SynapseClientError>>, isFetchingNextPage?: boolean): boolean;
+/**
+/**
+ * Given a list of entities and a map of which are selected, return a boolean indicating if all of the entities that can be selected
+ * are selected.
+ *
+ * This function is compatible with react-query's useInfiniteQuery pagination.
+ *
+ * There is also a non-hook version of this function that can be called in contexts where hooks cannot be used.
+ * @param entities An arbitrary list of entities that are displayed
+ * @param selected A map where keys are selected entity IDs
+ * @param selectableTypes A list of entity types which can be selected. Will be used to filter the list of entities
+ * @param hasNextPage Whether or not there are additional pages of entities (typically supplied by useInfiniteQuery)
+ * @param fetchNextPage A function to be invoked to fetch an additional page of entities (typically supplied by useInfiniteQuery)
+ * @param isFetchingNextPage Indicates if the next page of entities is being fetched (typically supplied by useInfiniteQuery)
+ * @returns  true iff all selectable entities have been selected, and there are no additional pages to fetch (because an unfetched page may include an unselected entity)
+ */
+export default function useGetIsAllSelectedFromInfiniteList<T>(entities: (EntityHeader | ProjectHeader | Hit)[], selected: Map<string, number>, selectableTypes: EntityType[], hasNextPage?: boolean | undefined, fetchNextPage?: (options?: FetchNextPageOptions | undefined) => Promise<InfiniteQueryObserverResult<T, SynapseClientError>>, isFetchingNextPage?: boolean): boolean;

package/dist/containers/entity_finder/details/configurations/useGetIsAllSelectedInfiniteList.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIsAllSelectedFromInfiniteList = void 0;
+var react_1 = require("react");
+var EntityTypeUtils_1 = require("../../../../utils/functions/EntityTypeUtils");
+/**
+ * Given a list of entities and a map of which are selected, return a boolean indicating if all of the entities that can be selected
+ * are selected.
+ *
+ * This function is compatible with react-query's useInfiniteQuery pagination, in which case it's recommended to use the hook version
+ * of this function to get updates as pages are fetched and updated.
+ *
+ * We don't currently support an indeterminate checkbox state because that would require always fetching all pages of a given query, which does not scale.
+ * @param entities An arbitrary list of entities that are displayed
+ * @param selected A map where keys are selected entity IDs
+ * @param selectableTypes A list of entity types which can be selected. Will be used to filter the list of entities
+ * @param hasNextPage Whether or not there are additional pages of entities (typically supplied by useInfiniteQuery)
+ * @param fetchNextPage A function to be invoked to fetch an additional page of entities (typically supplied by useInfiniteQuery)
+ * @param isFetchingNextPage Indicates if the next page of entities is being fetched (typically supplied by useInfiniteQuery)
+ * @returns  true iff all selectable entities have been selected, and there are no additional pages to fetch (because an unfetched page may include an unselected entity)
+ */
+function getIsAllSelectedFromInfiniteList(entities, selected, selectableTypes, hasNextPage, fetchNextPage, isFetchingNextPage) {
+    if (entities.length === 0 || selected.size === 0) {
+        return false;
+    }
+    else {
+        var allFetchedChildrenAreSelected = entities.every(function (e) {
+            return selected.has(e.id) ||
+                !selectableTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(e));
+        });
+        if (allFetchedChildrenAreSelected &&
+            hasNextPage &&
+            fetchNextPage &&
+            !isFetchingNextPage) {
+            fetchNextPage();
+            return false;
+        }
+        else if (allFetchedChildrenAreSelected &&
+            !hasNextPage &&
+            !isFetchingNextPage) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
+exports.getIsAllSelectedFromInfiniteList = getIsAllSelectedFromInfiniteList;
+/**
+/**
+ * Given a list of entities and a map of which are selected, return a boolean indicating if all of the entities that can be selected
+ * are selected.
+ *
+ * This function is compatible with react-query's useInfiniteQuery pagination.
+ *
+ * There is also a non-hook version of this function that can be called in contexts where hooks cannot be used.
+ * @param entities An arbitrary list of entities that are displayed
+ * @param selected A map where keys are selected entity IDs
+ * @param selectableTypes A list of entity types which can be selected. Will be used to filter the list of entities
+ * @param hasNextPage Whether or not there are additional pages of entities (typically supplied by useInfiniteQuery)
+ * @param fetchNextPage A function to be invoked to fetch an additional page of entities (typically supplied by useInfiniteQuery)
+ * @param isFetchingNextPage Indicates if the next page of entities is being fetched (typically supplied by useInfiniteQuery)
+ * @returns  true iff all selectable entities have been selected, and there are no additional pages to fetch (because an unfetched page may include an unselected entity)
+ */
+function useGetIsAllSelectedFromInfiniteList(entities, selected, selectableTypes, hasNextPage, fetchNextPage, isFetchingNextPage) {
+    var _a = (0, react_1.useState)(false), isSelectAll = _a[0], setIsSelectAll = _a[1];
+    (0, react_1.useEffect)(function () {
+        setIsSelectAll(getIsAllSelectedFromInfiniteList(entities, selected, selectableTypes, hasNextPage, fetchNextPage, isFetchingNextPage));
+    }, [
+        entities,
+        fetchNextPage,
+        hasNextPage,
+        selected,
+        selectableTypes,
+        isFetchingNextPage,
+    ]);
+    return isSelectAll;
+}
+exports.default = useGetIsAllSelectedFromInfiniteList;
+//# sourceMappingURL=useGetIsAllSelectedInfiniteList.js.map

package/dist/containers/entity_finder/details/configurations/useGetIsAllSelectedInfiniteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetIsAllSelectedInfiniteList.js","sourceRoot":"","sources":["../../../../../src/lib/containers/entity_finder/details/configurations/useGetIsAllSelectedInfiniteList.ts"],"names":[],"mappings":";;;AACA,+BAA2C;AAE3C,+EAAqF;AASrF;;;;;;;;;;;;;;;GAeG;AACH,SAAgB,gCAAgC,CAC9C,QAAgD,EAChD,QAA6B,EAC7B,eAA6B,EAC7B,WAAiC,EACjC,aAEgE,EAChE,kBAA4B;IAE5B,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE;QAChD,OAAO,KAAK,CAAA;KACb;SAAM;QACL,IAAM,6BAA6B,GAAG,QAAQ,CAAC,KAAK,CAClD,UAAA,CAAC;YACC,OAAA,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClB,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAA,yCAAuB,EAAC,CAAC,CAAC,CAAC;QADrD,CACqD,CACxD,CAAA;QACD,IACE,6BAA6B;YAC7B,WAAW;YACX,aAAa;YACb,CAAC,kBAAkB,EACnB;YACA,aAAa,EAAE,CAAA;YACf,OAAO,KAAK,CAAA;SACb;aAAM,IACL,6BAA6B;YAC7B,CAAC,WAAW;YACZ,CAAC,kBAAkB,EACnB;YACA,OAAO,IAAI,CAAA;SACZ;aAAM;YACL,OAAO,KAAK,CAAA;SACb;KACF;AACH,CAAC;AApCD,4EAoCC;AAED;;;;;;;;;;;;;;;GAeG;AACH,SAAwB,mCAAmC,CACzD,QAAgD,EAChD,QAA6B,EAC7B,eAA6B,EAC7B,WAAiC,EACjC,aAEgE,EAChE,kBAA4B;IAEtB,IAAA,KAAgC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA9C,WAAW,QAAA,EAAE,cAAc,QAAmB,CAAA;IACrD,IAAA,iBAAS,EAAC;QACR,cAAc,CACZ,gCAAgC,CAC9B,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,WAAW,EACX,aAAa,EACb,kBAAkB,CACnB,CACF,CAAA;IACH,CAAC,EAAE;QACD,QAAQ;QACR,aAAa;QACb,WAAW;QACX,QAAQ;QACR,eAAe;QACf,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO,WAAW,CAAA;AACpB,CAAC;AAhCD,sDAgCC"}

package/dist/containers/entity_finder/details/view/DetailsView.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-import { QueryStatus } from 'react-query';
-import { Direction, EntityHeader, ProjectHeader, SortBy } from '../../../../utils/synapseTypes';
+import { Direction, EntityHeader, EntityType, ProjectHeader, SortBy } from '../../../../utils/synapseTypes';
 import { Hit } from '../../../../utils/synapseTypes/Search';
 import { EntityDetailsListSharedProps } from '../EntityDetailsList';
 export declare type DetailsViewProps = EntityDetailsListSharedProps & {
     entities: (EntityHeader | ProjectHeader | Hit)[];
-    queryStatus: QueryStatus;
-    queryIsFetching: boolean;
+    isLoading: boolean;
     hasNextPage?: boolean;
-    fetchNextPage?: () => void;
+    fetchNextPage?: () => Promise<any>;
+    isFetchingNextPage?: boolean;
     /** The current sort of the view. If the view cannot be sorted, set this to `undefined` */
     sort?: {
         sortBy: SortBy;
@@ -17,6 +16,20 @@ export declare type DetailsViewProps = EntityDetailsListSharedProps & {
     /** If sortable, `setSort` will be invoked when the user tries to change the sort */
     setSort?: (soryBy: SortBy, sortDirection: Direction) => void;
     noResultsPlaceholder?: React.ReactElement;
+    /** We defer to the configuration component to determine this */
+    selectAllIsChecked?: boolean;
+    autoSizeWidth: boolean;
+};
+/**
+ * Describes the shape of the data passed to the BaseTable
+ */
+export declare type DetailsViewRowData = (EntityHeader | ProjectHeader | Hit) & {
+    entityType: EntityType;
+    isSelected: boolean;
+    isHidden: boolean;
+    isDisabled: boolean;
+    isVersionableEntity: boolean;
+    currentSelectedVersion?: number;
 };
 /**
  * Displays a list of entities in a table.

package/dist/containers/entity_finder/details/view/DetailsView.js

@@ -2,15 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DetailsView = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_intersection_observer_1 = require("react-intersection-observer");
-var Sort_1 = tslib_1.__importDefault(require("../../../../assets/icons/Sort"));
+var react_base_table_1 = (0, tslib_1.__importStar)(require("@sage-bionetworks/react-base-table"));
+var lodash_es_1 = require("lodash-es");
+var react_1 = (0, tslib_1.__importStar)(require("react"));
+var react_query_1 = require("react-query");
+var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
 var EntityTypeUtils_1 = require("../../../../utils/functions/EntityTypeUtils");
+var SynapseClient_1 = require("../../../../utils/SynapseClient");
+var SynapseContext_1 = require("../../../../utils/SynapseContext");
 var synapseTypes_1 = require("../../../../utils/synapseTypes");
-var ErrorBanner_1 = require("../../../ErrorBanner");
+var EntityBadgeIcons_1 = require("../../../EntityBadgeIcons");
 var HelpButtonPopover_1 = require("../../../HelpButtonPopover");
 var LoadingScreen_1 = require("../../../LoadingScreen");
-var DetailsViewRow_1 = require("./DetailsViewRow");
+var Checkbox_1 = require("../../../widgets/Checkbox");
+var EntityFinder_1 = require("../../EntityFinder");
+var DetailsViewTableRenderers_1 = require("./DetailsViewTableRenderers");
+// Borrowed from: https://github.com/wwayne/react-tooltip/issues/300#issuecomment-468042592
+var rebuildTooltip = (0, lodash_es_1.debounce)(function () { return react_tooltip_1.default.rebuild(); }, 200, {
+    leading: false,
+    trailing: true,
+});
 /**
  * Displays a list of entities in a table.
  *
@@ -21,86 +32,240 @@ var DetailsViewRow_1 = require("./DetailsViewRow");
  * @param param0
  */
 var DetailsView = function (_a) {
-    var entities = _a.entities, queryStatus = _a.queryStatus, queryIsFetching = _a.queryIsFetching, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, showVersionSelection = _a.showVersionSelection, mustSelectVersionNumber = _a.mustSelectVersionNumber, selectColumnType = _a.selectColumnType, selected = _a.selected, visibleTypes = _a.visibleTypes, selectableTypes = _a.selectableTypes, toggleSelection = _a.toggleSelection, sort = _a.sort, setSort = _a.setSort, noResultsPlaceholder = _a.noResultsPlaceholder;
-    // Load the next page when this ref comes into view.
-    var _b = react_intersection_observer_1.useInView(), ref = _b.ref, inView = _b.inView;
+    var entities = _a.entities, isLoading = _a.isLoading, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isFetchingNextPage = _a.isFetchingNextPage, showVersionSelection = _a.showVersionSelection, mustSelectVersionNumber = _a.mustSelectVersionNumber, selectColumnType = _a.selectColumnType, selected = _a.selected, visibleTypes = _a.visibleTypes, selectableTypes = _a.selectableTypes, toggleSelection = _a.toggleSelection, sort = _a.sort, setSort = _a.setSort, noResultsPlaceholder = _a.noResultsPlaceholder, enableSelectAll = _a.enableSelectAll, _b = _a.selectAllIsChecked, selectAllIsChecked = _b === void 0 ? false : _b, autoSizeWidth = _a.autoSizeWidth;
+    var queryClient = (0, react_query_1.useQueryClient)();
+    var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
     var showSelectColumn = selectColumnType !== 'none';
+    var _c = (0, react_1.useState)(false), shouldSelectAll = _c[0], setShouldSelectAll = _c[1];
+    var _d = (0, react_1.useState)(false), showLoadingScreen = _d[0], setShowLoadingScreen = _d[1];
     var determineRowAppearance = function (entity) {
-        if (!visibleTypes.includes(EntityTypeUtils_1.getEntityTypeFromHeader(entity))) {
+        if (!visibleTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(entity))) {
             return 'hidden';
         }
-        else if (!selectableTypes.includes(EntityTypeUtils_1.getEntityTypeFromHeader(entity))) {
+        else if (!selectableTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(entity))) {
             return 'disabled';
         }
-        else if (selected.map(function (e) { return e.targetId; }).includes(entity.id)) {
+        else if (selected.has(entity.id)) {
             return 'selected';
         }
         else {
             return 'default';
         }
     };
-    react_1.useEffect(function () {
-        if (queryStatus === 'success' &&
-            !queryIsFetching &&
-            hasNextPage &&
-            fetchNextPage &&
-            inView) {
-            fetchNextPage();
+    (0, react_1.useEffect)(function () {
+        function handleSelectAll() {
+            return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+                var _a;
+                var _this = this;
+                return (0, tslib_1.__generator)(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!shouldSelectAll) return [3 /*break*/, 5];
+                            if (!(hasNextPage && fetchNextPage)) return [3 /*break*/, 1];
+                            // Show the loading screen since we must fetch data (potentially a lot) to finish the task
+                            setShowLoadingScreen(true);
+                            if (!isFetchingNextPage) {
+                                fetchNextPage();
+                            }
+                            return [3 /*break*/, 5];
+                        case 1:
+                            if (!selectAllIsChecked) return [3 /*break*/, 2];
+                            // All of the items are selected, so we will deselect all
+                            toggleSelection(entities
+                                .filter(function (e) {
+                                // Collect just entities that are selected
+                                // An entity may be in the list and unselected because it isn't of a selectable type
+                                return selected.has(e.id);
+                            })
+                                .map(function (e) {
+                                var selectedVersion = selected.get(e.id);
+                                return {
+                                    targetId: e.id,
+                                    targetVersionNumber: selectedVersion === EntityFinder_1.NO_VERSION_NUMBER
+                                        ? undefined
+                                        : selectedVersion,
+                                };
+                            }));
+                            return [3 /*break*/, 4];
+                        case 2:
+                            // Not all of the items are selected, so we will select all
+                            _a = toggleSelection;
+                            return [4 /*yield*/, Promise.all(entities
+                                    .filter(function (e) {
+                                    // must filter just selectable types or else any entities of unselectable types will get selected
+                                    var type = (0, EntityTypeUtils_1.getEntityTypeFromHeader)(e);
+                                    // also exclude already-selected entities, since we don't want to toggle those
+                                    return (!selected.has(e.id) &&
+                                        selectableTypes.includes(type) &&
+                                        visibleTypes.includes(type));
+                                })
+                                    .map(function (e) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                                    var latestVersion, versions;
+                                    var _a;
+                                    return (0, tslib_1.__generator)(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                if (!(mustSelectVersionNumber &&
+                                                    (0, EntityTypeUtils_1.isVersionableEntityType)((0, EntityTypeUtils_1.getEntityTypeFromHeader)(e)))) return [3 /*break*/, 2];
+                                                // If `mustSelectVersionNumber` is true, then we need to supply a version with the entity.
+                                                // We may already have the version from the header:
+                                                if (Object.prototype.hasOwnProperty.call(e, 'versionNumber')) {
+                                                    latestVersion = e.versionNumber;
+                                                }
+                                                if (!!latestVersion) return [3 /*break*/, 2];
+                                                // Failsafe if we didn't get the version in the header. This is rare/unlikely, since the only cases we're sure we don't get versions are:
+                                                //  - ProjectHeaders (which are versionless)
+                                                //  - Search Results (for which we don't support Select All)
+                                                // For large lists, there's a good chance for this to trigger throttling.
+                                                // Show the loading screen since we must fetch data (potentially a lot) to finish the task
+                                                setShowLoadingScreen(true);
+                                                return [4 /*yield*/, queryClient.fetchQuery(['entity', e.id, 'versions', { offset: 0, limit: 1 }], function () { return (0, SynapseClient_1.getEntityVersions)(e.id, accessToken, 0, 1); })
+                                                    // we pick the first version in the list because it is the most recent
+                                                ];
+                                            case 1:
+                                                versions = _b.sent();
+                                                // we pick the first version in the list because it is the most recent
+                                                latestVersion = (_a = versions.results[0]) === null || _a === void 0 ? void 0 : _a.versionNumber;
+                                                _b.label = 2;
+                                            case 2: return [2 /*return*/, {
+                                                    targetId: e.id,
+                                                    targetVersionNumber: latestVersion,
+                                                }];
+                                        }
+                                    });
+                                }); }))];
+                        case 3:
+                            // Not all of the items are selected, so we will select all
+                            _a.apply(void 0, [_b.sent()]);
+                            _b.label = 4;
+                        case 4:
+                            setShouldSelectAll(false);
+                            setShowLoadingScreen(false);
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
         }
-    }, [queryStatus, queryIsFetching, hasNextPage, fetchNextPage, inView]);
-    var showInteractiveSortIcon = function (columnSortBy) {
-        return (sort &&
-            setSort && (react_1.default.createElement(Sort_1.default, { role: "button", style: { height: '20px' }, active: sort.sortBy === columnSortBy, direction: sort.sortBy === columnSortBy ? sort.sortDirection : synapseTypes_1.Direction.DESC, onClick: function () {
-                if (sort.sortBy === columnSortBy) {
-                    setSort(sort.sortBy, sort.sortDirection === synapseTypes_1.Direction.ASC
-                        ? synapseTypes_1.Direction.DESC
-                        : synapseTypes_1.Direction.ASC);
+        handleSelectAll();
+    }, [
+        accessToken,
+        entities,
+        fetchNextPage,
+        hasNextPage,
+        mustSelectVersionNumber,
+        queryClient,
+        isFetchingNextPage,
+        selectAllIsChecked,
+        selectableTypes,
+        selected,
+        shouldSelectAll,
+        toggleSelection,
+        visibleTypes,
+    ]);
+    var tableData = entities.map(function (e) {
+        var appearance = determineRowAppearance(e);
+        var entityType = (0, EntityTypeUtils_1.getEntityTypeFromHeader)(e);
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, e), { entityType: entityType, isSelected: appearance === 'selected', isHidden: appearance === 'hidden', isDisabled: appearance === 'disabled', isVersionableEntity: (0, EntityTypeUtils_1.isVersionableEntityType)(entityType), currentSelectedVersion: selected.get(e.id) });
+    });
+    var SelectAllCheckboxRenderer = (0, react_1.useMemo)(function () {
+        // Enabled if there's at least one visble & selectable entity, OR there's a page we haven't fetched
+        var isEnabled = hasNextPage ||
+            entities.filter(function (e) {
+                return selectableTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(e)) &&
+                    visibleTypes.includes((0, EntityTypeUtils_1.getEntityTypeFromHeader)(e));
+            }).length > 0;
+        return (enableSelectAll && (react_1.default.createElement("div", { "data-testid": "Select All", style: isEnabled ? { cursor: 'pointer' } : { cursor: 'not-allowed' }, onClick: function () {
+                if (isEnabled) {
+                    setShouldSelectAll(true);
                 }
-                else {
-                    setSort(columnSortBy, synapseTypes_1.Direction.DESC);
-                }
-            } })));
-    };
-    return (react_1.default.createElement("div", { className: "EntityFinderDetailsView" },
-        react_1.default.createElement("table", null,
-            react_1.default.createElement("thead", { className: entities.length === 0 ? 'Inactive' : '' },
-                react_1.default.createElement("tr", null,
-                    showSelectColumn && react_1.default.createElement("th", { className: "IsSelectedColumn" }),
-                    react_1.default.createElement("th", { className: "EntityIconColumn" }),
-                    react_1.default.createElement("th", { className: "NameColumn" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", null, "Name"),
-                            react_1.default.createElement("span", null, showInteractiveSortIcon(synapseTypes_1.SortBy.NAME)))),
-                    react_1.default.createElement("th", { className: "AccessColumn" }),
-                    react_1.default.createElement("th", { className: "IdColumn" },
-                        react_1.default.createElement("div", null, "ID")),
-                    showVersionSelection && (react_1.default.createElement("th", { className: "VersionColumn" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", null,
-                                "Version",
-                                react_1.default.createElement(HelpButtonPopover_1.HelpButtonPopover, { contentMarkdown: 'Allows you to choose which version of this item you would like to perform this action on. If you would like the selected reference to update as new versions are created, choose “Always Latest Version”' }))))),
-                    react_1.default.createElement("th", { className: "CreatedOnColumn" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", null, "Created On"),
-                            react_1.default.createElement("span", null, showInteractiveSortIcon(synapseTypes_1.SortBy.CREATED_ON)))),
-                    react_1.default.createElement("th", { className: "ModifiedOnColumn" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", null, "Modified On"),
-                            react_1.default.createElement("span", null, showInteractiveSortIcon(synapseTypes_1.SortBy.MODIFIED_ON)))),
-                    react_1.default.createElement("th", { className: "ModifiedByColumn" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("span", null, "Modified By"))))),
-            react_1.default.createElement("tbody", { className: "EntityFinderDetailsView__TableBody" }, entities === null || entities === void 0 ? void 0 :
-                entities.map(function (entity) {
-                    var _a;
-                    return (react_1.default.createElement(ErrorBanner_1.SynapseErrorBoundary, { FallbackComponent: ErrorBanner_1.TableRowFallbackComponent, key: entity.id },
-                        react_1.default.createElement(DetailsViewRow_1.DetailsViewRow, { entityHeader: entity, appearance: determineRowAppearance(entity), selectedVersion: (_a = selected.find(function (e) { return e.targetId === entity.id; })) === null || _a === void 0 ? void 0 : _a.targetVersionNumber, showVersionColumn: showVersionSelection, mustSelectVersionNumber: mustSelectVersionNumber, selectButtonType: selectColumnType, toggleSelection: toggleSelection })));
-                }),
-                react_1.default.createElement("tr", { ref: ref }))),
-        entities.length === 0 && (react_1.default.createElement("div", { className: "EntityFinderDetailsView__Placeholder" },
-            queryStatus !== 'loading' &&
-                (noResultsPlaceholder || react_1.default.createElement("div", null, "Empty")),
-            queryStatus === 'loading' && react_1.default.createElement(LoadingScreen_1.SynapseSpinner, { size: 30 })))));
+            } },
+            react_1.default.createElement(Checkbox_1.Checkbox, { label: "", className: "SRC-pointer-events-none", checked: selectAllIsChecked, disabled: !isEnabled, onChange: function () {
+                    // no-op
+                } }))));
+    }, [enableSelectAll, entities, selectAllIsChecked, selectableTypes]);
+    var sortState = {};
+    if (sort) {
+        sortState[sort.sortBy] = sort.sortDirection.toLowerCase();
+    }
+    return (react_1.default.createElement("div", { className: "EntityFinderDetailsView bootstrap-4-backport" },
+        react_1.default.createElement(LoadingScreen_1.BlockingLoader, { show: showLoadingScreen }),
+        react_1.default.createElement(react_base_table_1.AutoResizer, { className: "DetailsViewAutosizer", onResize: rebuildTooltip }, function (_a) {
+            var height = _a.height, width = _a.width;
+            return (react_1.default.createElement(react_base_table_1.default, { classPrefix: "DetailsViewTable", data: tableData, height: height, width: autoSizeWidth ? width : 1200, rowHeight: 46, overscanRowCount: 5, 
+                // Apply classes to the rows for styling
+                rowClassName: function (_a) {
+                    var rowIndex = _a.rowIndex;
+                    var className = 'EntityFinderDetailsViewRow';
+                    if (rowIndex % 2 === 0) {
+                        // Apply a class based on index so we can get alternating colors
+                        // We don't use CSSs nth-child because the rows are virtualized, so an even child might change to odd on-the-fly
+                        className += ' isEven';
+                    }
+                    return className;
+                }, 
+                // Apply aria roles to the rows for a11y/styling
+                rowProps: function (_a) {
+                    var rowData = _a.rowData;
+                    return {
+                        'aria-selected': rowData.isSelected,
+                        'aria-disabled': rowData.isDisabled,
+                        'aria-hidden': rowData.isHidden,
+                    };
+                }, headerCellProps: {
+                    role: 'columnheader',
+                }, 
+                // Sorting:
+                sortState: sortState, components: { SortIndicator: DetailsViewTableRenderers_1.CustomSortIndicator }, onColumnSort: function (_a) {
+                    var key = _a.key, order = _a.order;
+                    if (sort && setSort) {
+                        setSort(key, order === 'asc' ? synapseTypes_1.Direction.ASC : synapseTypes_1.Direction.DESC);
+                    }
+                }, onScroll: rebuildTooltip, rowEventHandlers: {
+                    onClick: function (_a) {
+                        var rowData = _a.rowData;
+                        var id = rowData.id, isDisabled = rowData.isDisabled, isVersionableEntity = rowData.isVersionableEntity;
+                        var currentSelectedVersion = rowData.currentSelectedVersion;
+                        if (!isDisabled) {
+                            if (isVersionableEntity &&
+                                mustSelectVersionNumber &&
+                                currentSelectedVersion == null &&
+                                Object.prototype.hasOwnProperty.call(rowData, 'versionNumber')) {
+                                currentSelectedVersion = rowData
+                                    .versionNumber;
+                                // Note that here we aren't handling the case where the header doesn't have a version, e.g. a search result
+                                // That case is actually handled by the VersionRenderer, which has an effect that will toggle the selection after data is fetched.
+                            }
+                            toggleSelection({
+                                targetId: id,
+                                targetVersionNumber: currentSelectedVersion === EntityFinder_1.NO_VERSION_NUMBER
+                                    ? undefined
+                                    : currentSelectedVersion,
+                            });
+                        }
+                    },
+                }, onEndReached: function () {
+                    if (hasNextPage && fetchNextPage && !isFetchingNextPage) {
+                        fetchNextPage();
+                    }
+                }, emptyRenderer: isLoading
+                    ? DetailsViewTableRenderers_1.LoadingRenderer
+                    : function () { return (react_1.default.createElement(DetailsViewTableRenderers_1.EmptyRenderer, { noResultsPlaceholder: noResultsPlaceholder })); } },
+                showSelectColumn && (react_1.default.createElement(react_base_table_1.Column, { key: "isSelected", title: "", minWidth: 50, maxWidth: 50, width: 50, dataKey: "isSelected", headerRenderer: SelectAllCheckboxRenderer, cellRenderer: DetailsViewTableRenderers_1.CheckboxRenderer })),
+                react_1.default.createElement(react_base_table_1.Column, { key: "type", title: "", minWidth: 45, maxWidth: 45, width: 45, dataKey: "entityType", cellRenderer: DetailsViewTableRenderers_1.TypeIconRenderer }),
+                react_1.default.createElement(react_base_table_1.Column, { key: synapseTypes_1.SortBy.NAME, title: "Name", width: 800, dataKey: "name", sortable: sort != null, resizable: true }),
+                react_1.default.createElement(react_base_table_1.Column, { key: "badge", title: "", width: 75, maxWidth: 75, minWidth: 75, cellRenderer: DetailsViewTableRenderers_1.BadgeIconsRenderer }),
+                react_1.default.createElement(react_base_table_1.Column, { key: "id", width: 120, dataKey: "id", title: "ID", minWidth: 120 }),
+                showVersionSelection && (react_1.default.createElement(react_base_table_1.Column, { key: "version", minWidth: 150, width: 500, title: "Version", cellRenderer: function (props) { return (react_1.default.createElement(DetailsViewTableRenderers_1.VersionRenderer, (0, tslib_1.__assign)({ mustSelectVersionNumber: mustSelectVersionNumber, toggleSelection: toggleSelection }, props))); }, headerRenderer: function () {
+                        return (react_1.default.createElement(react_1.default.Fragment, null,
+                            "Version",
+                            react_1.default.createElement(HelpButtonPopover_1.HelpButtonPopover, { contentMarkdown: 'Allows you to choose which version of this item you would like to perform this action on. If you would like the selected reference to update as new versions are created, choose “Always Latest Version”' })));
+                    } })),
+                react_1.default.createElement(react_base_table_1.Column, { key: synapseTypes_1.SortBy.CREATED_ON, sortable: sort != null, title: "Created On", width: 200, minWidth: 150, cellRenderer: DetailsViewTableRenderers_1.CreatedOnRenderer }),
+                react_1.default.createElement(react_base_table_1.Column, { key: synapseTypes_1.SortBy.MODIFIED_ON, title: "Modified On", width: 200, minWidth: 150, sortable: sort != null, cellRenderer: DetailsViewTableRenderers_1.ModifiedOnRenderer }),
+                react_1.default.createElement(react_base_table_1.Column, { key: "modifiedBy", title: "Modified By", width: 500, resizable: true, cellRenderer: DetailsViewTableRenderers_1.ModifiedByRenderer })));
+        }),
+        react_1.default.createElement(react_tooltip_1.default, { id: EntityBadgeIcons_1.ENTITY_BADGE_ICONS_TOOLTIP_ID, className: "EntityBadgeTooltip", delayShow: 100, place: 'right', effect: 'solid' })));
 };
 exports.DetailsView = DetailsView;
 //# sourceMappingURL=DetailsView.js.map